Cara Membuat SlideShow Entri Populer Di Blog

Membuat Slide Show- membuat slideshow untuk artikel agar terlihat lebih menarik.

Slideshow- atau tampilan berjalan untuk menampilkan artikel-artikel di blog supaya tampilan lebih mebarik bagi pengunjung, dengan tampilan blog yang menarik tentu akan membuat pengunjung blog jadi betah berkunjung kembali ke blog kita.

Pengunjungpun akan merasa sedikit terhibur dengan tampilan yang menarik.

Membuat Slide sendiri sangat mudah untuk kita membuatnya.

Dan cara tentang membuat slideshow untuk artikel blog juga sudah banyak di jelaskan para blogger di internet.

Namun meskipun sudah banyak di jelaskan dan di ulas oleh banyak orang tidak sedikit juga pasti yang masih belum tahu, Untuk itu meskipun sudah banyak yang memposting artikel serupa namun kali ini saya juga mau berbagi tentang caranya membuat slideshow di blog sesuai dengan pengetahuan saya dan dengan gaya penulisan saya sendiri bukan copy paste posting orang lain.

Berikut cara membuat Slideshow di blog:

1.Masuk ke Dasbord Blogger anda lalu  klik tata letak.

2. tambahkan widget/gadget.

3. Kemudian pilih Entri populer supaya cara ini dapat bekerja lihat gambar.

4. Setelah itu kembali ke langkah kedua yaitu, tambahkan Gadget dan pilih Html/Java script.

5. Salin/Copy kode Html di bawah ini.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></b:loop></b:if>


    <style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:400px;
    }
    #PopularPosts1 ul {
    width:340px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 li {
    width:340px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    #PopularPosts1 li .item-snippet {
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
    }
    #PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    }
    a img {
    border: 0;
    }
    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
    $('.popular-posts ul').simpleSpy();
    });
    </script>
    <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

6. Tempel/Pastekan kode html tadi di Tata letak Html/Javascript yang telah di tambahkan.
Lihat gambar

7. Jika semua langkah telah selesai klik Save/Simpan dan selesai, lihat gambar no.6.
Sekarang anda sudah dapat menambahkan SlideShow entri populer di blog anda.

Tweet