Cara Menciptakan Artikel Berjalan Di Blog

Cara Membuat Artikel Berjalan di Blog. Sebelumnya aku sudah membagikan ihwal cara menciptakan entri terkenal bergerak ke bawah ataupun keatas. Dan kali ini yaitu lanjutannya entri terkenal akan bergerak ke arah kanan ataupun kiri. Jadinya menyerupai 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 ketika tidak disentuh mouse, maka artikel akan berjalan kembali.

Contoh artikel berjalan, dapat dilihat DISINI, di blog aku satunya. Untuk lebih jelasnya ihwal cara menciptakan artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.

1. Pasanglah widget entri terkenal di blog.
2. Lalu atur entri terkenal tanpa gambar dan cupilkan, dan save widget.
3. Selanjutnya memasang aba-aba berjalan, baca di cara menciptakan entri terkenal bergerak.
4. Setelah simpulan menciptakan entri terkenal bergerak. Ke pengaturan Template > klik Edit HTML dan cari aba-aba ]]></b:skin>
5. Setelah itu copi aba-aba 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/AVvXsEhWv_ohV9ioBfgTiSTww77hvxaEjiCUr9SWza2SE9Gih8LUZIsq2fnjvdEfEaVycaevjleFXYkvo5XxoJNzLRUvsEySFZWoCHWqYR7OEuijTdhhgEV01QP70_7-iXlm8EPr3ocyauOzas_F/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 aba-aba langkah 5:

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

Update:

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

Ganti aba-aba color:white; dengan warna yang kalian inginkan. Selesai sudah cara menciptakan artikel berjalan di blog, silakan dibaca juga artikel lainnya menyerupai ihwal cara cara menciptakan icon untuk website yang dapat dipakai untuk gambar disamping goresan pena artikel berjalan pada artikel diatas. Semoga bermanfaat.