Membuat Tampilan Halaman Secara Scroll

Membuat Tampilan Halaman Secara Scroll

Membuat Widget Tampil Dengan Scroll

Membuat Widget Tampil Dengan Scroll

Membuat Tampilan Halaman Secara Scroll

Membuat Tampilan Halaman Secara Scroll

Menghilangkan Tampilan Entri Lawas

Pesan tampilan entri lawas adalah salah satu fasilitas yang dimiliki oleh blogger yang berfungsi untuk memunculkan semua posting yang mempunyai label yang sama. Pesan ini muncul saat kita memilih salah satu label yang ada diblog. Mungkin sebagian dari kita beranggapan bahwa tulisan tersebut sangat mengganggu. Nah, bagi teman2 yang ingin menghilangkan tulisan tersebut, ikuti langkah berikut :

Cara menghilangkan tampilan entri lawas pada blogspot :
1. Login ke Blogger
2. Pilih Rancangan
3. Klik Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode berikut :

<b:includable id='status-message'><b:if cond='data:navMessage'><div class='status-msg-wrap'><div class='status-msg-body'><data:navMessage/></div><div class='status-msg-border'><div class='status-msg-bg'><div class='status-msg-hidden'><data:navMessage/></div></div></div></div><div style='clear: both;'/></b:if></b:includable>

Ganti dengan kode berikut :

<b:includable id='status-message'><b:if cond='data:navMessage'><div></div><div style='clear: both;'/></b:if></b:includable>

6. Simpan Template

Jquery Tab View Scroll Show Hide Widget | Kode Blogger

Jquery Tab View Scroll Show Hide Widget | Kode Blogger

Membuat Tampilan Halaman Secara Scroll | Seby-Antoe.Com

Membuat Tampilan Halaman Secara Scroll | Seby-Antoe.Com

Mengganti Read More Dengan Icon Image

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.
Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: atau seperti ini:
     atau seperti ini kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :
http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif
Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :
<img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/>
Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan sdengan selera anda (ini hanya contoh).
Selanjutnya ikuti tutorial berikut:

• Seperti biasa anda harus dalam keadaan sig ini pada blogger
• Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
• Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
• Kemudian cari kode seperti ini:

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

• Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/></strong></a>
</b:if>

• Terakhir, save template anda! Lihat hasilnya!

Semoga bermanfaat!

Untuk contohnya, kamu bisa lihat di blog ini.

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements"
2. Tambahkan widget baru dengan mengklik "Add a Gadget" - "HTML/JavaScript"
3. Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget kamu:
   

   <style type="text/css">
     .gb_fixed{
         position:fixed;
         top:0px;
         right:0px;
         z-index:+10;
     }
     * html .gb_fixed {position:relative;}
     #hidden_gb2 {
         display:none;
         border:2px solid #88C900;
         background:#E5E5E5;
         padding:10px;
         padding-top:0px;
     }
   </style>
   <div class="gb_fixed">
     <table id="hidden_gb2" cellpadding="0" cellspacing="0">
       <tr><td>
         <div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>
   
         <!-- Kode buku tamu kamu -->
   
         <div style="text-align:right; font-size:10px">
             widget by
             <a href="http://infotentangblog.blogspot.com/2009/08/buku-tamu-tersembunyi-versi-2.html">
                 Info Blog
             </a>
         </div>
     </table>
   </div>
   
   <script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">
   
   <div class="gb_fixed" style="z-index:+5">
   <a href="javascript:void(0)" onclick="gb_showHideGB()">
     <img border="0" style="border:0px"
          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5TyyTG-argKQpTm4Y7GIRzl7K_X78n4JRnLPsUQApGirRyfJ1-ZUOZ-VCXJEqD5ykmc3SgZB0YhYVESt6vk_ORC8Oc7ARDW-uaQnrFE1nPcDDXx8Wj_hMUiKaUYoXQYjXclTNjDPftc7/" />
     </a>
   </div>
   </script>

4. Posisi buku tamu jika kamu tidak mengganti kode di atas adalah di bagian kanan atas. Kalau kamu mau mengganti jadi kiri, ubah right jadi left. Dan kalau kamu mau menempatkannya di bawah, ubah top jadi bottom,
5. Kalau kamu mau mengganti gambar tombolnya, ganti kamu bisa mengganti source gambar yang ditebalkan di atas,
6. Dan juga jangan lupa untuk mengganti kode <!-- Kode buku tamu kamu --> jadi kode buku tamu kamu.
7. Klik "Save" kalau sudah selesai.

Semoga bermanfaat!

Buku Tamu Tersembunyi

Setelah membuat buku tamu tersembunyi versi 1 dan melihat respon yang cukup banyak untuk itu, aku coba untuk membuat buku tamu tersembunyi versi 2. Seperti namanya, buku tamu ini juga tersembunyi. Bedanya dengan versi pertama adalah cara penampakannya.

Untuk contohnya, kamu bisa lihat di blog ini.

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements"
2. Tambahkan widget baru dengan mengklik "Add a Gadget" - "HTML/JavaScript"
3. Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget kamu:
   

   <style type="text/css">
     .gb_fixed{
         position:fixed;
         top:0px;
         right:0px;
         z-index:+10;
     }
     * html .gb_fixed {position:relative;}
     #hidden_gb2 {
         display:none;
         border:2px solid #88C900;
         background:#E5E5E5;
         padding:10px;
         padding-top:0px;
     }
   </style>
   <div class="gb_fixed">
     <table id="hidden_gb2" cellpadding="0" cellspacing="0">
       <tr><td>
         <div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>
   
         <!-- Kode buku tamu kamu -->
   
         <div style="text-align:right; font-size:10px">
             widget by
             <a href="http://infotentangblog.blogspot.com/2009/08/buku-tamu-tersembunyi-versi-2.html">
                 Info Blog
             </a>
         </div>
     </table>
   </div>
   
   <script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">
   
   <div class="gb_fixed" style="z-index:+5">
   <a href="javascript:void(0)" onclick="gb_showHideGB()">
     <img border="0" style="border:0px"
          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5TyyTG-argKQpTm4Y7GIRzl7K_X78n4JRnLPsUQApGirRyfJ1-ZUOZ-VCXJEqD5ykmc3SgZB0YhYVESt6vk_ORC8Oc7ARDW-uaQnrFE1nPcDDXx8Wj_hMUiKaUYoXQYjXclTNjDPftc7/" />
     </a>
   </div>
   </script>

4. Posisi buku tamu jika kamu tidak mengganti kode di atas adalah di bagian kanan atas. Kalau kamu mau mengganti jadi kiri, ubah right jadi left. Dan kalau kamu mau menempatkannya di bawah, ubah top jadi bottom,
5. Kalau kamu mau mengganti gambar tombolnya, ganti kamu bisa mengganti source gambar yang ditebalkan di atas,
6. Dan juga jangan lupa untuk mengganti kode <!-- Kode buku tamu kamu --> jadi kode buku tamu kamu.
7. Klik "Save" kalau sudah selesai.

Semoga bermanfaat!

Widget Tautan Otomatis

Yang aku maksud dengan tautan otomatis adalah membuat link secara otomatis pada artikel kamu jika pada artikel kamu terdapat beberapa "kata kunci". Contoh, jika pada sebuah artikel mengandung kata read more, maka widget ini akan membuat link ke artikel yang membahas tentang read more. Jadi dengan menggunakan widget ini, pembaca kamu akan lebih mudah untuk menemukan artikel kamu yang lain.

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" - "HTML/JavaScript",
3. Tambahkan kode di bawah:
   

   <script src="http://copycat91.googlecode.com/svn/trunk/autolink.js">
   </script>
   <script type="text/javascript">
   
   var f = new autoLink();
   
   f.add("kata kunci 1", "http://urlblogkamu.com/artikel1kamu.html");
   f.add("kata kunci 2", "http://urlblogkamu.com/artikel2kamu.html");
   f.add("kata kunci 3", "http://urlblogkamu.com/artikel3kamu.html");
   
   // dan seterusnya...
   
   f.startScript();
   
   </script>

4. Ganti kata kunci jadi kata kunci yang kamu inginkan dan url-nya jadi url artikel yang kamu maksud. Contohnya yang aku pakai untuk blog ini adalah:
   

   f.add("widget", "http://infotentangblog.blogspot.com/search/label/Widgetku");
   f.add("read more", "http://infotentangblog.blogspot.com/2009/07/membuat-read-more-versi-2.html");
   f.add("warna", "http://infotentangblog.blogspot.com/2009/07/kode-hex-warna.html");
   
   // dan seterusnya...

Semoga bermanfaat! :D
[+] selengkapnya...

Membuat Scroll Pada Arsip Blog

Seberapa pentingkah scroll pada archive blog?? kalau menurut saya manfaat dari scroll down itu sendiri adalah menghemat tempat, jadi sidebar blog kita terlihat lebih rapi. Untuk contoh perbandingannya seperti gambar dibawah ini.

 Jika tertarik silahkan ikuti langkah berikut ini :

1. Sign In di Bloggermu
2. Klik Menu Rancangan
3. Klik Menu Edit HTML
4. Beri Tanda Centang Pada Kotak "Expand Widget Template"
5. Cari Kode <div id='ArchiveList'> dengan Control F
6. Lalu Tambahkan Kode Berikut di Atasnya : <div style='overflow:auto; width:ancho; height: 150px;'>
7. Ganti 150px dengan ukuran kesukaanmu
8. Kemudian cari kode dibawah ini :

<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

9. Lalu tambahkan </div> pada </div> terakhir, sehingga lengkapnya menjadi :

<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

 10. Setelah selesai lalu save.

Selamat mencoba...