Membuat Text Box Dengan Efek Hover dengan CSS 3

Setelah beberapa hari gak posting karena baru pengisian jadwal baru untuk semester 4 yang merepotkan dikarenakan dalam masa transisi kurikulum baru dan Pada kesempatan kali ini saya akan posting mengenai Membuat Text Box Dengan Efek Hover dengan CSS 3 Ok ngak perlu panjang lebar langsung saja simak

 Seperti biasa Login ke Akun Blogger sobat

Klik Template >> Klik Edit HTML >> Jangan Lupa Centang Expand Widget Template >> Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
(gunakan CTRL + F untuk mempermudah)

.KTboxmessage{color: white;background-color: black;width: 500px;margin: 5px 60px;padding: 20px 20px 20px 20px;border: 2px dotted lightgrey;border-radius: 10px;box-shadow: -1px -1px 12px 2px gainsboro;transition: background-color .777s;-webkit-transition: background-color .777s;-moz-transition: background-color .777s;-o-transition: background-color .777s;-ms-transition: background-color .777s;}.KTboxmessage:hover{background-color: CornflowerBlue ;}.KTboxmessage:active{background-color: darkgreen ;}

 Klik Save

 Klik Save
Keterangan :
Untuk Penulisan do dalam postingan atau widget gunakan kode :

<div class="KTboxmessage" style="font-family: &quot;Courier New&quot;,Courier,monospace;">LetakanTulisan Atau Kode Disini</div>

Read more →

Cara Membuat Daftar Link Teman Berjalan

• Login ke Blogger

• Pergi Ke Tata Letak  >> Tambah Gaget >> HTML/Java Script

• Copy Kode Di Bawah Ini lalu Pastekan ke kotak script yg tersedia.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="210">

<a href="URL Blog Teman" rel="dofollow">Link1</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link2</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link3</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link4</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link5</a>

</marquee>

Jika Sobat ingin menambahkan lagi copy kode berikut sebelum kode </marquee>

<br /><a href="URL Blog Teman" rel="dofollow">Link6</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link7</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link8</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link9</a>
<br /><a href="URL Blog Teman" rel="dofollow">Link10</a>

Simpan Dan Hasilnya

Read more →

Cara Mudah Membuat Gambar Berdampingan atau Sejajar di Blog

Bagi Kamu yang bingung bagaimana cara Membuat Gambar Berdampingan atau Sejajar di Blog? nah kali ini Saya akan share caranya. Membuat Gambar Berdampingan atau Sejajar di Blog sangat diperlukan di blog karena dapat mempercantik blog dan juga dapat menghemat ruang di blog, Kamu bisa menempatkan gambar tersebut di sidebar maupun diposting ataupun disebuah laman, dan Kamu juga bisa menempatkan sebuah widget berdampingan, seperti rank alexa blog Saya dan Histats Saya letaknya berdampingan atau sejajar.

Untuk caranya ikuti tutorial dibawah ini :

1. Log in ke Blogger Kamu
2. Lalu Pilih tata letak, lalu klik tambah gadget
3. Pilih dan klik html/javascript
4. Lalu Masukan kode dibawah ini :
<table><tr>
<td>Url Widget atau Gambar Anda 1</td>
<td>Url Widget atau Gambar Anda 2</td>
<td>Url Widget atau Gambar Anda 3</td>
</tr></table>

Keterangan :

• Ganti yang berwarna biru dengan url gambar atau widget
• Jika Kamu ingin sejajar lebih dari tiga, tinggal tambahkan aja lagi yang nomor satu dibawah nomor tiga, dst,,,
5. Mudahkan, Selamat Mencoba :

Read more →

Berbagai kode Scrollbox untuk Posting

Pemanfaatan ruang posting mejadi satu faktor yang harus diperhatikan oleh blogger, terutama apabila posting artikel sangat panjang. Bentuk posting yang terlalu panjang selain tidak effektif dalam pemanfaatan halaman blog, dampak negatifnya adalah sering membuat pengunjung blog menjadi "malas" untuk melihat atau bahkan membaca hingga tuntas. Untuk mengatasi permasalahan seperti ini scrollbox menjadi satu solusi paling tepat. Sebenarnya scrollbox bisa dibuat dalam berbagai macam variasi, terutama berkaitan dengan imporovisasi warna, seperti halnya background, border, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-highlightcolor, scrollbar-shadow-color. Sayangnya untuk sementara ini hanya IE dan Opera yang sudah support terhadap css properti scroller bar. Apabila anda ingin menggunakan scrollbox yang kompatible untuk semua browser, KODE di bawah ini bisa anda manfaatkan saat membuat posting.

Scroller bar sederhana.

Kerakusan membuat orang buta. Bukan buta matanya, tetapi hati dan jiwanya tidak bisa lagi melihat mana yang benar dan mana yang salah. Rupanya penyakit seperti ini sudah diidap banyak pejabat penting di negara kita. Mereka yang sudah hidup berkecukupan masih tega untuk mengkorupsi uang negara tanpa pernah merasa prihatin terhadap rakyat yang semakin menderita. Bagaimana kita harus menyikapi perilaku gila ini? Setiap orang tentunya melihat secara berbeda. Ada yang marah tetapi diam saja. Ada yang harus teriak dengan sekencang-kencangnya sambil membawa spanduk hujatan, tetapi ada pula yang hanya diam seribu bahasa karena tak lagi peduli.

xHTML :

<div style="height:50px;width:auto;padding:10px;margin:20px 0;overflow:auto;">
Kerakusan membuat orang buta. Bukan buta matanya, tetapi hati dan jiwanya tidak bisa lagi melihat mana yang benar dan mana yang salah. Rupanya penyakit seperti ini sudah diidap banyak pejabat penting di negara kita. Mereka yang sudah hidup berkecukupan masih tega untuk mengkorupsi uang negara tanpa pernah merasa prihatin terhadap rakyat yang semakin menderita. Bagaimana kita harus menyikapi perilaku gila ini? Setiap orang tentunya melihat secara berbeda. Ada yang marah tetapi diam saja. Ada yang harus teriak dengan sekencang-kencangnya sambil membawa spanduk hujatan, tetapi ada pula yang hanya diam seribu bahasa karena tak lagi peduli.
</div>

Scroller bar dengan border :

Skandal Bank Century ternyata melibatkan banyak petinggi negeri tercinta. Mungkinkah kasus ini akan terungkap secara total?
Skandal Bank Century ternyata melibatkan banyak petinggi negeri tercinta. Mungkinkah kasus ini akan terungkap secara total?
Skandal Bank Century ternyata melibatkan banyak petinggi negeri tercinta. Mungkinkah kasus ini akan terungkap secara total?
Skandal Bank Century ternyata melibatkan banyak petinggi negeri tercinta. Mungkinkah kasus ini akan terungkap secara total?

xHTML :

<div style="height:50px;width:100px;border:2px solid green;padding:10px;margin:20px 0;overflow:auto;">
Skandal Bank Century ternyata melibatkan banyak petinggi negeri tercinta. Mungkinkah kasus ini akan terungkap secara total?
</div>

Scroller bar dengan border dan background color :

Keboborokan mental bangsa, terutama para pejabat tinggi negeri ini tidaklah bisa berubah hanya dengan kenaikan gaji mereka. Kerusakan mental yang parah tidak akan mampu dihilangkan dengan bertambahnya kesejahteraan. Lihat saja mereka yang saat ini sudah kaya raya nyatanya tetap doyan korupsi. mental "bodol" hanya sembuh ketika maut menjemput.

xHTML :

<div style="height:100px;width:200px;background:#b8f8ab;border:6px double #996666;padding:10px;margin:20px 0;overflow:auto;">
Keboborokan mental bangsa, terutama para pejabat tinggi negeri ini tidaklah bisa berubah hanya dengan kenaikan gaji mereka. Kerusakan mental yang parah tidak akan mampu dihilangkan dengan bertambahnya kesejahteraan. Lihat saja mereka yang saat ini sudah kaya raya nyatanya tetap doyan korupsi. mental "bodol" hanya sembuh ketika maut menjemput.
</div>

Scroller bar dengan background image dan padding :

Rupanya tiket neraka tidak lagi mahal. Terjadi penurunan yang sangat drastis dibandingkan seribu tahun yang lalu ketika orang tak perlu naik mobil, kapal atau pesawat terbang atau harus menyekolahkan anak dan membangun villa di Puncak serta sebuah pabrik besar guna diwariskan ke anak cucu. Harga tiket neraka yang sangat jauh lebih murah bila dibandingkan dengan jaman dahulu kala terlihat dengan semakin banyaknya petinggi negeri dan anak buahnya yang begitu senang makan uang negara demi hidup melimpah.

xHTML :

<div style="height:100px;padding:6px;width:400px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0-PQPSrhniYuJ2Ycr9ZizgRJ5jPozNXBLf4FaoZUG7o7ARVbUmUEDY06VMUQc7DmMyEj8dQq8vyV8P9MF3wtdPN2BvgP1XiP4GZ5oWXHBG6Zq6GdiguethBZ6aw5INoBpca_Mu4Bl4M/s400/img_gubhugreyot-bali-dance.jpg) center center;border:8px ridge #CC3366;overflow:auto;">
Rupanya tiket neraka tidak lagi mahal. Terjadi penurunan yang sangat drastis dibandingkan seribu tahun yang lalu ketika orang tak perlu naik mobil, kapal atau pesawat terbang atau harus menyekolahkan anak dan membangun villa di Puncak serta sebuah pabrik besar guna diwariskan ke anak cucu. Harga tiket neraka yang sangat jauh lebih murah bila dibandingkan dengan jaman dahulu kala terlihat dengan semakin banyaknya petinggi negeri dan anak buahnya yang begitu senang makan uang negara demi hidup melimpah.
</div>

Keterangan :

1. Gunakan xHTML di box posting atau pada bagian lain blog seperti "Add a Gadget".
2. Beberapa property seperti width, height, border dan yang lain dapat dirubah untuk disesuaikan dengan kebutuhan blog.

Read more →

Kolom Posting dg Background Transparan

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai background dengan effek transparansi adalah sebuah gambar mobil atau sesuatu yang berkaitan dengan artikel tersebut.

Kode CSS :

#GRkolomku{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSkn-dcVTO6MG-V_P1XrK57ebb6X-U_MiWywc75VbHQZ2T9XnvmMbPYLhk8nBCym-d_PH5eE2LlQEnY8G31Zm9txnopawB5SG3xBfd2f9TEdYu9dIaNMscPWB0GwMsQfbWFaG3y0tzciI/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y;  /* berulang secara vertikal */
        background-size:100% auto;  /* mengatur ukuran background */
        position:relative; 
        width:100%;
        margin:-10px;  /* dapat disusuaikan dengan halaman posting */
        padding:10px;  /* dapat disusuaikan dengan halaman posting */
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background:#000;  /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee;  /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Letakkan Artikel di sini!
</div>
</div>

Cara Membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Sebagian keterangan sudah tertulis dalam kode CSS.
2. Jika menggunakan background image dengan ukuran kecil, rubah :
   - background-size:100% auto; menjadi » background-size:(image-width)px auto;
   - background-repeat:repeat-y; menjadi » background-repeat:repeat;
   - Selain dengan cara di atas, dapat juga dilakukan dengan menghapus:
   - background-position:top center;, background-size:100% auto; dan background-repeat:repeat-y;
3. Warna background dan warna teks dapat diganti dengan merubah :
   - background-color:#000;
   - color:#eee;

Read more →

Show and Hide Image With Effect

This summary is not available. Please click here to view the post.

Read more →

Desember CSS Gallery Spesial

CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.

Kode CSS :

#album{
        width:750px;
        height:1025px;
        margin:0 auto;
        position:relative;
        font-family:verdana, arial, sans-serif;
        background:#f8f8f8;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
}
#album #thumbs{position:absolute; left:0; top:0; height:190px; width:750px; overflow:hidden; text-align:center; z-index:500;}
#album #thumbs div{width:750px; height:270px; position:relative; padding-top:10px;}
#album #thumbs div ul{padding:0; margin:0 auto; list-style:none; width:684px;}
#album #thumbs div ul li{float:left; padding:10px 0 5px 1px; margin:0 1px 0 1px;}
#album #thumbs div ul li a{display:block; width:88px; height:139px; float:left; border:3px solid #FFFFCC;} /* tinggi - lebar bingkai thumnail */
#album #thumbs div ul li a b{display:none;}
#album #thumbs div ul li a.prev{background:url(https://lh6.googleusercontent.com/-buPnfhNt5Y8/T2vuVYNNpaI/AAAAAAAAAec/W7SmcpIU-aM/h120/prev-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a.next{background:url(https://lh3.googleusercontent.com/-SXF_VlYzPjU/T2vuWQAu22I/AAAAAAAAAek/0jUqBQok8u8/h120/next-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a img{display:block; width:88px; height:139px; border:0; opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=50);} /* tinggi-lebar thumbnail dan transparansi */
#album #thumbs div ul li a:hover img{  opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100); } 
#album #thumbs div ul li a:focus{outline:0;}
#album #fullsize{position:absolute; left:0; top:0; height:1025px; width:750px; overflow:hidden; text-align:center; z-index:200;} /* tinggi - lebar seluruh kolom album */ 
#album #fullsize div{width:750px; height:1025px; padding-top:170px; position:relative; background:#333333;} /* bingkai image preview */
#album #fullsize div img{clear:both; display:block; margin:0 auto; border:10px solid #fff; width:480px; height:710px; position:relative;} /* tinggi - lebar image show/preview */
#album #fullsize div h3{padding:10px 0 0 0; margin:0; font-size:18px; color:#33FF66;} /* h3 */
#album #fullsize div p{padding:5px 0; margin:0; font-size:12px; line-height:18px; color:#33CCFF;}

xHTML :

<div id="album">
<div id="thumbs">
<div id="thumb1">
<ul>
<li><a href="#thumb10" class="prev"><b>prev</b></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#thumb2" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb2">
<ul>
<li><a href="#thumb1" class="prev"><b>prev</b></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#thumb3" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb3">
<ul>
<li><a href="#thumb2" class="prev"><b>prev</b></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#thumb4" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb4">
<ul>
<li><a href="#thumb3" class="prev"><b>prev</b></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#thumb5" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb5">
<ul>
<li><a href="#thumb4" class="prev"><b>prev</b></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#thumb6" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb6">
<ul>
<li><a href="#thumb5" class="prev"><b>prev</b></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#thumb7" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb7">
<ul>
<li><a href="#thumb6" class="prev"><b>prev</b></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#thumb8" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb8">
<ul>
<li><a href="#thumb7" class="prev"><b>prev</b></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#thumb9" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb9">
<ul>
<li><a href="#thumb8" class="prev"><b>prev</b></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Winterbranches" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#thumb10" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb10">
<ul>
<li><a href="#thumb9" class="prev"><b>prev</b></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#thumb1" class="next"><b>Next</b></a></li>
</ul>
</div>
</div>
<div id="fullsize">
<div id="gbr1">
<img src="URL-image1.jpg" alt="Title Image-1" />
<h3>Title Image-1</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr2">
<img src="URL-image2.jpg" alt="Title Image-2" />
<h3>Title Image-2</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr3">
<img src="URL-image3.jpg" alt="Title Image-3" />
<h3>Title Image-3</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr4">
<img src="URL-image4.jpg" alt="Title Image-4" />
<h3>Title Image-4</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr5">
<img src="URL-image5.jpg" alt="Title Image-5" />
<h3>Title Image-5</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr6">
<img src="URL-image6.jpg" alt="Title Image-6" />
<h3>Title Image-6</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr7">
<img src="URL-image7.jpg" alt="Title Image-7" />
<h3>Title Image-7</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr8">
<img src="URL-image8.jpg" alt="Title Image-8" />
<h3>Title Image-8</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr9">
<img src="URL-image9.jpg" alt="Title Image-9" />
<h3>Title Image-9</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr10">
<img src="URL-image10.jpg" alt="Title Image-10" />
<h3>Title Image-10</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
</div>
</div>

Cara membuat image gallery :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML melalui "Add a Gadget atau posting box.

Catatan/Keterangan :

1. Image berukuran : 480 x 710 (px) » URL-image1.jpg s/d URL-image10.jpg
2. Thumbnail berukuran : 88 x 139 (px) » URL-thumb1.jpg s/d URL-thumb10.jpg

Read more →

Buat box teks di ruang posting

Box teks di ruang posting bisa dipergunakan untuk tempat meletakkan teks yang bersifat khusus sehingga terpisah dari teks lainnya. Ada berbagai style box yang bisa disesuaikan dengan seberapa besar box yang ingin digunakan. Pada beberapa posting dengan teks yang sangat panjang, box yang dilengkapi dengan scroller juga sangat bermanfaat untuk effisiensi ruang. Agar box kelihatan lebih menarik, box bisa dilengkapi dengan border style, background dan border radius serta beberapa properi css yang lain.

1. Box sederhana :

Tinggi box akan bertambah sejalan dengan bertambahnya isi/content.

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:2px solid #eee;width:300px;margin:15px auto;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

2. Box dengan background dan color :

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:2px solid #eee;width:400px;margin:15px 0;background:#999;color:#000;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

3. Box dengan border lengkung :

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:400px;margin:15px 0;background:#999;color:#000;border-radius:10px;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

4. Box dengan overflow (Scrollbox):

Box akan mempunyai ketinggian tertentu sekalipun konten didalamya hanya sedikit. Jika konten melebihi daya tampung maka overflow akan bekerja.

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;height:100px;overflow:auto;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;height:100px;overflow:auto;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

4. Box dengan auto max-height :

Tinggi box flexible sehingga ketika isi dalamnya sedikit maka box bertambah pendek. Overflow hanya akan terlihat setelah kontent melebihi daya tampung box.

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;max-height:200px;overflow:auto;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;max-height:200px;overflow:auto;">Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!

Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!! Beli daging sapi - Buat tusuk sate - buat bumbu sate - Potong-potong daging - Siapkan arang - Bakar sate - Makan - Perut kenyang - Tidur!!!!
</div>

Read more →

Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.

Cara menggunakan Original Size Image on Mouseover :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)"

Kode CSS :

.GRzoomer_css{
        float:left;
        clear:left;
        padding-bottom:5px;
        padding-right:5px;
}
.GRzoomer_css a{
        display:block;
        text-decoration:none;
}
.GRzoomer_css a:hover{
        position:relative;
}
.GRzoomer_css span img{
        border:8px ridge #fff;
        margin-bottom:8px;
}
.GRzoomer_css a span{
        position:absolute;
        display:none;
        width:auto;
        color:#ffcc00; /* warna caption */
        text-decoration:none;
        font-family:"MS Serif", "New York", serif;
        font-size:14px; /* ukuran teks caption */
        background:rgba(0,0,0,0.5);
        font-weight:bold;
        padding:6px 4px;
}
.GRzoomer_css a:hover span{
        border:4px solid #930;
        border-radius:10px;
        display:block;
        position:absolute;
        left:30px;
        top:-150px;
        z-index:100;
}
.GRzoomer_css a:hover span img{
        border-radius:6px;
}
.GRzoomer_css_thumb{
        width:100px;
        margin:5px 12px 5px 0;
        padding:5px;
        background:#ddd;
        border:1px solid #06C;
        border-radius:4px;
        height:auto;
        opacity:0.65;
        filter:alpha(opacity=65);
}
.GRzoomer_css_thumb:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
  z-index:999; 
}

xHTML :

<div class="GRzoomer_css">
<a href="URL-1"><img src="image-1.jpg" class="GRzoomer_css_thumb" /><span><img src="image-1.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="http://har-bloggerstars.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OeNMDz5QHz4YbeqF4-ElXuiLJo298Ztj7m8opsu5Tikjfp1mVAo6jQGfsTCQ885BcIhyRa8cRA0MaCioFo55co-N66QoPZ-mORGqO9Q8pS2XYwHmakWE1DWrKo-sGpk3f83e9-Xez8/s1600/gbr3.jpg" class="GRzoomer_css_thumb"/> <span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OeNMDz5QHz4YbeqF4-ElXuiLJo298Ztj7m8opsu5Tikjfp1mVAo6jQGfsTCQ885BcIhyRa8cRA0MaCioFo55co-N66QoPZ-mORGqO9Q8pS2XYwHmakWE1DWrKo-sGpk3f83e9-Xez8/s1600/gbr3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="URL-3"><img src="image-3.jpg" class="GRzoomer_css_thumb" /><span><img src="image-3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>

Cara menggunakan xHTML :

1. Gunakan xHTML untuk posting.
2. URL-1 & URL-3 ...dst » dapat diisi dengan alamat web/blog, image, posting dll.
3. image-1.jpg & image-3.jpg ...dst » URL image.
4. Tambahkan teks ... dst » caption yang menerangkan tentang image atau yang berkaitan dengan URL.
5. Gunakan image dengan ukuran yang tak terlalu besar hingga semua bagian image tetap berada di halaman blog.
6. Hal yang belum jelas tentang backup template, cara cari kode dan cara menyimpan kode dapat dibaca di Special Tutorials pada menu di kolom sebelah kiri.

Read more →

Buat posting Image Cantik dg Border Radius

Gambar gambar di bawah ini hanyalah sebagian kecil dari begitu banyaknya kemungkinan lengkungan yang dapat dibuat. Silahkan anda kembangkan lagi menjadi benruk-bentuk lain yang jauh lebih menarik.

Kode CSS:

.GRphotoku{
       padding:1%;
       background:#eee;
       box-shadow:0 0 6px #444;
       margin:15px auto;
       display:block;
       text-align:center;
}

Kode CSS di atas digunakan jika semua gambar akan diposisikan ditengah-tengah. Jika menginginkan posisi gambar lebih feksibel (bisa kanan, kiri & tengah) gunakan kode CSS yang ada di

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 30% 50%; border-bottom-right-radius: 30% 50%; border-top-left-radius: 60% 40%; border-top-right-radius: 60% 40%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%;box-shadow:0 0 8px #000;border-top-left-radius:50% 50%; border-top-right-radius: 50% 50%;border:6px solid #222;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 265px; border-bottom-right-radius: 205px 265px; border-top-left-radius: 235px 130px; border-top-right-radius: 235px 130px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 140px; border-bottom-right-radius: 205px 140px; border-top-left-radius: 205px 140px; border-top-right-radius: 205px 140px; border:5px double #aaa; box-shadow: 0 0 8px #555;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 60% 70%; border-top-left-radius: 30% 50%; border-top-right-radius: 30% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 40% 50%;box-shadow:4px 4px 8px #000;border-top-left-radius: 60% 70%; border-top-right-radius: 40% 50%;border:6px solid #888;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="bord

Read more →

Buat Cursor Animasi ndul Gondal Gandul

Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?!

Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek pantul cursor serta beberapa yang lain. He ... lengkap banget, ya?!

Kode CSS :

.dot{
       position:fixed;
       padding:0;
       margin:0;
       border:0 solid;
       border-radius:6px;
       box-shadow:0 0 0 #fff;
       z-index:10;
}
#dot0{visibility: hidden;}

Kode CSS :

<script type="text/javascript">
//<![CDATA[
function elastic_trail() {
 var f = 8;  /* atur jumlah cursor image */
 var g = "http://gubhugreyot-icon.googlecode.com/svn/100.gif"; /* cursor image */
 var h = 0.01;
 var k = 35; /* jarak tiap cursor image */
 var l = 10;
 var m = 1;
 var o = 0;
 var p = 50;
 var q = 10;
 var r = 0.1;
 var s = 0.1;
 var t = 12; /* ukuran cursor image */
 var u = 0.75;
 var v = 0; /* setting yang lain silahkan lakukan percobaan sendiri, he ... he .... */
 var w = 0;
 for (var i = f - 1; i > -1; --i) {
  with(document) {
   write('<div class="dot" id="dot' + i + '">\n');
   write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
   write("</div>\n")
  }
 }
 /*@cc_on@*/
 /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
 var y = function () {
  return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
 };
 var z = document.layers ? "": "px";
 elastic_trail.prototype.dot = function (i) {
  this.X = v;
  this.Y = w;
  this.dx = 0;
  this.dy = 0;
  if (document.layers) {
   this.obj = document["dot" + i]
  } else {
   if (document.all) {
    this.obj = document.all["dot" + i].style
   } else {
    if (document.getElementById) {
     this.obj = document.getElementById("dot" + i).style
    } else {
     return
    }
   }
  }
 };
 var A = new Array();
 for (var i = 0; i < f; i++) {
  A[i] = new this.dot(i)
 }
 for (i = 0; i < f; i++) {
  A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
  A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
 }
 var B = this;
 setInterval(function () {
  B.animate()
 },
 20);
 function MoveHandler(e) {
  v = e.pageX - pageXOffset;
  w = e.pageY - pageYOffset;
  return true
 }
 function MoveHandlerIE() {
  v = window.event.x;
  w = window.event.y
 }
 if (document.addEventListener) {
  document.addEventListener("mousemove", MoveHandler, false)
 } else {
  if (document.attachEvent) {
   document.attachEvent("onmousemove", MoveHandlerIE)
  } else {
   if (document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler
   }
  }
 }
 elastic_trail.prototype.vec = function (X, Y) {
  this.X = X;
  this.Y = Y
 };
 elastic_trail.prototype.springForce = function (i, j, a) {
  var b = (A[i].X - A[j].X);
  var c = (A[i].Y - A[j].Y);
  var d = Math.sqrt(b * b + c * c);
  if (d > k) {
   var e = l * (d - k);
   a.X += (b / d) * e;
   a.Y += (c / d) * e
  }
 };
 elastic_trail.prototype.animate = function () {
  var a = 0;
  A[0].X = v;
  A[0].Y = w;
  a = 1;
  for (var i = a; i < f; i++) {
   var b = new this.vec(0, 0);
   if (i > 0) {
    this.springForce(i - 1, i, b)
   }
   if (i < (f - 1)) {
    this.springForce(i + 1, i, b)
   }
   var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
   var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
   A[i].dx += (h * d.X);
   A[i].dy += (h * d.Y);
   if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
    A[i].dx = 0;
    A[i].dy = 0
   }
   A[i].X += A[i].dx;
   A[i].Y += A[i].dy;
   var e, width;
   if (window.innerWidth) {
    e = window.innerHeight;
    width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
   } else {
    e = y().clientHeight - Math.ceil(t / 2);
    width = y().clientWidth
   }
   if (A[i].Y >= e - t - 1) {
    if (A[i].dy > 0) {
     A[i].dy = u * -A[i].dy
    }
    A[i].Y = e - t - 1
   }
   if (A[i].X >= width - t) {
    if (A[i].dx > 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = width - t - 1
   }
   if (A[i].X < 0) {
    if (A[i].dx < 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = 0
   }
   A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
   A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
  }
 }
}
new elastic_trail();
//]]>
</script>

Cara Membuat :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard) » Klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Halaman Edit HTML :
   • Lakukan Backup template.
   • Cari kode ]]></b:skin>
   • Simpan kode CSS tepat di atas kode tersebut.
   • Cari kode <body>.
   • Simpan Javascript di bawah kode <body>.
5. Klik "Simpan Template (Save Template)".
6. Selesai!!!
7. Ndul gondal-gandul mulur mungkret! Hayo punya siapa, tuh?

Read more →

Cara Membuat Widget Recent Post Dengan Gambar .

Judulnya panjang yah. Tidak apa-apa yah. Biar lebih paham saja. Dan langsung melihat contohnya.

Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial ini sebenarnya bertujuan untuk mempercantik blog saja. Biar terlihat rapi. Kalau kawan-kawan suka, boleh deh mencobanya.

Inilah Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial
1. Buka akun blogger kawan sendiri
2. Masuk Elemen Tata Letak
3. Pilih Add Widget atau Tambah Gadget
4. Apabila kotak baru muncul lalu pilih HTML/Javascript
5. Copy atau salin kode script di bawah ini

<div id='bp_recent'></div>
<script style='text/javascript' src='http://yourjavascript.com/02415211738/artikel-terkait.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

6. Simpan Widget / Gadget yang baru anda buat.
7. Lihat hasilnya.

Catatan :

• Tulisan http://ngeblogbarengbareng.blogspot.com silahkan anda ganti dengan alamat URL / Blog anda.
• Silahkan anda atur sedemikian rupa, mengenai jumlah artikel yang akan dipajang dalam recent post blog anda, sesuai keinginan anda. Blog ini sementara jumlah artikel yang dipajang dalam recent post sebanyak 20

Sebagai dari hasl Cara Membuat Widget Recent Post Dengan Gambar Seperti Tutorial ini, lihat saja Recen Post pada blog ini. Karena menggunakan widget di atas. Selamat mencoba, salam sukses. Salam.

Read more →

Membuat/Menampilkan Related post (artikel Terkait)

Fungsi dari related posts adalah menampilkan artikel yang berkaitan yang ada dalam blog kita. Masih belum paham..? misalnya sobat memposting artikel dengan label ikan bandeng, blogger tutorial, desain blogger, atau apa aja deh maka jika pengunjung mengklik artikel kita yang misalnya berlabel tutorial blog maka akan muncul menu dibawah postingan kita yang menyajikan artikel-artikel yang berlabel tutorial blogger.

Dibawah ini Priview tampilan dari related posts nya :

Membuat/Menampilkan Related post (artikel Terkait)

A.Kode CSS untuk related Post

1.Log in ke blogger dengan akun yang anda miliki.

2.Klik rancangan.

3.Edit Html » Centag kotak Expand template widget.

4.Cari kode /head> 5.letakkan kode dibawah ini sebelum kode </head  yang anda temukan.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFE0722rjIgmoCPdeZbJ6ZYwLKjXoZ3k9De_vPQjlgYTN_MB3QQL6PH3Ys4S7rSzRR7s8HTMIlW0zo9xSSLobodXct527L5azwlNde3bnpxDSXv8DvJXnLMrMVbY7gc_oL_k_JyyAQ00/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://fispol.com/bisnis/vom.js' type='text/javascript'/>

B.Kode Source HTML Artikel terkat

Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan terjadi pada langka ini. So perhatikan baik-baik...

Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa pilih salah satu opsi berikut.

Cara pertama untuk memnampilkan related post ini adalah cari kode  <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini  tepat dibawah kode <data:post.body/> tersebut.


<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>


Jika anda tidak berhasil juga membuat artikel terkait atau related post dengan cara tersebut, maka alternatif selanjutnya adalah pada <data:post.body/>, coba kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>):


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>


Akirnya Kita Berhasil membuat Related Posts dan coba lihat hasilnya. Oh ya anda jangan cepat menyerah bila terdapat kesalahan, gunakanlah ini sebagai media pembelajaran okey ....Tetap semanagat dan saya yakin jika anda bisa membuat blog, maka telated post juga pasti bisa oleh anda.

Read more →

Cara Membuat Artikel Terkait Bergambar Bergeser di Bawah Postingan

Membuat Artikel Terkait / Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Artikel Terkait atau Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://dseyelashes.blogspot.com/2012/12/cara-membuat-artikel-terkait-bergambar.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Read more →