Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Pilihan lain untuk membuat Ticker Popular Posts Blogger Plugins Widget dapat dibuat juga dengan menggunakan javascript. Tak banyak berbeda dengan ketika kita menggunakan kode html marquee hanya jika kita menggunakan javascript tag marquee tak lagi digunakan. Javascript dalam bentuk link sudah tersedia hingga jika tak mau terlalu repot bisa langsung kalian pakai. Hanya sekedar saran, jika ingin lebih aman dan lancar javascript ini bisa kalian upload di file hosting sehingga tak ada orang lain yang menggunakan link-nya. Kode CSS dalam ticker ini sudah dilengkapi dengan kode CSS yang berkaitan dengan widget popular post hingga memungkinkan ticker popular posts blogger plugin ditampilkan lebih sempurna. Jika ingin penampilan berbeda silahkan tambah dengan css lain atau bisa juga modif dibeberapa kode css yang sudah disertakan.

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design atau Layout (Tata Letak) untuk New Blogger Interface.
Page Element (Elemen Laman).
Klik Add a Gadget.
Pilih widget/gadget Popular Posts/Entri Populer
Klik SAVE.
Anda bisa cek dulu hasil penambahan widget popular posts dengan membuka halaman blog, kemudian lanjutkan kembali untuk membuat ticker popular posts dengan :
Pilih dan klik fitur Rancangan/Design.
Klik Edit HTML.
Lakukan Backup Template. Buka tutorialnya di sini.
Klik Expand Widget Template/Expand Widget Templates.
Copy dan pastekan kode CSS di atas kode </head>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
Di sekitar kode di atas kode lengkapnya seperti di bawah 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 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>
</b:includable>
</b:widget>

Rubah/hapus kode di atas dan ganti dengan kode baru berikut 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>

SAVE Templates/Simpan Template
Klik kembali Expand Widget Template

Javascript

<script src="http://gubhugreyot-ticker-popularposts.googlecode.com/files/GR_tickerpopularposts.js" type="text/javascript"></script>

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}
#GR_popularposts{
 position: relative;
 width:100%;
 height:250px;
        background:#b1bfb9;
        background:-o-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-moz-linear-gradient(top, #b1bfb9 0%, #efefef 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1bfb9), color-stop(100%,#efefef));
        background:-webkit-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-ms-linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        background:linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1bfb9', endColorstr='#efefef',GradientType=0 );
        overflow: hidden;
        border: 2px solid rgba(0,0,0,0.7);
        border-top-width:12px;
        border-bottom-width:12px;
        border-radius:6px;
        padding:10px 0;
        box-shadow:0 0 8px #444;
}

Catatan/keterangan:

perhatikan Kode CSS yang seperti ini:
```
.popular-posts .item-thumbnail a img
      width:70px !important;
      height:70px !important; 
      ...
      ...
}
```
Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
Panduan cara mengaktifkan widget popular posts blogger dapat diikuti melalui link di bawah ini:
Cara Mengaktifkan Widget Popular Posts
Demo dan kode menggunakan "New Blogger Template"

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah LEGI, January, 13, 2012

» Happy Blogging - gubhugreyot «

Furniture

Search This Blog

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Comments

Post a Comment