Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Assalamu Alaikum Wr.Wb.
Sudah lama yaa utta gk share mengenai tutorial blogger,hehe karena saya disibukkan dengan mendesign themes yg dipesanan sma beberpa teman blogger! :D! maka dari itu pada kesempatan kali ini sya akan berbagi tutorial lagi yaitu 'Pasang Random "Banner" Di Widget Blogger' jadi random banner adalah cara terbaik untuk mempromosikan konten/Iklan di blog Anda, nah setiap kali pengunjung akan melihat sebuah spanduk/banner/sponsor yang akan secara berganti / iklan jika masuk disetiap postingan di blog Anda!


Baiklah langsung ke intinya ajj deh, nah,.. jika anda tertarik mencobanya silahkan ikuti langkah-langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

<script language="JavaScript">
images = new Array(5);
images[0] = "<a href = 'URL OF ADVERTISER 1' rel='nofollow' target='_blank' title='TITLE ADVERTISER 1' ><img src='URL IMAGE HERE 1' border='0' height='250px' width='280px' ></a>";
images[1] = "<a href = 'URL OF ADVERTISER 2' rel='nofollow' target='_blank' title='TITLE ADVERTISER 2' ><img src='URL IMAGE HERE 2' border='0' height='250px' width='280px' ></a>";
images[2] = "<a href = 'URL OF ADVERTISER 3' rel='nofollow' target='_blank' title='TITLE ADVERTISER 3' ><img src='URL IMAGE HERE 3' border='0' height='250px' width='280px' ></a>";
images[3] = "<a href = 'URL OF ADVERTISER 4' rel='nofollow' target='_blank' title='TITLE ADVERTISER 4' ><img src='URL IMAGE HERE 4' border='0' height='250px' width='280px' ></a>";
images[4] = "<a href = 'URL OF ADVERTISER 5' rel='nofollow' target='_blank' title='TITLE ADVERTISER 5' ><img src='URL IMAGE HERE 5' border='0' height='250px' width='280px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

5.Save dan slesai deh.. :D

KET:: Silahkan sobat sesuaikan sendiri yang sudah saya beri tanda!



Semoga tutorial ini berguna bagi anda. TRIM'S ^^

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan memberikan tutorial yaitu cara 'Mempercantik Popular Posts With CSS (No Thumbs Image)'. dimana pada postingan saya yang lalu pernah juga membahas cara 'Mempercantik Popular Posts With Thumbs'. dan 'Mempercantik Popular Posts With Thumbs dan Summary'.

Baiklah langsung aj deh,dan berikut contohnya :


Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :





    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/* Grid Populartpost by http://ngawicybers.blogspot.com */
#PopularPosts1 ul li a:hover{color:#fff;text-shadow:-1px 1px 0px #000;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family:Arial, 'Times New Roman', Times, serif; font-size: 13px;font-weight:bold; letter-spacing: normal;margin: 0px 40px 0px 0px;  orphans: 2; padding:0;line-height: 18px; min-height: 30px;  text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;text-align:justify;}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:5px;right:5px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;text-align:center;width:20px;height:20px;line-height:1em;padding:8px;font-size:20px;color:#fff;text-shadow:0 1px 1px #000;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:92%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:92%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:92%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:92%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border-radius:20px 0px 20px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

-Kode warna merah diatas adalah panjang setiap popular Post (1-6), Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.

4. Setelah langkah diatas selesai, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

  • <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 == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (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 == &quot;false&quot;'>
                <!-- (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 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>

5. Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;true&quot;'>
          <b:if cond='data:showSnippets == &quot;true&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title' target='_blank'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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' expr:title='data:post.title' 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' expr:title='data:post.title' target='_blank'><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' expr:title='data:post.title' 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' expr:title='data:post.title' target='_blank'><data:post.title/></a></div>
              <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>

6. Terakhir Simpan Template.


Demikian tadi tutorial Mempercantik Popular Posts With CSS (No Thumbs Image), jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar yang tersedia, maaf jika saya kurang baik menyelaskannya. :D selamat mencoba dan semoga bermanfaat.!!

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan memberikan tutorial yaitu cara 'Mempercantik Popular Posts With Thumbs dan Summary'. dimana pada postingan saya yang lalu pernah juga membahas cara 'Mempercantik Popular Posts With Thumbs'. sebenarnya script ini sama saja dengan tutorial saya lalu, cuma disini saya hanya menambahkan summary (snippet) pada populart post ini, selain summary juga sdh menambahkan DEFAULT IMAGE yang artinya artikel populart yang tidak memiliki thumb (secara default). akan menampilkan image default secara otomatis.

Baiklah langsung aj deh,dan berikut contohnya :


http://picturestack.com/505/204/B5Qut2a4downCKA.jpg

Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :




    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/*Popular Posts*/
#PopularPosts1 img{float:left;width:82px;height:82px;opacity:0.8;padding:2px;margin-right:5px;
-moz-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-ms-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-o-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-webkit-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
border:2px solid #eee;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;}

#PopularPosts1 img:hover{cursor:move;opacity:1.1;border:2px solid #222;border-right:2px solid #00684C;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-bottom:2px solid #00684C;}

#PopularPosts1 ul{padding:0;overflow:none;margin:0;}
#PopularPosts1 .widget-content{text-align:justify;
}
#PopularPosts1 ul li{
background:none;border-bottom:1px dotted #ccc;
padding:5px 0;
}
#PopularPosts1 .item-title {}
#PopularPosts1 .item-title a {
font-weight:bold;margin-top:0;
}
#PopularPosts1 .item-snippet {font-family:'Comfortaa';color:#06513E;
}

-Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.

4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

http://picturestack.com/509/223/C0NpopularakaS2B.jpg

6. Setelah langkah diatas selesai, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

  • <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 == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (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 == &quot;false&quot;'>
                <!-- (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 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>

7. Setelah ketemu, ganti dengan kode 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 class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (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'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://picturestack.com/228/804/rP7noimagegzi.jpg'/></a>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <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>

8. Terakhir Simpan Template.


Demikian tadi tutorial Mempercantik Popular Posts With Thumbs dan Summary, jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar yang tersedia, maaf jika saya kurang baik menyelaskannya. :D selamat mencoba dan semoga bermanfaat.!!

http://picturestack.com/405/111/HFiut2a4downtOE.jpg

Hallo Sobat Blogger!
Kali ini utta Kembali Lagi akan memberikan trik blogger, yaitu 'Pasang Widget Slide Box Facebook Page Like Keren Di Blogger', dimana pada postingan saya juga sebelumnya pernah membahas :

1. Pasang Widget Popup Facebook Page Like Box With Timer. dan
2. Pasang Widget Popup Facebook Page Box With EaseOutBounce.

Jadi saya sengja untuk membuat tutorial baru ini, karena widget untuk page like box yang lalu dgn dengan tutorial yang akan saya berikan skrang sangat berbeda, dimana widget ini memiliki fungsi slide ketika, kita mengscroll kebawah mka akan kluar widget page likenya, widget ini juga pernah saya psang diblog ini, tp skrg uda gak, karena saya ingin mengurangi widget2 disidebar (sebagian penjung mengtkan blog utta ini berat).hehee.

Baiklah jika sobat ingin memasangnya silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

<!--Slidbox --><script type="text/javascript" src="http://benyocyberprotokol.googlecode.com/files/benyoslidbox.js"></script>
<div style="position:fixed;width:600px;overflow:hidden;bottom:2px;
right:2px;display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9MZcn8AkAhnmLVNxZLPM7eVWgXmUHFkCn2fIl_Fw8jbRdnKl21baQ8q8nzn20og-_rn_gNjaEq6BP5rjRvXne87sDr1uagNTCxYtlAM0B25jC2bT27yjwyDkQ01Tv385DyGugtkEDDqz/s0/bo-bg-html.gif)
repeat;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;border:3px solid #111111;" id="fbslidebox">
<div style="width:600px;padding:2px 0; margin:0;overflow:hidden;">
<a href="#" style="float:right;padding:3px 3px;" id="fbcloseslidebox"><img border="0" alt="close" src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" title="Click to Close"/></a>
<span style="font:normal 17px tahoma,sans-serif;color:#cc0000;text-shadow:0 0 3px #cc0000;"><center>Don't forget "LIKE" us on Facebook!!!</center></span><center><iframe style="height:100px;width:600px;" scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/fan.php?id=244205558923961&amp;width=600&amp;height=100&amp;connections=24&amp;stream=false&amp;header=false&amp;logobar=false&amp;css=http://www.weblagu.info/fblike.css"></iframe>
<br/>
<br/>
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/UttaBlogdOtCom&amp;send=false&amp;layout=standard&amp;width=600&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=38" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:38px;" allowtransparency="true"></iframe></center>
</div></div><!--Slidbox end -->

KET:::
- Silahkan sobat rubah teks yang berwarnah MERAH dengan URL Page Halaman masing-masing.!!

5.Terakhir Save, dan Lihat hasilnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzZD9s3lGX3lxLof01Oxr9JR-aO_HwxDc8nYYEEX7-Axwn_fOY5bCHutzsEKeWsSUK6-0DTGkO9q7-y0qGz5E-NqgVCx0zK5sucwBdVxJyKdYp4W-zw-fHK9WAqDx0P074QBTLGIT-Dtr/s400/Listen2myRadio_com_by_TIT0.jpg

Assalamu Alaikum WR.WB..
Sobat juga bisa melihat pada postingan saya yang lalu mengenai cara 'Pasang Widget Radio Online (MP3 Music 24Jam NonStop)'. nah kali ini memasang widget radio indonesia (All Channel), Widget ini tanpa sengaja saya temukan dari situs resminya (radioindonesia.info), karena tampilan yang menarik dengan All Channel, terpaksa saya coba share ajj, siapa tau sobat-sobat tertarik untuk memasang radio di blog.heheee,..

Baiklah Langsung ajj yah, berikut contoh dan scriptnya..

STYLE 1


SCRIPT::::

<center><iframe align='middle' frameborder='no' height='30px' name='Radio1' scrolling='no' src='http://radioindonesia.info/mini.php' width='100%'/></iframe></center>

STYLE 2


SCRIPT::::

<center><iframe align='middle' frameborder='no' height='53px' name='Radio2' scrolling='no' src='http://radioindonesia.info/mini2.php' width='100%'/></iframe></center>

Silahkan Sobat Pilih Yah..!! Semoga Bermanfaat gang.!!

Tutorial kali ini menjawab pertanyaan dari teman blogger Renata pada artikel Cara Buat Recent Post With Thumbnail And Simple Spy, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat pada contoh dibawah. Langsung saja karena hari sudah malam. Dibawah ini screenshotnya.

http://picturestack.com/388/934/0kZakautandirBMC.jpg

Berikut Scriptnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5; /* Jumlah Postingan */
var startfeed = 0;
var urlblog = "http://ngawicybers.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function akaUTkolisfeed(ir,banget){
var showfeed = ir.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpFfKRD-cdnbzXKVrpjl7O_RCGNRhSZ2JicVPUOs0EnbTF7g-mhmedxmMTgRgX9lQjm8fYLGvv30mBRnHMkM6IytGYynABPDejHQ9-vqG1HzFAp4F6vxlljq0ikerSSaPpHz7n3JrvNx-/d/noimagethumb.gif";
}
showblogfeed += "<div class='akaUT-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + akaUTkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("akaterbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("akaUT-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("akaterbaru").innerHTML = "<div id='akaUT-loading'></div>";
document.getElementById("akaUT-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var akaterbaru = document.createElement('script');
akaterbaru.setAttribute('type', 'text/javascript');
akaterbaru.setAttribute('src', archievefeed);
akaterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(akaterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="akaterbaru"></div>
<div id="akaUT-navigasifeed"></div>
<style>
#aka-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#akaterbaru{margin:0px}
.akaUT-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.akaUT-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.akaUT-elemen h6,.akaUT-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.akaUT-elemen:hover{background-color:#ecf3fb}
.akaUT-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#akaUT-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#ffffff url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#akaUT-navigasifeed{background-color:#fff;border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#akaUT-navigasifeed:hover{background-color:#ecf3fb}
#akaUT-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#akaUT-navigasifeed span{padding:5px 10px}
#akaUT-navigasifeed .next{float:right}
#akaUT-navigasifeed .previous{float:left}
#akaUT-navigasifeed .home{text-align:center}
#akaUT-navigasifeed a:hover,#akaUT-navigasifeed span.noactived{color:transparant!important}
</style>

KET :
- Ganti teks yang berwarna Merah dengan URL Blog sobat.
- Perhatikan script diatas yang berwarna biru muda, jika sobat sudah memasang, maka tidak perlu lagi memakai script diatas (biar gak double).

Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

Seperti biasa sobat langsung masuk aja ::>>
1. To the point aja .. klik Rancangan
2. Kemudian klik Tamhah Gadget.

image

3. Cari yang Tambah Halaman HTML / Javascript
4. Masukkan salah satu kode diatas kedalamnya :
5. Simpan. dan Lihat hasilnya.
Selamat Mencoba!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTDn27mFhSKCPP5s_t4D9lKdkOMUMb2q4ZHsi9-YfGS_2l5o_qFJIPvRW8bXtr12uQImidKAc6vZLyuTj5x0Q0Nr5rSGYuUL00byO52pHRBcYLhg6uH90BPe8Mk5h_MwdCh2EL9Hk0wg/s320/twitter-bird.png

Tutorial kali ini segaja saya share hanya ingin melanjutkan tutorial saya yang sebelumnya antara lain:
1. Twitter Buttons Animasi Pilihan.
2. Follow Twitter Bird dengan Excellent Flash.

Nah, Dilihat dari tutorial saya yang sebelumnya, berbeda dengan yang akan saya berikan, karena tutorial kali ini Follow Twitternya akan terbang kesana kemari mengikuti kursor, mungkin sobat pernah melihat seperti ini, yaa.. mungkin waktu mengunjungi salah satu blogger sahabat, dan tanpa sengja melihat Follow Twitter Bird yang terbang! jika memang pernah melihatnya, disini saya akan memberikan script yang dia gunakan..!

Disini saya akan memberikan beberapa style Twitternya, silahkan ganti sesuai selera yah :D

Hasilnya seperti ini :
 

<script type="text/javascript" src="http://kangdadang.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62WG8uxGqsX_wK0br9zS28K25DU8DYr6j4HZZ5zZwjarkAXyWDsyVX0dMjFdR8ImqU6c6BtZGiBzHiBBpqrpbRS5pn3A-MvvLsdrvrIb-XqzbhrNHHXgatBatFTr7saEY-vI3tgfnJ8Y/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/uttakracker15";var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();</script>

KET:::
- Silahkan Dirubah Teks yang berwarna MERAH dengan user name Twitter anda.!
- Teks yang berwarnah HIJAU adalah Gambar Twitter, Silahkan Diganti dengan pilahan2 yang saya sudah sediakan dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOS_hsdgPXJTWrUMo1ep9vgg6yKRv-6w_G1_4lGhJqaJTPcBZLfxtUIIJOeyrrE2FwFntII8TjbJzQHRaoGuy3PXDClbjV-1dIL4OGW7yf4cF28avOo98W8hSvuQ3qy82bsW3kpgsCbw/s320/icon+twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosaYm4Th1QsO1GIOrLEXmmuUvBcjEBZCWDrTWhpBOHz2BjuIg-lHaO6ZPCCxDw__qQPZr2xtCjTwVZshbp0oqfrFG7t8InFokplrmjLKJhbW8okys-oa6rCGengQuAyDfejYwSvNEvZU/s1600/birdspritewhite.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosaYm4Th1QsO1GIOrLEXmmuUvBcjEBZCWDrTWhpBOHz2BjuIg-lHaO6ZPCCxDw__qQPZr2xtCjTwVZshbp0oqfrFG7t8InFokplrmjLKJhbW8okys-oa6rCGengQuAyDfejYwSvNEvZU/s1600/birdspritewhite.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTruOdjtXMJK0NTBTxjBWBdL6-WTAb1V7KY7VWxqkkVWPZtDXAiFUUPIpSlPZ89p5Dm6ulxJnML6LtVksb5cdPI08Zp4z0edPWEZ5pBa0Jq7JHTwndMHGGpVewy30HL47eOnDBj1lj0ZE/s1600/birdspriteyellow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTruOdjtXMJK0NTBTxjBWBdL6-WTAb1V7KY7VWxqkkVWPZtDXAiFUUPIpSlPZ89p5Dm6ulxJnML6LtVksb5cdPI08Zp4z0edPWEZ5pBa0Jq7JHTwndMHGGpVewy30HL47eOnDBj1lj0ZE/s1600/birdspriteyellow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaw6HfnsyeQzVX2ymza42R1xWmWEpwWo_-1rtz4x-CBrMIyr7nElcyr8arJe7BbIaWRYktwgESHLYCj09VxZvMhqGp5D7eGcZ3nCPHgWUN93BnKu7Dh-dZ7Xf-HR9LJ94kmg7jEU33908/s1600/birdspritered.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaw6HfnsyeQzVX2ymza42R1xWmWEpwWo_-1rtz4x-CBrMIyr7nElcyr8arJe7BbIaWRYktwgESHLYCj09VxZvMhqGp5D7eGcZ3nCPHgWUN93BnKu7Dh-dZ7Xf-HR9LJ94kmg7jEU33908/s1600/birdspritered.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDU3D4ZNc3q4yUzImZ-KvRT573XLu5aNR5StZnuZgk5gnt6IgSSUDSxsy1zbcA-V6fe09NK0tyOzIt9WnscDm18WGN1sotSlN8WwNOOq9Ss-Oc-VA5ClYdyVbar1hjT98IWImGJtM4EQ/s1600/birdspritepurple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDU3D4ZNc3q4yUzImZ-KvRT573XLu5aNR5StZnuZgk5gnt6IgSSUDSxsy1zbcA-V6fe09NK0tyOzIt9WnscDm18WGN1sotSlN8WwNOOq9Ss-Oc-VA5ClYdyVbar1hjT98IWImGJtM4EQ/s1600/birdspritepurple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroyyFZgwm8FA_LIftuRw570U0N-fDua1C6fH1nCbpYcveIfeG7F4339jx0YniEhZ9PCNAdIhiEefT6y50cpKXMDrcta1uQXrurQ4itzbqWLEinSHHq-DTexqUM1s-szSNDQRLcFjzumk/s1600/birdspriteGreen.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroyyFZgwm8FA_LIftuRw570U0N-fDua1C6fH1nCbpYcveIfeG7F4339jx0YniEhZ9PCNAdIhiEefT6y50cpKXMDrcta1uQXrurQ4itzbqWLEinSHHq-DTexqUM1s-szSNDQRLcFjzumk/s1600/birdspriteGreen.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxjRMvEvwIr6MPPlfg35BjvQPNFQBN8APLlhuIkODvS910xy2ibaQd8N52KoueRjulmVVxFBqi_6DcC9ubL7Jhf5hBW3eBNWrmec4YbdEAK3EC77Mk5cYpAJG9QpkqJqnR6CdpPNuXWg/s1600/birdspritebrown.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxjRMvEvwIr6MPPlfg35BjvQPNFQBN8APLlhuIkODvS910xy2ibaQd8N52KoueRjulmVVxFBqi_6DcC9ubL7Jhf5hBW3eBNWrmec4YbdEAK3EC77Mk5cYpAJG9QpkqJqnR6CdpPNuXWg/s1600/birdspritebrown.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IOGNq9m1TDt4fO_HTMKWAfqsOXOQfMeUHRo8h0C0pD03y3W3Gxxw9vwH-E8Lle_VoYQXN9P80a6Y7p_LlptCIa12De0_VLwuA4XvpvTT3SE_N6FKm9NciPI90Zso4y944grTfIDOCTU/s1600/birdspriteBlue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IOGNq9m1TDt4fO_HTMKWAfqsOXOQfMeUHRo8h0C0pD03y3W3Gxxw9vwH-E8Lle_VoYQXN9P80a6Y7p_LlptCIa12De0_VLwuA4XvpvTT3SE_N6FKm9NciPI90Zso4y944grTfIDOCTU/s1600/birdspriteBlue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiteAPch122zKRbR9clBc-fRiAqZdYDymYmXG0xGPNZ5BZVbeYNixzRp4Zhpq4h3hWHHFTqa3Xd5xePfpvunO2f8BNQe3RE6ZElbJ33jm4OjPVSSDprPnDUgG8-9CO_F9BLBkA4TGkQfPI/s1600/birdspriteblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiteAPch122zKRbR9clBc-fRiAqZdYDymYmXG0xGPNZ5BZVbeYNixzRp4Zhpq4h3hWHHFTqa3Xd5xePfpvunO2f8BNQe3RE6ZElbJ33jm4OjPVSSDprPnDUgG8-9CO_F9BLBkA4TGkQfPI/s1600/birdspriteblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBS7o7gxpaV1pXtYjSjVIUTTrRdqmIsm-7tVrVTFW03CmeQQUtNexGp2ZOBGiCNk4IqeVRH1j1sx7Xss_3J3bYJM0eZTzIJlQN-uk5MzSG0yVL7V4-iUq3JS8Ps2yb8LrxlZre4prPmvXJ/s1600/twitter+ungu.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhji4xNHbYdKq1LdZn0z99B0LfpLl5OO5SXCFCNV_Q0maGaq9RVT92GXsK_vbn1dnuUlkROL0yu2GRwIaYNwLUuBPVFHCEsYgvHkKg-K4lWnY0fIe7TsgkwKReMZpW3D2HCZ-zftInqsrBg/s1600/purple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14_J7lys-PoAiygdzDcdSCBj319Xvnl3wQV5VSm36YWdzehYF5oHiBN1JMqwPugckJ6hJWQZh7o6IRUIQEnjMQBvmEjDStUP0gElZiZu4yr-sUgYmAPmzTm3nbQb8RMU-jHSdCeSemtFQ/s1600/twitter+hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-iF7AAW-ac3RbngK75_kbfBPnHMCLTPnILsbCHFuhyphenhyphenyGHZwMt_LrMiRn9JwTXEXQ1dsnJX4oEeXi1NNLSvvsniPcKun8qBgJ3gComH1hP8uk43tWEti1kCh7Q7VIVfLAElef4zg833yX/s1600/green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4Lv9urvJ5zV4Dx1zgLZLSqjfdcGBM4IXJxRKFlp9uI72eEY8iQjmXOp7pyhmK7hXosA_BJz6faxSr_catvM1t9E8DlX3o6-VRThWDXRofWtUGrNeYMoWHHeN1bQbgExBIJeD90iLPtBp/s1600/twitter+biru.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFnZOqTG1V6hYCFFjoSI2hJTYoPcuZ55GiZDAh57nuQ51mZVVpGtbj8zK8kavUHjXIFJKhRjoTqs3Vrj0HciRfbr13zF_AfbQtsyC6uNJKOLKFkZ4L6GggT-IpqleXKB6EO3D6k_VkgvB/s1600/blue.png
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSndjl5M_PKKpcxQdKYT0jMONqxUUWHrnuyUIybFAMBe88liOEbFjD01kZaRAvvIx8dDVzgiGDbWtGBUMptahOUuwJtU9TzyLuqendvvMbdBREbozoF8pBoz8zSOoKf558C7Mkmp75Xgp/s1600/twitter+pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUSTObdDENiIpQzD80xB2sYQW9E_NChPxkpsvhyphenhyphenuLD5cDHwYh56vRx20_R0uXSvzX32zoMwG0V_e5fLPkTB7Glkn5qssfy7GaC5_ABOFdUf9OQCezOzjFFy3LhqzoLNwWT3l_GcTqGlX3q/s1600/pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdCI4FyuDiSCniZ1sy_YW9rBqa9TevyaUWMTJJcx1OJit0tTSMlxLw9TYTGl2ZBNvDTD56ZIHzjVsbg5-uzKi7euqoaLKemV8Nwqy2Yxyk50g57k7i1kQj3AULuS0qwb0LXUJNrEK_gY/s1600/birdsprite_MonozCore_Stickman.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdCI4FyuDiSCniZ1sy_YW9rBqa9TevyaUWMTJJcx1OJit0tTSMlxLw9TYTGl2ZBNvDTD56ZIHzjVsbg5-uzKi7euqoaLKemV8Nwqy2Yxyk50g57k7i1kQj3AULuS0qwb0LXUJNrEK_gY/s1600/birdsprite_MonozCore_Stickman.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTW7pyv-eQDHfz0DsHTM7E88OXmjtn2NOtFVbTxF07jD6i84kDukFSYPs-LBMVGtussXnARIU9vr__o0taQ1DxaJsnpp6sBqcc4kcZua7Ka5JYsjWxXFXiui6jTp1rIaFYJ-qpCQq47w/s1600/StarScream.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTW7pyv-eQDHfz0DsHTM7E88OXmjtn2NOtFVbTxF07jD6i84kDukFSYPs-LBMVGtussXnARIU9vr__o0taQ1DxaJsnpp6sBqcc4kcZua7Ka5JYsjWxXFXiui6jTp1rIaFYJ-qpCQq47w/s1600/StarScream.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwqBlm5v5iS8U4J3b68UNkS7GaMUCkQuxx14EDULghTbtf11ZGH3x899HcUoSDTcXFrsjgkprQ69oDyt2RAwIGPy8w7fnRxc6fcmC-1SPFD560U3mN7HtOR7CbQZZP2aO4gugA3HZHMA/s800/MonozCore.blogspot.com_BatTwitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwqBlm5v5iS8U4J3b68UNkS7GaMUCkQuxx14EDULghTbtf11ZGH3x899HcUoSDTcXFrsjgkprQ69oDyt2RAwIGPy8w7fnRxc6fcmC-1SPFD560U3mN7HtOR7CbQZZP2aO4gugA3HZHMA/s800/MonozCore.blogspot.com_BatTwitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVUCy1wUAeFZRSioUR84NU3Z2CmCgICTfNdfTCI4XSeFgsvPDwDgVQSQnhg-gHuR3zSXRDMP2rIQHOliN2VdsIhjvnMerUEGGP4zPjBRZT8ySESsBuA8nAQVwmQwfSiOyQFhnOu9fX28/s800/MonozCore.blogspot.com_SantaBirdTwitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVUCy1wUAeFZRSioUR84NU3Z2CmCgICTfNdfTCI4XSeFgsvPDwDgVQSQnhg-gHuR3zSXRDMP2rIQHOliN2VdsIhjvnMerUEGGP4zPjBRZT8ySESsBuA8nAQVwmQwfSiOyQFhnOu9fX28/s800/MonozCore.blogspot.com_SantaBirdTwitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OHL-pVZjuOS2ZqPOUgH2nrUYUvjAxJe7VMHZ8py8egOGsIaGs5PdPJwOIsILNV-iR47gA7TmOkw68XyKqCbQAMGEqah1WP2gN6h-4ScucJ3edusNT0uFEKSlYwqMd6ueAD7H8fQL88s/s800/MonozCore.blogspot.com_Dragon_Twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OHL-pVZjuOS2ZqPOUgH2nrUYUvjAxJe7VMHZ8py8egOGsIaGs5PdPJwOIsILNV-iR47gA7TmOkw68XyKqCbQAMGEqah1WP2gN6h-4ScucJ3edusNT0uFEKSlYwqMd6ueAD7H8fQL88s/s800/MonozCore.blogspot.com_Dragon_Twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpGB9KHVpIG02X50RPCEVB7F7AupIFXMFu622OQzpCpVEkS8ltOkSNRG7RbhbjMVs2LEGULH-ZahDZr4LzDZhyoKMK4z3Z7G6B0oyqNinS5jtlCwlRnWTpwN5XSClCnXjj376CMnwbFw/s800/MonozCore.blogspot.com_DBZ_Twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpGB9KHVpIG02X50RPCEVB7F7AupIFXMFu622OQzpCpVEkS8ltOkSNRG7RbhbjMVs2LEGULH-ZahDZr4LzDZhyoKMK4z3Z7G6B0oyqNinS5jtlCwlRnWTpwN5XSClCnXjj376CMnwbFw/s800/MonozCore.blogspot.com_DBZ_Twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1LuvMQMXSKB_nov26V-T4URyP57J6SG-GCrJXCzQUzFKFX6NR9gOBurA_220LlYRY2ibcN8DSNtjBdfBT-A7_qtat3s27jdf1AnAkNRqYxkKndnUiwd72BVubC5J4XKKE7cg8O5JRrf9/s800/Drakula.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1LuvMQMXSKB_nov26V-T4URyP57J6SG-GCrJXCzQUzFKFX6NR9gOBurA_220LlYRY2ibcN8DSNtjBdfBT-A7_qtat3s27jdf1AnAkNRqYxkKndnUiwd72BVubC5J4XKKE7cg8O5JRrf9/s800/Drakula.png

Baiklah gang, jika tertarik mencobanya silahkan ikuti langkah berikut:
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT.
4. Lalu masukan Script Twitter diatas.
5. Save.dan selesai, mudah bukan. :D

Selamat Mencoba, dan Semoga tutorial ini berguna bagi anda. TRIM'S ^^

Hallo Sobat Blogger Sekalian, Kembali lagi nih utta ini share mengenai tutorial blogger!


Beberapa hari yang lalu Saya sudah Memberikan Trik Cara 'Memasang Widget Radio Online (Musik Mp3 24-JAM NONSTOP)', Nah kali ini saya akan memberikan Trik Cara 'Memasang Musik (Kesukaan) diblog' Walau sebenarnya trik ini sudah tidak asing lagi didengar dikuping,hehee
dan gak ada slahnya dong utta sharing, yaaa siapa tau ajj sewaktu2 utta ingin memasang musik diblog ini, jadi tinggal buka deh postingan ini dan tidak usah nyari2 lagi tutorialnya dimbah google. :D

Baiklah, Langsung mulai ajj kalau begitu, disini saya akan memberikan Beberapa style Skin untuk Pemutar musiknya, dan sobat tidak memilih salah satu, asal jangan plih semuanya yah, bisa2 pengunjung blog anda pusing mau dgrin yg mana.hahaa xD
berikut Skin2 pemutar musiknya yang sobat bisa pilih sendri..!! :D

STYLE 1 (Lebih dari 1 Lagu)


  • <center><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://irland.heck.in/files/anonymous-illuminati.mp3&t0=Anonymous-Illuminati&f1=http://cache24.clip.dj/media/mp3/RPgSaWjJ3HY.mp3&t1=Anonymous-Globus&f2=http://cache28.clip.dj/media/mp3/HFA9aPu47nc.mp3&t2=Anonymous-AOA&f3=http://aingcreations.heck.in/files/static-x-cold.mp3&t3=Static-X-Cold&f4=http://xover3.jkt.3d.x.indowebster.com/download-vip/69/p16f6h48lb1qk0lbvgbd100ef0o5.mp3/%5Bwww.indowebster.com%5D-fuck-malaysia.mp3&t4=Malay&total=5" quality="high" wmode="transparent" width="220" height="20" name="akaUTta" align="middle" type="application/x-shockwave-flash" /></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Hijau adalah Judul Musik (Mp3).
- Teks yang berwarna Kuning adalah 'false' (Berarti Non Auto Play), Rubah Menjadi 'True' (Berarti Auto Play).

STYLE 2 (1 Lagu)


  • <center><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://xover3.jkt.3d.x.indowebster.com/download-vip/69/p16f6h48lb1qk0lbvgbd100ef0o5.mp3/%5Bwww.indowebster.com%5D-fuck-malaysia.mp3&t0=5D-NoName&total=1" quality="high" wmode="transparent" width="220" height="20" name="akaUTta" align="middle" type="application/x-shockwave-flash" /></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Hijau adalah Judul Musik (Mp3).
- Teks yang berwarna Kuning adalah 'false' (Berarti Non Auto Play), Rubah Menjadi 'True' (Berarti Auto Play).


STYLE 3 (1 Lagu)


  • <center><embed src="http://img227.imageshack.us/img227/3087/playergv1.swf?soundFile=http://pelangi.faa.im/files/the-arcade-fire-wake-up.mp3&amp;bg=0x000000&amp;leftbg=0x000000&amp;lefticon=0xFFFFFF&amp;rightbg=0x333333&amp;rightbghover=0x333333&amp;righticon=0xCCCCCC&amp;righticonhover=0xFFFFFF&amp;text=0xcccccc&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0xcccccc&amp;autostart=NO&amp;loop=yes" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="50" width="220"></embed></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Kuning adalah 'NO' (Berarti Non Auto Play), Rubah Menjadi 'YES' (Berarti Auto Play).

STYLE 4 (1 Lagu)


  • <center><embed type="application/x-shockwave-flash" src="http://www.4shared.com/flash/player.swf?ver=9051" style="" id="ply" name="ply" quality="high" allowscriptaccess="always" allowfullscreen="false" wmode="opaque" flashvars="file=http://dc480.4shared.com/img/1490796214/6c5527df/dlink__2Fdownload_2FvwUU_5F99j_3Ftsid_3D00000000-000000-00000000/preview.mp3&amp;volume=100&amp;autostart=false&amp;" height="20" width="220"></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Kuning adalah 'false' (Berarti Non Auto Play), Rubah Menjadi 'True' (Berarti Auto Play).

STYLE 5 (1 Lagu)


  • <center><embed src="http://static.4shared.com/flash/player.swf?file=http://aingcreations.heck.in/files/static-x-cold.mp3&image=http://picturestack.com/311/470/vyDakauttamp3xW8.png&repeat=always&autostart=false" width="255" height="47" allowscriptaccess="always"></embed></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Kuning adalah 'false' (Berarti Non Auto Play), Rubah Menjadi 'True' (Berarti Auto Play).

STYLE 6 (Lebih dari 1 Lagu)


  • <center><div style="display:inline-block;font:normal 12px oswald;text-align: center; cursor: pointer; margin:2px; padding:3px 4px; background-color:none;border:1px solid #ccc;
    -webkit-box-shadow:inset 0 0 2px #ccc;-moz-box-shadow:inset 0 0 2px #ccc;box-shadow:inset 0 0 2px #ccc;border-radius:4px;" onclick="window.open('https://www.facebook.com/uttamelanikz/');$(this).hide()">
    <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" height="80" width="200">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#222222" />
    <param name="FlashVars" value="mp3=http://pelangi.faa.im/files/oasis-stop-crying-your.mp3|http://mediacloud.whirled.com/5314e8d0df97da50085636c63e0fbd292fd214c9.mp3|http://cache24.clip.dj/media/mp3/RPgSaWjJ3HY.mp3|http://cache28.clip.dj/media/mp3/HFA9aPu47nc.mp3|http://irland.heck.in/files/anonymous-illuminati.mp3|http://xover2.jkt.3d.x.indowebster.com/download/51/70853db83d2ee112b0b032c44ba9a774.mp3|http://xover3.jkt.3d.x.indowebster.com/download-vip/69/p16f6h48lb1qk0lbvgbd100ef0o5.mp3/%5Bwww.indowebster.com%5D-fuck-malaysia.mp3|http://xover1.jkt.3d.x.indowebster.com/download-vip/42/dbc190ffe8888ee976fa70599e4516f6.mp3/[www.indowebster.com]-Repvblik_06._Aku_Dan_Perasaan_Ini.mp3|http://xover1.jkt.3d.x.indowebster.com/download/58/buynyk3rjcfzw5u6a0y9ay66j0gk3rrp.mp3&amp;title=Stop Crying Your Heart Out|Hey There Delilah|Globus|AOA|Illuminati|Jangan Menangis Untukku|Indo for Malay|Aku Dan Perasaan Ini|Telanjangi Dunia&amp;autoplay=false&amp;skin=" /></object></div></center>

KET::
- Teks yang berwarna Merah adalah File Musik (Mp3).
- Teks yang berwarna Hijau adalah Judul Musik (Mp3).
- Teks yang berwarna Kuning adalah 'false' (Berarti Non Auto Play), Rubah Menjadi Angka '1' (Untuk Auto Play).

TAMBAHAN MUSIK MP3 GANG..!!
Lihat Daftar List Mp3 Yang Sudah Tersedia
Anonymous - Globus
http://cache24.clip.dj/media/mp3/RPgSaWjJ3HY.mp3

Anonymous - AOA
http://cache28.clip.dj/media/mp3/HFA9aPu47nc.mp3

Anonymous - Illuminati
http://irland.heck.in/files/anonymous-illuminati.mp3

Bondan - Gusti Dewata Mulia Raya
http://pelangi.faa.im/files/gustidewatamuliaraya.mp3

Life Starts Here
http://pelangi.faa.im/files/new-nutrilon-royal-life.mp3

Oasis - Stop Crying Your Heart Out
http://pelangi.faa.im/files/oasis-stop-crying-your.mp3

A Perfect Switch - The Outsider
http://pelangi.faa.im/files/a-perfect-switch-the-ou.mp3

Static-X - Cold
http://aingcreations.heck.in/files/static-x-cold.mp3

gita gutawa - vocalizing
http://aingcreations.heck.in/files/gita-gutawa-vocalizing.mp3

Linkinpark - Givenup
http://aingcreations.heck.in/files/linkin-park-given-up.mp3

The Arcade Fire - Wake Up
http://pelangi.faa.im/files/the-arcade-fire-wake-up.mp3

Secondhand Serenade - Awake
http://pelangi.faa.im/files/secondhand-serenade-awa.mp3

Gita Gutawa - Harmoni
http://pelangi.faa.im/files/gita-gutawa-harmoni-cin.mp3

JTL - My Lecon
http://pelangi.faa.im/files/jtl-my-lecon.mp3

Garasi - Sahabat
http://pelangi.faa.im/files/garasi-sahabat.mp3

Vickersurf - Mimpi Semu
http://pelangi.faa.im/files/vickersurf-mimpi-semu.mp3

The Red Jumpsuit Apparatus - Your Guardian Angel
http://pelangi.faa.im/files/the-red-jumpsuit-apparatu.mp3

The Vines - Winning Days
http://pelangi.faa.im/files/the-vines-sun-child.mp3

The Vines - Sun Child
http://irland.heck.in/files/the-vines-winning-days.mp3

The Vines - Ride
http://irland.heck.in/files/the-vines-ride.mp3

DJ Pabeulit - Teu Nyaho
http://pelangi.faa.im/files/dj-pabeulit-aing-mah-te.mp3

Avenged Sevenfold - I won't see you tonight
http://pelangi.faa.im/files/avenged-sevenfold-i-won.mp3

Slipknot - Vermilion pt.2
http://pelangi.faa.im/files/slipknot-vermilion-pt.mp3

Maddi Jane - Breakeven
http://pelangi.faa.im/files/maddi-jane-breakeven-f.mp3

Maddi Jane - Mine
http://pelangi.faa.im/files/maddi-jane-mine-acoust.mp3

Maddi Jane - Price Tag
http://pelangi.faa.im/files/maddi-jane-price-tag.mp3

Slipknot - Snuff
http://pelangi.faa.im/files/slipknot-snuff.mp3

Ungu - Dirimu Satu
http://pelangi.faa.im/files/ungu-dirimu-satu.mp3

Slank - 2 Sweet 2 Forget
http://pelangi.faa.im/files/slank-2-sweet-2-forget.mp3

Jason Mraz - A BEAUTIFUL MESS
http://pelangi.faa.im/files/jason-mraz-a-beautiful.mp3

WTWTA - Wild Rumpus Start
http://pelangi.faa.im/files/rt-wtwta-wild-rumpus-st.mp3

Betrayer - Bendera Kuning
http://irland.heck.in/files/betrayer-bendera-kuning.mp3

WANTED OST
http://irland.heck.in/files/wanted-ost-backsound2.mp3

Once Mekel - Matilah Kau
http://irland.heck.in/files/once-mekel-matilah-kau.mp3

Flyleaf - I'm So Sick
http://irland.heck.in/files/flyleaf-im-so-sick.mp3

Kerispatih - Demi Cinta
http://irland.heck.in/files/kerispatih-demi-cinta.mp3

James Blunt - Wisemen
http://irland.heck.in/files/james-blunt-wisemen.mp3

James Blunt - No Bravery
http://irland.heck.in/files/james-blunt-no-bravery.mp3

Michael Jackson - Ben
http://irland.heck.in/files/michael-jackson-ben.mp3

LOLITA - CLEOPATRA STRANAN
http://irland.heck.in/files/lolita-cleopatra-strana.mp3

Mulan Jamidong - Mahluk Tuhan Paling Sexy
http://irland.heck.in/files/mulan-jamidong-mahluktu.mp3

Korn - Twist
http://irland.heck.in/files/korn-twist.mp3

Netral - Dunia Koma
http://irland.heck.in/files/netral-dunia-koma.mp3

Netral - Hujan
http://irland.heck.in/files/netral-hujan.mp3

Netral - Indah
http://irland.heck.in/files/netral-indah.mp3

Netral - Nurani
http://irland.heck.in/files/netral-nurani.mp3

Netral - Desa Ku
http://irland.heck.in/files/netral-desa-ku.mp3

Superman is Dead - kuta rock city
http://irland.heck.in/files/superman-is-dead-kuta-r.mp3

Superman is Dead - this is run lone
http://irland.heck.in/files/superman-is-dead-this-i.mp3

Superman is Dead - kings, queen & poison
http://irland.heck.in/files/superman-is-dead-kings.mp3

Cokelat - Dilema
http://irland.heck.in/files/cokelat-dilema.mp3

DrDre-Eminem - Guilty Conscience
http://irland.heck.in/files/drdre-eminem-guilty-con.mp3

Steve Vai - For The Love Of God
http://irland.heck.in/files/steve-vai-for-the-love.mp3

Padi - Tempat Terakhir
http://irland.heck.in/files/padi-tempat-terakhir.mp3

Death Cab For Cutie - Grapevine Fires
http://irland.heck.in/files/death-cab-for-cutie-gra.mp3

Warteg Boys - Ok Lah Kalo Begitu
http://irland.heck.in/files/warteg-boys-ok-lah-kalo.mp3

Megan MCCauley - Wonder
http://irland.heck.in/files/megan-mccauley-wonder.mp3

Jason Mraz - I'm Yours
http://irland.heck.in/files/jason-mraz-im-yours.mp3

Jamrud - Putri
http://irland.heck.in/files/jamrud-putri.mp3

Garasi - Awakening
http://irland.heck.in/files/garasi-awakening.mp3

Jamrud - Surti Tejo
http://irland.heck.in/files/jamrud-surti-tejo.mp3

Slank - Ngangkang
http://irland.heck.in/files/slank-ngangkang.mp3

Redcore - Mario Bros
http://irland.heck.in/files/redcore-mario-bros-the.mp3

Jika Sobat Ingin Menambahkan 'File.mp3' Silahkan Cantumkan Dikolom Komentar yang tersedia.Thanks dan Semoga Bermanfaat yah all :D Keep Blogging!

Baiklah Pada kesempatan kali ini saya ingin memberikan tutorial cara 'Memasang widget si yoyo' diblog, ya mungkin ada sebagian kalangan menganggap widget ini gak bgtu penting ntuk dishare, tp gpp lah, yg mau sj yah.hehee,..

http://picturestack.com/538/742/62Ayoyoakauttx0s.jpg

karena berhubung ada juga slah satu teman kita yg mencoba meminta widget si yoyo, lbh jlasnya bernma si Darmawan :D, mirip si yoyo.ckckkk,.. (Upss entr dia baca article ini, jdi berabeh deh)..!!

Baiklah langsung ke TKP klw gtu, cara pemasangannya pun sangat mudah, silahkan ikuti langkah2 berikut:
diblog sobat:





    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode </body>
  3. Dan Letakkan kode berikut diatasnya :

<div id='namanyayoyo' style='position:fixed;bottom:50px;left:0;z-index:1'><embed bgcolor='#FFFFFF' height='125' id='mymovie' name='mymovie' quality='high' src='http://www.cute-factor.com/animation/yoyocici/yoyoduo.swf' style='' type='application/x-shockwave-flash' width='50' wmode='transparent'/></div>

4. Langkah terakhir save template. dan lihat hasilnya.

Semoga Bermanfaat ya all :D

Assalamualaikum wr.wb.
Sesuai dengan judul diatas kali ini kita akan belajar mengenai bagamaina cara Memodifikasi Tampilan Populart Posts pada blog,agar lebih menarik xD , dan saya akan mencoba menjelaskan sedikit jadi popular posts adalah sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan default thumbs imagenya, sehingga article yg tdk memiliki gambar akan ditmpilkan scra thumbs. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

http://picturestack.com/508/591/u2CpopularakamWZ.jpg

Karena ada juga slah satu teman kita yg menanyakan kpda sy 'bgmn cra membuat populart posts sprti punya utta skrg?? ada tutorialnya gak??', tp komentr beliau blm sempat sy bls.hehee,...
Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :




    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/* Popular Posts */
#PopularPosts1{max-width:300px;}
#PopularPosts1 dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
#PopularPosts1 img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:left;width:77px;height:77px;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #00CCD3;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
#PopularPosts1 img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #00CCD3;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #00CCD3;box-shadow:1px 1px 5px #00CCD3}
#PopularPosts1 ul{padding:0;overflow:none;margin:0}

-Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.

4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

http://picturestack.com/509/223/C0NpopularakaS2B.jpg

6. Setelah langkah diatas selesai, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

  • <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 == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (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 == &quot;false&quot;'>
                <!-- (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 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>

7. Setelah ketemu, ganti dengan kode 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 class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (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 -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://picturestack.com/228/804/rP7noimagegzi.jpg'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


8. Terakhir Simpan Template.


Demikian tadi tutorial Mempercantik Popular Posts with Thumbs ala akaUTta, jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar yang tersedia, maaf jika saya kurang baik menyelaskannya. :D selamat mencoba dan semoga bermanfaat.!!

Ngawi Cyber

Diberdayakan oleh Blogger.