Thursday, December 11, 2014

CARA MEMBUAT WIDGET RECENT POST BERGERAK DAN BERGAMBAR DI BLOG

Cara Membuat Widget Recent Post Bergerak dan bergambar di Blog – Para blogger terbaru, kali ini kita akan membahas mengenai cara membuat widget recent post bergerak dan bergambar di blog. sebelumnya, kita juga sudah membahas cara membuat widget recent post di blog tanpa gambar. Mungkin, ada beberapa blogger – blogger yang suka simple tanpa gambar atau ada sebagian blogger yang menyukai widget recent post bergerak atau berjalan dengan ada gambarnya.
CARA MEMBUAT RECENT POST BERGERAK DI BLOG
Cara Membuat Recent Post Bergerak Di Blog
Dengan memasang widget recent post bergerak dan bergambar di blog kita. Maka, postingan – postingan terbaru kita akan ditampilkan dan membuat pengunjung akan betah berlama – lama di blog kita. Jadi, tidak rugi dech kalau masang widget recent post bergerak dan bergambar ini.
Baiklah, langsung saja kita akan membahas cara membuat widget recent post bergerak dan bergambar di blog. berikut adalah langkah – langkahnya :
  1.   Pastikan kita terhubung dengan internet.
  2.   Selanjutnya, kita login ke blogger.com.
  3.   Setelah itu kita pilih Tata Letak.
    CARA MEMBUAT RECENT POST BERGERAK DI BLOG
    Cara Membuat Recent Post Bergerak Di Blog (1)
  4.   Kemudian, klik Tambah Gedget.
    CARA MEMBUAT RECENT POST BERGERAK DI BLOG
    Cara Membuat Recent Post Bergerak Di Blog (2)
  5.   Setelah itu, kita Pilih mode HTML/JavaScript.
    CARA MEMBUAT RECENT POST BERGERAK DI BLOG
    Cara Membuat Recent Post Bergerak Di Blog (3)
    CARA MEMBUAT RECENT POST BERGERAK DI BLOG
    Cara Membuat Recent Post Bergerak Di Blog (4)

  6.   Selanjutnya, kita masukkan kode di bawah ini pada kolom konten.
 
    <style type="text/css">
        #rp_plus_img{height:377px;}
        #rp_plus_img li {height:60px;padding:5px;list-style:none;
        background-color:#ffffff;
        border:solid 1px #000000;}
        #rp_plus_img a{color:#00000;}
        #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
        text-align:justify;
        -moz-border-radius: 5px;}
        #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
    </script>
    <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        var speed = 1500;
        var pause = 3500;
        $(document).ready(function(){
        rpnewsticker();
        interval = setInterval(rpnewsticker, pause);
        });

    </script>
    <ul id="rp_plus_img"><script>
        var numposts = 5;
        var numchars = 0;

    </script>     <script src="http://hafifurrahmancoy.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
    </script>     </ul>
    <small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
    <small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-recent-posts.html" target="_blank">Get This Widget</a></small>

           keterangan :
                               a. kode yang berwarna hijau adalah banyaknya artikel yang di tampilkan.
                               b. kode yang berwarna merah adalah alamat blog kita masing - masing.
    7.   Pada kolom judul kita bisa isi dengan sesuka hati kita.
    8.   Jika sudah selesai. Kita klik Simpan atau Save.
    9.   Kita bisa lihat hasilnya di blog kita masing – masing.
    10. Selesai.


Itulah langkah – langkah cara membuat widget recent post bergerak dan bergambar di blog. mudah – mudahan dapat bermanfaat bagi kita semua. Jangan lupa like fanspagenya di paling bawah. Jadi, jangan ragu untuk memasang widget ini. Sekian Terima kasih.
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : CARA MEMBUAT WIDGET RECENT POST BERGERAK DAN BERGAMBAR DI BLOG

4 komentar: