Membuat Button Sederhana Dengan CSS Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7wbJX7ShrZg0W1vsufWZQn2RXZeOMqh9FcbTDt9KVjGvnUlgXA6o9xuezF4cAuv9bGl3pLh8eva0IwaGRn8vIE7LHiK5ahu2G5ML29G5pWFPN-56ZOtfNB9Cue5UiYggHmDfOkDfNho1/s1600/button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Button Sederhana Dengan CSS Di Blog" border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7wbJX7ShrZg0W1vsufWZQn2RXZeOMqh9FcbTDt9KVjGvnUlgXA6o9xuezF4cAuv9bGl3pLh8eva0IwaGRn8vIE7LHiK5ahu2G5ML29G5pWFPN-56ZOtfNB9Cue5UiYggHmDfOkDfNho1/s320/button.jpg" title="Membuat Button Sederhana Dengan CSS Di Blog" width="320" /></a></div><br />Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menurut saya, adalah yang simple dan mudah dibaca oleh reader. Tapi tidak adalah salahnya jika anda memakai button default yang sudah ada pada HTML.<br /><input type="button" value="Contoh Button" /> Contoh tombol diatas adalah default. Lalu bagaimana kita membuat dengan CSS di Blog ?<br /><br />Letakkan kode dibawah ini diatas  ]]></b:skin> :<br /><br /><pre class="brush:js;">.button{<br /><br />    margin: 10px;<br /><br />    padding: 1px 4px;            <br /><br />    width: 130px;<br /><br />    cursor: pointer;<br /><br />    border: 1px solid #2493FF;<br /><br />    overflow: visible;<br /><br />    display: inline-block;<br /><br />    color: #fff;<br /><br />    font: bold 1.4em arial, helvetica;<br /><br />    text-shadow: 0 -1px 0 rgba(0,0,0,.4);          <br /><br />    background-color: #2493ff;<br /><br />    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); <br /><br />    transition: background-color .2s ease-out;<br /><br />    border-radius: 3px;<br /><br />    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                    <br /><br />}<br /><br /><br /><br />.button:hover{<br /><br />      background-color: #7cbfff;<br /><br />        border-color: #7cbfff;<br /><br />}<br /><br /><br /><br />.button:active{<br /><br />    position: relative;<br /><br />    top: 3px;<br /><br />    text-shadow: none;<br /><br />    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}<br /><br /></pre><br />Sedangkan untuk memanggilnya kita masukan ini di dalam artikel pada HTML :<br /><pre class="brush:js;"><a class="button" href="URL" target="_blank" title="">Nama Tombol</a><br /><br /></pre>Nantinya akan seperti ini : <br /><div style="text-align: center;"><a class="button" href="http://herlambang.net78.net/mod_project/data-form.php?no=8" target="_blank" title="Wammy">DEMO KLIK DISINI</a>  </div>

Membuat Button Sederhana Dengan CSS Di Blog

Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menur...

Baca selengkapnya »

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SUM7TTjwMAtbWM-ABTTzjnqRlVe42kHRnM40Xrmu2qsWQZqoQQjcYFUt6A_u0b-Oh6ScMO-VsVZ2-LxFDZAkwKSim4RtdEkeCJwq-JMLBrg3_QmG5rcc7YmZix-_0lbReo0inpFiaLH6/s1600/List.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog" border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SUM7TTjwMAtbWM-ABTTzjnqRlVe42kHRnM40Xrmu2qsWQZqoQQjcYFUt6A_u0b-Oh6ScMO-VsVZ2-LxFDZAkwKSim4RtdEkeCJwq-JMLBrg3_QmG5rcc7YmZix-_0lbReo0inpFiaLH6/s320/List.JPG" title="Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog" width="320" /></a></div><br /><span style="color: lime;">Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog</span> | Order List memang telah disediakan oleh blogger sebelumnya. Listnya memang standar dengan list yang biasa kita buat dengan Microsoft Word.<br /><ol><li>List standar</li><li>Model list blogger</li><li>Tanpa CSS3</li><li> </li></ol>Nah contoh diatas adalah model yang disediakan blogger. Bagaimanajika disisipan dengan CSS3? Apapun yang dihasilkan lewat CSS3 akan menjadi lebih indah. Seperti demo dibawah ini. <br /><br /><div style="text-align: center;"><a class="button" href="http://bukakedok.blogspot.com/2013/04/list-css3.html" target="_blank" title="DEMO">D E M O</a>  </div>HTML :<br /><br /><pre class="brush:js;"> <ol class="wammy-list"><br /><li><a href="/">Sebagai ajang pengenalan dunia Web kepada masyarakat.</a></li><br /><li><a href="#">Mempermudah pencarian informasi.</a></li><br /><li><a href="#">Mempermudah sistem akademik suatu sekolah.</a></li><br /><li><a href="#">Meningkat kualitas dan mutu teknologi terutama di bidang Web.</a></li><br /></ol>  </pre><br />CSS taruh diatas kode <i><b>]]></b:skin></b></i><br /><pre class="brush:js;"><br />.wammy-list a{<br /> position: relative;<br /> display: block;<br /> padding: .4em .4em .4em .8em;<br /> *padding: .4em;<br /> margin: .5em 0 .5em 2.5em;<br /> background: #ddd;<br /> color: #444;<br /> text-decoration: none;<br /> transition: all .3s ease-out; <br />}<br /><br />.wammy-list a:hover{<br /> background: #eee;<br />} <br /><br />.wammy-list a:before{<br /> content: counter(li);<br /> counter-increment: li;<br /> position: absolute; <br /> left: -2.5em;<br /> top: 50%;<br /> margin-top: -1em;<br /> background: #fa8072;<br /> height: 2em;<br /> width: 2em;<br /> line-height: 2em;<br /> text-align: center;<br /> font-weight: bold;<br />}<br /><br />.wammy-list a:after{<br /> position: absolute; <br /> content: '';<br /> border: .5em solid transparent;<br /> left: -1em;<br /> top: 50%;<br /> margin-top: -.5em;<br /> transition: all .3s ease-out;   <br />}<br /><br />.wammy-list a:hover:after{<br /> left: -.5em;<br /> border-left-color: #fa8072;   <br />} <br /><br />ol{<br /> counter-reset: li; /* Initiate a counter */<br /> list-style: none; /* Remove default numbering */<br /> *list-style: decimal; /* Keep using default numbering for IE6/7 */<br /> font: 15px 'trebuchet MS', 'lucida sans';<br /> padding: 0;<br /> padding-left:100px;<br /> padding-right:190px;<br /> margin-bottom: 4em;<br /> text-shadow: 0 1px 0 rgba(255,255,255,.5);<br />}<br /><br />ol ol{<br /> margin: 0 0 0 2em; <br />}</pre> Selamat Mencoba!!

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog | Order List memang telah disediakan oleh blogger sebelumnya. Listnya memang standa...

Baca selengkapnya »

Membuat Garis Bawah Pada Link Menghilang

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRCki-PWA2nvIniAytMsdfuSpWt_wZ_Blfl_7IScZjpuzSphUKpnwjm5Yz-19lpNBbyA1PFM9wPBr2m4swA1zA5Ar76xEyOh_Y21QVvHwOlT9rxhx9P2Hli3kTH5Tn_03tTXROBVjRKi2/s1600/CSS.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Anti Underline Link" border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRCki-PWA2nvIniAytMsdfuSpWt_wZ_Blfl_7IScZjpuzSphUKpnwjm5Yz-19lpNBbyA1PFM9wPBr2m4swA1zA5Ar76xEyOh_Y21QVvHwOlT9rxhx9P2Hli3kTH5Tn_03tTXROBVjRKi2/s320/CSS.JPG" title="CSS Anti Underline Link" width="320" /></a></div>Jadwal artikel ini pasti sudah terbit, nah sekarang kita bermain sedikit dengan CSS yang sangat sederhana. Jika anda ingin membuat link di blog anda tanpa garis bawah pakai saja CSS di bawah ini kemudia letakan dibawah <b>]]></b:skin></b>.<br /><br /><pre class="brush:js;"><style type='text/css'><br />    a:link {text-decoration: none}<br />    a:visited {text-decoration: none}<br />    a:active {text-decoration: none}<br /></style><br /><br /></pre>Pasti berhasil, cara ini juga saya terapkan di Dreamweaver, seperti gambar diatas :D

Membuat Garis Bawah Pada Link Menghilang

Jadwal artikel ini pasti sudah terbit, nah sekarang kita bermain sedikit dengan CSS yang sangat sederhana. Jika anda ingin membuat link di b...

Baca selengkapnya »

Membuat Statis Follow Blog Ala Wordpress Di Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipI7J8RtwmI57_E4K0cjaqHjQYujjCoOpOz2RzoyjnKW-gK7WD_Dxc0aArz8X44Bmr-nNmdVXb8Iif3HzcIaw6bVGavT-g6NOGUeGahfQLs40wNeWQUoCqkAH9bPMMcBj3E-Ib_6uC-crM/s1600/Follow.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Statis Follow Blog Ala Wordpress Di Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipI7J8RtwmI57_E4K0cjaqHjQYujjCoOpOz2RzoyjnKW-gK7WD_Dxc0aArz8X44Bmr-nNmdVXb8Iif3HzcIaw6bVGavT-g6NOGUeGahfQLs40wNeWQUoCqkAH9bPMMcBj3E-Ib_6uC-crM/s1600/Follow.JPG" title="Membuat Statis Follow Blog Ala Wordpress Di Blogger" /></a></div><br />Membuat Statis Follow Blog Ala Wordpress Di Blogger | Mengerikan, sekarang apa yang ada di wordpress bisa ada di Blogger. Contohnya adalah statis follow wordpress...yang sudah default ada di blog wordpress sekarang bisa di pakai oleh blogger juga. Cara ini dipakai untuk menghemat tempat agar blog sedap dipandang.<br /><br />Anda letakkan kode ini didalam Gadget yaitu pada HTML/Javascript.<br /><br /><blockquote><style type="text/css"><br />/*<![CDATA[*/<br />    #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}<br />    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}<br />    .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}<br />    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSDpGyJlcOitgFlEsgfehidxpUL8xaxU1EyAlBY7ZZNdQcZ2qHE3R6e5Cq3mhvjRwJ3QlHv-AmGe1eF-ONCnA7g-2r9wOIQ2ZB3gqM56tBv0_t9GvbJgwOD9FGWN4H9Pxq5kaorssHYcyW/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}<br />    .w2bfollowButton:hover,.followActive {color: #fff !important;}<br />    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}<br />    .followactive {background-color: #333;}<br />    .w2bfollowForm {padding: 15px;}<br />    .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}<br />    .w2bfollowForm p {margin: 0 0 10px;}<br />    .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}<br />    .w2bfollowForm form {text-align: center;}<br />    .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}<br />    .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}<br />    .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}<br />    .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}<br />    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}<br />    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}<br />    .w2bFollowFooter a:hover {color: #fff;background: none;}<br />/*]]>*/<br /></style><br /><script type="text/javascript"><br />/*<![CDATA[*/<br />;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);<br />/*]]>*/<br /></script><br /><div id="w2bfollowSubscribe" style="display:none;"><br />    <div class="w2bfollowForm"><br />        <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a><br />        <h3>Follow "<i><u><b><span style="color: red;">Nama Blog Anda</span></b></u></i>"</h3><br />        <p><b><i><u><span style="color: blue;">Ketik Pesan Anda Disini!!</span></u></i></b></p><br />        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<b><i><u><span style="color: lime;">Feedburner ID anda</span></u></i></b>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />            <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/><br />            <input type="hidden" value="Feedburner ID anda" name="uri"/><br />            <input type="hidden" name="loc" value="en_US"/><br />            <input type="submit" value="Subscribe" class="emailSubmit"/><br />        </form><br />        <p class="w2bFollowFooter"><br />            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a><br />        </p><br />    </div><br /></div></blockquote><br />Cukup mudah dan sederhana.<br />Ganti warna merah dengan : Nama Blog Anda<br />Ganti warna biru dengan : Pesan Anda<br />Ganti warna hijau dengan : ID Feedburner Anda<br />Misal : http://feeds.feedburner.com/<i><b><span style="color: orange;">bocahit<span style="color: black;"> (bocahit adalah ID Feedburner anda)</span></span></b></i>

Membuat Statis Follow Blog Ala Wordpress Di Blogger

Membuat Statis Follow Blog Ala Wordpress Di Blogger | Mengerikan, sekarang apa yang ada di wordpress bisa ada di Blogger. Contohnya adalah s...

Baca selengkapnya »

Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50zQwPfaKZiVjg-q_Pngjp8Dd9-uGlbMMcDaZK_IMsPUbKgI1Fb1wGIZ0KXq68yvn2BWh_nuf5sIbsfcr1BIkIyS2kUP0C_EJ8WZpAmRL9eWznsqS3-3h_y2zT8KVEW6WM_9gcRqKrI8o/s1600/klan.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close" border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50zQwPfaKZiVjg-q_Pngjp8Dd9-uGlbMMcDaZK_IMsPUbKgI1Fb1wGIZ0KXq68yvn2BWh_nuf5sIbsfcr1BIkIyS2kUP0C_EJ8WZpAmRL9eWznsqS3-3h_y2zT8KVEW6WM_9gcRqKrI8o/s400/klan.JPG" title="Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close" width="400" /></a></div><br /><span style="color: orange;">Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close</span> | Beberapa hari yang lalu saya menulis masalah <a href="http://www.bocahit.com/2013/02/cara-mengatasi-crawl-errors-404-pada.html" target="_blank">Mengatasi Errors di Webmaster</a> dan <a href="http://www.bocahit.com/2013/02/membuat-avatar-komentar-melingkar.html" target="_blank">Memodifikasi Avatar Komentar</a>, kali ini masih di sekitar Blogger. Admin blog yang mungkin sudah berumur "tua" di dunia blog, mungkin akan berpikiran untuk memasang beberapa iklan di blog agar bisa ada hasil receh yang ia terima. Salah satunya memasang iklan melayang. Kalau iklan melayang menurut saya di beri tombol X (close) agar tidak mengganggu pandangan pengunjung. Ini menurut saya...karena itu saya pasang cara iklan melayang dengan tombol close.<br /><br />Masukkan kode di bawah ini, pada Layout  di Gadget HTML/JS<br /><br /><br /><pre class="brush:js;"><script type='text/javascript'><br />    $(document).ready(function() {<br />    $('img#closed').click(function(){<br />    $('#btm_banner').hide(90);<br />    });<br />    });<br />    </script><br /><br />    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};<br />    </script><script type="text/javascript"><br />    if (window.jstiming) window.jstiming.load.tick('headEnd');<br />    </script><br /><br />    <!--start: floating ads--><br />    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;"><br /><br />    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjfkSOV4Gqi5xMwWDkeCE1JJWYGF5FheWDb3_pYkHonD6d9BjDzyG2B5MRvanpcjHKcpvMFtv9I4rLL7jbLu63X_VTPeMmCR2FWPf3GXJj4VCHEyhiyHWxE6pFB8euHiX9pZ_Ag9r-7eX/s1600/PhoXo2.png'/></center></a></div><br />    <!--Mulai--><br />   Iklan Anda<br />    <!--Akhir--><br />    </div><br />    <!--end: floating ads--><br />    <!--start: floating ads--><br />    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;"><br /><br />    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjfkSOV4Gqi5xMwWDkeCE1JJWYGF5FheWDb3_pYkHonD6d9BjDzyG2B5MRvanpcjHKcpvMFtv9I4rLL7jbLu63X_VTPeMmCR2FWPf3GXJj4VCHEyhiyHWxE6pFB8euHiX9pZ_Ag9r-7eX/s1600/PhoXo2.png'/></center></a></div><br /><br />    <!--Mulai--><br />Iklan Anda     <br /> <!--Akhir--><br /><br />    </div><br />    <!--end: floating ads--><br /></pre>Okey selesai. Silakan ganti <b>Iklan Anda</b> dengan kode iklan anda.

Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close

Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close | Beberapa hari yang lalu saya menulis masalah Mengatasi Errors...

Baca selengkapnya »

Membuat Avatar Komentar Melingkar

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q6_5z-GozQW0Ot0rF6tTsF3aCjWKju0jQ1-nMuM4OwVCttDQ4GltB2172Mu_rz4TGtUqA1XKs0AL0TQvY18qWJW8mj9S9Z6mW47P-WgMhzCpcoKM0VeN-G_b643wS2_QWf7AVfAVElNI/s1600/roundining-the-blogger-avatar-image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Avatar Komentar Melingkar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q6_5z-GozQW0Ot0rF6tTsF3aCjWKju0jQ1-nMuM4OwVCttDQ4GltB2172Mu_rz4TGtUqA1XKs0AL0TQvY18qWJW8mj9S9Z6mW47P-WgMhzCpcoKM0VeN-G_b643wS2_QWf7AVfAVElNI/s1600/roundining-the-blogger-avatar-image.jpg" title="Membuat Avatar Komentar Melingkar" /></a></div><br />Membuat Avatar Komentar Melingkar | Terkadang aku juga bosan dengan bentuk avatar komentar yang hanya kotak saja. Aku juga kadang temukan avatar komentar yang sama di beberapa blog tetangga. Ya, karna beberapa template <i>default </i>dari blogger memang hanya seperti itu. Lalu Bagaimana membuatnya melingkar ?.....<br /><br />Cukup letakkan kode di bawah ini diatas kode ]]></b:skin>.<br /><br /><pre class="brush:js;">.avatar-image-container,<br />.avatar-image-container img {<br />    max-width: 50px !important;<br />    width: 50px !important;<br />    max-height: 50px !important;<br />    height: 50px !important;<br />    padding: 0 !important;<br />    border: 0px;<br />    -webkit-border-radius: 999px;<br />    -moz-border-radius: 999px;<br />    border-radius: 999px;<br />}<br /><br />.avatar-image-container{<br />    border:3px solid #fff !important;<br />    -webkit-box-shadow: 0 1px 2px #BBB;<br />    -moz-box-shadow: 0 1px 2px #BBB;<br />    box-shadow: 0 1px 2px #BBB;<br />} </pre>Selasai, sekarang anda lihat avatar komentar di blog anda.

Membuat Avatar Komentar Melingkar

Membuat Avatar Komentar Melingkar | Terkadang aku juga bosan dengan bentuk avatar komentar yang hanya kotak saja. Aku juga kadang temukan av...

Baca selengkapnya »

Cara Mengatasi Crawl Errors 404 Pada Webmaster

<span style="color: blue;">Cara Mengatasi Crawl Errors 404 Pada Webmaster |</span> Google saat ini sangat memperhatikan dan menyeleksi situs - situs yang bermanfaat bagi pengunjung. Tapi jika terlalu banyak link yang error / rusak maka itu akan membuat google sedikit melakukan tindakan pada blog kita. Salah satunya adalah Error 404 yang sering kita temui jika mendapati artikel yang memiliki <i>error url </i>. Tapi cara masalah ini bisa diatas dengan mengarahkan link yang error ke homepage blog kita.<br /><br />1. Langsung anda ke bagian Setelan (Setting)<br /><br />2. Kemudian klik Seacrh Preference (Preferensi Penelusuran)<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswu4E4h487a8rRLHrI1ZRaSaY1FlSnmJOqqJrfmvatqHltEpxwSiOcyGiy4LxQN3tlNEQZLvzL494DejN4ZlgXbUUr7fMzRN1sWpGfhQzXN96JiQR-xWsM71VaNwi5TNFpc4BDKlG0ur8/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Crawl Errors 404 Pada Webmaster" border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswu4E4h487a8rRLHrI1ZRaSaY1FlSnmJOqqJrfmvatqHltEpxwSiOcyGiy4LxQN3tlNEQZLvzL494DejN4ZlgXbUUr7fMzRN1sWpGfhQzXN96JiQR-xWsM71VaNwi5TNFpc4BDKlG0ur8/s320/4.JPG" title="Cara Mengatasi Crawl Errors 404 Pada Webmaster" width="320" /></a></div><br />3. Klik Edit seperti gambar di bawah ini<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7srW_Eh-Ml6zgqt4wGXqNQOdel0z8wUo0CCLeUUd-epTikRZLgIibBpR5G2-fGSC7j_QvwkWBjP3JJrWnPCZUxYcmx2dbMz1lgU_y98plmLxqoB-8sQt0yeN_TImrGISyVX4w7Srfwc1b/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Crawl Errors 404 Pada Webmaster" border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7srW_Eh-Ml6zgqt4wGXqNQOdel0z8wUo0CCLeUUd-epTikRZLgIibBpR5G2-fGSC7j_QvwkWBjP3JJrWnPCZUxYcmx2dbMz1lgU_y98plmLxqoB-8sQt0yeN_TImrGISyVX4w7Srfwc1b/s320/5.JPG" title="Cara Mengatasi Crawl Errors 404 Pada Webmaster" width="320" /></a></div>4. Masukan kode ini di dalamnya<br /><blockquote class="tr_bq"><script type="text/JavaScript"><br />location.replace('<i><b><span style="color: red;">http://www.bocahit.com/</span></b></i>');<br /></script></blockquote><br />Ganti warna merah dengan URL blog anda. Simpan Perubahan.<br /> Nah kita sudah selesai mengatur arahan ke blog kita, sekarang kita akan membenahi Crawl Error di Webmaster.<br /><br />1. Masuk di https://www.google.com/webmasters/tools<br /><br />2. Kemudian Klik <b>Health</b> - Pilih <b>Crawl Errors</b><br /><br />3. Lihat yang di kotak merah adalah crawl errors pada blog anda<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5S7_7ejO1BJaDAbwIALvuFvDek7FOjgdMn51ZDP4Jvq8SWy6On8QjaTaz2Mx_PAEerIwgZSxH4MKMjLmjhImQc4ZglidsTdSeZ5JeVwdJbtsPvXmo3Ou4s9akOZSeGyWeSAwULyhOKOVP/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Crawl Errors 404 Pada Webmaster" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5S7_7ejO1BJaDAbwIALvuFvDek7FOjgdMn51ZDP4Jvq8SWy6On8QjaTaz2Mx_PAEerIwgZSxH4MKMjLmjhImQc4ZglidsTdSeZ5JeVwdJbtsPvXmo3Ou4s9akOZSeGyWeSAwULyhOKOVP/s320/1.JPG" title="Cara Mengatasi Crawl Errors 404 Pada Webmaster" width="320" /></a></div><br />4. Klik yang di kotak merah, kemudian akan seperti ini :<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFhoo56y-ta-brOJKU7hT8FN6LHF17qCUPMgFHUm3U05eOoOOUDmQ3xYXWt04jG_lfFGKE5QHgNqyePbI_lOo2psx3wmPWXAnbCwkJoxwTVol931yIfx7n-cDkn9HTPbhdvLGAuVdzLWh/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Crawl Errors 404 Pada Webmaster" border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFhoo56y-ta-brOJKU7hT8FN6LHF17qCUPMgFHUm3U05eOoOOUDmQ3xYXWt04jG_lfFGKE5QHgNqyePbI_lOo2psx3wmPWXAnbCwkJoxwTVol931yIfx7n-cDkn9HTPbhdvLGAuVdzLWh/s320/2.JPG" title="Cara Mengatasi Crawl Errors 404 Pada Webmaster" width="320" /></a></div>Cenatng semua kemudian klik MARK AS FIXED. Klik link, jika ingin melihat lebih detail.<br /><div class="separator" style="clear: both; text-align: center;"><span bawah="" detail="" di="" gambar="" ingin="" ini.="" jika="" kemudian="" klik="" lebih="" link="" melihat="" seperti="" span="" style="color: lime;" url=""><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjETUCvf_WixHTtUvAtVGdt5Frw50zIHi2gN2glYAQB3sfjSKEzCfcb9Q3F9dfyp1iA6GoFeZpGMoNqKCxZJH8AfDI6cRxmNtML5YjGvYFOAzfNWqEEHwmuDUIMHL9SEdMmb8C5xePv_Iy/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Crawl Errors 404 Pada Webmaster" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjETUCvf_WixHTtUvAtVGdt5Frw50zIHi2gN2glYAQB3sfjSKEzCfcb9Q3F9dfyp1iA6GoFeZpGMoNqKCxZJH8AfDI6cRxmNtML5YjGvYFOAzfNWqEEHwmuDUIMHL9SEdMmb8C5xePv_Iy/s320/3.JPG" title="Cara Mengatasi Crawl Errors 404 Pada Webmaster" width="320" /></a></span></div>Tinggal menunggu beberapa hari menunggu GoogleBot Visit ke blog kita.

Cara Mengatasi Crawl Errors 404 Pada Webmaster

Cara Mengatasi Crawl Errors 404 Pada Webmaster | Google saat ini sangat memperhatikan dan menyeleksi situs - situs yang bermanfaat bagi pen...

Baca selengkapnya »

Blogger VS Wordpress

<div class="separator" style="clear: both; text-align: center;"><a href="http://inkthemesmainsite.inkthemes.netdna-cdn.com/wp-content/uploads/2012/02/wb1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger VS Worpdress" border="0" height="213" src="http://inkthemesmainsite.inkthemes.netdna-cdn.com/wp-content/uploads/2012/02/wb1.jpg" title="Blogger VS Worpdress" width="320" /></a></div><br />Blogger VS Wordpress | Kenapa saya membuat artikel ini?  Hanya ingin menguji sejauh mana analisa saya terhadap Blogger dan Wordpress. Dimulai dari ini :<br /><br /><b>Dari Bagian Pembangun Website (Website Builder)</b><br />Blogger bisa dikatakan cloud provider yang bisa menjadikan pelanggannya berhak menjadi Administrator. Dengan kata lain mengatur semuanya tentang blog sampai ke bahasa pemrograman webnya. Relatif mudah dan sederhana, tetapi blogger tetap tidak bisa di fungsikan secara offline karena tidak termasuk kriteria Content Management System.<br /><br />Kalau Wordpress, pengelolaannya bisa sedikit rumit tetapi penataan blognya sangat cepat dan mudah, wajar saja jika Wordpress banyak di gunkan oleh website bisnis, perkantoran, hotel, jasa penebangan. Selain itu Wordpress adalah salah satu jenis CMS yang sangat terkenal.<br /><b><br /></b><b>Dari Bagian Kepopuleran</b><br />Perhatikan Screenshot yang saya ambil baru saja :<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrmyyk17u5YC2PaHc-cdQlEZmNLuUFIYDY2xjBPyDaf7znQJEsoAHoe5XKN2UQgEvWozd50AIg7k43zmwCCF2lZtZSJE57prtukpoxavZ6zs6q-fI3AwgUqUhx4KtPN5FlairZuGkVtc_/s1600/WP.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger VS Worpdress" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrmyyk17u5YC2PaHc-cdQlEZmNLuUFIYDY2xjBPyDaf7znQJEsoAHoe5XKN2UQgEvWozd50AIg7k43zmwCCF2lZtZSJE57prtukpoxavZ6zs6q-fI3AwgUqUhx4KtPN5FlairZuGkVtc_/s400/WP.JPG" title="Alexa Rank WP" width="400" /></a></div><br />Diatas adalah dari Wordpress dan selanjutnya Blogger :<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYF1AoL4KRgUoAG5j3NsSDuqjMYneOl_9ZOSif7q5i9s0HAMI1y_gyaSo6r9VGIaIMicMBXK1_DqK-jC0ATW2aA10Qah3SKOofn2Xt8B1HAqaiUjFC19fXEWVu5VNhUOTr4xCQ45mpLIP/s1600/Blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger VS Worpdress" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYF1AoL4KRgUoAG5j3NsSDuqjMYneOl_9ZOSif7q5i9s0HAMI1y_gyaSo6r9VGIaIMicMBXK1_DqK-jC0ATW2aA10Qah3SKOofn2Xt8B1HAqaiUjFC19fXEWVu5VNhUOTr4xCQ45mpLIP/s400/Blogger.JPG" title="Alexa Rank Blogger" width="400" /> </a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Global Alexa Rank WP 22 dan Blogger hanya 44, selisih separuhnya. Rank in WP di Amerika 27, tapi kenapa Blogger ada di Rank in India?? itu saya belum paham. Lalu reputation Wordpress lebih kecil dari pada Blogger. </div><div class="separator" style="clear: both; text-align: left;"><b><br /></b></div><div class="separator" style="clear: both; text-align: left;"><b>Dari Bagian Mata Search Engine</b></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Kita sering melihat banyak domain.blogspot.com tapi kenapa Google suka dengan Wordpress?</div><div class="separator" style="clear: both; text-align: left;">Karena, worpress.com juga banyak digunakan atau memperbolehkan teknik-teknik SEO yang dilarang oleh Google, misalnya penggunaan STT2 maupun WP-ROBOT yang dengan mudah menempatkan domain wordpress.com di halaman depan google. WP ROBOT yang aku tahu, sebuah Plugin berbayar untuk wordpress yang berfungsi untuk mengambil artikel orang lain dan memasangkannya pada blog kita. tapi tidak semua hosting memperbolehkan plugin ini di aktifkan karena akan membuat Database jebol... di gabung dengan plugin2 lainnya seperti STT2...<strong>STT2</strong> (<em>SEO SearchTerms Tagging 2</em>) merupakan <strong>plugin wordpress</strong> yang cukup banyak digunakan. Plugin ini merupakan buatan Manusia yang ada di Indonesia. Selayaknya memang kita memberikan reward atau donasi atas kerja keras pembuatnya, namun demikian <strong>STT2</strong> (<em>SEO SearchTerms Tagging 2</em>) yang penggunanya sangat banyak mungkin sebagian besar orang luar <strong>Indonesia</strong>. Juga di blog saya <a href="http://doosky.com/">doosky.com</a> yang memakai CMS Wordpress menggunakan Easy SEO yang akan langsung terindex Mesing Pencari. </div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">3 bagian tadi adalah fenomena Blogger dan Wordpress, saya menggunakan Blogger dan Wordpress jadi saya tidak berpihak ke siapa pun. hahaha</div>

Blogger VS Wordpress

Blogger VS Wordpress | Kenapa saya membuat artikel ini?  Hanya ingin menguji sejauh mana analisa saya terhadap Blogger dan Wordpress. Dimula...

Baca selengkapnya »

Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxa2qX6bfhrCNex3Y0Ff-ljooJDe22MDWsb667kXaa2x-gM8fCAcKvUbsc5eKmo-qy4jU9PmpWpM3dphnhRZG6hJb6tKUa1Bvk18tTu2P_len-40i1GF7lCFa0IsaIuusLGNID6cZHI0k/s1600/page.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,tips,wammy,blogger" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxa2qX6bfhrCNex3Y0Ff-ljooJDe22MDWsb667kXaa2x-gM8fCAcKvUbsc5eKmo-qy4jU9PmpWpM3dphnhRZG6hJb6tKUa1Bvk18tTu2P_len-40i1GF7lCFa0IsaIuusLGNID6cZHI0k/s200/page.jpg" title="Blokquote" width="200" /></a></div><br /><span style="color: lime;">Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger</span> | Ada banyak cara untuk kita membuat Frame di blog yang di khususkan setiap menulis script HTML / JS. Apalagi untuk blog yang bertema tutorial blog atau web design, beberapa script yang bisa di pakai ada seperti di bawah ini :<br /><br />Taruh diatas <b>]]></b:skin></b><br /><blockquote class="tr_bq">.codeview {<br />margin : 15px 15px 15px 35px;<br />padding : 10px;<br />clear : both;<br />font-family : "Courier New", "MS Sans Serif", sans-serif, serif;<br />line-height:1.6;<br />background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91Ml4FtyBPRPmJ-Qp1_IEN13qR-WpDZ5Xw08jNABiII8P-0Wn0QcD0snvz0XK7bc42wJse62c1WYBScZjw4DS6gonDpRzlCAIuYA2LVgcqRSpe27gTmW6r7-pjqQxQxZJX9cBGX8rClQU/') no-repeat scroll bottom right #EFFBF5;<br />border-top : 1px solid #eeeeee;<br />border-right : 2px solid #cccccc;<br />border-bottom : 2px solid #cccccc;<br />border-left : 1px solid #eeeeee;<br />}<br />.codeview li {<br />line-height : 24px;<br />color : #333333;<br />margin : 0;<br />padding : 0;<br />}</blockquote>Script diatas harus kita panggil, dan jadinya seperti ini :<br /><br /><div class="codeview"><div class="codeview"><br /><b><!-- Letakkan kode anda disini --></b><br /></div></div><br />Cara pertama diatas bukanlah blockquote. Lalu bagaimana jika dengan blockquote ?<br /><br />1. Ke Edit HTML, cari kode <span class="fullpost" style="font-family: inherit;"><b>.post blockquote ATAU </b></span><span class="fullpost" style="font-family: inherit;"><b>.post blockquote{</b></span><br /><br />Kurang lebih bentuknya seperti ini : <br /><blockquote class="tr_bq">.post blockquote {<br />    padding-left: 10px;<br />    border-left: 5px solid #666;<br />        color: #666;<br />font-style:italic;<br />}<br />.post blockquote p {<br />  margin:.75em 0;<br />}</blockquote>2. Hapus kode yang ada di  <span class="fullpost" style="font-family: inherit;"><b>.post blockquote / </b></span><span class="fullpost" style="font-family: inherit;"><b>.post blockquote{</b></span><br /><br /><span class="fullpost" style="font-family: inherit;">3. Letakkan kode blockquote di atas </span><b>]]></b:skin</b><br /><br />4. Simpan.<br /><br />Blockquote yang bisa di pakai menjadi frame HTML, seperti di bawah ini :<br />1. Scanned Code Blue<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoH-WCwv5RMzg0JNJJ6TMk57FcEndBzxgaDp_fsiOIxAa8oEY01Li3nEMB9Oy0_ZBzeGGWNUI7z_MsL-VBPl7F8g7JBoiF2Df_wyFTmNnaQWKWH_Dehwn-Krza0b62mg4tOZrPfDZifBs3/s1600/blue2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoH-WCwv5RMzg0JNJJ6TMk57FcEndBzxgaDp_fsiOIxAa8oEY01Li3nEMB9Oy0_ZBzeGGWNUI7z_MsL-VBPl7F8g7JBoiF2Df_wyFTmNnaQWKWH_Dehwn-Krza0b62mg4tOZrPfDZifBs3/s320/blue2.JPG" width="320" /></a></div><br /><blockquote class="tr_bq"><span class="fullpost" style="font-family: inherit;">.post blockquote { </span><br /><span class="fullpost" style="font-family: inherit;">margin : 0 20px; </span><br /><span class="fullpost" style="font-family: inherit;">padding: 70px 20px 20px 40px; </span><br /><span class="fullpost" style="font-family: inherit;">background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBfucVyuS9HmplRscXUqcExz4cdlmJdH0MR9D2JFHLiRaBzNheLjDoXLUPbZ1c5ZkC1F8b-0rnsKyS09ezC_WKWKR6vhO_EUB6ZoM_QMFWWlGDfOhXquRdPCUYVI45jPRXp0ylZdqzG7w/s400/angular-purple.gif) no-repeat top left; </span><br /><span class="fullpost" style="font-family: inherit;">font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; </span><br /><span class="fullpost" style="font-family: inherit;">color : #000; </span><br /><span class="fullpost" style="font-family: inherit;">border-bottom : 5px solid #435388; </span><br /><span class="fullpost" style="font-family: inherit;">} </span><br /><span class="fullpost" style="font-family: inherit;">.post blockquote p { </span><br /><span class="fullpost" style="font-family: inherit;">margin: 0; </span><br /><span class="fullpost" style="font-family: inherit;">padding-top:10px; </span><br /><span class="fullpost" style="font-family: inherit;">}</span></blockquote> 2. Scanned Code Red<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtdFKmFm9Hu9cFywKkmpvm-dB0i16X1ECbANTU-TVVfymXp-jKpjsOgN3u8JXiek2B8m-n1sMb_KicaoT_tHDBS9fBRfnSKCsS1ZLzu0_2CIGtgfSHImKBrhYQ0_Zvsu2a__8Tiu_JiI6/s1600/red.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tuorial,tips,wammy,blogger,blockquote" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtdFKmFm9Hu9cFywKkmpvm-dB0i16X1ECbANTU-TVVfymXp-jKpjsOgN3u8JXiek2B8m-n1sMb_KicaoT_tHDBS9fBRfnSKCsS1ZLzu0_2CIGtgfSHImKBrhYQ0_Zvsu2a__8Tiu_JiI6/s400/red.JPG" title="Blockquote" width="400" /></a></div><br /><blockquote class="tr_bq"><span class="fullpost" style="font-family: inherit;">.post blockquote { </span><br /><span class="fullpost" style="font-family: inherit;">margin : 0 20px; </span><br /><span class="fullpost" style="font-family: inherit;">padding: 20px 60px 80px 20px; </span><br /><span class="fullpost" style="font-family: inherit;">background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnE8g7BrVSzDInPLEmE0UHtUxcBDgkg1FnNfRFc9JYndb8PtMI55PSpfa4mkTgAdEV2sewi3Y5wJEow_lI4EyUVyjbLdqNhmOlqoTZ8G7kKuMuQe098OMlUnL9bzHdcBxtCpURgDLAYc/s400/angular-right.gif) no-repeat bottom right; </span><br /><span class="fullpost" style="font-family: inherit;">font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif; </span><br /><span class="fullpost" style="font-family: inherit;">color : #000; </span><br /><span class="fullpost" style="font-family: inherit;">border: 1px solid #DDD; </span><br /><span class="fullpost" style="font-family: inherit;">} </span><br /><span class="fullpost" style="font-family: inherit;">.post blockquote p { </span><br /><span class="fullpost" style="font-family: inherit;">margin: 0; </span><br /><span class="fullpost" style="font-family: inherit;">padding-top:10px; </span><br /><span class="fullpost" style="font-family: inherit;">}</span><span class="fullpost" style="font-family: inherit;"><b> </b></span></blockquote>3. Copyrighted Coding Blue<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbaudEaP8aFgfbQa6oKmpa42H9AhNzYIlAqv2FaSAej2aIt698N688p00B5dX6BKEt0FeX4xvSLtU4TXmCQ70sJ3-WujdTSnhcSbG4aUdHEhnmRSTe0t7A48eqvyEej-b_OfPV_8jB-aJ/s1600/blue.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tuorial,tips,wammy,blogger,blockquote" border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbaudEaP8aFgfbQa6oKmpa42H9AhNzYIlAqv2FaSAej2aIt698N688p00B5dX6BKEt0FeX4xvSLtU4TXmCQ70sJ3-WujdTSnhcSbG4aUdHEhnmRSTe0t7A48eqvyEej-b_OfPV_8jB-aJ/s400/blue.JPG" title="Blockquote" width="400" /></a></div><br /><blockquote class="tr_bq"><span class="fullpost" style="font-family: inherit;">.post blockquote { </span><br /><span class="fullpost" style="font-family: inherit;">margin : 0 20px; </span><br /><span class="fullpost" style="font-family: inherit;">padding: 10px 20px 25px 20px; </span><br /><span class="fullpost" style="font-family: inherit;">background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkB8FEKnLrS6bGaVeuIaKMvmIQTUwd9aeVYwy1Ee58GMfZ0cflG1IYXvjJDx68MdVO8s-wWapo0M-0StYEtyEbkz0fzYhCmDWzQ9E9bGjdQ5uCL70gmQPzCFOxQjWvptFO29oo73gc5Rs/s400/block22.gif) no-repeat right bottom; </span><br /><span class="fullpost" style="font-family: inherit;">font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; </span><br /><span class="fullpost" style="font-family: inherit;">color : #484848; </span><br /><span class="fullpost" style="font-family: inherit;">border: 5px dashed #fff; </span><br /><span class="fullpost" style="font-family: inherit;">} </span><br /><span class="fullpost" style="font-family: inherit;">.post blockquote p { </span><br /><span class="fullpost" style="font-family: inherit;">margin: 0; </span><br /><span class="fullpost" style="font-family: inherit;">padding-top:10px; </span><br /><span class="fullpost" style="font-family: inherit;">}</span></blockquote>4. Copyrighted Coding Red<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwtYe-A7pyMytgjfNVMe_noesVt4U-WM118Buq3ljnnR2eeH159N2HmI7TJgtYtts8pCRUW_xArYZWqx8S06EQi95RfWNEQ7HVwr_YYpuHEYtZC4JlenzAHmOhqHMXlM37ujx9hWsYD1P/s1600/red2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tuorial,tips,wammy,blogger,blockquote" border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwtYe-A7pyMytgjfNVMe_noesVt4U-WM118Buq3ljnnR2eeH159N2HmI7TJgtYtts8pCRUW_xArYZWqx8S06EQi95RfWNEQ7HVwr_YYpuHEYtZC4JlenzAHmOhqHMXlM37ujx9hWsYD1P/s400/red2.JPG" title="Blockquote" width="400" /></a></div><br /><blockquote class="tr_bq"><span class="fullpost" style="font-family: inherit;">.post blockquote { <br />margin : 0 20px; <br />padding: 70px 20px 20px 20px; <br />background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywh15U3ZVbDOA9EFroixBMErU3tyooxbJThWj4KFjys8w6V-c27gAVeoolj7FtncWV-7D_L4s-dSXO052mrBGY0RULhsawG58YZOIsooaoSDvbS5X5XeozwCfvt-6K6vdhaW1DLK5UVs/s1600/block333.gif) no-repeat top; <br />font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; <br />color : #000000; <br />border-bottom : 7px solid #FF0000; <br />} <br />.post blockquote p { <br />margin: 0; <br />padding-top:10px; <br />}</span></blockquote>5. Copyrighted Coding Start <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjg_XWzQPUwVnGEo3CZLpDDWqvbHCdcPNoqR4daT2TpaFHwdrpdQTMjVYKulc7toJyK4zgNPjUh8MHTMR3_6U75hZQlORSTosUS41G-G7jMEGos0WO9GROs1gaTDhMIlW6yepGKGJVgRZ/s1600/start.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tuorial,tips,wammy,blogger,blockquote" border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjg_XWzQPUwVnGEo3CZLpDDWqvbHCdcPNoqR4daT2TpaFHwdrpdQTMjVYKulc7toJyK4zgNPjUh8MHTMR3_6U75hZQlORSTosUS41G-G7jMEGos0WO9GROs1gaTDhMIlW6yepGKGJVgRZ/s400/start.JPG" title="Blockquote" width="400" /></a></div><br /><blockquote class="tr_bq"><span class="fullpost" style="font-family: inherit;">.post blockquote{ <br />margin : 0 20px; <br />padding: 50px 30px 50px 30px; <br />background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhXgTt9-fFCFdTm08GnU6shjcP1GgznDF4py4gqG6eyt9V98e8f7jJe4URvBVVHHTQodZi9egCdNl0tb6UfXeA2fgs9AjgYjNao5wrpy9LdtsYZsLAeVbqclf0aX-nUlnCV8CMdIOvck/s1600/BLOCK1-TOP.gif) no-repeat top; <br />font: bold italic 1em Helvetica, verdana; <br />color : #000; <br />} <br />.post blockquote div{ <br />background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMKYgTclO1eTeIdjPlVaTx1zPJT0ST1DvsCWqUgMNIHN5AvVcc5T8i8JV-x2EaJjkkO2t8iKSAsQUvuoEBlHcovu4tcYj6pYrRluJL27Yi-6852iahHimlRN6TTh9Nq1rNh3Clk1J8vo/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; <br />padding-bottom: 50px; <br />} <br />.post blockquote p { <br />margin: 0; <br />padding-top:10px; <br />}</span></blockquote>6. Copyrighted Coding Orange<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDoGVb-pWK3GYp-1JZJNEObxYn3N98EJvYZuDDFaoWps6uzNPqQ2qnQ686pxeDQ1dP6Ru5nyWwd3QorUgoi2J6LD3AWGxuTRXAZgFZJ_Lek4R1dnEstWgK1Ath2ZsTgwj-ZCpiqR5Lv0Em/s1600/orange.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tuorial,tips,wammy,blogger,blockquote" border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDoGVb-pWK3GYp-1JZJNEObxYn3N98EJvYZuDDFaoWps6uzNPqQ2qnQ686pxeDQ1dP6Ru5nyWwd3QorUgoi2J6LD3AWGxuTRXAZgFZJ_Lek4R1dnEstWgK1Ath2ZsTgwj-ZCpiqR5Lv0Em/s400/orange.JPG" title="Blockquote" width="400" /></a></div><br /><blockquote class="tr_bq"> <span class="fullpost" style="font-family: inherit;">.post blockquote { <br />margin : 0 20px; <br />padding: 70px 20px 30px 20px; <br />background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBSoSWcg-siBjZsrdRt9eLsUcZaF1lNjwmsO0erw8C4ymCYkM9CLv7lBMDAIhzZx_v9QxrnhGubrPVcSBIScWDZ2OOnn6xIC0MBanNZ3vXmd1QDqmSSQ6Yrv_V_umzGz8qjpTVI33AFQ/s400/block3331.gif) no-repeat top; <br />font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; <br />color : #343434; <br />border-left : 7px solid #FF7802; <br />border-right : 7px solid #FF7802; <br />border-bottom : 7px solid #FF7802; <br />} <br />.post blockquote p { <br />margin: 0; <br />padding-top:10px; <br />}</span></blockquote>Bisa dipilih mana yang akan anda pasang sebagai bingkai HTML. :D

Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger

Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger | Ada banyak cara untuk kita membuat Frame di blog yang di khususkan setiap menulis s...

Baca selengkapnya »

Membuat Kumpulan Space Iklan 125x125 Di Bawah Artikel

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkyQzpypKi_PG0IeDAil1u90oT3VnEjDAIfx_4d5AxacHHZGJ-N0jM2N_x4YuJyGVWsnIRMmIu8-cRJlmjM2MnMcHQLkx66jT1RTsJhCceC2P2h1-IhyphenhyphenX2ikGzDCgmn8KbeMiZN0sqj1h/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tips,tutorial,wammy,blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkyQzpypKi_PG0IeDAil1u90oT3VnEjDAIfx_4d5AxacHHZGJ-N0jM2N_x4YuJyGVWsnIRMmIu8-cRJlmjM2MnMcHQLkx66jT1RTsJhCceC2P2h1-IhyphenhyphenX2ikGzDCgmn8KbeMiZN0sqj1h/s320/1.JPG" title="Space Iklan 125x125" width="250" /></a></div><br /><span style="color: blue;">Membuat Kumpulan Space Iklan 125x125 Di Bawah Artikel</span> |Kita kembali ke masalah blog, setelah kemarin saya share tentang, <a href="http://www.bocahit.com/2013/01/download-lagu-someone-like-you-versi.html" target="_blank">Someone like you versi Ariel</a> dan <a href="http://www.bocahit.com/2013/01/download-lagu-someone-like-you-versi_14.html" target="_blank">Versi Regina Indonesian Idol</a>, kemudian di susul <a href="http://www.bocahit.com/2013/01/yu-seung-ho-di-film-4th-period-murder.html" target="_blank">Yu Seung-Ho Di Film 4th Period Murder Mystery</a>. Memasang iklan di sidebar itu hal lumrah dan biasanya berukuran 300 x 250. Ketika kita akan memasang iklan sebaiknya juga di tempat yang strategis, yang banyak dilihat pengunjung sewaktu membaca artikel kita. Misal ada di atas atau di bawah artikel...cara ini sering dilakukan untuk menarik pengunjung agar membaca artikel kemudian bisa terklik.<br /><br />Cari kode <b><data:post.body/> </b>di edit<b> </b>template<b>. </b>Biasanya ada 4 atau 5 tergantung template anda, <b>cari saja yang ke 3</b>.<br />Letakkan kode dibawah ini, <b>dibawah kode </b><b><data:post.body/>.</b><br /><br /><pre class="brush:js;"> <div style='float:left;'><br /><br /><table bgcolor='#ffffff' border='0' cellpadding='2' cellspacing='6' width='265'><br />    <tbody><tr><br /><br />    <td><center><a href='URL ADS' rel='nofollow'><img alt='Pasang Iklan Disini' border='0' height='125' src='URL GAMBAR' width='125'/></a></center></td><br /><br />    <td><center><a href='URL ADS' rel='nofollow'><img alt='Pasang Iklan Disini' border='0' height='125' src='URL GAMBAR' width='125'/></a></center></td><br />    </tr><br />    <tr><br /><br />    <td><center><a href='URL ADS' rel='nofollow'><img alt='Pasang Iklan Disini' border='0' height='125' src='URL GAMBAR' width='125'/></a></center></td><br /><br />    <td><center><a href='URL ADS' rel='nofollow'><img alt='Pasang Iklan Disini' border='0' height='125' src='URL GAMBAR' width='125'/></a></center></td><br />    </tr><br /><br />    </tbody></table><br /><br />    </div><br /></pre>Nanti akan seperti di samping. <div style='float:<span style="color: red;">left</span>;'> ganti left menjadi <span style="color: red;">right</span> jika ingin iklan ada di samping kanan.<br /><div style="float: right;"><table bgcolor="#ffffff" border="0" cellpadding="2" cellspacing="6" style="width: 265px;"> <tbody><tr> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7ykqxWs5_XfLdJAw3WB5RPS8VrtCh0h0fZcq61q2LO56QGAb9h8ic_o39noW84-ZpT2sSmSw3X7TWGBmeiqxzXzB2UdMDuT2luZa3qZx8eWfGe7lmgXg7RZ7KVlfCmVuypTgPQUUZR8/s320/Advertise+Here+0.jpg" width="125" /></a></center></td> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7ykqxWs5_XfLdJAw3WB5RPS8VrtCh0h0fZcq61q2LO56QGAb9h8ic_o39noW84-ZpT2sSmSw3X7TWGBmeiqxzXzB2UdMDuT2luZa3qZx8eWfGe7lmgXg7RZ7KVlfCmVuypTgPQUUZR8/s320/Advertise+Here+0.jpg" width="125" /></a></center></td> </tr><tr> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7ykqxWs5_XfLdJAw3WB5RPS8VrtCh0h0fZcq61q2LO56QGAb9h8ic_o39noW84-ZpT2sSmSw3X7TWGBmeiqxzXzB2UdMDuT2luZa3qZx8eWfGe7lmgXg7RZ7KVlfCmVuypTgPQUUZR8/s320/Advertise+Here+0.jpg" width="125" /></a></center></td> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7ykqxWs5_XfLdJAw3WB5RPS8VrtCh0h0fZcq61q2LO56QGAb9h8ic_o39noW84-ZpT2sSmSw3X7TWGBmeiqxzXzB2UdMDuT2luZa3qZx8eWfGe7lmgXg7RZ7KVlfCmVuypTgPQUUZR8/s320/Advertise+Here+0.jpg" width="125" /></a></center></td> </tr></tbody></table></div><div style="float: left;"><table bgcolor="#ffffff" border="0" cellpadding="2" cellspacing="6" style="width: 265px;"> <tbody><tr> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="http://www.gardenersbox.co.uk/images/125x125.gif" width="125" /></a></center></td> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="http://www.gardenersbox.co.uk/images/125x125.gif" width="125" /></a></center></td> </tr><tr> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="http://www.gardenersbox.co.uk/images/125x125.gif" width="125" /></a></center></td> <td><center><a href="http://www.blogger.com/URL%20ADS" rel="nofollow"><img alt="Pasang Iklan Disini" border="0" height="125" src="http://www.gardenersbox.co.uk/images/125x125.gif" width="125" /></a></center></td> </tr></tbody></table></div>

Membuat Kumpulan Space Iklan 125x125 Di Bawah Artikel

Membuat Kumpulan Space Iklan 125x125 Di Bawah Artikel |Kita kembali ke masalah blog, setelah kemarin saya share tentang, Someone like you v...

Baca selengkapnya »

Cara Membuat Pemberitahuan Tiap Komentar Facebook Di Blog

<span style="color: blue;">Cara Membuat Pemberitahuan Tiap Komentar Facebook Di Blog |</span> Dari judulnya aja, udah muter - muter. Kalau kemarin aku berbagi tentang <a href="http://www.bocahit.com/2013/01/memasang-komentar-keren-facebook.html" target="_blank">menambah komentar plaform Twitter dan Facebook</a> , nah sekarang bagaimana agar kita bisa tahu jika ada komentar facebook di blog atau kita akan mendapatkan pemberitahuan jika ada komentar dari platform facebook.<br /><br />1. Langsung ketikan ini di address browser anda<br />http://developers.facebook.com/tools/comments?id=<span style="color: blue;"><b>APP_ID</b></span><br />Ganti dengan <b>APP_ID </b>anda<b></b><br /><b><br /></b>2.<b> </b>Klik setting/ pengaturan<br /><br />3. Di bagian moderator, masukkan nama akun facebook anda/ yang akan menjadi moderator, Save<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhWP2BNfoNnA4zM4AQykvitzxp4N8WdiYgHMMRSqcMH-NuEZ1xNnEXL0wx1N7_goyuyNzsvCDgpi4fDUgzdmpPstt2fc40QnADL2f1YLV6ZOGQo78ebejdN4AE2VKDvOXG6ZJSQHTxK7m/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tips,tutorial,wammy,blogger" border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhWP2BNfoNnA4zM4AQykvitzxp4N8WdiYgHMMRSqcMH-NuEZ1xNnEXL0wx1N7_goyuyNzsvCDgpi4fDUgzdmpPstt2fc40QnADL2f1YLV6ZOGQo78ebejdN4AE2VKDvOXG6ZJSQHTxK7m/s320/1.JPG" title="Moderator Komentar Facebook" width="320" /></a></div><br />4. Jika ada komentar baru maka akan muncul di bagian ini. Untuk anda yang menggunakan Laptop atau komputer rumah, bisa langsung di Bookmark.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyzgX9HrA_vDZwX3j-ZB4ULDgI135OMaFCTRSx6JVkWR33i6ZeCM6P-AUXdl9kJVsldcqyNZbDFDVzQQUHGVwMBMWLIC9zz3dXJdZx8EEoSlC7MkmgoPt8H9yXcQOxfuGhKxZ3GPZf_88/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tips,blogger,wammy,tutorial" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyzgX9HrA_vDZwX3j-ZB4ULDgI135OMaFCTRSx6JVkWR33i6ZeCM6P-AUXdl9kJVsldcqyNZbDFDVzQQUHGVwMBMWLIC9zz3dXJdZx8EEoSlC7MkmgoPt8H9yXcQOxfuGhKxZ3GPZf_88/s320/1.JPG" title="Pemberitahuan Komentar Facebook Di Blog" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1EOtSZMolItKlfWZ8ttPxkLVR4dOIWUvQJCEuHkoHGhyfTp2M_mRH0Yk0WeZVZuCE3kcdA9lqFkO7sp0Add-onHgnO0zDgYWGYzHXayxI6v9XtyXfHULokCDNniMJdH3fovzdyNwRhd8/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFokUc03fND6wJUBWYRwF6kD_Cw972zJoNxyiN5mMuHrmek7eDLjrHFpAUhvqlWvqjNiZ4pgb5HwnYYiGEBMOefXgydWaQTOQNbhtBOIuvvard3iFSf0SzWtzPO9t_VXpupNIKACScPrOm/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tips,blogger,wammy,tutorial" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFokUc03fND6wJUBWYRwF6kD_Cw972zJoNxyiN5mMuHrmek7eDLjrHFpAUhvqlWvqjNiZ4pgb5HwnYYiGEBMOefXgydWaQTOQNbhtBOIuvvard3iFSf0SzWtzPO9t_VXpupNIKACScPrOm/s320/2.JPG" title="Medorasi komentar fb" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1EOtSZMolItKlfWZ8ttPxkLVR4dOIWUvQJCEuHkoHGhyfTp2M_mRH0Yk0WeZVZuCE3kcdA9lqFkO7sp0Add-onHgnO0zDgYWGYzHXayxI6v9XtyXfHULokCDNniMJdH3fovzdyNwRhd8/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div><br />Gampang banget kan, kalau udah punya APP_ID semua jadi gampang. Oiya kalau twitter udah langsung masuk di <i>Tweet </i>asal anda benar masukan consumer key semua pasti beres.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjk9f9nUgGBDbaTPSLDlKXlEPkNWic2WmmEoQfE0r8kcTqa26Nwkb8xjAvhFJdq49KgABRZ1WBxVAcEH7BmmsLBGvcRv-cL39ILxmT1xVoiUbv0I37sr11W_haJXcruTK8oBYsov2BNMTj/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tips,tutorial,wammy,blogger" border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjk9f9nUgGBDbaTPSLDlKXlEPkNWic2WmmEoQfE0r8kcTqa26Nwkb8xjAvhFJdq49KgABRZ1WBxVAcEH7BmmsLBGvcRv-cL39ILxmT1xVoiUbv0I37sr11W_haJXcruTK8oBYsov2BNMTj/s320/3.JPG" title="Pemberitahuan Komentar Twitter" width="320" /></a></div><br />

Cara Membuat Pemberitahuan Tiap Komentar Facebook Di Blog

Cara Membuat Pemberitahuan Tiap Komentar Facebook Di Blog | Dari judulnya aja, udah muter - muter. Kalau kemarin aku berbagi tentang menamb...

Baca selengkapnya »

Memasang Kotak Komentar Facebook Dan Twitter Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFH-1Rp-EYJPiGGlXTs7F2qeAPVi27pempdyfJBzioXultWgu5QVOq1LWlSYWHimFEc9oPirAug51LwBe0uRHDdSNoOJLz0sp7VQYeqrsNK994zGn56-EhqSZoP18ZV2y2PwxIAuuBGNR/s1600/page.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFH-1Rp-EYJPiGGlXTs7F2qeAPVi27pempdyfJBzioXultWgu5QVOq1LWlSYWHimFEc9oPirAug51LwBe0uRHDdSNoOJLz0sp7VQYeqrsNK994zGn56-EhqSZoP18ZV2y2PwxIAuuBGNR/s200/page.jpg" width="200" /></a></div><br /><span style="color: lime;">Memasang Kotak Komentar Facebook Dan Twitter Di Blog |</span> Kali ini, pengen banget berbagi seputar gaya komentar di blogger. Sekarang kan blogger sudah support dengan Threaded Comment, terus kita juga bisa memodifikasinya juga. <a href="http://www.bocahit.com/2012/09/membuat-threaded-comment-sederhana.html" target="_blank">Klik disini</a> jika anda belum memasangnya. Ingin pasang Emoticon juga? <a href="http://www.bocahit.com/2012/08/memasang-yahoo-emoticons-di-komentar.html" target="_blank">klik disini</a> untuk pasang emoticon. Karena <a href="http://www.bocahit.com/2012/11/pentingnya-threaded-comment-pada.html" target="_blank">pentingnya Threaded Comment pada blog</a>, banyak blogger yang berlomba menghias tampilan komentarnya. <br /><br />Kenapa saya menambah komentar facebook dan twitter ? kalau komentar dari blogger, kita sudah pernah lihat, Gmail,OpenID,Wordpress,Anonymous,URL dll kalau orang awam masalah blog, pasti bingung mau komentar gimana caranya...Tapi beda kalau visitor yang kebetulan online Twitter dan Facebook, bisa komentar juga malah mungkin akan sering berkunjung. Berarti saya pasang ini untuk memudahkan pengujung yang akan berkomentar. Walau resikonya cukup buat berat blog bertambah, tapi bisa di antisipasi dengan membuang widget atau script yang tak bermanfaat.<br /><br />Kenapa komentar harus hide/hiden? sebelumnya komentarku cuma longsor langsung ke bawah, jadi harus butuh <a href="http://www.bocahit.com/2012/08/membuat-fungsi-scroll-pada-kotak.html" target="_blank">scroll</a>, capet juga tanganku muter - muter <a href="http://www.bocahit.com/2012/08/memberi-fungsi-scroll-pada-arsip-blog.html" target="_blank">scroll</a> naik turun. Kalau yang sekarang kan kelihatan lebih simple dari pada yang sebelumnya.<br /><br />1. Seperti biasa Backup Template<br />2. Edit HTML - Lanjutkan<br />3 Expand Template Widget<br />4.Cari kode <b><span style="font-family: inherit;"><i><head></i></span></b><br />5.Masukan kode dibawah <b><head></b><br /><blockquote class="tr_bq"><span style="font-family: inherit;"><meta content='<b><span style="color: blue;">Profile_ID</span></b>' property='fb:admins'/><br /><meta content='<span style="color: blue;"><b>APP_ID</b></span>' property='fb:app_id'/><br /><script src='http://code.jquery.com/jquery-latest.pack.js'/><br /><script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/><br /><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/><br /><script src='http://platform.twitter.com/anywhere.js?id=<span style="color: blue;"><b>API_KEY</b></span>&amp;v=1'/></span></blockquote><i>Keterangan :</i><br />Ganti <b>Profile_ID</b> dengan yang ada di akun facebook anda contoh<br />http://www.facebook.com/<b><span style="color: blue;">herlambang.e.putra</span></b><br />Ganti <b>APP_ID </b>dengan kode unikyang di berikan facebook sewaktu anda buat aplikasi<br />Ganti <b>API_KEY</b> dengan kode unik yang anda dapatkan sewaktu buat aplikasi di Twitter<br /><br />Jika sobat belum punya APP_ID <a href="https://developers.facebook.com/apps" target="_blank">klik disini</a> untuk membuatnya <br />Jika sobat belum punya API_KEY <a href="https://dev.twitter.com/apps" target="_blank">klik disini</a> untuk membuatnya<br /><br /><i>Khusus Twitter :</i><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSi2KB-9h5jhxdOrlDCGlu71DpqKaqmXJ9iNXFQ3Fovgxc7YWIoHrVVhl7Ni3EH3uwbWNVrHGxSU0RX972QQXrzhYoe0TpSiVksBDGpByXPjVtAjd_ZXK13wvPVNJ0ZiYM2WPwTOIAQOC/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara,blog,tips,tutorial,blog,wammy" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSi2KB-9h5jhxdOrlDCGlu71DpqKaqmXJ9iNXFQ3Fovgxc7YWIoHrVVhl7Ni3EH3uwbWNVrHGxSU0RX972QQXrzhYoe0TpSiVksBDGpByXPjVtAjd_ZXK13wvPVNJ0ZiYM2WPwTOIAQOC/s320/2.JPG" title="Formulir Pendaftaran APP Twitter" width="320" /></a></div><br />Isikan alamat diatas dengan URL anda<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeB2jtAaqQ0KIczzdz6eTCYYC-ro7vuj0LYoRJjERbgIU83ZudZGUtV_5CLPTvnKoKirtLsLCpmPMsnNH4p_rc2MCykhcaAK-GvtnNqRa2iTrrk6lPwBGpVFlyOuLqGgVO1dpzpPAskEv/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara,blog,tips,tutorial,blog,wammy" border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeB2jtAaqQ0KIczzdz6eTCYYC-ro7vuj0LYoRJjERbgIU83ZudZGUtV_5CLPTvnKoKirtLsLCpmPMsnNH4p_rc2MCykhcaAK-GvtnNqRa2iTrrk6lPwBGpVFlyOuLqGgVO1dpzpPAskEv/s320/1.JPG" title="API_KEY Twitter" width="320" /></a></div><br />Yang anda masukan di <b>API_KEY</b> adalah yang dilingkari<br /><br />6.  Kemudian cari script <b><div class='comments' id='comments'> </b>biasanya ada 2, pilih yang pertama :<br />kurang lebih bentuknya seperti ini :<br /><blockquote class="tr_bq"><b:includable id='threaded_comments' var='post'><br />  <div class='comments' id='comments'> <span style="color: red;"><b><br /></b></span><span style="color: red;"><b>Letakkan scriptnya disini</b></span> <br /><a name='comments'/></blockquote> 7. Masukan kode ini di langkah nomer 6<br /><blockquote class="tr_bq"><!--BEGIN FB,TWITTER,Blogger www.bocahit.com --> <br /><div class='comments-tab' id='blogger-comments' title='<span style="color: yellow;">Comments from Blogger</span>'><br /><data:post.numComments/> <span style="color: orange;">Comments</span><br /></div><br /><div class='comments-tab' id='twitter-comments' title='<span style="color: yellow;">Comments with Twitter</span>'><br /><span class='js-page-tweet-count' expr:href='data:post.url'/> <span style="color: orange;">Tweets</span><br /></div><br /><div class='js-default-tab comments-tab' id='fb-comments' title='<span style="color: yellow;">Comments made on Facebook</span>'><br /><fb:comments-count expr:href='data:post.url'/> <span style="color: orange;">Comments</span><br /></div><br /><div class='clear'/><br /></div><br /><div class='comments-page' id='twitter-comments-page'><br /><div id='js-tweet-box'/><br /></div><br /><div class='comments-page' id='fb-comments-page'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><fb:comments expr:href='data:post.url' num_posts='<span style="color: red;">10</span>' width='<span style="color: red;">580</span>'/><br /></b:if><br /></div><br /><div class='comments comments-page' id='blogger-comments-page'><br /><!-- END FB,TWITTER,Blogger www.bocahit.com --> </blockquote>Keterangan :<br /><br />ganti num_post='<span style="color: red;">10</span>' dengan jumlah komentar facebook akan anda tampilkan<br />ganti width='<span style="color: red;">580</span>' ukuran lebar form facebook pada template anda<br />ganti yang berwarna <span style="color: orange;">orange</span> dengan kata anda sendiri<br />8. SimpanTemplate.<br /><br />Nah itu tadi <a href="http://www.bocahit.com/2013/01/memasang-komentar-keren-facebook.html" target="_blank">Memasang Kotak Komentar Facebook Dan Twitter Di Blog</a> selamat mencoba.<br /><br />Update:<br /><br /><a href="http://www.bocahit.com/2013/01/cara-membuat-pemberitahuan-tiap.html" target="_blank">Klik Disini </a><span style="color: orange;">Untuk Cara Memberitahu Jika Ada Komentar <span style="color: blue;">Facebook</span> Di Blog.</span><br /><br /><span style="color: red;">Jika berhasil, kemudian tidak muncul, itu pasti karna artikel anda belum ada komentar. Saya sudah coba dan ternyata ini akan muncul kalau sudah ada komentar.</span>

Memasang Kotak Komentar Facebook Dan Twitter Di Blog

Memasang Kotak Komentar Facebook Dan Twitter Di Blog | Kali ini, pengen banget berbagi seputar gaya komentar di blogger. Sekarang kan blogg...

Baca selengkapnya »

Cara Membuat Tombol Like & Follow Di Artikel Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNZ8mUtaZopgDOo4AZEK9LjqKU0lSF5K_J5Gr4ZeOpU3NUBk9d8327fF79ooEuZstuMgBsfF93zoKLedmcLiZYQ7IMsw_Ga3c4SNh5KXNH_qE_M18Ew0gaPjB6UJwzfr2DP_KN5zlCAYN/s1600/fbt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Follow Twitter, Like Facebook" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNZ8mUtaZopgDOo4AZEK9LjqKU0lSF5K_J5Gr4ZeOpU3NUBk9d8327fF79ooEuZstuMgBsfF93zoKLedmcLiZYQ7IMsw_Ga3c4SNh5KXNH_qE_M18Ew0gaPjB6UJwzfr2DP_KN5zlCAYN/s200/fbt.jpg" title="Follow vs Like" width="200" /></a></div><br /><span style="color: lime;">Cara Membuat Tombol Like & Follow Di Artikel Blog |</span> Judulnya panjang banget. Lama ga nulis tentang tutorial. Baru saja aku buat akun twitter, jadi klik tombol follow di bawah yaa..Caranya gimana gan buat ngasih button like dan follow-nya? sebelum aku lanjutkan, klik follow dulu donk, biar nulisnya tambah semangat. kode ini cuma di taruh <i>di atas atau di bawah</i> kode tag <b><data:post.body/> yang ke 3 </b>tergantung sobat, ingin meletakan button ini dimana, jika sobat ingin ada <u>di atas</u> artikel, jadi pasang saja di atas <b><data:post.body/></b>, kalau mau <u>di bawah</u>, tinggal pasang di bawah <b><data:post.body/>. </b>Sekarang salin kode dibawah ini, letakkan di atas atau di bawah <b><data:post.body/> yang ke 3.</b><br /><br /><blockquote class="tr_bq"><span style="color: yellow;"><b><!-- Tombol Like Halaman Facebook  Twitter Follow--></b></span><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div style='margin:5px 0px 65px 0px; padding:10px; float:none; width:590px;'><br /> <div style='margin:0px 0px 0px 0px; padding:0px; float:left; width:265px; border-right:1px solid #ddd;'><b><!-- Facebook Like button start --></b><br /><span style="color: blue;"><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<b><span style="color: red;">bocahitcom</span></b>&amp;width=265&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false' style='border:none; overflow:hidden; width:265px; height:62px;'/></div></span><br /><div style='margin:10px 30px 0px 0px; padding:0px; float:right; width:250px;'><br /><b> <!-- Twitter follow button start --></b><span style="color: cyan;"><a class='twitter-follow-button' data-show-screen-name='false' href='<b><span style="color: red;">https://twitter.com/herlambang1412</span></b>'>Follow @<b><span style="color: red;">Adminwammy</span></b></a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><span style="color: black;"><b><!-- Twitter follow button end --></b></span></div></div></b:if></span> <b><span style="color: yellow;"><!-- Selesai Tombol Like Halaman Facebook  Twitter Follow--></span></b></blockquote><br /><br />1. Paragraf yang berwarna biru adalah script akun facebook anda, jadi ganti warna merah dengan url facebook anda misal : http://www.facebook.com/<span style="background-color: #6fa8dc;">herlambang.e.putra</span>.<br /><br />2. Kemudian yang berwana seperti biru itu (aku ga tau jenis warna apa itu)pokoknya sepeti warna telur bebek. Ganti warna merah dengan url twitter anda kemudian ganti <span style="color: purple;">Adminwammy</span> dengan nama blog anda.</div>

Cara Membuat Tombol Like & Follow Di Artikel Blog

Cara Membuat Tombol Like & Follow Di Artikel Blog | Judulnya panjang banget. Lama ga nulis tentang tutorial. Baru saja aku buat akun tw...

Baca selengkapnya »

Cara Mengoptimasi Tag Heading Blog

<div class="separator" style="clear: both; text-align: center;"><a href="http://chwilio.co.uk/wp-content/uploads/2012/06/h1-tags.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="heading,seo,cara,blog,tutorial" border="0" height="200" src="http://chwilio.co.uk/wp-content/uploads/2012/06/h1-tags.jpg" title="Heading" width="200" /></a></div><span style="color: blue;"> Cara Mengoptimasi Tag Heading Blog |</span> Anyoa<a href="http://www.bocahit.com/search/label/SEO" target="_blank">seo</a>, dari blog walking kesana kemari, bisa disimpulakan bahwa pentignya Tag Heading blog sebagai optimastor dalam <a href="http://www.bocahit.com/search/label/SEO" target="_blank">SEO</a>. Dia juga berperan sebagai penyumbang terbesar dalam Template yang <a href="http://www.bocahit.com/2012/10/cara-membuat-artikel-blog-seo-friendly.html" target="_blank">SEO Friendly</a>. Saya tidak tau kenapa Struktur dalam headingnya disebut sebagai Dynamic Tag Heading, dan juga memasang Dynamic Tag Heading adalah salah satu cara tehnik <a href="http://www.bocahit.com/search/label/SEO" target="_blank">SEO</a> On Page.<br /><br />Tag heading adalah attribut html yang berfungsi untuk menyusun level-level heading dan subheading pada website sehingga akan lebih terstruktur dengan baik.Ia berjumlah 6 yang berguna untuk memberikan judul (heading) pada dokumen HTML. Sebelumnya template ini tidak support dan bisa dikatan H1 is Very Bad kata <a href="http://chkme.com/">Chkme.com</a>, kemudian dari <a href="http://www.bocahit.com/2012/09/cara-mudah-mengetahui-infomasi-seo-blog.html" target="_blank">SEO Quake</a> pada <a href="http://www.bocahit.com/2012/09/cara-mudah-mengetahui-infomasi-seo-blog.html" target="_blank">SEO Diagnosis</a>, adalah seperti gambar dibawah ini :<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Tl3zD3l_3xfzsc7Rl2FWSCSg3LP52mOH6KmPnJQTU89bOI7HkdcxaS-m-zHyWhQQtgSfp5qi26mxX3Go6-GdX26mbZn76b062Ep6sB0_kp_alF1qH79TaK7TGeXpytm9QAYa1yxP5r27/s1600/Heading+Buruk.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,heading,buruk" border="0" height="37" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Tl3zD3l_3xfzsc7Rl2FWSCSg3LP52mOH6KmPnJQTU89bOI7HkdcxaS-m-zHyWhQQtgSfp5qi26mxX3Go6-GdX26mbZn76b062Ep6sB0_kp_alF1qH79TaK7TGeXpytm9QAYa1yxP5r27/s400/Heading+Buruk.JPG" title="Heading Ancur" width="400" /></a></div> Lihat? ada tanda X. Shock berat lihat kayak gini, apalagi aku cek di Chkme.com, hasilnya seperti ini :<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RUAcZelbSOOFHXZt4nfNriixkprVdW_li2bzvFnisGbKgjGjrvDFesPhehiw5AahoCbs0Aqkc2GcJdFblzlo_UZbNbvcHyfpXXkr0_8VExOvbbYXSuvQ16QP8hmBtR13Px7eFzH_SgQ7/s1600/Heading+Bad.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Chkme.com,heading,buruk" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RUAcZelbSOOFHXZt4nfNriixkprVdW_li2bzvFnisGbKgjGjrvDFesPhehiw5AahoCbs0Aqkc2GcJdFblzlo_UZbNbvcHyfpXXkr0_8VExOvbbYXSuvQ16QP8hmBtR13Px7eFzH_SgQ7/s320/Heading+Bad.JPG" title="Really Bad" width="320" /></a></div><br />Waktu itu <a href="http://www.bocahit.com/2012/10/cara-membuat-artikel-blog-seo-friendly.html" target="_blank">SEO Score</a>nya cuma 63%. Tambah shock lagi...<br />H1 judul tag (tag heading) adalah yang paling penting dari tag judul dan membantu mesin pencari memahami fokus utama halaman. Juga, teks dalam tag H1 biasanya lebih besar dari teks normal dan membantu pengguna dengan cepat mempelajari apa halaman blog. Nah, ini adalah cara pemasangannya :<br /><br />1. Sobat masuk dulu di Edit HTML, kemudian cari<br /><blockquote class="tr_bq"><!--No header image --><br /><div id='header-inner'><br /><div class='titlewrapper'><br /><h1 class='title'><br /><b:include name='title'/><br /></h1><br /></div><br /><b:include name='description'/><br /></div> </blockquote>2.  Hapus kode tesebut lalu ganti kode dibawah ini :<br /><blockquote class="tr_bq"><!--No header image --><br /><div id='header-inner'><br /><div class='titlewrapper'><br /><b:if cond='data:blog.pageType != "item"'><br /><H1 class='title'><br /><b:include name='title'/><br /></H1><br /><b:else/><br /><p class='title'><br /><b:include name='title'/><br /></p><br /></b:if><br /></div><br /><b:include name='description'/><br /></div></blockquote><br />3. Kemudian kita akan mengedit Tag head bagian Judul Post nya, cari kode seperti dibawah ini :<br /><blockquote class="tr_bq"> <b:if cond='data:post.title'><br /><h3 class='post-title entry-title'><br /> <b:if cond='data:post.link'><br /><a expr:href='data:post.link'><br /><data:post.title/></a><br /><b:else/><br /><b:if cond='data:post.url'><br /> <b:if cond='data:blog.url != data:post.url'><br /><a expr:href='data:post.url'><br /><data:post.title/></a><br /><b:else/><br /> <data:post.title/><br /></b:if><br /><b:else/><br /> <data:post.title/><br /></b:if><br /></b:if><br /></h3><br /></b:if> </blockquote> 4. Biasanya ada 2, ganti kode tersebut dengan kode dibawah ini :<br /><div style="height: 250px; overflow: auto; width: ancho;"><blockquote><b:if cond='data:blog.pageType != "item"'><br /><b:if cond='data:post.title'><br /><H3 class='post-title entry-title'><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link'><data:post.title/></a><br /><b:else/><br /><b:if cond='data:post.url'><br /><a expr:href='data:post.url'><data:post.title/></a><br /><b:else/><br /><data:post.title/><br /></b:if><br /></b:if><br /></H3><br /></b:if><br /><b:else/><br /><H1 class='post-title entry-title'><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a><br /><b:else/><br /><b:if cond='data:post.url'><br /><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a><br /><b:else/><br /><data:post.title/><br /></b:if><br /></b:if><br /></H1><br /></b:if> </blockquote><br /></div>5. Selanjutnya tinggal mengatur ukuran hurufnya dengan CSS di bawah ini : <br /><blockquote class="tr_bq">#header h1{<br />font-size: <b><span style="color: blue;">20px</span></b>;<br />color: #ffffff;<br />}<br />#header h1 a{<br />text-align:left<br />}<br />P.title {<br />font-size: <span style="color: blue;"><b>20px</b></span>;<br />color: #ffffff;<br />}<br />P.title a{<br />text-align:left<br />}</blockquote>6. Selesai.<br /><br /><span style="color: blue;"><b>Ganti Warna Biru</b></span> dengan ukuran huruf yang sesuai dengan blog sobat.  Setelah berhasil di pasang waktu saya cek di <a href="http://www.bocahit.com/2012/09/cara-mudah-mengetahui-infomasi-seo-blog.html" target="_blank">SEO Diagnosis</a>, hasilnya seperti ini :<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmCvqtnPA4-4R9D_Ru3B1QyrXANyOwcTu4jp804Rh2EdKoW-nMuzZO2zK2xv-jN13tFnSeixDE_ZS2QA6iGewUgSylrxU_HGO_jH0UhvBOYVDDilU8GUXxEPb5XQ-aBBAjI3gl9ja9Sgd/s1600/Heading+Mantap.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Heading,cara,blog,tutorial,SEO" border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmCvqtnPA4-4R9D_Ru3B1QyrXANyOwcTu4jp804Rh2EdKoW-nMuzZO2zK2xv-jN13tFnSeixDE_ZS2QA6iGewUgSylrxU_HGO_jH0UhvBOYVDDilU8GUXxEPb5XQ-aBBAjI3gl9ja9Sgd/s400/Heading+Mantap.JPG" title="Heading Mantap" width="400" /></a></div>Kemudian <a href="http://www.bocahit.com/search/label/SEO" target="_blank">SEO</a> score dari 63% langsung menuju ke <a href="http://chkme.com/seo-bocahit.com" title="SEO Reports for bocahit.com"><img alt="SEO Reports for bocahit.com" src="http://chkme.com/seo-bocahit.com.png" title="SEO Reports for bocahit.com" /></a> setelah ini, mengikuti <a href="http://www.bocahit.com/2012/09/manfaat-dan-kerugian-ikut-kontes-seo.html" target="_blank">SEO Kontes</a> jadi lebih Percaya Diri.<br /><br /><a href="http://super-bee.blogspot.com/2012/06/cara-membuat-dynamic-tag-heading.html" target="_blank">Referensi</a>

Cara Mengoptimasi Tag Heading Blog

 Cara Mengoptimasi Tag Heading Blog | Anyoa seo , dari blog walking kesana kemari, bisa disimpulakan bahwa pentignya Tag Heading blog sebag...

Baca selengkapnya »

Membuat Space Iklan Dengan Easy GIF Animator

<span style="color: lime;">Membuat Space Iklan Dengan Easy GIF Animator</span> | Kali ini wammy akan berbagi menganai malasah komerasil. Banyak blogger yang memakai iklan dari PPC yang sekarang sangat banyak di perbincangkan. Seperti saya, hanya menggunakan Bidvertiser dan SITTI. Tapi tidak ada salahnya jika kita menunggu advertiser. Dengan kata lain, kita akan melakukan transaksi secara langsung dengan pengiklan. Tentu itu pasti butuh yang namanya space iklan. Nah bagaimana cara membuatnya ? Itu yang akan saya bagi kan.<br /><br />1. Install Easy GIF Animator<br /><br />2. Jika anda belum punya,  <a href="http://adf.ly/EsXhF" target="_blank">download Easy GIF Animator Pro 5.20 + Crack</a>.<br /><br />3. Jalankan E.G.A<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9LMcVMLTqRGj-6nPTsVJ1ganNjPOSIwT_02EbkMvfcmrbMSv0sfM8cIbow9S9LSiOLm5yEiidtFWh4Idn91ABZ4enW-MqjPwQZgblVnSiBwvveuV1DMn71zTAsT_wvxsyeMKkP_Sit44/s1600/e1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,easy gif animator" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9LMcVMLTqRGj-6nPTsVJ1ganNjPOSIwT_02EbkMvfcmrbMSv0sfM8cIbow9S9LSiOLm5yEiidtFWh4Idn91ABZ4enW-MqjPwQZgblVnSiBwvveuV1DMn71zTAsT_wvxsyeMKkP_Sit44/s200/e1.JPG" title="EGA 5.20" width="200" /></a></div><br />4. Pilih New Animation Banner<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6eMUhAGh-FRL120OiqTcUnRrHLTOxKR0fywShIeEzHtEJ-PkJEWt7W7mSN9xZSklvXLyj8h-01BNeC_RZ1crFMwNZs2W2M8vjkRlkwbqAM4G5Xmtfd3KpofMHSeVHzH3YGf0xZDY-6ng/s1600/e2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,easy gif animator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6eMUhAGh-FRL120OiqTcUnRrHLTOxKR0fywShIeEzHtEJ-PkJEWt7W7mSN9xZSklvXLyj8h-01BNeC_RZ1crFMwNZs2W2M8vjkRlkwbqAM4G5Xmtfd3KpofMHSeVHzH3YGf0xZDY-6ng/s1600/e2.JPG" title="Banner Size" /></a></div><br />5. Pilih ukuran banner<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSizni3ZeaPx4USCIzSzbKa8_ydMshQMmGZDibUjaasmoylm0ja16mnXVG7RBFAtAmipILlHmcJ4vDCLELLiNJtk1-NOCxDkj15RSQvZeRlo6yCi6do2vdLFJMObzI8UNTLEB0cEUbkqy/s1600/e3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,easy gif animator" border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSizni3ZeaPx4USCIzSzbKa8_ydMshQMmGZDibUjaasmoylm0ja16mnXVG7RBFAtAmipILlHmcJ4vDCLELLiNJtk1-NOCxDkj15RSQvZeRlo6yCi6do2vdLFJMObzI8UNTLEB0cEUbkqy/s320/e3.JPG" title="Pilih Warna" width="320" /></a></div><br />6. Atur warna iklan anda<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS097r4EyTaYnbhSGiA39U7B76ZXPf4aOqUN6ZhdIesYQEt4HyQjc9bmYvRLS6UTtbc387tyDyInb2TwgXgUgJHDWaQJqmMghAcG33NAlxf7K0wZVrHjv9iOWmWQMCj6UxDpSgEaRTNTed/s1600/e4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,easy gif animator" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS097r4EyTaYnbhSGiA39U7B76ZXPf4aOqUN6ZhdIesYQEt4HyQjc9bmYvRLS6UTtbc387tyDyInb2TwgXgUgJHDWaQJqmMghAcG33NAlxf7K0wZVrHjv9iOWmWQMCj6UxDpSgEaRTNTed/s320/e4.JPG" title="Your Teks Here" width="320" /></a></div><br />7. Sekarang atur teks. Finish.<br /><div style="color: blue;"><br /></div><div style="color: blue;">Yang di kotak biru untuk anda mengatur bagaimana tampilan ketika teks muncul</div><span style="color: red;">Dan yang di warna merah untuk anda mengatur tampilan ketika teks keluar</span><br /><br /><br />Kira - kira seperti ini bentuknya :<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZMrDaffd7x7o3p6tZV2-7gblhsSKYAeiNUX6xkmGAYwQCccjmBw3jvsOR8LzOv7OLMkLxZbBUW5dkAj2MvuMNaEE8OjDIHcpkJ9jd7nAnzkSNmphOnEB-fThxjfFQNK9ni_vdsQTCVHi/s300/Iklan%2520300x250.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZMrDaffd7x7o3p6tZV2-7gblhsSKYAeiNUX6xkmGAYwQCccjmBw3jvsOR8LzOv7OLMkLxZbBUW5dkAj2MvuMNaEE8OjDIHcpkJ9jd7nAnzkSNmphOnEB-fThxjfFQNK9ni_vdsQTCVHi/s300/Iklan%2520300x250.gif" title="Pasang Iklan" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaP3CvJpC6yzLPm1UCBip_U8PwzAvs_cTMvQqftd-d_TBft_zXjrCKRYPoENpYKhmZjL8GN4v-M1kgeUaFrMF7YSW9p0oOG5k5Wbkw5Wa7HEBvKvfOTT0VLQXNQHFNEqj8n96mO5xLtvz/s128/Iklan%20150x150.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div><br />PASSWORD : wammy

Membuat Space Iklan Dengan Easy GIF Animator

Membuat Space Iklan Dengan Easy GIF Animator | Kali ini wammy akan berbagi menganai malasah komerasil. Banyak blogger yang memakai iklan da...

Baca selengkapnya »

Membuat Table Menggunakan CSS

<div style="color: orange;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh96PiJvE9iLU6ZTkkdizj5Sg062jQ0bTnvTqbvUGngEu_pmqjtml3GzNoggt4nhQpEG8VNLAjzGOiUv7Ol8Kg2PczVEI-ZbPMyitcXrh16Ukj6UGAr1kPDi2QWNnsbp-CpF4vM-LOpUmc/s320/table.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh96PiJvE9iLU6ZTkkdizj5Sg062jQ0bTnvTqbvUGngEu_pmqjtml3GzNoggt4nhQpEG8VNLAjzGOiUv7Ol8Kg2PczVEI-ZbPMyitcXrh16Ukj6UGAr1kPDi2QWNnsbp-CpF4vM-LOpUmc/s320/table.png" /></a></div><br />Membuat Table Mengunakan CSS | <span style="color: black;">Kali ini Wammy, akan berbagi tentang tabel dan masih seputar</span> CSS. <span style="color: black;">Sebelumnya aku juga telah berbagi mengenai membuat <a href="http://www.bocahit.com/2012/11/membuat-link-list-super-keren.html" target="_blank">Link List Super Keren</a>.</span></div><div style="color: orange;"><br /></div><div style="color: orange;"><span style="color: black;">Tabel ini tidak asing dengan MS Excel. Contoh penggunaan tabel ini bisa <a href="http://www.bocahit.com/2012/01/ketentuan-syarat-pasang-iklan.html" target="_blank">klik disini</a>. Dan lihat didalam artikelnya. Jika blog sobat berisi banyak artikel yang mencankup IPA, cara ini bisa digunakan untuk mempermudah pembaca.</span></div><div style="color: orange;"><br /><span style="color: black;">1. Langsung aja masuk di Template, kemudian centang Expand Template Widget</span><br /><br /><span style="color: black;">2. Cari kode </span><b style="color: black;"><code>]]></b:skin> letakkan diatasnya..</code></b><span style="color: black;"> </span></div><div style="color: orange;"></div><div style="background-color: #00ccff; border: 1px dotted #000000; padding: 5px; width: 400px;"><span style="color: black; font-family: monospace;">/* Table</span><br /><span style="color: black; font-family: monospace;">----------------------------------------------- */</span><br /><span style="color: black; font-family: monospace;">table[border="1"]{</span><br /><span style="color: black; font-family: monospace;">border-collapse:collapse;margin:0px</span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">table[border="1"],table[border="1"] th,table[border="1"] td{</span><br /><span style="color: black; font-family: monospace;">border:1px solid <span style="color: red;">#bbb</span>;padding:2px 7px</span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">td{</span><br /><span style="color: black; font-family: monospace;">vertical-align:top</span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">table[border="1"] th{</span><br /><span style="color: black; font-family: monospace;">background-color:<span style="color: red;">#fafafa</span>;font-weight:700;text-align:left</span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">.full,table.full{</span><br /><span style="color: black; font-family: monospace;">width:98.8%</span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">table.config{</span><br /><span style="color: black; font-family: monospace;">background-color:<span style="color: red;">#FFF</span></span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">table.config td,table.config th{</span><br /><span style="color: black; font-family: monospace;">border-color:<span style="color: red;">#E4E4E4</span></span><br /><span style="color: black; font-family: monospace;">}</span><br /><span style="color: black; font-family: monospace;">table.config th{</span><br /><span style="color: black; font-family: monospace;">background-color<span style="color: red;">:#333</span>;color:white</span><br /><span style="color: #eeeeee; font-family: monospace;"><span style="color: black;">}</span><br style="color: black;" /><br /></span></div><br />3. Setelah memasukan kode CSS, kemudian masukan kode dibawah ini di dalam posting anda, tepatnya di HTML.<br /><br /><div style="background-color: #00ccff; border: 4px ridge #000000; padding: 5px; width: 400px;"><table border="1" class="full config"><tbody><br /><tr><th><span style="color: red;">Header Table</span></th><th><span style="color: red;">Header Table</span></th></tr><br /><br /><tr><td>kiri 1</td><td>kanan 1</td></tr><br /><tr><td>kiri 2</td><td>kanan 2</td></tr><br /><tr><td>kiri 3</td><td>kanan 3</td></tr><br /><tr><td>kiri 4</td><td>kanan 4</td></tr><br /><tr><td>kiri 5</td><td>kanan 5</td></tr><br /></tbody></table> </div><br />4. Simpan.

Membuat Table Menggunakan CSS

Membuat Table Mengunakan CSS | Kali ini Wammy, akan berbagi tentang tabel dan masih seputar CSS. Sebelumnya aku juga telah berbagi mengenai...

Baca selengkapnya »

Membuat Link List Super Keren

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qxlmJBY1huyIKbiXA0XCEDII966V1-oAwQShxzXxm8BdLkv83XZk1EHsnMcFFPXF_I8GTHOCgb5cO1YOdkkTs1_piTsYI4hz_C4k6JiSkGW29JM-MfvlVEUhrJIXNbWdowney7Pjxd1c/s1600/Link.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara,blog,tutorial,blogger" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qxlmJBY1huyIKbiXA0XCEDII966V1-oAwQShxzXxm8BdLkv83XZk1EHsnMcFFPXF_I8GTHOCgb5cO1YOdkkTs1_piTsYI4hz_C4k6JiSkGW29JM-MfvlVEUhrJIXNbWdowney7Pjxd1c/s320/Link.JPG" title="Link List Keren" width="320" /></a></div><br /><span style="color: yellow;">Membuat Link List Super Keren |</span> Bingung tengah malam tidak bisa tidur, akhirnya hanya membuat artikel. Kali ini Wammy akan berbagi mengenai <u>Membuat Link List Super Keren</u>. Apa itu <b>Link List</b>? <i>Link List</i> adalah Daktar Link. hahaha Pokoknya sekumpulan link atau target yang tersusun secara sistematis dengan tujuan tertentu. Kalau ga paham..ga usah dipikirin, ga penting.<br /><br />Nah, lihat sidebar ku ada link teman...yang cuma monoton masukin linknya trs kasih scroll, emang kebanyakan kayak gitu kan. Sekarang coba lihat yang ini :<br /><br /><div class="widgetSystem"><div class="nama">Link List</div><div class="kulit"><br /><br /><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li><li><a href="http://www.bocahit.com/">Wammy's Blog</a></li></div></div><style type="text/css">.widgetSystem { width: 96%; padding: 5px; background: #DDD url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-prn1/36301_329454510485991_208496541_n.jpg) no-repeat; margin: 5px auto; border: 1px solid #00f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 1px 1px #00f; -moz-box-shadow: 0 0 1px 1px #00f; box-shadow: 0 0 1px 1px #00f } .widgetSystem .nama { text-align: center; font-size: 1.5em; background: #fd64b1; background: rgba(255, 0, 128, 0.6); padding:5px; color: #FFF; font-family: "Times new roman", Arial, sans serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .widgetSystem .kulit { background: #f379b2; background: rgba(255, 0, 128, 0.5); height: 250px; overflow: auto; margin-top: 5px; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .widgetSystem a { text-decoration: none; margin: 5px; background: #C71585; background: rgba(199, 21, 133, 0.7); padding: 5px; display: block; color: #BBB; text-transform: uppercase; font-size: 12px; font-weight: bold; font-family: "Arial", Arial, sans serif; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s } .widgetSystem a:hover { background: #1E90FF; color: #0000CD } .widgetSystem li { list-style: none; color: #CCC; margin: 5px } </style> Mau yang kayak gini?? sobat bisa dapatkan cara cukup mudah,,copas script dibawah ini di dalam gadget anda atau di dalam posting letaknya di HTML bukan Compose. Okey...monggo di sate (salin tempel). <br /><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select ALL" /> </div><div align="center"></div><div align="center"><textarea cols="10" name="txt" rows="100" style="height: 238px; width: 372px;" wrap="VIRTUAL"><div class='widgetSystem'><div class='nama'>Link List</div><div class='kulit'><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li><li><a href='URL anda'>Nama Blog</a></li></div></div><style type='text/css'>.widgetSystem { width: 96%; padding: 5px; background: #DDD url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-prn1/36301_329454510485991_208496541_n.jpg) no-repeat; margin: 5px auto; border: 1px solid #00f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 1px 1px #00f; -moz-box-shadow: 0 0 1px 1px #00f; box-shadow: 0 0 1px 1px #00f } .widgetSystem .nama { text-align: center; font-size: 1.5em; background: #fd64b1; background: rgba(255, 0, 128, 0.6); padding:5px; color: #FFF; font-family: "Times new roman", Arial, sans serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .widgetSystem .kulit { background: #f379b2; background: rgba(255, 0, 128, 0.5); height: 250px; overflow: auto; margin-top: 5px; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .widgetSystem a { text-decoration: none; margin: 5px; background: #C71585; background: rgba(199, 21, 133, 0.7); padding: 5px; display: block; color: #BBB; text-transform: uppercase; font-size: 12px; font-weight: bold; font-family: "Arial", Arial, sans serif; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s } .widgetSystem a:hover { background: #1E90FF; color: #0000CD } .widgetSystem li { list-style: none; color: #CCC; margin: 5px } </style>