Tips membuat Tooltip dengan Jquery

<figure><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVumAP_LwvDobSUmKBnLdf0X1W5LD7XAwckzhyphenhyphen-7EWI0_aoKMt9-mp69a8HE68V3d5-_ZHjGbpsROivxLV_NsZlu-dXXBl4ZlPyx48PC_Kpj9hnrLSp3BkWbKNxlIcBO1vnjDaoNBq4E/s1600/tooltip.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVumAP_LwvDobSUmKBnLdf0X1W5LD7XAwckzhyphenhyphen-7EWI0_aoKMt9-mp69a8HE68V3d5-_ZHjGbpsROivxLV_NsZlu-dXXBl4ZlPyx48PC_Kpj9hnrLSp3BkWbKNxlIcBO1vnjDaoNBq4E/s400/tooltip.gif" width="400" /></a><figcaption>Tooltip dengan jquery</figcaption></figure><br />Maksud dari tooltip itu ialah sejenis title pada link yang kita sorot baik berupa banner atau link biasa. contoh di blog ini bisa anda sorot tombol <b>Home</b> yang ada diatas.<br /><br /><a name="more"></a><br /><br />Ide ini saya ambil dari blog bookmarknya <a href="http://deconstructioncode.blogspot.com/"><b>Choen</b></a>..<br /><br /><br /><br /><b>Begini caranya Trik Membuat ToolTip di Blogger:</b><br /><br /><br /><br />1. ToolTip ini menggunakan <b>Jquery</b>, untuk itu anda perlu memasang script berikut (jika memang belum anda miliki), diatas </head> :<br /><br /><br /><br /><blockquote><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></blockquote>2. Masukan <b>javascript</b> berikut, di dibawah script jquery diatas.<br /><br /><br /><br /><blockquote><!-- begin Tooltips --><br /><br /><script type='text/javascript'><br /><br />$(document).ready(function(){<br /><br />$("a.tooltip").easyTooltip();<br /><br />});<br /><br /><br /><br /></script><br /><br /><script type="text/javascript"><br /><br />//<![CDATA[<br /><br />(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'><br /><br /><br /><br />"+content+"</div><br /><br />");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);<br /><br />//]]><br /><br /><br /><br /></script></blockquote><br /><br />3. Selanjutnya masukkan <b>code css</b>, code css ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini).<br /><br /><br /><br /><br /><br /><blockquote>#easyTooltip{<br /><br />padding:5px 10px;<br /><br />border:1px solid #EF6D21;<br /><br />background: #181C18;<br /><br />color:#E0EFE0;<br /><br />}</blockquote><br /><br />4. Ini tahap terakhir untuk mengaktifkan fungsi <b>Tooltips</b>, yaitu masukan code berikut, disetiap link yang anda inginkan.<br /><br /><br /><br />class='tooltip' title='isi sesuai yang anda inginkan'<br /><br /><br /><br />contohnya penerapannya seperti berikut:<br /><br /><br /><br /><blockquote><a class="tooltip" href="http://draft.blogger.com/" title="Beranda"><br /><br />Beranda<br /><br /></a></blockquote>>> demikian keseluruhan tahapan tersebut, semoga berhasil.<br /><br /><br /><br /><p>UPDATE : Dikarenakan blognya <b>Choen</b> tidak lagi memasang tooltips, maka contoh penerapannya bisa kamu lihat pada blog <a href="http://www.oblo.web.id/"><b>Oblo.web.id</b></a> kemudian kamu bisa sorot link-link yang ada pada blog tersebut.</p>

Posted by Hii Sekai

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

Menambah Big Social Bookmark dibawah posting

Satu lagi keunggulan wordpress yang dapat kita aplikasikan pada blogspot, yaitu menambah widget <span style="font-weight: bold;">social bookmark</span> dibawah postingan blog.<br /><br /><br /><br />Penambahan <span style="font-weight: bold;">social bookmark</span> sangat baik sekali untuk mempromosikan blog kita di situs facebook, twitter, digg dan lain-lain.<br /><br /><br /><br />Kali ini yang ingin saya sharingkan bukan social bookmark pada umumnya akan tetapi yang big, selain mempercantik blog juga menarik minat pengunjung untuk mengkliknya..<br /><br /><a name="more"></a><br /><br />Contoh seperti gambar dibawah ini dapat anda lihat pada <a href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html" style="font-weight: bold;">blog Ngobrol Seputar Bisnis Online</a>.<br /><br /><br /><br /><img alt="social bookmark" border="0" id="BLOGGER_PHOTO_ID_5408825870912953410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3TdklQG11eBTygBssm5ZmmiDbztonfPBUtV15SST9SU3lSjhy2vpfrrEXVRGPt0Q3HpqrEtL-UfFe11LsjZQ5dqMItYhe0-TPiq0zEXnPpd43onkg80rfroxCmA7rpTurC4_hkHoUCk/s400/share.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 154px;" /><br /><br /><br /><br />Gimana, keren kan? Oke kita mulai aja..<br /><br /><br /><br />seperti biasa Tambahkan kode CSS berikut di atas kode ]]></b:skin><br /><br /><br /><br /><blockquote>div.sociable { margin: 16px 0;}<br /><br /><br /><br />span.sociable_tagline { position: relative; }<br /><br />span.sociable_tagline span { display: none; width: 14em; }<br /><br />span.sociable_tagline:hover span {<br /><br />position: absolute;<br /><br />display: block;<br /><br />top: -5em;<br /><br />background: #ffe;<br /><br />border: 1px solid #ccc;<br /><br />color: black;<br /><br />line-height: 1.25em;<br /><br />}<br /><br />.sociable span {<br /><br />display: block;<br /><br />}<br /><br />.sociable ul {<br /><br />display: inline;<br /><br />margin: 0 !important;<br /><br />padding: 0 !important;<br /><br />}<br /><br />.sociable ul li {<br /><br />background: #f5f5f5;<br /><br />display: inline !important;<br /><br />list-style-type: none;<br /><br />margin: 0;<br /><br />padding: 2px;<br /><br />}<br /><br />.sociable ul li:before { content: ""; }<br /><br />.sociable img {<br /><br />float: none;<br /><br /><br /><br />border: 0;<br /><br />margin: 0;<br /><br />padding: 0;<br /><br />}<br /><br /><br /><br />.sociable-hovers {<br /><br />opacity: 0.4;<br /><br />-moz-opacity: 0.4;<br /><br />filter: alpha(opacity=40);<br /><br />}<br /><br />.sociable-hovers:hover {<br /><br />opacity: 1;<br /><br />-moz-opacity: 1;<br /><br />filter: alpha(opacity=100);<br /><br />}<br /><br /></blockquote><br /><br /><br /><br />Setelah itu simpan dulu template kamu<br /><br />lalu kamu ceklist Expand Template Widget.<br /><br /><br /><br />Kamu cari kode <p><data:post.body/></p><br /><br />kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.<br /><br />maka pilih kode yang kedua biar tidak tampak pada halaman utama.<br /><br />setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.<br /><br /><br /><br /><blockquote><div class='sociable'><br /><br /><div class='sociable_tagline'><br /><br /><img alt='Ngobrol Seputar Bisnis Online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1bIO7ugiDGrrQHSHtwivRO1iQKDzmAeYzy0sWOmwWzozs7iKOksF3IU6yo1ndxZXwSQwdhoYFBLTo6wErmPyJJYtIaOJlwFPKpF_USG26uD1HjHZA3wEJmxLpEO1slpKGdS7tSmehQoH/s1600/share.jpg' title='Share This Artikel'/><br /><br /></div><br /><br /><ul><br /><br /><li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4Y7iLL88H_R_Q68FObvvnaGEQNvaKPj3CMk3qU94bIf67RgfRALdd2BbV_EF8rEO3UXGnsniYTD7-MhPLbh1cqVD6QJTewZ62Jc9e7DCBdKO9152UBHVWbBb4k7ZPEFWbvlk22ZtDqq9/s400/digg.png' title='Digg'/></a></li><br /><br /><li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjlZ6GaT56VFkr4cvSXvKyHr8auaD5lVl9JySi0TNeySIEo2jvsFao9KLNy2pdPKgmATT6bT4yK9HKq7UurKa7C2z-3WqKYrKiEnlMTbw9fuuK26-dSCofJNiAYEHUl4tEeohXkq9AqTV/s400/delicious.png' title='del.icio.us'/></a></li><br /><br /><li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnsAAySpg5p7mRoSxGfxvWWPCRpry-NFg5c3UNUorYkfbC6Xn6Mratlv4PGj_uIfT2RAAsxGhQaTm3DKpr68nhbKR1cCJIcGZvW96JOv4CYIzrzvlXQYy-uZKx0MEMdutDb10JiCPTreO/s400/facebook_002.png' title='Facebook'/></a></li><br /><br /><li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXc-WA7pR0aB9Eo8fV1Wkj7obG9J9nmJPeN25yvEtxMop-r9D6cEEDC8S51cugvYlgB3LSknCHFoZ51Y63U8lt2B6z0lx_3ontrLhp6mlHfvBxJnJsIEPlm5dX6bKEnX0Zv2_847abngC/s400/googlebookmark.png' title='Google'/></a></li><br /><br /><li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKf-9UO5oTsDxoD-UdVVVlAwtw6WWVa7E5wlLfwNJOvoAfSNSAtGWzt2jbWY04r9Z9DZi71hlub7t71Ip8snmS5YkoninY4FvppPbKHqfSUA0f4JDy0WADxtd9Fmg1kC_NKgMgF0H2G99y/s400/stumbleupon.png' title='StumbleUpon'/></a></li><br /><br /><li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl0upkP242C2_sTYXCpIEClrGahR8FCR6cx7MIjCX_nf_HU7hT5u41mwizeKAHvLdyFkdWeiwAJGTl-TtizDcE_R2J1qhmgrgNRw6_7HLoh-mBMQXDCBhpDpiICFjf0iKxy-Vota1NnlsQ/s400/technorati.png' title='Technorati'/></a></li><br /><br /><li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKjOeLrEr-fRHCF6pWriRweCTJuOWxlUBAqg3mZ9elb48CSl1X0gOJXnG6txY4OONO4Apz-n0O4qCrLyZQ9_JS7VkFxcdtCd69WbR5Pn_elp-MMZI9oTILqFC6m9o_d6LdITmI8EiVo-C/s400/twitter.gif' title='TwitThis'/></a></li><br /><br /></ul><br /><br /></div></blockquote><br /><br /><br /><br />Karena penempatan social bookmark ini pada halaman postingan jadi kamu tidak bisa pratinjau hasilnya, so.. simpan aja dulu dan lihat hasilnya...<br /><br /><br />

Posted by Hii Sekai

Pasang Kolom About The Author

<span style="font-weight: bold;">About The Author</span> ini banyak diaplikasi oleh pemakai wordpress dan sekarang saya coba sharing untuk dapat juga digunakan bagi pengguna blogspot dengan kode CSS yang simpel. penampakannya bakal seperti pada <a href="http://www.bloggodown.com/2009/08/33-super-engagers-to-follow.html">Blog Godown</a>.<br /><br /><br /><br />Banyak pengguna blogspot yang iri dengan pengguna wordpress karena banyak widget yang menarik disana, tapi itu bukan suatu yang susah untuk kita aplikasikan ke blog kita.<br /><br /><a name="more"></a><br /><br />Ini contoh screenshootnya seperti yang ada pada blog <a href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html" style="font-weight: bold;">Ngobrol Seputar Bisnis Online</a>:<br /><br /><br /><br /><br /><br /><img alt="About the author" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitGuevbQ2jE2r5a6f7fVG-LqYoExQZLt9zjLf-gujgHAoU9LqSOflvL20x3r8bnAOGMwE7oZ-PTD3BouYfPL0qXj9E7QFb8bFwImZDkwCEc2SbfX_ZBHOrZ-Bv3GwQ8iNS_B61GSFHog/s400/abouttheauthor1.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 107px;" /><br /><br /><br /><br />Kita mulai aja ya...<br /><br /><br /><br /><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML.</li><br /></ul><br /><br />Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.<br /><br /><br /><br />Tambahkan kode CSS berikut di atas kode ]]></b:skin><br /><br /><br /><br /><blockquote>.authbio{<br /><br />color: <span style="color: rgb(204, 0, 0);">#555</span>;<br /><br />font-weight: normal;<br /><br />font-size:0.9em;<br /><br />background: <span style="color: rgb(204, 0, 0);">#fff</span>;<br /><br />border: 3px groove #ccc;<br /><br />width: <span style="color: rgb(204, 0, 0);">475px</span>;<br /><br />padding: 10px;<br /><br />margin-bottom:20px;<br /><br />-moz-border-radius:15px;<br /><br />-webkit-border-radius:15px;<br /><br />}<br /><br /><br /><br />.authbio a{<br /><br /><br /><br />text-decoration:underline;<br /><br /><br /><br />}<br /><br />img.alignleft {<br /><br />float:left;<br /><br />background-color: #c4e3e0;<br /><br />border:5px solid #c4e3e0;<br /><br />padding: 5px;<br /><br /><br /><br />margin-left:5px;<br /><br />margin-top:0px;<br /><br />margin-bottom:25px;<br /><br />margin-right:12px;<br /><br /><br /><br />}</blockquote><br /><br /><br /><br />Setelah itu simpan dulu templatenya ntar bisa hilang..<br /><br />lalu kamu ceklist Expand Template Widget.<br /><br /><br /><br />Kamu cari kode <p><data:post.body/></p><br /><br />kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.<br /><br />maka pilih kode yang kedua biar tidak tampak pada halaman utama.<br /><br />setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.<br /><br /><br /><br /><blockquote><div class='authbio'><br /><br /><div style='float: left;'><br /><br /><img alt='<span style="font-weight: bold;">rudy azhar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwYslaApjNzFkZcZrCJWT1MivqXJymEQ95s4NHONL6lNm2Yc6KebJAXNOYtPdCoULFy9DfAccTdEwI-b36nybcdjduR8oHaapoJ_YvzUpu5_qDPmxqHfpvlDXYs0p7ReHXvTIADk2/s400/rudy6.jpg</span>'/></div><br /><br /><h2><strong>About The Author:</strong></h2><br /><br /><a href='http://rudyazhar.blogspot.com/2009/07/rudy-azhar-admin-rudyazhar-dot-com.html'><strong>Penulis</strong></a> ialah seorang yang lagi merambah dunia internet marketing dan belajar lebih dalam lagi. Jika anda senang dengan tulisan ini, pastikan anda <a href='http://feedburner.google.com/fb/a/mailverify?uri=<span style="font-weight: bold;">internetmarketingsharing</span>' target='_blank'><strong>Mendaftar Gratis</strong></a>! atau ambil <a href='http://feeds.feedburner.com/<span style="font-weight: bold;">internetmarketingsharing</span>' target='_blank'><strong>Feed Rss</strong></a>.</div></blockquote><br /><br /><br /><br />Simpan template kamu dan lihat hasilnya...<br /><br /><br /><br />Jangan lupa untuk merubah alamat foto dengan alamat foto kamu, serta kamu bisa mengganti kalimat diatas dengan kreasi kamu sendiri.<br /><br /><br />

Posted by Hii Sekai

Penawaran untuk Para Blogger

<p>Udah lama banget OB ngga sempat nyentuh ini blog. Mungkin belum punya waktu atau sarana untuk berlama-lama online, sebab pekerjaan di dunia nyata menuntut tenaga ekstra. Maka dari itu OB mohon maaf kepada teman-teman semua, sekaligus mumpung mau lebaran he..he..</p><a name="more"></a><p>Coba pandang dan teliti <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a> ini, seperti ngga terurus dan terawat ditambah lagi update posting yang jarang sekali. Kalau ditinggalin begitu aja, rasanya sayang banget. Betul tidak? Dan yang paling sadisnya lagi, <a href="http://www.alexa.com/siteinfo/http://optimasi-blog.blogspot.com">alexa rank</a>-nya melorot tajam. Dalam kesempatan posting kali ini OB akan mengajukan penawaran kepada sobat semua. Apa-an tuh? Blognya mau dihapus atau mau dijual??? Ngga dong!!! Cuma mau menawarkan untuk mengelola bareng blog ini. Syaratnya ngga macam-macam, orangnya bertanggungjawab dengan isi posting, setia melakukan update posting (minimal 2 post/minggu), kompeten dengan tema yang ada, yakni <span style="font-weight: bold;">tips seo</span> dan <span style="font-weight: bold;">trik blogger</span>.</p><p>Kalau berminat, silakan layangkan email pemberitahuan ke ariamsi.4215@gmail.com disertakan pula blog yang sobat kelola. Buruan yah, pengelola dibatasi hanya 2 (dua) orang. Dan yang paling penting gratis..tis..tis...</p><h2>Update</h2><p>Maaf, penawaran ini sudah tidak berlaku lagi. Terima kasih atas perhatiannya.</p>

Posted by Hii Sekai