Cara Membuat Teks Berjalan di Bawah Blog

Beberapa hari yang lalu, ada seorang teman blogger yang berkunjung ke blog ini dan menanyakan bagaimana cara membuat tulisan berjalan seperti yang ada di bagian bawah blog ini. Silakan lihat gambar di bawah ini sebagai referensi.

Sebenarnya, penempatan teks berjalan di bawah blog inilah yang sudah lama saya inginkan. Namun, saya baru bisa menerapkannya selama beberapa bulan terakhir karena baru menemukan metodenya setelah mengoprek berkali-kali dan mencari referensi di Google. 😁

Panduan Langkah demi Langkah:
Caranya sangat mudah sekali. Jika Anda berminat menerapkannya di blog Anda, silakan ikuti panduan berikut ini.

1. Log in ke akun blog Anda.
2. Masuk ke menu Edit HTML.
3. Klik tombol format template yang berada di pojok kanan atas untuk merapikan kode (lihat gambar di bawah untuk detailnya).
   
4. Tekan tombol Ctrl + F pada keyboard Anda.
5. Cari kode </b:skin> pada kotak pencarian tersebut, lalu tekan Enter.
6. Saat ini terdapat sedikit perubahan pada format template Blogger. Jika Anda sudah mengetikkan kode tersebut, hasilnya akan terlihat seperti gambar di bawah:
   
   Letakkan kursor Anda di depan kode (</b:skin>) yang terblok warna, kemudian tekan tombol Backspace pada keyboard. Setelah itu, kode </b:skin> yang lengkap akan muncul.
7. Salin (copy) kode CSS di bawah ini:

   #nav{
   height:20px;
   border-bottom:1px solid #000000;
   position:fixed;
   bottom:0px;
   left:0px;
   right:0px;
   background:#000000 url(../images/nav.png) repeat-x center left;
   z-index:999999;
   }
   #nav ul{
   height:20px;
   list-style:none;
   margin:6px auto 0px auto;
   width:900px;
   }
   #nav ul li{
   display:inline;
   float:left;
   margin:0px 2px;
   }
   #nav a{
   font-size:11px;
   font-weight:bold;
   float:left;
   padding: 2px 4px;
   color:#000000;
   text-decoration: none;
   border:1px solid #000000;
   cursor: pointer;
   background:transparent url(../images/overlay.png) repeat-x center left;
   height:15px;
   line-height:15px;
   }
   #nav a:hover{
   background:#000000 none;
   color: #000000;
   }

8. Tempelkan (paste) tepat di atas kode ]]> </b:skin>.
9. Simpan (save) template Anda.
10. Langkah selanjutnya, klik menu Tata Letak.
11. Klik Tambahkan Gadget, lalu pilih HTML/JavaScript.
    
    
12. Salin kode di bawah ini dan tempelkan pada kotak yang tersedia:

    <div id="nav">
    <a href="http://www.kholilnews.com/2012/11/membuat-teks-berjalan-dengan-hasil-yang.html" target="_blank">Kode teks berjalan Anda ada di sini</a>
    </div>

13. Klik Simpan dan lihat hasilnya pada blog Anda.

Nah, jika Anda masih memiliki pertanyaan atau ingin memberikan masukan terkait postingan ini, silakan gunakan kotak komentar di bawah. Semoga informasi ini bermanfaat!