tag:blogger.com,1999:blog-11175687927500155192024-03-06T05:55:05.180+07:00X4-tutorial.blogspot.comTutorial Blogger OnlineAdminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.comBlogger72125tag:blogger.com,1999:blog-1117568792750015519.post-70804526915594921512011-08-02T21:45:00.000+07:002011-08-02T21:45:38.022+07:00Ubah ekstensi file atau type file Windows XP & Win 7Ubah ekstensi file:<br />
1. Windows XP<br />
Buka Windows Explorer lalu klik pada menu Tools pada menu jendela folder dan pilih Folder Options. Klik pada tab View, kemudian hilangkan centang di kotak centang ” Hide extensions for known file types”. Klik OK.<br />
2. Win 7<br />
Buka Windows Explorer lalu klik pada menu Organize > Folder and search options > Tab View > dan hilangkan centang di kotak centang ” Hide extensions for known file types”. Klik OK.<br />
<br />
Klu sudah, sekarang cara merubah ekstensi dengan me-rename file misalnya dari ‘namafile.rar’ menjadi ‘namafile.avi.001′Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-78945272332398517602011-03-28T13:15:00.004+07:002011-03-28T13:18:13.173+07:00daftar isi 0-9 a-z<div id="toclink"><div style="text-align: center;"><span ><b><a href="javascript:showToc();">LIHAT DAFTAR ISI</a></b></span></div></div><script src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"><br />
</script><br /><br />
<script src="http://go-facebooker.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"><br />
</script><br /><br />
<div style="text-align: left;"><div id="toc"></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-47306364626036855642011-03-22T12:02:00.002+07:002011-03-22T12:02:50.157+07:00Cara menampilkan judul posting tanpa isi (halaman) postingKetika melakukan pencarian atau membuka isi label (kategory) di blog saya <br />
pasti akan melihat hasil tampilan berupa link judul <br />
posting beserta tanggal tanpa menampilkan isi posting sama sekali, tentu <br />
saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika berselancar di blog <br />
kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya <br />
ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu <br />
yang lama sampai halaman benar-benar terbuka sempurna.<br />
<br />
<div align="justify">Untuk mengatasi masalah diatas ada baiknya kita hanya <br />
menampilkan judul posting beserta tanggal posting saja, selain mempermudah, <br />
tentu saja loading page kita akan 50x lebih cepat dari biasanya ketika membuka <br />
halaman label. </div><span class="fullpost"><br />
<br />
</span><br />
<div align="justify"><br />
</div><div align="justify"><span class="fullpost">Lihat contoh gambar yang hanya menampilkan judul posting dan tanggal:</span></div><span class="fullpost"><br />
<br />
<a href="http://4.bp.blogspot.com/_C6KkooKXCEw/R2WCzJywX6I/AAAAAAAABbU/tX35UghR4CQ/s1600-h/label.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br />
<img alt="" border="0" height="320" id="BLOGGER_PHOTO_ID_5144661964654403490" src="http://4.bp.blogspot.com/_C6KkooKXCEw/R2WCzJywX6I/AAAAAAAABbU/tX35UghR4CQ/s320/label.gif" style="cursor: hand; cursor: pointer;" width="289" /></a><br />
<br />
<br />
<br />
<u><b>Pengen tau cara buatnya ikuti langkah dibawah ini:</b></u><br />
<br />
<b>Pertama :</b><br />
<br />
<div align="justify">Buka <b>Template</b> -> <b>Edit HTML -> </b>Jangan lupa lakukan backup <br />
template :) -> <span id="fullpost">kemudian beri tanda cek pada <b>'Expand <br />
Widget Templates'</b></span></div><br />
<br />
<b>Kedua :</b><br />
<br />
Lihat kode dibawah ini:<br />
<span id="fullpost"><br />
<pre class="code"><span style="color: green;"> <!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if></span></pre><pre class="code"><span style="color: red;"><b><b:include data='post' name='post'/></b>
</span>
</pre></span><br />
<br />
Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna <br />
merah diatas dengan kode dibawah ini :<br />
<br />
<br />
<span id="fullpost"><br />
<pre class="code"><span style="color: red;"> <b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if></span></pre><br />
</span><br />
<br />
<br />
<b>Ketiga :<br />
<br />
</b><br />
<br />
Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)<br />
<br />
<br />
<br />
</span>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-92207115475805560062011-03-15T13:00:00.000+07:002011-03-15T13:00:16.363+07:00share facebook di blogSelain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu <span style="font-weight: bold;">Facebook share</span>.<br />
<br />
Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook. <span style="font-weight: bold;"><br />
<br />
Lalu apa bedanya antara Facebook like dan Facebook share?</span><br />
<br />
Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.<br />
<span id="fullpost"><br />
Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.<br />
<br />
Agar lebih jelas perhatikan screenshot berikut:<br />
<br />
<span style="font-weight: bold;">Contoh tampilan posting yang dibagikan melalui facebook like</span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAtpck1sX6R6gKnCmkdPmaw47hnL_hswKk_GzTyDF3oz51SfvI2qkyJg6I8CHD8owF-1t1A1B8NumKX88Zxiq0axHP-ggeVv8XvxwLbOkoy7ONEbY9Nd3mLF_mN4gKXo-L6HigoA29lgrv/s1600/facebook-like.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="facebook like" border="0" id="BLOGGER_PHOTO_ID_5505993600222673458" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAtpck1sX6R6gKnCmkdPmaw47hnL_hswKk_GzTyDF3oz51SfvI2qkyJg6I8CHD8owF-1t1A1B8NumKX88Zxiq0axHP-ggeVv8XvxwLbOkoy7ONEbY9Nd3mLF_mN4gKXo-L6HigoA29lgrv/s400/facebook-like.gif" style="cursor: pointer; display: block; height: 133px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<span style="font-weight: bold;">Contoh tampilan posting yang dibagikan melalui facebook share</span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Z4mhL1Vx20qAcohWifkart-hoSM48gvjofuAVg-Mt9iH8tXauRkGzwQdZOcfrZeY3ix3uIhE85S4AaG0iWnosA2f0U3iKf2B-OTBh5Ia-nmwaUdhAVUdQlCEZKPZR7801rT-NvAwNAak/s1600/facebook-share.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="facebook share" border="0" id="BLOGGER_PHOTO_ID_5505993602846761938" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Z4mhL1Vx20qAcohWifkart-hoSM48gvjofuAVg-Mt9iH8tXauRkGzwQdZOcfrZeY3ix3uIhE85S4AaG0iWnosA2f0U3iKf2B-OTBh5Ia-nmwaUdhAVUdQlCEZKPZR7801rT-NvAwNAak/s400/facebook-share.gif" style="cursor: pointer; display: block; height: 172px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca <a href="http://www.hermanblog.com/2010/07/memasang-tombol-like-facebook-di-blog.html" target="new">disini</a>.<br />
<br />
1. Buka blogger. Masuk ke menu <span style="font-weight: bold;">Design->Edit HTML</span><br />
<br />
2. Beri centang pada 'Expand widget templates'<br />
<br />
3. Cari kode <span style="color: #cc0000;"><data:post.body/></span><br />
<br />
4. Kalau anda menemukan dua kode <span style="color: #cc0000;"><data:post.body/></span> maka pilih yang pertama<br />
<br />
5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <span style="color: #cc0000;"><data:post.body/></span> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <span style="color: #cc0000;"><data:post.body/></span> jika anda ingin memasang diatas postingan.<br />
<br />
<span style="font-weight: bold;">Tombol Fshare tanpa counter</span><br />
<br />
<a href="" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="tombol fshare tanpa counter" border="0" id="BLOGGER_PHOTO_ID_5506008657313836738" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYr8X7Z1FPFSEtuu5PZ6uiSeJ3LdygS14cq-EJNA5O9KUTumiPZy-AgVC-u_-hUiAmNtvf00w3eek3fgxlxjLlBoovWZ15zgk25x6TC-z_pmTm73bdf8olwv2LSZtgyHJ8bjKbhh6IJ7D7/s400/fshare-button-1.gif" style="float: left; height: 21px; margin: 0pt 10px 10px 0pt; width: 62px;" /></a><br />
<br />
Kode:</span><br />
<blockquote style="color: #3333ff;"><span id="fullpost"><a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></span></blockquote><span id="fullpost"><br />
<br />
<span style="font-weight: bold;">Tombol Fshare dengan counter diatas</span><br />
<br />
<a href="" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="tombol fshare dengan counter diatas" border="0" id="BLOGGER_PHOTO_ID_5506008661049325906" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZF7Cu4_9kPkMopSHYtTgvCOImn_nZpxjxjcGSsKUEtXZfWyE0SJf8mrW6lBGH0AReYhM7OXG8epKYNsJFSTkG-WfIgzkB9mOW6uorcS6UhT2VsB5Ivdyf6dtuYILPAIZwr_MJpmtRR1n/s400/fshare-button-2.gif" style="float: left; height: 65px; margin: 0pt 10px 10px 0pt; width: 63px;" /></a><br />
<br />
<br />
<br />
<br />
Kode:<br />
<blockquote style="color: #3333ff;"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></blockquote><br />
<span style="font-weight: bold;">Tombol Fshare dengan counter disamping</span><br />
<br />
<a href="" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="tombol fshare dengan counter disamping" border="0" id="BLOGGER_PHOTO_ID_5506008665215948050" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutLaZyR4W2fcGz9n5x-Mne2Mnhj1NvDbFp8B1Dwn3jhDQTRJ1qIZiAkg8m8RLN85Te5BitMAwbs7CjGm9MCby81xBO5-ZHEvuqPb_XqwCzq8jWR36X-rcuExNLeznDGAOPuZJY3JaIcv5/s400/fshare-button-3.gif" style="float: left; height: 21px; margin: 0pt 10px 10px 0pt; width: 103px;" /></a><br />
<br />
Kode:<br />
<blockquote style="color: #3333ff;"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></blockquote><br />
6. Jika sudah simpan template anda dan lihat hasilnya.</span><br />
<br />
<div class="bottomads"><script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-86248282115114601332011-03-03T13:24:00.000+07:002011-03-03T13:24:12.642+07:00Menu horizontal bercabangPhew... bingung juga ngasih namanya... but anni3 udah capek banget bikin yang satu ini...<br />
<br />
Jadi yang dimaksud dengan "ini" adalah Menu anni3 yang sekarang... asal menu dari <a href="http://www.cssmenubuilder.com/build-horizontal-menu" target="_blank">CSS Menu Builder</a> dan terinspirasi dari <a href="http://www.o-om.com/2008/07/horizontal-menu-navigasi.html" target="_blank">horizontal menu punya o-om</a>. tapi yang ini ada fixed dan ada dropdownnya... (umm kalo di IE kayaknya rada2 ancur deh! ada yang mau betulin??)<br />
<br />
Mau tau caranya??? ini dia...<img alt=":sinchan" class="emoticon" height="" src="http://img148.imageshack.us/img148/5968/sinchanwp3.gif" title=":sinchan" width="" /><br />
<span class="fullpost"><br />
</span><br />
<ol><li><span class="fullpost">masuk ke akun <a href="http://www.blogger.com/" target="_blank">blogger</a></span></li>
<li><span class="fullpost">masuk ke <span style="font-weight: bold;">Tata Letak --> Edit HTML</span></span></li>
<li><span class="fullpost">Masukkan CSS ini... (atau gampangnya di atas kode <b><span style="color: red;">]]></b:skin></span></b><br />
<div class="alert">/* @Nn!3 Navbar */<br />
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;<br />
position:fixed;_position:absolute;top:0px; clip:inherit;<br />
opacity: 0.85; filter: alpha(opacity: 85);}<br />
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}<br />
#menu ul{padding:0; margin:0;}<br />
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}<br />
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}<br />
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}<br />
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}<br />
#menu ul li ul {display:none;}<br />
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;<br />
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}<br />
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}<br />
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}<br />
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}<br />
<br />
/* Search */<br />
#search{float:right; height:30px; margin:0; width:100%; padding:2px;}<br />
.buttonreset {color : #FfffFF; background-color: #CE0303; border: 2px outset #FF0000;}<br />
.buttonsubmit {color : #FfffFF; background-color: #CE0303; border: 2px outset #FF0000;}<br />
.textinput {color : #FfffFF; background-color: #7C01A4; border: 2px inset #C000FF;}</div></span></li>
<span class="fullpost">
<li>trus masukkan kode ini di paliiiing bawah sebelum kode <span style="color: red;"><b></body></b></span><br />
<div class="alert"><div id='menu'><br />
<ul><br />
<li><a class='active' href='/'><span style="color: red;">Depan</span></a></li><br />
<li><span style="color: red;"><a href='#'>Menu 1</a></span></li><br />
<li><span style="color: red;"><a href='#'>Menu 2</span></a><br />
<ul><br />
<li><span style="color: red;"><a href='#'>Menu 2.1</a></span></li><br />
<li><span style="color: red;"><a href='#'>Menu 2.2</a></span></li><br />
</ul></li><br />
<li><span style="color: red;">dan lain lain</span></li><br />
</ul><br />
<div id='menu-cari'><br />
<form action='/search' method='get'><br />
<div><input class='textinput' id='s' name='q' onblur='if (this.value == "") {this.value = "Cari Posting di Sini";}' onfocus='if (this.value == "Cari Posting di Sini") {this.value = "";}' size='25' type='text' value='Cari Posting di Sini'/><br />
<input class='buttonsubmit' type='submit' value='Go'/><br />
</div><br />
</form><br />
</div><br />
</div></div><br />
<blockquote>Penjelasan: yang warnanya <span style="color: red;">merah</span> itu yang harus diperhatikan...<br />
<span style="color: red;">Menu 1, Menu 2</span> adalah menu utamanya... trus <span style="color: red;">Menu 2.1, Menu 2.2</span> adalah sub-menu dari <span style="color: red;">Menu 2</span>... <i>cobalah tuk mengerti</i></blockquote></li>
<li>Dan yang terakhir tapi paling penting! klik <b>Simpan</b></li>
</span></ol><span class="fullpost"><br />
<b>Jangan Lupa kirim komentar soalnya komentar di sini masih dikit banget!!!</b></span>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-55324747612254052912011-03-03T13:19:00.000+07:002011-03-03T13:19:00.870+07:00Menu horizontal bercabangMenu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang <a href="http://artikelkomputerku.blogspot.com/2009/06/membuat-menu-navigasi-horizontal.html" target="_blank">membuat menu navigasi horizontal sederhana</a>. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya <a href="http://www.anni3access.co.cc/2008/11/fixed-dropdown-horizontal-menu-navigasi.html">anni</a> (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:<br />
<br />
<a href="http://artikelkomputerku.blogspot.com/2009/06/membuat-menu-navigasi-horizontal_08.html"><br />
<br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBF-1cbwAQFzrzCCJXQdcY0E7rBSxSQ9s3Ga-tMpUI8KrmXG0FLk_y6LQpymsmccasJwc0V1cjf5ptA3UTHV6Of3rc-7g-eG8-hEtrt18OYjqprsSDo5abtsv23CKo0Gh1OgGTG-Qgeo/s1600-h/menu+navigasi+nested+baru+2.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="menu horisontal" border="0" id="BLOGGER_PHOTO_ID_5394489426994186818" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBF-1cbwAQFzrzCCJXQdcY0E7rBSxSQ9s3Ga-tMpUI8KrmXG0FLk_y6LQpymsmccasJwc0V1cjf5ptA3UTHV6Of3rc-7g-eG8-hEtrt18OYjqprsSDo5abtsv23CKo0Gh1OgGTG-Qgeo/s320/menu+navigasi+nested+baru+2.jpg" style="cursor: pointer; display: block; height: 175px; margin: 0px auto 10px; text-align: center; width: 307px;" /></a><br />
<br />
<br />
<br />
Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html lebih mudah ditelusuri oleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.<br />
<br />
<br />
<br />
Untuk membuatnya bisa lakukan langkah berikut:<br />
<br />
<br />
<br />
<br />
1. Login ke account blogger anda<br />
<br />
Pilih Dashboard -> Tataletak -> Edit HTML<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUArr0UjlN9GqzNAMBVOv0WhbeBVKOmhTZjh8nqH6EyhrFfLjuhfqJY09mPhmvZVvbfLXZbQzZ1I_vZfmfMfu-WWawNUpXKwsLxFj7XUBko5c_I1s5-xTr2hrOhPOyR31a1XyWJYC3390/s1600-h/menu+horisontal+nested+xx.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5355225684912099602" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUArr0UjlN9GqzNAMBVOv0WhbeBVKOmhTZjh8nqH6EyhrFfLjuhfqJY09mPhmvZVvbfLXZbQzZ1I_vZfmfMfu-WWawNUpXKwsLxFj7XUBko5c_I1s5-xTr2hrOhPOyR31a1XyWJYC3390/s320/menu+horisontal+nested+xx.jpg" style="cursor: pointer; display: block; height: 214px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a>cari kode berikut:<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="background-color: black; border: 1px solid rgb(0, 0, 0); display: block; padding: 15px; text-align: left;"><br />
<br />
]]></b:skin><br />
<br />
<br />
<br />
<br />
<br />
<br />
</div><br />
<br />
<br />
<br />
2. Di bagian atas kode tersebut masukkan kode berikut<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="background-color: black; border: 1px solid rgb(0, 0, 0); display: block; padding: 15px; text-align: left;"><br />
<br />
/* Navbar */<br />
<br />
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;<br />
<br />
opacity: 0.99; filter: alpha(opacity: 98);}<br />
<br />
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}<br />
<br />
<br />
#menu ul{padding:0; margin:0;}<br />
<br />
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}<br />
<br />
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}<br />
<br />
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}<br />
<br />
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}<br />
<br />
#menu ul li ul {display:none;}<br />
<br />
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;<br />
<br />
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}<br />
<br />
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}<br />
<br />
<br />
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}<br />
<br />
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}<br />
<br />
.status-msg-wrap{<br />
<br />
display:none;<br />
<br />
}</div><br />
<br />
<br />
<br />
4. Klik tombol "Simpan Template"<br />
<br />
<br />
<br />
5. Buka halaman "Tata Letak -> Elemen Halaman"<br />
<br />
<br />
<br />
<br />
6. Pada Elemen header , klik " Tambah Gadget"<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYUoV6RPv0AynjYBjm5zaEjt5eeq7viMz3eAvNXb53jpgqj1rtXFavoWfRLM3Rv2jJcdPEuxK2fjL6RmlSZFZhPmaOL5F3bE1obVtVFDRgntRLetbDnakSuFpqxyWDik0xj351hLT7job/s1600-h/menu+navigasi+horisontal+02b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5343826823141695538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYUoV6RPv0AynjYBjm5zaEjt5eeq7viMz3eAvNXb53jpgqj1rtXFavoWfRLM3Rv2jJcdPEuxK2fjL6RmlSZFZhPmaOL5F3bE1obVtVFDRgntRLetbDnakSuFpqxyWDik0xj351hLT7job/s400/menu+navigasi+horisontal+02b.jpg" style="cursor: pointer; display: block; height: 38px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang <a href="http://artikelkomputerku.blogspot.com/2009/05/menambah-slot-elemen-gadget-di-header.html">cara menampilkan "tambah gadget" di header</a><br />
<br />
<br />
<br />
<br />
<br />
7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtX7ju3noY62AQzKjnglWcf8zWtk3iLp4QMawrr-stc9n-iUTkOEwUNytPrCLzK5ogjtO3iMX92VsInBQVxRUMMqHf8V3OqpZ2kuFSsolFnsHgig5q-a6L_h4drmGrfQ4zPIj4E-QtFuu/s1600-h/menu+navigasi+horisontal+03b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5343828355039355810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtX7ju3noY62AQzKjnglWcf8zWtk3iLp4QMawrr-stc9n-iUTkOEwUNytPrCLzK5ogjtO3iMX92VsInBQVxRUMMqHf8V3OqpZ2kuFSsolFnsHgig5q-a6L_h4drmGrfQ4zPIj4E-QtFuu/s400/menu+navigasi+horisontal+03b.jpg" style="cursor: pointer; display: block; height: 182px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
8. pada kotak dialog html/javascrpit masukkan kode html berikut:<br />
<br />
<br />
<br />
<br />
<br />
<div style="background-color: black; border: 1px solid rgb(0, 0, 0); display: block; padding: 15px; text-align: left;"><br />
<br />
<div id="menu"><br />
<br />
<ul><br />
<br />
<li><a class="active" href="/"> Home</a></li><br />
<br />
<li><a href="#">Menu 1</a></li><br />
<br />
<br />
<li><a href="#">Menu 2</a><br />
<br />
<ul><br />
<br />
<li><a href="#">Menu 2.1</a></li><br />
<br />
<li><a href="#">Menu 2.2</a></li><br />
<br />
<br />
</ul></li><br />
<br />
<li><a href="#">Menu 3</a><br />
<br />
<ul><br />
<br />
<li><a href="#">Menu 3.1</a></li><br />
<br />
<li><a href="#">Menu 3.2</a></li><br />
<br />
<br />
<li><a href="#">Menu 3.3</a></li><br />
<br />
<li><a href="#">Menu 3.4</a></li><br />
<br />
</ul></li><br />
<br />
<li><a href="#">Menu 4</a></li><br />
<br />
<br />
<ul><br />
<br />
</ul><br />
<br />
</ul></div><br />
<br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<br />
catatan:<br />
<br />
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda<br />
<br />
misalnya:<br />
<br />
<br />
http://kalongkalong.blogspot.com<br />
<br />
atau<br />
<br />
http://artikelkomputerku.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.html<br />
<br />
http://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html<br />
<br />
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.<br />
<br />
9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya <br />
<br />
Contoh lainnya bisa dilihat disini <a href="http://mycomputerdummies.blogspot.com/" target="_blank">blog dummy</a> (template denim)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-16460927675987270872011-01-05T15:00:00.000+07:002011-01-05T15:00:16.338+07:00cara membuat iklan melayang<style type="text/css"><br />
#gb{<br />
position:fixed;<br />
top:10px;<br />
z-index:+1000;<br />
}<br />
* html #gb{position:relative;}<br />
<br />
<br />
.gbcontent{<br />
float:right;<br />
border:2px solid #00ff00;<br />
background:#000000;<br />
padding:10px;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
function showHideGB(){<br />
var gb = document.getElementById("gb");<br />
var w = gb.offsetWidth;<br />
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br />
gb.opened = !gb.opened;<br />
}<br />
function moveGB(x0, xf){<br />
var gb = document.getElementById("gb");<br />
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />
var dir = xf>x0 ? 1 : -1;<br />
var x = x0 + dx * dir;<br />
gb.style.top = x.toString() + "px";<br />
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br />
}<br />
</script><br />
<br />
<div id="gb"><br />
<br />
<div class="gbtab" onclick="showHideGB()"> </div><br />
<br />
<div class="gbcontent"><br />
<br />
<div style="text-align:right"><br />
<a href="javascript:showHideGB()"><br />
.:<img src="http://lh6.ggpht.com/_RVpTV2JOOxA/S8X3Rh5G2OI/AAAAAAAACxI/0zISG8UL24A/tutup_iklan_t4belajarblogger.png" title="kalau muncul, klik lagi" alt="tutup" />:.<br />
</a><br />
</div><br />
<center><br />
<br />
<span class="Apple-style-span" style="color: red;">kode iklan atau skript</span><br />
<br />
</center><br />
<br />
<script type="text/javascript"><br />
var gb = document.getElementById("gb");<br />
gb.style.center = (30-gb.offsetWidth).toString() + "px";<br />
</script></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-82462891567913225042010-09-06T13:34:00.000+07:002010-09-06T13:34:25.414+07:00Jika anda perhatikan, ada yang baru di blog ini. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7PjzOFS3FUAr5e3q0_i6F8Gmzv2sL_ujQwy7kfr84kv8Dq0DNxNuGMRe417iHRPFsJI5GqXgHP9SIc_iG2xDQRRzRR8eLR7zPIkzcpy_JJfvfR0O00CVbCvnpnuwSCcekXCroJIJITJG/s1600-h/paging.jpg" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5297051608859697234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7PjzOFS3FUAr5e3q0_i6F8Gmzv2sL_ujQwy7kfr84kv8Dq0DNxNuGMRe417iHRPFsJI5GqXgHP9SIc_iG2xDQRRzRR8eLR7zPIkzcpy_JJfvfR0O00CVbCvnpnuwSCcekXCroJIJITJG/s320/paging.jpg" style="cursor: pointer; float: right; height: 77px; margin: 0pt 0pt 10px 10px; width: 320px;" /></a>Yaitu <span style="font-weight: bold;">navigasi halaman bernomor</span> (letaknya di bagian bawah) atau <span style="font-weight: bold;">paging</span> seperti banyak terdapat di blog-blog berbasis wordpress. Selain blog tampak lebih cantik seperti Nadia Saphira, adanya navigasi halaman bernomor membuat blog lebih user friendly. Bagaimana <span style="font-weight: bold;">cara membuat paging</span>? 1. Login ke blog anda.<br />
2. Klik '<span style="font-weight: bold;">Layout/Tata Letak</span>'<br />
3. Klik '<span style="font-weight: bold;">Tambah Widget</span>'<br />
4. Pilih '<span style="font-weight: bold;">HTML/Java Script</span>'.<br />
5. Masukkan kode HTML di bawah ini. <br />
<br />
<br />
&lt;style&gt;<br />
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;<br />
}<br />
.showpageArea a {border: 1px solid #505050;<br />
color: #000000;font-weight:normal;<br />
padding: 3px 6px !important;<br />
padding: 1px 4px ;margin:0px 4px;<br />
text-decoration: none;<br />
}<br />
.showpageArea a:hover {<br />
font-size:11px;<br />
border: 1px solid #333;<br />
color: #000000;<br />
background-color: #FFFFFF;<br />
}<br />
<br />
.showpageNum a {border: 1px solid #505050;<br />
color: #000000;font-weight:normal;<br />
padding: 3px 6px !important;<br />
padding: 1px 4px ;margin:0px 4px;<br />
text-decoration: none;<br />
<br />
}<br />
.showpageNum a:hover {<br />
font-size:11px;<br />
border: 1px solid #333;<br />
color: #000000;<br />
background-color: #FFFFFF;<br />
<br />
}<br />
.showpagePoint {font-size:11px;<br />
padding: 2px 4px 2px 4px;<br />
margin: 2px;<br />
font-weight: bold;<br />
border: 1px solid #333;<br />
color: #fff;<br />
background-color: #000000;<br />
<br />
<br />
}<br />
<br />
.showpage a:hover {font-size:11px;<br />
border: 1px solid #333;<br />
color: #000000;<br />
background-color: #FFFFFF;<br />
<br />
}<br />
.showpageNum a:link,.showpage a:link {<br />
font-size:11px;<br />
padding: 2px 4px 2px 4px;<br />
margin: 2px;<br />
text-decoration: none;<br />
border: 1px solid #0066cc;<br />
color: #0066cc;<br />
background-color: #FFFFFF;}<br />
<br />
.showpageNum a:hover {font-size:11px;<br />
border: 1px solid #333;<br />
color: #000000;<br />
background-color: #FFFFFF;<br />
}<br />
&lt;/style&gt;<br />
<br />
<br />
<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
<br />
function showpageCount(json) {<br />
var thisUrl = location.href;<br />
var htmlMap = new Array();<br />
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;<br />
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;<br />
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;<br />
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;<br />
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;<br />
var thisNum = 1;<br />
var postNum=1;<br />
var itemCount = 0;<br />
var fFlag = 0;<br />
var eFlag = 0;<br />
var html= &#039;&#039;;<br />
var upPageHtml =&#039;&#039;;<br />
var downPageHtml =&#039;&#039;;<br />
<br />
var pageCount=10;<br />
var displayPageNum=5;<br />
var firstPageWord = &#039;Home&#039;;<br />
var endPageWord = &#039;Last&#039;;<br />
var upPageWord =&#039;Previous&#039;;<br />
var downPageWord =&#039;Next&#039;;<br />
<br />
<br />
<br />
var labelHtml = &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#039;+thisLable+&#039;?&amp;max-results=&#039;+pageCount+&#039;&quot;&gt;&#039;;<br />
<br />
for(var i=0, post; post = json.feed.entry[i]; i++) {<br />
var timestamp = post.published.$t.substr(0,10);<br />
var title = post.title.$t;<br />
if(isLablePage){<br />
if(title!=&#039;&#039;){<br />
if(post.category){<br />
for(var c=0, post_category; post_category = post.category[c]; c++) {<br />
if(encodeURIComponent(post_category.term)==thisLable){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
postNum++;<br />
htmlMap[htmlMap.length] = &#039;/search/label/&#039;+thisLable+&#039;?updated-max=&#039;+timestamp+&#039;T00%3A00%3A00%2B08%3A00&amp;max-results=&#039;+pageCount;<br />
}<br />
}<br />
}<br />
}//end if(post.category){<br />
<br />
itemCount++;<br />
}<br />
<br />
}else{<br />
if(title!=&#039;&#039;){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
if(title!=&#039;&#039;) postNum++;<br />
htmlMap[htmlMap.length] = &#039;/search?updated-max=&#039;+timestamp+&#039;T00%3A00%3A00%2B08%3A00&amp;max-results=&#039;+pageCount;<br />
}<br />
}<br />
itemCount++;<br />
}<br />
}<br />
<br />
for(var p =0;p&lt; htmlMap.length;p++){<br />
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br />
if(fFlag ==0 &amp;&amp; p == thisNum-2){<br />
if(thisNum==2){<br />
if(isLablePage){<br />
upPageHtml = labelHtml + upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}else{<br />
upPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#039;+ upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}<br />
}else{<br />
upPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}<br />
<br />
fFlag++;<br />
}<br />
<br />
if(p==(thisNum-1)){<br />
html += &#039; &lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#039;+thisNum+&#039;&lt;/u&gt;&lt;/span&gt;&#039;;<br />
}else{<br />
if(p==0){<br />
if(isLablePage){<br />
html = labelHtml+&#039;1&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}else{<br />
html += &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}<br />
}else{<br />
html += &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ (p+1) +&#039; &lt;/a&gt;&lt;/span&gt;&#039;;<br />
}<br />
}<br />
<br />
if(eFlag ==0 &amp;&amp; p == thisNum){<br />
downPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ downPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;<br />
eFlag++;<br />
}<br />
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br />
}//end for(var p =0;p&lt; htmlMap.length;p++){<br />
<br />
if(thisNum&gt;1){<br />
if(!isLablePage){<br />
html = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#039;+ firstPageWord +&#039; &lt;/a&gt;&lt;/span&gt;&#039;+upPageHtml+&#039; &#039;+html +&#039; &#039;;<br />
}else{<br />
html = &#039;&#039;+labelHtml + firstPageWord +&#039; &lt;/a&gt;&lt;/span&gt;&#039;+upPageHtml+&#039; &#039;+html +&#039; &#039;;<br />
}<br />
}<br />
<br />
html = &#039;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#039;+thisNum+&#039; for &#039;+(postNum-1)+&#039;: &lt;/span&gt;&#039;+html;<br />
<br />
if(thisNum&lt;(postNum-1)){<br />
html += downPageHtml;<br />
html += &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[htmlMap.length-1]+&#039;&quot;&gt; &#039;+endPageWord+&#039;&lt;/a&gt;&lt;/span&gt;&#039;;<br />
}<br />
<br />
if(postNum==1) postNum++;<br />
html += &#039;&lt;/div&gt;&#039;;<br />
<br />
if(isPage || isFirstPage || isLablePage){<br />
var pageArea = document.getElementsByName(&quot;pageArea&quot;);<br />
var blogPager = document.getElementById(&quot;blog-pager&quot;);<br />
<br />
if(postNum &lt;= 2){<br />
html =&#039;&#039;;<br />
}<br />
<br />
for(var p =0;p&lt; pageArea.length;p++){<br />
pageArea[p].innerHTML = html;<br />
}<br />
<br />
if(pageArea&amp;&amp;pageArea.length&gt;0){<br />
html =&#039;&#039;;<br />
}<br />
<br />
if(blogPager){<br />
blogPager.innerHTML = html;<br />
}<br />
}<br />
<br />
}<br />
&lt;/script&gt;<br />
<br />
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
6. Letakkan di bawah ''posting blog'. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6oEjltkPJ71Ipdr6l2xcTdcxyoj_IGivAjeK7gEXuOKAZ_UWWpCOWJGMj8pO_MlGyERXtOHmDUQMONniv4ZFpl4qDE7331LOExvLtnSPb3QG3dJnckxaAGv4LO00xWz_7EC4eZBfUKQb/s1600-h/nav2.jpg" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5296514161089238258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6oEjltkPJ71Ipdr6l2xcTdcxyoj_IGivAjeK7gEXuOKAZ_UWWpCOWJGMj8pO_MlGyERXtOHmDUQMONniv4ZFpl4qDE7331LOExvLtnSPb3QG3dJnckxaAGv4LO00xWz_7EC4eZBfUKQb/s400/nav2.jpg" style="cursor: pointer; display: block; height: 114px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
7. Simpan.<br />
Ket: anda bisa ganti tulisan warna merah sesuai keinginan. <br />
Misalnya <span style="font-weight: bold;">Home</span> diganti <span style="font-weight: bold;">Awal</span>, <span style="font-weight: bold;">Next</span> diganti <span style="font-weight: bold;">Berikutnya</span>, dll. Untuk pengaturan warna silakan dikreasi sendiri. Selamat mencoba. <br />
<a href="http://klikajadeh.com/?r=username_anda"><br />
</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-62599545787251593092010-08-11T09:51:00.003+07:002010-08-11T09:53:19.095+07:00Satu lagi Widget random postSatu lagi Widget random post, yaitu menampilkan posting lama atau baru di sidebar halaman blog anda secara acak. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXBIcm16Jo39H6zNU1hHwd8x1FyWR6auZcYF0q7nsl5BlEgLyxjO_8jPzvx_S9wlBf9Yi21q09QKVArCrBo3WiPk_0HBpZfbBGDX3zRNAedlJMt9pv8-QwPLn8ctFrDtc0emdozoFVco/s1600/random+post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXBIcm16Jo39H6zNU1hHwd8x1FyWR6auZcYF0q7nsl5BlEgLyxjO_8jPzvx_S9wlBf9Yi21q09QKVArCrBo3WiPk_0HBpZfbBGDX3zRNAedlJMt9pv8-QwPLn8ctFrDtc0emdozoFVco/s320/random+post.png" /></a></div>Berikut ini adalah script untuk <a href="http://uc1n.blogspot.com/2009/06/menulis-artikel-di-blog-posting.html">menampilkan postingan </a>secara acak di blogspot.<br />
<br />
Copy code warna merah berikut:<br />
<br />
<br />
<br />
<div style="color: red;"><script type="text/javascript"><br />
<br />
var acakarray = new Array();var l=0;var flag;<br />
<br />
var <span style="color: blue;">numofpost=5</span>;function randomposts(json){<br />
<br />
var total = parseInt(json.feed.openSearch$totalResults.$t,10);<br />
<br />
for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}<br />
<br />
if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');<br />
<br />
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];<br />
<br />
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";<br />
<br />
document.write(item);}}<br />
<br />
}document.write('</ul>');}<br />
<br />
</script><br />
<br />
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </div><div style="color: red;"><br />
<span class="Apple-style-span" style="color: white;"><br />
</span></div><div><span class="Apple-style-span" style="color: white;">Login ke blogger >> Pilih Tata Letak / rancangan >> Elemen Halaman >> Tambah Gadget ,</span></div><div><span class="Apple-style-span" style="color: white;">pilih </span><b><span class="Apple-style-span" style="color: white;">HTML/Javascript</span></b><br />
<span class="Apple-style-span" style="color: white;"><br />
</span><br />
<span style="font-size: large;"><span class="Apple-style-span" style="color: white;">paste</span></span><span class="Apple-style-span" style="color: white;"> kode javascript di atas ke dalam gadget </span><span style="font-size: large;"><span class="Apple-style-span" style="color: white;">HTML /Javascript </span></span></div><br />
<br />
<b><br />
<br />
Catatan:</b><br />
<br />
Angka 5 pada <span style="color: blue;">numofpost=5 </span>adalah jumlah postingan yang akan ditampilkan secara acak ,bisa diganti dengan kebutuhan anda.Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-55240561814369032752010-07-29T12:34:00.000+07:002010-07-29T12:34:20.090+07:00Artikel terkait dengan thumbnail versi 2Artikel terkait dengan thumbnail ini sebenarnya sama dengan widget LinkWithin, namun kita terkadang penasaran bagaimana membuat widget tersebut, disini saya coba share bagaimana cara membuat widget seperti LinkWithin.<br />
<br />
Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail :<br />
<br />
1. login ke blogger masuk ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML dan centang "Expand Template Widget" silahkan di centang<br />
<br />
2. Cari kode <b></head></b><br />
3. Bila sudah ketemu danti dengan kode dibawah ini :<br />
<blockquote><br />
<!--Related Posts with thumbnails Scripts and Styles Start--><br />
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type="text/css"><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
<br />
#related-posts h2{<br />
font-size: 1.6em;<br />
font-weight: bold;<br />
color: black;<br />
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
color:black;<br />
}<br />
#related-posts a:hover{<br />
color:black;<br />
}<br />
<br />
#related-posts a:hover {<br />
background-color:#d4eaf2;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlkrmWmyoJi94rvqObqLzCYWsNwL5m6boq4yl7pxJ71BfM8MZQoSwOjb_AfXckJ2JN7KwOagds57gfkLLaZIrtncfxd-wfWMVeKnkDMzont_5QW_MEiKjJEX1wdRwT81qFHC6aYUYyI8/s400/noimage.png";<br />
var maxresults=5;<br />
var splittercolor="#d4eaf2";<br />
var relatedpoststitle="Related Posts";<br />
</script><br />
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><br />
<!-- remove --></b:if><br />
<!--Related Posts with thumbnails Scripts and Styles End--><br />
</head></blockquote><br />
<br />
4. Cari kode <br />
<blockquote><br />
<div class='post-footer-line post-footer-line-1'><br />
atau<br />
<p class='post-footer-line post-footer-line-1'></blockquote><br />
5. Taruh kode berikut di bawahnya<br />
<br />
<blockquote><br />
<!-- Related Posts with Thumbnails Code Start--><br />
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop><br />
<script type='text/javascript'><br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br />
</script><br />
</div><div style='clear:both'/><br />
<!-- remove --></b:if> <br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br />
</b:if></b:if><br />
<!-- Related Posts with Thumbnails Code End--></blockquote><br />
6. Save dan lihat hasilnya<br />
<br />
Jika anda menginginkan artikel terkait model yang lain silahkan baca "Cara Buat Related Post Flexible" Atau "Membuat Widget Artikel Terkait"Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-72496462101915101002010-07-29T12:13:00.000+07:002010-07-29T12:13:15.758+07:00membuar artikel terkait dengan gambarartikel Terkait versi 3.0 kali ini merupakan pengembangan dari artikel terkait versi 1.0, karena script code yang digunakan masih tetap sama dengan sedikit modifikasi untuk menampilkan gambar dengan ukuran 72 x 72 pixel. Sehingga menurut <a href="http://www.bloggerplugins.org/" target="_blank">BloggerPlugins</a> sebagai pengembangnya versi artikel terkait ini di beri nama Related Posts with Thumbnails. Dari segi tampilan yang hasilkan juga cukup menarik, karena ditambah gambar thumbnail yang diambil dari setiap halaman artikel. Sebagai contoh Blogger Tune-Up mencobanya di <a href="http://dehagoblog.blogspot.com/" target="_blank">Kotretan Hendriono</a> dan menghasilkan preview Artikel Terkait seperti dibawah ini. Merasa tertarik silahkan dicoba...<span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRp5gDFzNzjgYBSXY88y2RtEkVaLolCt7bD7ZlpQaIXGMWyak7bSgY6Is7oFRodocOX67qBQDe8-zndblacDaIjXlUTygzcgYNDkwkVVOdHhG4vpXE0yDAtD_f5VTgmUfQzDgX1EBGo00q/s1600/relpostthumb.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" rel="facebox"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5374191187140144370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRp5gDFzNzjgYBSXY88y2RtEkVaLolCt7bD7ZlpQaIXGMWyak7bSgY6Is7oFRodocOX67qBQDe8-zndblacDaIjXlUTygzcgYNDkwkVVOdHhG4vpXE0yDAtD_f5VTgmUfQzDgX1EBGo00q/s400/relpostthumb.png" style="cursor: hand; cursor: pointer; display: block; height: 227px; margin: 0px auto 10px; text-align: center; width: 367px;" /></a></span><br />
<span id="fullpost"><h3>Integrasi Artikel Terkait (Versi 3.0) di Blogger</h3><b>Langkah 1</b><br />
Login ke Blogger<br />
<b>Langkah 2</b><br />
Masuk ke "Tata Letak - Edit HTML"<br />
<b>Langkah 3</b><br />
Checklist "Expand Template Widget"<br />
<b>Langkah 4</b><br />
Cari kode dibawah ini<br />
<b>Langkah 5</b><br />
<pre class="code"></head></pre><b>Langkah 6</b><br />
Masukan kode CSS dibawah ini tepat diatas kode pada langkah 5:<br />
<pre class="code"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:black;}
#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}
</style>
<script src='http://hensblog.googlecode.com/files/rpthumbsv30.js' type='text/javascript'/>
</b:if></pre><b>Langkah 7</b><br />
Cari kode dibawah ini:<br />
<pre class="code"><div class='post-footer-line post-footer-line-1'></pre>jika tidak ditemukan, coba cari kode dibawah ini:<br />
<pre class="code"><p class='post-footer-line post-footer-line-1'></pre><b>Langkah 8</b><br />
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 7:<br />
<pre class="brush: xml; wrap-lines: false;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<a href='http://modification-blog.blogspot.com/2009/08/membuat-artikel-terkait-versi-30.html' style='display:none;'>Related Posts with thumbnails for blogger</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if></pre><b>Langkah 9</b><br />
Simpan template dan preview<br />
<br />
<b>Keterangan:</b><br />
<ul><li style="text-align: justify;">var maxresults=5; = Ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan</li>
<li style="text-align: justify;">var relatedpoststitle="Artikel Terkait"; = Ubah kalimat "Artikel Terkait" sebagai nama widget</li>
</ul><div style="text-align: justify;">Selamat menjalankan Ibadah Shaum-Ramadhan 1430H, selamat mencoba blogger hack diatas, semoga berhasil dan Happy Blogging walaupun lapar... :)</div></span>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-52918378480127510812010-07-27T13:35:00.001+07:002010-07-27T13:50:25.095+07:00CARA MEMBUAT NOMOR HALAMAN NAVIGASI UNTUK BLOGGER ATAU BLOGSPOTUntuk kali ini kita bahas cara membuat nomor halaman navigasi untuk blogger atau blogspot. Banyak blog yang ada nomor halaman navigasi nya atau nomor halaman kemudi di bagian bawah dari blog blog itu, pikir saya waktu itu (sebelum menemukan artikel ini) halaman akan muncul sendiri setelah posting kita banyak. Ternyata tidak begitu. Halaman navigasi akan muncul setelah kita mengatur sendiri template untuk blog kita. Artikel ini memang sudah lama saya cari. Karena sangat penting, maka saya posting di blog saya ini. Membuat halaman navigasi di blogger atau blogspot ini, saya peroleh dari blog <a href="http://ariawijaya.com/2009/12/11/membuat-navigasi-page-number-blogspot/">ariawijaya.com.</a> utuk itu mari kita ikuti dan praktikan tekniknya. Atau anda bisa berkunjung <a href="http://ariawijaya.com/2009/12/11/membuat-navigasi-page-number-blogspot/">ke sini.</a><br />
<span class="fullpost"><br />
Untuk hasilnya akan terlihat seperti gambar dibawah ini:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgRGbkqGEM6vpf2W4d86PLsgBQe_8_VAAET2Mj6YRAJ9vbkvhsVGlE6zF4uywlVwEoErstLkh4zJOn1f_OGXWzwSV58fJf7xUYixoorYL8GoP7dAwrxScASRzyXJk1jusvIoRiJigarcR/s1600-h/halaman+blog.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5447954273585244626" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgRGbkqGEM6vpf2W4d86PLsgBQe_8_VAAET2Mj6YRAJ9vbkvhsVGlE6zF4uywlVwEoErstLkh4zJOn1f_OGXWzwSV58fJf7xUYixoorYL8GoP7dAwrxScASRzyXJk1jusvIoRiJigarcR/s320/halaman+blog.JPG" style="cursor: pointer; height: 123px; width: 320px;" /></a><br />
<br />
Contoh hasil kode navigasi berurut ini, anda bisa lihat <a href="http://kerjausahainternet.blogspot.com/">di sini.</a><br />
adapun cara membuat nomor halaman navigasi untuk blogger atau blogspot adalah sebagai berikut:<br />
<br />
<br />
<span style="font-weight: bold;">PERTAMA</span><br />
<br />
Login ke blogspot anda dan klik <span style="font-weight: bold;">dashboard</span> blogger anda. Pilih <span style="font-weight: bold;">tata letak</span>, kemudian pilih <span style="font-weight: bold;">edit html</span>. Beri tanda centang pada option <span style="font-weight: bold;">expand widget templates</span>, lalu cari kode berikut:<br />
<br />
]] > </b:skin><br />
<br />
Sudah ketemu? letakkan kode css dibawah ini tepat diatas kode “ ]] > </b:skin> “ tersebut :<br />
<br />
<br />
.showpageArea a {<br />
text-decoration:underline;<br />
}<br />
.showpageNum a {<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
margin:0 3px;<br />
padding:3px;<br />
}<br />
.showpageNum a:hover {<br />
border: 1px solid #cccccc;<br />
background-color:#cccccc;<br />
}<br />
.showpagePoint {<br />
color:#333;<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
background: #cccccc;<br />
margin:0 3px;<br />
padding:3px;<br />
}<br />
.showpageOf {<br />
text-decoration:none;<br />
padding:3px;<br />
margin: 0 3px 0 0;<br />
}<br />
.showpage a {<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
padding:3px;<br />
}<br />
.showpage a:hover {<br />
text-decoration:none;<br />
}<br />
.showpageNum a:link,.showpage a:link {<br />
text-decoration:none;<br />
color:#333333;<br />
}<br />
<br />
<br />
<span style="font-weight: bold;">KE DUA:</span><br />
<br />
<br />
Cari lagi kode seperti ini:<br />
<br />
<br />
</body><br />
<br />
Kalau sudah ketemu, persis diatasnya letakkan script dibawah ini:<br />
<br />
<br />
<b:if cond='data:blog.pageType != "item"'><br />
<script type='text/javascript'><br />
var pageCount=5;<br />
var displayPageNum=5;<br />
var upPageWord ='Previous';<br />
var downPageWord ='Next';<br />
</script><br />
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/><br />
</b:if><br />
<br />
<span style="font-weight: bold;">KE TIGA:</span><br />
<br />
Ini bisa dibilang langkah terakhir, yaitu cari lagi kode berikut:<br />
<br />
<br />
'data:label.url'<br />
<br />
<br />
Ketemu? kalau sudah, hapus kode tersebut dan gantilah dengan kode di bawah ini:<br />
<br />
<br />
<br />
'data:label.url + &quot;?&amp;max-results=5&quot;'<br />
<br />
<br />
Sudah diganti? Kalau sudah <span style="font-weight: bold;">simpan templates</span> anda, dan anda bisa lihat hasilnya sekarang<br />
<br />
Nah selesai! Demikian cara membuat nomor halaman navigasi untuk blogger atau blogspot. Semoga berguna.<br />
<br />
</span>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-12536645585930741852010-07-20T11:45:00.002+07:002010-07-20T11:48:38.327+07:00Membuat Artikel Terkait dengan Gambar<span class="Apple-style-span" style="font-family: Georgia, serif; font-size: medium;"><span class="Apple-style-span" style="font-size: 15px;"><b><span class="Apple-style-span" style="font-weight: normal;"><b>Membuat Artikel Terkait dengan Gambar</b> . Wah.... Kayaknya mang asyik tuh.... Why? Begini shobat, saat saya berselancar di alam Ghaib--HUS! ngawur 'alam maya' maksudY--melihat ada blogger-blogger yang menerapkan gadget baru untuk mempercantik blog mereka. Yaitu dengan mengganti artikel, postingan, tulisan terkait--yang tadinya hanya teks--dengan gambar plus teks. Wuuh!!! Kayaknya tambah menggoda pengunjung yY!!!!<br />
<br />
<b>Cara Membuat Artikel Terkait dengan Gambar</b> dapat menggunakan bantuan dari <a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><span style="font-weight: bold;">www.linkwithin.com</span></a> Katanya sih, lau pake HTML-HTML-an sulit banget. Nah, yang tadinya super ruwet, kini jadi sangatlah mudah.<br />
<br />
<br />
Contoh <b>Artikel Terkait dengan gambar</b> :<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWODPeMzLkNQ0eVhyphenhyphenam-B6EYSI5kWp0YcsglSkukxnXXuuNloSvy1sGOSKw8iRF3AefmaJUAxRGI4MbyCl9xe2I4UAJC7ucVlfRdZHhf4CRr_9HyDN4Vox003m3DqdZEcZy-q80mWWsQ/s1600-h/terkait+gambar.jpeg" imageanchor="1" style="clear: left; color: #000d0d; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWODPeMzLkNQ0eVhyphenhyphenam-B6EYSI5kWp0YcsglSkukxnXXuuNloSvy1sGOSKw8iRF3AefmaJUAxRGI4MbyCl9xe2I4UAJC7ucVlfRdZHhf4CRr_9HyDN4Vox003m3DqdZEcZy-q80mWWsQ/s320/terkait+gambar.jpeg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px;" width="225" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
Contoh sebelumnya <b>Artikel terkait menggunakan Teks</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYdTGyBITsgovTUqQAhF8Dr6s2KZ_U-haZOD6v0OgePyOFryqZqr0y3UuaPFdwxeg8rIIakpxihL01nGEF0OA7EMj5sq2IDOVW23EyCyBx9JQGvaAAg1jgaaE510AK0fX_5P3qkhlaw/s1600-h/terkait+teks.jpeg" imageanchor="1" style="clear: left; color: #000d0d; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYdTGyBITsgovTUqQAhF8Dr6s2KZ_U-haZOD6v0OgePyOFryqZqr0y3UuaPFdwxeg8rIIakpxihL01nGEF0OA7EMj5sq2IDOVW23EyCyBx9JQGvaAAg1jgaaE510AK0fX_5P3qkhlaw/s320/terkait+teks.jpeg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px;" width="118" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Ini dia <b>cara Membuat Artikel Terkait dengan Gambar :</b><br />
<br />
1.Kunjungi Situs <a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><span style="font-weight: bold;">www.linkwithin.com</span></a><br />
<br />
2.Lalu Isi Form Pendaftarannya<br />
<br />
</span></b></span></span><br />
<span class="Apple-style-span" style="font-family: Georgia, serif; font-size: medium;"><b></b></span><br />
<span class="Apple-style-span" style="font-family: Georgia, serif; font-size: medium;"><b><ul><li><span style="font-weight: bold;">Email</span>= Masukan Email kalian</li>
<li><span style="font-weight: bold;">Blog Link</span>= Masukan Url Blog anda</li>
<li><span style="font-weight: bold;">Platform</span>= Masukan tempat anda membuat Blog</li>
<li><b>Width</b>=Banyaknya artikel terkait yang ditampilkan</li>
</ul></b></span><span class="Apple-style-span" style="font-family: Georgia, serif; font-size: medium;"><b><br />
3.Lalu Klik<span style="font-weight: bold;"> <i>Get Widget</i>, lalu <i>Klik Install Widget</i></span> {Kode yang diberikan oleh<a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><b>linkwithin</b></a> Biasanya otomatis dimasukan ke <b>blogger</b>, nah kode dari <a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><b>linkwithin</b></a>tersebut muncul sesudah tulisan <i>readmore</i> (bagi blog yang memakai <i>readmore</i>}--SELESAI.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<i><b>Bagi yang tidak bisa cara ke-3, </b></i>ikuti langkah ini <i><b>:</b></i><br />
4.Buka Widget dari <a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><b>Linkwithin</b></a> tersebut(yang ada di sidebar}lalu Copy kodenya terlebih dulu disimpan, lalu <i>Delete Widget</i> tersebut.<br />
<br />
5.Dari Dashboard anda <span style="font-weight: bold;">Klik Template>>Edit HTML>>klik Expan Widget Templates</span><br />
<br />
6.Lalu Cari Kode <p><data:post.body/></p><span style="color: red; font-weight: bold;"><data:post.body></data:post.body></span> {bagi yang memakai <i>readmore</i>}<br />
<br />
7.Lalu copy kode yang anda simpan sebelumnya (dari <a href="http://www.linkwithin.com/" style="color: #000d0d; text-decoration: none;"><span style="font-weight: bold;">www.linkwithin.com</span></a>), dan paste-kan dibawah kode diatas (no. 6)<br />
<br />
8.Lalu Save Template Sobat<br />
<br />
<b></b><br />
<br />
<b></b><br />
Gimana lihat hasilnya..... Oke kan!</b></span>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-66837221400454190182010-07-17T11:15:00.001+07:002010-07-17T14:49:29.875+07:00Cara Menambah Elemen Baru di Header, Sidebar, Main-Wrapper dan Footer BlogSPOT<span style="font-size: small;">Cara Menambah Elemen Baru di Header, Sidebar, Main-Wrapper dan Footer BlogSPOT</span> sangatlah mudah anda mau? Desain blog yang kita gunakan sebenarnya tersusun atas beberapa elemen blog yang pada intinya terdiri atas : <br />
<ol style="text-align: justify;"><li><b><span style="color: maroon;"><i>Header-Wrapper/Header</i></span></b> : Bagian teratas blog di bawah Navbar).</li>
<li><b><i><span style="color: maroon;">Main-Wrapper</span></i></b> : Terletak di bagian tengah (tempat posting). Pada Main Wrapper.</li>
<li><b><span style="color: maroon;"><i>Crosscoll-Wrapper</i></span></b> : Tidak semua desain blog menggunakan crosscoll-wrapper. Posisinya terletak di antara header dan Content-Wrapper, dimana content-wrapper sendiri melingkupi (wadah dari) Main-Wrapper dan sekaligus Sidebar-Wrapper.</li>
<li><b><i><span style="color: maroon;">Sidebar-Wrapper atau Sidebar</span></i></b> : Terletak di samping kanan atau kiri blog (template 2 kolom) atau di kedua sisi kanan dan kiri (template 3 kolom).</li>
<li><b><span style="color: maroon;"><i>Footer</i></span></b> : Terletak di bagian terbawah blog.</li>
</ol><div style="text-align: justify;">Pada setiap elemen blog sebenarnya mempunyai fungsi tersendiri, namun meskipun demikian elemen tersebut dapat juga digunakan untuk membangun sebuah fungsi/fasilitas pelengkap blog yang sama. Fungsi elemen sendiri adalah sebagai tempat untuk menambahkan sebuah widget baru yang di lakukan melalui “<span style="color: navy;"><b>Page Elemen/Elemen Laman</b></span>“. Widget ini sangat variatif sekali dan terbagi menjadi dua :</div><div style="border: 6px ridge rgb(5, 61, 1); color: #028004; float: right; font-family: Times; font-size: 22px; font-weight: 900; padding: 0pt 0pt 6px; text-align: right;"><span style="color: #028004;"><span id="more-173"></span></span></div><div style="text-align: justify;"></div><ol style="text-align: justify;"><li><b><span style="color: #993300;">Widget bawaan blog</span></b> yang secara langsung bisa kita tambahkan di blog tanpa kita perlu melakukan perubahan apaun terhadap widget tersebut (perubahan kode HTML, javascript atau kode CSS). Widget seperti ini antara situs penyedia blog yang satu dengan yang lain tidak terlalu banyak berbeda. Beberapa widget yang umumnya tersedia misalnya : Categories, Label, Follower, Image, Gallery dan beberapa widget yang lain.</li>
<li><b><span style="color: #993300;">Widget baru </span></b>yang ditambahkan dengan <i><span style="color: blue;">menggunakan kode html, javascript dan kode CSS yang berasal dari luar</span></i>. Widget seperti ini tersedia dibanyak situs penyedia widget (gratis dan berbayar) atau <span style="color: blue;"><i>bisa dibuat sendiri dengan membuat desain menggunakan kode html dan javascript serta kode CSS</i></span>. Contoh widget : Menu, Image Effects, Tooltip Animasi, Visitor Counter, Tag Cloud dan banyak lagi yang lain.</li>
</ol><div style="text-align: justify;">Elemen baru yang ditambahkan di BlogSPOT sebenarnya sudah tersedia dan kita tinggal membuat supaya elemen tersebut diperlihatkan sehingga bisa digunakan sebagai sarana penambahan widget. Dari beberapa elemen yang ada, yang perlu ditambahkan adalah elemen di bagian header dan main wrapper yang memang belum diperlihatkan ketika kita membuka “Page Element/Elemen Laman” (ditandai dengan kolom bergaris putus-putus dengan tulisan Add Gadget atau Tambah Gadget). Meskipun demikian, kita akan membahas secara keseluruhan cara membuat penambahan elemen tersebut.</div><div style="border: 3px ridge rgb(0, 51, 0); color: #710265; font-family: Monotype Corsiva; font-size: 18px; font-weight: 700; margin: 15px 0pt; padding: 5px; text-align: center;">Cara membuat Elemen Baru di Eelemen Laman (Page Element) BlogSPOT-BloGGER</div><ol style="text-align: justify;"><li><b><span style="color: maroon;"><i>Login to BloGGeR (Login ke BloGGeR)</i></span></b> : Tuliskan “<span style="color: navy;"><b>User Name/Email Address</b></span>” kemudian tuliskan “<span style="color: navy;"><b>Password</b></span> (<b><span style="color: navy;">Sandi</span></b>)”.</li>
<li><span style="color: maroon;"><b><i>Dasboard (Dasbor)</i></b></span> : Merupakan halaman pertama kita jumpai setelah login. Pada halaman Dasbor terdapat beberapa link seperti <i><span style="color: blue;">Tata Letak/Rancangan (Layout), Posting, Pengaturan (Editting), Edit Entri dan Entri Baru (New Entry). KLIK link Tata Letak (Layout).</span></i></li>
<li><b><i><span style="color: maroon;">Layout (Tata Letak/Rancangan)</span></i></b> : Yang kita jumpai di bagian kita jumpai stelah langkah di atas adalah “<span style="color: navy;"><b>Page Elemen atau Elemen Laman</b></span>” yang merupakan sebuah bagian dari “<span style="color: navy;"><b>Tata Letak</b></span> (<b><span style="color: navy;">Layout</span></b>)”. <b><span style="color: blue;"><i>KLIK</i></span></b> link “<b><span style="color: navy;">Edit HTML</span></b>“</li>
<li>Setelah sampai tahap ini akan terlihat kode HTML penyusun blog (Desain dasar blog). Amankan (<span style="color: navy;"><b>Back-up</b></span>) template terlebih dahulu supaya seandainya ada kesalahan atau kerusakan desain blog yang disebabkan kesalahan pemasangan kode atau penulisan kode, template sebelum perubahan bisa kembali digunakan. Untuk mengetahui cara back-up template silahkan . Selanjutnya kita akan masuk per bagian yang akan ditambahkan elemen baru dengan mencari terlebih dahulu satu-persatu kode HTML yang akan di rubah untuk menciptakan pertambahan/memunculkan elemen. Untuk memudahkan saat mencari kode, silahkan lihat panduannya dengan cara .</li>
</ol><div id="page" style="border: 2px dotted blue; color: #00ccff; font-family: Times New Roman; font-size: 18px; font-weight: 700; margin: 20px 0pt; padding: 2px 8px; text-align: center; width: 385px;">Elemen Baru di Header Blog (bagian blog teratas):</div><ol style="text-align: justify;"><li>Cari Kode : <b:section class='header' id='header'</li>
<li>Pada kode di atas setelah<span style="color: navy;"> <b>id=’header’</b></span><b> </b>biasanya terdapat kode lain yang mengikuti seperti : “<b><span style="color: navy;">maxwidgets=’1′ showaddelement=’no’</span>></b>“. Jika tidak ada tidak menjadi masalah, yang penting seluruh bagian kode html pada point pertama di atas, gantilah dengan kode html baru sebagai berikut :<i><b><span style="color: red;"> <b:section class='header' id='header' showaddelement='yes'></span></b></i></li>
<li><i><b><span style="color: red;">Catatan</span></b> : </i> Seandainya di template sampeyan kode ditulis dalam bentuk berbeda, misalnya ada penambahan “<b><span style="color: navy;">wrapper</span></b>“, sesuaikan juga kode yang digunakan sebagai pengganti sehingga akan pas buat templatenya.</li>
</ol><div id="page" style="border: 2px dotted blue; color: #00ccff; font-family: Times New Roman; font-size: 18px; font-weight: 700; margin: 20px 0pt; padding: 2px 8px; text-align: center; width: 385px;">Elemen Baru di Main-Wrapper (di atas halaman posting):</div><ol style="text-align: justify;"><li>Cari Kode : <b:section class='main' id='main'</li>
<li>Pada kode di atas setelah<span style="color: navy;"> <b>id=’main’</b></span><b> </b>biasanya terdapat kode lain yang mengikuti seperti : “<b><span style="color: navy;"> showaddelement=’no’></span></b>“. Jika ada sedikit perbedaan kode html seperti contoh di bagian atas (header), sesuaikan juga penulisan kodenya. Ganti kode html-nya dengan kode html di bawah ini : <b:section class='main' id='main' showaddelement='yes'></li>
</ol><div id="page" style="border: 2px dotted blue; color: #00ccff; font-family: Times New Roman; font-size: 18px; font-weight: 700; margin: 20px 0pt; padding: 2px 8px; text-align: center; width: 385px;">Elemen Baru di footer (di bagian terbawah blog/template):</div><ol style="text-align: justify;"><li>Cari Kode : <b:section class='footer' id='footer'</li>
<li>Pada kode di atas setelah<span style="color: navy;"> <b>id=’main’</b></span><b> </b>Biasanya pada bagian footer sudah ditampilkan sebuah elemen dengan tanda detelah kode di atas tidak ada penambahan kode html yang lain. Biasanya kode di atas langsung ditutup dengan kode <b>” </b><b><span style="color: red;">></span></b><b> “</b> (<i>kurung tutup</i>). Jika memang belum ada elemennya gunakan kode baru sebagai berikut : <b:section class='footer' id='footer'></li>
</ol><div id="page" style="border: 2px dotted blue; color: #00ccff; font-family: Times New Roman; font-size: 18px; font-weight: 700; margin: 20px 0pt; padding: 2px 8px; text-align: center; width: 385px;">Sidebar (di samping kanan atau kiri atau kedua sisi kanan-kiri) :</div><div style="text-align: justify;">Di sidebar biasanya pasti sudah ada elemennya sehingga tidak perlu dilakukan perubahan dalam bentuk apapun.</div><div id="page" style="border: 1px dotted blue; color: #00ccff; font-family: Times New Roman; font-size: 18px; font-weight: 700; margin: 20px 0pt; padding: 2px 8px; text-align: center; width: 387px;">Crosscol Wrapper (di antara header dan ruang posting) :</div><ol><li>Tidak semua blog menggunakan Crosscol Wrapper. Bila ingin menambahkan elemen baru Crosscol, harus dilakukan penambahan kode baru sebagai berikut :</li>
<div class="sidebarprofile" style="border: 5px ridge rgb(104, 3, 3); color: #2d0e00; font-family: Arial; font-size: 13px; font-weight: bold; margin: 8px 0pt; padding: 5px; text-align: center; width: auto;"><pre><div id="crosscol-wrapper"><b:section class="crosscol" id="crosscol"><div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol'/>
</div>
</b:section></div></pre></div>
<li>Letakkan kode di atas di bawah kode html seperti terlihat di bawah ini : <div id='content-wrapper'><br />
</li>
<li>Apabila kode di atas tidak ada dan sampeyan tetap ingin menambahkan elemen baru di posisi tersebut, maka tambahkan kode html secara lengkap seperti di bawah ini :</li>
<div class="sidebarprofile" style="border: 5px ridge rgb(104, 3, 3); color: #2d0e00; font-family: Arial; font-size: 13px; font-weight: bold; margin: 8px 0pt; padding: 5px; text-align: center; width: auto;"><pre><code style="font-family: arial;"></code>
<div id="content-wrapper"><div id="crosscol-wrapper"><b:section class="crosscol" id="crosscol"><div id='content-wrapper'>
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol'/>
</div>
</b:section></div></div></pre></div>
<li> Lanjutkan dengan menambah tag penutup <b> </b></li>
</ol>di atas kode : <div id='footer-wrapper'><br />
<div style="text-align: justify;"><br />
<span style="color: #723c03; font-family: Verdana; font-size: 14px; font-style: italic; font-weight: bold;"><b><i><span style="color: maroon;">Tutorial Lain</span></i></b> </span>: Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan </div><div style="color: #e39b01; font-family: Staccato222 BT; font-size: 32px; font-weight: 700; margin-bottom: 20px; text-align: center;">» Happy Blogging «</div><div style="text-align: justify;">Tutorial BloGGeR dan Panduan BloGGeR tentang cara menambah elemen baru di Blogspot ini bertujuan untuk persiapan apabila dibutuhkan penambahan widget baru dengan posisi yang sebelumnya belum tersedia di template (blog).</div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com1tag:blogger.com,1999:blog-1117568792750015519.post-8545450451980262692010-07-15T10:53:00.000+07:002010-07-15T10:53:50.654+07:00Memperlebar Halaman Blog dan Side Bar BlogMemperlebar Halaman Blog dan Side Bar Blog apakah mungkin? tentu saja mungkin, disini saya sediakan tuturialnya silahkan lanjut ke TKP : Setiap template blog memiliki ukuran lebar sendiri-sendiri terutama <b>template non-blogspot.</b> Jika kebetulan Anda mempunyai blog dengan template dengan lebar yang tidak sesuai dengan keinginan, Anda dapat melakukan <b>kustomasi lebar halaman blog maupun side bar blog</b>. Ikuti tipsnya bersama <b>Tips dan Trik Blog</b> berikut ini.<span class="fullpost"> </span><br />
<div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Sebelum melakukan pengeditan ini, <b>saya</b> sarankan untuk <b style="font-weight: bold;">melakukan back up</b><span style="font-weight: bold;"> template</span> Anda terlebih dahulu untuk mengantisipasi hal-hal yang tidak kita inginkan. Atau Anda dapat mencoba pada <b>blog simulasi</b> (blog latihan) terlebih dahulu sebelum benar mengaplikasikan pada blog Anda yang sebenarnya.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Ada beberapa istilah yang perlu diketahui sehubungan dengan kustomasi lebar halaman blog ini. Untuk mempermudah simulasi, <b>saya</b> menggunakan <b>template Minima</b> milik <b>blogspot</b>. Mungkin Anda akan menemui kode yang agak berbeda namun pada prinsipnya sama. Jika Anda menggunakan <i>Firefox</i>, untuk mempermudah pencarian kode-kode dalam pengeditan ini, gunakan <b>Ctrl + F</b>.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Halaman Blog<o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Dipresentasikan dengan kode seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#outer-wrapper {<br />
width: <span style="color: red;">660</span>px;<br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Untuk melakukan kustomasi <b>lebar halaman blog,</b> Anda dapat merubah angka pada <i>width</i> sesuai keinginan.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Halaman Posting<o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Dipresentasikan dengan kode seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#main-wrapper {<br />
width: <span style="color: red;">410</span>px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Untuk melakukan kustomasi <b>lebar halaman posting</b>, Anda dapat merubah angka pada <i>width</i> sesuai kebutuhan.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Side Bar Blog<o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Dipresentasikan dengan kode seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#sidebar-wrapper {<br />
width: <span style="color: red;">220</span>px;<br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Untuk melakukan <b>kustomasi lebar side bar blog, </b>Anda dapat merubah angka pada <i>width</i> sesuai kebutuhan.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Header Blog, <o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Dipresentasikan dengan kode seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#header-wrapper {<br />
width:<span style="color: red;">660</span>px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Untuk melakukan <b>kustomasi lebar Header blog, </b>Anda dapat merubah angka pada <i>width</i> sesuai kebutuhan.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Footer Blog<o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Dipresentasikan dengan kode seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#footer {<br />
width:<span style="color: red;">660</span>px;<br />
clear:both;<br />
margin:0 auto;<br />
padding-top:15px;<br />
line-height: 1.6em;<br />
text-transform:uppercase;<br />
letter-spacing:.1em;<br />
text-align: center;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Untuk melakukan <b>kustomasi lebar Footer blog, </b>Anda dapat merubah angka pada <i>width</i> sesuai kebutuhan</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Jika lebar salah satu dari kelima <i>elemen</i> tersebut (<b>Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog</b>) diubah maka akan mempengaruhi <i>kesingkronisan</i> elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar halaman blog maka selain merubah <i>width</i> pada halaman blog, Anda juga harus menyesuaikan lebar elemen <b>halaman posting blog, header blog, </b><b>footer blog</b> dan (jika perlu) <span style="font-weight: bold;">side bar</span>. Jika tidak, Anda akan mendapatkan tampilan blog yang <i style="color: #ff6600;">morat-marit</i>.</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><span style="color: red; font-weight: bold;">DELAPAN LANGKAH MEMPERLEBAR HALAMAN BLOG</span></span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Sekarang saatnya untuk merubah lebar blog, dengan delapan langkah sebagai berikut.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Pertama</b>, ubah <i>width</i> pada kode halaman blog, misalnya kita tentukan dengan lebar 900 pixel, seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#outer-wrapper {<br />
<i>width</i>: <span style="color: red;">900</span>px;<br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Kedua</b>, agar jarak antara halaman posting dan side bar tidak terlalu jauh yang dapat menyebabkan tampilan blog kurang rapi/serasi, maka ubah juga <i>width</i> pada kode <b>halaman posting</b>, misalkan 550 pixel, seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#main-wrapper {<br />
width: <span style="color: red;">550</span>px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Ketiga</b>, agar <span style="font-style: italic;">side bar</span> kelihatan serasi dengan lebar halaman posting yang telah disesuakan tersebut maka Anda dapat merubahnya dengan lebar maksimal 350 pixel, yaitu 900 pixel (lebar halaman blog) dikurangi 550 pixel (lebar halaman posting). Namun agar jarak antara halaman posting dan side bar tidak berdempetan, Anda dapat memberi jarak antara 30 pixel sampai dengan 50 pixel sesuai selera masing-masing. Misalkan kita tentukan jaraknya 40 pixel, maka lebar side bar nya menjadi 310 pixel {900 – (550 + 40)} , seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#sidebar-wrapper {<br />
width: <span style="color: red;">310</span>px;<br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Keempat</b>, agar tidak timpang, Anda dapat merubah lebar header blog menjadi 900 pixel, seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#header-wrapper {<br />
width:<span style="color: red;">900</span>px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Kelima</b>, begitu juga dengan footer agar diperoleh lebar footer yang serasi dengan halaman blog, maka Anda dapat merubahnya menjadi 900 pixel, seperti di bawah ini.</span></div><div class="alert"><span class="fullpost">#footer {<br />
width:<span style="color: red;">900</span>px;<br />
clear:both;<br />
margin:0 auto;<br />
padding-top:15px;<br />
line-height: 1.6em;<br />
text-transform:uppercase;<br />
letter-spacing:.1em;<br />
text-align: center;<br />
}</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Keenam</b>, sebelum menyimpannya, alangkah baiknya Anda melihat tampilan <i>preview</i>nya terlebih dahulu. </span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Ketujuh</b>, jika sudah yakin, <span style="font-style: italic;">simpan template</span>.</span></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost"><b>Kedelapan</b>, selesai.</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><div class="MsoNormal" style="text-align: justify;"><span class="fullpost">Yang ingin mencoba, selamat mencoba ya, semoga sukses!</span></div><div class="MsoNormal" style="text-align: justify;"><o:p><span class="fullpost"> </span></o:p></div><span class="fullpost"><br />
</span>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-49556090554168742982010-06-29T13:26:00.005+07:002010-06-29T13:39:07.255+07:00mesin pencari enterupload.com<div style="color: #666666; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s1600/AAAAAA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s400/AAAAAA.jpg" width="400" /></a></div><br />
</div><div style="color: #666666; text-align: center;">Masukkan kata kunci Anda di kolom berikut ini untuk mencari & download file yang<br />
anda inginkan dari yang LEGAL atau ILEGAL seperti<br />
<span class="short_text" id="result_box"><span title="">Files, Video, Musik, Foto, Buku, Archive, Program, Web, Mobile. Software</span></span><br />
<span class="short_text" id="result_box"><span title="">GRATIS VIA enterupload.com</span></span>:<br />
<br />
</div><div style="text-align: center;"><form action="http://go-facebooker.blogspot.com/2010/06/mesin-pencari-enteruploadcom.html" id="cse-search-box"><input name="cx" type="hidden" value="012074213344869122459:wmroovxfrhs" /><br />
<input name="cof" type="hidden" value="FORID:11" /><br />
<input name="ie" type="hidden" value="UTF-8" /><br />
<input name="q" size="80" type="text" /><br />
<br />
<input name="sa" type="submit" value="Telusuri" /><br />
<br />
</form></div><div style="text-align: center;"><script src="http://www.google.com/cse/brand?form=cse-search-box&lang=id" type="text/javascript">
</script><br />
<br />
</div><div id="cse-search-results" style="text-align: center;"></div><div style="text-align: center;"><script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script><br />
<br />
</div><div style="text-align: center;"><script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">
</script></div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-7414123680948384632010-06-24T12:56:00.000+07:002010-06-24T12:56:08.051+07:00text editor gratis untuk keperluan mengedit templateBingung mencari <b>text editor gratis untuk keperluan mengedit template</b>? kalo iya, mungkin pilihan dibawah ini bisa menjawab kesulitan rekan selama ini. Tapi jujur saja, pilihan text editor dibawah bukan <b>cara instan mengedit template</b> lho, tapi hanya tools pembantu saja untuk mempermudah kita menulis atau mengedit script apa saja yang berhubungan dengan bahasa pemrogrmam web, termasuk diantarnya CSS, JS, HTML, XML, PHP sampai dengan bahasa pemrograman desktop tentunya. Yang jelas, hampir semua <b>text editor </b>dibawah sudah mendukung fasilitas <b>Syntax Highlighting</b> dan <b>Syntax Folding,</b> tentu saja ini tidak dimiliki text editor standar seperti layaknya notepad.<br />
<a href="" name="more"></a> <br />
<b><a href="http://notepad-plus.sourceforge.net/es/site.htm" target="_blank">Notepad++</a> </b> <b>Notepad ++ </b>merupakan software editor yang mendukung beberapa bahasa pemrograman dan berjalan pada MS Windows. Dirancang menggunakan bahasa programan C++, menggunakan Win32 API secara langsung dan STL (yang menjamin kecepatan eksekusi lebih tinggi dan ukuran yang lebih kecil), didistribusikan di bawah ketentuan GNU General Public License.<br />
<b><a href="http://bluefish.openoffice.nl/" target="_blank">Bluefish Editor</a> </b><br />
<b>Bluefish Editor - </b>Editor yang support hampir semua bahasa pemrograman, dapat menyoroti kata-kata kunci pada kode. Selain itu kita dapat dapat bekerja dengan remote file dan menyelesaikan proyek-proyek programming dengan mudah.<br />
<br />
<b><a href="http://selida.camelon.nl/selida.html" target="_blank">Selida HTML Editor</a> </b> <b>Selida HTML Editor - </b>Editor HTML yang cukup komprehensif. Dengan dukungan editor WYSIWYG, serta dukungan pada pengkodean warna (Syntax Highlighting).<br />
<br />
<b><a href="http://www.flos-freeware.ch/notepad2.html" target="_blank">Notepad2</a> </b> <b>Notepad2 - </b>Aplikasi lain yang dapat kita gunakan untuk mengedit teks. Mungkin juga berguna sebagai Windows Notepad, dapat dijalankan tanpa diinstal dan tanpa memodifikasi sistem operasi registry sama sekali.<br />
<br />
<b><a href="http://www.w3.org/Amaya/" target="_blank">Amaya</a> </b> <b>Amaya </b>- Dirancang oleh <b>World Wide Web Consortium (W3C)</b>, berawal sebagai editor HTML / CSS, kini mendukung lebih banyak format dan fitur. Memungkinkan kita mengedit teks pada beberapa dokumen secara bersamaan.<br />
<br />
Rekan mungkin bingung memilih mana text editor yang terbaik, kalo harus memilih, saya sarankan coba menggunakan Notepad ++, karena saya sendiri sudah menggunkan tools ini sejak lama. ok mungkin itu saja...Semoga bermanfaat :)Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-77083511687440221312010-06-24T12:35:00.000+07:002010-06-24T12:35:06.219+07:00Free Blogger Template Generator<a href="http://1.bp.blogspot.com/_C6KkooKXCEw/SuJ3Lm8qarI/AAAAAAAAE4k/WSJWYW8mUu8/s1600-h/generator.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5396006344860527282" src="http://1.bp.blogspot.com/_C6KkooKXCEw/SuJ3Lm8qarI/AAAAAAAAE4k/WSJWYW8mUu8/s400/generator.gif" style="cursor: pointer; float: left; height: 95px; margin: 0pt 10px 10px 0pt; width: 88px;" /></a> <br />
Siapa bilang ngedesain template sendiri itu sulit? cukup berbekal <b>Blogger Template Generator</b> dibawah ini kita sudah bisa kok membuat Template dinamis secara instan tanpa harus menguasai bahasa pemrograman seperti HTML, XML dan CSS. Disini yang kita butuhkan hanya sedikit kreatifitas saja, selebihnya imajinasi kita sendiri yang menentukan hasil akhir dari desain template.<br />
<br />
<b> <a href="http://www.pimp-my-profile.com/generators/blogger.php" target="_blank"> Pimp-My-Profile</a></b><br />
<b>Template generator</b> ini tampil menggunakan tab menu sederhana, kita dapat memulai membuat template dengan memilih beberapa fasilitas yang sudah disediakan. Sebelum mencoba tools ini pastikan kita menggunakan browser versi IE6 atau versi diatasnya, Firefox dan Opera.<br />
<br />
<a href="http://3.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZG7m67I/AAAAAAAAE40/U1iXejq0rOc/s1600-h/pimp-my-profile.jpeg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5396006576784337842" src="http://3.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZG7m67I/AAAAAAAAE40/U1iXejq0rOc/s400/pimp-my-profile.jpeg" style="cursor: pointer; display: block; height: 240px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a> <br />
<b> <a href="http://psyc.horm.org/#PsycHo%21" target="_blank">PsycHo - psychogenesis</a></b><br />
Kita dapat merancang blogger template sendiri mulai dari header hingga sampai ke footer. Yang jelas kita tidak harus memiliki pengetahuan lebih tetang HTML, cukup mengaturnya langsung melalui beberapa setting yang tesedia. Seperti yang dikatakan pembuatnya, waktu yang kita habiskan untuk mendesain sebuah template kurang lebih hanya 10 menit. <br />
<br />
<a href="http://2.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZV9gGfI/AAAAAAAAE48/GdnyW-2yCEo/s1600-h/PsycHo.jpeg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5396006580818811378" src="http://2.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZV9gGfI/AAAAAAAAE48/GdnyW-2yCEo/s400/PsycHo.jpeg" style="cursor: pointer; display: block; height: 240px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a> <br />
<b><a href="http://www.pagecolumn.com/1_col_generator.htm" target="_blank"> Page Column Layout Generator</a></b><br />
Generator ini menyediakan berbagai macam pililhan column, mulai dari generator untuk template 1 coloums bahkan sampai 5 Column juga tersedia. Beberapa fitur lain diantarnya:<br />
<ul><li>Liquid design, no tables, no javascript, pure layers and css.</li>
<li>Visual layout and backgroud color design, WYSIWYG</li>
<li>Cross browser compatibility</li>
<li>Compact CSS code, reduce 25% of length</li>
</ul><a href="http://4.bp.blogspot.com/_C6KkooKXCEw/SuJ3Yyk81bI/AAAAAAAAE4s/IfRNLIGzJDk/s1600-h/pagecolumn.jpeg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5396006571320595890" src="http://4.bp.blogspot.com/_C6KkooKXCEw/SuJ3Yyk81bI/AAAAAAAAE4s/IfRNLIGzJDk/s400/pagecolumn.jpeg" style="cursor: pointer; display: block; height: 240px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a> <br />
<b><a href="http://e-infotainment.com/trixapps/trixtg/" target="_blank">Trix Blogspot Template Generator</a></b> TrixTG v1 adalah tool untuk membantu kita mendesain template untuk Blogspot. Memang antarmuka tidak sebagus yang kita harapkan, tetapi fungsionalitas yang disediakan oleh generator template ini sangat baik. <br />
<br />
<a href="http://1.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZhIOLhI/AAAAAAAAE5E/ME92MS4iVnI/s1600-h/trix.jpeg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5396006583816564242" src="http://1.bp.blogspot.com/_C6KkooKXCEw/SuJ3ZhIOLhI/AAAAAAAAE5E/ME92MS4iVnI/s400/trix.jpeg" style="cursor: pointer; display: block; height: 240px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a> <br />
Selamat mencoba aja :)Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-6105075341031278182010-06-12T22:55:00.003+07:002010-07-17T14:25:16.879+07:00cara menghilangkan navbar blogger<div style="color: white;"><span class="Apple-style-span" style="border-collapse: separate; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; text-align: justify;"><b>Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.<span class="Apple-converted-space"> </span><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :<span class="Apple-converted-space"> </span></b><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><b>/* hilangkan navbar<br style="margin: 0px; padding: 0px;" />----------------------------- */<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />#navbar-iframe {<br style="margin: 0px; padding: 0px;" />height:0px;<br style="margin: 0px; padding: 0px;" />visibility:hidden;<br style="margin: 0px; padding: 0px;" />display:none<br style="margin: 0px; padding: 0px;" />}</b><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Atau bisa juga menaruh kode berikut persis di bawah kode<span class="Apple-converted-space"> </span><span class="Apple-converted-space"> </span><body> :<span class="Apple-converted-space"> </span><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><style type="text/css">
<br style="margin: 0px; padding: 0px;">#navbar-iframe {display:none;}<br style="margin: 0px; padding: 0px;">
</style><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :<span class="Apple-converted-space"> </span><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br />
<li style="margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Untuk template klasik</b></li><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</span></span></div><ol style="color: white; margin: 0px 0px 0px 5px; padding: 0px 0px 10px;"><span class="Apple-style-span" style="border-collapse: separate; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; text-align: justify;">
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Sign in di blogger</li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik menu<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Template</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik menu<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Edit HTML</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman</li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Copy kode berikut lalu paste di atas kode<span class="Apple-converted-space"> </style></span><code style="margin: 0px; padding: 0px;"></code></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />/* hilangkan navbar<br style="margin: 0px; padding: 0px;" />----------------------------- */<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />#navbar-iframe {<br style="margin: 0px; padding: 0px;" />height:0px;<br style="margin: 0px; padding: 0px;" />visibility:hidden;<br style="margin: 0px; padding: 0px;" />display:none<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik tombol<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Simpan Perubahan Template</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Selesai.</li>
</span></span></ol><div style="color: white;"><span class="Apple-style-span" style="border-collapse: separate; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; text-align: justify;"><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br />
<li style="margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Untuk template baru</b></li><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</span></span></div><ol style="color: white; margin: 0px 0px 0px 5px; padding: 0px 0px 10px;"><span class="Apple-style-span" style="border-collapse: separate; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; text-align: justify;">
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Sign in di blogger</li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik menu<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Layout</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik menu<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Edit HTML</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik link bertuliskan<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Download Template Seluruhnya</b>, silahkan save dulu untuk backup data</li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Copy kode berikut lalu paste di atas kode<span class="Apple-converted-space"> </span><code style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px;">]]></b:skin></span></code></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />/* hilangkan navbar<br style="margin: 0px; padding: 0px;" />----------------------------- */<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />#navbar-iframe {<br style="margin: 0px; padding: 0px;" />height:0px;<br style="margin: 0px; padding: 0px;" />visibility:hidden;<br style="margin: 0px; padding: 0px;" />display:none<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Klik tombol<span class="Apple-converted-space"> </span><b style="margin: 0px; padding: 0px;">Simpan Template</b></li>
<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />
<li style="margin: 0px 0px 0px 27px; padding: 0px 0px 5px;">Selesai.</li>
</span></span></ol><div style="color: white;"><span class="Apple-style-span" style="border-collapse: separate; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; text-align: justify;"><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Selamat menikmati blog tanpa navbar !</span></span></div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-37087920059522581512010-06-07T15:09:00.000+07:002010-06-07T15:09:06.048+07:00Bagaimana melakukan ujicoba mengedit CSS Template Blogger tanpa harus membuka dan menyimpan halaman Edit HTML berulang kali? <a href="http://4.bp.blogspot.com/_C6KkooKXCEw/R-PbOxdLZbI/AAAAAAAABzk/jMCrDkMACAg/s1600-h/Edit+CSS.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" height="148" id="BLOGGER_PHOTO_ID_5180225043246572978" src="http://4.bp.blogspot.com/_C6KkooKXCEw/R-PbOxdLZbI/AAAAAAAABzk/jMCrDkMACAg/s400/Edit+CSS.gif" style="cursor: pointer; float: right; margin: 0pt 0pt 10px 10px;" width="201" /></a>Pengaturan CSS template blogger merupakan hal utama untuk mempercantik tampilan halaman blog, namun acap kali mengedit CSS kadang melelahkan dan membosankan, terutama terlalu seringnya melakukan bongkar pasang kode, edit sana sini, belum lagi kita membuka dan menyimpan halaman Edit HTML berulang kali, tentu saja buang2 waktu..yang jelas kita tidak pernah puas sampai menemukan tampilan terbaik. Tuntutan utama tampilan blog tentu saja tidak lepas dari bagaimana agar blog kita bisa tampil sempurna di semua browser, Mengambil kata para WebMaster "untuk apa tampil cantik di browser Mozilla dan koloninya tapi tampil ancur ancuran di browser lainnya", jelas satu point akan berkurang dan tentu rekan gak mau hal ini terjadi kan.<br />
<div class="fullpost"> <br />
<b>Apakah kita tetap memaksakan cara classic diatas? </b><br />
<br />
Ups tentu saja tidak...Pasti saya akan berusaha mencari solusi terbaik untuk pembaca setia blog ini. Cukup cuap-cuapnya OM...OK lanjut...Sebenarnya ada cara yang sangat mudah mengedit CSS tanpa harus masuk bolak balik ke halaman Edit HTML, dimana kita hanya perlu membuka halaman blog lalu mengedit kode CSS secara live (Online) tanpa perlu takut terjadi kesalahan dan error, yang kita perlukan hanyalah tools buatan Chrispederick yang di beri nama Web Developer tools ini lah yang akan membantu meringankan tugas kita mengedit Code CSS di blogger. Cuma blogger? tidak hanya blogger, hampir semua dukungan pada kode CSS bisa digunakan. Perlu rekan ketahui tools ini hanya support untuk Browser Seamonkey, Firefox dan Flock (Firefox extention). Tools <b>Web Developer</b> juga tidak hanya untuk mengedit CSS, namum masih banyak fungsi lain yang bisa digunakan.<br />
<br />
<b>Bagaimana mengedit CSS dengan Web Developer?</b><br />
<br />
<br />
1. Aktifkan Browser Firefox atau Flock lalu Download <b> Web Developer </b><br />
2. Kemudian lakukan installasi sesuai petunjuk, jika sudah terinstall maka akan muncul Toolbar <b>Web Developer </b>dengan munculnya menu icon<br />
<a href="http://1.bp.blogspot.com/_C6KkooKXCEw/R-Pc2BdLZdI/AAAAAAAABz0/2mX3nRtI0x0/s1600-h/Edit+CSS1.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img alt="" border="0" height="30" id="BLOGGER_PHOTO_ID_5180226817068066258" src="http://1.bp.blogspot.com/_C6KkooKXCEw/R-Pc2BdLZdI/AAAAAAAABz0/2mX3nRtI0x0/s400/Edit+CSS1.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" width="289" /></a> 3. Untuk mengedit CSS tuju saja ke icon <b>CSS</b> -> lalu klik <b>Edit CSS</b> maka akan muncul jendela baru Edit CSS<br />
<a href="http://3.bp.blogspot.com/_C6KkooKXCEw/R-PcQhdLZcI/AAAAAAAABzs/7pKE-iW_sBI/s1600-h/Edit+CSS2.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img alt="" border="0" height="180" id="BLOGGER_PHOTO_ID_5180226172822971842" src="http://3.bp.blogspot.com/_C6KkooKXCEw/R-PcQhdLZcI/AAAAAAAABzs/7pKE-iW_sBI/s400/Edit+CSS2.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" width="218" /></a> 4. Ada beberapa tab pilihan yang bisa digunakan untuk mencoba mengedit CSS, sebaiknya langsung tuju ke <b>Embedded Styles </b>disinilah Code CSS Blogger yang siap kita acak-acak tanpa takut terjadi kesalahan.<br />
<a href="http://4.bp.blogspot.com/_C6KkooKXCEw/R-Pd3xdLZfI/AAAAAAAAB0E/lrT8hiOOHz0/s1600-h/Edit+CSS4.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img alt="" border="0" height="183" id="BLOGGER_PHOTO_ID_5180227946644465138" src="http://4.bp.blogspot.com/_C6KkooKXCEw/R-Pd3xdLZfI/AAAAAAAAB0E/lrT8hiOOHz0/s400/Edit+CSS4.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" width="371" /></a> 5. Untuk mempermudah mengetahui lokasi kode CSS yang ingin di edit, rekan tinggal mengaktifkan saja fungsi <b>Style Information</b> caranya klik icon <b>CSS</b> -> lalu klik <b>Style Information.</b><br />
<a href="http://2.bp.blogspot.com/_C6KkooKXCEw/R-Pc2RdLZeI/AAAAAAAABz8/_i_ydRyF3ck/s1600-h/Edit+CSS3.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img alt="" border="0" height="180" id="BLOGGER_PHOTO_ID_5180226821363033570" src="http://2.bp.blogspot.com/_C6KkooKXCEw/R-Pc2RdLZeI/AAAAAAAABz8/_i_ydRyF3ck/s400/Edit+CSS3.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" width="218" /></a> 6. Jangan lupa arahkan mouse untuk mencari lokasinya, pada jendela baru akan muncul informasi dari kode CSS yang ditemukan<br />
<a href="http://1.bp.blogspot.com/_C6KkooKXCEw/R-Pd4BdLZgI/AAAAAAAAB0M/YH-p-acL3K4/s1600-h/Edit+CSS5.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img alt="" border="0" height="171" id="BLOGGER_PHOTO_ID_5180227950939432450" src="http://1.bp.blogspot.com/_C6KkooKXCEw/R-Pd4BdLZgI/AAAAAAAAB0M/YH-p-acL3K4/s400/Edit+CSS5.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" width="288" /></a> <br />
7. Silahkan diacak-acak kode CSS kalian sampe ancur, kalo masih ada kesalahan dan ingin mengedit kembali, tinggal tutup saja lalu buka kembali Edit CSS-nya, mudah khan :)<br />
<br />
Sekali lagi yang perlu rekan perhatikan bahwa tools diatas hanyalah alat bantu untuk mempermudah kita mencoba mengedit CSS, Tools diatas bukan otomatis melakukan perubahan, untuk hasilnya akhir kode CSS yang sudah diedit tetap harus di simpan secara manual pada halaman Edit HTML. Maaf kalo saya tidak memberikan infomasi lengkap mengenai Cara Coding CSS Syntax pada template blogger, jika ada pertanyaan silahkan tulis pada kolom komentar :)<br />
</div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-82396712061417662852010-06-07T14:25:00.000+07:002010-06-07T14:25:41.128+07:00translate google untuk blog kamusilahkan copy kode dibawah ini lalu pasang di blog anda<br />
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script></div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-13343210762486214312010-06-07T13:57:00.001+07:002010-06-07T14:34:26.045+07:00Cara memasang iklan diatas atau dibawah artikelBerikut ini adalah contoh screenshot Iklan diatas postingan :<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_beEpWOXwLJE/S7Vnqr_zStI/AAAAAAAAApE/ZdwGN4SrTyU/s1600/iklan-diatas-postingan.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_beEpWOXwLJE/S7Vnqr_zStI/AAAAAAAAApE/ZdwGN4SrTyU/s320/iklan-diatas-postingan.gif" /></a></div><br />
<br />
Berikut ini cara memasang iklan diatas atau dibawah artikel :<br />
<br />
<ul><li>Pertama siapkan code iklan (iklan PPC/Adsense) yang sudah di <a href="http://go-facebooker.blogspot.com/2010/05/cara-menuliskan-scriptkode-dalam.html">Encode/Parse</a></li>
<li>Login di account blogger.</li>
<li>Klik Layout - Edit HTML</li>
<li>Klik / centang Expand Widget Templates</li>
<li>Cari tag "post.body" dengan cara menekan tombol "CTRL+F" , ketikkan tag "<b>post.body</b>" .</li>
<li>Paste kode iklan dibawah atau diatas tag <b>post.body</b> , jangan lupa untuk mengawal dengan <p> diakhiri </p>, maksudnya untuk membuat area paragraf baru.</li>
<li>Klik save template.</li>
</ul>Jika kamu ingin memasang diatas postingan artikel tinggal paste kode iklan diatas tag post.body, dan sebaliknya jika ingin memasang iklan dibawah artikel maka paste code iklan dibawah tag <b>post.body</b> .<br />
<br />
<br />
<br />
Selamat mencobaAdminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-5853241938692924202010-06-07T13:20:00.002+07:002010-06-07T13:20:35.461+07:00Tips/Cara Membuka Website/Situs Web Yang Diblokir/Terblokir - Proxy Anonymous Browsing Ketika kita sedang asyik-asyik browsing di internet terkadang ada situs yang tidak bisa kita akses karena suatu hal baik secara tidak sengaja seperti putusnya koneksi jaringan internet atau secara sengaja untuk membatasi penggunaan internet penggunanya.Sebaiknya cara ini tidak digunakan untuk mengakses link situs-situs web yang dilarang oleh pemerintah atau pun dilarang oleh pihak lain yang berwenang seperti pengelola kampus, pengelola sekolah, pengelola lab komputer, pengelola warnet, pengelola hotspot, isp, dan lain sebagainya.<br />
Macam / Jenis Situs Web Yang Sering Diblokir :<br />
- Website Porno<br />
- Situs jejaring sosial<br />
- Situs pelanggar hak cipta<br />
- permainan game online / gamenet<br />
- Chating di internet<br />
- Situs fitnah, propaganda, pelecehan, dsb.<br />
Caranya untuk membuka akses blokir cukup mudah karena hanya menggunakan jasa website pihak ke tiga untuk membantu membukakan jalan kita dengan proxy. <br />
Buka situs-situs contoh di bawah ini dan masukkan link url situs web yang mau kita kunjungi namun tidak bisa.<br />
- <a href="http://anonymouse.org/" target="_blank" title="http://anonymouse. ">anonymouse.org</a><br />
- <a href="http://proxybrowsing.com/" target="_blank" title="http://proxybrowsing. ">proxybrowsing.com</a><br />
- <a href="http://w3privacy.com/" target="_blank" title="http://w3privacy. ">w3privacy.com</a><br />
- <a href="http://ninjacloak.com/" target="_blank" title="http://ninjacloak. ">ninjacloak.com</a><br />
- <a href="http://the-cloak.com/" target="_blank" title="http://the-cloak. ">the-cloak.com</a><br />
- <a href="http://shadowsurf.com/" target="_blank" title="http://shadowsurf. ">shadowsurf.com</a><br />
- <a href="http://proxify.com/" target="_blank" title="http://proxify. ">proxify.com</a> dll<br />
Dengan cara ini pun kita bisa berselancar di dunia maya dengan aman karena informasi tentang di mana kita mengakses internet, catatan kunjungan, informasi pribadi kita, dsb bisa dirahasiakan dengan baik. Namun mungkin ada beberapa situs yang tidak mau menerima koneksi semacam ini. Selain itu jangan gunakan teknik ini untuk tindak kriminal / kejahatan karena yang pasti akan terungkap juga.Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-1262332980108989222010-06-05T14:12:00.004+07:002010-06-07T13:15:59.376+07:00megaupload.com search engine<div style="color: #666666; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s1600/AAAAAA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s400/AAAAAA.jpg" width="400" /></a></div><br />
</div><div style="color: #666666; text-align: center;">Masukkan kata kunci Anda di kolom berikut ini untuk mencari & download file yang<br />
anda inginkan dari yang LEGAL atau ILEGAL seperti<br />
<span class="short_text" id="result_box"><span title="">Files, Video, Musik, Foto, Buku, Archive, Program, Web, Mobile. Software</span></span><br />
<span class="short_text" id="result_box"><span title="">GRATIS VIA MEGAUPLOAD.COM</span></span>:<br />
<br />
</div><div style="text-align: center;"><form action="http://go-facebooker.blogspot.com/2010/06/megauploadcom-search-engine-mesin.html" id="cse-search-box"><input name="cx" type="hidden" value="012074213344869122459:juoywwxi6zs" /><br />
<input name="cof" type="hidden" value="FORID:11" /><br />
<input name="ie" type="hidden" value="UTF-8" /><br />
<input name="q" size="80" type="text" /><br />
<br />
<input name="sa" type="submit" value="Telusuri" /><br />
<br />
</form></div><div style="text-align: center;"><script src="http://www.google.com/cse/brand?form=cse-search-box&lang=id" type="text/javascript">
</script><br />
<br />
</div><div id="cse-search-results" style="text-align: center;"></div><div style="text-align: center;"><script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script><br />
<br />
</div><div style="text-align: center;"><script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">
</script></div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0tag:blogger.com,1999:blog-1117568792750015519.post-149560411617756392010-06-05T13:57:00.004+07:002010-06-07T13:16:54.574+07:00rapidshare.com search engine<div style="color: #666666; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s1600/AAAAAA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhvRqGoEa_VScGt7C2BEAG5wbvyAE8VjFoUyEukTkqXElrJ_0xICJBMxOhd__fBvP_SFT5FVgDC241Daa_qEgJ9Oq2jzTs2htRhM83hTqsY2SJFCMkIYCqC0YZsANNzBNxV1zRlpSx5Ok/s400/AAAAAA.jpg" width="400" /></a></div>Masukkan kata kunci Anda di kolom berikut ini untuk mencari & download file yang<br />
anda inginkan dari yang LEGAL atau ILEGAL seperti<br />
<span class="short_text" id="result_box"><span title="">Files, Video, Musik, Foto, Buku, Archive, Program, Web, Mobile. Software</span></span><br />
<span class="short_text" id="result_box"><span title="">GRATIS VIA RAPIDSHARE.COM</span></span>:<br />
</div><div style="text-align: center;"><form action="http://go-facebooker.blogspot.com/2010/06/rapidsharecom-search-engine-mesin.html" id="cse-search-box"><input name="cx" type="hidden" value="012074213344869122459:xakdm3z0ojc" /><br />
<input name="cof" type="hidden" value="FORID:11" /><br />
<input name="ie" type="hidden" value="UTF-8" /><br />
<input name="q" size="80" type="text" /><br />
<br />
<input name="sa" type="submit" value="Telusuri" /><br />
<br />
</form></div><div style="text-align: center;"><script src="http://www.google.com/cse/brand?form=cse-search-box&lang=id" type="text/javascript">
</script><br />
<br />
</div><div id="cse-search-results" style="text-align: center;"></div><div style="text-align: center;"><script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script><br />
<br />
</div><div style="text-align: center;"><script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">
</script></div>Adminhttp://www.blogger.com/profile/04179267679710967128noreply@blogger.com0