• Popular Items

    • Memori 1990 an
      Masih teringat dengan masa kecilku, kurang lebih awal 90-an. Waktu kelas SD kelas 2, tepatnya tahun 1993, tiap hari apa tuh ! hari rabu ato ...
    • Gethuk asale saka tela
      "Sore-sore padhang bulan, ayo kanca padha dolanan. Rene-rene bebarengan, rame-rame do gegojekan, kae-kae rembulane yen disawang kok nga...
    • Soal - soal sederhana Teknik Sipil
      Begini sobat, saat membuka - buka laptop saya menemukan file yang isi pertanyaan - pertanyaan sederhana seputar konstruksi . Anggap saja seb...
    • Pekerjaan Tiang Pancang
      Pondasi adalah bagian terbawah dari suatu struktur yang berfungsi menyalurkan beban dari struktur diatasnya ke lapisan tanah pendukung. Pond...
    • Ketika Kartu ATM BTN Terblokir
      Karena ingin mengecek saldo, beberapa waktu lalu saya pergi ke ATM di Mall Kalibata, karena belum ada ATM BTN disitu, saya coba mengecek lew...
    • Home
    • Daftar Isi
    • Blogroll
    • About

    Menu Blog

    SITEMAP

    open all | close all

    PALING BANYAK DIBACA

    • Memori 1990 an
    • Soal - soal sederhana Teknik Sipil
    • Pekerjaan Tiang Pancang
    • Ketika Kartu ATM BTN Terblokir
    • Tukar Link
    Sikap
    Fundamental
    Goggle
    Chart
    Investasi
    Saham
    Goggle
    Chart
    Bisnis
    Online
    Adobe
    Flash

    July 5, 2010

    Widget Artikel Populer ala Cipstuff

    Tag Blogger Stuff
    0
    comments
    Tweet It
    Share This
    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.
    '
    Baca Juga yang ini :
    Subscribe RSS ReTweet Share on FB Add to Technorati
    By Ciput Mardianto di July 05, 2010
    Label: Blogger Stuff

    No comments:

    Post a Comment

    Older Post Newer Post Home
    Subscribe to: Post Comments (Atom)
    • home
    • + Apakah boleh mengkopi informasi yang ada diblog ini?

      Boleh, Gratis selama bermanfaat.

      + Apa boleh dibuat blogroll?

      Monggo dengan senang hati, kalau sudah diblogroll konfirmasi balik, biar ganti saya blogroll.

      + Apa tema blog ini?

      Gado-gado.

      + Apa tema blog ini?

      Gado-gado.

      + Copyright Blog ini?

      Hosting by Blogger (Google.com) dan Template by Virtuti.

      + Apa aja yang bisa dibagi?

      Tulisan, File, Mp3 dan lain-lain yang bermanfaat.

      + Bagaimana melihat arsip keseluruhan?

      Tinggal Buka halaman Archive

      click FAQ button to close this window
      faq
    • facebook
  • www.viola.id

    • Home
    • About
    • Blogroll
    • Daftar Isi

    Another Stuff

    • Audiophile
    • Blogger Stuff
    • Inspirasi
    • Kuliner
    • Menarik
    • Movies
    • Musik
    • Photography
    • Sharing
  Ciput Mardianto's Blog © 2007-Now
↑