Cara Membuat Widget Randum Post Bergerak Unik

Cara Membuat Widget Randum Post Bergerak Unik, Mempunyai Sebuah Blog yang Menarik adalah impian setiap Bloger, dengan Tampilan Bloger yang Menarik maka Kita tidak Bosan - bosan untuk terus memajukan Blog Kita, berbeda lagi dengan Blog Yang Amburadul, mau baca artikel yang di tulis sendiri saja terkadang malas, apalagi Para Pengunjung blog Kita, Mungkin akan tidak nyaman untuk membuka buka Artikel - artikel di dalam Blog Kita.
Tampila Blog Yang Menarik juga dapat mempercepat Jumlah Kunjungan di Blog Kita, Para Pengunjung Blog akan Merasa Betah dan Nyaman sehingga Mereka akan Semakin Penasaran dan menelusuri Artikel - artikel di dalam Blog Kita.
Untuk Membuat Agar Tampilan Blog Kita lebih Simple namun Sangat Menarik untuk di kunjungi saya Akan Membagikan Tips Cara Mudah Membuat Widget Randum Post Bergerak Unik.

Untuk itu, silahkan ikuti Tutorial Pembuatanya berikut ini :

1. Masuk Ke Blog Sobat.

2. Klik Tambahkan Gadget.

3. Klik HTML/ Javascripts.

4. Copy Dan Pastekan Kode Scripts di bawah ini di halaman Gadget HTML/ Javascripts tadi.

<div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:370px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    function rpthumbnt(json) {
    document.write('<ul class="rp_plus_img">');
    for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break
    }
    }
    var thumburl;
    try {
    thumburl = entry.media$thumbnail.url
    } catch(error) {
    s = entry.content.$t;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"", a);
    c = s.indexOf("\"", b + 5);
    d = s.substr(b + 5, c - b - 5);
    if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
    thumburl = d
    } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxXlmOwKRUc2SLevm2hdHAtKecFXYDbVCXEh1PRPHNq7CajeaVi8ZSDQVx_idwq2Qm6vYNNBCD3Jo2rBp_-o4cT86qCfxPZ9mve6xMro96biO6-03cxMgLRCUXuAFw5llR25SS6bbUjg/s1600/no+image.200.jpg'
    }
    document.write('<li class="news-title clearfix">');
    document.write('<a href="http://www.seocips.com/" target="_blank"><img src="' + thumburl + '"/></a>');
    document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
    if ("content" in entry) {
    var postcontent = entry.content.$t
    } else if ("summary" in entry) {
    var postcontent = entry.summary.$t
    } else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
    if (postcontent.length < numchars) {
    document.write('<span class="news-text">');
    document.write(postcontent);
    document.write('</span>')
    } else {
    document.write('<span class="news-text">');
    postcontent = postcontent.substring(0, numchars);
    var quoteEnd = postcontent.lastIndexOf(" ");
    postcontent = postcontent.substring(0, quoteEnd);
    document.write(postcontent + '...');
    document.write('</span>')
    }
    document.write('</li>')
    }
    document.write('</ul>')
    }
    function rpnewsticker() {
    last = $('ul#rp_plus_img li:last').hide().remove();
    $('ul#rp_plus_img').prepend(last);
    $('ul#rp_plus_img li:first').slideDown("slow")
    }
    </script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div>

5. Silahkan Beri Judul untuk tampilan Wigget Randum Post Anda, Lalu Klik Simpan.

Nah demikian tadi Cara Membuat Widget Randum Post Bergerak Unik, Semoga Artikel ini dapat Membantu Mempercantik Tampilan Blog Anda.

Baca Juga :

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.

irinmedia

Cara Membuat Widget Randum Post Bergerak Unik

More posts

Comments