tag:blogger.com,1999:blog-13281642184513221652024-02-19T02:04:41.159-08:00Search Engine OneFree Tutorial | Sharing | Free Desain Blog and Free DownloadMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.comBlogger180125tag:blogger.com,1999:blog-1328164218451322165.post-26650734269751180402014-01-14T21:37:00.002-08:002014-01-14T21:37:27.602-08:00DocumentDownload file disini
<a href=https://sites.google.com/site/rmunnajat/home/gala/snowwhite.js?attredirects=0&d=1>Download</a>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-22595583416138572482012-05-30T02:20:00.002-07:002012-05-30T02:20:34.543-07:00Slide Open Egg Bookmarking Gadget Untuk Blogger<div class="MsoNormal"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3pkfyb9CWxYoVnYyyFHh8yEpyXihn20EhJ1fSFUYLmRFlHxxdXGv1RYpX3o8N7PFvO82CO0NMtR2onTNBMEt6UbD2zpp4q4n4msGn8AfKvIh6HzfrZaB1EXtcWYPI1FdkqIBsWuvALWRf/s1600/share-this-slide-out-egg-bookmarking-gadget-blogger-blogs.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3pkfyb9CWxYoVnYyyFHh8yEpyXihn20EhJ1fSFUYLmRFlHxxdXGv1RYpX3o8N7PFvO82CO0NMtR2onTNBMEt6UbD2zpp4q4n4msGn8AfKvIh6HzfrZaB1EXtcWYPI1FdkqIBsWuvALWRf/s200/share-this-slide-out-egg-bookmarking-gadget-blogger-blogs.png" width="200" /></a>1.Login ke akaun blogger anda.</div><div class="MsoNormal">2.Pergi ke Dashboard >> Design >> Edit HTML.<br />
<b><span style="color: red;"><i>PS: Backup dulu template anda</i></span></b></div><div class="MsoNormal">3.Tick Checkbox pada "Expand Widget Templates".</div><div class="MsoNormal">4.Klik Ctrl+F untuk mencari kod </head></div><div class="MsoNormal">5.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod </head></div><div class="MsoNormal"><br />
</div><blockquote class="tr_bq"><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/></blockquote><div class="MsoNormal"> 6.Klik Ctrl+F untuk mencari kod <span style="text-align: -webkit-auto;"></body></span></div><div class="MsoNormal">7.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod <span style="text-align: -webkit-auto;"></body></span></div><blockquote class="tr_bq"><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script></blockquote><div class="MsoNormal"> <span style="font-family: inherit; font-size: 11pt; line-height: 115%;">8.Save dan lihat hasilnya.....</span></div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-11457519371674587912012-05-30T02:19:00.000-07:002012-05-30T02:19:25.170-07:00Add the Slide Open Heart Bookmarking Gadget<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNMKWWelL_l95eS9pECq8KdCKpvQ2A2gWSrZrhy10XfJFoMq82Gf-Vdpz_CK-jpKcR4x9KpOte8_131q6viug7m_2KIF9wEUNjTmquFjpcdz6FxR4htVGRQaGWutjMIzFFcXp0lYb_P4/s1600/blogger-share-this-slide-out-heart-bookmarking-gadget.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNMKWWelL_l95eS9pECq8KdCKpvQ2A2gWSrZrhy10XfJFoMq82Gf-Vdpz_CK-jpKcR4x9KpOte8_131q6viug7m_2KIF9wEUNjTmquFjpcdz6FxR4htVGRQaGWutjMIzFFcXp0lYb_P4/s200/blogger-share-this-slide-out-heart-bookmarking-gadget.png" width="200" /></a><span style="font-family: inherit;"></span><span style="font-family: inherit;"> </span><br />
<br />
<br />
<span style="font-family: inherit;">1.Login ke akaun blogger anda.</span><br />
<div class="MsoNormal"><span style="font-family: inherit;">2.Pergi ke <b>Dashboard >> Design >> Edit HTML</b>.</span><br />
<span style="color: red; font-family: inherit;"><i>PS: Backup dulu Template anda</i></span></div><div class="MsoNormal"><span style="font-family: inherit;">3.Tick Checkbox pada "Expand Widget Templates".</span></div><div class="MsoNormal"><span style="font-family: inherit;">4.Klik Ctrl+F untuk mencari kod </head></span></div><div class="MsoNormal"><span style="font-family: inherit;">5.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod </head></span></div><div style="text-align: left;"><blockquote class="tr_bq"><span style="font-family: inherit;"><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/></span><span style="font-family: inherit;"> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/></span><span style="font-family: inherit;"> <script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script></span><span style="font-family: inherit;"> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/></span></blockquote></div><div class="MsoNormal"><span style="font-family: inherit;"> </span><span style="font-family: inherit;">6.Klik Ctrl+F untuk mencari kod </body></span></div><div class="MsoNormal"><span style="font-family: inherit;">7.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod </body></span></div><blockquote class="tr_bq"><span style="line-height: 115%;"><span style="font-family: inherit;"><div style='position: fixed; bottom: 2%; left: 2%;'></span></span><span style="line-height: 115%;"><span style="font-family: inherit;"> <div class='shareEgg' id='shareThisShareHeart'/></span></span><span style="line-height: 115%;"><span style="font-family: inherit;"> </div></span></span><span style="line-height: 115%;"><span style="font-family: inherit;"> <script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script></span></span></blockquote><div class="MsoNormal"><span style="font-family: inherit; line-height: 115%;">8.Save dan lihat hasilnya.....</span></div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-25254568331026539372012-05-30T02:18:00.000-07:002012-05-30T02:18:01.292-07:00Back to Top - Smooth Scrolling and fade Out1. Pergi ke Dashboard >> Design >> Page Element >> Add a Gadget >> HTML/Javascript<br />
<span style="color: red;">(<b>ATAU</b> Dashboard >> Layout)</span><br />
2. Copy(Ctrl+C) dan paste(Ctrl+V) code dibawah pada ruang HTML/Javascript<br />
<br />
<br />
<br />
<blockquote class="tr_bq"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script><br />
$(document).ready(function(){<br />
// hide #back-top first<br />
$("#back-top").hide();<br />
<br />
// fade in #back-top<br />
$(function () {<br />
$(window).scroll(function () {<br />
if ($(this).scrollTop() > 100) {<br />
$('#back-top').fadeIn();<br />
} else {<br />
$('#back-top').fadeOut();<br />
}<br />
});<br />
// scroll body to 0px on click<br />
$('#back-top a').click(function () {<br />
$('body,html').animate({<br />
scrollTop: 0<br />
}, 800);<br />
return false;<br />
});<br />
});<br />
});<br />
</script><br />
<style><br />
#back-top {<br />
position: fixed;<br />
bottom: 30px;<br />
margin-left: -170px;<br />
}<br />
#back-top a {<br />
width: 45px;<br />
display: block;<br />
text-align: center;<br />
font: 8px/100% Arial, Helvetica, sans-serif;<br />
text-transform: uppercase;<br />
text-decoration: none;<br />
color: #666;<br />
/* transition */<br />
-webkit-transition: 1s;<br />
-moz-transition: 1s;<br />
transition: 1s;}<br />
#back-top a:hover {color: #000;}<br />
/* arrow icon undefinedspan tag) */<br />
#back-top span {<br />
width: 45px;<br />
height: 45px;<br />
display: block;<br />
margin-bottom: 7px;<br />
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Qjf8-jaSs013Vt_eIf7A1a07mliuDiagoGbDvROo7LP4fQ7IrrTZPjmEOA1Ic7MC2uct_cojTtM43klOkQvrJFGuG4-Ahd2MouKq3ODeQJGVc-hTVzREIKiES_QjoRzmqTiyWaS9mzBx/s1600/up-arrow.png) no-repeat center center;<br />
/* rounded corners */<br />
-webkit-border-radius: 5px;<br />
-moz-border-radius: 5px;<br />
border-radius: 5px;<br />
/* transition */<br />
-webkit-transition: 1s;<br />
-moz-transition: 1s;<br />
transition: 1s;}<br />
#back-top a:hover span { background-color: #000;}<br />
</style><br />
<div id="back-top" style="display: block; "><br />
<a href="#top"><span></span><font><font>Top</font></font></a><br />
</div></blockquote><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="margin-bottom: 0.0001pt;">3. Save dan lihat hasilnya.......</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-56470554152508317342012-05-30T02:10:00.000-07:002012-05-30T02:10:56.831-07:00Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini. Widget ini saya beri nama <a href="http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html">Fitur Slide Accordion</a>. Selain tampilannya yang elegan, <a href="http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html">Fitur Slide Accordion</a> ini banyak menampilkan animasi slide, yang tentunya banyak sekali manfaatnya buat melengkapi <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-web.html" target="_blank">web</a> ataupun <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html" target="_blank">blog</a> anda. Misalnya <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-web.html" target="_blank">web</a> atau <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html" target="_blank">blog</a> anda bergerak dibidang desain interior, eksterior, otomotif, pakaian, makanan, musik, atau bahkan <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-web.html" target="_blank">web</a> atau <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html" target="_blank">blog</a> anda menampilkan game online. Yang jelas <a href="http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html">Fitur Slide Accordion</a> ini bisa anda gunakan untuk menerangkan profil <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-web.html" target="_blank">web</a> atau <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html" target="_blank">blog</a> anda. Dan <a href="http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html">Fitur Slide Accordion</a> ini menggunakan fitur CSS dan beberapa HTML, sehingga widget ini bekerja sangat ringan. Mantab kan.....?<br />
<br />
Silahkan anda <a href="http://contohdemo.blogspot.com/2011/08/cara-buat-fitur-slide-accordion.html" target="_blank"><b style="color: red;">LIHAT DEMONYA DISINI</b></a><br />
<br />
Bila nda berminat menggunakan <a href="http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html">Fitur Slide Accordion</a> ini, silahkan anda bisa ikuti langkah - langkah berikut :<br />
<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Dan KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/07/cara-buat-slide-menu-horisontal-dibawah.html"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.<br />
<br />
<div style="text-align: left;"> 5. Jangan lupa Klik tombol "<span class="Apple-style-span" style="color: #3333ff;">Expand Widget Templates</span>"</div><div class="separator" style="clear: both; text-align: center;"> </div></div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/07/cara-buat-slide-menu-horisontal-dibawah.html"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFJbhYYyQxR-BU5rkmUoTFzppLn_RziqDgWVR7d92-NrjzF3o9HBU-dC7bfQQVm6MZPpf3RneI8NOwrqPFAtnY1hs-1hIPkx14tFhP9upmAnghEjCVHxCKWyzh9pw_igjJ9_1HR9A6l6h/s320/Expand.jpg" width="320" /></a></div><br />
6. Cari kode di bawah ini atau yang mirip dengan kode ini :<br />
<div style="color: red; text-align: center;"> <fieldset> <b><span style="color: red;"></head></span></b></fieldset></div><br />
7. Copy kode dibawah ini dan paste sebelum kode <b><span style="color: red;"></head></span></b>:<br />
<div style="text-align: center;"> <fieldset> <textarea cols="52" name="txt" rows="3" style="display: inline;"><style type='text/css'> /*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */ .ElegantAccordion{ position:relative; width:1000px; height:385px; margin:auto; overflow:hidden; background-color:#000; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qafW6fnorEGJjetFWjdDyisS_RAKeXO6xal0sYuB5r92Zu8FhClWwm-V7cJ6aihJ1LMH86puempR6pxqaApN-dBWac9afmd7LbUpBQ49U8VU-7AVl2go3nHZp1-1obseP5z88c6fgs9U/s1000/background-image.jpg) no-repeat bottom right; background-repeat:no-repeat; background-position:50% 50%; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px 4px 4px 4px; } .titel-ElegantAccordion{ display: block; position:absolute; width:100%; height:80px; top:0px; float: left; font-size:100px; font-family:Edwardian Script ITC; font-weight:normal; color:#B85BED; line-height:80%; padding:30px 20px; cursor:pointer; text-shadow:4px 1px 1px #000; text-decoration:none; color:#FFBA00; z-index:999999; } .titel-ElegantAccordion a:link { color:#ddd; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .titel-ElegantAccordion a:visited { color:#339025; text-decoration:none; } .titel-ElegantAccordion a:hover { color:#C3E9A4; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .reference{ clear:both; top:250px; left:0px; position:absolute; text-align:right; font-size:10px; font-family: Cambria, serif; font-weight:bold; line-height: 1em; width:350px; padding:0px 20px 5px; background-color:#fff; -moz-box-shadow:1px 3px 15px #bbb; -webkit-box-shadow:1px 3px 15px #bbb; box-shadow:1px 3px 15px #bbb; opacity:0.7; } .reference p a{ text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#333; text-decoration:none; font-size:10px; font-family: Cambria, serif; line-height: 1em; } .reference p a:hover{color:#347D29;} ul.accordion{ list-style:none; position:absolute; right:0px; top:-15px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; } ul.accordion li{ float:right; width:115px; height:380px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.accordion li:hover{ float:right; width:480px; height:380px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.accordion li.bleft{ border-left:2px solid #fff; } ul.accordion li .heading{ background-color:#fff; padding:10px; margin-top:315px; opacity:0.9; text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:14px; color:#444; text-align:center; text-shadow:-1px -1px 1px #ccc; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.accordion li:hover .heading{ background-color:#fff; padding:10px; margin-top:-50px; } ul.accordion li .description{ position:absolute; width:480px; height:1px; bottom:-2px; left:0px; display:blok; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } ul.accordion li:hover .description{ position:absolute; width:480px; height:175px; bottom:0px; left:0px; display:blok; } ul.accordion li .description h2{ text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:45px; color:#444; text-align:left; margin:0px 0px 15px 20px; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{ line-height:14px; margin:10px 22px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a{ position:absolute; bottom:5px; left:400px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; } ul.accordion li .description a:hover{ position:absolute; bottom:5px; left:400px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; color:#333; text-decoration:none; font-weight: bold; } ul.accordion li .bgDescription{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXVgGArUsIxBrf22r0IJwIXn4AXWXmoyxk6rShAPdVqgndVzPilPTUzQHm7NlCESn1j3ZJstNyDy0Zhnr1LODKQOjFbjEJJJGsQljjQueC0LpA6t2qzSBS6bO67hTDH4zeZwSaXw9QqpZ/s500/bgDescription.png) repeat-x top left; height:1px; position:absolute; bottom:-20px; left:0px; width:100%; display:blok; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } ul.accordion li:hover .bgDescription{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXVgGArUsIxBrf22r0IJwIXn4AXWXmoyxk6rShAPdVqgndVzPilPTUzQHm7NlCESn1j3ZJstNyDy0Zhnr1LODKQOjFbjEJJJGsQljjQueC0LpA6t2qzSBS6bO67hTDH4zeZwSaXw9QqpZ/s500/bgDescription.png) repeat-x top left; height:340px; position:absolute; bottom:0px; left:0px; width:100%; display:blok; } </style> </textarea></fieldset></div><br />
8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <style type='text/css'><br />
/*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */<br />
<br />
ul.accordion li.bg1{<br />
background-image:url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtQedAJbtkfFT8qCuWdi_FkgnKfLgX2qO8qZm28Ba4Klzsm_WTV-X1p4up99G8eRkjJsxrAlVoUK6o_WBWNFZEWWy6ytODM8f5ZRMfuUblKaWi0_aW_ggX2r2rMJGbcofNRzaAW3vVfMQ/s500/RUANG+mandi.jpg</span>);<br />
}<br />
<br />
ul.accordion li.bg2{<br />
background-image:url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLv7FXo0k1pfo5BjnupA8Qa6RuDuLBntIYFJFnJMy-Onw2PCIGkpeGf_jDdRd1Hu2jje4l2Vcp5CflQT71xYqUm2cGMx_2Jf5UBLOx0DQs06Au-WNWPGZzLyoIFLSdQvVqSTixFOkjoZT/s500/DAPUR.jpg</span>);<br />
}<br />
ul.accordion li.bg3{<br />
background-image:url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAQvoT9cqmnW1YFLtgc8hEcyHxGEVYqQBnzXZKv79-pPt2PCf4KXN8MczLXwJT3LTprep1MUgsITwtnPJONBxo7vyYcRll64-dBzioTHaIX2EKDBRki4ACGG2r4na89vszvk9qAU8rfTf/s500/RUANG+makan.jpg</span>);<br />
}<br />
ul.accordion li.bg4{<br />
background-image:url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0tRPjLUoZqCKjNza4iRwxhF1MPJcQFwqLKtuX-R_d0xQVwf5xsAm1SNzvKu6SQNuMnpAMzbLUwH5_1khWkPomyw6TSB6BizOEsPthnyRPcM9L093Xtjp7Kfd9w3hL3EVITRkJKqvz9Vh/s500/KAMAR+TIDUR.jpg</span>);<br />
}<br />
ul.accordion li.bg5{<br />
background-image:url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqpfsDeyr5x6qfPE3EXnWloAh0aRcEDTdcuSH6v93D5cs5bPbLuTORXkIa3LXbeX5SG_wwIKfysqEmy4jxiM5iKD2zy7jIgdmblfw22AYfUG-JjexLO0fSSn2zwp_Cfdo6kQgGxOqeQ9D/s500/RUANG+SANTAI+KELURGA.jpg</span>);<br />
}<br />
</style></fieldset></div><div style="color: red;"> <b>Catatan :</b></div><i><b>Teks warna merah diatas adalah ULR gambar yang akan tampil pada Fitur Slide Accordion. Silahkan ganti dengan milik anda.</b></i><br />
<br />
9. SIMPAN TEMPLATE.<br />
<br />
<span class="fullpost">Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada</span> gadget yang ada dibawah header, ikuti langkah berikut :<br />
<br />
<div style="text-align: left;"> <span class="fullpost">1. Klik Rancangan dan pilih Elemen Laman</span></div><div class="separator" style="clear: both; text-align: center;"> <img border="0" height="77" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ44dxYZT8itXXFrf3D0l-CKtxLVO6MiDn7yVj-_Tr5Ho1WWJ3pnqwFqKiemjbzxW-6uR1scMp2RS7AvPpmoVk5tbX2fLJpdOW9YfMVY_aHIvmhor3zxLzmJSmMHVAb-PD_yLJDkjXlwxf/s320/Blogger+--+Edit+Tata+Letak_1295684510123.png" width="320" /></div><span class="fullpost">2. Tambah Gadget</span><br />
<div style="text-align: center;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIg4_WI6rW1KOSgcRb4hOd_8C4Xv8Ujrm7S0qhSrhOsTe4oQkv6DKpvqgtSGO1WQow8aHRn3DVhLYyoglBF0Fc9TiXDsN9zIjNjVN1dQsuNMCmzfUiskszMU84Sz0LjeHjTYCLewqrShI/s1600/Blogger+--+Edit+Tata+Letak_1295921407619.png" /></div><span class="fullpost"></span><br />
<div style="text-align: left;"> </div><div style="text-align: left;"> <span class="fullpost">3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript</span></div><div style="text-align: center;"> <img border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJiSSIcHUaBBjHqiqfgUQuHfG4X4W5Du3Lcx2d4S5fe3bt5Ln3efikUV4mixQ7AiHblHHJmQnixSspoi98MXzFJ-1vnREBBWh6LC8QsvuY-_i7KmetWZp0TGz87XrAdTL9vHv7IdYynfI9/s320/Blogger-+World+Brand+-+Tambahkan+Gadget_1295921930616.png" width="320" /><span class="fullpost"></span><br />
<span class="fullpost"></span></div><br />
<div style="text-align: left;"> <span class="fullpost">4. Copy dan paste kode dibawah ini pada gadget tersebut :</span></div><div style="color: #38761d; text-align: center;"> <div style="text-align: center;"> <fieldset> <span style="color: #38761d;"></span><span style="color: #38761d;"><div class="ElegantAccordion"><br />
<div class="titel-ElegantAccordion"><br />
<a href="<b><span style="color: red;">ULR BLOG</span></b>"><b style="color: #0b5394;">NAMA BLOG</b></a><br />
</div><br />
<div id="content"><br />
<div class="title"></div><br />
<br />
<div class="reference"><br />
<p><a href="<b style="color: red;">ULR ARTIKEL</b>"><b>JUDUL ARTIKEL</b></a></p><br />
<p><a href="</span><span style="color: #38761d;"><b style="color: red;">ULR ARTIKEL</b></span><span style="color: #38761d;">"><b>JUDUL ARTIKEL</b></a></p><br />
<p><a href="</span><span style="color: #38761d;"><b style="color: red;">ULR ARTIKEL</b></span><span style="color: #38761d;">"><b>JUDUL ARTIKEL</b></a></p><br />
<p><a href="</span><span style="color: #38761d;"><b style="color: red;">ULR ARTIKEL</b></span><span style="color: #38761d;">"><b>JUDUL ARTIKEL</b></a></p><br />
<p><a href="</span><span style="color: #38761d;"><b style="color: red;">ULR ARTIKEL</b></span><span style="color: #38761d;">"><b>JUDUL ARTIKEL</b></a></p><br />
</div><br />
<br />
<br />
<ul class="accordion" id="accordion"><br />
<br />
<li class="bg1"><br />
<div class="heading"><b style="color: magenta;">JUDUL ITEM 1</b></div><br />
<div class="bgDescription"></div><br />
<div class="description"><br />
<h2></span><span style="color: #38761d;"><b style="color: magenta;">JUDUL ITEM 1</b></span><span style="color: #38761d;"></h2><br />
<p><b style="color: orange;">INFORMASI SINGKAT ITEM 1</b></p><br />
<a href="<b style="color: red;">ULR ITEM 1</b> ">Read More</a><br />
</div><br />
</li><br />
<br />
<li class="bg2"><br />
<div class="heading"><b style="color: magenta;">JUDUL ITEM 2</b></div><br />
<div class="bgDescription"></div><br />
<div class="description"><br />
<h2><b style="color: magenta;">JUDUL ITEM 2</b></h2><br />
<p><b style="color: orange;">INFORMASI SINGKAT ITEM 2</b></p><br />
<a href="</span><b style="color: red;">ULR ITEM</b><span style="color: #38761d;"><b style="color: red;"> 2</b>">Read More</a><br />
</div><br />
</li><br />
<br />
<li class="bg3"><br />
<div class="heading"><b style="color: magenta;">JUDUL ITEM 3</b></div><br />
<div class="bgDescription"></div><br />
<div class="description"><br />
<h2><b style="color: magenta;">JUDUL ITEM 3</b></h2><br />
<p><b style="color: orange;">INFORMASI SINGKAT ITEM 3</b></p><br />
<a href="</span><b style="color: red;">ULR ITEM</b><span style="color: #38761d;"><b style="color: red;"> 3</b>">Read More</a><br />
</div><br />
</li><br />
<br />
<li class="bg4"><br />
<div class="heading"><b style="color: magenta;">JUDUL ITEM 4</b></div><br />
<div class="bgDescription"></div><br />
<div class="description"><br />
<h2><b style="color: magenta;">JUDUL ITEM 4</b></h2><br />
<p><b style="color: orange;">INFORMASI SINGKAT ITEM 4</b></p><br />
<a href="</span><b style="color: red;">ULR ITEM 4</b><span style="color: #38761d;">">Read More</a><br />
</div><br />
</li><br />
<br />
<li class="bg5"><br />
<div class="heading"><b style="color: magenta;">JUDUL ITEM 5</b></div><br />
<div class="bgDescription"></div><br />
<div class="description"><br />
<h2><b style="color: magenta;">JUDUL ITEM 5</b></h2><br />
<p><b style="color: orange;">INFORMASI SINGKAT ITEM 5</b></p><br />
<a href="</span><b style="color: red;">ULR ITEM 5</b><span style="color: #38761d;">">Read More</a><br />
</div><br />
</li><br />
<br />
</ul><br />
</div><br />
</div><br />
</div></span><span style="color: #38761d;"></span><span style="color: #38761d;"></span><span style="color: #38761d;"></span><span style="color: blue;"></span></fieldset></div></div><div style="color: red; text-align: left;"> <b>Catatam : </b></div><ul><li> Silahkan anda ganti Teks berwarna diatas.</li>
</ul>5. Simpan.<br />
<br />
Selamat mencoba dan Semoga bermanfaat....Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com2tag:blogger.com,1999:blog-1328164218451322165.post-52893071138756854982012-05-30T02:05:00.000-07:002012-05-30T02:05:08.679-07:00Cara menambah gadget 4 kolom dibawah headerCara menambah gadget dibawah atau diatas header memang sudah banyak artikel yang mengulas tentang hal ini. Selain itu saya juga sudah pernah publikasikan cara menambah gadget tepat pada bagian header menjadi 2 bagian, bila anda belum baca artikelnya silahkan anda baca <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html" target="_blank"><b style="color: red;">DISINI</b></a>.<br />
<br />
Berbeda dengan cara - cara diatas, kali ini saya akan berikan <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html">cara menambahkan gadget 4 kolom dibawah header</a>, yang hasilnya akan tampak seperti berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35cIU_cT34eWeiTqJP5I0NMFiUU1sgc1v7qpW7bIvjO167NPR7ttVasFpAhgeS1D8x-7GPIHnq05IbasHFVvHB04lRt4RMc2KJuZBYFqzIMvLOfZ5LBFDE1dTdT_LgLME2DsG1MGFKByV/s400/Bawah+header+1.png" width="400" /></a></div><br />
Dan pada bagian Elemen Laman, akan tampak seperti berikut :<br />
<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCQwmuadvib9jpDNVNW02s2GujT8ZzExHP1IMsSAeR2Qcld_M4YSCxcpnkOU5WNh9m8btMXhd_Qzw7Zf0Gmbsor8wfJJTpIvNMQvTkpKAj4LYruiFgfyqiOVOAxCLtihA8nganVItmMrt/s400/Bawah+header+2.png" width="400" /></a></div><br />
Melihat gambar diatas tentu cara ini lebih sangat berguna sekali bila kita pasang pada <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html" target="_blank">blog</a> kita, dan dengan cara ini kita dapat memanfaatkanya sebagai tempat seperti daftar isi, recent post, daftar link, atau bisa kitaa gunakan sebagai area iklan ataupun terserah kebutuhan anda..... OK...!!.<br />
<br />
Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Dan KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.<br />
<br />
<div style="text-align: left;"> 5. Jangan lupa Klik tombol "<span class="Apple-style-span" style="color: #3333ff;">Expand Widget Templates</span>"</div><div class="separator" style="clear: both; text-align: center;"> </div></div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFJbhYYyQxR-BU5rkmUoTFzppLn_RziqDgWVR7d92-NrjzF3o9HBU-dC7bfQQVm6MZPpf3RneI8NOwrqPFAtnY1hs-1hIPkx14tFhP9upmAnghEjCVHxCKWyzh9pw_igjJ9_1HR9A6l6h/s320/Expand.jpg" width="320" /></a></div><br />
6. Cari kode di bawah ini atau yang mirip dengan kode ini :<br />
<div style="color: red; text-align: center;"> <fieldset> <b><span style="color: red;"></header></span></b></fieldset></div><b style="color: red;">Catatan :</b> Setiap template biasanya berbeda kodenya. Bila tidak menemukan kode seperti diatas, anda bisa lihat contoh pada template yang berbeda dengan ciri mirip seperti berikut :<br />
<div style="text-align: left;"> </div><div style="color: red; text-align: center;"> <fieldset> <b><div class='region-inner header-inner'><br />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Header1' locked='true' title='<span style="color: blue;">TITEL BLOG ANDA</span> (Header)' type='Header'/><br />
</b:section><br />
</div></b></fieldset></div><br />
7. Lalu letakkan kode dibawah ini, setelah kode seperti diatas :<br />
<div style="text-align: left;"> </div><div style="color: red; text-align: center;"> <fieldset> <b style="color: #38761d;"><div id='kolom-bawah-header-container'><br />
<div id='kolom-bawah-header1' style='<span style="color: red;">width: 225px</span>; float: left; margin:0; '><br />
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'><br />
<b:widget id='Text1' locked='false' title='Bawah header 1' type='Text'/><br />
<br />
</b:section><br />
</div><br />
<div id='kolom-bawah-header2' style='<span style="color: red;">width: 225px</span>; float: left; margin:0; '><br />
<b:section class='kolom-bawah-header' id='kolom-bawah-header-2' preferred='yes' style='float:left;'><br />
<b:widget id='Text4' locked='false' title='Bawah header 2' type='Text'/><br />
</b:section><br />
</div><br />
<br />
<div id='kolom-bawah-header4' style='<span style="color: red;">width: 225px</span>; float: right; margin:0; '><br />
<b:section class='kolom-bawah-header' id='kolom-bawah-header-4' preferred='yes' style='float:right;'><br />
<b:widget id='Text3' locked='false' title='Bawah header 4' type='Text'/><br />
</b:section><br />
</div><br />
<br />
<div id='kolom-bawah-header3' style='<span style="color: red;">width: 225px</span>; float: right; margin:0; '><br />
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'><br />
<b:widget id='Text2' locked='false' title='Bawah header 3' type='Text'/><br />
</b:section><br />
</div><br />
<div style='clear:both;'/><br />
</div></b></fieldset></div>Catatan :<br />
Anda bisa ganti kode berwarna <b style="color: red;">merah</b> pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.<br />
<br />
8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :<br />
<br />
<div style="color: red; text-align: center;"> <fieldset> <b><span style="color: red;">]]></b:skin></span></b></fieldset></div><br />
<br />
9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode <b><span style="color: red;">]]></b:skin></span></b>:<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <b>#kolom-bawah-header-container { border: .3px dotted #cccccc;}<br />
<br />
.kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;<br />
color: #666666; line-height: 1.5em; font-size:12px;}<br />
<br />
.kolom-bawah-header h2 {<br />
padding-bottom:.15em; text-align:center;<br />
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";<br />
color:#333333;<br />
line-height:1em; letter-spacing:.1em;<br />
border-bottom: 1px solid #cccccc;}<br />
<br />
.kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}<br />
<br />
.kolom-bawah-header ul li {<br />
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;<br />
margin:0 0 0; padding-left: 16px;<br />
padding-bottom: 0.5em; line-height:1.2em;}<br />
<br />
.kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;}</b></fieldset></div><br />
9. SIMPAN TEMPLATE.Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com2tag:blogger.com,1999:blog-1328164218451322165.post-9512100671611972562012-05-30T02:04:00.002-07:002012-05-30T02:04:25.127-07:00Cara menambah gadget pada HeaderMenambah gadget tepat pada bagian <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html">header</a> tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel <b><i><a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html" target="_blank">Cara Menambah Gadget diatas Header</a></i></b>. Tapi cara ini sama dengan membuat <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html">header</a> terbagi menjadi 2 bagian yaitu <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html">header</a> disebelah kiri dan gadget terletak disebelah kanan<a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html"> header</a>.<br />
Berikut gambar <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html">header</a> yang terbagi menjadi 2 :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/05/cara-menambah-gadget-pada-header.html"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hXoSMCFVFepD57sDsOpTaP0rc-HwXvV0RKZfsK8d1H6Q8ggnaqw8ePSwSlIgsHAoXKbDO57O7EpbhI7fYPG1t8TdR5sZaVEkttUpC6Y4ap6CrpCR0Rzi8FSiOnEjG10NIET5Y-LEGwQk/s320/header+gadget.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><br />
Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :<br />
<i><b>1. Login ke blogger dengan ID anda.</b></i><br />
<i><b>2. Klik Rancangan.</b></i><br />
<i><b>3. Dan KLik tab Edit HTML</b></i>. <br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></div><div style="text-align: center;"> </div><i><b>4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan. </b></i><br />
<br />
<i><b>5. Cari kode yang sama atau mirip dengan kode berikut :</b></i> <br />
<br />
<div style="text-align: center;"> <fieldset> <span style="color: red;">/* Header</span><br />
<span style="color: red;">----------------------------------------------- */</span><br />
<span style="color: red;">.header-outer {</span><br />
<span style="color: red;"> background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;</span><br />
<span style="color: red;"> _background-image: none;</span><br />
<span style="color: red;">}</span><br />
<br />
<span style="color: red;">.Header h1 {</span><br />
<span style="color: red;"> font: $(header.font);</span><br />
<span style="color: red;"> color: $(header.text.color);</span><br />
<span style="color: red;"> text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);</span><br />
<span style="color: red;">}</span><br />
<br />
<span style="color: red;">.Header h1 a {</span><br />
<span style="color: red;"> color: $(header.text.color);</span><br />
<span style="color: red;">}</span><br />
<br />
<span style="color: red;">.Header .description {</span><br />
<span style="color: red;"> font-size: $(description.text.size);</span><br />
<span style="color: red;"> color: $(description.text.color);</span><br />
<span style="color: red;">}</span><br />
<br />
<span style="color: red;">.header-inner .Header .titlewrapper {</span><br />
<span style="color: red;"> padding: 22px $(header.padding);</span><br />
<span style="color: red;">}</span><br />
<br />
<div style="color: red;"> .header-inner .Header .descriptionwrapper {</div><div style="color: red;"> padding: 0 $(header.padding);</div><div style="color: red;"> } </div></fieldset></div><div style="color: red;"> <b>Catatan :</b></div>Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian <span style="color: red;"> (/* Header</span><span style="color: #38761d;"><span style="color: red;">)</span></span><br />
<br />
<i><b>6. Ganti kode diatas dengan kode dibawah ini :</b></i><br />
<br />
<div style="color: #38761d; text-align: center;"> <fieldset> /* Header<br />
----------------------------------------------- */<br />
#header {<br />
float:left;<br />
width:40%;<br />
margin: 0px;<br />
text-align: center;<br />
color:#ffcc66;<br />
}<br />
<br />
#header2{float:left; width:60%;}</fieldset></div><br />
<div style="text-align: left;"> <i><b>7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :</b></i></div><div style="text-align: left;"> </div><div style="color: red; text-align: center;"> <fieldset> <b><div class='region-inner header-inner'><br />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Header1' locked='true' title='<span style="color: blue;">TITEL BLOG ANDA</span> (Header)' type='Header'/><br />
</b:section><br />
</div></b></fieldset></div><br />
<i><b>8. Ganti kode diatas dengan kode dibawah ini :</b></i><br />
<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <b><div id='header-wrapper'><br />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Header1' locked='true' title='<span style="color: blue;">TITEL BLOG ANDA</span> (Header)' type='Header'/><br />
</b:section><br />
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/><br />
<div style='clear:both;'/><br />
</div><!-- end header-wrapper --></b></fieldset></div><br />
<i><b>10. Simpan Template.</b></i>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com1tag:blogger.com,1999:blog-1328164218451322165.post-71188287677387882642012-05-30T02:03:00.002-07:002012-05-30T02:03:36.625-07:00Cara Menambah Gadget diatas Header<div style="font-family: inherit;"><span style="font-size: x-small;">Pada umumnya <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html">blog</a> bawaan dari blogger tidak terdapat <a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">gadget</a> yang berada diatas header. Tapi kita sering melihat <a href="http://www.rahasiawebsitepemula.com/?id=pemulasukses">web</a> maupun <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html">blog</a> yang meletakkan <a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">gadget</a> </span><span style="font-size: x-small;">diatas header, seperti</span><span style="font-size: x-small;"> iklan baris, baner, gambar, teks berjalan, animasi, atau apa saja sesuai selera atau kebutuhan <a href="http://www.carabuatwebgratis.com/2011/04/cara-buat-blog.html">blog</a>. Lalu bagaimana cara menambah <a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">gadget</a> diatas header ?.</span></div><span class="fullpost"><br style="font-family: inherit;" /> <div style="font-family: inherit;"><span style="font-size: x-small;">Ok....Silahkan ikuti langkah - langkah berikut ini :</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">1. Login ke Blogger.</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">2. Klik Tata Letak/layout/rancangan.</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">3. Klik Edit HTML.</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">4. Lalu cari kode berikut :</span></div><div style="font-family: inherit;"><span style="font-size: x-small;"><br />
</span></div><div style="color: #38761d; font-family: inherit; text-align: center;"><fieldset><span style="font-size: x-small;"><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></span></fieldset></div><div style="font-family: inherit;"><div style="color: red;"><span style="font-size: x-small;">Catatan : </span></div><span style="font-size: x-small;"><span style="font-size: x-small;"><b><i>Setiap template mempunyai kode yang berbeda-beda, cari saja yang mirip seperti kode diatas.</i></b></span><br />
</span></div><div style="font-family: inherit;"><br />
<span style="font-size: x-small;">5. Ganti kode diatas dengan kode berikut ini :</span></div><div style="font-family: inherit;"><span style="font-size: x-small;"><br />
</span></div><div style="color: #38761d; font-family: inherit; text-align: center;"><fieldset><span style="font-size: x-small;"><b:section class='header' id='header' preferred='yes'></span></fieldset></div><div style="font-family: inherit;"><span style="font-size: x-small;"><br />
</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">6. Klik Save Template</span></div><div style="font-family: inherit;"><span style="font-size: x-small;">7. Klik Page Element -> </span><br />
<span style="font-size: x-small;">Lihat perubahan yang terjadi, sudah terdapat penambahan add a <a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">gadget</a> diatas header yang dapat anda isi sesuai kebutuhan blog anda.</span></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;"><br />
</span></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;">Mudah kan.....?</span></div></span><br />
Selamat mencoba dan Semoga bermanfaat...Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-79349473414701206182012-05-30T02:02:00.000-07:002012-05-30T02:02:09.061-07:00Cara menambah gadget 4 kolom pada bagian footerMenambahkan gadget pada bagian bawah atau pada bagian footer tidaklah sulit dan kode yang di gunakan juga hampir sama dengan cara menambah gadget dibawah header, bedanya kita tinggal menempatkan pada bagian footer. Bagi sobat blogger yang templatenya belum menggunakan fasilitas ini, anda juga bisa menambahkan gadget pada bagian footer. Dan memang cara ini sangat bermanfaat sekali. Sebab ketika pengunjung atau pembaca artikel blog kita sudah sampai pada bagian bawah, disitu kita sudah suguhkan menu, link atau hal - hal penting lain yang kita juga berharap pengunjung juga tertarik untuk membaca.<br />
<br />
Artikel ini saya buat atas permintaan sobat blogger yang ingin tahu cara menambah gadget pada bagian bawah atau footer.<br />
<br />
OK..., Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :<br />
<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Dan KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.<br />
<br />
<div style="text-align: left;"> 5. Jangan lupa Klik tombol "<span class="Apple-style-span" style="color: #3333ff;">Expand Widget Templates</span>"</div><div class="separator" style="clear: both; text-align: center;"> </div></div><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFJbhYYyQxR-BU5rkmUoTFzppLn_RziqDgWVR7d92-NrjzF3o9HBU-dC7bfQQVm6MZPpf3RneI8NOwrqPFAtnY1hs-1hIPkx14tFhP9upmAnghEjCVHxCKWyzh9pw_igjJ9_1HR9A6l6h/s320/Expand.jpg" width="320" /></a></div><br />
6. Cari kode di bawah ini atau yang mirip dengan kode ini :<br />
<div style="color: red; text-align: center;"> <fieldset> <b><span style="color: red;"><b:section class='footer' id='footer'/></span></b></fieldset></div><br />
<b style="color: red;">Catatan :</b><br />
Pada bagian HTML biasanya tampak seperti berikut :<br />
<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <div id='footer-wrapper'><br />
<b style="color: red;"><b:section class='footer' id='footer'/></b><br />
</div></fieldset></div><br />
<br />
7. Silahkan ganti kode berwarna merah dengan kode dibawah ini : <br />
<div style="text-align: left;"> </div><div style="color: red; text-align: center;"> <fieldset> <span style="color: #38761d;"><div id='footer-column-container'></span><br />
<span style="color: #38761d;"><div id='footer1' style='width: <span style="color: red;">225px</span>; float: left; margin:0; '></span><br />
<span style="color: #38761d;"><b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'></span><br />
<span style="color: #38761d;"><b:widget id='Text1' locked='false' title='About B-G' type='Text'/></span><br />
<br />
<span style="color: #38761d;"></b:section></span><br />
<span style="color: #38761d;"></div></span><br />
<span style="color: #38761d;"><div id='footer2' style='width: <span style="color: red;">225px</span>; float: left; margin:0; '></span><br />
<span style="color: #38761d;"><b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'></span><br />
<span style="color: #38761d;"><b:widget id='Text4' locked='false' title='About Author' type='Text'/></span><br />
<span style="color: #38761d;"></b:section></span><br />
<span style="color: #38761d;"></div></span><br />
<br />
<span style="color: #38761d;"><div id='footer3' style='width: <span style="color: red;">225px</span>; float: right; margin:0; '></span><br />
<span style="color: #38761d;"><b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'></span><br />
<span style="color: #38761d;"><b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/></span><br />
<span style="color: #38761d;"></b:section></span><br />
<span style="color: #38761d;"></div></span><br />
<br />
<span style="color: #38761d;"><div id='footer4' style='width: <span style="color: red;">225px</span>; float: right; margin:0; '></span><br />
<span style="color: #38761d;"><b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'></span><br />
<span style="color: #38761d;"><b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/></span><br />
<span style="color: #38761d;"></b:section></span><br />
<span style="color: #38761d;"></div></span><br />
<span style="color: #38761d;"><div style='clear:both;'/></span><br />
<span style="color: #38761d;"></div></span></fieldset></div><b style="color: red;">Catatan :</b><br />
Anda bisa ganti kode berwarna <b style="color: red;">merah</b> pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.<br />
<br />
8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :<br />
<div style="color: red; text-align: center;"> <fieldset> <b><span style="color: red;">]]></b:skin></span></b></fieldset></div><br />
9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode <b><span style="color: red;">]]></b:skin></span></b>:<br />
<div style="color: #38761d; text-align: center;"> <fieldset> #footer-column-container { border: .3px dotted #cccccc;} .footer-column { margin: 0 10px 0 10px; padding:5px;<br />
color: #666666; line-height: 1.5em; font-size:12px;}<br />
.footer-column h2 {<br />
padding-bottom:.15em; text-align:center;<br />
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";<br />
color:#333333;<br />
line-height:1em; letter-spacing:.1em;<br />
border-bottom: 1px solid #cccccc;}<br />
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}<br />
.footer-column ul li {<br />
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;<br />
margin:0 0 0; padding-left: 16px;<br />
padding-bottom: 0.5em; line-height:1.2em;}<br />
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}</fieldset></div><br />
10. SIMPAN TEMPLATE.<br />
<br />
Selamat mencoba dan Semoga bermanfaat....Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com2tag:blogger.com,1999:blog-1328164218451322165.post-74298066228948655052012-05-30T02:01:00.000-07:002012-05-30T02:01:18.547-07:00Cara Menampilkan Widget Hanya Pada Home Page sajaBagaimana cara kita mengolah tampilan widget atau gadget pada blog?. Dari sekian banyak widget atau gadget yang kita tampilkan pada blog kita, tentu sebaiknya kita juga memikirkan soal kenyamanan pengunjung. Nah..., Salah satunya adalah menampilkan widget atau gadget hanya pada Home Page saja.<br />
<br />
Mungkin cara ini bisa membuat para pengunjung lebih nyaman pada saat membaca artikel, misalnya gadget yang berisi iklan banner yang kadang tampilannya berkedip..., tentu itu sangat mengganggu konsentrasi pembaca artikel, ...iya kan?<br />
(hehehe....kemarin blog ini juga ada banner berkedip-kedip....,)<br />
<br />
OK..., sebagai konsekwensinya, silahkan anda lihat iklan banner hanya tampil pada "Home Page" blog ini saja, dan pada halaman post artikel iklan banner tersebut tidak tampak serta tidak akan mengganggu konsentrasi anda lagi....<br />
<br />
Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :<br />
<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu <span style="color: red;">Simpan</span>.</div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.</div><div style="text-align: left;"> Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :</div><div class="separator" style="clear: both; text-align: center;"> <img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iW2-fggDDNu4ua4DXwBVvdjsTWZ4lNYSI4jMy_FO50RebHFJhcBcrZYJl8P5ZNr1pnHUUnYJE_wGzXTgMSndA94iXpu4QxfvqxoFljaxSbQ03daVJeMeX-oLi4c4D_kUmlhTm4I5BlYY/s320/add+gadget.jpg" width="320" /></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Dan sekarang KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s1600/Blogger+--+Edit+Template+HTML_1295684554243.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><br />
<div style="text-align: left;"> 5. Tanpa " <b style="color: red;">Expanding Widget Templates</b>", Anda Cari kode - kode seperti gambar di bawah ini :</div><fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhdY2tNY9v9qGi3k_PVjo5zLTGsqAda_URKoipFVzruslKLrxAc_IFqRtILDUI96v2WHBsVsQZWmNBiHUriyl1bRV7RRph_Y1qcHtyYTxqfDYYmhJr3esaXxnM3lh8tOxRbvGKm9kjYrw/s400/kode+1.jpg" width="400" /></div></fieldset><div style="text-align: left;"> <b style="color: red;">Catatan :</b> Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan ID Widget adalah "<b style="color: red;">HTML 2</b>" <br />
</div><div style="text-align: left;"> 6. Sekarang klik pada "<b style="color: red;">Expand Template Widget</b>" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah <b style="color: red;">HTML2</b>). Seperti anda lihat pada gambar berikut :<br />
<fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSHHRBRtN2YPiAvxx8KFrmv8iVLzBGGeBUuSipbtMoPc9EsuY7I9SzvkykZo8BCXE3rW6YrB6iDqVIABq_1d92qLOSHtK6driFIG_mptji3j1CKdCYi9AfCgaRb1XGGVoEpDhneXiQXtm/s400/kode+2.jpg" width="400" /></div></fieldset></div><br />
7.Copy kode berikut :<br />
<div style="text-align: center;"> <fieldset> <b style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'></b> dan <b style="color: red;"></b:if></b></fieldset></div><br />
Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:<br />
<fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsyz_KvCOS-bNRYZEBADM_aKvaqhqEwuH4u0clMY_7-cnkQuBqLeelyirhHwphN__kh6wKWMBhuzxiWAuyireycGgcLP5sVXYUC1TfzbL39DtEgs8Td-fKa05w0OFlrndKsVLZD-tFBPpp/s400/kode+3.jpg" width="400" /></div></fieldset><br />
8. SIMPAN TEMPLATE.<br />
<br />
Selamat mencoba dan Semoga bermanfaat....Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-74323824655904732972012-05-30T02:00:00.000-07:002012-05-30T02:00:17.877-07:00Cara membuat multi tab dengat gadget didalamnya<div class="post uncustomized-post-template"> <a href="" name="5458834897575427096"></a> <h3 class="post-title"> </h3><div style="text-align: center;"> <fieldset> <textarea cols="52" name="txt" rows="3" style="display: inline;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{})) //]]> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); //]]> </script> <style type='text/css'> ul.tabnav{ padding:5px 0px 0px 0px; height:28px; margin:0px 0px; background:#fff; border:1px solid #fff; } .tabnav li { display: inline; list-style: none; float:left; text-align:center; margin-right:2px; margin-left:9px; } .tabnav li a { text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 6px 8px; width:80px; font-weight:normal; font-family:Georgia,Century gothic, Arial, sans-serif; color: #2C2F32; text-decoration: none; display:block; background:#9daab4; } .tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a { text-decoration:none; background: #42484d; color: #C7C7C7; } .tabdiv { margin-top:2px; padding: 5px 5px 5px 5px; font-family:Georgia,Century gothic, Arial, sans-serif; background:#fff; } .tabdiv a:link,.tabdiv a:visited { color:#333; } .tabdiv a:hover{ color: #2676A1; } .tabdiv ul{ list-style-type:none; margin:0px 5px; padding:0px 0px; } .tabdiv ul li{ background:#F3F3F3; display:block; margin-left:5px; overflow:hidden; line-height:24px; padding:2px 2px ; margin:2px 0px; color:#444; font-size:13px; } .tabdiv li a:link,.tabdiv li a:visited{ height:100%; line-height:28px; padding: 0px 0px 0px 0px; color:#333; } .tabdiv li a:hover { color: #222; text-decoration:none; } .ui-tabs-hide { display: none; } </style> </textarea></fieldset></div><br />
<div style="text-align: left;"> 6. Langkah selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :</div><div style="color: red; text-align: center;"> <fieldset> <span style="color: red; font-weight: bold;"><div id='sidebar-wrapper'></span></fieldset></div><br />
7. Copy kode di bawah ini dan taruh tepat setelah kode <span style="color: red; font-weight: bold;"><div id='sidebar-wrapper'></span> :<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <!-- Tabzine --><br />
<div class='widgets' id='tabzine'><br />
<ul class='tabnav'><br />
<li class='pop'><a href='#tab11'<b>><span style="color: red;">DAFTAR BLOG</span></b></a></li><br />
<li class='fea'><a href='#tab22'><b><span style="color: red;">ARSIP</span></b></a></li><br />
<li class='rec'><a href='#tab33'><b><span style="color: red;">POPULER</span></b></a></li><br />
</ul><br />
<br />
<!-- tab1 --><br />
<div class='tabdiv' id='tab11'><br />
<b:section class='sidebar5' id='sidebar5' preferred='yes'><br />
<b:widget id='HTML223' locked='false' title='' type='HTML'/><br />
</b:section><br />
</div><br />
<!--/tab1--><br />
<br />
<!-- tab2 --><br />
<div class='tabdiv' id='tab22'><br />
<b:section class='sidebar4' id='sidebar4' preferred='yes'><br />
<b:widget id='HTML323' locked='false' title='' type='HTML'/><br />
</b:section><br />
</div><br />
<!-- tab2 --><br />
<br />
<!-- tab3 --><br />
<div class='tabdiv' id='tab33'><br />
<b:section class='sidebar3' id='sidebar3' preferred='yes'><br />
<b:widget id='HTML423' locked='false' title='' type='HTML'/><br />
</b:section><br />
</div><br />
<!-- /tab3 --><br />
<br />
</div><br />
<!-- /Tabzine --></fieldset></div><b style="color: red;">Catatan :</b> Silahkan anda bisa mengganti <b style="color: blue;">Judul tab</b> yang berwarna <b style="color: red;">merah </b>diatas.<br />
<br />
8. SIPAN TEMLPATE.<br />
<br />
Silahkan anda menuju <b>Elemen Laman</b>, dan lihat multi yang bentuknya kira - kira seperti gambar ini :<br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkyVGDQwMYAP_1TN8ZMVvcjn8lwJUw3bpgOUd4qWWFx4NeGaCLXXx7_i7JOf2ar4UbV6zVy3a2XSZe5TT09k2HRmsIXKuGLudPZkOVy3QAKWoaGTVQQek-Tn9igu9qxhIEqAiD_ZHOORV/s320/Multi+tab+2.png" width="255" /></div><br />
Kemudian silahkan anda tambah gadget dan isi sesuai dengan <b style="color: blue;">Judul tab</b> yang anda buat tadi.</div><div class="post uncustomized-post-template"> </div><div class="post uncustomized-post-template">http://www.carabuatwebgratis.com/2011/06/cara-membuat-multi-tab-dengat-gadget.html </div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-44272931140702202882012-05-30T01:56:00.000-07:002012-05-30T01:56:16.282-07:00Cara Tampilkan Widget Blogger Blog Post URL Tertentu SajaPenempatan dan dimana kita menampilkan widget atau gadget bisa kita atur sesuai selera. Berbeda dengan cara pada artikel "<a href="http://www.carabuatwebgratis.com/2012/01/cara-menampilkan-widget-hanya-pada-home.html" target="_blank">Cara Menampilkan Widget Hanya Pada Home Page saja</a>", Cara ini buat anda yang ingin menampilkan widget atau gadget pada halaman post artikel yang anda inginkan saja.<br />
<br />
Trik ini biasanya digunakan untuk menampilkan sebuah konten pada widget atau gadget yang masih behubungan dengan isi artikel. Sehingga perlu ditentukan pada halaman post artikel mana widget atau gadget ingin ditampilkan.<br />
<br />
Silahkan anda lihat contoh gadget gambar disamping kiri, yang sama dengan gambar yang ada pada artikel ini. <br />
<br />
Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :<br />
<br />
<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu <span style="color: red;">Simpan</span>.</div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.</div><div style="text-align: left;"> Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :</div><div class="separator" style="clear: both; text-align: center;"> <img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iW2-fggDDNu4ua4DXwBVvdjsTWZ4lNYSI4jMy_FO50RebHFJhcBcrZYJl8P5ZNr1pnHUUnYJE_wGzXTgMSndA94iXpu4QxfvqxoFljaxSbQ03daVJeMeX-oLi4c4D_kUmlhTm4I5BlYY/s320/add+gadget.jpg" width="320" /></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Dan sekarang KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s1600/Blogger+--+Edit+Template+HTML_1295684554243.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><br />
<div style="text-align: left;"> 5. Tanpa " <b style="color: red;">Expanding Widget Templates</b>", Anda Cari kode - kode seperti gambar di bawah ini :</div><fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhdY2tNY9v9qGi3k_PVjo5zLTGsqAda_URKoipFVzruslKLrxAc_IFqRtILDUI96v2WHBsVsQZWmNBiHUriyl1bRV7RRph_Y1qcHtyYTxqfDYYmhJr3esaXxnM3lh8tOxRbvGKm9kjYrw/s400/kode+1.jpg" width="400" /></div></fieldset><div style="text-align: left;"> <b style="color: red;">Catatan :</b> Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan ID Widget adalah "<b style="color: red;">HTML 2</b>" </div><div style="text-align: left;"> <br />
6. Sekarang klik pada "<b style="color: red;">Expand Template Widget</b>" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah <b style="color: red;">HTML2</b>). Seperti anda lihat pada gambar berikut :<br />
<fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSHHRBRtN2YPiAvxx8KFrmv8iVLzBGGeBUuSipbtMoPc9EsuY7I9SzvkykZo8BCXE3rW6YrB6iDqVIABq_1d92qLOSHtK6driFIG_mptji3j1CKdCYi9AfCgaRb1XGGVoEpDhneXiQXtm/s400/kode+2.jpg" width="400" /></div></fieldset></div><br />
7.Copy kode berikut :<br />
<div style="text-align: center;"> <fieldset> <b style="color: #38761d;"><b:if cond='data:blog.url == "<span style="color: red;">ULR ARTIKEL</span>"'></b> dan <b style="color: #38761d;"></b:if></b></fieldset></div><br />
Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:<br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5sXHSfJtWPs5NYLUKxohLO5XRY2Kq5aJ_ppg_SmGbsAyMwh8pEYROi20O9gJQBYHDsxXVHYA3GdW9BD4W6A6F_PPhHcBeB9GKfjJlgH5ztav5foI0pUhUp_FDxBksOdrNdOkeAnXq-vyE/s400/kode+4.jpg" width="400" /></div><br />
<b style="color: red;">CATATAN:</b> Jangan lupa untuk mengganti <b style="color: #38761d;"><span style="color: red;">ULR ARTIKEL</span></b> dengan url posting milik anda, dimana anda ingin menampilkan widget. <br />
<br />
8. SIMPAN TEMPLATE.<br />
<br />
Selamat mencoba dan Semoga bermanfaat....<br />
<br />
http://www.carabuatwebgratis.com/2012/01/cara-tampilkan-widget-blogger-blog-post.htmlMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-56456448739553037392012-05-30T01:54:00.000-07:002012-05-30T01:54:34.506-07:00Cara menampilkan widget hanya pada seluruh halaman postLangkah ini saya update juga untuk anda yang ingin mengatur widget atau gadget yang hanya tampil pada seluruh halaman post saja. Berbeda dengan yang lalu, yang hanya tampil pada Home Page saja atau kita tentukan gadget tampil pada halaman post tertentu.<br />
<br />
Jadi langkah ini dibuat agar gadget tidak tampil pada Home Page. Untuk penggunaannya tergantung kebutuhan anda, mungkin menampilkan gadget "artikel populer", "Iklan", "banner", atau yang lain... OK.<br />
<br />
Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :<br />
<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Klik Tambah Gadget pada sidebar, pilih jenis gadget yang anda butuhkan lalu <span style="color: red;">Simpan</span>.</div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
Sekarang anda dapat melihat gadget baru yang muncul pada bagian paling atas pada sidebar template anda.</div><div style="text-align: left;"> Pada artikel ini misalnya saya menambahkan gadget HTML / Javascript untuk sidebar saya, silahkan anda lihat gambar dibawah :</div><div class="separator" style="clear: both; text-align: center;"> <img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iW2-fggDDNu4ua4DXwBVvdjsTWZ4lNYSI4jMy_FO50RebHFJhcBcrZYJl8P5ZNr1pnHUUnYJE_wGzXTgMSndA94iXpu4QxfvqxoFljaxSbQ03daVJeMeX-oLi4c4D_kUmlhTm4I5BlYY/s320/add+gadget.jpg" width="320" /></div><div style="text-align: left;"> </div><div style="text-align: left;"> <br />
4. Dan sekarang KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s1600/Blogger+--+Edit+Template+HTML_1295684554243.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><br />
<div style="text-align: left;"> 5. Tanpa " <b style="color: red;">Expanding Widget Templates</b>", Anda Cari kode - kode seperti gambar di bawah ini :</div><fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhdY2tNY9v9qGi3k_PVjo5zLTGsqAda_URKoipFVzruslKLrxAc_IFqRtILDUI96v2WHBsVsQZWmNBiHUriyl1bRV7RRph_Y1qcHtyYTxqfDYYmhJr3esaXxnM3lh8tOxRbvGKm9kjYrw/s400/kode+1.jpg" width="400" /></div></fieldset><div style="text-align: left;"> <b style="color: red;">Catatan :</b> Silahkan anda ingat ID widget yang paling atas. Pada gambar diatas, saya contohkan ID Widget adalah "<b style="color: red;">HTML 2</b>" </div><div style="text-align: left;"> <br />
6. Sekarang klik pada "<b style="color: red;">Expand Template Widget</b>" dan cari nama yang anda ingat pada langkah di atas. (Pada contoh saya ini adalah <b style="color: red;">HTML2</b>). Seperti anda lihat pada gambar berikut :<br />
<fieldset> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSHHRBRtN2YPiAvxx8KFrmv8iVLzBGGeBUuSipbtMoPc9EsuY7I9SzvkykZo8BCXE3rW6YrB6iDqVIABq_1d92qLOSHtK6driFIG_mptji3j1CKdCYi9AfCgaRb1XGGVoEpDhneXiQXtm/s400/kode+2.jpg" width="400" /></div></fieldset></div><br />
7.Copy kode berikut :<br />
<div style="text-align: center;"> <fieldset> <b style="color: red;"><b:if cond='data:blog.pageType == "item"'></b> dan <b style="color: red;"></b:if></b></fieldset></div><br />
Kemudian sisipkan ditempat yang sama seperti yang ditunjukkan pada gambar dibawah ini:<br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDWHVM3yARSxfHKyU5yHv0hOei6Ge16PW4oG8ZSXZI9H1wKLPQO9QdBAOYe6aTsREdCsMWbGZiiLHL3qaVnOS4Z0cFWMqGTbS80TEFr-c2NZzWliA4AMk3r6R1_2uFArZb-ZWrCo1o5Or/s400/kode+5.jpg" width="400" /> </div><br />
8. SIMPAN TEMPLATE.<br />
<br />
Selamat mencoba dan Semoga bermanfaat....<br />
<br />
http://www.carabuatwebgratis.com/2012/01/cara-menampilkan-widget-hanya-pada.htmlMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-55351325360815275112012-05-30T01:52:00.000-07:002012-05-30T01:52:22.953-07:00Cara membagi gadget menjadi dua kolomAda kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.<br />
Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?<br />
<br />
OK..., seperti yang dirasakan oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_1zqoGO_RSvJCjtha4scMuxvz6150al7h9LhixrJCthnoWirhI2pxL4jYpb8Qo2RKD_apkWMhaYolrkMr6uMWTgkMEbJ956I_nvrnL61qbEhZhZaRpEWLDfRjxBA8GNsULzTPMtwot9t/s400/sidebar+3.png" width="400" /></div><br />
Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).<br />
<br />
Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :<br />
<div style="text-align: left;"> 1. Login ke blogger dengan ID anda.</div><div style="text-align: left;"> 2. Klik Rancangan.</div><div style="text-align: left;"> 3. Dan KLik tab Edit HTML. </div><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s1600/Blogger+--+Edit+Template+HTML_1295684554243.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMD0_cAeO2HdcQO9_Eoc7MMKZZp2FYonJdW4nS2JrKSLxP4cv36DDqhnDYzp0LQWo1fTn4RuIye6SldNg8ljp3k6_TbvXUgCgbp8TzND0MRxHIVkW9or9IKlPWfvgLE7undf1etpPwlYg/s320/Blogger+--+Edit+Template+HTML_1295684554243.png" width="320" /></a></div><br />
<div style="text-align: left;"> 4. Cari kode di bawah ini atau yang mirip dengan kode ini :</div><div style="color: red; text-align: center;"> <fieldset> <span style="color: red;">]]></b:skin></span></fieldset></div><br />
<div style="text-align: left;"> 5. Copy kode di bawah ini dan taruh tepat sebelum kode <span style="color: red;">]]></b:skin></span> :</div><div style="text-align: left;"> <div style="color: #38761d; text-align: center;"> <fieldset> #kolom-kiri {<br />
width: 49%;<br />
float: left;<br />
}<br />
#kolom-kanan {<br />
width: 49%;<br />
float: right;<br />
}</fieldset></div></div><br />
6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :<br />
<div style="color: red; text-align: center;"> <fieldset> <div id='sidebar-wrapper'><br />
<br />
<b:section class='sidebar' id='sidebar' preferred='yes'><br />
<b:widget id='Label99' locked='false' title='Labels' type='Label'/><br />
<b><span style="color: blue;"> </b:section></span><br />
<br />
<span style="color: blue;"> </div></span></b></fieldset></div><b style="color: red;">Catatan:</b><br />
Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='<span style="color: red;">sidebar-wrapper</span>'.<br />
<br />
Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian <span style="color: #38761d;">Sidebar (bagian samping)</span>, <span style="color: #38761d;">header (atas)</span>, maupun <span style="color: #38761d;">footer (bawah)</span>.<br />
<br />
Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :<br />
<div style="color: red; text-align: center;"> <fieldset> <div id=' .......... '><br />
<br />
<span style="color: blue;"><b:section class='sidebar' id='sidebar' preferred='yes'></span><br />
<span style="color: blue;"><b:widget id='HTML' locked='false' title='' type='HTML'/></span><br />
<span style="color: blue;"> </b:section></span><br />
<br />
</div></fieldset></div><br />
7. Sisipkan kode dibawah ini diantara <b style="color: blue;"></b:section></b> dan <b style="color: blue;"></div></b> :<br />
<div style="color: #38761d; text-align: center;"> <fieldset> <b:section class='sidebar' id='kolom-kiri' showaddelement='yes'><br />
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/><br />
</b:section><br />
<br />
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'><br />
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/><br />
</b:section><br />
<br />
<div style="clear: both;"></div></fieldset></div><br />
Sehingga tampak seperti berikut :<br />
<div style="text-align: center;"> <fieldset> <span style="color: red;"><div id='sidebar-wrapper'></span><br />
<br />
<span style="color: red;"> <b:section class='sidebar' id='sidebar' preferred='yes'></span><br />
<span style="color: red;"><b:widget id='Label99' locked='false' title='Labels' type='Label'/></span><br />
<span style="color: red;"> <b><span style="color: blue;"> </b:section></span></b></span><br />
<br />
<br />
<span style="color: #38761d;"><b:section class='sidebar' id='kolom-kiri' showaddelement='yes'></span><br />
<span style="color: #38761d;"><b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/></span><br />
<span style="color: #38761d;"></b:section></span><br />
<br />
<span style="color: #38761d;"><b:section class='sidebar' id='kolom-kanan' showaddelement='yes'></span><br />
<span style="color: #38761d;"><b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/></span><br />
<span style="color: #38761d;"></b:section></span><br />
<br />
<span style="color: #38761d;"><div style="clear: both;"></div></span><br />
<br />
<b style="color: blue;"></div></b></fieldset></div><br />
8. SIMPAN TEMPLATE<br />
<br />
Selesai...., silahkan anda lihat hasilnya....<br />
Selamat mencoba dan Semoga bermanfaat....<br />
<br />
http://www.carabuatwebgratis.com/2012/02/cara-membagi-gadget-menjadi-dua-kolom.htmlMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-66701252907804848252012-03-03T06:07:00.002-08:002012-03-03T06:15:18.516-08:00Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsxNr48W7moxf1-5_fzpSTuwRzaP_lIhSoXN0h-mrWlfmPF9-tmhc7IaWEPkaXMoBiTx5owWFl1H96hNfJY5ZVDcFHbiOJcWpOZSe-3g7dLEs-_OalAwu5KWw6zmo-Oa10fQl6Hihhn4/s1600/entri+atom+maskolis.PNG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsxNr48W7moxf1-5_fzpSTuwRzaP_lIhSoXN0h-mrWlfmPF9-tmhc7IaWEPkaXMoBiTx5owWFl1H96hNfJY5ZVDcFHbiOJcWpOZSe-3g7dLEs-_OalAwu5KWw6zmo-Oa10fQl6Hihhn4/s1600/entri+atom+maskolis.PNG" /></a></div><span class="awal">D</span>alam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah <b>Langgan : Entri (Atom) </b>dan <b>Subscribe to : Poskan Komentar (Atom)</b>, ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di <b>"Langgan: Entri (Atom)"</b>? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya <b>Langgan: Entri (Atom)</b> adalah fasilitas untuk berlangganan artikel/posting, sedangkan <b>Subscribe to: Poskan Komentar (Atom)</b> adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.<br />
<br />
</div><div style="text-align: justify;">Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti <a href="http://www.feedburner.com/" target="_blank">FeedBurner.Com</a>, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur <b>Langgan: Entri (Atom)</b> dan <b>Subscribe to: Poskan Komentar (Atom)</b> dari blog mereka.</div><br />
Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan <b>Langgan: Entri (Atom)</b> dan <b>Subscribe to: Poskan Komentar (Atom)</b> di Blogspot :<br />
<br />
<div style="text-align: justify;"><b>A. Cara Menghapus Langgan: Entri (Atom)</b>:</div><ol start="1" type="1"><li style="text-align: justify;"><b>Login</b> ke Blogspot => <span class="IL_AD" id="IL_AD3">klik</span> <b>Rancangan</b>/Design => pilih <b>Edit HTML</b>, kasih centang pada kotak <b>Expand Template Widget</b> dan gunakan tombol <b>Find</b> untuk memudahkan pencarian kode;</li>
<li><div style="text-align: justify;">Cari <b>kode</b> di bawah ini:</div><blockquote><b:include data='feedLinks' name='feedLinksBody'/></blockquote></li>
<li><div align="justify">Hapus/delete <u>semua kode</u> di atas, lalu <b>Save Template</b>, selesai.</div></li>
</ol><br />
<div style="text-align: justify;"><b>B. Cara Menghapus Subscribe to: Poskan Komentar (Atom)</b>:</div><ol start="1" type="1"><li style="text-align: justify;"><b>Login</b> ke Blogspot => klik <b>Rancangan</b>/Design => pilih <b>Edit HTML</b>, kasih centang pada kotak <b>Expand Template Widget</b> dan gunakan tombol <b>Find</b> untuk memudahkan pencarian kode;</li>
<li><div align="justify">Cari <b>kode</b> di bawah ini:</div><div style="text-align: left;"><blockquote><div class='feed-links'><br />
<data:feedLinksMsg/><br />
<b:loop values='data:links' var='f'><br />
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a><br />
</b:loop><br />
</div></blockquote></div></li>
<li><div align="justify">Hapus/delete semua kode di atas, lalu <b>Save Template</b>, selesai.</div></li>
</ol><br />
<div style="text-align: justify;">Demikianlah <span class="IL_AD" id="IL_AD1">tutorial</span> sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini</div><br />
<div style="text-align: center;">Semoga bermanfaat.</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-52680420936894507802012-03-03T06:05:00.000-08:002012-03-03T06:15:18.518-08:00Membuat Tweet Box Dibawah Postingan<div style="text-align: justify;"><span class="awal">T</span>ombol social bookmark akhir-akhir ini sangat diminati oleh para pengguna blogger untuk. mempopulerkan blognya. Selain Facebook yang membuat fitur likenya, Twitterpun tidak mau kalah dan kembali menyaingi facebook dengan menyediakan Tweet Box. Twitter box ini berfungsi untuk mempromosikan artikel kita di twitter. Seperti contoh pada halaman bawah postingan ini, anda bisa langsung menekan tombol Tweet, atau bisa juga diisi dengan kata-kata sendiri.<br />
<br />
Tertarik untuk membuatnya? Dibawah ini akan saya jelaskan lahkah-langkah untuk membuatnya :<br />
<ul><li>Kunjungi Penyedia Layanannya <a href="http://dev.twitter.com/anywhere/apps/new" rel="nofollow" target="blank">disini</a> </li>
<li>Login dengan akun Twitter Anda, dan isikan data-data yang diminta untuk membuat aplikasinya. Seperti gambar dibawah ini</li>
</ul></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6tnGMQmEfsuMzmPyktPFCAUexbo2xV49nofjNDdU-sir9Q-LBieXgDhBU_Gdm175jXhWllER0AjH2rSFksJomX58Qtr17ijPIv97Nwsk6cEueW_b4iG9aqZ6tllt7IMP-ZMMg0IbNQV3m/s1600/Tweet+Coment.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5507357099472197282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6tnGMQmEfsuMzmPyktPFCAUexbo2xV49nofjNDdU-sir9Q-LBieXgDhBU_Gdm175jXhWllER0AjH2rSFksJomX58Qtr17ijPIv97Nwsk6cEueW_b4iG9aqZ6tllt7IMP-ZMMg0IbNQV3m/s320/Tweet+Coment.JPG" style="-moz-box-shadow: 4px 4px 5px rgb(129, 129, 129); cursor: pointer; display: block; height: 320px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a><br />
<ul><li>Isi Aplications Name Dengan Judul Suka-suka anda</li>
<li>Isi Aplications Website Dengan Url <span class="IL_AD" id="IL_AD4">Blog</span> anda</li>
<li>Kosongkan Organizations</li>
<li>Isi Call Back Url Dengan Alamat Blog Anda</li>
<li>Untuk <b>Default Acces Type</b> jangan lupa centang <b>Read & Write</b> </li>
<li>Aplications Icon Tidak Perlu Diisi</li>
<li>Klik Register Application</li>
</ul><a href="http://www.maskolis.co.cc/"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5507358410181632866" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIi32KQx6djS8UeZXSfsxK0XOYERS-30f7t_xc5l2UWTH58G-n-WxCRVSuzQJU-f7IoE15NypbrmlKT2Ss6HZEYUSU8kU3Q1CHyuHS6a5xBm0jUeggCgXlfolE4Yi7JmvUKoC9yo3X9bIK/s320/Tweet+Coment+2.JPG" style="-moz-box-shadow: 4px 4px 5px rgb(129, 129, 129); display: block; height: 224px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a><br />
<div style="text-align: justify;">Kemudian, akan muncul kotak peraturan seperti gambar diatas, dan klik I Accept, setelah itu akan muncul tab baru dengan kode Javascript dan API key nya. Salin script yang saya kotakkan seperti gambar dibawah ini</div><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjWOkG0keKGYH9YhqJcDN92Ykt9UFNUCbaQZHq9RsKMdIA2DxyLg1-4ddy6p02U3Ie9QFHrltuHfq5TxxiSdhHj-Po0hwdpTOyhbpDhczn3I360Ht33-42i6KNLXILD0Z4A6YEJmroAJi/s1600/Tweet+Coment+4.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5507358947608849586" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjWOkG0keKGYH9YhqJcDN92Ykt9UFNUCbaQZHq9RsKMdIA2DxyLg1-4ddy6p02U3Ie9QFHrltuHfq5TxxiSdhHj-Po0hwdpTOyhbpDhczn3I360Ht33-42i6KNLXILD0Z4A6YEJmroAJi/s320/Tweet+Coment+4.JPG" style="-moz-box-shadow: 4px 4px 5px rgb(129, 129, 129); cursor: pointer; display: block; height: 163px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a>Kemudian login ke Akun Blogger Anda Masing-masing, klik rancangan >> Pilih Edit HTML >> Centang <span class="fullpost"><span class="fullpost">Expand Template WidgetDan Cari Kode <span style="color: red; font-weight: bold;"></head></span><span style="color: red;"><span style="color: black;"> Jika sudah ketemu, masukkan kode yang tadi anda kopi tepat diatasnya Jika sudah, cari kode seperti dibawah ini:</span></span></span></span><br />
<blockquote><data:post.body/></blockquote><span class="fullpost"><span class="fullpost"><span style="color: red;"><span style="color: black;">Jika Sudah Ketemu, Masukkan Kode dibawah ini Dan taruh tepat dibawah kode </span></span></span></span><span class="fullpost" style="font-weight: bold;"><span class="fullpost"><span style="color: red;"><span style="color: black;"><data:post.body/></span></span></span></span></div><span style="color: red;"><span style="color: black;"> <blockquote><span style="color: red;"><span style="color: black;"><span style="color: #cccccc;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br style="color: #cccccc;" /><span style="color: #cccccc;"> <div id='bp_tweetBox'/></span><br style="color: #cccccc;" /><span style="color: #cccccc;"> <script type='text/javascript'></span><br style="color: #cccccc;" /><span style="color: #cccccc;"> bp_tweet_link=&quot;<data:post.url/>&quot;;</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> twttr.anywhere(function (T) {</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> T(&quot;#bp_tweetBox&quot;).tweetBox({</span><br />
<span style="color: red;">width: 560</span><span style="color: #cccccc;">,</span><br />
<span style="color: #cccccc;">label: &quot;Retweet This&quot;,</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> defaultContent: &quot;RT @</span><span style="color: red;">akun_twitter_anda</span> <span style="color: #cccccc;"><data:post.title/>&quot;+&quot; &quot;+bp_tweet_link</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> });</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> });</span><br style="color: #cccccc;" /><span style="color: #cccccc;"> </script></span><br style="color: #cccccc;" /><span style="color: #cccccc;"> </b:if></span></span></span></blockquote></span></span><br />
<div style="text-align: justify;"><div style="color: black;"><span class="fullpost"><span class="fullpost">Simpan dan lihat hasilnya. Untuk yang diberi warna merah silahkan ganti sesuka anda. Sekian penjelasan dari saya, semoga dapat bermanfaat. </span></span></div></div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-15511935806884701342012-03-03T06:01:00.002-08:002012-03-03T06:15:18.521-08:00Merubah Title Blogspot Yang SEO Friendly = Traffic Meningkat<div style="text-align: justify;"><span class="awal">P</span>engertian sederhana SEO atau <i><span class="IL_AD" id="IL_AD2">Search Engine Optimizer</span></i> atau <i>Search Engine Optimizing</i> menurut saya pribadi berarti membuat konten (materi) dari portal, website, blog dikenali dan didata (diindeks) oleh <i>search engine</i> seperti Google, Yahoo, Bing, Lycos, dan search engine lainnya secara lebih optimal. Harapannya ketika orang atau user mencari sesuatu di internet melalui <i>search engine</i> dengan kata kunci (<i>keyword</i>) tertentu maka konten yang kita miliki dalam portal, website, atau blog dapat muncul dalam hasil pencarian.</div><br />
<div style="text-align: justify;">SEO sendiri akan dianggap berhasil, jika posisi kita dalam halaman hasil pencarian berada pada urutan halaman-halaman awal, sebisa mungkin halaman pertama<a href="http://ariawijaya.com/">.</a> Tapi tentu saja apa yang dicari oleh orang tersebut sesuai dengan konten yang kita miliki. Jadi tujuan akhir dari SEO ini adalah mendatangkan <i>traffic</i> (kunjungan) yang lebih banyak melalui search engine.</div><br />
<div style="text-align: justify;">Dari pengertian sederhana di atas, saya ingin menginformasikan trik sederhana yang bisa dimanfaatkan oleh temen-temen yang baru belajar ngeblog atau ingin belajar bikin blog dengan <a href="http://www.blogger.com/"><b>Blogspot</b></a>. Trik berikut berkaitan dengan <i>Title</i> tulisan/artikel dalam Blogspot dengan template/themes standar<a href="http://ariawijaya.com/">.</a> Secara default (standar) title pada Blogspot adalah Judul (Nama) Blog itu sendiri (saat kita membuka Home, sedangkan saat membuka salah satu artikel maka title yang muncul adalah Nama Blog dilanjutkan dengan Judul Artikel.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcPxjXB_z9P7zM3UlGafhGcXmNNcBzWGMH53Hsys5Q6FMeYMfPXGpyQ4p5kdVM3R4EKwwCXu08Cnhmgr0mkRuGBlT-jsArjCNvx7CMVFBbUPtV4g65Crs3WGz0ihePLSo-6Hkz1YCN_o/s1600/maskolis81.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcPxjXB_z9P7zM3UlGafhGcXmNNcBzWGMH53Hsys5Q6FMeYMfPXGpyQ4p5kdVM3R4EKwwCXu08Cnhmgr0mkRuGBlT-jsArjCNvx7CMVFBbUPtV4g65Crs3WGz0ihePLSo-6Hkz1YCN_o/s1600/maskolis81.jpg" /></a></div><br />
<div style="text-align: justify;">Untuk format Title standar seperti di atas, bagi <i>search engine</i> kurang optimal, karena seluruh konten kita akan diawali oleh judul blog yang sama (apalagi jika judul blog kita panjang)<a href="http://ariawijaya.com/">.</a> Berbeda hasilnya jika Title diawali oleh Judul Artikel baru diikuti judul (nama) Blog, dengan demikian konten yang didata (diindeks) oleh search engine lebih bervariasi dan kemungkinan muncul dalam hasil pencarian halaman depan lebih besar.</div><br />
<div style="text-align: justify;">Untuk merubah format Title di atas relatif mudah, berikut langkah-langkahnya. Setelah masuk ke <i>panel admin</i>, kita masuk ke menu <i>Edit HTML</i>.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdcsedktIzlUVQdhnGo22xu3H5aZs01AxubiBCWuJrKOSvupe2lUKz-RNdaualpFOqBWApwgEJPt9IO1UiQV9cchqW33x9kXhfZN2dOEkubMQVJpYGOtmV60MIKGFaVcva3aYaYRNndQ/s1600/maskolis15.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdcsedktIzlUVQdhnGo22xu3H5aZs01AxubiBCWuJrKOSvupe2lUKz-RNdaualpFOqBWApwgEJPt9IO1UiQV9cchqW33x9kXhfZN2dOEkubMQVJpYGOtmV60MIKGFaVcva3aYaYRNndQ/s1600/maskolis15.jpg" /></a></div><br />
<div style="text-align: justify;">Selanjutnya kita cari script Title seperti dibawah ini (script ini ada pada bagian atas, penulisan script secara default/standar ini ada pada template Blogspot standar<a href="http://ariawijaya.com/">,</a> ada kemungkinan jika kita gunakan template bikinan pihak ketiga, maka penulisan script Title itu sendiri mungkin juga sudah berubah).</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygtyhUlhslxjgkL3ZOt6OjIkYic8Vz-l4nbimN6tT67xUm0ra19dso4-FE_xCMwy64M2009ZtR1V5SMBGKK1ZDROoCYrfZdVp4CiVc5EbNLYSuHlSQ5-G4D8FyadqNHEwMBWU1h03YIA/s1600/maskolis22.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygtyhUlhslxjgkL3ZOt6OjIkYic8Vz-l4nbimN6tT67xUm0ra19dso4-FE_xCMwy64M2009ZtR1V5SMBGKK1ZDROoCYrfZdVp4CiVc5EbNLYSuHlSQ5-G4D8FyadqNHEwMBWU1h03YIA/s320/maskolis22.jpg" width="320" /></a></div><div class="dp-highlighter"><div class="bar"><div class="tools"><a href="http://creatingwebsite-maskolis.blogspot.com/2011/03/merubah-title-blogspot-yang-seo.html#"></a></div></div><ol class="dp-css"><li class="alt"><span><span><b:include data=</span><span class="string">'blog'</span><span> name=</span><span class="string">'all-head-content'</span><span>/> </span></span></li>
<li class=""><span><title><data:blog.pageTitle/></title> </span></li>
<li class="alt"><span><b:skin><![CDATA[/* </span></li>
</ol></div><div style="text-align: justify;">Ganti script yang diberi tanda merah dengan script baru di bawah ini dan simpan template tersebut.</div><div class="dp-highlighter"><div class="bar"><div class="tools"><a href="http://creatingwebsite-maskolis.blogspot.com/2011/03/merubah-title-blogspot-yang-seo.html#"></a></div></div><ol class="dp-css"><li class="alt"><span><span><b:if cond=</span><span class="string">'data:blog.pageType == &amp;quot;index&amp;quot;'</span><span>> </span></span></li>
<li class=""><span><title><data:blog.title/></title> </span></li>
<li class="alt"><span><b:else/> </span></li>
<li class=""><span><title><data:blog.pageName/> | <data:blog.title/></title> </span></li>
<li class="alt"><span></b:if> </span></li>
<li class=""><span><b:skin><![CDATA[ </span></li>
</ol></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1_JtZ6H8Tvg2MkvyxuZr2lkHgs3gT7sFylj6a8BEjogtFWPeYuIick6MtcNOMelOgTw9FWV5fHo47I0Y2hyphenhyphen2V0bkGG6f-n9tdYavSVZbDd3kBNvBPAjSvusrH1NYgoZKwOH_tiDjh5E/s1600/maskolis23.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1_JtZ6H8Tvg2MkvyxuZr2lkHgs3gT7sFylj6a8BEjogtFWPeYuIick6MtcNOMelOgTw9FWV5fHo47I0Y2hyphenhyphen2V0bkGG6f-n9tdYavSVZbDd3kBNvBPAjSvusrH1NYgoZKwOH_tiDjh5E/s320/maskolis23.jpg" width="320" /></a></div><br />
<div style="text-align: justify;">Sekarang coba buka salah satu artikel dalam blog kita dan perhatingan Title-nya, jika berhasil maka sekarang format penulisan sudah berubah menjadi judul tulisan berada di depan diikuti judul blog. Dengan demikian title tulisan kita sudah lebih optimal, dan tinggal kita tunggu robot search engine mendata (mengindeks) konten blog kita.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcPxjXB_z9P7zM3UlGafhGcXmNNcBzWGMH53Hsys5Q6FMeYMfPXGpyQ4p5kdVM3R4EKwwCXu08Cnhmgr0mkRuGBlT-jsArjCNvx7CMVFBbUPtV4g65Crs3WGz0ihePLSo-6Hkz1YCN_o/s1600/maskolis81.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcPxjXB_z9P7zM3UlGafhGcXmNNcBzWGMH53Hsys5Q6FMeYMfPXGpyQ4p5kdVM3R4EKwwCXu08Cnhmgr0mkRuGBlT-jsArjCNvx7CMVFBbUPtV4g65Crs3WGz0ihePLSo-6Hkz1YCN_o/s1600/maskolis81.jpg" /></a></div><br />
<div style="text-align: justify;">Itu tadi sekilas informasi tentang format penulisan Title yang dianggap mampu mengoptimalkan SEO, semoga bermanfaat dan selamat mencoba.</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com1tag:blogger.com,1999:blog-1328164218451322165.post-43035435210885561022012-03-03T06:00:00.000-08:002012-03-03T06:15:18.522-08:00Membuat Huruf Besar (Drop Cap) pada Awal Postingan<div style="text-align: justify;"><span class="awal">T</span>ahukan teman-teman apa itu drop cap? drop caps adalah huruf besar yang ukurangnya mungin 10 kali lipat huruf biasa yang diletakkan di awal artikel. Nah kalau teman-teman semua tertarik untuk membuat nya, saya akan kasih tau tutorialnya. Sebenarnya membuat drop caps ini sangatlah mudah, tapi untuk lebih jelasnya silahkan ikuti langkah-langkah di bawah ini :</div><div style="text-align: justify;">1. Login ke blogger<br />
2. Langsung ke Tata Letak (sekarang <b>design/rancangan</b>) - Edit HTML<br />
3. Cari kode berikut <span style="font-weight: bold;">]]></b:skin><br />
</span>4. Masukkan kode di bawah ini, di atas<span style="font-weight: bold;"> </span><span style="font-weight: bold;">]]></b:skin></span><br />
<span style="color: #3333ff;"></span> </div><blockquote>/* kode untuk huruf awal<br />
----------------------------------------------- */<br />
.awal {<br />
float:left;<br />
color: #000000;<br />
background:#ffffff;<br />
line-height:80px;<br />
padding-top:1px;<br />
padding-right:5px;<br />
font-family:times;<br />
font-size:100px;</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_wFg1zjwLYyDM5zhEHaxxdYAeV0-rD17B6BhOTrlkls9Ug5Z7WYL0LO4A7609P0-da0vTqhBvHtRNaynnl6A1XL9iR6Zca7WDZXK6ZRvr_oJ4QHZoV0Ik9M32-jw7DTTmhnqvMNUX8g/s1600/New+Picture.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_wFg1zjwLYyDM5zhEHaxxdYAeV0-rD17B6BhOTrlkls9Ug5Z7WYL0LO4A7609P0-da0vTqhBvHtRNaynnl6A1XL9iR6Zca7WDZXK6ZRvr_oJ4QHZoV0Ik9M32-jw7DTTmhnqvMNUX8g/s320/New+Picture.jpg" width="320" /></a></div><br />
5. Klik Save Template / Simpan<br />
<div style="background-color: transparent; border: medium none; color: black; overflow: hidden; text-align: justify; text-decoration: none;">Untuk menerapkan drop cap ini, setiap posting anda harus lewat Edit HTML, bukan lewat edit HTML di template anda. Ketikkan kode ini dulu <span style="font-weight: bold;"><span class="awal">huruf awal</span></span> Kata huruf awal, ganti dengan huruf pertamamu yang akan kamu posting. Misalnya : <span style="font-weight: bold;"><span class="awal">L</span></span> </div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-85192063379333275912012-03-03T05:58:00.000-08:002012-03-03T06:15:18.523-08:00Memasang Gambar Slideshow Dibawah Header<div style="text-align: justify;"><span class="awal">J</span>umpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan <b>tutorial cara pasang slideshow di bawah header</b>. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. <b>Slideshow</b> sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan <a href="http://www.pictsel.co.cc/2010/08/3pictsel-blogger-template.html" target="_blank">template 3pictsel</a> bikinan mas Riki dan meletakkannya di dalam main post.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://wongsuruh.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKur0mj4EsKE3_cZB8p-LRAKxq4PEoQSEYEMC6h7AgjtLlLqtjn6iQBZ9u0Bv-nh67zNaaYf1PS8M79o2khoI7NSEbCIKn4pREumy1PFHnrYxjMf5gD7EVSpLuPYOaU7gH3hSEvFbPxhc/s1600/silde+alanis.jpg" /></a></div><br />
<div style="text-align: justify;">Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih <b>660px</b>. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.</div><ol><li>Login dulu di blogger. </li>
<li>Masuk ke <b>Rancangan >> Edit HTML</b>.</li>
<li style="text-align: justify;">Jangan lupa klik <b><i>Expand Template Widget</i></b> karena akan membuat anda jadi pusing dengan kode yang panjang.</li>
<li>Copy paste kode berikut diatas kode <b>]]></b:skin></b></li>
<div class="dp-highlighter"><div class="bar"><div class="tools"><a href="http://creatingwebsite-maskolis.blogspot.com/2011/03/memasang-gambar-slideshow-dibawah.html#"></a></div></div><ol class="dp-css"><li class="alt"><span class="comment">/* SLIDESHOW */</span> </li>
<li class=""><span class="value">#slider</span>-holder{<span class="keyword">width</span>:<span class="value">660px</span>;<span class="keyword">height</span>:<span class="value">200px</span>;<span class="keyword">overflow</span>:<span class="value">hidden</span>;<span class="keyword">margin-left</span>:<span class="value">-20px</span>; <span class="keyword">margin-right</span>:<span class="value">10px</span>; <span class="keyword">padding</span>:<span class="value">0</span>} <span class="value">#s3slid</span>er{<span class="keyword">width</span>:<span class="value">660px</span>;<span class="keyword">height</span>:<span class="value">660px</span>;<span class="keyword">position</span>:<span class="value">relative</span>;<span class="keyword">overflow</span>:<span class="value">hidden</span>} </li>
<li class="alt"><span class="value">#s3slid</span>erContent{<span class="keyword">width</span>:<span class="value">660px</span>;<span class="keyword">position</span>:<span class="value">absolute</span>;top:<span class="value">0</span>;<span class="keyword">margin-left</span>:<span class="value">0</span>} </li>
<li class="">.s<span class="value">3</span>sliderImage{<span class="keyword">float</span>:<span class="value">left</span>;<span class="keyword">position</span>:<span class="value">relative</span>;<span class="keyword">display</span>:<span class="value">none</span>} </li>
<li class="alt">.s<span class="value">3</span>sliderImage span{<span class="keyword">position</span>:<span class="value">absolute</span>;left:<span class="value">0</span>;<span class="keyword">font-weight</span>:<span class="value">700</span>;<span class="keyword">font-size</span>:<span class="value">12px</span>;<span class="keyword">color</span>:<span class="value">#fff</span>;<span class="keyword">height</span>:<span class="value">45px</span>;<span class="keyword">width</span>:<span class="value">660px</span>;<span class="keyword">background-color</span>:<span class="value">#4e4d3c</span>;filter:alpha(opacity=<span class="value">70</span>);-moz-opacity:<span class="value">0.7</span>;-khtml-opacity:<span class="value">0.7</span>;opacity:<span class="value">0.7</span>;<span class="keyword">display</span>:<span class="value">none</span>;bottom:<span class="value">0</span>;<span class="keyword">padding</span>:<span class="value">10px</span>} </li>
<li class="">.s<span class="value">3</span>sliderImage span a.featured-title:link,.s<span class="value">3</span>sliderImage span a.featured-title:visited{<span class="keyword">color</span>:<span class="value">#FFF</span>;<span class="keyword">font-size</span>:<span class="value">14px</span>;<span class="keyword">padding</span>:<span class="value">0 0</span> <span class="value">2px</span>} </li>
<li class="alt">.s<span class="value">3</span>sliderImage span a.featured-title:hover{<span class="keyword">color</span>:<span class="value">#999</span>} </li>
<li class="">.s<span class="value">3</span>sliderImage span a:link,.s<span class="value">3</span>sliderImage span a:visited{<span class="keyword">color</span>:<span class="value">#888</span>} </li>
<li class="alt">.s<span class="value">3</span>sliderImage span a:hover{<span class="keyword">color</span>:<span class="value">#555</span>} </li>
</ol></div><span class="fullpost">
<li><span class="fullpost"><span class="fullpost">Kemudian copas kode berikut diatas kode <b></head></b></span></span></li>
<div style="background-color: #2e2e2e; border: 2px solid rgb(216, 216, 216); color: #cccccc; height: 200px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;"><span class="fullpost"><span class="fullpost"><b><span style="font-weight: normal;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><script type='text/javascript'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><!--//--><![CDATA[//><!--</span><br style="font-weight: normal;" /><span style="font-weight: normal;">(function($){ </span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $.fn.s3Slider = function(vars) { </span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var element = this;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var current = null;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var timeOutFn = null;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var faderStat = true;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var mOver = false;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> items.each(function(i) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(items[i]).mouseover(function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> mOver = true;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(items[i]).mouseout(function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> mOver = false;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> fadeElement(true);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var fadeElement = function(isMouseOut) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> thisTimeOut = (faderStat) ? 10 : thisTimeOut;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(items.length > 0) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> timeOutFn = setTimeout(makeSlider, thisTimeOut);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> } else {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> console.log("Poof..");</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var makeSlider = function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> current = (current != null) ? current : items[(items.length-1)];</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var currNo = jQuery.inArray(current, items) + 1</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> currNo = (currNo == items.length) ? 0 : (currNo - 1);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> var newMargin = $(element).width() * currNo;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(faderStat == true) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(items[currNo]).fadeIn((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if($(itemsSpan[currNo]).css('bottom') == 0) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(itemsSpan[currNo]).slideUp((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> faderStat = false;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> current = items[currNo];</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> fadeElement(false);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> } else {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(itemsSpan[currNo]).slideDown((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> faderStat = false;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> current = items[currNo];</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> fadeElement(false);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> } else {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if($(itemsSpan[currNo]).css('bottom') == 0) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(itemsSpan[currNo]).slideDown((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(items[currNo]).fadeOut((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> faderStat = true;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> current = items[(currNo+1)];</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> fadeElement(false);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> } else {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(itemsSpan[currNo]).slideUp((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> $(items[currNo]).fadeOut((timeOut/6), function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> faderStat = true;</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> current = items[(currNo+1)];</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> if(!mOver) {</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> fadeElement(false);</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> });</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> makeSlider();</span><br style="font-weight: normal;" /><span style="font-weight: normal;"> }; </span><br style="font-weight: normal;" /><span style="font-weight: normal;">})(jQuery); </span><br style="font-weight: normal;" /><span style="font-weight: normal;">//--><!]]></script></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><script type='text/javascript'></span><br style="font-weight: normal;" /><span style="font-weight: normal;">$(document).ready(function() {</span><br style="font-weight: normal;" /><span style="font-weight: normal;">$(&#39;#s3slider&#39;).s3Slider({</span><br style="font-weight: normal;" /><span style="font-weight: normal;">timeOut: 4000</span><br style="font-weight: normal;" /><span style="font-weight: normal;">});</span><br style="font-weight: normal;" /><span style="font-weight: normal;">});</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></script> </span></b></span></span></div><li><span class="fullpost">Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <b><div id='main-wrapper'></b></span></li>
<div style="background-color: #2e2e2e; border: 2px solid rgb(216, 216, 216); color: #cccccc; height: 200px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;"><span class="fullpost"><b><span style="font-weight: normal;"><div id='slider-holder'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><div id='s3slider'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><ul id='s3sliderContent'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='s3sliderImage' style='<span class="IL_AD" id="IL_AD4">display</span>: list-item;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a href='LETAK LINK DISINI 1'><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBrTojMwvOZMvPaOd_3K2aJ2VW8FymdJmk58EgHd_duD5gSibPISHfWi0istSzqHvPAhMubyzQGDyr6Xie-gZlGsgl91u_oM9ox_Ut591hy6bpu52J80nlUdoX56qNxDFqjVLgrrwpTIc/s1600/NorahJones.jpg</span>' style='width: 660px; height: 200px;'/></a></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><span style='display: block;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/></span><br style="font-weight: normal;" /><span style="color: red; font-weight: normal;">Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></span></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></li></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='s3sliderImage' style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a href='LETAK LINK DISINI 2'><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZ8F_lWHZGGduAxrzY99mesvQFx4qq3dQ26lQuTZoW4P9hthSF3vnPuel3e1XWhSYu_H7vIV53kbRDg7MdM_wDiebAy4BE8_gA5JsGL4NvPM7F2wa1w6rcx_J9D_OdZFp8lMz16fcQxg/s1600/174456_1_f.jpg</span>' style='width: 660px; height: 200px;'/></a></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><span style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/></span><br style="font-weight: normal;" /><span style="color: red; font-weight: normal;">Nggak usah dijelaskan udah ada tulisanya diatas</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></span></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></li></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='s3sliderImage' style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a href='LETAK LINK DISINI 3'><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcl4N9sJBP5nx1jbw4TQJZYrwI6qyxLQTFLiOSCq2LdHi6HUysEPE1dmvb4eOLw6gawbpBQMjwWO_yK1kbXh7TG32We-9m_mt7DEZON_ceknMfxC85Pcqx0HgnStQe_pYaD_atD3F4gU/s1600/andien.jpg</span>' style='width: 660px; height: 200px;'/></a></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><span style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/></span><br style="font-weight: normal;" /><span style="color: red; font-weight: normal;">Ini orangnya yang..............</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></span></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></li></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='s3sliderImage' style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a href='LETAK LINK DISINI 4'><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ggl921yUw0ilwesmtUIS1O4dVl1OD7drRMsgR6XeMWJZMK9PyVqAsw_lD7bwhRJOHHjXNNyaHQWgba9XYg5cwEBMeAUB2bmtnXP7dvkwUfbAkmDPioaZux_JHgqwPICF8H2Yc1sj7EU/s1600/Alanis-Morissette-2.JPG</span>' style='width: 660px; height: 200px;'/></a></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><span style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/></span><br style="font-weight: normal;" /><span style="color: red; font-weight: normal;">Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></span></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></li></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='s3sliderImage' style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a href='LETAK LINK DISINI 5'><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlcjpk0S3MTJQYd1n5KQXnf7ThUOvL85pJymZtF1XQjCUsbS350IKF4ahDxUjfAc0-T9WAafUY6agHSqk8rFV_HRWlKMG0mqB9WtwJTaG9UmTA5KRv78o_s6g1WhEPuhj0nJcGGzzEbY/s1600/Anne-Hathaway-02.jpg</span>' style='width: 660px; height: 200px;'/></a></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><span style='display: none;'></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/></span><br style="font-weight: normal;" /><span style="color: red; font-weight: normal;">Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....</span><br style="font-weight: normal;" /><span style="font-weight: normal;"></span></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></li></span><br style="font-weight: normal;" /><span style="font-weight: normal;"><li class='clear s3sliderImage'/></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></ul></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></div></span><br style="font-weight: normal;" /><span style="font-weight: normal;"></div></span> </b></span></div><li><b style="font-weight: normal;">Simpan Template</b></li>
</span></ol><b><span style="font-size: x-small;">Keterangan :</span></b><br />
<ul><li style="text-align: justify;">Perhatikan lebar <i>660px</i>, silahkan sesuaikan saja dengan lebar post template anda. </li>
<li style="text-align: justify;">Perhatikan juga angka <i>-20px</i> pada kode css-nya, saya gunakan <b>margin-left:-20px</b> karena menyesuaikan dengan demo template yang saya gunakan. </li>
<li style="text-align: justify;">Tulisan yang berwarna <b><span style="color: red;">merah</span></b> ganti dengan deskripsi tentang gambar anda. </li>
<li style="text-align: justify;">Kode yang berwarna <b style="color: blue;">biru</b> adalah kode url untuk gambar yang sudah anda upload sebelumnya. </li>
</ul><div style="text-align: justify;">Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-73383964970295803702012-03-03T05:56:00.000-08:002012-03-03T06:15:18.524-08:00Membuat Images Bubbles di Bawah Postingan Blogspot<div style="text-align: justify;"><span class="awal">B</span>ukankah teman-teman semua pengin blog yang dibuat itu kelihatan menarik? Kali ini saya akan memberikan cara yang membuat blog Anda semua lebih menarik. Dari sekian banyak pembuatan social bookmark, cara ini yang paling saya suka disamping simpel, gambar logonya lebih menarik. Yang akan saya bahas disini adalah <b>css image bubbles transitions</b>, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser <span class="IL_AD" id="IL_AD3">firefox</span> versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa anda lihat <a href="http://wongsuruh.blogspot.com/2010/12/gentleman-will-walk-but-never-run.html" rel="nofollow" target="_blank">disini</a>.</div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho2wMeAHgk8pBkBEupcb7-s6hqhM7B8ZiK4qVR1jmDI93mzasHOa_tqNcGkEVl8K19mFIZB-9y9wRc-EHP-vLDRq699F1k99yP9HlQDJbO9Kn3XpnCd6ykd4Ex1O5F-F_PSJQgi3CdM8Y/s1600/Image+bubles+maskolis.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho2wMeAHgk8pBkBEupcb7-s6hqhM7B8ZiK4qVR1jmDI93mzasHOa_tqNcGkEVl8K19mFIZB-9y9wRc-EHP-vLDRq699F1k99yP9HlQDJbO9Kn3XpnCd6ykd4Ex1O5F-F_PSJQgi3CdM8Y/s1600/Image+bubles+maskolis.jpg" /></a> </div>Sebelum memulai ada baiknya anda backup template anda terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.<br />
<ol><li>Login ke Blogger. </li>
<li>Klik <b>Rancangan</b>. </li>
<li>Masuk ke <b>Edit HTML</b> centang expand widget templates </li>
<li>Jika terjadi kesalahan sebaiknya download terlebih dahulu template anda</li>
<li>Copas kode css berikut sebelum kode <span style="color: red;">]]></b:skin> </span></li>
</ol><blockquote>.bubblewrap{<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.bubblewrap li{<br />
display:inline;<br />
width: 65px;<br />
height:60px;<br />
}<br />
.bubblewrap li img{<br />
width: 55px;<br />
height: 60px;<br />
border:0;<br />
margin-right: 12px;<br />
-webkit-transition:-webkit-transform 0.1s ease-in;<br />
-o-transition:-o-transform 0.1s ease-in;<br />
}<br />
.bubblewrap li img:hover{<br />
-moz-transform:scale(1.8);<br />
-webkit-transform:scale(1.8);<br />
-o-transform:scale(1.8);<br />
} </blockquote>Cari kode yang mirip seperti ini : <br />
<blockquote><data:post.body/></b:if><br />
</div></blockquote>Kemudian letakkan kode berikut setelah kode diatas : <br />
<blockquote><div class='bubblewrap'> <br />
<ul> <br />
<div style="text-align: left;"><li><a href='#'><img src='<span style="color: purple;">http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png</span>' title='<span class="IL_AD" id="IL_AD4">Add to</span> Stumbleupon'/></a></li> </div><div style="text-align: left;"><li><a href='#'><img src='<span style="color: purple;">http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png</span>' title='Add to Facebook'/></a></li> </div><div style="text-align: left;"><li><a href='#'><img src='<span style="color: purple;">http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png</span>' title='Add to Digg'/></a></li> </div><div style="text-align: left;"><li><a href='#'><img src='<span style="color: purple;">http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png</span>' title='Add to Twitter'/></a></li> </div><div style="text-align: left;"><li><a href='#'><img src='<span style="color: purple;">http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png</span>' title='Add RSS Feed'/></a></li> </div></ul> <br />
</div></blockquote><br />
<b>Simpan Template</b>. <br />
<br />
Untuk kode yang berwarna <span style="color: purple;">ungu</span> adalah kode url untuk gambarnya, anda bisa ganti dengan gambar social bookmark yang sobat punya.Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-17081351740136126192012-03-03T05:52:00.000-08:002012-03-03T06:15:18.526-08:00Pasang Banner di Header Blog<div style="text-align: justify;"><span class="awal">S</span>elamat siang teman-teman blogger semua, gimana nih kabarnya? Baik bukan? Nah, kalau teman-teman semua dalam keadaan baik, kali ini saya akan memberikan sebuah turorial bagaimana cara pasang banner di blog kita. Mungkin diantara temen-temen sekalian udah ada yang tahu, tapi ada baiknya kalau saya langsung tulis aja postingannya. Memasang banner merupakan sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain “apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?” jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.<br />
</div><br />
<div style="text-align: justify;">Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header. Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, <span class="IL_AD" id="IL_AD1">coreldraw</span>, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template <b>Minima</b> yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger. </div><div style="text-align: justify;"><br />
</div><div style="color: #990000;"><b>Untuk Template Klasik</b></div><div style="text-align: justify;">Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk upload gambar atau banner anda bisa diilakukan dengan google sites atau photobucket. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini : http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif dan gambar bannernya seperti ini ((ukuran aslinya 468 x 60)</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://demomaskolis.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img alt="banner maskolis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqO0uWoVeH0Qdb4BxOqoIWkBejhFuk5UoeawKCa8cdUtsdMaOCoqGhNqYqj6KuouESglKscC7XePYR5txhvYGiljRWGqL8etudZbwA_evjbr_VFkf6vY0rD4gIy1PRIlRvav8tu-Uo0WE/s1600/maskolis+468x90.jpg" /></a></div><br />
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :<br />
<ol style="text-align: justify;"><li><span class="IL_AD" id="IL_AD2">Sign in</span> di blogger</li>
<li>Klik menu <b>Template</b></li>
<li>Klim menu <b>Edit HTML</b></li>
<li>Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template</li>
<li>Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan</li>
</ol><blockquote>/* Header ———————————————– */<br />
@media all {<br />
#header {<br />
width:660px;<br />
margin:0 auto 10px;<br />
border:1px solid #ccc;<br />
background:url(http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif) no-repeat top center;<br />
}<br />
}</blockquote>Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :<br />
<blockquote>#blog-title {<br />
margin:5px 5px 0;<br />
padding:20px 20px .25em;<br />
border:1px solid #eee; <– hapus (delete)<br />
border-width:1px 1px 0; <– hapus (delete)<br />
font-size:200%;<br />
line-height:1.2em;<br />
font-weight:normal;<br />
color:#666;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
}<br />
#description {<br />
margin:0 5px 5px;<br />
padding:0 20px 20px;<br />
border:1px solid #eee; <– hapus (delete)<br />
border-width:0 1px 1px; <– hapus (delete)<br />
max-width:700px;<br />
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
color:#999;<br />
}</blockquote><ol style="text-align: justify;"><li><span class="IL_AD" id="IL_AD4">Klik</span> tombol <b>Pratinjau</b> untuk melihat perubahan</li>
<li>Jika sudah OK, klik tombol <b>Simpan Perubahan Template</b></li>
<li>Selesai.</li>
</ol><div style="text-align: justify;"><b>Untuk template baru</b></div>Bagi anda pengguna template baru, bisa menggunakan dua cara.<br />
Cara pertama :<br />
<ol style="text-align: justify;"><li>Sign in di blogger</li>
<li>Klik menu <b>Layout</b></li>
<li>Klik menu <b>Edit HTML</b></li>
<li>Klik tulisan <b>Download Template Lengkap</b>, silahkan save dulu template sobat untuk backup data</li>
<li>Klik kotak kecil di samping tulisan <b>Expand Template Widget</b></li>
<li>Tunggu beberapa saat sampai proses selesai</li>
<li>Tambahkan kode berikut pada style sheet css sobat.Yang warna abu-abu adalah kode asli dan yang merah adalah kode yang harus di tambahkan</li>
</ol><blockquote>/* Header ———————————————–<br />
*/<br />
#header-wrapper {<br />
width:660px;<br />
margin:0 auto 10px;<br />
border:1px solid #ccc;<br />
<div style="color: red;">background:url(http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif)no-repeat top center;</div>}<br />
}</blockquote><ol style="text-align: justify;"><li>Klik tombol <b>Pratinjau</b> untuk melihat perubahan yang ada</li>
<li>Bila sudah OK, klik tombol <b>SIMPAN TEMPLATE</b></li>
<li>Selesai.</li>
</ol><div style="text-align: justify;">Langkahnya diatas sama dengan yang di template klasik.</div>Cara kedua :<br />
<ol style="text-align: justify;"><li>Sign in di blogger</li>
<li>Klik menu <b>Layout</b></li>
<li>Klik menu <b>Edit HTML</b></li>
<li>Klik tulisan <b>Download Template Lengkap</b>, silahkan save dulu template sobat untuk backup data</li>
<li>Klik kotak kecil di samping tulisan <b>Expand Template Widget</b></li>
<li>Tunggu beberapa saat sampai proses selesai </li>
<li>cari kode berikut pada template sobat :</li>
</ol><blockquote><b:section class=’header’ id=’header’ maxwidgets=’1′></blockquote><ol style="text-align: justify;">pada kode maxwidgets=’1′. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :</ol><blockquote><b:section class=’header’ id=’header’ maxwidgets=’2′></blockquote><ol style="text-align: justify;"><li>Klik tombol <b>SIMPAN TEMPLATE</b></li>
</ol><div style="text-align: justify;">Nah itu langkah pertama, langkah selanjutnya adalah :</div><ol style="text-align: justify;"><li>Klik menu <b>Elemen Halaman</b></li>
<li>KLik tulisan <b>Edit</b> yang ada pada elemen <b>Header</b></li>
<li>Tunggu beberapa saat</li>
<li>Pilih radio button yang ada di samping tulisan <b>dari komputer Anda</b></li>
<li>Klik tombol <b>Browse…</b></li>
<li>Pilih banner yang telah di buat yang ada pada komputer sobat</li>
<li>Tunggu beberapa saat sampai proses selesai.</li>
<li>Gambar banner sobat akan di tampilkan</li>
<li>Klik tombol <b>SIMPAN PERUBAHAN</b></li>
<li>Selesai. </li>
</ol>Itu tadi sedikit gambaran dari saya tentang cara-cara memasang banner di bawah header blog kita. Semoga bermanfaatMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-85522466366925166552012-03-03T05:49:00.000-08:002012-03-03T06:15:18.527-08:00Memasang Widget Sharing Is Sexy di Posting Blog<div style="text-align: justify;"><span class="awal">S</span>haring is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.</div><div style="text-align: center;"><a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=681814442227513519"><img alt="sharing is sexy widget Memasang Widget Sharing Is Sexy di Posting Blog" border="0" class="aligncenter" id="BLOGGER_PHOTO_ID_5520759822905109042" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMF17hgeOEm9TwKV-3zS-yxHE9rYNikrGXombdIXz3qM1DiWge76izlQKhvQY6Y240Pkky9I05m3tiiCJmqMf03t4ML-gTttBYGjBjPfahCJ5NrskxCVGcS_id_EHorvOV-ljBh0jGKis/s400/sharing-is-sexy-widget.gif" title="Memasang Widget Sharing Is Sexy di Posting Blog" /></a></div><div style="text-align: justify;">Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat <a href="http://kauman0506.blogspot.com/2011/02/blog-post.html" target="_blank">disini</a>. Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.</div><br />
<div style="text-align: justify;">Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:</div><div style="text-align: justify;">1. Login ke blogger dengan akun anda, lalu masuk ke menu <b>Design</b> >> <b>Edit HTML</b>.<br />
2. Beri centang pada ‘<b>Expand Widget Templates</b>’<br />
3. Letakkan kode berikut diatas <b>]]></b:skin></b></div><div style="text-align: justify;"><blockquote style="text-align: left;">div.beauty-bookmarks {<br />
height:54px;<br />
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9s9RmFRCkPuNwTzi4tpxqk1TGOHM1aZTPLJrJGE6CfF0QO6ii7JgHlDdjunwzybzMGQj5kEV6XRYzy46qJ0InUKkWmN7mcUCdvMcMA17vOo2xuY8kETM2d2CwVTxEl9BgfvWVnC6L_h6/’) no-repeat left bottom;<br />
position:relative;<br />
width:455px;<br />
}<br />
div.beauty-bookmarks span.beauty-rightside {<br />
width:17px;<br />
height:54px;<br />
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9s9RmFRCkPuNwTzi4tpxqk1TGOHM1aZTPLJrJGE6CfF0QO6ii7JgHlDdjunwzybzMGQj5kEV6XRYzy46qJ0InUKkWmN7mcUCdvMcMA17vOo2xuY8kETM2d2CwVTxEl9BgfvWVnC6L_h6/’) no-repeat right bottom;<br />
position:<span class="IL_AD" id="IL_AD2">absolute</span>;<br />
right:-17px;<br />
}<br />
div.beauty-bookmarks ul.socials {<br />
margin:0 !important;<br />
padding:0 !important;<br />
position:absolute;<br />
bottom:0;<br />
left:10px;<br />
}<br />
div.beauty-bookmarks ul.socials li {<br />
display:inline-block !important;<br />
float:left !important;<br />
list-style-type:none !important;<br />
margin:0 !important;<br />
height:29px !important;<br />
width:48px !important;<br />
cursor:pointer !important;<br />
padding:0 !important;<br />
}<br />
div.beauty-bookmarks ul.socials a {<br />
display:block !important;<br />
width:48px !important;<br />
height:29px !important;<br />
font-size:0 !important;<br />
color:transparent !important;<br />
}<br />
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {<br />
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikOeqIFIDUumyTDBXLqtZjx65rmtNwOU-MM0-K3DAPgRmcQoRVFx4-GRL4ZsGgV2T7i2CxKBMvFc9g8SC58aYAzW1aZA7qzsbhVXkxw6rgOWfQXp31p0sk_ET7PNqKCpYTjcZHEpqRrWP6/’) no-repeat !important;<br />
}<br />
.beauty-furl {<br />
background-position:-300px top !important;<br />
}<br />
.beauty-furl:hover {<br />
background-position:-300px bottom !important;<br />
}<br />
.beauty-digg {<br />
background-position:-500px top !important;<br />
}<br />
.beauty-digg:hover {<br />
background-position:-500px bottom !important;<br />
}<br />
.beauty-reddit {<br />
background-position:-100px top !important;<br />
}<br />
.beauty-reddit:hover {<br />
background-position:-100px bottom !important;<br />
}<br />
.beauty-stumble {<br />
background-position:-50px top !important;<br />
}<br />
.beauty-stumble:hover {<br />
background-position:-50px bottom !important;<br />
}<br />
.beauty-delicious {<br />
background-position:left top !important;<br />
}<br />
.beauty-delicious:hover {<br />
background-position:left bottom !important;<br />
}<br />
.beauty-technorati {<br />
background-position:-700px top !important;<br />
}<br />
.beauty-technorati:hover {<br />
background-position:-700px bottom !important;<br />
}<br />
.beauty-twitter {<br />
background-position:-350px top !important;<br />
}<br />
.beauty-twitter:hover {<br />
background-position:-350px bottom !important;<br />
}<br />
.beauty-facebook {<br />
background-position:-450px top !important;<br />
}<br />
.beauty-facebook:hover {<br />
background-position:-450px bottom !important;<br />
}<br />
.beauty-script-style {<br />
background-position:-400px top !important;<br />
}<br />
.beauty-script-style:hover {<br />
background-position:-400px bottom !important;<br />
}<br />
.beauty-designfloat {<br />
background-position:-550px top !important;<br />
}<br />
.beauty-designfloat:hover {<br />
background-position:-550px bottom !important;<br />
}</blockquote></div><div style="text-align: justify;">NB:<br />
Jika anda ingin mengganti tulisan ‘Sharing is sexy’ menjadi ‘Sharing is caring’ maka ganti left bottom dan right bottom menjadi left top dan right top</div><div style="text-align: justify;">4. Setelah itu cari <b><data:post.body/></b><br />
5. Letakkan kode berikut dibawahnya</div><div style="text-align: justify;"><blockquote style="text-align: left;"><b:if cond=’data:blog.pageType == “item”‘><br />
<div class=’beauty-bookmarks’><br />
<ul class=’socials’><br />
<!– delicious start–><br />
<li class=’beauty-delicious’><a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– delicious end–><br />
<!– digg start–><br />
<li class=’beauty-digg’><a expr:href=’&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– digg end–><br />
<!– technorati start–><br />
<li class=’beauty-technorati’><a expr:href=’&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– technorati end–><br />
<!– reddit start–><br />
<li class=’beauty-reddit’><a expr:href=’&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– reddit end–><br />
<!– <span class="IL_AD" id="IL_AD4">Stumbleupon</span> start–><br />
<li class=’beauty-stumble’><a expr:href=’&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– Stumbleupon end–><br />
<!– designfloat start–><br />
<li class=’beauty-designfloat’><a expr:href=’&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– designfloat end–><br />
<!– facebook start–><br />
<li class=’beauty-facebook’><a expr:href=’&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– facebook end–><br />
<!– twitter start–><br />
<li class=’beauty-twitter’><a expr:href=’&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’/></li><br />
<!– twitter end–><br />
<!– furl start–><br />
<li class=’beauty-furl’><a expr:href=’&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li><br />
<!– furl end–><br />
</ul><br />
<span class=’beauty-rightside’/><br />
</div><br />
</b:if></blockquote></div><div style="text-align: justify;">Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:</div><div style="text-align: justify;"><blockquote style="text-align: justify;"><!– facebook start–><br />
<div style="text-align: left;"><li class=’beauty-facebook’><a expr:href=’&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li></div><!– facebook end–></blockquote></div><div style="text-align: justify;">6. Kalau sudah simpan template anda. Selesai</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-83169292461326932102012-03-03T05:46:00.000-08:002012-03-03T06:15:18.528-08:00Mengenal Fungsi-Fungsi Menu Setting Blog<div style="text-align: justify;"><span class="awal">P</span>ertama kali kita membuat blog dengan menggunakan fasilitas blogspot, kita mungkin akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal. Pada postingan kali ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.</div><br />
<div style="text-align: center;"></div>1. Menu <span style="font-weight: bold;">Settings</span> -> <span style="font-weight: bold;">Basic</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Blog Tools: </span>untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)</li>
<li><span style="font-weight: bold;">Title</span>: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)</li>
<li><span style="font-weight: bold;">Description</span>: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog</li>
<li><span style="font-weight: bold;">Add your blog to our <span class="IL_AD" id="IL_AD3">listing</span></span>: untuk mengatur apakah blog anda mau ditampilkan pada menu blogger seperti <a href="http://play.blogger.com/" style="color: #000099;" target="_blank">blogger play</a> dan <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCHT2DC3e8M37XO5PEH76b6sDwgkdblgsMaNzwfhWkQZfBapa_JowdMAa2xN5UI1LAOxhJewq-NybCcV695zUvHx8gh9UvJbIdXKQ_IoAv8Fz188HZGaaK3sgE0vhK2vlkgCo706yVmJd/" style="color: #000099;" target="_blank">next blog</a> atau tidak</li>
<li><span style="font-weight: bold;">Let search engines <span class="IL_AD" id="IL_AD2">find your</span> blog:</span> Untuk mengatur apakah blog anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak</li>
<li><span style="font-weight: bold;">Show quick editing on your blog</span>: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog</li>
<li><span style="font-weight: bold;">Show email post links</span>: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via <span class="IL_AD" id="IL_AD3">email</span></li>
<li><span style="font-weight: bold;">Adult Content</span>: untuk menentukan apakah blog kita mengandung konten porno atau tidak</li>
<li><span style="font-weight: bold;">Select Post Editor</span>: untuk memilih jenis post editor yang ingin anda gunakan</li>
<li><span style="font-weight: bold;">Enable Transliteration</span>: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.</li>
</ul><br />
2. Menu <span style="font-weight: bold;">Setting</span> -> <span style="font-weight: bold;">Publishing</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Custom domain:</span> Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll</li>
<li><span style="font-weight: bold;">Blogspot Address:</span> Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)</li>
<li><span style="font-weight: bold;">Word Verification:</span> kode verifikasi</li>
</ul><br />
3. Menu <span style="font-weight: bold;">Setting</span> -> <span style="font-weight: bold;"><span class="IL_AD" id="IL_AD4">Formatting</span></span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Show</span><span style="font-weight: bold;"> at most:</span> untuk menentukan jumlah postingan yang mau ditampil pada halaman blog</li>
<li><span style="font-weight: bold;">Date Header Format</span>: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting</li>
<li><span style="font-weight: bold;">Archive Index Date Format</span>: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar</li>
<li><span style="font-weight: bold;">Timestamp Format</span>: untuk menentukan format waktu yang mau ditampilkan pada postingan</li>
<li><span style="font-weight: bold;">Time Zone</span>: untuk menentukan zona waktu tempat tinggal kita. Misalnya <span style="font-weight: bold;">(GMT+07.00) Jakarta</span> untuk wilayah Indonesia</li>
<li><span style="font-weight: bold;">Language</span>: untuk memilih bahasa yang mau digunakan</li>
<li><span style="font-weight: bold;">Convert link breaks</span>: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan <span style="font-weight: bold;">Yes</span> saja.</li>
<li><span style="font-weight: bold;">Show Title Field</span>: untuk menampilkan judul postingan. Jika pilih <span style="font-weight: bold;">No</span> maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih <span style="font-weight: bold;">Yes</span> saja</li>
<li><span style="font-weight: bold;">Show Link Field</span>: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih <span style="font-weight: bold;">No</span> saja</li>
<li><span style="font-weight: bold;">Enable Float <span class="IL_AD" id="IL_AD5">Alignment</span></span>: untuk mengaktifkan fungsi penjajaran pada text dan gambar</li>
<li><span style="font-weight: bold;">Post Template</span>: untuk mengisi teks yang mau ditampilkan pada kotak posting</li>
</ul><br />
4. Menu <span style="font-weight: bold;">Setting</span> -> <span style="font-weight: bold;">Comments</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Comments</span>: untuk menampilkan kotak komentar</li>
<li><span style="font-weight: bold;">Who Can Comment</span>: untuk menentukan siapa yang boleh memberi komentar</li>
<li><span style="font-weight: bold;">Comment Form Placement</span>: untuk menentukan dimana letak kotak komentar</li>
<li><span style="font-weight: bold;">Comments default for posts</span>: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak</li>
<li><span style="font-weight: bold;">Backlinks</span>: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak</li>
<li><span style="font-weight: bold;">Backlinks default for posts</span>: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak</li>
<li><span style="font-weight: bold;">Comments Timestamp Format</span>: untuk memilih format waktu yang mau ditampilkan pada kotak komentar</li>
<li><span style="font-weight: bold;">Comment Form Message</span>: untuk menampilkan pesan singkat diatas kotak komentar</li>
<li><span style="font-weight: bold;">Comment Moderation</span>: untuk menyaring komentar yang masuk sebelum diposting</li>
<li><span style="font-weight: bold;">Show word <span class="IL_AD" id="IL_AD1">verification</span> for comments</span>: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam</li>
<li><span style="font-weight: bold;">Show profile images on comment</span>: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger</li>
<li><span style="font-weight: bold;">Comment Notification Email</span>: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar</li>
</ul><br />
5. Menu <span style="font-weight: bold;">Settings</span> -> <span style="font-weight: bold;">Archiving</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Archive Frequently</span>: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan</li>
<li><span style="font-weight: bold;">Enable Post Pages</span>: mengaktifkan halaman posting untuk setiap artikel </li>
</ul><br />
6. Menu <span style="font-weight: bold;">Settings</span> -> <span style="font-weight: bold;">Site Feed</span> <br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Allow Blog Feed</span>: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email</li>
<li><span style="font-weight: bold;">Post Feed Redirect URL</span>: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja</li>
<li><span style="font-weight: bold;">Post Feed Footer</span>: untuk mengisi teks tambahan pada feed</li>
</ul><br />
7. Menu <span style="font-weight: bold;">Settings</span> -> <span style="font-weight: bold;">Email & Mobile</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Blogsend Address</span>: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.</li>
<li><span style="font-weight: bold;">Email posting address</span>: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.</li>
<li><span style="font-weight: bold;">Mobile Devices:</span> Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=42448" target="_blank">disini</a></li>
</ul><br />
8. Menu <span style="font-weight: bold;"><span class="IL_AD" id="IL_AD4">Settings</span> -> OpenID</span><br />
<ul style="text-align: justify;"><li> OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca <a href="http://openid.net/get-an-openid/what-is-openid/" target="_blank">disini</a> aja ya</li>
</ul><br />
9. Menu <span style="font-weight: bold;">Setting</span> -> <span style="font-weight: bold;">Permissions</span><br />
<ul style="text-align: justify;"><li><span style="font-weight: bold;">Blog Authors</span>: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik <span style="font-weight: bold;">Add Authors</span> lalu masukkan alamat email orang yang mau diundang kemudian klik <span style="font-weight: bold;">Invite</span></li>
<li><span style="font-weight: bold;">Blog Readers</span>: untuk mengatur siapa yang bisa membaca artikel blog Anda</li>
</ul><br />
Nah itu tadi penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda. Semoga bermanfaatMunazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-20480580169537692642012-03-03T05:44:00.002-08:002012-03-03T06:15:18.529-08:00Memposting Kode HTML Pada Artikel<div style="text-align: justify;"><span class="awal">S</span>ebenarnya artikel yang saya tulis ini sangat jarang sekali digunakan oleh para blogger, tapi ada baiknya akan saya tulis untuk lebih memperjelas cara membuat postingan berupa kode HTML ini. Untuk memposting kode HTML pada artikel, anda harus menggunakan tool untuk mengkonversi atau mengubah kode HTML menjadi kode yang dapat dibaca pada artikel. Jika tidak, setiap kali kita memposting. Kode HTML-nya tidak akan muncul pada artikel. Misalnya kode <span style="color: #3333ff;"><</span> harus diganti dengan <span style="color: #3333ff;">&lt;</span> dan kode <span style="color: #3333ff;">&lt;</span> harus diganti dengan <span style="color: #3333ff;">&amp;lt;</span><br />
<br />
<span style="color: black;">Berikut adalah <span class="IL_AD" id="IL_AD3">cara</span> untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel: </span><br />
<br />
1. Buka <a href="http://centricle.com/tools/html-entities/">http://centricle.com/tools/html-entities/</a><br />
<br />
2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak Centricle. Misalnya kode <span style="color: #3333ff;"><div id='outer-wrapper'></span>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcArbGLDHjLP6tTgOU5ULchymRElhdlkxAmFIfCvROXB-j8mMhusjH89t-4u7c8RggXoAJw06aZLueRyxq_cOQPRTPKSkFYk_Ndqpp3av63VpSTk0CP5HoGnSyNJ7wXgF_3ROpunbcxLJ0/s1600-h/centricle.gif"><img alt="centricle" border="0" id="BLOGGER_PHOTO_ID_5261690068407319858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcArbGLDHjLP6tTgOU5ULchymRElhdlkxAmFIfCvROXB-j8mMhusjH89t-4u7c8RggXoAJw06aZLueRyxq_cOQPRTPKSkFYk_Ndqpp3av63VpSTk0CP5HoGnSyNJ7wXgF_3ROpunbcxLJ0/s400/centricle.gif" style="cursor: pointer; display: block; height: 212px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
3. <span class="IL_AD" id="IL_AD2">Klik</span> <span style="font-weight: bold;">Encode</span>. Kemudian akan muncul kode baru seperti pada gambar dibawah ini.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc_KN6uSDq_qtqY0mBt3UtI5ZsZkxoadN9a5uybekmeAEi2QL2NpTnEzg2bjtlaYHG1ihmiuT2j6Sjo7XBFWu85vXcbDD1ryhJVLjBRAYSBnMX6J7pu-8QteRdnaRF7ZHJx1-NCCjqExGi/s1600-h/centricle1.gif"><img alt="centricle encode" border="0" id="BLOGGER_PHOTO_ID_5261689884503676242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc_KN6uSDq_qtqY0mBt3UtI5ZsZkxoadN9a5uybekmeAEi2QL2NpTnEzg2bjtlaYHG1ihmiuT2j6Sjo7XBFWu85vXcbDD1ryhJVLjBRAYSBnMX6J7pu-8QteRdnaRF7ZHJx1-NCCjqExGi/s400/centricle1.gif" style="cursor: pointer; display: block; height: 212px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>4. Gunakan kode baru tersebut untuk diposting pada artikel<br />
<br />
<div style="text-align: center;">Semoga bermanfaat..!!</div></div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0tag:blogger.com,1999:blog-1328164218451322165.post-76029092265832255292012-03-03T05:43:00.002-08:002012-03-03T06:15:18.530-08:00Membuat Kotak Pencari/Search di Blogspot<div style="text-align: justify;"><span class="awal">S</span>ore hari yang mendung, mungkin sebentar lagi hujan. Daripada sebentar lagi listrik mati, mending saya tulis saja artikel ini walaupun mungkin temen-temen semua sudah tahu semua, Saya yakin temen-temen semua pasti sudah tidak asing lagi dengan yang namanya <span style="font-weight: bold;">search box</span>. Karena kita rata-rata mencari <span class="IL_AD" id="IL_AD2">alamat</span> website atau informasi dengan tool ini.</div><br />
<div style="text-align: justify;">Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu <span class="IL_AD" id="IL_AD4">bagaimana</span> kalau kita ingin mencari data hanya pada blog kita saja?</div><br />
<div style="text-align: justify;">Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:</div><br />
1. Login ke <span style="font-weight: bold;">Blogger</span>. <span class="IL_AD" id="IL_AD3">Klik</span> menu <span style="font-weight: bold;">Design</span> -> <span style="font-weight: bold;">Pag</span><span style="font-weight: bold;">e Elements</span>. Lalu klik pada <span style="font-weight: bold;">Add a Gadget</span>.<br />
<br />
2. Klik <span style="font-weight: bold;">Add a Gadget</span> -> <span style="font-weight: bold;">HTML/Java script</span><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPnhejSCBEaJFS38_0NjDjPhckk5eOpXjuLUPNgIzotaP6vce1j6b8Zj-tRAHgJEH1tIb-BJfCUMQs8fS8YnaFpAN1-5bU2R7WNIFL0K6ABMdYGJJA6WcgbcbODyuu1h1JskqnWjTQWYm/s1600-h/search+box.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5263655625458463858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPnhejSCBEaJFS38_0NjDjPhckk5eOpXjuLUPNgIzotaP6vce1j6b8Zj-tRAHgJEH1tIb-BJfCUMQs8fS8YnaFpAN1-5bU2R7WNIFL0K6ABMdYGJJA6WcgbcbODyuu1h1JskqnWjTQWYm/s400/search+box.gif" style="cursor: pointer; display: block; height: 342px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
3. Masukkan kode dibawah ini kedalam kotak dan klik <span style="font-weight: bold;">Save</span><br />
<div style="text-align: left;"><blockquote><p align="left"><br />
<form id="searchthis" action="<span style="font-weight: bold;">ALAMAT URL BLOG</span>/search" style="display:inline;" method="get"><br />
<strong><span style="font-weight: bold;">NAMA KOTAK</span><br/></strong><br />
<input id="b-query" maxlength="255" name="q" size="20" type="text"/><br />
<input id="b-searchbtn" value="Search" type="submit"/><br />
</form></p></blockquote></div><span style="color: #333333;">Ganti</span> <span style="color: black; font-weight: bold;">ALAMAT URL BLOG</span><span style="color: black;"> dengan alamat URL blog Anda. Misalnya, http://www.maskolis.co.cc dan ganti </span><span style="color: black; font-weight: bold;">NAMA KOTAK</span><span style="color: black;"> dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari >artikel disini, Cari disini, dan lain-lain.</span><br />
<br />
<div style="text-align: justify;">4. Jika sudah selesai, klik <span style="font-weight: bold;">Save</span> lalu klik <span style="font-weight: bold;">View Blog</span> untuk melihat tampilannya di blog.<br />
<br />
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5263669877329492706" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX4F-QJv5PjQqeuE7c1AdI_XsCMFeRygmvtQHvlIo9zKOP2K14l7d8NyM2Jsl7sQ3oWjuXKJoNnyaYMtP3CLetku2XFf3dKN3F2z1VFQ6ph-OFoxgciNwHq0VcJikIkRMF1B6nSyIXnrY/s400/search+box1.gif" style="display: block; height: 77px; margin: 0px auto 10px; text-align: center; width: 190px;" /> <br />
Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada <span style="color: #3333ff;">size</span>. Anda juga bisa mengganti nama tombol <span style="color: #3333ff;">Search</span> dengan nama lain misalnya, Cari atau lanjut. Sebagai contoh, saya mengganti "<span style="color: #3333ff;">size=30</span>" dan "<span style="color: #3333ff;">value=car</span>i" maka hasilnya akan seperti yang dibawah ini.</div>Munazathttp://www.blogger.com/profile/02841068179266132298noreply@blogger.com0