Kumpulan Widget Untuk Blog

Fungsi Widget sendiri dalam blog adalah hal yang menurut saya harus ada, karena selain untuk menyortir setiap artikel sesuai label, dapat juga untuk mempermudah bagi pengunjung untuk memperpleh informasi secara cepat dengan melihat artikel dalam widget tersebut.

Apa sih widget itu?, widget merupakan tempat dimana untuk memasukan script berupa html ataupun javascript yang dapat digunakan dalam personalisasi blog.

Pada kesempatan ini, saya akan membagikan beberapa widget yang dapat berguna untuk blog sobat.

1. Popular Post

 <b:widget id='PopularPosts1' locked='false' title='Artikel Terpopuler' type='PopularPosts'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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> 
            <a expr:href='data:post.href' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>
      </li>
      </b:loop>
    </ul>
  </div></b:if>
</b:includable>
  </b:widget>

 2. Rencent Post by Tag

 <script>
document.write("<script src=\"/feeds/posts/default/-/Blogger?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

3. Rencent Post by Title Tag 

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://re-visi.blogspot.co.id/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

4. Random Post 

<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://re-visi.blogspot.co.id/",
numPosts = 5;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",
ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

5. Sosial Media 

<div style="background:#E73138;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;">
<a href="http://www.blogger.com/follow-blog.g?blogID=46184886082242141" target="_blank" title="Follow this blog"><span style="color:#fff">Join Now</span></a></div><div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'><div style='background:#fff;margin:0;'><div class="fb-like-box" data-href="https://www.facebook.com/revisi" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div><div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/revisi" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @nama</a><div class="g-plusone" data-size="medium" data-count="true" data-width=100" data-href="http://re-visi.blogspot.co.id"></div></div></div><div class="g-person" data-href="//plus.google.com/109555001087316493737" data-layout="landscape" data-rel="author"></div>

Nb: Silahkan ganti Url yang saya beri warna biru dengan Url milik sobat.

Itulah 5 Widget yang dapat sobat gunakan untuk ditambahkan di blog, dan saya rasa untuk penambahan atau pemasangan Widget tersebut sobat sudah tau tentunya, namun jika ada yang harus di tanyakan silahkan menyampaikannya


Semoga bermanfaat dan terima kasih..
Bye

Tweet

Subscribe to receive free email updates: