tag:blogger.com,1999:blog-48174905857106602122024-03-14T01:58:11.663+07:00Istana BloggerBlogger Tutorial, Desain dan WidgetAnonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-4817490585710660212.post-46404363284288128862012-10-24T15:40:00.001+07:002012-10-24T15:55:28.060+07:00Tombol Berlangganan Melebar Ketika Mouse Diatas<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
Saya akan menyebarkan sebuah widget untuk berlangganan dengan blog kita. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya (hover). Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS.<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="widget tombol berlangganan melebar" border="0" src="http://4.bp.blogspot.com/-zhbnxQo11gc/UIazOm4FTsI/AAAAAAAAAbA/YNcYHNaOt6s/s1600/widget+tombol+berlangganan+melebar+ketika+mouse+diatas.png" title="contoh dari widget tombol berlangganan melebar" /></div>
<div class="buttons">
<a href="http://htmlmadlab.webs.com/tombol-berlangganan-melebar" target="_blank"><button class="action bluebtn"><span class="label">Lihat Demo</span></button></a></div>
<br />
<h2 style="text-align: left;">
Cara menambahkan:</h2>
<ul style="text-align: left;">
<li>Masuk ke <b>Dasbor Blogger</b> > <b>Tata letak</b> > <b>Tambah gadget</b> > <b>Html/Javascript</b></li>
<li>Kemudian pastekan kode dibawah ini dan klik <b>Simpan</b></li>
</ul>
<blockquote class="tr_bq">
<style><br />#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}<br />#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}<br />#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}<br />#tbisose
.facebook, .googleplus, .pinterest, .rss, .twitter{position:relative;
z-index:5; display:block; float:none; margin:10px 0 0; width:210px;
height:38px; border-radius:5px;
background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png)
no-repeat; background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0
2px 3px; color:#141414; text-align:left; text-indent:50px;
text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s
ease-in-out; -moz-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -o-transition:width .25s ease-in-out,background-color
.25s ease-in-out; transition:width .25s ease-in-out,background-color
.25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}<br />#tbisose
li:after{position:absolute; top:0; left:50px; z-index:2; display:block;
height:38px; color:#141414; content:attr(data-alt); line-height:32px;}<br />#tbisose .icon{overflow:hidden; color:#fafafa;}<br />#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}<br />#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}<br />#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}<br />#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}<br />#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}<br />#tbisose li:hover .icon,<br />.touch #tbisose li .icon{width:210px;}<br />.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}<br />.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}<br />.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}<br />.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}<br />.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}<br />#ibsurl{text-align:left;}<br />#ibsurl a{color:transparent;}<br />#ibsurl a:hover{color:#808080;} <br />
</style> <br />
<ul id="tbisose"><br /><li data-alt="Follow us on Facebook"><a class="icon facebook" href="<span style="color: red;">#</span>">Follow us on Facebook</a></li><br /><li data-alt="Follow us on Twitter"><a class="icon twitter" href="<span style="color: red;">#</span>">Follow us on Twitter</a></li><br /><li data-alt="Follow us on Google+"><a class="icon googleplus" href="<span style="color: red;">#</span>">Follow us on Google+</a></li><br /><li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="<span style="color: red;">#</span>">Follow us on Pinterest</a></li><br /><li data-alt="Subscribe with RSS"><a class="icon rss" href="<span style="color: red;">#</span>">Subscribe with RSS</a></li><br /></ul><br />
<div style="padding-left: 45px; font-family: arial, sans-serif; font-size: 9px;" id="ibsurl"><br /><a href="http://istanablogger.blogspot.com" target="_blank">Widget oleh Istana Blogger</a></div></blockquote>
<br />
Teliti kode diatas dan ganti # menjadi url yang kamu pilih.<br />
Kemungkinan widget ini tidak kompatibel dengan browser tertentu (tidak ter-update) seperti IE karena widget ini menggunakan efek CSS3.</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com1tag:blogger.com,1999:blog-4817490585710660212.post-66415060197061491672012-10-14T14:35:00.000+07:002012-10-22T20:58:00.852+07:00Faktor Penyebab Loading Blog Menjadi Berat<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img alt="penyebab loading blog menjadi lambat" border="0" height="166" src="http://2.bp.blogspot.com/-Tbn4b5pjp1c/UISc0th0ezI/AAAAAAAAAag/DVJBzSNUmHE/s200/penyebab+loading+blog+menjadi+lambat.jpg" title="faktor penyebab loading blog menjadi lambat" width="200" /></div>
<br />
Sudah jelas sobat tidak mau loading blog jadi lambat kan? Tapi apa yang terjadi, loading blog semakin lama semakin berat. Biasanya itu disebabkan oleh ketidak-sadaran sobat yang menambahkan sesuatu diblog. Apa saja penyebab blog menjadi berat? ini kuberitahu beberapa penyebabnya..<br />
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">Pemakaian Latar Belakang Gambar</span></h2>
Semakin besar dan rumit gambar latar belakang blog semakin lama loadingnya.<br />
Karena itu, gunakanlah latar belakang yang menggunakan kode warna saja<i>.</i><br />
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">Memakai Widget Secara Sembarangan</span></h2>
Widget yang biasanya dipromosikan blog lain untuk mempercantikkan blog seperti animasi itu hanya bikin kecepatan blog berkurang.<br />
contoh widget yang saya maksud adalah:<br />
<ol style="text-align: left;">
<li>Widget yang mempercantikkan kursor mouse</li>
<li>Widget yang berekstensi flash</li>
<li>Widget yang membuat seakan-akan ada hujan diblog</li>
<li>Widget yang membuat link berwarna pelangi atau muncul glitter</li>
<li>dan masih banyak lagi... </li>
</ol>
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">Memakai Flash dan Gambar secara besar-besaran</span></h2>
File berekstensi Flash dapat ditemukan melalui video, iklan, ataupun widget seperti <strike>flashvortex</strike>. nah, flash seperti inilah yang memperlambatkan blog kita.<br />
Sedangkan untuk gambar. Jangan memasang gambar yang terlalu besar ke blog. Usahakan gambarmu se-simpel mungkin. Gambar yang berekstensi .gif juga memperlambatkan blog.<br />
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">Memilih Template yang Kotor</span></h2>
Bukan berarti ada sampahnya. Template yang kotor adalah template yang memakai gambar, widget, sidebar yang banyak. Biasanya template yang kotor berkategori <u>Grunge</u>.<br />
Untuk mempercepatkan loading. disarankan memakai template yang berkategori <u>Fresh</u> (simpel) atau <u>Minimalist</u>.<br />
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">Iklan yang berlebihan</span></h2>
<div style="text-align: left;">
Beberapa iklan memakai file berekstensi flash ataupun gif. Bukan cuma memperlambatkan loading, juga merusak pemandangan blog.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Diatas ini hanyalah beberapa tips dariku ^^</div>
</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com19tag:blogger.com,1999:blog-4817490585710660212.post-6063964421954531662012-10-10T21:24:00.001+07:002012-10-10T21:24:05.971+07:00Menambah Traffic Dengan Mengatur Gambar<div dir="ltr" style="text-align: left;" trbidi="on">
Jangan menganggap sepele dengan gambar yang diupload ke blog. Selain untuk menghiasi ataupun mengimformasikan berita, gambar juga bisa menambahkan traffic bila kita bisa mengaturnya.<br />
<br />
Sebelum itu, saya jelaskan dulu. Kamu pasti biasanya meng-upload gambar yang telah <u>didownload dari <b><span style="color: #990000;"><span style="color: #0b5394;">G</span><span style="color: #cc0000;">o</span></span><span style="color: #f1c232;">o</span><span style="color: #0b5394;">g</span><span style="color: #38761d;">l</span><span style="color: #cc0000;">e</span></b></u> atau gambar yang <u>difotoin dengan kamera</u> untuk diletakkan keblog, kan? Biasanya gambar-gambar itu akan mempunyai nama-nama yang aneh. Bila kita sama sekali tidak memerdulikan itu, itu tidak akan membantu kenaikan trafficmu.<br />
<br />
Maka, kamu harus mengikuti 2 langkah di bawah ini sebelum mempublikasikan postmu..<br />
<br />
<h2 style="text-align: left;">
<span style="color: #0b5394;">1. Mengubah Nama Gambar Menjadi Kata Kunci</span></h2>
Ketika kita mengdownload gambar ataupun berfoto. Biasanya gambar itu memiliki nama yang aneh, seperti <i>untitled.png</i>, <i>img6.png</i>, <i>sshot1.jpeg</i> dll. Jadi, untuk mengubah nama menjadi keyword, misalnya saya ingin nge-post tentang blog. Saya akan membuat namanya <i>blog.png</i> atau <i>tentang blog.png</i>.<br />
<span style="color: #0b5394;"><br /></span>
<h2 style="text-align: left;">
<span style="color: #0b5394;">2. Menambahkan Alt Tag ke dalam gambar</span></h2>
Alt Tag adalah tulisan yang dimasukkan ke gambar agar gambar tersebut
bisa dimengerti oleh mesin pencari. Alt Tag juga dapat menambahkan
traffic pada blogmu.<br />
<br />
<h3 style="text-align: left;">
<span style="color: #0b5394;">Cara Menambahkan Alt Tag:</span></h3>
1. Bikin sebuah blog post dan upload gambar didalam posting tersebut.<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="cara menambahkan alt tag pada gambar" border="0" height="136" src="http://1.bp.blogspot.com/-FQGoFrJJf8A/UHV1ZMA5yWI/AAAAAAAAAZg/6qX4bshdCE0/s200/alt+tag+pada+gambar.jpg" title="alt tag" width="200" /></div>
<br />
2. Klik pada gambar sehingga muncul batang tulisan berwarna biru muda. Lalu klik pada <b>"Properties".</b><br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="cara menambahkan alt tag pada gambar" border="0" src="http://1.bp.blogspot.com/-1mXMUcpqe9Y/UHV53hcHbiI/AAAAAAAAAZ4/m5C0cPE3e2U/s1600/Cara+menambahkan+alt+tag+pada+gambar+1.png" title="contoh gambar setelah diklik" /></div>
<br />
3. Pada kotak yang muncul, masukkan deskripsi gambar sesingkat mungkin pada kotak tulisan dibawah <b>"alt text"</b>. kemudian klik <b>"ok"</b>.<br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="cara menambahkan alt tag pada gambar" border="0" height="152" src="http://2.bp.blogspot.com/-qJH4DVn2Vog/UHV56SvvNwI/AAAAAAAAAaA/_EpWu-tzUGI/s400/cara+menambahkan+alt+tag+pada+gambar+2.png" title="contoh kotak properties yang muncul" width="400" /></div>
<br />
Sekarang, gambarmu sudah memiliki alt tagnya. Usahakan agar 1 gambar memiliki Alt Tag maksimal 5 kata.</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com8tag:blogger.com,1999:blog-4817490585710660212.post-90367784124065294262012-10-07T09:46:00.001+07:002012-10-07T09:58:08.561+07:00Cara Membuat Gambar Yang Berubah Ketika Pointer Mouse Berada Diatasnya<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;">
<img border="0" height="80" src="http://2.bp.blogspot.com/-qALn7XkrobQ/UHBgfBgMxOI/AAAAAAAAAYw/a23s-PD6DWI/s200/stickie+3.png" width="80" /></div>
Berbeda dengan gambar .gif. Efek ini akan membuat gambar bisa berubah ketika mouse kita berada diatas gambar. Dan setelah mousemu menjauhi gambar itu. Maka itu akan kembali menjadi gambar semula. Tapi, untuk membuat efek ini kita harus mencari dulu 2 gambar yang sama ukurannya. Sebagaimana contoh dari efek ini kutaruhkan dibawah ini
<a name='more'></a><br /><br />
Letakkan pointer mouse diatas gambar dibawah ini:<br />
<a href="http://istanablogger.blogspot.com/"><img width="125" height="125" src="http://1.bp.blogspot.com/--3wHKL3MMAY/UHBifh5wKPI/AAAAAAAAAY8/TS1fU1zqpuI/s200/stickie%2B1.png" onmouseover="this.src='http://2.bp.blogspot.com/-59M9-kJ9Ric/UHBigM9bCxI/AAAAAAAAAZI/9Mup-0fnDcI/s1600/stickie%2B2.png'" onmouseout="this.src='http://1.bp.blogspot.com/--3wHKL3MMAY/UHBifh5wKPI/AAAAAAAAAY8/TS1fU1zqpuI/s1600/stickie%2B1.png'" /></a>
<br />
Secara simpel saya berikan kodenya dibawah ini:<br />
<pre class="codebox" style="background-color: #ffedd9; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; margin-bottom: 24px; margin-left: auto; margin-right: auto; max-width: 500px; overflow: auto; padding: 1.5em; vertical-align: baseline;"><span style="font-family: Ubuntu Condensed;"><span style="font-size: 14px; line-height: 19px; white-space: normal;"><span style="color: #242424;"><a href="</span><span style="color: blue;">Alamat URL</span><span style="color: #242424;">"><img src="</span><span style="color: red;">Alamat URL dari gambar pertama</span><span style="color: #242424;">" onmouseover="this.src='</span><span style="color: #38761d;">Alamat URL dari gambar kedua</span><span style="color: #242424;">'" onmouseout="this.src='</span><span style="color: red;">Alamat URL dari gambar pertama</span><span style="color: #242424;">'" /></a></span></span></span></pre>
Ubahlah:<br />
<span style="color: blue;">Alamat URL</span> menjadi alamat yang dituju ketika gambar diklik<br />
<span style="color: red;">Alamat URL dari gambar pertama</span> menjadi alamat gambar pertama yang sudah kamu upload<br />
<span style="color: #38761d;">Alamat Url dari gambar kedua</span> menjadi alamat gambar kedua yang sudah kamu upload.<br />
<br />
Kamu bisa memasukkan kode ini kedalam blog menjadi widget, atau masukkan kedalam blog post dengan mengedit HTML.<br />
<div style="text-align: right;">
<span style="font-size: xx-small;">(kredit: <a href="http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html" rel="nofollow" target="_blank">Helplogger</a>)</span></div>
</div>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0tag:blogger.com,1999:blog-4817490585710660212.post-47260441131325429032012-09-30T22:24:00.006+07:002012-10-21T14:32:02.522+07:00Widget Berlangganan Simpel Di Sidebar<div dir="ltr" style="text-align: left;" trbidi="on">
Sekarang, Para Blogger sudah sering membuat akun seperti twitter ataupun Feedburner agar pengunjung bisa berlangganan dengan blog mereka. Baru-baru ini saya menemukan widget yang cantik buatmu untuk ditambahkan di sidebar.<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="contoh gambar widget berlangganan simpel" border="0" height="277" src="http://1.bp.blogspot.com/-_HXcJTs2HLs/UGbDaUejNLI/AAAAAAAAAVk/wf7wO_cgJ9k/s320/sshot-1.png" title="contoh widget berlangganan simpel" width="320" /></div>
<br />
<div style="text-align: left;">
<b>
Berikut ini langkah-langkah menambahkannya:</b></div>
<b>Langkah 1:</b> seperti biasa kita masuk ke Blogger, Lalu klik pada menu <b>"Template"</b><br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="langkah pertama dari menambahkan widget berlangganan simpel" border="0" src="http://2.bp.blogspot.com/-K7oXcuEimxg/UGbFKFqoGaI/AAAAAAAAAVs/l9XDWf3dUNA/s1600/sshot-3.png" title="gambar langkah 1" /></div>
(Back-up dulu templatemu)<br />
<br />
<b>Langkah 2: </b>Klik pada Edit Html dan cari kode <span style="background-color: #cfe2f3; font-family: consolas, 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px;">]]></b:skin></span><span style="background-color: white; font-family: consolas, 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px;"> </span>(gunakan Ctrl+F)<br />
<span style="background-color: #cfe2f3; font-family: consolas, 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px;"><br /></span><b>Langkah 3: </b>Dan ganti kode <span style="background-color: #cfe2f3; font-family: consolas, 'Courier New', Courier, monospace; font-size: 13px; line-height: 18px;">]]></b:skin></span> menjadi kode css dibawah ini:<br />
<br />
<pre class="codebox" style="background-color: #ffedd9; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; margin-bottom: 24px; margin-left: auto; margin-right: auto; max-width: 500px; overflow: auto; padding: 1.5em; vertical-align: baseline;"><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox{list-style:none; margin:0px}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#8B3E2F; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,Verdana; font-weight:bold; clear:none}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">#subscribebox li a.link{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span style="color: #bf9000;"><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">]]></</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">b</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">skin</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span></span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></span></pre>
<b>Langkah 4:</b> Lalu klik <b>"Simpan Template"</b> dan <b>"tutup"</b><br />
<br />
<b>Langkah 5:</b> Kemudian pergi ke Tata Letak, dan klik <b>"tambah gadget"</b><br />
<br />
<b>Langkah 6:</b> Didalam pilihan gadget yang muncul, Pilih kode <b>"Html/Javascript"</b> kemudian pastekan kode html dibawah ini:<br />
<pre class="codebox" style="background-color: #ffedd9; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 0px; margin-bottom: 24px; margin-left: auto; margin-right: auto; max-width: 500px; overflow: auto; padding: 1.5em; vertical-align: baseline;"><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><ul</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">id</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"subscribebox"</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><a</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"link"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">href</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"http://feeds.feedburner.com/<span style="color: blue;">Nama Feed Kamu</span>"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">target</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"_blank"</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></a></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><img</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">src</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"http://3.bp.blogspot.com/_ubwIhqPcR6M/TCHnmSM6jcI/AAAAAAAAA7A/z4X5p_TQt20/s1600/rss_48.png"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">alt</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"RSS Feeds"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">/></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">RSS Feed</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">Berlangganan via RSS Feed</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><a</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"link"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">href</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: blue;">Nama Feed Kamu</span>&loc=en_US</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">target</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"_blank"</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></a></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><img</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">src</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"http://1.bp.blogspot.com/_ubwIhqPcR6M/TCHna8KiyVI/AAAAAAAAA64/ACI622bhHTY/s1600/mail_forward_48.png"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">alt</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"RSS E-Mail Delivery"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">/></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">Ikuti via Email</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">Berlangganan dengan email untuk update posting ke Email kamu</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><a</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"link"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">href</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"<span style="color: red;">http:</span></span><span style="color: red;"><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">twitter.com/alamattwitter</span></span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">target</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"_blank"</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></a></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><img</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">src</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"http://4.bp.blogspot.com/_ubwIhqPcR6M/TCHnQ2fRV0I/AAAAAAAAA6w/Kj8nwFNuT_A/s1600/twitter_48.png"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">alt</span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"Ikuti Kami via Twitter"</span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">/></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">Twitter</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></h4></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">ikut kami ditwitter dan berlangganan dengan update terbaru</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></p></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></li></span><span class="pln" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></ul></span><span class="pun" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"></span></pre>
<div style="text-align: left;">
<span style="font-size: large;">Peringatan:</span><br />
Untuk mengubah link, telitilah kode diatas dan gantikan dengan link yang kamu pilih,<br />
<ul style="text-align: left;">
<li><b><span style="color: blue;">Warna Biru</span></b>: nama dari feed di feedburner</li>
<li><span style="color: red;"><b>Warna Merah</b></span>: alamat twitter</li>
</ul>
bila bermasalah silahkan dikomentari.</div>
<div style="text-align: right;">
<span style="font-size: xx-small;">(kredit: <a href="http://www.bloggermint.com/" rel="nofollow" target="_blank">Bloggermint</a>)</span>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com10tag:blogger.com,1999:blog-4817490585710660212.post-18938950458665189702012-09-20T13:26:00.001+07:002012-10-05T22:39:43.877+07:00Cara Mengetahui Dan Mengubah Link Postingan<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
Pernahkah kamu merasa link pada postingnya kepanjangan?, Atau kepengen mengubah link yang ada dipostingan? Blogger menyediakan fasilitas ini sekitar 2 bulan yang lalu, walaupun kamu tidak bisa mengubah tanggal yang ada di link. Tapi kamu bisa mengetahui link menuju postingmu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="gambar link di cara mengetahui dan mengubah link posting" border="0" height="240" src="http://1.bp.blogspot.com/-xhEPYZwHTXs/UG79t-OXfkI/AAAAAAAAAYA/km3T3yXLCVo/s320/istana-blogger-cara-mengubah-link-postingan.jpg" title="" width="320" /></div>
<a name='more'></a><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Misalnya kamu ingin mengubah link postingan:</span><br />
<span style="background-color: #cfe2f3; font-family: Arial, Helvetica, sans-serif;">http://istanablogger.blogspot.com/2012/09/</span><span style="background-color: #fff2cc; font-family: Arial, Helvetica, sans-serif;">mengetahui-dan-mengubah-link-postingmu</span><span style="background-color: #cfe2f3; font-family: Arial, Helvetica, sans-serif;">.html</span><br />
<span style="background-color: #6fa8dc; font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white;">Maka linkmu bisa diubah menjadi:</span></span><br />
<span style="background-color: #cfe2f3; font-family: Arial, Helvetica, sans-serif;">http://istanablogger.blogspot.com/2012/09/</span><span style="background-color: #fff2cc; font-family: Arial, Helvetica, sans-serif;">saya-sudah-berubah</span><span style="background-color: #cfe2f3; font-family: Arial, Helvetica, sans-serif;">.html</span>
<br />
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">nah, berikut ini caranya:</span><br />
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">1. Bikin sebuah blog post</span><br />
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">2. Tetap pada halaman pengeditan post, lihat pada bagian kanan, lalu klik pada <b>Tautan Permanen (Permalink)</b> disamping gambar rantai.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="sidebar pengeditan posting" border="0" src="http://3.bp.blogspot.com/-el4Hnz_cWZA/UFqxEgwuCsI/AAAAAAAAATQ/fLgfHyqoCq8/s1600/sshot-11.png" title="" /></div>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">3. Kamu akan melihat link yang muncul, itulah link postinganmu masa kini (link akan berubah bila kamu mengubah judul ataupun mempublikasikannya pada waktu yang berbeda)</span><br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="gambar setelah diklik tautan permanen" border="0" src="http://3.bp.blogspot.com/-5GmZviZwA9k/UFqyZZzEkiI/AAAAAAAAATY/wcYTtzqRYN0/s1600/sshot-12.png" title="" /></div>
<br />
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">4. untuk mengubah link postinganmu, kamu hanya tinggal klik pada <b>Tautan Permanen Khusus</b>, lalu masukkan kata pengubahnya, setelah itu klik <b>selesai</b>, kamu tinggal mempublikasikan postmu.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<img alt="gambar setelah mengubah tautan permanen" border="0" src="http://1.bp.blogspot.com/--W12yhup6hk/UFqzuTnIXXI/AAAAAAAAATg/IUVc0WpLzoE/s1600/sshot-13.png" title="" /></div>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><b><br /></b></span>
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">hehe, mudahkan? kamu pasti tahu kalau posting ini sama seperti posting yang dulu, berhubungan dengan sidebar kanan pengeditan postnya ^^. Jadi, sesekali perhatiin fasilitas yang disediakan Blogger ya!, ini hanya tips yang mudah kok ^^</span></div>
</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com3tag:blogger.com,1999:blog-4817490585710660212.post-47820729227266385362012-09-12T16:25:00.000+07:002012-09-22T22:20:53.251+07:00Menghilangkan Kotak Komentar Pada Post Tertentu<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-yZ6uvgr8qC0/UFBHLtLN5oI/AAAAAAAAASU/ZrPk1FCWaJw/s1600/sshot-6.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-yZ6uvgr8qC0/UFBHLtLN5oI/AAAAAAAAASU/ZrPk1FCWaJw/s1600/sshot-6.png" /></a></div>
Sobat pasti tahu kotak komentar yang ada disetiap posting dan halaman blog kita, itu biasanya ditampilkan dengan cara embed. Tapi ada beberapa page yang tidak mau ditampilkan kotak komentarnya seperti halaman Forum, Buku Tamu, dll. Untuk itu saya akan sebarkan cara menghilangkan kotak komentar berikut ini:<br />
<a name='more'></a><br />
1. Bikin dulu 1 posting yang tidak mau ditampilkan kotak komentarnya, kalau sudah dibikin tinggal diedit kembali<br />
<br />
2. Tetap dihalaman edit entri/laman, lihat bagian kanan halaman, temukan dan klik kata Pilihan disamping tanda roda bergerigi.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-owJH99Q0-Bo/UFBNi7kPmbI/AAAAAAAAASo/6QBMK2-FAr0/s1600/sshot-7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://3.bp.blogspot.com/-owJH99Q0-Bo/UFBNi7kPmbI/AAAAAAAAASo/6QBMK2-FAr0/s320/sshot-7.png" width="231" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small;">contoh dari menu <b>pilihan</b> yang diklik, didalam pengeditan posting maupun halaman selalu ada menu <b>pilihan</b></span></td></tr>
</tbody></table>
<br />
3. tepat dibawah kata <b>komentar pembaca</b>, klik <b>Jangan bolehkan</b> (gambar diatas), lalu klik <b>selesai</b>. (bila kamu sudah pernah publikasikan postingnya, klik pada <b>jangan bolehkan, sembunyikan yang ada</b> lalu klik <b>selesai</b>)<br />
<br />
kamu tinggal mempublikasikan Posting/ Halamanmu. ada pertanyaan silahkan dikomentari, Terima kasih.<br />
<div style="text-align: right;">
url singkat keposting ini: <a href="http://bit.ly/RGPwmI">http://bit.ly/RGPwmI</a></div>
</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com5tag:blogger.com,1999:blog-4817490585710660212.post-75533244389831054272012-09-09T11:09:00.002+07:002012-09-30T22:41:18.873+07:00Menambahkan CSS Dengan Perancang Template<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://istanablogger.blogspot.com/2012/09/menambahkan-css-dengan-perancang.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-rYGIkSPUjms/UEwK_xovEoI/AAAAAAAAARQ/QdTB97n5fOE/s1600/sshot-3.png" /></a></div>
Cascading Style Sheet atau sering disebut CSS, sering digunakan kita untuk menghiasi beberapa tempat diblog. Kadang-kadang sobat pernah mencoba memasukkan CSS keblog dengan mencari kode <span style="font-family: inherit;"><span style="color: #3d85c6;">[[></b:skin></span><b> </b>dan tidak ketemu</span>. Berikut ini cara memasukkan CSS keblog tanpa mencari kode <span style="color: #3d85c6; font-family: inherit;">[[></b:skin></span><br />
<a name='more'></a><br />
1. Masukkan dulu kode Html yang diberikan bersama CSS ini.<br />
<br />
2. Masuk ke bloggermu lalu klik pada <span style="color: #3d85c6;">Template</span> dan akan muncul layar seperti dibawah ini:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-TEeX3ciHB9U/UEwRaXQAzgI/AAAAAAAAARk/U3vH66yoOLc/s1600/sshot-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="352" src="http://3.bp.blogspot.com/-TEeX3ciHB9U/UEwRaXQAzgI/AAAAAAAAARk/U3vH66yoOLc/s640/sshot-2.png" width="640" /></a></div>
<b><br /></b>
3. Klik pada tombol orange bertulisan <span style="background-color: white; color: #3d85c6;">Customize</span>, bila kamu memakai blogger didalam bahasa indonesia klik tombol <span style="background-color: white; color: #3d85c6;">Sesuaikan</span> (lihat gambar diatas). Kamu akan memasuki Perancang Template blogmu.<br />
<br />
4. Dibagian kiri akan terdapat 5 menu tulisan. Klik pada <span style="color: #3d85c6;">Tingkat Lanjut</span> (lihat gambar)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-NDEcLap-wLg/UEwTPun93EI/AAAAAAAAARs/Uen1OGnbwAY/s1600/sshot-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-NDEcLap-wLg/UEwTPun93EI/AAAAAAAAARs/Uen1OGnbwAY/s1600/sshot-4.png" /></a></div>
<br />
5. Akan ada banyak menu yang muncul disampingnya. Cari dan klik kata <span style="background-color: white; color: #3d85c6;">Tambahkan CSS</span> diantara menu itu. Setelah itu kamu akan menemukan kotak putih lebar yang muncul. Masukkan kode CSSmu disitu dan klik <span style="background-color: white; color: #3d85c6;">Terapkan keblog</span>.<br />
<div style="background-color: white;">
<br /></div>
<div style="background-color: #9fc5e8;">
<div style="background-color: white;">
<br /></div>
Kamu harus memasukkan kode Html/Javascriptnya duluan agar cara ini bekerja</div>
Sekedar menyarankan. Bila sobat menambahkan Kode CSS dan tidak ketemu perubahan, jangan lupa untuk menekan enter beberapa kali diakhir kode CSS dan hapus kembali enternya.<br />
<br />
Bila tidak mengerti bisa dikomentar dibawah ini.<br />
<div style="text-align: right;">
url singkat keartikel ini: <a href="http://bit.ly/QaO5ZB">http://bit.ly/QaO5ZB</a></div>
</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com1tag:blogger.com,1999:blog-4817490585710660212.post-13259215679860003632012-08-10T14:34:00.005+07:002012-09-30T22:40:51.197+07:005 Tips Membuat Blogmu Terkenal<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://istanablogger.blogspot.com/2012/08/5-tips-membuat-blogmu-terkenal.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="http://2.bp.blogspot.com/-iqCKEhlDgDU/UCS3AhDAPAI/AAAAAAAAAOo/6sSR6tpsG80/s1600/Image+3.png" title="klik untuk melihat post" /></a></div>
Begitu banyaknya website baru yang muncul sehingga websitemu sama sekali tidak divisit, itulah masalah kita sebagai blogger apalagi blogger baru. Tapi kamu harus berusaha menyebarkan dan mendapatkan beberapa pengunjung agar hasilmu tidak sia-sia. Berikut ini beberapa ide untuk menyebarkan blogmu.<br />
<a name='more'></a><br />
Pertama, kamu harus ditemukan. Walaupun websitemu sehebat apapun bila tidak ditemukan berarti sia-sia. Maka kamu harus memiliki isi artikel yang lebih bagus. Mesin pencarian seperti Google menyukai artikel yang berkualitas bagus, lebih banyak update yang disebarkanmu lebih sering dimunculkannya. Dan seringlah ngecek kata-kata yang salah.<br />
<br />
Bagaimanapun, desain adalah hal yang paling penting untuk website. Kamu harus memiliki website yang isinya enak dilihat dan berlagak profesional. Bila kamu tidak mengerti cara mendesain web, tidak perlu khawatir. Blogger sendiri sudah punya fasilitas yang dapat memperindahkan blogmu. Kamu juga bisa menambahkan Favicon untuk menampilkan profesional websitemu, usahakan untuk membuat gambarnya sendiri atau dibantu teman. Selain itu jangan menghias blogmu secara besar-besaran, karena pengunjung akan kebingungan ketika masuk ke halaman utama dan tidak kembali lagi.<br />
<br />
Cara menyebarkan website termudah adalah melalui media sosial seperti Facebook. Cobalah sebarkan jangan hanya diwall sendiri tapi sebarkan ke Fan Page yang lebih banyak orangnya.<br />
<br />
Berinteraksilah dengan sesama Blogger dengan melakukan Blogwalking, yaitu: mengunjungi dan meninggalkan pesan keblog lainnya. Seringkali blog-blog akan menyediakan Chatbox atau Forum untuk berhubungan dengan kita. Berkomentar diblog yang dikunjungi juga merupakan cara baik.<br />
<br />
Cobalah mengikuti tips dari website lainnya. Website yang membahas/ membantu perkembangan website patut diikuti.<br />
<br />
Itu hanya tipsku untuk membantumu. Ingat untuk mengetahui kekuatan dan kelemahan mereka.</div>
Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com4tag:blogger.com,1999:blog-4817490585710660212.post-60635604943603973522012-06-27T17:55:00.000+07:002012-09-30T22:41:01.535+07:00Cara Membuat Hello Bar<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-QnrQp0KyRUA/T84L0rlJXxI/AAAAAAAAAK0/NXMQXIt7Fk4/s1600/Image+2.png" /></div>
Hello Bar adalah sebatang bar bertulisan iklan diatas website kita. Biasanya Hello Bar berisi link untuk menarik orang lain kesitus web barumu atau mengabarkan Posting artikel terbaru. Berikut ini hanya saya ajarkan cara menambahkan Hello Bar, untuk langkah selanjutnya dibikin sobat sendiri atau komentari disini untuk penjelasan.<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-QG4t-b_6r6Q/T-roAnaVoNI/AAAAAAAAAOA/uTPsl0K5ThY/s1600/ghgdhdgh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="http://4.bp.blogspot.com/-QG4t-b_6r6Q/T-roAnaVoNI/AAAAAAAAAOA/uTPsl0K5ThY/s1600/ghgdhdgh.png" title="contoh hellobar Istana Blogger" /></a></div>
<br />
1. Masuk dulu ke <a href="http://www.hellobar.com/" target="_blank">hellobar.com</a> dan klik <i>Free Signup</i><br />
<br />
2. Masukkan alamat emailmu dan klik <i>Sign up</i><br />
<br />
3. periksa emailmu dari Hello Bar dan copy passwordnya<br />
<br />
4. login lagi ke hellobar dengan email dan passwordmu di <a href="https://www.hellobar.com/login">hellobar.com/login</a><br />
<br />
5. klik create new, kamu akan dimasukkan ke halaman pembuatan Hellobar<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-L4B0w7uezGI/T-rXMgWC_EI/AAAAAAAAANI/_bgVS48S_cc/s1600/Image+5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="http://3.bp.blogspot.com/-L4B0w7uezGI/T-rXMgWC_EI/AAAAAAAAANI/_bgVS48S_cc/s320/Image+5.png" width="320" /></a></div>
<br />
6. Cari kotak tulisan <i>Message</i> dan masukkan kata yang menarik (seperti iklan)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-H66iZi3i_3E/T-rbF9ZZ0bI/AAAAAAAAANc/LxoDc4pr7NQ/s1600/Image+6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-H66iZi3i_3E/T-rbF9ZZ0bI/AAAAAAAAANc/LxoDc4pr7NQ/s1600/Image+6.png" /></a></div>
<br />
7. masukkan kotak <i>Link text</i> dengan tulisan <i>Baca Selengkapnya (tentukan sendiri)</i> dan kotak <i>link url</i> dengan alamat web yang disarankan<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-f471JM182As/T-rcxDSGtEI/AAAAAAAAANk/lnxc0ZFU930/s1600/gt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-f471JM182As/T-rcxDSGtEI/AAAAAAAAANk/lnxc0ZFU930/s1600/gt.png" /></a></div>
<br />
8. kamu bisa membuat hellobar jadi menarik dengan menentukan warna dan lainnya di <i>Appearance. </i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-O9UA2f_2he0/T-rfGKQxRVI/AAAAAAAAANs/gGiYmRV6hUc/s1600/ggb.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-O9UA2f_2he0/T-rfGKQxRVI/AAAAAAAAANs/gGiYmRV6hUc/s1600/ggb.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<i style="text-align: -webkit-auto;">untuk mengatur hellobar lebih lanjut bisa melalui setting(disarankan untuk yang bisa)</i>
</div>
<div class="separator" style="clear: both; text-align: left;">
<i style="text-align: -webkit-auto;"><br /></i></div>
<div class="separator" style="clear: both; text-align: -webkit-auto;">
9. klik <i>save</i>, setelah itu klik <i>back</i> dihalaman paling atas</div>
<div class="separator" style="clear: both; text-align: -webkit-auto;">
<br /></div>
<div class="separator" style="clear: both; text-align: -webkit-auto;">
10. kamu akan melihat sederet tulisan ditengah halaman, klik pada kata <i><embed></i></div>
<div class="separator" style="clear: both; text-align: -webkit-auto;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: -webkit-auto;">
11. copy kode yang muncul dan masukkan dihtml blogmu tepat setelah tulisan <body></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #666666; font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 16px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #666666; font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 16px;">url singkat keartikel ini: </span></span><span style="background-color: white;"><span style="color: #666666; font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 16px;">http://bit.ly/MWsyAw </span></span></span></div>
<script src="//www.hellobar.com/hellobar.js" type="text/javascript">
</script>
<script type="text/javascript">
new HelloBar(45979,63372);
</script>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0tag:blogger.com,1999:blog-4817490585710660212.post-48179311443454050522012-06-10T16:27:00.001+07:002012-09-08T17:47:13.503+07:00Membuat Posting Baca Selengkapnya Dengan Jump Break<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-rkYonmuRUsI/T8o8fsV8O5I/AAAAAAAAAJg/aN2ru4Cakt4/s1600/fhfhgfh.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-rkYonmuRUsI/T8o8fsV8O5I/AAAAAAAAAJg/aN2ru4Cakt4/s1600/fhfhgfh.png" /></a></div>
Pasti kamu pernah lihat Blog-blog yang isi postingnya di Halaman Utamanya ada link <i>Baca Selengkapnya</i> dibawahnya seperti pada blog ini. Pada umumnya ada dua cara membuatnya, yaitu dengan mengedit Html Blog atau menambahkan Jump Break. Jump Break adalah fitur yang disediakan oleh Blogger dan aman digunakan.<br />
<a name='more'></a>Berikut ini cara menambahkan <b>Jump Break:</b><br />
Pertama, buat dulu kalimat yang mau ditampilkan sobat.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-TMRLQWp_Xi0/T9Ri6m__5iI/AAAAAAAAALo/rEmTY1qpvC0/s1600/erghsrt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" src="http://4.bp.blogspot.com/-TMRLQWp_Xi0/T9Ri6m__5iI/AAAAAAAAALo/rEmTY1qpvC0/s1600/erghsrt.png" /></a></div>
<br />
setelah itu, klik tombol <i>Insert Jump Break</i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-rrLMyNer5G0/T86WFRXzpOI/AAAAAAAAALI/5AtZFIyQxd4/s1600/yjdy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" src="http://2.bp.blogspot.com/-rrLMyNer5G0/T86WFRXzpOI/AAAAAAAAALI/5AtZFIyQxd4/s1600/yjdy.png" /></a></div>
<br />
dan hasilnya akan jadi gini:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-fXsHI1zLsjA/T9RjOPwbW6I/AAAAAAAAALw/72TqLazUTco/s1600/fhfhgfh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" src="http://3.bp.blogspot.com/-fXsHI1zLsjA/T9RjOPwbW6I/AAAAAAAAALw/72TqLazUTco/s1600/fhfhgfh.png" /></a></div>
<br />
masukkan kalimat yang tidak ditampilkan<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-cJzhecBx4zY/T9RjdtgBxLI/AAAAAAAAAL4/VntQjkWCAF4/s1600/rgt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" src="http://4.bp.blogspot.com/-cJzhecBx4zY/T9RjdtgBxLI/AAAAAAAAAL4/VntQjkWCAF4/s1600/rgt.png" /></a></div>
<br />
siap deh. postingnya tinggal dipublikasikan.<br />
<br />
kata <i>Baca Selengkapnya </i>dapat diedit dari <i>Tata Letak</i> kemudian klik <i>edit</i> di <b>posting blog</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-V1iayHVZ11k/T9RmnJMla0I/AAAAAAAAAMI/TaRrkE0Tv4s/s1600/Image+10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" height="148" src="http://2.bp.blogspot.com/-V1iayHVZ11k/T9RmnJMla0I/AAAAAAAAAMI/TaRrkE0Tv4s/s400/Image+10.png" width="400" /></a></div>
<br />
Siip.. salam Blogger..Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0tag:blogger.com,1999:blog-4817490585710660212.post-77350772219025680392012-06-05T06:00:00.000+07:002012-09-30T22:39:45.142+07:00Membuat Search Box Apple.com<div class="separator" style="clear: both; text-align: center;">
<a href="http://istanablogger.blogspot.com/2012/06/membuat-search-box-applecom.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-I99rKph5V78/T8tw5joLEjI/AAAAAAAAAKE/3v_tIfiMYQE/s1600/hdh.png" /></a></div>
Diantara sobat bila pernah masuk ke situs web <a href="http://www.apple.com/" target="_blank">Apple.com</a> pasti pernah melihat kotak pencarian yang dapat melebar bila diklik. Inilah Search Box Apple.com yang sudah diberikan efek CSS3. Tapi banyak browser yang tak dapat menampilkan Search Box ini karena belum kompatibel dengan CSS3, seperti Internet Explorer dan lainnya..<br />
<a name='more'></a>Yuupp..artikel ini akan mengajarkan cara membuat Search Box Apple dari <a href="http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/" target="_blank">Bloggermint.com</a>. Search Box ini lebih lebar daripada yang aslinya di Apple.com.<br />
Cara memasukkan Search Box Apple:<br />
Masukkan dulu kode berikut ini kedalam blogmu dengan Cara Memasukkan Gadget:<br />
<textarea id="text-to-copy"><form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form></textarea>
<br />
<br />
Dan Berikut ini adalah CSS untuk 3 style yang berbeda:<br />
<b>1. Pada latar belakang gelap</b>:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.bloggermint.com/wp-content/uploads/2011/06/search-box-dark.jpg?d9c344" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.bloggermint.com/wp-content/uploads/2011/06/search-box-dark.jpg?d9c344" /></a></div>
<textarea id="text-to-copy">#search {
}
#search input[type="text"] {
background: url(search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}</textarea><br />
<br />
<b>2. Pada latar belakang terang:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.bloggermint.com/wp-content/uploads/2011/06/search-box-white1.jpg?d9c344" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.bloggermint.com/wp-content/uploads/2011/06/search-box-white1.jpg?d9c344" /></a></div>
<textarea id="text-to-copy">#search {
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}</textarea>
<br />
<br />
<b>3. Via Apple.com</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.bloggermint.com/wp-content/uploads/2011/06/search-apple-like.jpg?d9c344" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.bloggermint.com/wp-content/uploads/2011/06/search-apple-like.jpg?d9c344" /></a></div>
<textarea id="text-to-copy">#search {
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}</textarea><br />
<br />
Lihat juga ketiga <a href="http://www.bloggermint.com/demos/css3searchbox/" target="_blank">contohnya</a> atau <a href="http://www.box.net/shared/0cdm5obx7a" target="_blank">download</a> filenya.<br />
<div style="text-align: right;">
Ditulis oleh: <a href="http://twitter.com/rethnaraj" target="_blank">Rethnaraj Rambabu</a> di <a href="http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/" target="_blank">Bloggermint</a>.<br />
Link singkat keartikel ini: http://bit.ly/KsoBsE</div>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0tag:blogger.com,1999:blog-4817490585710660212.post-26626543287297961392012-06-04T06:00:00.000+07:002012-09-22T22:22:35.240+07:00Gadget Color Chooser<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="http://1.bp.blogspot.com/-f2_wpTCNaEg/T8tBCwaKtxI/AAAAAAAAAJs/ON0xHUH9I5E/s1600/ytjtujyj.png" /></div>
Gadget Color Chooser (Penentu Kode Warna) | oleh: <a href="http://abowman.com/google-modules/color-chooser/" target="_blank">aBowman</a><br />
Gadget hasil buatan Adam Bowman ini betul-betul kecil dan simpel untuk mencari kode warna Html. Kamu hanya tinggal klik dan geser saja. Kode warna ini hanya tinggal ditambahkan tanda <b style="background-color: #ffe599;">#</b> pada awal kodenya. Juga tersedia Converter warna RGB to Hex dan Hex to RGB.<br />
<a name='more'></a>Contoh Gadget Colour Chooser:<br />
<center><object data="http://colorchoosergadget.googlecode.com/svn/trunk/colorChooser.swf?" height="205" style="outline: medium none;" type="application/x-shockwave-flash" width="280"><param name="movie" value="abowman.com/google-modules/color-chooser/google-modules/color-chooser/comment-page-3/wp-content/plugins/kml_flashembed_wp_131/lib/expressinstall.swf?">
</param>
<param name="AllowScriptAccess" value="always">
</param>
<param name="wmode" value="opaque">
</param>
<param name="bgcolor" value="FFFFFF"/>
</object></center>
<br />
Untuk menghargai pemilik Gadget ini. Gadget ini sudah dibuat untuk tidak ditaruhkan di blog.<br />
Tapi!, Gadget ini tersedia untuk iGoogle.<br />
<a href="http://google.com/ig/add?moduleurl=http://colorchoosergadget.googlecode.com/svn/trunk/colorChooser.xml" target="_blank">Tambahkan Gadget ke iGoogle Sekarang!</a><br />
<div style="color: #666666; text-align: right;">
url singkat keartikel ini: http://bit.ly/LfReCZ </div>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com1tag:blogger.com,1999:blog-4817490585710660212.post-80452041735551522682012-05-31T07:20:00.002+07:002012-10-09T20:19:49.108+07:00Cara Menambahkan Widget<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #444444;">
Widget selalu dipakai untuk menghiasi blog. Widget juga punya nama lain yaitu: Plugin & Gadget. Biasanya Widget sudah disediakan Blogger didalamnya. Tapi ada juga Widget yang memakai kode Html/Javascript. Dan biasanya ada banyak website yang menyediakan kode tersebut, Misalnya: facebook yang menyediakan Widget <i>Facebook Like Button</i>. yup, kalau ada yang penasaran cara menambahkan kode-kode ini. Berikut ini saya memberitahu cara menambahkan Widget:</div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
1. Log in ke <a href="http://www.blogger.com/" rel="nofollow" target="_blank">blogger</a>, dan klik pada <b>"Tata Letak"</b>.</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: left;">
<img alt="contoh dari tampilan menu tata letak - cara menambah widget" border="0" height="233" src="http://4.bp.blogspot.com/-cTcWM0x_eo0/T8iECb-pdtI/AAAAAAAAAHo/TDzKBPmq0Zs/s400/rthtrrtg.png" title="contoh dari tampilan menu tata letak" width="400" /></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
3. Klik pada salah satu link <b>"Tambah Gadget"</b>. Sebuah menu pop-up akan muncul.</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: left;">
<img alt="tampilan menu tata letak - cara menambahkan widget" border="0" height="178" src="http://4.bp.blogspot.com/-gamfH1xeJCc/T8iEF4VnRlI/AAAAAAAAAHw/Vu2Dnc3FQv8/s400/rtgebhetgherbh.png" title="Tampilan menu tata letak" width="400" /></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
4. Pada pop-up yang muncul. Scroll ke bawah dan klik <b>"Html/Javascript"</b>.</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: left;">
<img alt="menu pop-up menambahkan gadget - cara menambah widget" border="0" height="400" src="http://4.bp.blogspot.com/-jWeMWkX9BDg/T8iEN7T5YpI/AAAAAAAAAH4/HOt4YKKYsH8/s400/fegvtgv.png" title="menu pop-up yang muncul" width="345" /></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
5. Masukkan(pastekan) kode ke kotak besar dibawah, judulnya bisa ditambahkan sendiri atau dikosongkan.</div>
<div class="separator" style="clear: both; color: #444444; text-align: left;">
<img alt="pop-up menambahkan kode html - cara menambah widget" border="0" height="360" src="http://2.bp.blogspot.com/-J0pOxXSyvOo/T8iF3bXxy8I/AAAAAAAAAIA/ArF-O0xdIqs/s400/Image+5.png" title="contoh pop-up menambahkan kode html" width="400" /></div>
<div style="color: #444444;">
<br /></div>
<div style="text-align: left;">
5. Klik <b>"Simpan"</b></div>
</div>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0tag:blogger.com,1999:blog-4817490585710660212.post-10972486177109513562012-05-30T22:18:00.000+07:002012-09-08T17:47:13.489+07:00Cara Membuat Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #444444;">
Menurut saya, Blog adalah tempat untuk mengekspresikan diri kepada semua
orang. Blog itu gratis dan ada banyak macam, tapi yang sering digunakan
yaitu: Blogger dan Wordpress. Blog pilihan saya adalah Blogger. Berikut
ini akan saya ajarin beberapa cara mudah untuk membuat blog dengan
Blogger:</div>
<a name='more'></a><div style="color: #444444;">
1. Buka halaman <a href="http://www.blogger.com/" target="_blank">Blogger.com</a> kemudian klik 'memulai'. Untuk sobat yang sudah punya akun Google
tinggal log-in pada kotak disebelah kanan dan ikuti
langkah ke-3.</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
<a href="http://3.bp.blogspot.com/-0QyS4iCu9vk/T8hzMIHFAYI/AAAAAAAAAHE/rixDfma4_m8/s1600/gfhey.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="http://3.bp.blogspot.com/-0QyS4iCu9vk/T8hzMIHFAYI/AAAAAAAAAHE/rixDfma4_m8/s320/gfhey.png" width="320" /></a></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
2. Isi data-data sobat dengan lengkap pada halaman berikutnya dan ceklis "Saya menerima Persyaratan dan Layanan",
kemudian klik "Lanjutkan"</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
<a href="http://4.bp.blogspot.com/-S1-bqrt3taY/T8hzS3mpp4I/AAAAAAAAAHM/bzofyrYPv2g/s1600/imagefghb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="http://4.bp.blogspot.com/-S1-bqrt3taY/T8hzS3mpp4I/AAAAAAAAAHM/bzofyrYPv2g/s320/imagefghb.png" width="320" /></a></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
3. klik "Blog Baru", masukkan judul blog dan alamat blog sobat. Alamat
Blog tidak bisa diberikan spasi dan tanda tanda lainnya selain tanda
kurang (-). kemudian klik "Buat Blog!"</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #444444; text-align: center;">
<a href="http://2.bp.blogspot.com/-Boj93aQbBE8/T8hzaS1F3dI/AAAAAAAAAHU/Uky0zu7K1W8/s1600/ththh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="http://2.bp.blogspot.com/-Boj93aQbBE8/T8hzaS1F3dI/AAAAAAAAAHU/Uky0zu7K1W8/s320/ththh.png" width="320" /></a></div>
<div style="color: #444444;">
<br /></div>
<div style="color: #444444;">
Siipp.. kamu sekarang bisa mulai nge-post diblog sebagai seorang blogger (sebutan orang nge-blog)</div>
<div style="color: #444444;">
<br /></div>
<div style="color: #666666; text-align: right;">
url singkat keartikel ini: http://bit.ly/Mms9x3</div>
</div>Anonymoushttp://www.blogger.com/profile/09881575702265364633noreply@blogger.com0