Cara Membuat Artikel Berjalan di Blog

Cara Membuat Artikel Berjalan di Blog. Sebelumnya saya sudah membagikan tentang cara membuat entri populer bergerak ke bawah ataupun keatas. Dan kali ini adalah lanjutannya entri populer akan bergerak ke arah kanan ataupun kiri. Jadinya seperti artikel berjalan. Ketika di sentuh mouse, maka artikel akan berhenti, dan ketika di klik maka akan terbuka halaman baru, sesuai dengan judul artikel yang dibuka. Dan pada saat tidak disentuh mouse, maka artikel akan berjalan kembali.

Contoh artikel berjalan, bisa dilihat DISINI, di blog saya satunya. Untuk lebih jelasnya tentang cara membuat artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.

1. Pasanglah widget entri populer di blog.
2. Lalu atur entri populer tanpa gambar dan cupilkan, dan save widget.
3. Selanjutnya memasang kode berjalan, baca di cara membuat entri populer bergerak.
4. Setelah selesai membuat entri populer bergerak. Ke pengaturan Template > klik Edit HTML dan cari kode ]]></b:skin>
5. Setelah itu copi kode berikut, dan pastekan diatas ]]></b:skin>
.popular-posts {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.widget .popular-posts ul {list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpjboI0C8jhzU2F0O9dg10wkaK7jkUeFmnfJzYC8orKqhLZh39HOV7kO-jgjaESkLpSWCVSrsDnV0SPhRarlFqSK9UeGbxVXo4HZVVixHPkaL6qZjBv3M-Ec6jsWG5upqFenw8paRXj-K/s1600/Desain+Blog.JPG)
}

.popular-posts ul li{
 float:left;
}


.popular-posts ul li a{
 float:left; 
 width:auto; 
 font-weight:Bold;
 color:#FFFFFF;
 text-align:justify; 
 padding:0px 10px 0px 0px;
}
6. Save template, selesai.

Keterangan kode langkah 5:

•  .widget .popular-posts ul {list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpjboI0C8jhzU2F0O9dg10wkaK7jkUeFmnfJzYC8orKqhLZh39HOV7kO-jgjaESkLpSWCVSrsDnV0SPhRarlFqSK9UeGbxVXo4HZVVixHPkaL6qZjBv3M-Ec6jsWG5upqFenw8paRXj-K/s1600/Desain+Blog.JPG)} kode ini gunanya untuk menambahkan gambar disamping tulisan artikel² yang berjalan, silakan ganti kode Biru dengan url dari gambar yang kalian inginkan.
• Jika tidak ingin menggunakan gambar, ganti kode list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpjboI0C8jhzU2F0O9dg10wkaK7jkUeFmnfJzYC8orKqhLZh39HOV7kO-jgjaESkLpSWCVSrsDnV0SPhRarlFqSK9UeGbxVXo4HZVVixHPkaL6qZjBv3M-Ec6jsWG5upqFenw8paRXj-K/s1600/Desain+Blog.JPG)} dengan kode list-style:none;
• top: 0px; mengatur letak posisi diatas, jika ingin ditempatkan dibawah ganti top dengan bottom.

Update:

• Jika warna tulisannya hitam, tambahkan kode .widget .popular-posts ul li a:link, .widget .popular-posts ul li a:visited{color:white;} diatas ]]></b:skin>.
• Untuk menghilangkan judulnya, tambahkan kode #PopularPosts1 h2{display:none} diatas ]]></b:skin>.
• Jika masih ada background yg tertinggal, tambahkan kode  #PopularPosts1 {background:transparent; box-shadow:none;}

Ganti kode color:white; dengan warna yang kalian inginkan. Selesai sudah cara membuat artikel berjalan di blog, silakan dibaca juga artikel lainnya seperti tentang cara cara membuat icon untuk website yang bisa digunakan untuk gambar disamping tulisan artikel berjalan pada artikel diatas. Semoga bermanfaat. 

Tweet