Cara membuat daftar isi dengan drop down

Selain scroll box, menu drop down juga sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak yang ingin tetap ditampilkan pada halaman tersebut.
Bedanya tampilan menu drop down lebih praktis dibanding dengan scroll box, dan menu drop down hanya berfungsi untuk membuat sebuah List atau daftar. Anda bisa gunakan menu drop down ini untuk membuat daftar isi pada web atau blog anda.
Bila anda berminat, dibawah ini adalah contoh bentuk menu drop down :


Judul Menu Drop Down

ARTIKEL : Cara buat web Cara dapat domain gratis Cara dapat hosting gratis Cara seting domain dihosting Cara dapat template gratis Cara Upload Template gratis Kumpulan tips

Berikut kodenya, silahkan anda bisa copy kodenya dan ganti ULR Artikel sert Judul Artikelnya:

<h3>Judul Menu Drop Down</h3>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu-drop-down"><option /> <h3>TUTORIAL BLOGGER</h3>
   
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>

</select></form>

Untuk menambahkan daftar, anda tinggal menambahkan lagi kode berikut :

<option value="ULR Artikel">Judul Artikel</option>

Mudah kan...??
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

---

Cara membuat background warna gradasi

Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera.
Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

1. Gradasi warna terang atas

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-atas
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%, #c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#c4d69f));
}
</style>

<div class="terang-atas">TEKS DISINI</div>

2. Gradasi warna terang bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="terang-bawah">TEKS DISINI</div>

3. Gradasi Horisontal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>

4. Gradasi Horisontal warna terang atas bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-atas-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="Horisontal-terang-atas-bawah">TEKS DISINI</div>

5. Gradasi Vertikal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-tengah">TEKS DISINI</div>

6. Gradasi Vertikal warna terang kanan kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop
(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>

7. Gradasi Vertikal warna terang kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-kiri">TEKS DISINI</div>

8. Gradasi Vertikal warna terang kanan

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="vertikal-terang-kanan">TEKS DISINI</div>

9. Gradasi Vertikal warna terang kanan

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Berikut kodenya :

<style type="text/css">
div.ellip-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius-topright: 700px 300px;
-webkit-border-radius-topright: 700px 300px;
-moz-border-radius-topleft: 700px 300px;
-webkit-border-radius-topleft: 700px 300px;
-moz-border-radius-bottomright: 700px 300px;
-webkit-border-radius-bottomright: 700px 300px;
-moz-border-radius-bottomleft: 700px 300px;
-webkit-border-radius-bottomrleft: 700px 300px;
padding: 40px;
margin-left: 60px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="ellip-terang-kanan">CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.</div>

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

---

Cara buat blog

Buat blog memang bukan suatu keharusan, tapi buat blog juga diperlukan. Disamping Gratis, mudah dan cepat, ada beberapa keuntungan lain bila kita buat blog atau memiliki sebuah blog.
Untuk apa kita buat blog ?, Blog bisa kita gunakan untuk keperluan pribadi atau sekedar penyalur hoby menulis atau apapun, Blog juga bisa kita gunakan sebagai sarana berbagi ilmu pengetahuan. Bahkan saat ini sudah tidak asing lagi bawha sebuah blog menjadi sarana bisnis. Para blogger buat blog dan memanfaatkannya sebagai penghasil uang. Apa anda berminat untuk buat blog?

Untuk buat blog kita gunakan saja layanan yang gratis seperti di blogger.com, wordpress.com, blogsome.com, dan layanan blog gratis lainnya.
Nah..., Seperti saya katakan diatas, cara buat blog sangat mudah, cepat dan gratis. Kita hanya perlu 3 langkah untuk buat blog, walaupun kita tidak memiliki pengetahuan programer sekalipun.

Bila anda berminat buat blog, dibawah ini saya berikan langkah - langkah cara buat blog menggunakan layanan gratis dari blogger.com :

1. Buat akun google.
Dengan akun google anda bisa menggunakan berbagai macam layanan dari google termasuk blog dari blogger.com. Bila anda belum punya akun google silahkan anda buat akun google menggunakan email dari gmail anda.

• Buat email DISINI
• Buat akun google atau langsung Login DISINI

Perhatikan gambar dibawah ini dan silahkan anda ikuti petunjuknya :

Setelah anda isi semua forum yang ada, kemudian "LANJUTKAN".

2. Buat nama blog.
Buatlah nama blog anda dengan nama yang mudah diingat dan familier ditelinga kita.

Apabila setelah nama blog yang anda masukkan tidak tersedia, silahkan anda coba terus dengan nama yang lain hingga berhasil. Tapi biasanya apabila nama yang anda masukkan tidak tersedia, Blogger akan memberi masukan atau saran nama alternatif. Dan kalau anda suka dengan nama yang disarankan, silahkan Klik dan lanjutkan. Tapi bila anda tidak suka silahkan anda cari dan masukkan nama yang lain.

Berikut gambar antara Tersedia dan tidak tersedia :

3. Pilih template.
Silahkan anda pilih template blog sesuai tema blog yang akan anda buat atau anda bisa pilih asal dulu, sebab anda bisa mengganti template lapan saja setelah blog anda jadi.

Inilah hasil blog yang baru dibuat, karena blog belun ada postingan jadi tampilan blog masih terlihat kosong :

Berikut hasil blog yang sudah ada postingan atau contoh artikelnya :

Anda bisa mengisi artikel atau entri sesuai hoby atau keperluan anda, dan anda bisa membuat blog anda lebih indah dengan mengedit atau memberi banyak asesoris blog pada blog anda.

Silahkan anda bisa lihat di menu "Tutorial blog" yang ada di blog ini. Blog ini banyak terdapat tutorial blog yang bisa anda gunakan sebagai panduan untuk mempercantik blog anda.
Anda juga bisa mengganti nama blog anda dari ".blogspot.com" mencadi ".co.cc", seperti http://rambak.co.cc, silahkan anda lihat panduannya dapat domain ".co.cc" DISINI dan "cara seting domain di blogger" DISINI

Mudah kan...? saya yakin anda bisa.

Selamat mencoba buat blog ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

HPFUXPEWM29A

Baca artikel lain :

---

Cara membuat tombol scroll "To Top"

Tombol "To Top" berfungsi untuk mengembalikan posisi halaman dari bawah sampai keatas sehingga bagian header web atau blog tampak seperti semula ketika kita baru membuka web atau blog tersebut.
Lebih jelasnya pada saat kita membaca artikel dan artikel tersebut panjang, sampai - sampai kadag kita ndak sadar sudah sampai jauh dibawah. Biasanya pengunjung yang sudah lelah membaca, juga males main scroll pada mousenya. Anda bisa lihat pada blog ini tombol "to top" ada disebelah kanan bawah.
Nah tombol ini bisa dimanfaatkan oleh pengunjung untuk mengembalikan halaman pada posisi semula.
Bila anda berminat silahkan anda ikuti langkah -langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :

]]></b:skin>

6. Sisipkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>  

/* to top */<br /> #toTop<br /> {<br /> width:60px;<br /> border-style:solid;<br /> border-color:rgb(225, 225, 225);<br /> text-align: center;padding:5px;position:fixed;bottom:10px;right:10px;<br /> cursor:pointer;color:#666;text-decoration:none;<br /> background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);<br /> background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));<br /> }<br />

7. Lalu cari kode lagi yang sama atau mirip dengan kode berikut :

</body>

8. Sisipkan kode dibawah ini sebelum atau diatas kode </body>

<a href="#" id="toTop"><img src="https://lh5.googleusercontent.com/-x9WGN4iLTIQ/TbB0RW2bnjI/AAAAAAAAAno/q43cMdMAUxI/s104/back%2Bto%2Btop.jpg" width="50" height="40" /></a><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script><br />

Catatan : Javascript diatas terselip informasi penciptanya, jadi anda tidak perlu menghapus dan biarkan saja. OK...

9. Simpan Template dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

---

Cara pasang tombol share

Menampilkan atau memasang Tombol share Social Bookmarking memang diperlukan sekali untuk kita yang sudah memiliki web ataupun blog. Hal ini sangat membantu untuk meningkatkan trafik atau pengunjung yang datang dari setiap Social Bookmarking. Seperti yang sudah kita ketahui bahwa hampir setiap Social Bookmarking, masing - masing sudah memiliki visitor yang sangat tinggi.
Jadi setiap artikel yang kita publikasikan, bisa langsung di sharing kesetiap Social Bookmarking dengan menggunakan Tombol share yang kita pasang. Dengan demikian tidak menutup kemungkinan ada visitor yang tertarik dengan artikel kita, dan langsung menuju web atau blog kita untuk membaca artikel yang kita sharing.

Ok..., bila anda berminat memasang Tombol share Social Bookmarking, anda bisa pilih dari dua properti Tombol share Social Bookmarking dibawah ini :

Gambar 1

(ada 6 Tombol share Social Bookmarking)

Gambar 2

(ada 100 lebih Tombol share Social Bookmarking)

Silahkan anda ikuti langkah -langkah cara pasang Tombol share Social Bookmarking :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut : 

<data:post.body/>

7. Sisipkan kode dibawah ini setelah kode <data:post.body/>  

Kode untuk Gambar 1 :

<b:if cond='data:blog.pageType == "item"'><br /> <div style='clear:both; '><b>Share this post :</b><br/><br /> <div style='width:60px; float:left;'><script type='text/javascript'> digg_url = '<data:post.url/>'; </script><br /> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div><div style='width:60px; float:left;'> <script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script><br /> </div><div style='width:65px; float:left;'><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div><div style='width:65px; float:left;'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div><div style='width:65px; float:left;'><a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external dofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div><div style='width:65px; float:left;'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external dofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div><div style='width:65px; float:left;'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div></div></b:if><br/>

Kode untuk Gambar 2 :

<b>Share this post:</b><br/> <div style='float:right;margin-right:10px;margin-top:20px;'><!-- AddThis Button BEGIN --><br /> <div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><br /> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b558593299fd997"></script></div><!-- AddThis Button END --><br /> <br /> </div>

Catatan : Bila blog anda sudah menggunakan properti "Read more", sisipkan kode tersebut setelah kode <data:post.body/> yang kedua.

8. Simpan Template dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, jangan khawatir... blog saya sudah Dofollow  hehehe...
Terima kasih.

Baca artikel lain :

---

Cara mencari kode HTML

Bagi kita yang mempunyai blog, hampir dipastikan selalu berhadapan dengan yang namanya kode HTML, Css, ataupun javascript. Untuk para senior Blogger memang asyik bermain kode - kode HTML, Css, ataupun javascript. Tapi bagi yang masih pemula, untuk mencari kode tertentu diantara sekian banyak kode HTML, Css, ataupun javascript yang ada, terkadang membuatnya pusing tujuh keliling hehehehe....

Nah... Sahabat blogger yang baik, bila anda termasuk yang masih bingung pada saat mencari kode tersebut, dibawah ini adalah cara cepat mencari kode HTML, Css, ataupun javascript yang ada pada template blog :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML :

 

4. Tekan tombol F3 atau Ctrl + F pada keyboard :

 

5. Masukkan kode pada kotak Find, sebelah kiri bawah layar komputer

Contoh :
Masukkan kode </head>, secara otomatis kode </head> yang dicari muncul dengan blok (Highlight) warna Hijau.
Perhatikan gambar berikut :

Nah.... mudah kan????
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, blog ini sudah Dofollow lho... hehehe...
Terima kasih.

Baca artikel lain :

---

Cara membuat Blog menjadi Dofollow

Soal Dofollow memang sudah banyak diulas oleh para senior Blogger. Dan umumnya blog mereka juga sudah mengikuti aliran Dofollow, sebab para senior Blogger sangat faham manfaat dan kelebihan mempunyai blog Dofollow. Secara ringkasnya demikian ; Bila blog anda Dofollow maka link atau ULR yang anda tinggalkan saat anda memberi komentar pada blog lain, secara otomatis akan terbaca oleh search engine google. Tapi bila blog anda Nofollow, maka akan berakibat sebaliknya. Jadi blog yang Dofollow sangat bagus bagi anda yang mau mengejar dan membangun SEO.

Nah... sekarang terserah anda, apa anda juga ingin ikut mempunyai blog Dofollow seperti blog saya ini?
Bila anda berminat silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut : 

<a expr:href='data:comment.authorUrl' rel='nofollow'>

7. Ganti kode diatas dengan kode dibawah ini :

<a expr:href='data:comment.authorUrl'>

8.  Lalu Simpan dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, sebab blog saya sudah Dofollow  hehehe...
Terima kasih.

Baca artikel lain :

---

Cara buat web

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Tak perlu khawatir kalau anda merasa sangat pemula dan belum tahu atau mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai : 
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis

Nah semua langkah diatas adalah cara buat web tanpa biaya sepeserpun alias serba gratis... tis... tis... tiiisss.
Oh iya.... untuk membuat nama domain, sebaiknya anda baca  artikel  Cara memilih nama Domain dan Cara Riset Topik Bisnis.

Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Mohon jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Keywords:  web, website, buat web, cara buat website, cara buat web gratis, cara buat web, cara buat wesite gratis, cara membuat web, cara membuat website, cara membuat website gratis

Baca artikel lain :

---

Cara membuat textarea dengan tombol "select all"

Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk mengcopy teks atau kode yang diberikan dalam textarea, dan pengunjung hanya tinggal mengklik tombol "select all" tersbut. Textarea ini bisa kita gunakan dalam posting seperti artikel ini ataupun kita bisa taruh pada sidebar, tergantung kebutuhan.

Lebih jelasnya lihat contoh bentuk textarea dibawah ini :

"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"

Ok... Bila anda berminat membuat textarea seperti ini, silahkan anda ikuti langkag - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<script type="text/javascript">

function selectAll(){
document.formtombol.textarea.focus();
document.formtombol.textarea.select();
}</script>

<style type="text/css">
div.textareatombol{
width:430px;
border:4px solid;
border-color:#D8D8D8;
background-color:#A4A4A4;
padding:10px;
}</style>

6. Simpan Template
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<center><div class="textareatombol">

<form name="formtombol" >
<textarea cols="50" rows="3" name="textarea">"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"</textarea>
</form>
<input type="button" name="selectit" value="Select All" onclick="selectAll ();">

</div></center>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara membuat effek scroll pada Titel Bar

Cara membuat effek scroll pada Titel Bar ini saya dapat dari blogger tip dan trik. Mudah - mudahan anda juga tertarik untuk memberi effek scroll pada titel bar seperti yang anda lihat di blog ini pada bagian atas, tepatnya bagian titel bar.
Cara buatnya sangat mudah, sebab kita tinggal menaruh kode javascript dibawah ini kedalam gadget. Silahkan anda ikuti langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget



4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script language=javascript> var rev = "fwd"; function titlebar(val) { var msg = "DISINI TEKS TITEL WEB ATAU BLOG ANDA"; var res = " "; var speed = 100; var pos = val; msg = " |--- "+msg+" ---|"; var le = msg.length; if(rev == "fwd"){ if(pos < le){ pos = pos+1; scroll = msg.substr(0,pos); document.title = scroll; timer = window.setTimeout("titlebar("+pos+")",speed); } else{ rev = "bwd"; timer = window.setTimeout("titlebar("+pos+")",speed); } } else{ if(pos > 0){ pos = pos-1; var ale = le-pos; scrol = msg.substr(ale,le); document.title = scrol; timer = window.setTimeout("titlebar("+pos+")",speed); } else{ rev = "fwd"; timer = window.setTimeout("titlebar("+pos+")",speed); } } } titlebar(0); </script><br />

 Keterangan :  

•  var speed = 100  adalah kecepatan effek scroll (bisa anda ubah nilainya).
•  Ganti " DISINI TEKS TITEL WEB ATAU BLOG ANDA" dengan titel web atau blog anda.

5. Simpan dan selesai.
Silahkan anda lihat hasilnya......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara membuat tanggal otomatis update

Masih dalam kategori css dan javascript, kali ini kita akan belajar membuat dan memasang tanggal otomatis update setiap saat yang bisa kita pasang pada web ataupun blog kita. Tampilan tangal ini sangat sederhana tapi tetap enak dipandang. Tidak ada salahnya kita pasang pada web atau blog kita, baik memang diperlukan atau hanya sekedar sebagai pelengkap asesoris saja.

Ok ... Bila anda berminat silahkan anda lihat tampilan tanggal dibawah ini :

Dan silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<style type="text/css"> div.tanggal { margin:15px; width:150px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; border:2px solid blue; padding:5px; }</style>

Catatan : Anda bisa merubah nilai "px" dalam kode diatas, dan mengganti warna border sesuai selera anda.

6. Simpan template.
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="tanggal"><center><script type='text/javascript'> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var daym=mydate.getDate() var month=mydate.getMonth() if (daym<10) daym="0"+daym var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu") var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember") document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>") </script></center></div>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Pop-up Window

Pop-up Window berfungsi menampilkan sebuah objek seperti halaman web, gambar atau dokumen yang lain pada jendela browser yang baru. Sehingga pembaca tidak kehilangan halaman yang sedang atau belum selesai dibaca. Dengan demikian pada saat bersamaan pembaca dapat membuka sebuah link tanpa harus meninggalkan halaman tersebut.
Belajar JavaScript kali ini akan memberi contoh penggunaan JavaScript Pop-up Window untuk  menampilkan sebuah objek gambar.

Perhatikan contoh dibawah ini :

Berikut kode JavaScript Pop-up Window contoh diatas :

<script type="text/javascript">
function open_gambar()
{
window.open("https://lh5.googleusercontent.com/-11ZXOu0vmJ4/Tamx8COnUYI/AAAAAAAAAl4/kijyxzscHEY/s400/Logo%2Bcara%2Bbuat%2Bweb%2Bgratis.jpg"," _blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>

<center>
<img border="0" height="200" src="https://lh5.googleusercontent.com/-11ZXOu0vmJ4/Tamx8COnUYI/AAAAAAAAAl4/kijyxzscHEY/s100/Logo%2Bcara%2Bbuat%2Bweb%2Bgratis.jpg" width="200" />
<form>
<input type="button" value="Perbesar Gambar" onclick="open_gambar()">
</form>
</center>

Catatan : Ganti Ulr lokasi gambar dengan milik anda.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Read more

Read more sangat berguna khususnya untuk menghemat tempat. Selain itu memudahkan para pengunjung web atau blog untuk memilih artikel yang disukai dan membacanya. Hampir para blogger sudah menggunakan fasilitas read more ini.
Bila anda berminat untuk membuat read more, silahkan anda  ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang mirip dengan kode ini : <data:post.body/>

6. Jika anda sudah ditemukan kode diatas, silahkan anda ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "item"'><br /> <style>.fullpost{display:inline;}</style><br /> <p><data:post.body/></p><b:else/><br /> <style>.fullpost{display:none;}</style><br /> <p><data:post.body/><br /> <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p></b:if>

7. Simpan Template.

Langkah selanjutnya, pergi ke Dasboar, lalu pilih Pengaturan, selanjutnya pilih Format.
Dibagian paling bawah teks area kosong bertuliskan Template Posting, lalu tuliskan kode berikut :

<span class="fullpost"></span>

8. Setelah itu Simpan.

Langkah berikutnya, silahkan anda posting baru, pada kolom Edit HTML, bukan di kolomTulis.
Ketika di buka halaman posting pada kolom Edit Html, Kode tersebut (<span class="fullpost"></span>), akan keluar secara Otomatis.
Anda tinggal memasukkan artikel mana yang ingin di tampilkan pada haman depan, dan mana artikel yang tampil setelah read more.

Berikut contoh penulisan artikel sesudah menggunakan read more :

Saya membuat posting baru, dan saya menulisnya di kolom Edit HTML bukan di Tulis / Compose.

"Diantara anda dan saya kira-kira gantengan mana ya.....
<span class="fullpost">
Kalau gantegan anda, ya.....bersyukurlah.....hehehe....
</span>

Maka, setelah dipublikasikan akan menjadi seperti ini :

Diantara anda dan saya kira-kira gantengan mana ya.....
Read More...

Ok...., Mudah - mudahan faham ya....?
Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Menghilangkan Navbar Pada blogger

Navbar adalah sebuah fasilitas yang dimiliki oleh Blogger/blogspot, berbentuk kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas  blog. Fungsi dari navbar antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Tapi bila kita merasa terganggu dengan adanya navbar tersebut, kita juga bisa menghilangkan navbar tersebut atau hanya sekedar menyembunyikan navbar saja
Nah...itu terserah anda...

Bila anda berminat untuk menghilangkan navbar tersebut, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login dulu di Blogger.com dengan ID anda
2. Trus Pilih Layout / Rancangan lalu buka  Edit HTML
3. Silahkan anda cari kode seperti atau mirip dengan kode dibawah ini :

Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.the-lola-generation.co.cc
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions

Copy kode dibawah ini :

#navbar-iframe {display: none !important;}

Dan sisipkan kode diatas hingga hingga tampak seperti dibawah ini :

Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.the-lola-generation.co.cc
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {display: none !important;}

/* Variable definitions

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Navbar Auto-Hide

Selain ada yang menghilangkan Navbar, ada juga yang hanya menyembunyikan Navbarnya. Nah cara ini juga banyak diminati para blogger untuk menghindari pengunjung yang  jahil. Sehingga navbar dibuat tidak kelihatan, namun navbar tetap tidak hilang.

Dengan mengarahkan kursor mouse kita ke arah navbar (bagian atas blog) yang kita sembunyikan tadi, akan secara otomatis akan kelihatan. Untuk lebih jelasnya, lebih baik saya tulis dech langkah-langkahnya.
Bila berminat, silahkan anda bisa ikuti langkah berikut :
1. Login ke Blogger.
2. Klik Tata Letak/layout/rancangan.
3. Klik Edit HTML.
4. Lalu cari kode ]]></b:skin> (tekan F3 di keyboard atau ctrl+f) lalu kopi-paste dibawah ini, tepat di atas kode ]]></b:skin>   :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Klik Simpan Template.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Forum Login

Untuk membuat forum login banyak langkah yang bisa kita pakai. Kita bisa membuat forum tersebut menggunakan layanan gratis. Tapi bila anda ingin membuat forum login yang digunakan untuk masuk ke blogger dengan akun google, dibawah ini adalah  kode yang biasa anda gunakan. Andabisa memasang forum loginnya di side bar, atau dimana saja sesuai selera anda.
Bila anda berminat, silahkan anda copy kode berikut :

<form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

Ok...., Silahkan anda coba dan Semoga bermanfaat....

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara agar postingan tidak dapat di Copy Paste

Bila anda menginginkan karya maupun postingan atau apapun yang tampilkan di web atau blog tdak bisa di copy paste oleh pengunjung, berikut cara membuatnya.  Silahkan anda ikuti langkah - langkahnya :

1. Masuk ke Dasbor
2. Klik tab Tata Letak/Layout/Rancangan
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan anda cari kode <head>
6. Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode <head>".

<SCRIPT type="text/javascript"> if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } </SCRIPT>

7. Klik Simpan Template.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Membuat pesan selamat datang pada Blog

Pesan selamat datang berguna untuk memberikan ucapan salam pada pengunjung yang datang pada blog kita. Selain selamat datang, kita juga bisa memberi salam berpisah pada pengunjung pada saat akan meninggalkan blog kita.
Bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Silahkan anda Login Blog anda
2. Pilih Layout
3. KlikEdit HTML
4. Lalu masukkan kode dibawah ini dibawah kode <head>

<script type='text/javascript'> alert("Selamat datang di blog Cara buat web gratis..., Jangan lupa komentarnya ya..")</script>

Nah..., kita sudah membuat ucapan selamat datang. Dan seperti yang saya sebutkan diatas, kita juga bisa memberi ucapan selamat berpisah atau pesan apa saja, ketika pengunjung  meninggalkan blog kita.
Caranya sama dengan yang diatas, kita tinggal  taruh kode dibawah ini setelah kode selamat datang yang anda taruh tadi :

<script type='text/javascript'> // goodbye alert function goodbye(){alert(' Jangan lupa mampir lagi ya.... ');} parent.window.onunload=goodbye;</script>

Nah.... nantinya kode-kode tersebut akan terlihat seperti dibawah ini :

<script type='text/javascript'>
alert(&quot;Selamat datang di blog Cara buat web gratis..., Jangan lupa komentarnya ya..&quot;)
</script>

<script type='text/javascript'>

// goodbye alert function goodbye(){alert(&#39; Jangan lupa mampir lagi ya.... &#39;);}

parent.window.onunload=goodbye;</script>

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Text Area blok Otomatis

Ketika kita sedang berkunjung disuatu situs, kadang kita diberikan suatu kode html atau java script. Entah itu kode baner atau apalah yang penting kode-kode yang berada pada sebuah kotak. Dan kode tersebut secara otomatis terblok sendiri, hanya dengan menggerakkan mouse diatas kotak area berisi kode-kode tersebut, itulah yang dinamakan Teks Area Blok Otomatis. Saya yakin anda sudah pernah menjumpai yang namanya teks area blok otomatis. 

Naah.....contohnya coba anda gerakkan mouse diarea teks dibawah ini :

Ini kode bukan sembarang kode....,tolong jangan diklik mouse mu ke area ini kalo ndak ingin terblok...!!!! Lho...lho....lho....lhooooo.....di bilang jangan ngeKlik mouse di area ini....malah ndak percaya

Lho kerren kan....? Sory lho anda habis dimarain ya..... karena nggerakin mouse di area tadi....Bercanda....

Silahkan anda copy and paste saja kode kode berikut :

<div> <form name="noer cholis"> <p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 200; height: 30" name="txt" rows="3" cols="45" onmouseover="this.form.txt.select()" readonly ;> TEKS KAMU DISINI</textarea></p> </div>

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

Cara Membuat Navigasi Halaman

Cara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan nomor urut semua halaman yang ada, widget ini juga dilengkapi dengan tombol "Next" dan "Previous".
Bila anda berminat silahkan ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Edit HTML.

3. Sebaiknya Download Template Lengkap (back-up Template)terlebih dulu, agar template aman, bila terjadi kesalahan.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat diatas kode ]]></b:skin> :

.showpageArea a {<br /> text-decoration:underline;<br /> }<br /> .showpageNum a {<br /> border:1px solid #CCCCCC;<br /> margin:0 3px;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpageNum a:hover {<br /> background-color:#CCCCCC;<br /> border:1px solid #CCCCCC;<br /> }<br /> .showpagePoint {<br /> -moz-background-clip:border;<br /> -moz-background-inline-policy:continuous;<br /> -moz-background-origin:padding;<br /> background:#CCCCCC none repeat scroll 0 0;<br /> border:1px solid #CCCCCC;<br /> color:#333333;<br /> margin:0 3px;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpageOf {<br /> margin:0 3px 0 0;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpage a {<br /> border:1px solid #CCCCCC;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpage a:hover {<br /> text-decoration:none;<br /> }<br /> .showpageNum a:link, .showpage a:link {<br /> color:#333333;<br /> text-decoration:none;<br /> }

6. Simpan template.
7. Setelah template tersimpan lalu pilih Elemen Laman.
8. Tambah Gadget yang ada dibawah blog post.
9. Pilih "html/java script".
10.Copy Kode dibawah ini dan paste pada gadget tersebut:

<script type='text/javascript'> var home_page_url = location.href; var pageCount=1; var displayPageNum=3; var upPageWord ='Previous'; var downPageWord ='Next'; function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount; } } itemCount++; } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ html += '<span class="showpageNum"><a href="/">1</a></span>'; }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } } } if(thisNum>1){ html = ''+upPageHtml+' '+html +' '; } html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount; } } itemCount++; } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } } } if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } </script><br /> <script type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf("/search/label/")!=-1){ if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max")); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max")); } } var home_page = "/"; if (thisUrl.indexOf("?q=")==-1){ if (thisUrl.indexOf("/search/label/")==-1){ document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>') }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>') } } </script>

11.Simpan dan selesai.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---

CSS Dimensi

Fitur CSS Dimensi berfungsi untuk mengontrol tinggi dan lebar suatu elemen seperti gambar dan paragraf teks. Baik Mengatur tinggi dari suatu elemen dengan menggunakan persen, Mengatur lebar suatu elemen menggunakan nilai piksel, Mengatur tinggi dan lebar maksimum atau minimum suatu elemen.

Berikut contoh penggunaan Fitur CSS Dimensi pada gambar :

<style type="text/css">
img.normal {height:auto;}
img.kecil {height:10%;width:10%;}
img.besar {height:150px;width:150px;}
</style>

<img class="normal" src="https://lh5.googleusercontent.com/-UdrRq10xvcM/TYBh0pW-X2I/AAAAAAAAAjY/lMp6tjwBoWA/s100/css.jpg" />

<img class="kecil" src="https://lh5.googleusercontent.com/-UdrRq10xvcM/TYBh0pW-X2I/AAAAAAAAAjY/lMp6tjwBoWA/s100/css.jpg" />

<img class="besar" src="https://lh5.googleusercontent.com/-UdrRq10xvcM/TYBh0pW-X2I/AAAAAAAAAjY/lMp6tjwBoWA/s100/css.jpg"/>

Berikut hasilnya :

Catatan : Untuk satuan nilai bisa menggunakan Pixel ataupun % , dan Ulr image silahkan anda ganti dengan milik anda.

Berikut contoh penggunaan Fitur CSS Dimensi pada Teks :

1. Lebar Maksimum

<style type="text/css">
div.Teks
{

max-width:150px;

}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px</div>

 Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px

2. Tinggi Maksimum

<style type="text/css">
div.Teks-B
{
max-height:50px;
}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px</div>

Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

---