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 style="font-weight: bold;" href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html">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 style="font-weight: bold;" href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html">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

Menambah Sub Tab View

Duaaarrrrr....???!!! Eh, ketemu lagi. Sebenarnya posting hari ini OB sempat-sempatkan, sekedar untuk menghilangkan rasa dahaga. Penyebabnya karena sudah lama OB ngga aktif lagi dalam dunia blogger, baik memposting tentang <span style="font-style: italic; font-weight: bold;">trik blogger</span> maupun <span style="font-style: italic; font-weight: bold;">tips seo</span>. Sekarang kesempatan datang, jadi OB sempatkan untuk bikin satu postingan. Nah, kamu mungkin sudah mencoba bagaimana <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-membuat-tab-view.html">cara membuat Tab View</a>? Kalau belum silakan klik link <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-membuat-tab-view.html">tab view ini</a>. Kadang kita ingin membuat tampilan tab view ada yang menjorok ke dalam dan OB istilahkan disini adalah sub tab view. Maksudnya adalah teks (link) yang menggunakan tanda panah biru dalam tab view blog <a href="http://optimasi-blog.blogspot.com/"><span style="font-weight: bold;">optimasi blog</span></a> (sebelah kanan bawah), versi demonya dapat dilihat dalam <a href="http://blog-uji-coba-ob.blogspot.com/" rel="nofollow" target="_blank">blog uji coba</a>. Posting ini OB dedikasikan untuk saudara <span style="font-weight: bold;">Wanz</span> yang beralamat blog di <a href="http://pondok-cerita.blogspot.com/" rel="nofollow">http://pondok-cerita.blogspot.com</a>, apabila kamu punya waktu senggang please kunjungi sobat yang satu ini.<a name='more'></a><br /><br /><br /><br />Sekarang kita mulai <span style="font-style: italic;">trik blogger</span> membuat sub tab view, namun sebelumnya blog kamu harus sudah terinstall tab view :<br /><br /><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML.</li><br /></ul>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 /><ul><li>Cari kode CSS <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-membuat-tab-view.html">Tab View</a>.</li><br /><li>Tambahkan kode berikut tepat di bawah kode CSS Tab View.</li><br /></ul><div class="code">div.TabView div.Pages div.Page div.Pad div.pad2 { padding: 3px 5px 0 20px; }</div><ul><li>Simpan template kamu.</li><br /><li>Kemudian pilih tab Elemen Halaman --> Klik widget/gadget "tab view" (atau nama apapun yang kamu berikan sebelumnya).</li><br /><li>Kodenya lebih kurang seperti ini.</li><br /></ul><div class="code"><form action="tabview.html" method="get"><br /><br /><div class="TabView" id="TabView"><br /><br /><br /><br /><div class="Tabs"><br /><br /><a>Tab 1</a><br /><br /><a>Tab 2</a><br /><br /><a>Tab 3</a><br /><br /></div><br /><br /><br /><br /><div class="Pages"><br /><br /><br /><br /><blink><div class="Page"><br /><br /><div class="Pad"></blink><br /><br /><br /><br /><ul><br /><br /><li>Tab1.1</li><br /><br /><div style="color: red;"><div class="pad2"></div><div style="color: red;">Sub Tab 1.1.2<br /></div><div style="color: red;"><ul></div><div style="color: red;"><li>Sub Tab 1.1.2</li></div><div style="color: red;"></ul></div><div style="color: red;">Sub Tab 1.1.3<br /></div><div style="color: red;"></div></div><li>Tab1.2</li><br /><br /><li>Tab1.3</li><br /><br /></ul><br /><br /><br /><br /><blink></div><br /><br /></div></blink><br /><br /><br /><br /><div class="Page"><br /><br /><div class="Pad"><br /><br /><br /><br />Tab2.1<br /><br /><br />Tab2.2<br /><br /><br /><div style="color: red;"><div class="pad2"></div><div style="color: red;">Sub Tab 2.2.1<br /></div><div style="color: red;">Sub Tab 2.2.2<br /></div><div style="color: red;">Sub Tab 2.2.3<br /></div><div style="color: red;"></div></div>Tab2.3<br /><br /><br /><br /><br /></div><br /><br /></div><br /><br /><br /><br /><div class="Page"><br /><br /><div class="Pad"><br /><br /><br /><br />Tab3.1<br /><br /><br />Tab3.2<br /><br /><br />Tab3.3<br /><br /><br /><br /><br /></div><br /><br /></div><br /><br /><br /><br /></div><br /><br /></div><br /><br /></form><br /><br /><br /><br /><script type="text/javascript"><br /><br />tabview_initialize('TabView');<br /><br /></script></div>Catatan :<br /><br />Kode di atas sudah ditambahkan kode sisipan sub tab view yang ditandai dengan warna merah.<br /><br /><ul><li>Sekarang lihat blog kamu.</li><br /></ul><p>Selamat membuat sub tab view ...</p>

Posted by Hii Sekai

Alternatif Penyimpanan Javascript

<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmbGCrxhsNpZZhhIWpeiiYntuUkyEtHA_qdQJLnxLIt8DNFHcP4LaOlKBAJVIIsOUMtKvZ-x1zGf7Y754WrgG0QGiHCtRqtC8jHn1fJK64qYtNifCUe5TRGObcTwETGLLIw_YsdLPIak/s1600-h/web+hosting.jpg"><img alt="web hosting" border="0" id="BLOGGER_PHOTO_ID_5360016808095923602" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmbGCrxhsNpZZhhIWpeiiYntuUkyEtHA_qdQJLnxLIt8DNFHcP4LaOlKBAJVIIsOUMtKvZ-x1zGf7Y754WrgG0QGiHCtRqtC8jHn1fJK64qYtNifCUe5TRGObcTwETGLLIw_YsdLPIak/s200/web+hosting.jpg" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 55px;" /></a>Memang susah teman, setelah mendengar geocities dari Yahoo akan ditiadakan dan diganti dengan web hosting Yahoo yang berbayar $4.99 (dibulatkan jadi $5). Padahal mungkin masih banyak para blogger yang ingin memanfaatkan fasilitas web hosting secara gratis, "termasuk OB" (ha.. ha..). Walaupun ditinjau dari sudut layanannya, web hosting yang berbayar memberikan keuntungan lebih dibandingkan yang gratis. <span style="font-style: italic;">Trik blogger</span> kali ini, OB akan berbagi pengalaman tentang alternatif penyimpanan file-file baik itu berupa javascript, image, icon, dan sebagainya sehingga dapat dipergunakan dalam blog kamu. Nah, layanan web yang mendukung aktivitas blog disini selanjutnya akan OB sebut <span style="font-style: italic;">Blogger Stuff</span> dan salah satu layanan yang sangat mendukung aktivitas tersebut adalah web hosting.</div><a name='more'></a><br /><br /><div style="text-align: justify;">Seperti yang telah kita ketahui bersama, bahwa banyak sekali web hosting yang menyediakan layanan gratis. Jadi kamu tinggal pilih hosting mana yang sesuai dengan kebutuhan kamu dan dalam kesempatan kali ini juga, OB akan berbagi mengenai salah satu web hosting yang cukup dikenal oleh khalayak yaitu 000webhost.com. Tanpa panjang lebar lagi berikut langkah-langkah untuk melakukan upload file di 000webhost.com :<br /><br /></div><ul style="text-align: justify;"><li>Silakan sign up dulu di <a href="http://www.000webhost.com/" target="_blank">http://www.000webhost.com</a>.</li><br /><li>Ketika sign up perlu diingat, jika kamu belum memiliki nama domain sendiri, lakukan penambahan domain gratis dari 000webhost, seperti yang diperlihatkan dalam gambar di bawah ini (perhatikan panah orange).</li><br /></ul><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZ3vSdgLlhzc3oZbFCIfqHQniXuryx9j1iKFLEEISRgy2N-Q7h0FkRlrWoBCOxnADfruC23Nbd2Q8R8s_u-6hccL7aIda8jycEjZE_5Dl2Zt-gxCfFEl131Xu1Gnbu9RFRhBB5TwwIGI/s1600-h/signup+000.jpg"><img alt="web hosting" border="0" id="BLOGGER_PHOTO_ID_5360017328024094114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZ3vSdgLlhzc3oZbFCIfqHQniXuryx9j1iKFLEEISRgy2N-Q7h0FkRlrWoBCOxnADfruC23Nbd2Q8R8s_u-6hccL7aIda8jycEjZE_5Dl2Zt-gxCfFEl131Xu1Gnbu9RFRhBB5TwwIGI/s320/signup+000.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 300px; height: 206px;" /></a><br /><br /><div style="text-align: justify;"><ul><li>Sebelum domain kamu dapat dideteksi oleh 000webhost, maka kamu perlu men-download ip_confirm.exe sesuai dengan petunjuk dari 000webhost. Dan perlu diperhatikan jika kamu mendowload ip_confirm.exe sebaiknya menggunakan download manager default bawaan browser kamu.</li><br /><li>Kemudian klik aplikasi tersebut dan kamu akan diberikan semacam pin konfirmasi. Masukkan pin (6 digit nomor) tersebut dalam halaman konfirmasi yang muncul saat kamu selesai melakukan sign up.</li><br /><li>Tunggu konfirmasi melalui email kamu, selanjutnya klik link yang dikirimkan oleh 000webhost untuk masuk ke dalam member area.</li><br /><li>Login dengan email dan password kamu.</li><br /><li>Pilih domain kamu dalam dropdown menu pada "Manage another domain" (panah orange) --> Klik Go.</li><br /></ul></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6inuRYNfwSHrDJve44xK3H7Hx9nTwHh6IzNrnbaWf9xAYTSVyF8i1PAoixRUi9ekJR9FT-0wYtf0fuMxuRIDszzL68R9krx8QOV2HWmZrwCgLkdA_YLv6Y0x7fO-vHU1e_WmO8OyWqg/s1600-h/domain+000.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5360018657948922994" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6inuRYNfwSHrDJve44xK3H7Hx9nTwHh6IzNrnbaWf9xAYTSVyF8i1PAoixRUi9ekJR9FT-0wYtf0fuMxuRIDszzL68R9krx8QOV2HWmZrwCgLkdA_YLv6Y0x7fO-vHU1e_WmO8OyWqg/s320/domain+000.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 300px; height: 250px;" /></a><br /><br /><ul style="text-align: justify;"><li>Dalam kumpulan icon menu klik "File Manager" dan masukkan kembali password (hanya password).</li><br /><li>Sekarang kamu sudah bisa melakukan upload file, baik berupa script atau image di web hosting 000webhost.</li><br /></ul>Catatan:<br /><br /><div style="text-align: justify;">Usahakan file yang di upload diletakkan dalam directory "public_html".<br /><br /></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ObQfTnro5FNetzgvcq9IyvZU6eK1RQsRbo9oRf9q8wz2p6GGJgOVNCjFKIutVOPdjbIXm4aOAt01_MS3Ps0PWQIGpmjU6Tqb-5pMgyzxT69XxAyOZpaZhlV1wOCGO7zvzo1byHRR8q8/s1600-h/File+000.jpg"><img alt="web hosting" border="0" id="BLOGGER_PHOTO_ID_5360019132024218370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ObQfTnro5FNetzgvcq9IyvZU6eK1RQsRbo9oRf9q8wz2p6GGJgOVNCjFKIutVOPdjbIXm4aOAt01_MS3Ps0PWQIGpmjU6Tqb-5pMgyzxT69XxAyOZpaZhlV1wOCGO7zvzo1byHRR8q8/s200/File+000.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 86px;" /></a><br /><br /><div style="text-align: justify;">Setelah selesai melakukan upload, tentunya kamu harus mengetahui link lokasi file tersebut. Caranya cukup sederhana, yaitu masih di halaman file manager, klik "Open" (dalam file yang akan kamu gunakan) pada kolom "Actions". Nah, link lokasinya dapat kamu lihat dalam web address browser kamu.<br /><br /></div><br /><br />Selamat menyimpan file di web hosting 000webhost.com...<br /><br /><br />

Posted by Hii Sekai

Trik Merubah Tampilan Google Translate

<div style="text-align: justify;">Beberapa saat yang lalu kita dikejutkan dengan meledaknya bom di dua hotel berbintang lima Jakarta, sehingga Ibukota Republik <span style="font-weight: bold;">Indonesia</span> tersebut dalam kondisi "Siaga I". Terlebih lagi urungnya pasukan Manchester United berlaga dengan tim sepakbola <span style="font-weight: bold;">Indonesia</span> menambah rentetan kelabu kalender bulan Juli 2009 Negara kita tercinta ini. Dan merupakan hal yang patut, jika kita pun turut berbelasungkawa atas musibah tersebut.<br /><br /></div><br /><br /><div style="text-align: justify;">Terlepas dari itu semua, OB tetap setia belajar bersama teman-teman untuk sekedar mereview satu atau dua buah <span style="font-style: italic;">trik blogger</span>. Nah, <span style="font-style: italic;">trik</span> kali ini kita akan membuat tampilan google translate agar tampil beda (kemungkinannya lagi, loading <span style="font-style: italic;">widget atau gadget</span> google translate ini agak ringan). Demonya dapat kamu lihat di sidebar kanan posting ini. Yuk, langsung kita kupas triknya.</div><a name='more'></a><br /><br />Berikut trik blogger merubah tampilan google translate :<br /><br /><ul><li>Login ke account blogger kamu.</li><br /><li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li><br /></ul><div style="text-align: justify;">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 /></div><ul><li>Cari Kode kode <span style=";font-family:courier new;font-size:85%;" >]]></b:skin></span> dan Copy-Paste (copas) kode berikut di atasnya.</li><br /></ul><span style=";font-family:courier new;font-size:85%;" ></span><blockquote><span style=";font-family:courier new;font-size:85%;" >.other-language {<br /><br />font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;<br /><br />color: #758D38;<br /><br />width : 110px;<br /><br />background: #FFFFCC;<br /><br />}</span></blockquote><br /><br /><div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /></div><ul><li>Simpan dulu template blog kamu.</li><br /><li>Pilih tab Tata Letak --> Elemen Halaman.</li><br /><li>Tambah Gadget dalam elemen blog kamu --> "Tambahkan Gadget", pilih HTML/JavaScript.</li><br /><li>Copy dan pastekan kode di bawah ini.</li><br /></ul><span style=";font-family:courier new;font-size:85%;" ></span><blockquote><span style=";font-family:courier new;font-size:85%;" ><small>Choose : </small><br /><br /><select onchange="if (this.value!='') window.open(this.value,'_blank')" class="other-language"><br /><br /><option selected value="0"/> Other Language<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2F<span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span>%2F"/> Albanian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ar&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Arabic<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=bg&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Bulgarian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ca&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Catalan<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-CN&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Chinese (Simplified)<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-TW&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Chinese (Traditional)<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=hr&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Croatian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=cs&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Czech<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=da&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Danish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=nl&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Dutch<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=en&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> English<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=et&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Estonian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=tl&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Filipino<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=fi&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Finnish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=fr&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> French<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=de&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> German<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=el&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Greek<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=gl&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Galician<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=iw&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Hebrew<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=hi&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Hindi<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=hu&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Hungarian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=it&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Italian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ja&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Japanese<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ko&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Korean<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=lv&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Latvia<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=lt&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Lithuanian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=mt&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Maltese<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=no&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Norwegian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=fa&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Persian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=pl&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Polish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=pt&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Portuguese<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ro&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Romanian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=ru&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Russian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sr&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Serbian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sk&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Slovak<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sl&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Slovenian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=es&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Spanish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sv&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Swedish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=th&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Thai<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=tr&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Turkish<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=uk&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Ukrainian<br /><br /><option value="http://translate.google.com/translate?hl=en&sl=id&tl=vi&u=http%3A%2F%2F</span><span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(0, 153, 0); font-weight: bold;">optimasi-blog.blogspot.com</span></span><span style=";font-family:courier new;font-size:85%;" >%2F"/> Vietnamese<br /><br /><!-- Please Don't Change or Remove This Code --><br /><br /><option value="http://optimasi-blog.blogspot.com"/>- Optimasi Blog -<br /><br /><!-- Thanks for Your Attention --><br /><br /></select><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><small><div style="text-align:right;">by <a href="http://translate.google.com" target="_blank">Google Translate</a></div></small></span></span></blockquote><br /><br />Catatan:<br /><br /><div style="text-align: justify;"><ol><li>Ganti kode yang berwarna hijau dengan alamat blog kamu.<br /><br /></li><br /><li>Pilihan translate bahasa dapat kamu kurangi dengan menghapus beberapa pilihan yang kamu kehendaki, ex: ingin menghapus bahasa albania, maka kode yang dihapus adalah <span style=";font-family:courier new;font-size:85%;" ><option value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2Foptimasi-blog.blogspot.com%2F"/> Albanian</span>.</li><br /><li>Mohon untuk kode yang diberi title "Please Don't Change or Remove This Code" sampai dengan "Thanks for Your Attention" jangan dihapus.</li><br /><li>Pastikan kamu tidak menghapus link "Google Translate" yang ditunjukkan dengan warna merah.</li><br /></ol></div><ul><li>Lihat Blog.</li><br /></ul><p>Selamat merubah tampilan google translate...</p>

Posted by Hii Sekai

Membuat Kotak Banner

<div style="text-align: justify;">Kotak banner berfungsi untuk menyisipkan image iklan yang akan ditampilkan dalam blog. Adapun bentuk banner bermacam-macam ukurannya, khusus dalam <span style="font-style: italic;">trik blogger</span> ini kita akan mencoba menyisipkan image iklan yang berukuran 125 x 125. Disamping itu area banner dapat pula menjadi ajang promosi, entah itu <span style="font-style: italic;">promosi blog</span> kamu yang lain atau blog orang lain yang diwakilkan dalam bentuk banner. Demo banner dapat kamu lihat di widget Pesan Sponsor <a style="font-weight: bold;" href="http://optimasi-blog.blogspot.com/">Optimasi Blog</a> (sidebar bottom sebelah kanan). Apabila kamu tertarik ingin mengaplikasikannya dalam blog kamu, mari kita mulai<span style="font-style: italic;"> trik blogger</span> membuat kotak banner.</div><a name='more'></a><br /><br /><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML.</li><br /></ul><div style="text-align: justify;">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 /></div><ul><li>Tambahkan kode CSS berikut di atas kode ]]></b:skin></li><br /></ul><br /><br /><span style=";font-family:courier new;font-size:85%;" ></span><blockquote><span style=";font-family:courier new;font-size:85%;" >/* Kotak Banner<br /><br />===================== */<br /><br />#Box-Banner-ads {<br /><br />margin: 0px;<br /><br />padding: 5px;<br /><br />text-align: center; }<br /><br /><br /><br />#Box-Banner-ads img {<br /><br />margin: 0px 8px 4px 0px;<br /><br />padding: 3px;<br /><br />text-align: center;<br /><br />border: 3px outset #c0c0c0; }<br /><br /><br /><br />#Box-Banner-ads img:hover {<br /><br />margin: 0px 8px 4px 0px;<br /><br />padding: 3px;<br /><br />text-align: center;<br /><br />border: 3px inset #333; }</span> </blockquote><br /><br /><div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /></div><ul><li>Simpan dulu template blog kamu.</li><br /><li>Pilih tab Tata Letak --> Elemen Halaman.</li><br /><li>Tambah Gadget dalam elemen blog kamu --> "Tambahkan Gadget", pilih HTML/JavaScript.</li><br /><li>Copy dan pastekan kode di bawah ini.</li><br /></ul><span style=";font-family:courier new;font-size:85%;" ></span><blockquote><span style=";font-family:courier new;font-size:85%;" ><div id="Box-Banner-ads"><br /><br /><br /><br /><a target="_blank" href="http://<span style="color: rgb(255, 0, 0); font-weight: bold;">#</span>"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a><br /><br /><br /><br /><a target="_blank" href="http://<span style="color: rgb(255, 0, 0); font-weight: bold;">#</span>"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a><br /><br /><br /><br /></div></span></blockquote><br /><br />Catatan :<br /><br />Ganti kode yang berwarna merah dengan alamat blog kamu.<br /><br /><ul><li>Lihat Blog.</li><br /></ul>Contoh cara memasang banner dalam kotak banner :<br /><br /><blockquote style="font-family:courier new;"><span style="font-size:85%;"><div id="Box-Banner-ads"><br /><br /><br /><br /><span style="color: rgb(0, 153, 0); font-weight: bold;"><a href="http://dmoz.org/" target="_blank"><img border="0" alt="Open Directory Project at dmoz.org" width="125" src="http://dmoz.org/user-banners/125x125birt.gif" height="125"/></a> <</span><br /><br /><br /><br /><a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a><br /><br /><br /><br /></div></span></blockquote><br /><br />Catatan :<br /><br /><div style="text-align: justify;">Perhatikan kode yang berwarna hijau yang merupakan contoh memasukkan banner dalam salah satu kotak banner.<br /><br /></div><br /><br /><p>Selamat membuat kotak banner...</p>

Posted by Hii Sekai

Dasar Pembuatan Menu Horizontal

<p>Diposting ini OB akan sedikit berbagi dengan teman-teman tentang bagaimana <a href="http://optimasi-blog.blogspot.com/2009/05/membuat-menu-horizontal.html">membuat menu horizontal menggunakan CSS</a>. Mengapa <span style="font-style: italic;">trik blogger</span> ini OB angkat kembali? Karena banyak minat para blogger mania untuk menghiasi blognya dengan menu-horizontal sesuai dengan keinginan dan karakter blognya masing-masing. Ketika kamu blog walking tentu banyak sekali bertemu <span style="font-style: italic;">trik</span> membuat menu horizontal dengan sistem <span style="font-style: italic;">kode</span> yang berbeda pula, dan sangat dimungkinkan pula kode yang akan OB tampilkan berbeda dengan lainnya (atau bisa pula sama). Nah, agar tak titik air ludah karena membaca paragraf pembuka. Yuk, kita bedah triknya.</p><p>Kode CSS (<em>Cascading Style Sheets</em> adalah sebagai berikut :</p><br /><pre><code>#menu-navigation {<br />border-bottom: 1px solid #e3e3e3;<br />border-top: 1px solid #e3e3e3;<br />clear: both;<br />display: block;<br />float: left;<br />margin: 0 auto;<br />width: 100%;<br />}<br />#menu-navigation ul {<br />list-style: none;<br />margin-bottom: 0;<br />padding: 0 15px;<br />}<br />#menu-navigation li {<br />float: left;<br />position: relative;<br />}<br />#menu-navigation li.alignright {<br />float: right;<br />margin: 0;<br />}<br />#menu-navigation a {<br />color: #666;<br />display: block;<br />line-height: 3.1428em;<br />padding: 0 1.5714em;<br />text-decoration: none;<br />}<br />#menu-navigation ul ul {<br />-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2);<br />-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);<br />box-shadow: 0 3px 3px rgba(0,0,0,.2);<br />display: none;<br />float: left;<br />margin: 0;<br />padding: 0;<br />position: absolute;<br />top: 3.1428em;<br />left: 0;<br />z-index: 99999;<br />}<br />#menu-navigation ul ul ul {<br />left: 100%;<br />top: 0;<br />}<br />#menu-navigation ul ul a {<br />background: #f9f9f9;<br />border-bottom: 1px dotted #ddd;<br />font-weight: normal;<br />height: auto;<br />line-height: 1.5714em;<br />padding: .39285em .39285em .39285em 1.5714em;<br />width: 152px;<br />}<br />#menu-navigation ul li:hover > ul {<br />display: block;<br />}<br />#menu-navigation li:hover > a,<br />#menu-navigation ul ul :hover > a,<br />#menu-navigation a:focus,<br />#menu-navigation <span style="color:purple;">.selected</span> > a {<br />background-color: #f5f5f5;<br />color: #111;<br />}</code></pre><p><code>.selected</code> digunakan untuk mengindikasikan jika URL halaman blog sama dengan URL pada menu navigasi, maka berlaku pengkodean <code>.selected</code>. Sedangkan untuk HTML (<em>HyperText Markup Language</em>) adalah sebagai berikut:</p><pre><code><nav id="menu-navigation"><br /> <ul><br /> <li><a href="<span style="color:red;">#</span>"><span style="color:green;">Beranda</span></a></li><br /> <li><a href="<span style="color:red;">#</span>"></a><span style="color:green;">Tentang</span></li><br /> <li><a href="<span style="color:red;">#</span>"></a><span style="color:green;">Sitemap</span></li><br /> <li><a href="<span style="color:red;">#</span>"></a><span style="color:green;">Kontak</span></li><br /> </ul><br /></nav></code></pre><p>Dengan menggunakan HTML di atas, berarti kita meniadakan fungsi <code>.selected</code>. Pada kasus Blogger.com fungsi <code>.selected</code> dapat diakomodasi dengan menambahkan tag kondisional tiap menu, contoh untuk beranda (<em>home</em>):</p><pre><code> <b:if cond='data:blog.url != data:blog.homepageUrl'><br /> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li><br /> <b:else/><br /> <li class='<span style="color:purple;">selected</span>'><a expr:href='data:blog.homepageUrl'>Beranda</a></li><br /> </b:if></code></pre><p>Sedangkan pada menu lain dapat disimak pada kode di bawah ini.</p><pre><code> <b:if cond='data:blog.url != "<span style="color:red;">#</span>"'><br /> <li><a href='<span style="color:red;">#</span>'>Tentang</a></li><br /> <b:else/><br /> <li class='<span style="color:purple;">selected</span>'><a href='<span style="color:red;">#</span>'>Tentang</a></li><br /> </b:if></code></pre><p>Dimana URL (<em>Uniform Resource Locator</em>) pada kode yang berwarna merah adalah sama, contoh: h**p://namablog.blogspot.com/p/tentang.html. Selanjutnya dengan pengkodean CSS di atas, kita dapat pula membuat menu navigasinya menjadi lebih kompleks (<em>drop down</em>)</p><pre><code> <li><a href='<span style="color:red;">#</span>'>Drop Down</a><br /> <ul class='submenu'><br /> <li><a href='<span style="color:blue;">#</span>'>Item1.1</a></li><br /> <li><a href='<span style="color:blue;">#</span>'>Item1.2</a></li><br /> <li><a href='<span style="color:red;">#</span>'>Item1.3</a><br /> <ul><br /> <li><a href='<span style="color:blue;">#</span>'>Item3.1</a></li><br /> <li><a href='<span style="color:blue;">#</span>'>Item3.2</a></li><br /> <li><a href='<span style="color:blue;">#</span>'>Item3.3</a></li><br /> </ul><br /> </li><br /> </ul><br /> </li></code></pre><p>Lho…, dimana tag kondisionalnya. Jika dalam menu berlaku <em>drop down</em>, maka tag kondisional tidak berlaku. Oleh karena masing-masing URL (warna biru) akan diisi dengan berbeda, sedangkan URL yang diberi warna merah tidak perlu dimasukkan — biarkan seperti itu — karena berfungsi sebagai alat bantu. Sekarang kamu pasti sudah bisa membuat menu horizontal sesuai keinginan dan kebutuhan di dalam blog kamu...</p>

Posted by Hii Sekai

Hadiahkan Alexa Ranking untuk Blog Kamu

<p><img alt="Alexa rank" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcrUzTxDCju_IMuM9LKscSROO0FjDKr3iElwCX88bFbfUxqQDaCXGeX5vdKuNUwwps4TMxHejcVz8WhCvVfHHvhUTcY5U0KcxkNFWoUvZLOWw60uxdN_JU4BE0Cy6g5y__fX1ZrIsxaqY/s320/logotrafficRankings.gif" style="margin: 0pt 0pt 10px 10px; float: right; width: 200px; height: 52px;" title="Alexa rank"/> <a href="http://alexa.com/">AlexaRank</a> adalah ukuran kepopuleran suatu Website dengan membandingkan suatu situs dengan semua situs yang berada di jaringan Internet. Perhitungan <span style="font-weight: bold;">Alexa rank</span> ini dengan cara<a name='more'></a> mengkombinasikan rata-rata <em>visitor</em> suatu situs perhari dan jumlah jumlah halaman suatu website yang dibuka oleh visitor. Suatu website yang berada di tingkat alexa tertinggi mempunyai <span style="font-weight: bold;">Alexa Rank</span> 1 jadi dalam artian semakin kecil berarti semakin bagus Alexa <span style="font-style: italic;">ranking</span> nya. Dengan kata lain urutan <span style="font-style: italic;">alexa ranking</span> kebalikan dari <a href="http://optimasi-blog.blogspot.com/2009/07/sekelumit-tentang-pagerank-blog.html"><span style="font-weight: bold;">pagerank</span></a>.</p><p>Kegunaan <span style="font-weight: bold;">Alexa rank</span> tidak terlalu jauh berbeda dengan <a href="http://optimasi-blog.blogspot.com/2009/07/sekelumit-tentang-pagerank-blog.html"><span style="font-style: italic;">pagerank</span></a>, yakni lebih ditujukan kepada para pebisnis online yang ingin mengumpulkan rezeki via internet. Karena tempat-tempat mencari uang di internet seperti Teks Link ads, Sponsored Review, ReviewMe, ask2link serta web-web penghasil uang lainnya menjadikan alexa rank sebagai salah satu tolok ukur. Semakin bagus <span style="font-style: italic;">alexa rank</span> yang kamu dapatkan, maka akan semakin baik pula blog kamu di mata para pemasang iklan atau adverstiser yang mau memasang iklannya, artinya rupiah akan semakin mudah untuk masuk ke kantong kamu.</p><p>Adapun cara menyematkan Alexa rank <span style="font-style: italic;">blog</span> kamu hampir serupa dengan cara mendapatkan pagerank dengan tambahannya adalah sebagai berikut :</p><ol><li>Buatlah postingan tentang <span style="font-style: italic;">Alexa Ranking</span>.</li><br /><li>Download plugin (add-on) Alexa untuk web browser kamu atau dikenal dengan sebutan "<a href="http://www.alexa.com/toolbar"><span style="font-weight: bold;">Sparky</span></a>" di <a href="http://www.alexa.com/toolbar">http://www.alexa.com/toolbar</a>. Hal ini untuk memudahkan <span style="font-weight: bold;">Alexa.com</span> untuk mendeteksi keberadaan blog kamu serta trafik yang terjadi.</li><br /><li>Masukkan pula widget Alexa Rank dalam blog kamu, dengan cara seperti di bawah ini. <ul style="margin-top:1.5em;"><li>Silakan kunjungi site <a href="http://alexa.com/">Alexa.com</a>.</li><br /><li>Di sebelah kanan, klik banner "Update Your Website Info".</li><br /><li>Klik menu "Site Widgets", kemudian pilih bentuk widget yang akan ditampilkan (umumnya widget yang kedua).</li><br /><li>Masukkan alamat lengkap blog kamu dan klik "Build Widget".</li><br /><li>Nah, sekarang akan muncul 3 script kembali. Silakan pilih script mana yang akan kamu pasang dalam blog kamu.</li><br /></ul></li><br /></ol><p>Update:</p><p>Cara di atas bukan untuk meningkatkan Alexa <em>rank</em>, namun setidak-tidaknya sebagai upaya kita agar blog lebih mendapat perhatian dari Alexa <em>rank</em>. Sedangkan untuk mendapatkan script widget Alexa, Anda harus terlebih dulu terdaftar sebagai member. Kemudian cari/klik menu “Site Tools” pada menu <a href="http://optimasi-blog.blogspot.com/2005/07/dasar-pembuatan-menu-horizontal.html">navigasi horizontal</a> atau di bagian bawah (<code>footer</code>) atau bagian lain, yang bertuliskan “Alexa Tool for Site Owners” (<em>Edit your site listing</em>). Kemudian masukkan alamat blog Anda <span class="amp">&</span> ikuti langkah-langkah selanjutnya, sampai Anda mendapatkan kode script.</p><p style="text-align:center; margin-bottom:0.75em;"><a href="http://www.alexa.com/siteinfo/optimasi-blog.blogspot.com"><script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/s/c?url=optimasi-blog.blogspot.com'></SCRIPT></A></p><p style="font-size:0.875em; font-style:italic; text-align:center;">These rankings are valued for an <a href="http://optimasi-blog.blogspot.com">Optimasi-Blog</a> by <strong>Alexa</strong>.</p>

Posted by Hii Sekai

Sekelumit Tentang Pagerank Blog

<h3>Apa itu pagerank?</h3><p>Pagerank Blog merupakan standar algoritma yang berguna untuk menilai kepopuleran suatu blog. <strong>PageRank</strong> merupakan<a name="more"></a> salah satu fitur utama mesin pencari Google yang dihitung dengan skala 1-10 (<a href="http://id.wikipedia.org/wiki/PageRank">wikipedia.org</a>). Blog kamu akan semakin populer jika semakin banyak web/blog lain yang meletakan link dan mengarah ke blog kamu tersebut, dengan kata lain postingan di blog kamu lebih populer dibandingkan dengan blog lain.</p>

Posted by Hii Sekai

Membagi Dua Kolom Komentar

<div style="text-align: justify;">Kenapa harus dibagi dua? Wah, ini pertanyaan yang sulit untuk dijawab, karena berpulang kepada diri pribadi masing-masing. Intinya seperti ini, kalau kamu berkeinginan untuk menambah daya tarik blog, tentu perlu juga meracik beberapa elemen agar tampil beda. Tampil beda bukan berarti tidak ada tujuan ke depan. Betul ngga? Agar kamu tidak bingung yang seperti apa bentuknya komentar dua kolom tersebut dapat dilihat kolom komentar blog OB (sok lue...). Kolom pertama berisikan avatar MyBlogLog yang seterusnya kita sebut "comment_avatar" dan kolom kedua disebut "comment_entry" yang terdiri dari author komentator (comment-author), teks komentar (comment-body), dan tanggal komentar (comment-footer). <span style="font-style: italic;">Trik blogger</span> ini tidak merubah struktur dasar kode yang ada, melainkan perlu menambah kode tertentu yang berfungsi untuk memisahkan antara avatar dengan entri komentar.</div><a name='more'></a><br /><br /><div style="text-align: justify;">Nah, sekarang mari bersama-sama kita permak kode template (OB ambil kode template minima) komentar agar terbagi menjadi dua kolom. Yang penting untuk ditelaah adalah untuk kode template komentar (khusus <span style="font-style: italic;">HTML</span>) telah ditambahkan <a href="http://optimasi-blog.blogspot.com/2009/06/pasang-avatar-mybloglog-dalam-komentar.html">avatar MyBlogLog</a> dan <a href="http://optimasi-blog.blogspot.com/2009/06/menghilangkan-icon-komentator-default.html">icon komentator default blogger telah dihilangkan</a>.<br /><br /></div><br /><br />Kode CSS komentar :<br /><br /><br /><pre>/* Comments<br />===================== */<br />#comments h4 {<br />background:#EAE9E9;<br />margin:1em 0;<br />font-weight: bold;<br />line-height: 1.4em;<br />text-transform:uppercase;<br />letter-spacing:.2em;<br />color: $sidebarcolor; }<br /><br />#comments-block {<br />margin:1em 0 1.5em;<br />line-height:1.6em;<br />border:0px dotted #ccc; }<br /><br />#comments-block .comment-author {<br />color:#808080;<br />margin:.5em 0;<br />border-top:1px dotted #ccc; }<br /><br />#comments-block .comment-body {<br />text-align:justify;<br />margin:.25em 0 0; }<br /><br />#comments-block .comment-footer {<br />margin:-.25em 0 2em;<br />line-height: 1.4em;<br />border-top:1px dotted #ccc;<br />font-size:9px;<br />letter-spacing:.1em; }<br /><br />#comments-block .comment-body p { margin:0 0 .75em; }<br /><br />.deleted-comment {<br />font-style:italic;<br />color:gray; }</pre><br />Kode HTML komentar :<br /><br /><br /><pre><dl id='comments-block'><br /><b:loop values='data:post.comments' var='comment'><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><div style='border:0;float:left;margin: 0 5px 0 0;'></span><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><script></span><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;">myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');</span><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></script></span><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></div></span><br /><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.<span style="color: rgb(0, 153, 0); font-weight: bold;">id</span>'><br /><a expr:name='data:comment.<span style="color: rgb(0, 153, 0); font-weight: bold;">id</span>'/><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if><br /><data:commentPostedByMsg/><br /></dt><br /><br /><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /><br /><dd class='comment-footer'><br /><span class='comment-timestamp'><br /><a expr:href='data:comment.url' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span><br /></dd><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><div style='clear:both;'/></span><br /></b:loop><br /></dl&gt</pre>Catatan :<br/><br /><div style="text-align: justify;"><ol><li>Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.</li><br /><li>Kode yang berwarna hijau merupakan modifikasi untuk menghilangkan icon komentator default blogger.</li><br /></ol></div><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li><br /></ul><div style="text-align: justify;">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 /></div><ul><li>Tambahkan kode CSS dalam komentar (Comments).</li><br /></ul><pre>.comment_avatar {<br />float: left;<br />height: 50px;<br />width: 50px;<br />position: relative;<br />padding-top: 5px;<br />text-align: left;<br />}<br /><br />.comment_entry {<br />float: right;<br />width: <span style="color: rgb(255, 0, 0); font-weight: bold;">400px</span>;<br />}</pre><br />Catatan :<br /><br /><div style="text-align: justify;">Silakan rubah kode yang berwarna merah sesuai dengan template blog kamu.<br /><br /></div><ul><li>Cari kode avatar, seperti di bawah ini.</li><br /></ul><pre><div style='border:0;float:left;margin: 0 5px 0 0;'><br /><br /><script><br />myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');<br /></script><br /></div></pre><br /><div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /></div><ul><li>Tambahkan kode (warna merah) berikut di antara kode di atas.</li><br /></ul><pre><span style="color: rgb(255, 0, 0); font-weight: bold;"><div class='comment_avatar'></span><br /><div style='border:0;float:left;margin: 0 5px 0 0;'><br /><script><br />myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');<br /></script><br /></div><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></div></span></pre><br /><ul><li>Di bawah kode di atas terdapat kode</li><br /></ul><span style="font-size:85%;"></span><pre><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'><br /><a expr:name='data:comment.id'/><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if><br /><data:commentPostedByMsg/><br /></dt><br /><br /><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /><br /><dd class='comment-footer'><br /><span class='comment-timestamp'><br /><a expr:href='data:comment.url' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span><br /></dd></pre><br /><ul style="text-align: justify;"><li>Tambahkan kembali kode (warna merah) diantaranya, sehingga akan terlihat seperti di bawah ini.</li><br /></ul><pre><span style="color: rgb(255, 0, 0); font-weight: bold;"><div class='comment_entry'></span><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'><br /><a expr:name='data:comment.id'/><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if><br /><data:commentPostedByMsg/><br /></dt><br /><br /><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /><br /><dd class='comment-footer'><br /><span class='comment-timestamp'><br /><a expr:href='data:comment.url' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span><br /></dd><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></div></span></pre><ul><li>Jangan lupa disimpan.</li><br /></ul><br /><br /><div style="text-align: justify;">Sekarang lihat komentar blog kamu sudah jadi dua kolom atau belum...!!!??? Selain itu, kamu juga bisa memodifikasi atau menambahkan kode lain (ex: <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-beda-tampilan-komentar.html">beda tampilan komentar pemilik blog</a>) dalam <span style="font-style: italic;">trik blogger</span> ini.<br /><br /></div>Selamat membagi komentar blog menjadi dua kolom...<br />

Posted by Hii Sekai

Optimasi Widget yang ditampilkan dalam Blog

<div style="text-align: justify;">Blog aku berat loadingnya, kenapa ya? Banyak faktor yang mempengaruhinya, antara lain; kebanyakan script, kebanyakan image, koneksi lagi lelet, dan sebagainya. Umumnya script dan image tersebut akan dimuat dalam suatu widget, iya khan? Berkaitan dengan widget tersebut, ada <span style="font-style: italic;">trik</span> agar sedikit-banyaknya dapat mengurangi berat loading suatu <span style="font-style: italic;">blog</span>. Anarkisnya adalah dengan membumi-hanguskan sebagian widget tersebut. Tapi OB script dan image (widget) yang ada masih sangat diperlukan, bagaimana dong? Mau ngga mau dan suka tidak suka harus dibinasakan...!!! Itu jawaban kalau OB lagi meriang oleh amarah. Padahal isu-isunya masih ada cara yang lebih diplomatis agar blog tampil lebih dinamis, harmonis, optimis, "manggis", "kamis", "kayumanis",... (lho...4x, kok jadi keterusan). Singkatnya seperti ini, bagaimana jika widget yang ada, ditampilkan berselang-seling. Pada halaman depan (muka/home) ditampilkan sebagian saja, kemudian jika kamu membuka (klik) halaman lain, maka widget yang sebagian tadi akan tampil tapi widget yang sebagian lainnya (tampil pada halaman depan) ditutup. Maniskan...!!!??? Tujuannya tidak lain dan tidak bukan adalah untuk mengurangi berat loading blog. Supaya rasa penasaran kamu hilang seketika, mari kita ulas <span style="font-style: italic;">trik blogger</span> optimalisasi tampilan widget dalam blog.</div><a name='more'></a><br /><br />Caranya cukup sederhana yaitu :<br /><br /><ul><li>Widget tampil di halaman depan saja.</li><br /></ul><div style="text-align: justify;">Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman depan.<br /><br /></div><blockquote style="font-family: courier new; color: rgb(255, 0, 0); font-weight: bold;"><span style="font-size:85%;"><b:if cond="data:blog.url == data:blog.homepageUrl"><br /><br /></b:if></span></blockquote><br /><br />Contoh penggunaannya :<br /><br /><blockquote style="font-family: courier new;"><span style="font-size:85%;"><b:widget id="HTML44" locked="false" title="<span style="font-weight: bold;">Tips SEO</span>" type="HTML"><br /><br /><b:includable id="main"><br /><br /><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><b:if cond="data:blog.url == data:blog.homepageUrl"></span><br /><br /><br /><br /><!-- only display title if it's non-empty --><br /><br /><b:if cond="data:title != """><br /><br /></b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2><br /><br /><div class="widget-content"><br /><br /><data:content/><br /><br /></div><br /><br /><b:include name="quickedit"><br /><br /><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></b:if></span><br /><br /><br /><br /></b:includable><br /><br /></b:widget></span></blockquote><br /><br /><ul><li>Widget tampil di halaman selanjutnya.</li><br /></ul><div style="text-align: justify;">Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman selanjutnya.<br /><br /></div><blockquote style="font-family: courier new; color: rgb(255, 0, 0); font-weight: bold;"><span style="font-size:85%;"><b:if cond='data:blog.pageType == "item"'><br /><br /></b:if></span></blockquote><br /><br />Contoh penggunaannya :<br /><br /><span style="font-family: courier new;font-size:85%;" ></span><blockquote><span style="font-family: courier new;font-size:85%;" ><b:widget id="HTML45" locked="false" title="<span style="font-weight: bold;">Trik Blogger</span>" type="HTML"><br /><br /><b:includable id="main"><br /><br /><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"><b:if cond='data:blog.pageType == "item"'></span><br /><br /><br /><br /><!-- only display title if it's non-empty --><br /><br /><b:if cond="data:title != """><br /><br /></b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2><br /><br /><div class="widget-content"><br /><br /><data:content/><br /><br /></div><br /><br /><b:include name="quickedit"><br /><br /><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;"></b:if></span><br /><br /><br /><br /></b:includable><br /><br /></b:widget></span></blockquote><br /><br />Catatan :<br /><br /><ol style="text-align: justify;"><li>Kode di atas dapat dilihat saat kamu melakukan edit template (Tata Letak --> Edit HTML -- > centang "Expand Template Widget").</li><br /><li>Pilihlah widget yang menurut kamu sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.</li><br /><li>Pemilihan widget diutamakan yang memuat script dan image.</li><br /></ol><p><br />Selamat mengoptimalkan tampilan widget dalam blog...</p>

Posted by Hii Sekai

Membuat Search dalam Blog

<p>Fitur "search" sangat berguna untuk menemukan kata-kata kunci yang ingin dicari. Dalam blog sudah barang tentu memiliki kata kunci tertentu yang terletak dalam postingan. Coba bayangkan ketika kamu berkunjung ke suatu blog, kemudian ingin mencari kata atau frase kata tertentu untuk dibaca. Namun dalam blog tersebut tidak memiliki fasilitas search, terpaksa deh kamu mencari manual dengan membuka postingan satu per-satu. Beruntunglah yang punya blog, apabila kamu termasuk orang yang sabar. Maka dari itu fasilitas "search" sangat bermanfaat bagi kelestarian suatu blog.</p><a name='more'></a><p>Nah, dalam <span style="font-style: italic;">trik blogger</span> kali ini, kita akan belajar bersama-sama tentang bagaimana menambahkan fasilitas "search" dalam blog. Kalau kamu jeli, sebenarnya "search" sudah termuat dalam trik <a href="http://optimasi-blog.blogspot.com/2009/05/membuat-menu-horizontal.html">membuat menu horizontal</a> sub divisi #nav-right. Yuk, kita review triknya!</p><p>Bentuk dasar HTML untuk memunculkan fasilitas "search" adalah sebagai berikut :</p><pre><code><div id='search'><br /> <form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'><br /> <label class='assistive-text' for='q'><span style="color:red;">Search:</span></label><br /> <input class='field' id='q' name='q' placeholder='<span style="color:red;">Search&hellip;</span>' type='text'/><br /> <input class='submit' id='searchsubmit' name='submit' type='submit' value='<span style="color:red;">Search</span>'/><br /> </form><br /></div><!-- #search --></code></pre><div id='search1' style="margin-bottom:1.6em;"><form expr:action='data:blog.homepageUrl + "search/"' id='searchform1' method='get'><label for='q'>Search:</label><input class='field' id='q1' name='q' placeholder='Search…' type='text'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form><br /></div><p>Kalau ingin kata "Search…" dalam kotak search menghilang otomatis ketika kamu klik dalam kotak search tersebut, maka kamu perlu merombak kodenya seperti di bawah ini :</p><pre><code><div id='search'><br /> <form expr:action='data:blog.homepageUrl + "search/"' class='searchform' method='get'><br /> <label class='assistive-text' for='q'><span style="color:red;">Search:</span></label><br /> <input class='field' id='q' name='q' onblur='if (this.value == "") {this.value = "<span style="color:red;">Search&hellip;</span>";}' onfocus='if (this.value == "<span style="color:red;">Search&hellip;</span>") {this.value = ""}' type='text' value='<span style="color:red;">Search&hellip;</span>'/><br /> <input class='submit' id='searchsubmit' name='submit' type='submit' value='<span style="color:red;">Search</span>'/><br /> </form><br /></div><!-- #search --></code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text1' for='q'>Search:</label><input class='field' id='q1' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form><br /></div><p><mark>Update (06 Nopember 2012)</mark>: Untuk kustomisasi lebih lanjut, tinggal membenahi konfigurasi kotak penelusuran dengan menggunakan CSS (<em>Cascading Style Sheets</em>) yang letaknya di antara <code><b:skin><![CDATA[</code> … <code>]]></b:skin></code>. Contoh seperti yang ditunjukkan di bawah ini:</p><pre><code>#search {<br /> margin: 1.5em 0;<br />}<br />#search .assistive-text {<br /> clip: rect(1px 1px 1px 1px);<br /> clip: rect(1px, 1px, 1px, 1px);<br /> position: absolute !important;<br />}<br />input#q {<br /> color: #666;<br /> border: 1px solid #ddd;<br /> border-radius: 3px;<br /> <span style="color:red;">padding: 6px;</span><br />}<br />input#q:focus {<br /> color: #111;<br />}<br /><span style="color:blue">input#searchsubmit {<br /> border: 1px solid #ddd;<br /> border-color: #ccc #ccc #bbb #ccc;<br /> border-radius: 3px;<br /> background: #fafafa;<br /> box-shadow: inset 0 2px 1px #fff;<br /> color: rgba(0,0,0,.8);<br /> cursor: pointer;<br /> padding: .45em .75em;<br /> text-shadow: 0 1px 0 rgba(255,255,255,.5);<br />}<br />input#searchsubmit:hover {<br /> background: #f5f5f5;<br /> border-color: #bbb #bbb #aaa #bbb;<br />}<br />input#searchsubmit:focus,<br />input#searchsubmit:active {<br /> border-color: #aaa #bbb #bbb #bbb;<br /> box-shadow: inset 0 2px 3px rgba(0,0,0,.15);<br />}</span></code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q1' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form><br /></div><p>Menambahkan gambar dalam <code>input#q</code> dengan mengganti nilai dari properti <code>padding</code> (warna merah) serta tambahan kode gambar (warna hijau).</p><pre><code>input#q {<br /> <span style="color:green;">background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');<br /> background-repeat: no-repeat;<br /> background-position: 6px 7px;</span><br /> <span style="color:red;">padding: 6px 6px 6px 28px;</span><br /> color: #666;<br /> border: 1px solid #ddd;<br /> border-radius: 3px;<br />}</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q2' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form><br /></div><p>Menghilangkan tombol <em>search</em> dengan mengganti semua <em>selector</em> yang berhubungan dengan <code>input#searchsubmit</code>.</p><pre><code><span style="color:blue">input#searchsubmit {<br /> display: none;<br />}</span></code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q2' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/></form><br /></div><p>Atau dapat pula di kustomisasi seperti di bawah ini.</p><pre><code>input#q {<br /> background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');<br /> background-repeat: no-repeat;<br /> background-position: 6px 7px;<br /> padding: 6px 6px 6px 28px;<br /> color: #666;<br /> border: 1px solid #ddd;<br /> border-radius: 3px;<br /> -webkit-transition-duration: 400ms;<br /> -webkit-transition-property: width, background;<br /> -webkit-transition-timing-function: ease;<br /> -moz-transition-duration: 400ms;<br /> -moz-transition-property: width, background;<br /> -moz-transition-timing-function: ease;<br /> -o-transition-duration: 400ms;<br /> -o-transition-property: width, background;<br /> -o-transition-timing-function: ease;<br /> float: right;<br /> width: 72px;<br />}<br />input#q:focus {<br /> width: 196px;<br />}</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q3' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/></form><br /></div><div class="clear"></div><p style="margin-top:1.6em;">Hanya dengan sebuah elemen HTML (<em>HyperText Markup Language</em>), kita dapat membuat bermacam-macam gaya dengan memanfaatkan CSS. Bolehkah saya mengutip kata-kata ini, <q>Kode adalah puisi</q>.</p><style type="text/css">input#q2{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');background-repeat:no-repeat;background-position:6px 7px;padding:6px 6px 6px 28px;}input#q3{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');background-repeat:no-repeat;background-position:6px 7px;padding:6px 6px 6px 28px;-webkit-transition-duration:400ms;-webkit-transition-property:width, background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width, background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width, background;-o-transition-timing-function:ease;width:72px;float:right;}input#q3:focus{width:196px;}</style>

Posted by Hii Sekai

Menghilangkan Icon Komentator default Blogger

<div style="text-align: justify;">Dalam posting sebelumnya "<a href="http://optimasi-blog.blogspot.com/2009/06/pasang-avatar-mybloglog-dalam-komentar.html">pasang avatar mybloglog dalam komentar</a>" telah sedikit disinggung mengenai icon komentator default blogger, seperti <img alt="icon author1" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/bloggerprofil.jpg" style="display:inline;" /> dan <img alt="icon author2" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Blogger.jpg" style="display:inline;" />. Kemudian untuk merubah tampilan default icon tersebut, maka ditambahkan avatar mybloglog. Rupanya setelah ditelisik (bak penyidik dalam lab forensik he..he..) lebih mendalam, ternyata ceritanya tidak sampai di situ saja...??? Umumnya kalau template kamu masih menggunakan default bawaan blogger dan langsung ditambahkan avatar mybloglog, maka masih terlihat icon komentator default blogger saat avatar tidak/belum muncul<a name='more'></a>. Artinya avatar mybloglog yang telah dipasang hanya berfungsi untuk menindih icon komentator yang sesungguhnya. Nah, agar avatar mybloglog yang telah kamu aplikasikan dalam blog kamu tampil power-full dan optimal, ini nih <span style="font-style: italic;">trik blogger</span>nya.</div><div class="fullpost"><br /><br /><div style="text-align: justify;"><span style="font-style: italic;">Trik blogger</span> menghilangkan icon komentator default blogger adalah sebagai berikut :<br /><br /></div><ul><li>Login ke account blogger kamu.</li><br /><li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li><br /></ul><div style="text-align: justify;">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 /></div><ul><li>Cari kode (warna merah) seperti di bawah ini.</li><br /></ul><blockquote style="font-family:courier new;"><span style="font-size:85%;"><span style="color: rgb(255, 0, 0); font-weight: bold;"><b:loop values='data:post.comments' var='comment'></span><br /><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.<span style="color: rgb(51, 51, 255); font-weight: bold;">anchorName</span>'><br /><br /><span style="color: rgb(0, 153, 0); font-weight: bold;"><b:if cond='data:comment.favicon'></span><br /><br /><span style="color: rgb(0, 153, 0); font-weight: bold;"> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></span><br /><br /><span style="color: rgb(0, 153, 0); font-weight: bold;"> </b:if></span><br /><br /><a expr:name='data:comment.<span style="color: rgb(51, 51, 255); font-weight: bold;">anchorName</span>'/><br /><br /><b:if cond='data:comment.authorUrl'><br /><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><br /><b:else/><br /><br /><data:comment.author/><br /><br /></b:if><br /><br /><data:commentPostedByMsg/><br /><br /></dt></span></blockquote><br /><br /><div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /></div><div style="text-align: justify;"><ul><li>Kemudian perhatikan kode yang ditandai dengan warna biru dan hijau. Ubahlah kode yang berwarna biru dengan kode <span style=";font-family:courier new;font-size:85%;" ><span style="color: rgb(51, 51, 255); font-weight: bold;">id</span></span> dan hapus kode yang berwarna hijau, sehingga hasilnya akan tampak seperti di bawah ini.</li><br /></ul></div><blockquote style="font-family:courier new;"><span style="font-size:85%;"><b:loop values='data:post.comments' var='comment'><br /><br /><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.<span style="color: rgb(51, 51, 255); font-weight: bold;">id</span>'><br /><br /><a expr:name='data:comment.<span style="color: rgb(51, 51, 255); font-weight: bold;">id</span>'/><br /><br /><b:if cond='data:comment.authorUrl'><br /><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><br /><b:else/><br /><br /><data:comment.author/><br /><br /></b:if><br /><br /><data:commentPostedByMsg/><br /><br /></dt></span> </blockquote><br /><br />Catatan :<br /><br /><div style="text-align: justify;">Hati-hati dengan pengeditan ini dan harus dilakukan dengan teliti, apalagi terhadap blog dengan karakter kode template yang berbeda.<br /><br /></div><ul><li>Jangan lipa disimpan.</li><br /></ul><br /><br />Selamat menghilangkan icon komentator default blogger...<br /><br /></div>

Posted by Hii Sekai