Selamat siang sobat blogger, kali ini saya akan share satu artikel tentang widget blog lagi ni.! yaitu membuat widget popular post atau biasa di sebut juga dengan entri populer dimana pada postingan sebelumnya saya juga pernah share artikel yang sama yaitu cara membuat Popular Post Gambar Bundar, dan sekarang ini saya kembali membagikan widget popular post dengan efek berjalan ke atas (Marque) dimana widged tersebut saya buat menggunakan JavaScript. Silahkan anda lihat Screenshotnya di bawah ini atau langsung liat aja demonya.

Cara pemasangan widget tersebut pada blog

Pertama salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.PopularPosts ul {
    list-style: none;
    border-top: 1px solid #222;
    border-bottom: 1px solid #444;
    margin: 0 0 1.25em;
    padding: 0 0 0 5px;
}

.PopularPosts ul li {
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    margin: 0;
    padding: 3px 10px;
}

.widget.PopularPosts .widget-content {
    font-size: 96%;
    line-height: normal;
}

.widget.PopularPosts li {
    padding: .5em 0 .8em;
}

.widget.PopularPosts .item-title a {
    display: block;
    font-weight: bold;
    margin: 0 0 .2em;
}

.widget.PopularPosts img {
    padding: 0;
    margin: 5px 10px 0 0;
    border: none;
    background-color: #111;
    float: left;
}

#DHF_popularposts {
    position: relative;
    width: 100%;
    height: 390px;
    background-color: #31353e;
    overflow: hidden;
    padding: 10px 0;
    color: #666;
    -webkit-box-shadow: inset 0 0 5px black;
    -moz-box-shadow: inset 0 0 5px black;
    box-shadow: inset 0 0 5px black;
}

Setelah itu salin kode di bawah ini dan letakkan di atas kode </head>

<script type='text/javascript'>
 //<![CDATA[
   var delayb4scroll = 2000;
   var marqueespeed = 1;
   var pauseit = 1;
   var copyspeed = marqueespeed;
   var pausespeed = (pauseit == 0) ? copyspeed : 0;
   var actualheight = "";
 //]]>
</script>
<script src='http://reader-hosting.googlecode.com/svn/trunk/popular-marque.js' type='text/javascript'/>

Selanjutnya anda cari kode seperti ini pada script widget popular post blog anda

<b:if cond='data:title'><h2><data:title/></h2></b:if>

Kemudian anda sisipkan kode berikut tepat di bawahnya

<div id='DHF_popularposts' onMouseout='copyspeed=marqueespeed' onMouseover='copyspeed=pausespeed'>
    <div id='vmarquee' style='position: absolute; width: 98%;'>

Setelah itu scroll ke bawah dan temukan kode penutup seperti ini

</b:includable>

Kemudian anda sisipkan lagi kode berikut di atasnya

</div>
</div>

Sehingga hasil keseluruhan kodenya akan seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div id='GR_popularposts' onMouseout='copyspeed=marqueespeed' onMouseover='copyspeed=pausespeed'>
<div id='vmarquee' style='position: absolute; width: 98%;'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</div>
</div>
</b:includable>
</b:widget>

Terakhir simpan template anda dan lihat hasilnya