Reminder



Start Small, Break larger tasks into small steps, set achievable goals

Widget Artikel Populer ala Cipstuff

Tag Blogger Stuff
July 5, 2010
0 comments
Widget Artikel Populer ala Cipstuff. Pada kesempatan kali saya akan menulis tutorial sederhana tentang bagaimana membuat widget “artikel populer” dari blog kita, tutorial ini dikhususkan buat pengguna blogspot. Kita tahu bahwa banyak sekali tutorial tentang bagaimana membuat widget “artikel populer” ini, namun widget ini berbeda dengan yang lain karena disampingnya ada link subscribenya. Contoh dari widget ini, anda bisa lihat setelah mengeklik salah satu judul postingan di blog ini. Screenshoot nya kira – kira seperti ini :

Widget “Artikel Populer ala Cipstuff”

Sebelum misi rahasia ini dijalankan, backup dulu template anda. Baiklah langsung saja, pertama bukalah halaman edit html di dashboar blogspot anda, kemudian kopi kode ini:
Code [untuk CSS] :
/* awal css*/

.artikelpopuler li
{
padding: 0 0 4px 17px;
background: url(http://t3.gstatic.com/images?q=tbn:gMoDR-FiKi9JwM) no-repeat 0 3px;
}

.adis
{
margin-bottom:10px;
border-top:solid 1px #DEDEDE;
padding-top:10px;
font-size:13px;
}

.ads-right-min
{
border-left:solid 1px #DEDEDE;
height:150px; padding-left:10px;
}

.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited
{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}

.ads-right-min a:hover,
.bottom-share-links a:hover
{
color:#666;
}

.mini-feed
{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrVhkTClEUI/AAAAAAAAFqo/v8AYhMipuYU/feed.gif) no-repeat;
}

.mini-tweet
{
background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;
}

.mini-tech
{
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;
}

.mini-facebook
{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif) no-repeat;
}

/* akhir css*/

Penjelasan : Kopi kode css diatas sebelum tanda ]]></b:skin>, kemudian save, sampai disini jika tidak ada masalah berarti anda telah sukses melewati rintangan pertama, sekarang siapkan diri anda untuk menghadapi tantangan berikutnya.

Baiklah sekarang kita menginjak langkah kedua, Setelah CSS selesai, sekarang kita tinggal membuat kode HTML, kodenya seperti seperti berikut ini *agak panjang*:

Code untuk [HTML] :
<b:if cond=’data:blog.homepageUrl != data:blog.url’>

<div class=’adis’>

<table border=’0′ cellpadding=’0′ cellspacing=’0′ width=’100%’>
<tbody>

<tr>

<td valign=’top’ width=’295‘>
<div class=’artikelpopuler’ style=’border: 1px solid #dedede; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding: 0pt 5px; line-height: 18px; background: #efefef none repeat scroll 0% 0%; width: 290px; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;’><div style=’background: #ccc none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 135px; color: #000; text-align: center;’><b>Artikel Populer</b></div>
&lt;script type=&quot;text/javascript&quot;&gt;
function pipeCallback(obj) {
document.write(&#39;&lt;ul style=&quot;text-transform: capitalize;&quot;&gt;&#39;);
var i;
for (i = 0; i &lt; obj.count ; i++)
{
var href = &quot;&#39;&quot; + obj.value.items[i].link + &quot;&#39;&quot;;
var item = &quot;&lt;li&gt;&quot; + &quot;&lt;a href=&quot; + href + &quot;&gt;&quot; + obj.value.items[i].title + &quot;&lt;/a&gt; &lt;/li&gt;&quot;;
document.write(item);
}
document.write(&#39;&lt;/ul&gt;&#39;);
}
&lt;/script&gt;
&lt;script src=&quot;http://pipes.yahoo.com/pipes/pipe.run?_render=json&amp;_callback=pipeCallback&amp;_id=ff855e4f4d4a10fde1c2eb32074f99cd&amp;url=http%3A%2F%2Fyourblog.blogspot.com&amp;num=5&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</div>
</td>

<td>
<div class=’ads-right-min’>
<a class=’mini-feed’ href=’Your RSS Link‘>Subscribe RSS Feed</a>
<a class=’mini-tweet’ expr:href=’&quot;http://twitter.com/home/?status=yourblog.blogspot.com:=&quot; + data:post.url’>ReTweet</a>
<a class=’mini-facebook’ expr:href=’&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url’>Share on Facebook</a>
<a class=’mini-tech’ href=’http://technorati.com/faves?sub=addfavbtn&amp;add=http://yourblog.blogspot.com‘>Add to Technorati</a>
</div>
</td>

</tr>

</tbody>
</table>

</div>

</b:if>

Petunjuk : Your RSS link, ganti dengan alamat rss blog anda, sebagai contoh jika anda alamat blog anda adalah mantabs.blogspot.com maka rss link adalah http://mantabs.blogspot.com/rss.xml

yourblog.blogspot.com, ganti yourblog dengan nama blog anda. Sementara width yang ada pada tabel diatas adalah lebar untuk mengatur tabel sisi kanan yang berisi artikel terbaru, sementara sisi kiri akan secara otomatis menyesuaikan.

num=5&quot; kode ini menunjukkan jumlah artikel yang akan tampil, ganti angka 5 diatas sesuai dengan selera anda.

Langkah ketiga adalah dimana akan meletakkan kode HTML diatas, ditutorial ini, widget tersebut akan diletakkan tepat dibawah postingan, centang Expand Template Widget dan kopi pastekan kode HTML yang sudah anda edit tersebut setelah kode <p><data:post.body/></p> atau biasanya <data:post.body/> dan kemudian tekan save.

Semoga sukses. Anda juga bisa mengutak-atik sendiri, dengan mengganti kode warna serta ukuran lebar masing-masing elemen. Selamat mencoba dan semoga berhasil.

Leave a Reply

Your email address will not be published. Required fields are marked *