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.

cara membuat artikel berjalan di blog

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>
  6. .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(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/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;
    }
  7. Save template, selesai.
Keterangan kode langkah 5:
  •  .widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)} kode ini gunanya untuk menambahkan gambar disamping tulisan artikel2 yang berjalan, silakan ganti kode Biru dengan url dari gambar yang kalian inginkan.
  • Jika tidak ingin menggunakan gambar, ganti kode list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/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. 

    8 comments:

    1. yang di atas gak mau gan
      tulisan nya hitam -_-

      ReplyDelete
      Replies
      1. Cokorda Bagus, artikel diatas sudah saya update. Tulisannya sudah bisa dirubah.

        Delete
    2. tulisan dari isi entri populernya ya gan yang hitam??di blog saya yg satunya juga kayak gitu.
      hanya di blog ini warna entri populernya bisa diubah jadi putih.

      saya edit2 lgi dlu, biar bisa diatur warna entri populernya. nanti saya kasih tau.

      ReplyDelete
    3. biar tulisan artikel popular hilang di halaman gimana, masih ada di judul nya di halaman saya

      ReplyDelete
      Replies
      1. oh iya lupa,,akan w update bentar lagi caranya..

        Delete
    4. oke bg setelah saya cari kesalahan nya ternyata ada di tutup kurung nya, tutup kurung saya terbalik bg,,udah selesai masalah nya tinggal hapus tulisa popular post di halaman nya aja yg belum

      ReplyDelete
      Replies
      1. caranya sdh ada diatas, dibagian update.

        Delete
    5. kalau teks berjalan gimana mas ? bukan dari pos populer.

      ReplyDelete

    Semoga Artikel diatas dapat membantu anda menemukan, apa yang sedang anda cari. Silahkan tinggalkan komentar.