Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Tuesday, September 1, 2009

Memasang Cumulus pada Blogspot Blog

Cumulus adalah suatu kumpulan tag dan category dalam animasi flash (Contoh nya dapat anda lihat pada sidebar di blog ini). Jika kita mengunakan Joomla atau Wordpress, maka kita tinggal pasangkan Plugin pada Wordpress atau sejenis Module pada Joomla. Namun, untuk blospot tidak semudah itu memasangnya, tapi bukan berarti sulit.

Sebenarnya pemasangan pada blogspot juga sama mudahnya dengan pemasangan pada Joomla dan Wordpress, hanya saja caranya memang sedikit berbeda.

Jika anda tertarik memasang Tag cloud yang seperti biasa, silakan ikuti langkah-langkah membuat tag cloud pada blogger disini atau jika anda tertarik untuk memasang Cumulus pada blogspot blog anda, maka silakan ikuti langkah-langkah berikut ini. (Sebelumnya Backup dulu template anda).

  1. Buatlah widget label standar blogspot terlebih dahulu. Caranya klik “Add a Gadget” pada menu “Layout > Page Element
    Isi Title sesuai dengan keinginan anda, contoh “Labels in Cloud”, dan biarkan opsi lainnya seperti apa adanya.
  2. Kemudian masuk ke menu “Edit HTML” dan centang “Expand Widget Templates”, temukan kode-kode berikut ini:
    <b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

    Note: ini adalah kode dari widget label yang kita buat tadinya.

  3. Ganti kode tersebut dengan kode dibawah ini.
    <b:widget id='Label1' locked='false' title='Labels in Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
    <script type='text/javascript'>
    var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  4. Sekarang “Save Template” dan selesai sudah Cumulus untuk blogger anda.

Ada beberapa poin yang perlu diperhatikan untuk mengedit Widget Cumulus tersebut. Perhatikan tulisan berwarna dalam penggalan kode dibawah ini.

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&amp;quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&amp;quot;, &amp;quot;tagcloud&amp;quot;, &amp;quot;240&amp;quot;, &amp;quot;300&amp;quot;, &amp;quot;7&amp;quot;, &amp;quot;#ffffff&amp;quot;);

BIRU, lokasi file support (SWF dan JS) untuk menampilkan widget cumulus. File-file tersebut dihosting di http://halotemplates.s3.amazonaws.com. Bisa saja sewaktu-waktu file tersebut hilang. Maka untuk berjaga-jaga silakan download kedua file tersebut disini. Dan jika suatu saat hilang, kita dapat mengantikan alamat url tersebut sesuai tempat host kita nantinya.

Contoh:
http://www.namasitussaya.com/swfobject.js
http://www.namasitussaya.com/tagcloud.swf

HIJAU
, Ukuran lebar (width) Cumulus.
MERAH, Ukuran tinggi (height) Cumulus.
PINK, Warna latar Cumulus.


Selamat mencoba…

img are from: http://wordpress.org

READ MORE - Memasang Cumulus pada Blogspot Blog

Friday, July 31, 2009

Membuat emoticon pada komentar blog

emoticonKali ini kita akan memasukan emoticon bergambar pada bagian komentar, sehingga para pengunjung dapat mengungkapkan emosinya dengan gaya yang menarik, he3… trik cukup gampang dan mudah sekali di implementasikan, ikuti saja langkah-langkahnya dan hanya dalam lima menit blog anda sudah menjadi semakin hidup oleh icon-icon yang imut-imut dan lucu.

    1. Login ke Blogger dan langsung menuju Layout > Edit HTML.

    2. Jangan lupa backup template anda terlebih dahulu, untuk menghindari kesalahan-kesalahan yang tidak disengaja.

    3. Centang Expand Widget Templates, dan temukan kedua baris kode berikut ini, anda bisa melakukanya dengan fungsi pencarian.

      <p class='comment-footer'>
      <b:if cond='data:post.embedCommentForm'>

    4. Kemudian sisipkan kode-kode berikut ini diantar kedua baris diatas, sehingga menjadi seperti ini:

      <p class='comment-footer'>
      <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
      <b>
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> L(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> J
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> L
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> K
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> J]
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
      </b>
      </div>

      <b:if cond='data:post.embedCommentForm'>
    5. Nah, sekarang tinggal kita sisipkan kode Scriptnya seperti dibawah ini dan sisipkan sebelum tag </body>
      <script src='http://vishalgkr.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://www.tricksmachine.com" target="_blank">Tricks Machine</a></noscript>
    6. Selesai, simpan kembali template anda. Sekarang dibagian terlihat emotikon dibawah posting, seperti diblog ini neh… he3…

    Sumber Kode, http://www.tricksmachine.com

    READ MORE - Membuat emoticon pada komentar blog

    Friday, July 24, 2009

    Related post dengan gambar memakai LinkWithin

    Membuat “Related Post” adalah salah satu metode agar blog kita dapat menyediakan pilihan-pilihan artikel menarik lainnya dalam blog kita yang hampir sama atau relative sama (atau ada hubungan sodara) dengan artikel yang sedang mereka baca, dengan begitu pembaca dapat langsung menuju ke artikel lainnya tersebut tanpa harus mencari melalui menu navigasi atau semacamnya. Dan bagi pemilik blog, hal ini sangat menguntungkan karena artikel-artikel lama akan dapat dipanggil kembali jika memiliki kesamaan materi dengan artikel terbaru, dan ini berarti traffic untuk artikel terdahulu kita.

    Ada beberapa metode untuk membuat related post, namun kenapa kali ini kita mengunakan service LinkWithin? Simple sekali, karena disamping LinkWithin membuat related post menjadi lebih menarik dengan menyertakan gambar (thumbnails), widget ini juga menampilkan artikel yang lebih relevan. Contoh dibawah ini yang diambil dari blog yang sudah mengunakan LinkWithin diambil dari Templates4alls.blogspot.com

    Sekilas LinkWithin
    LinkWithin adalah suatu jasa yang menyediakan “Related Post Widget” yang mudah diinstall dan tidak ada iklan didalamnya. Dan service ini GRATIS apa adanya, hal ini dapat dilihat dalam FAQ-nya:
    We plan to introduce revenue-sharing features in the future, but they will be optional.

    Kira-kira begini terjemahannya:
    Kami berencana untuk memperkenalkan suatu program Pendapatan nantinya, namun ini hanya bersifat suatu opsi/pilihan.” (he3, bahasa inggris saya memang dapat nilai 10 - Lebay mode-On)

    Cukup basa-basinya, bagi yang berminat menempelkan widget ini diblognya langsung saja ke sini.


    Dan lengkapi kolom-kolom yang tersedia lalu tekan “Get Widget!” selanjutnya anda tinggal mengikuti petunjuk yang diberikan. Setelah selesai menempelkannya diblog anda, mungkin anda harus menunggu beberapa saat sebelum Linkwithin bekerja diblog anda, ini dikarenakan Linkwithin sedang melakukan proses crawl pada blog anda.

    Apakah anda sudah pernah mengunakan atau akan mengunakan widget ini, silakan berikan komentar dan masukan anda dibawah ini.

    READ MORE - Related post dengan gambar memakai LinkWithin

    Saturday, May 2, 2009

    Counter mini yang praktis dengan fitur yang menarik

    Kita tahu ada berbagai jenis Hit counter yang ditawarkan di internet, ada yang berbayar dan ada yang gratis, baik dari yang memberikan layanan yang sangat komplit seperti memberikan data pengunjung secara detail sampai yang hanya menunjukan angka pengunjung saja tapi tidak tahu dari mana datangnya.

    Referensi kali ini saya menunjukan sebuah situs layanan yang memberikan jasa Hit Counter yang praktis alias tidak memberatkan situs sehingga situs dapat loading lebih cepat, walaupun begitu bukan berarti ini counter sembarangan. Walau bersifat gratis namun counter ini cocok ditempelkan di blogger, wordpress, dan bahkan joomla sekalipun.

    Anda dapat mendaftar disini. Setelah terdaftar login ke "Member Area" dan anda akan dihadapkan pada tiga pilihan sebagai berikut:







    "Customize", anda dapat merubah warna counter mini dari menu ini.
    "HTML Code", dapatkan kode htmlnya disini dan tempelkan pada websites/blog.
    "Statistics", Fitur ini dapat menunjukan pada kita dari mana pengungjung kita berasal, referrel nya dari mana, dan situs mana yang di buka.

    Fitur lain adalah counter ini juga menampilkan status banyaknya pengunjung dalam priode harian, bulanan bahkan tahunan.

    So... semua tergantung pilihan.
    akhir kata, Selamat berCounter ria.
    READ MORE - Counter mini yang praktis dengan fitur yang menarik