Blogger Stuff

Widget Artikel Populer ala Cipstuff

Standard
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.

7 Blog yang menginspirasi

Standard

Berikut ini adalah daftar 10 blog yang menjadi inpirasi saya dalam mendesain blog saya seperti sekarang ini. Memang tidak seratus persen blog saya ini adalah orisinil. Saya juga mbacem memperlajari dari berbagai blog yang menurut saya menarik. Daftar blognya adalah sebagai berikut :

1.Blog mas anang. Blog yang terkenal dengan jargon “Anang adalah Anang’ku’ bukan Anang’mu’ atau Anang-nya mereka” ini memang blog yang menurut saya komplit, mulai dari cerita unik, foto – foto menggelitik hingga tutorial – turorial blognya yang sangat bagus.

Anangku.blogspot.com

2.Blog Kang Jaloee. Sempat dulu menggunakan template Nyahoo-nya, namun sekarang menggunakan Google Boogle sebagai inspirasinya. Blog yang cenderung menyukai tema simpel dan sederhana ini memiliki puluhan bahkan ratusan tutorial blog khususnya blogger.

catalog-tutorial.blogspot.com

3.Blog eosmate. Yang saya suka dari blog ini adalah tab yang ada di sidebar kanannya, selain informasi dan kontemplasi, blog ini juga banyak memberikan tutorial seputar blog serta informasi – informasi terbaru yang berhubungan dengan blog. Satu lagi yang saya suka yaitu jargonnya “penulis blog ini, hanya bisa bicara banyak disini. Tapi tidak di hadapan Ibunya”

eosmate.blogspot.com

4.Blognya Dzofar. Blog ini merupakan blog yang unik, karena didalamnya ada cerita – cerita yang bikin ngakak setengah hidup jika anda mencoba membacanya. Selain memiliki jargon – jargon yang menggelitik seperti “makluk istrinya pakulum” atau “demi sesuap nasi laptop” empunya blog ini juga jago bikin vektor. Tidak percaya… buktikan langsung? caranya ? coba pesan vektor ditempatnya!

dzofar.com

5.Blog Antonio lupetti. Sebelum berpindah ke woorkup.com sebelumnya antonio memiliki blog di blogspot. Tema yang saya digunakan diblog saya ini saya adopsi dari kepunyaan dia. Jadi jangan heran jika blog saya ini seperti kloningan dari blognya. Dan memang benar.

woork.blogspot.com

6.Blog how2dostuff. Yang saya suka dari blog ini adalah isinya yang simpel dan sangat kreatif. Selain tampilan layoutnya yang bisa dilihat sederhana dan tegas. Artikel yang ada di blog ini sangat informatif dan menarik.

how2dostuff.blogspot.com

7.Iyalucu08 Blog. Blog ini berisi request lagu – lagu jaman jadul sampai dengan terbaru. Dulu saat mencari lagu yang susah banget, eh ternyata temunya diblog ini, tampilan yang sederhana namun memiliki isi yang luar biasa… iya lucu.

iyalucu08.blogspot.com