Top Komentator Widget

<span style="font-weight: bold;">Top Komentator widget</span> ini sebenarnya udah banyak dibahas oleh blog-blog lain yang membahas seputar tutorial blog.<br /><br /><br /><br />Tapi dikarenakan saya lihat pada <a href="http://optimasi-blog.blogspot.com">blog ini</a> belum ada panduannya jadi tidak ada salahnya juga membuat tutorial Top Komentator di blog ini juga.<br /><br /><br /><br />Seperti biasa, caranya :<br /><br /><br /><br />Login dulu ke account blogger kamu.<br /><br /><ul><li>Pilih tab Tata Letak --> Elemen Halaman.</li><br /></ul><ul><li>Tambah Gadget dalam elemen blog kamu (rekomendasi : Di bawah atau di samping gadget Posting Terbaru)</li><br /></ul><ul><li>Dalam "Tambahkan Gadget", pilih HTML/JavaScript</li><br /></ul><ul><li>Copy dan pastekan kode di bawah ini dan jangan lupa diberi judul (ex : <span style="color: rgb(0, 51, 0);">Top Komentator</span>)</li><br /></ul><br /><br /><blockquote><script type="text/javascript"><br /><br />function pipeCallback(obj) {<br /><br />document.write('<ol>');<br /><br />var i;<br /><br />for (i = 0; i < obj.count ; i++)<br /><br />{<br /><br />var href = "'" + obj.value.items[i].link + "'";<br /><br />if(obj.value.items[i].link == "")<br /><br />var item ="<li>" + obj.value.items[i].title + "</li>";<br /><br />else<br /><br />var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br /><br />document.write(item);<br /><br />}<br /><br />document.write('</ol>');<br /><br />}<br /><br /></script><br /><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2F<span style="color: rgb(0, 0, 153);">rudyazhar.blogspot.com</span>&num=<span style="color: rgb(153, 0, 0);">15</span>&filter=<span style="color: rgb(255, 102, 0);">rudy</span>" type="text/javascript"></script></blockquote><br /><br /><br /><br />Note :<br /><br /><br /><br /><ul><li>Ganti kode yang berwarna <span style="color: rgb(0, 0, 153);">biru</span> dengan alamat blog kamu.</li><br /></ul><ul><li>Ganti kode yang berwarna <span style="color: rgb(153, 0, 0);">merah</span> dengan jumlah komentar yang ingin ditampilkan.</li><br /></ul><ul><li>Kode yang berwarna <span style="color: rgb(255, 102, 0);">orange</span> adalah untuk tidak menampilkan nama dari pemilik blog tersebut.</li><br /></ul><br /><br />Contoh pemakaian Top Komentator ini bisa anda lihat pada <a href="http://rudyazhar.blogspot.com"><span style="font-weight: bold; color: rgb(102, 102, 0);">blog rudyazhar</span></a> disini.<br /><br /><br /><br /><p>Selamat mencoba...</p>

Posted by Hii Sekai

Recent Comments ala Wordpress versi II

Gimana khabar anda semua, Semangat Luar Biasa untuk mempercantik blog Anda?<br /><br />Kali ini saya ingin sharing ilmu untuk mempercantik blog di blogspot dengan <span style="font-weight: bold;">recent comments ala wordpress Versi II</span>, karena versi pertama udah di bahas OB pada postingan <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-memasang-komentar-terbaru.html"><span style="font-weight: bold;">Trik Blogger | Memasang Komentar Terbaru (Recent Comments)</span></a>.<br /><br /><a name='more'></a><br /><br />Beda dengan yang terdahulu apa? kalau yang dulu link antara nama komentar saya postingan menuju ke alamat yang sama, yaitu kehalaman postingan yang dikomentari.<br /><br />Nah versi yang sekarang kalau link yang berkomentar langsung menuju ke-alamat si komentar itu sendiri mirip seperti yang ada di wordpress.<br /><br /><br /><br />ini contohnya :<br /><br /><br /><br /><img alt="recent comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGdrNgbiDwJsVl-ork6zkrQaVhN8AJCKQoUjQTv3YJEwu-C8jOcsx474HLdhpgYa7uzu91Hf0x33zoi4XjD8_DxsdmDxdGcWMH29DvfDxoHGCP_tQjTSPPNPWJTs5rpNYNqL8u7U3qnA/s400/recentcomment.jpg" style="margin: 0px auto 10px; display: block; text-align: center; width: 180px; height: 343px;" /><br /><br /><br /><br />Widget ini hasil kreasi dari <a href="http://www.corpseofattic.com/2008/06/wordpress-style-recent-comments-widget.html" target="_blank"><span style="font-weight: bold;">www.corpseofattic.com</span></a>, disitu ada berbagai versi yang sudah dibuatnya.<br /><br />Anda juga bisa intip langsung <a href="http://corpseofattic.com/scripts/recentcommentsv2.js" target="_blank">source code dari wordpress recent comments disini</a>, bisa kamu modifikasi jika tidak membuat kepala kamu pusing.<br /><br />Tapi kalau kamu tidak mau pusing-pusing ini saya jelaskan triknya :<br /><br /><br /><br />Login dulu ke account blogger kamu.<br /><br /><ul><li>Pilih tab Tata Letak --> Elemen Halaman.</li><br /></ul><ul><li>Tambah Gadget dalam elemen blog kamu (rekomendasi : Di bawah atau di samping gadget Posting Terbaru)</li><br /></ul><ul><li>Dalam "Tambahkan Gadget", pilih HTML/JavaScript</li><br /></ul><ul><li>Copy dan pastekan kode di bawah ini dan jangan lupa diberi judul (ex : <span style="color: rgb(102, 51, 102);">Komentar terbaru</span>)</li><br /></ul><br /><br /><blockquote><span style="color: rgb(51, 51, 255);"><div style="overflow: auto; width: 180px;</span><br /><br /><span style="color: rgb(51, 51, 255);"> height: 330px; background-attachment: scroll;</span><br /><br /><span style="color: rgb(51, 51, 255);"> background-color:#dde5d1; line-height:1.5em;padding: 5px; border: 4px dotted #FFF; -moz-border-radius:10px;-webkit-border-radius:10px;"></span><br /><br /><script style="text/javascript" src="<span style="color: rgb(153, 0, 0);">http://corpseofattic.com/scripts/recentcommentsv2.js</span>"></script><script style="text/javascript"><span style="color: rgb(204, 102, 0);">var numposts = 7</span>;var showposttitle = true;var standardstyling = true;</script><script src="<span style="color: rgb(0, 102, 0);">http://rudyazhar.blogspot.com</span>/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><span style="color: rgb(51, 51, 255);"></div></span></blockquote><br /><br /><br /><br />Note :<br /><br /><ul><li>kode yang berwarna <span style="color: rgb(51, 51, 255);">biru</span> untuk mengaktifkan fungsi scroll, jika tidak menggunakannya kamu bisa hapus aja kode tersebut.</li><br /></ul><ul><li>Ganti kode yang berwarna <span style="color: rgb(153, 0, 0);">merah</span> dengan alamat penyimpanan file "recentcommentsv2.js" kamu sendiri. Kalau tidak biarkan apa adanya.</li><br /></ul><ul><li>Kode yang berwarna <span style="color: rgb(204, 102, 0);">orange</span> adalah jumlah recent comments yang ingin kamu tampilkan, contoh diatas 7 komentar yang tertampil kamu bisa rubah angka 7 ke angka 5 misalnya.</li><br /></ul><ul><li>Ganti kode yang berwarna <span style="color: rgb(0, 102, 0);">hijau</span> dengan alamat blog kamu.</li><br /></ul><br /><br />Contoh pemakaian recent comments ini bisa anda lihat pada <a href="http://rudyazhar.blogspot.com"><span style="font-weight: bold; color: rgb(0, 102, 0);">blog rudyazhar disini</span></a>.<br /><br /><br /><br /><p>Selamat mencoba...</p>

Posted by Hii Sekai

Random Post Dinamis

<img alt="random post dinamis" border="3px double #ccc" id="BLOGGER_PHOTO_ID_5411785222732226082" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqqcnAEf5bPc_erOfxYKubGSrhd-EcXgugWGRBKx9lEgA4x3XNqvaiVfPiLgKzAVcEs5SS4Zp2wbuiXE4aXAymZSWteQ4488v4c-ua0GKZR7IWK7kTq9d9-uE0bv8BnjUuMj-ilI3MK8/s400/randompost.jpg" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 152px;" />Dikatakan <a href="http://optimasi-blog.blogspot.com/2009/12/random-post-dinamis.html"><span style="font-weight: bold;">Random Post dinamis</span></a> dikarenakan widget random post ini akan menampilkan seluruh postingan blog kita secara acak dengan trik slide show.<br /><br />Ini akan lebih memaksimalkan semua isi postingan tertampil dengan jeda waktu yang dapat kita atur.<br /><br /><br /><br />Dan satu lagi kelebihan random post ini tidak memakan space yang besar dan sangat simpel.<br /><br /><a name='more'></a><br /><br />Jadi, tertarik untuk memasang? ini dia script code-nya:<br /><br /><br /><br />*Silahkan sobat pasang di sidebar : Layout >> Add Page Element >> HTML/Javascript >><br /><br /><br /><br /><br /><br /><blockquote><style type="text/css"><br /><br />.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}<br /><br /><br /><br />.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}<br /><br /><br /><br />.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}<br /><br /><br /><br />.gfg-subtitle a {color : #a43434;display:none !important;}<br /><br /><br /><br />.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}<br /><br /><br /><br />/* To allow correct behavior for overlay */<br /><br />.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}<br /><br /><br /><br />.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}<br /><br /><br /><br />.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}<br /><br /><br /><br />.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}<br /><br /><br /><br />.clearFloat {clear : both;}<br /><br /><br /><br />#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}<br /><br /></style><br /><br /><br /><br /><script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script><br /><br /><br /><br /><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><br /><br /><br /><br /><script type="text/javascript"><br /><br />function showGadget() {<br /><br />var feeds = [<br /><br />{title:'title',<br /><br />url:'http://<span style="color: rgb(204, 0, 0);">NAMABLOGKAMU</span>.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},<br /><br />];<br /><br />new GFdynamicFeedControl(feeds, 'feedGadget',<br /><br />{numResults : 1000, stacked : true,<br /><br />title: " "});<br /><br />}<br /><br />google.load("feeds", "1");<br /><br />google.setOnLoadCallback(showGadget);<br /><br /></script><br /><br /><br /><br /><div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div></blockquote><br /><br /><br /><br /><br /><br />Kemudian Save.<br /><br /><br /><br />*Silahkan ganti alamat yang berwarna <span style="color: rgb(204, 0, 0);">MERAH</span> dengan alamat blog sobat.<br /><br /><br /><br /><p>Untuk contoh hasilnya dapat sobat lihat <a href="http://rudyazhar.blogspot.com/" target="_blank">disini</a>.</p>

Posted by Hii Sekai

Variasi Font untuk blogger template

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2lueRN8VnU9F_8PcWvPCb5kpR7IgMLJ4lS8t01P6fwhVJpJMAVp8XD2vLhyphenhyphentIrIn2xZ43Ehb8OLIelZ-oscZ8uL7Rrfw4UBEh7aK9UfHpzuLOl1cquJbgdRghyphenhyphenxoJ6M5u95816xer6o/s1600/font-face.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="variasi font untuk blogger" border="0" id="BLOGGER_PHOTO_ID_5410250178045931282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2lueRN8VnU9F_8PcWvPCb5kpR7IgMLJ4lS8t01P6fwhVJpJMAVp8XD2vLhyphenhyphentIrIn2xZ43Ehb8OLIelZ-oscZ8uL7Rrfw4UBEh7aK9UfHpzuLOl1cquJbgdRghyphenhyphenxoJ6M5u95816xer6o/s400/font-face.gif" style="cursor: pointer; float: left; height: 100px; margin: 0pt 10px 10px 0pt; width: 320px;" /></a>Bagi pengguna <a href="http://www.blogger.com/">blogger.com</a> sekarang ada layanan untuk mengganti font pada blog kita biar terkesan lebih unik dan elegan lagi dengan menggunakan <span style="font-weight: bold;">@font-face CSS.</span><br /><br /><br /><br />Kita tidak perlu pusing-pusing menyimpan font yang akan kita gunakan, cukup menggunakan <span style="font-weight: bold;">'@font-face CSS'</span> ('Font Embedding') di 'blogger template' melalui jasa gratis yang disediakan oleh <a href="http://kernest.com/">kernest.com.</a><br /><br /><a name='more'></a><br /><br />Contoh blog yang sudah menggunakan <span style="font-weight: bold;">@font-face</span> dapat anda lihat pada <a href="http://bloggerdisplay.blogspot.com/">Blogger Display</a> dan blog <a href="http://rudyazhar.blogspot.com/">Rudy Azhar</a> yang digunakan pada judul blog (h1) dan judul posting (h2).<br /><br /><br /><br />Penerapannya sangat simple tinggal copy paste aja ke blog kita, Jika kamu berminat langsung aja menuju ke blog <a href="http://deconstructioncode.blogspot.com/2009/10/font-face-css-di-blogger-template.html"><span style="font-weight: bold;">code-code-an</span></a> untuk tutorial yang lebih lengkap.<br /><br /><br /><br /><p>Sebelumnya saya minta dukungan kalian semua dalam kontes <a href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html"><b style="color: #006600; font-weight: bold;">Ngobrol Seputar Bisnis Online</b></a>. Terima kasih....</p>

Posted by Hii Sekai