Cara membuat kotak like facebook melayang di blog (floating facebook likebox)

<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/AVvXsEiBTyvmtvz1FDzuol5ckeNRLBUCBkpiqMiOy622zi3wE5i5L1t1yNfZjuLQ63wq-e2EM2AObExGupSSRwBSv5-CD0fcKaFUbvRuIQHCStVUn7D5licFFA94bQngPboJJ2x5LO0rmoJVkE2n/s1600/face+book.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTyvmtvz1FDzuol5ckeNRLBUCBkpiqMiOy622zi3wE5i5L1t1yNfZjuLQ63wq-e2EM2AObExGupSSRwBSv5-CD0fcKaFUbvRuIQHCStVUn7D5licFFA94bQngPboJJ2x5LO0rmoJVkE2n/s1600/face+book.jpg" /></a></div>
<br />
 Ini dia salah satu widget yang sangat <span class="" id="result_box" lang="id"><span class="hps">menakjubkan</span></span>.<br />
<br />
<span class="" id="result_box" lang="id"><span class="hps">Dimana orang-orang </span><span class=""></span><span class="hps">selama bertahun-tahun</span> <span class="hps">hanya menggunakan</span>  tombol <span class="hps">facebook</span> like saja di blog, <span class="hps">akan tetapi hari ini</span> <span class="hps">saya ingin</span> <span class="hps">memperkenalkan dan share ke Anda</span> Cara membuat kotak like facebook melayang di blog (floating facebook likebox).</span><br />
<br />
<span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id">Floating facebook likebox adalah sebuah </span></span><span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class="hps">slider</span> <span class="hps">yang menyembunyikan</span> <span class="hps">Likebox</span> <span class="hps">di dalam</span> <span class="hps">wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol  maka akan terbuka kotak Facebook likenya.</span></span></span> </span><br />
<br />
<span class="" id="result_box" lang="id"><span class="hps">Langkah-langkahnya sebagai berikut:</span></span><br />
<span class="" id="result_box" lang="id"><span class="hps"><br /></span><span class=""></span></span>
<u><b><span class="" id="result_box" lang="id"><span class="hps">LANGKAH</span> <span class="hps">1</span><span class="">.</span> <span class="hps">Menambahkan</span> <span class="hps">Plugin</span> <span class="hps">JQuery</span> ke<span class="hps"></span> <span class="hps">Blog</span> <span class="hps">Anda</span> : </span></b></u><br />
<ol style="text-align: left;">
<li><span class="" id="result_box" lang="id">Masuk ke Dashboard Anda> klik <span style="color: red;">Design</span> (rancangan)> Edit HTML</span><span class="" id="result_box" lang="id">.</span></li>
<li><span class="" id="result_box" lang="id">Cari kode <span style="color: red;"></head></span> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery  berikut sebelum kode <span style="color: red;"></head></span></span></li>
<li><span class="" id="result_box" lang="id">(Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)</span></li>
</ol>
<blockquote class="tr_bq">
<span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/></span> </span></blockquote>
<ol style="text-align: left;">
</ol>
<ol style="text-align: left;">
</ol>
     4. Save (simpan) template.<br />
<br />
<u><b><span class="" id="result_box" lang="id"><span class="hps">LANGKAH</span> <span class="hps">2</span>. <span class="hps">Tambahkan</span> <span class="hps"></span></span><span class="" id="result_box" lang="id"><span class="hps"><span class="" id="result_box" lang="id">floating l</span>ikebox</span> ke blog Anda<span class="hps"></span></span> </b></u>:<br />
<ol style="text-align: left;">
<li> Buka halaman <b>Tata Letak</b></li>
<li>Klik tambah gadget <b>> </b>pilih <b>tambah</b> <b><b>HTML/Javascript</b></b></li>
<li>copy dan pastekan kode script dibawah ini : </li>
</ol>
<blockquote class="tr_bq">
<script type="text/javascript"> // </script> <br />
<style type="text/css"> <br />
.w2bslikebox{background: 
url("<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgKp6cyCV_S85RqQZqNtmvuMjgrcoO2ymhBfxVTI3lqbk9Lr_2L-mrVLnBM2YINIiVIcSidITY727ZaDTbZN-2HzcSxGww-83zpe8OpqtjoUqKEdKb5yWcrPrS1n_bws_c68PPOerDIf2/s1600/facebook1.png</span>")
 no-repeat scroll left center transparent !important;display: 
block;float: right;height: 270px;padding: 0 5px 0 46px;width: 
245px;z-index: 99999;position:fixed;right:-250px;top:20%;} <br />
.w2bslikebox div{border:none;position:relative;display:block;} <br />
.w2bslikebox span{bottom: 10px;font: 9px "lucida 
grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 
6px;text-align: right;z-index: 99999;} <br />
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} <br />
.w2bslikebox span a:hover{text-decoration:underline;} <br />
</style><div class="w2bslikebox" style=""><div><br />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=<span style="color: red;">http:///www.facebook.com/pages/Eyang-anom/427305383989192</span>&amp;<br />
width=245&amp;colorscheme=light&amp;show_faces=true&amp; 
connections=8&amp;stream=false&amp;header=false&amp;height=330"
 scrolling="no" frameborder="0" scrolling="no" style="border: medium 
none; overflow: hidden; height: 330px; width: 
245px;background:#fff;"></iframe><span>Widget by:<a 
href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div></blockquote>
<br />
<div style="text-align: justify;">
Anda bisa mengganti "<span style="color: #45818e; font-family: 'Times New Roman', serif; font-size: small;">url fans page facebook Anda</span><span style="font-family: 'Times New Roman', serif; font-size: 16px;">" dengan alamat url </span><span style="color: #45818e; font-family: 'Times New Roman', serif; font-size: 16px;"> </span>fans page facebook Anda sendiri</div>
<div>
<div style="text-align: justify;">
contoh fans page facebook blog ini : <span style="color: red; font-size: small;">http:///www.facebook.com/pages/Eyang-anom/427305383989192.</span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="color: red;"><span style="color: black;">Sedangkan untuk gambar logo facebooknya seperti <span style="font-family: Times New Roman, serif; font-size: x-small;">"</span></span></span><span style="color: red;"><span style="color: black;"><span style="font-family: Times New Roman, serif; font-size: small;"><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgKp6cyCV_S85RqQZqNtmvuMjgrcoO2ymhBfxVTI3lqbk9Lr_2L-mrVLnBM2YINIiVIcSidITY727ZaDTbZN-2HzcSxGww-83zpe8OpqtjoUqKEdKb5yWcrPrS1n_bws_c68PPOerDIf2/s1600/facebook1.png</span></span><span style="font-family: Times New Roman, serif; font-size: x-small;">", <span style="font-size: small;">bisa  diganti dengan koleksi</span> </span> gambar logo facebook <span style="font-family: 'Times New Roman', serif;">Anda sendiri.</span></span></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="color: red;"><span style="color: black;"><span style="font-family: 'Times New Roman', serif;">Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).</span></span></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="color: red;"><span style="color: black;"><span style="font-family: 'Times New Roman', serif;">Semoga bermanfa'at. </span></span></span><br />
<br />
<span style="color: red;"><span style="color: black;"><span style="font-family: 'Times New Roman', serif;">Sumber: http://problogiz.blogspot.com </span></span> </span></div>
</div>
<a href="http://problogiz.blogspot.com/2012/09/pasang-widget-fans-page-facebook.html">Pasang Widget Fans Page Facebook Melayang</a>
</div>

Ini dia salah satu widget yang sangat menakjubkan. Dimana orang-orang selama bertahun-tahun hanya menggunakan tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox). Floating facebook likebox adalah sebuah slider yang menyem…

Baca selengkapnya...

31 Komentar

jalupangna Label: widget 02.13 31 komentar

Cara membuat berbagai macam variasi blockquote di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Sebagaimana kita ketahui bahwasanya <a href="http://sijalupangna.blogspot.com/" target="_blank">Blockquote</a> adalah tanda yang digunakan untuk menandai suatu tulisan yang
 penting, sehingga tampak berbeda dari tulisan yang lainnya. Oke, kali ini saya akan share dan posting ke anda tentang berbagai macam variasi <a href="http://sijalupangna.blogspot.com/" target="_blank">blockquote</a> di blog.<br />
<br />
Di bawah ini ada beberapa macam  variasi <a href="http://sijalupangna.blogspot.com/" target="_blank">blockquote</a> berikut kode-kodenya:<br />
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps">Blockquote</span> <span class="hps">Dengan</span> <span class="hps">Border</span>  <span class="hps">dan</span> <span class="hps">Gambar</span> <span class="hps alt-edited">burung hantu:</span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY3qlSdYPhKvWIJLn39_p2pghuCkBwEeUQjkYRSLhLW5OLeqGD06ohqumwu-D_VobVsqu46KUPMeSOBoP5_QzlxsKwKkViyNjRdnWyTtTv_vsi64nJtIW2CTCjhSxQa0FmqJjGxzu9AA7/s1600/owl2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY3qlSdYPhKvWIJLn39_p2pghuCkBwEeUQjkYRSLhLW5OLeqGD06ohqumwu-D_VobVsqu46KUPMeSOBoP5_QzlxsKwKkViyNjRdnWyTtTv_vsi64nJtIW2CTCjhSxQa0FmqJjGxzu9AA7/s320/owl2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">Kode blockquote:</span></span></span><br />
<br />
<blockquote class="tr_bq">
<span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">blockquote {        <br />margin : 0 20px;         <br />padding: 60px 30px 40px 20px;         <br />background
 : #F1F8FE 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9i1lvlDptFQt5QyIoRi5rtz2Fed0jh4w-NMEOFW5WptkRk3hpwaXeSRo65Zb5KEXIXuFc7StDxrkg7qa0VEhn2_DiZFSQCGDjwcAEQlKHAuszUdJaPtXxJXkdFssL3FxI5nQOYCATG50/s400/owl.png)
 no-repeat 350px 5px;         <br />font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;         <br />color : #000;         <br />border-left: 8px dotted #DAB547; <br />
      }        <br />blockquote p {         <br />margin: 0;         <br />padding-top:10px;         <br />} </span></span></blockquote>
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="" id="result_box" lang="id"><span class="hps">Blockquote</span> <span class="hps">dengan</span> <span class="hps">label</span> di <span class="hps">pojok</span> <span class="hps alt-edited">kiri atas </span><span class="hps">dan</span> <span class="hps alt-edited">border</span> <span class="hps">di</span> <span class="hps">bawah</span></span> dengan warna ungu:</span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH8OO2OsvRE_oXpFg2Ss5ffy7EBEUwdh57tFE8Gemmg_9PBPCfqVcQhmJsOo-detjaycTQf3dYOrqtVUnNzgMixBbmpMWhJPsNQk4Sun9c7Goq5x0LpnDm7L43Qofpnhk-EBT6hMVZWFF/s1600/PurpleScannedCopy2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH8OO2OsvRE_oXpFg2Ss5ffy7EBEUwdh57tFE8Gemmg_9PBPCfqVcQhmJsOo-detjaycTQf3dYOrqtVUnNzgMixBbmpMWhJPsNQk4Sun9c7Goq5x0LpnDm7L43Qofpnhk-EBT6hMVZWFF/s320/PurpleScannedCopy2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"> </span></span></b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">Kode blockquote:</span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;">.post blockquote {        <br />margin : 0 20px;         <br />padding: 70px 20px 20px 40px;         <br />background
 : #E4EAFE 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvAnb8ezAgp1jkJLtSLI6yzhgQL-3XQ85xdQcwr3Tn_MLH0bgC8VkOqHZhlxRmma_TOqwrHwkNM8Z96LzcfvvAFOacvPwS6sTFZwC-el0iYmMNVBcmiyiOuI4Ai2448ujlY4Q65Mc00Y/s400/angular-purple.gif)
 no-repeat top left;         <br />font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;         <br />color : #000;         <br />border-bottom : 5px solid #435388;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />}</span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="" id="result_box" lang="id"><span class="hps">Jigsaw</span> <span style="color: red;"><span style="color: black;">(seperti gergaji ukir)</span> </span><span class="hps">Blockquote</span> <span class="hps">Dengan</span> tulisan copyrighted coding <span class="hps">Pada</span> <span class="hps">Pojok</span> <span class="hps">Kanan</span></span> bawah:</span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kCvfwyKxs-DWFFLdBjjlonx-mOZHTR4BT_gE3Tnir66rq4GD-qPB7nB9ZKj8z5_WNDMMprMiprQeBqkUP1M10ogTQeaEMYm-AdclfLfJXjTeyuHSnJKHrnxx-kTz5py9pRnee8HWrAnk/s1600/jigsaw2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kCvfwyKxs-DWFFLdBjjlonx-mOZHTR4BT_gE3Tnir66rq4GD-qPB7nB9ZKj8z5_WNDMMprMiprQeBqkUP1M10ogTQeaEMYm-AdclfLfJXjTeyuHSnJKHrnxx-kTz5py9pRnee8HWrAnk/s320/jigsaw2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"> </span></span></b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"> </span></span></span><br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">Kode blockquote:</span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;">.post blockquote {        <br />margin : 0 20px;         <br />padding: 10px 20px 25px 20px;         <br />background
 : #9FCFFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyz_sn4Ee6XqNHKSVm8nmu5KjVAXq3tbSVADRBBJ9e93H9GMKlBec8da1A-o_sF33RYlV5qhNmOWfKClcKR_ifVpyC0e_Es1xgWWhmq_cFppxnd_i-SE4982H1n9JZ0RjQsXfMFLaMIr0/s400/block22.gif)
 no-repeat right bottom;         <br />font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;         <br />color : #484848;         <br />border: 5px dashed #fff;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />}</span></span></span></span></blockquote>
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><b>Blockquote dengan border klasik border di samping kiri</b> :</span></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQRgtCTmXiS8LH0EnM_9YzCc5xVSnabnWAaaLV9G43mNF3aSvyPkd3gnz0D5H9vF-a8YUXU1AiWjE0owD7mhyWiiiJBGcrg9E5-2QUY9W5WgFFZ7mqDX69r7zgR-dZBbXz94KhxlBv9rM/s1600/leftsidedbrownish2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQRgtCTmXiS8LH0EnM_9YzCc5xVSnabnWAaaLV9G43mNF3aSvyPkd3gnz0D5H9vF-a8YUXU1AiWjE0owD7mhyWiiiJBGcrg9E5-2QUY9W5WgFFZ7mqDX69r7zgR-dZBbXz94KhxlBv9rM/s320/leftsidedbrownish2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"> </span></span></b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"> </span></span></span><br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">Kode blockquote:</span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;">.post blockquote {        <br />background: #F3F3F1 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQ-GWypvYG8uVlzKG8wo8_-oOsB8Va9WRywjyYNHu1_Zxlij0QnviIpAwKDI9dv67kxAGlCMw7HLVb2a-N5SqnybvoYX6MZdgGrJoOPFH4_NeCdPw-ixaQ7COVIKhEfh7Mraop6PMxHw/s1600/comma-side-orange1.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQ-GWypvYG8uVlzKG8wo8_-oOsB8Va9WRywjyYNHu1_Zxlij0QnviIpAwKDI9dv67kxAGlCMw7HLVb2a-N5SqnybvoYX6MZdgGrJoOPFH4_NeCdPw-ixaQ7COVIKhEfh7Mraop6PMxHw/s1600/comma-side-orange1.gif</a>) ;         <br />background-position:;         <br />background-repeat:repeat-y;         <br />margin: 0 20px;         <br />padding: 20px 20px 10px 45px;         <br />font-size: 0.9em;         <br />font: italic 1.2em Georgia, "Times New Roman", Times, serif;         <br />}         <br />.post blockquote p {         <br />margin: 0;         <br />padding-top: 10px;         <br />} </span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;">atau blockquote klasik lainnya:</span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7o2N3jjotjn6xKmyYWe3MuNqxuROiQvpeZ9SeAg8L37yMEgw96yfuefqfyVNQbTroKl2f-_sU7K_T3QD1Gu9S61AmewsSENYRoaQZFsFiImfqgBF4rzmzi6hnvCZPAhNr-qxsN1xqzc2Z/s1600/leftsidedgreenblack2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7o2N3jjotjn6xKmyYWe3MuNqxuROiQvpeZ9SeAg8L37yMEgw96yfuefqfyVNQbTroKl2f-_sU7K_T3QD1Gu9S61AmewsSENYRoaQZFsFiImfqgBF4rzmzi6hnvCZPAhNr-qxsN1xqzc2Z/s320/leftsidedgreenblack2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited">kode blockquote:</span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;">blockquote {        <br />background: #484B52 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9NE3rvTEo5WZvuhpZ3c7mixEB1SoMzep9ytFhyphenhyphenjq5Tn6x6Aw4MDMqkCRb-jnt-EGCLp3io4myLXCIWWhI-tuQAZ9OM-RmWM0X7XpZagO09Z77a21wOd-Qm5CGWfYhHFXQcWmZHhoK2M/s1600/green-black-side.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9NE3rvTEo5WZvuhpZ3c7mixEB1SoMzep9ytFhyphenhyphenjq5Tn6x6Aw4MDMqkCRb-jnt-EGCLp3io4myLXCIWWhI-tuQAZ9OM-RmWM0X7XpZagO09Z77a21wOd-Qm5CGWfYhHFXQcWmZHhoK2M/s1600/green-black-side.gif</a>) ;         <br />background-position:;         <br />background-repeat:repeat-y;         <br />margin: 0 20px;         <br />padding: 20px 20px 20px 50px;         <br />color:#C7CACF;         <br />font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";         <br />}         <br />.post blockquote p {         <br />margin: 0;         <br />padding-top: 10px;         <br />} </span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="hps">Blockquote</span> <span class="hps">dengan dengan</span> <span class="hps">Label</span> <span class="hps">warna di pojok kanan bawah</span>:</span></span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSB4vitUhisxjk8Plunin-RLiDWf6y23awOr_S0E51WLpLFoHgEJ4REjWeKxqvyixloiwMyxngcKrbXW2IAo6w1-fWzqWj4U1wgixSpjyy9Hem7enER1go9vrfx7Z8GHTgxlnL29Q-6Bf/s1600/Brown-Scanned-copy%5B2%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSB4vitUhisxjk8Plunin-RLiDWf6y23awOr_S0E51WLpLFoHgEJ4REjWeKxqvyixloiwMyxngcKrbXW2IAo6w1-fWzqWj4U1wgixSpjyy9Hem7enER1go9vrfx7Z8GHTgxlnL29Q-6Bf/s320/Brown-Scanned-copy%5B2%5D.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id"> </span></span></span></b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote:</span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote {        <br />margin : 0 20px;         <br />padding: 20px 60px 80px 20px;         <br />background
 : #FEE4E3 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7cBUsaZ_11QyTN6EVIxKfwcBM3ryA7cS9PpjNHlv5YPQ2N73LtNGQGOXY7SWlu_wOizsSYCH-cnbXODR_jlmNhmExBQjtNdzo01RRlOHLOm0HB_v9hMAgbEanNmFI0WfM9-5TADKS2c/s400/angular-right.gif)
 no-repeat bottom right;         <br />font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;         <br />color : #000;         <br />border: 1px solid #DDD;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />} </span></span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="short_text" id="result_box" lang="id"><span class="hps">Blockquotes</span> <span class="hps">dengan</span> <span class="hps">tanda koma</span> <span class="hps alt-edited">terbalik</span></span>:</span></span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHbkdq1tkTNK74jExlBEv3lNV5Q4JMxS28IngnRUgJl4Ek3p3VHObO6PjvT7ICoPt4d2LhKuw6N1LwbD25uZZfP8dJnnvD53eSgao7FQXjieBxehyfDo5EiWwTowalClP8aoX21c0C3oY/s1600/commasnavyblue2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHbkdq1tkTNK74jExlBEv3lNV5Q4JMxS28IngnRUgJl4Ek3p3VHObO6PjvT7ICoPt4d2LhKuw6N1LwbD25uZZfP8dJnnvD53eSgao7FQXjieBxehyfDo5EiWwTowalClP8aoX21c0C3oY/s320/commasnavyblue2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id"> </span></span></span><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote: </span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote {        <br />  font: 18px normal Tahoma, sans-serif;         <br />  padding-top: 10px;         <br />  margin: 5px;         <br /> 
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrq9yCfGLWW0e0-yMVUdbZuFrxNWL-JvOPAyYNCaKpSPVXRqtWE1DVVg68G26SwGJNS6M1UKTsvjySkPWI_0hxnPMAr1GZDBHMtdftAESHFBjYH_0Dp9e7nJfasZHnwRfNRqieIjoJTo/s400/comma-left.gif)
 no-repeat top left;         <br />  text-indent: 65px;         <br />  }         <br />  .post blockquote div {         <br />    display: block;         <br />   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzIDVUrRU8H6Iql7LpjxjFUzoiZLzeYyhs6MJqLtN37obL9eprj9yTmAxm4ZPr8Y0y1_xoD_1vM5ZrHJrfbcOGiwIv-uGW1IEukEcDvqlqWogn7ucmnuma9Y1jtRCYDPAtRQh42uiImY/s400/comma-right.gif)
 no-repeat bottom right;         <br />padding-bottom:10px;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />} </span></span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">Atau tanda koma yang berwarna orange: </span></span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJ09TZsN1BqnvDNCFmrZd2yAONcRZpyqcGeLvVsWiCLkR0aPoCywSWxo06wWFecHKXpclJuPFuzJFhCkzMf6cIER4iDtYxcoR1-Hb8S3amyj4eHBhqzfPf6X7H-u-T948l7c7AFJBbOkx/s1600/commasorange2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJ09TZsN1BqnvDNCFmrZd2yAONcRZpyqcGeLvVsWiCLkR0aPoCywSWxo06wWFecHKXpclJuPFuzJFhCkzMf6cIER4iDtYxcoR1-Hb8S3amyj4eHBhqzfPf6X7H-u-T948l7c7AFJBbOkx/s320/commasorange2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote:</span></span></span><b><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id"> </span></span></span></b></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote {        <br />  font: 18px normal Tahoma, sans-serif;         <br />  padding-top: 10px;         <br />  margin: 5px;         <br /> 
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPonQFQRIvsL3j1TXR1IV-9KEYwf1R4Rg5dPjSo3As_O5Q59_mHOqQ2Trx_IGdx30VOmzoa25F3ea_4yaoW4kP0dgm3FR1eKDLLZvMKIo2hJTat9kUpS5ZQHx7CSS7VowVFy1q5qBCKc/s400/comma1-left.gif)
 no-repeat top left;         <br />  text-indent: 65px;         <br />  }         <br />  .post blockquote div {         <br />    display: block;         <br />   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Vp3QI6QhYQirHGAyH-iswxSiJ6jVmFv82ivfo_nS4AdPimnFe7sLd2xOsL8Zf9WbR_Z1lYMsk48_UECHX5B67IhpplgacHMwn_CxM84s7exbAM5nk59ziJ1ofj5f8-VzOX2Kyou9y2I/s400/comma1-right.gif)
 no-repeat bottom right;         <br />padding-bottom:10px;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />} </span></span></span></span></span></blockquote>
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><b>Atau variasi  dengan tanda lima jari tangan:</b></span></span></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8FgQpB28GcePK1vrsTWkPZaJ109DGbnOn6y-iUJv6g6Wed-_OVxoMnZVhfFjKFlnhLZ-oqUH_JWIYrkSPqygsIYkbVSvuEIKL2WR84V3r9wUOkWfXhhczJokXA-605rmLbMAgF4waz-x/s1600/commashands2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8FgQpB28GcePK1vrsTWkPZaJ109DGbnOn6y-iUJv6g6Wed-_OVxoMnZVhfFjKFlnhLZ-oqUH_JWIYrkSPqygsIYkbVSvuEIKL2WR84V3r9wUOkWfXhhczJokXA-605rmLbMAgF4waz-x/s320/commashands2.gif" width="320" /></a></div>
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><b> </b> </span></span></span></span></span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote:</span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote {        <br />  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;         <br />  padding-top: 25px;         <br />  margin: 5px;         <br /> 
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOULrhUr5Y5uQQSiOke1EY2PZVLdye-NCd1LuN2lQ8SZM9RQBT3NgHhwjbrBtk6_VYbYqX-cjGPk6Pz1UMATIrIQmPVG3VxeoRQsITezlbXlK6bfBRxpRLXIUsahw6BjRnCwTQ4F4FJD8/s400/left.gif)
 no-repeat top left;         <br />  text-indent: 65px;         <br />color:#6299E4;         <br />  }         <br />  .post blockquote div {         <br />    display: block;         <br />   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ267Kko5IDu4vciojKsPCUAnATwoAjunz782ytb0xiq1XYoyFD53PT-PT5tJCvJonwhUHBe1rPGMshg1ta4Pfv46AzZWdoCg2RDSfauHRwfygJPgVeGlTTkoO2YABeeTD2B7xgWkF-7w/s400/right.gif)
 no-repeat bottom right;         <br />padding-bottom:30px;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding-top:10px;         <br />}  </span></span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="short_text" id="result_box" lang="id"><span class="hps">Blockquote</span> <span class="hps">dengan</span> <span class="hps">gambar copyrighted coding diatas:</span></span> </span></span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij42JCFULwVFF8fdrDPhYnMQ52jO0EvA_a06rNPPfyjWlTX5-2w0-Vra8WeIPVwqifBawfX5qJY1fTxSz32O9I5L0YopTBu6E4LaxiOQ8-UZVGtCmAzqaRS-_xGOedcidvkOM5YQldE8hA/s1600/Copyrightedred2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij42JCFULwVFF8fdrDPhYnMQ52jO0EvA_a06rNPPfyjWlTX5-2w0-Vra8WeIPVwqifBawfX5qJY1fTxSz32O9I5L0YopTBu6E4LaxiOQ8-UZVGtCmAzqaRS-_xGOedcidvkOM5YQldE8hA/s320/Copyrightedred2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"> </span></span></span></span><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"> </span></span></span></span></span></b><br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote: </span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote {        <br />margin : 0 20px;         <br />padding: 70px 20px 20px 20px;         <br />background : #E7E5DC url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm35C3SqgG6PaYJtMCc2mVx3xBzNTxavUxprBNS5qJvwrFHKlHP9SHmGl1r9ItpSDH5AoaBQ2EHaPUSVfaBJnOdj7ko9JRcATC9CRPvRhTvsagniJ309Hbb24qjX4k4m9Vs1oBt9s4TFI/s1600/block333.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm35C3SqgG6PaYJtMCc2mVx3xBzNTxavUxprBNS5qJvwrFHKlHP9SHmGl1r9ItpSDH5AoaBQ2EHaPUSVfaBJnOdj7ko9JRcATC9CRPvRhTvsagniJ309Hbb24qjX4k4m9Vs1oBt9s4TFI/s1600/block333.gif</a>) 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></span></span></span></span></blockquote>
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><b><span class="" id="result_box" lang="id"><span class="hps">Blockquote</span> <span class="hps">dengan</span> <span class="hps">gambar</span> <span class="hps alt-edited">Tirai</span>  di a<span class="hps">tas dan bawah</span></span></b>:</span></span></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYwSqJhIm_VonUtAGM6ke5oN69qwuvRZoQ-RF3ARF6OYSha7mqGOJ1A4vRyIcCJm2idbxCtLNnOR0lXL9ZNkDP40cbF8I0_g2SOUTmQdakdghg8zpgtcK_3nF8-uxsr0H1ltAhrXIgofW/s1600/attopandbottom2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYwSqJhIm_VonUtAGM6ke5oN69qwuvRZoQ-RF3ARF6OYSha7mqGOJ1A4vRyIcCJm2idbxCtLNnOR0lXL9ZNkDP40cbF8I0_g2SOUTmQdakdghg8zpgtcK_3nF8-uxsr0H1ltAhrXIgofW/s320/attopandbottom2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote:</span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote{        <br />margin : 0 20px;         <br />padding: 50px 30px 50px 30px;         <br />background
 : #FFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXGPOZstNyS8RlWGkPrkv-HFkhpFD7I_GGASDM1N5Biefabl9J6qYoONUlH9Jc5VzM3kmtdOUXZR3dj5NM0Pdnha5kUKG0csPvY5iDIUNv9O_lE80HlkIpJ99Y5-SsXAZE4Pvp6neFaw/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/AVvXsEhdLbH1RroJhv0a6lIO0ESyyCyDIYve5TRAMYYPEbMGzEMNbmjC4vZoKapYu711ugmSxEorRzwG1JvGVDf7j3IWgunXUxKUDAUIsW0QlTWcuK2ylu06yvPvMnsVct9xRAf_1MyehS8xfVE/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></span></span></span></span></blockquote>
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"> </span></span></span></span><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="short_text" id="result_box" lang="id"> </span></span></span></span></span></span><br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="short_text" id="result_box" lang="id"><span class="hps">Gaya</span> <span class="hps">blockquote</span> <span class="hps">kotak dikelilingi oleh</span> <span class="hps">borders</span></span>:</span></span></span></span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNMIH85KpbXk7FOdXkzK2BLomb-_VvzbxECLOHlE_dOxDXjHmi6jMCAOQ3mB4pe2nuGS7ubdQMQNnu1nQKimTR0h_g6GzdR_AfAnQehn02LWSPRUHJI3zhkxstEkmb88ONt9Gzw_IHfF_/s1600/Copyrightedorange2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNMIH85KpbXk7FOdXkzK2BLomb-_VvzbxECLOHlE_dOxDXjHmi6jMCAOQ3mB4pe2nuGS7ubdQMQNnu1nQKimTR0h_g6GzdR_AfAnQehn02LWSPRUHJI3zhkxstEkmb88ONt9Gzw_IHfF_/s320/Copyrightedorange2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote: </span></span></span></span><br />
<br />
<blockquote class="tr_bq">
.post blockquote {        <br />margin : 0 20px;         <br />padding: 70px 20px 30px 20px;         <br />background
 : #E7E5DC 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFP3PYyqNKr0_8ivhcxihEhLqMi_gYzXYz60NqWA9D6hEqAgTejxEE3liR2MbpYUjV3iNJQgdPHQc-WVvQC5D7bpoiGyoIV4ALdZfZMNKsPj66N90dt03tJGYKZ8mtOUOdGepKFGRpL8/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 />}</blockquote>
<br />
<b><span class="short_text" id="result_box" lang="id"><span class="hps">The</span> <span class="hps">Monkey Man</span> <span class="hps">Blockquote</span><span class=""> :</span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEIDTf0TO-f3GPkO_YFVNCW2D9C7r-yV4MtNJJewFLf0xc2lfi4Jq5JOPHXybXBhyphenhyphenoT71de9lXrCp6qCle8dpre22Lu7NqIYNkor6Kus6yz0XiqKqwPng43uITm4E04dUqPYPVOG3LzG2/s1600/monkeyman2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEIDTf0TO-f3GPkO_YFVNCW2D9C7r-yV4MtNJJewFLf0xc2lfi4Jq5JOPHXybXBhyphenhyphenoT71de9lXrCp6qCle8dpre22Lu7NqIYNkor6Kus6yz0XiqKqwPng43uITm4E04dUqPYPVOG3LzG2/s320/monkeyman2.gif" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span class="short_text" id="result_box" lang="id">kode blockquote:</span></span></span></span><br />
<br />
<blockquote class="tr_bq">
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">.post blockquote{        <br />margin : 0 35px;         <br />padding: 80px 0px 0px 0px;         <br />background
 : #E6F1FA 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMw0HOvK-fAtQQ-nUjpRpMYgt3GSMZmWqqpLwTpMFCbclrQ9VDDWkpSNfrHRCC07nk5YYDAXaFIERIIe50fJI5CmOXIr66hWwb9J9xf5oRFct0Jbd7ykgJzGIat8zJNUjp-DEzsUrRXQ/s400/head2.gif)
 no-repeat top;         <br />font: normal 1em "comic sans ms", Helvetica, verdana;         <br />color : #666;         <br />} <br />
      .post blockquote div{        <br />background
 : #E6F1FA 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBuNwSddfs3aRpxkCxjk3OI6ySWgkMrLMvaT_uxBaEiixw2ZWMh5xWJcmEs50h9ff66xNkJ0DgSVOf8_c5cahHkLFv6KYI0BliDPKaKE9rhY9aDiRh0JKvGH_20t8LPKeafvAKWK_ZOY/s400/head-bottom3.gif)
 no-repeat bottom;         <br />padding-bottom: 50px;         <br />} <br />
      .post blockquote p {        <br />margin: 0;         <br />padding: 20px;         <br />} </span></span></span></span></span></blockquote>
<br />
<b><span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id">Penerapan dan penyesuiannya di blog: </span></span></span></span></span></b><br />
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class="hps">Sekarang</span> <span class="hps">Untuk menambahkan</span> <span class="hps">Salah satu</span> <span class="hps">blockquotes</span> <span class="hps">keren dan</span> <span class="hps">unik untuk</span> <span class="hps">blog</span> <span class="hps">Anda</span><span>,</span> <span class="hps">lakukan hal berikut</span><span class="">:</span></span></span></span></span></span></span><br />
<ul style="text-align: justify;">
<li>Pertama masuk ke akun blogger kita.</li>
<li>Klik fitur rancangan.</li>
<li>Klik edit HTML.</li>
<li>Cari kode blockquote misalnya <span style="color: red;">.post-body blockquote {</span> <span style="color: red;">line-height:1.3em; }</span>atau <span style="color: red;">.post blockquote{...........}</span>dalam kode HTML template blog kita tersebut. </li>
<li>Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.</li>
<li>Klik simpan template.</li>
</ul>
<div style="text-align: justify;">
<div style="text-align: justify;">
<u>Keterangan :</u></div>
<ul style="text-align: justify;">
<li>Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.</li>
<li>Selalu biasakan untuk download template blog kita terlebih dahulu 
sebelum melakukan edit, untuk back up sebagai antisipasi saat kita 
mengalami kegagalan sewaktu proses editing berlangsung.</li>
</ul>
</div>
<br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class=""> Semoga bermanfa'at...</span></span></span></span></span></span></span><br />
<span style="color: red;"><span class="short_text" id="result_box" lang="id"><span class="hps alt-edited"><span style="color: black;"><span class="short_text" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class=""> </span></span></span></span> </span></span></span></div>

Sebagaimana kita ketahui bahwasanya Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya. Oke, kali ini saya akan share dan posting ke anda tentang berbagai macam variasi blockquote di blog. Di bawah ini ada beberapa macam variasi blockquote berikut kode-kodenya: Bloc…

Baca selengkapnya...

13 Komentar

jalupangna Label: tips dan triks blogger 00.53 13 komentar

Cara praktis dan mudah membuat Effect Page Peel di 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/AVvXsEjdHuHSWi16tbfitjOu3WBUD4W4c4WY4Lf77xvTQJ_iC96D_uDY0ufiI1cyFhoAtOd7xTSmADkCzD7PTIQrIdT4swf3mC1c0XLZ-5CbptL2cSFB4zvDmC3Dj7exuUMHwsUypQIRXnS1f0vq/s1600/page+peel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHuHSWi16tbfitjOu3WBUD4W4c4WY4Lf77xvTQJ_iC96D_uDY0ufiI1cyFhoAtOd7xTSmADkCzD7PTIQrIdT4swf3mC1c0XLZ-5CbptL2cSFB4zvDmC3Dj7exuUMHwsUypQIRXnS1f0vq/s1600/page+peel.jpg" /></a></div>
<br />
 Banyak cara untuk membuat blog kita tampil cantik dan bagus, sehingga 
akan menarik simpati pengunjung dari blog sobat, salah satunya dengan 
cara ini, yaitu <a href="http://sijalupangna.blogspot.com/2012/12/cara-praktis-dan-mudah-membuat-effect.html" target="_blank">cara membuat halaman bisa melipat</a> layaknya seperti buku tulis. hehe :)   <br />
<br />
Kalau kita mengarahkan <a href="http://sijalupangna.blogspot.com/" target="_blank">kursor mouse</a> kita di bagian pojok kanan atas halaman blog, maka halaman tersebut akan kelipat atau kebuka.<br />
<br />
Namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (yang 
disesuaikan oleh pemilik blog) yang biasanya kalau di klik <span id="goog_1804907412"></span><a href="http://sijalupangna.blogspot.com/" target="_blank">akan diarahkan ke suatu halaman lain<span id="goog_1804907413"></span></a> seperti halaman RSS blog, Fans page Facebook ataupun bisa berupa halaman lainnya.<br />
<br />
<br />
Nah, untuk cara membuatnya ikuti langkah - langkah di bawah ini :<br />
<span class="fullpost"><br />1. kalian masuk ke akun blogger kalian.<br /><br />2. Rancangan => edit html<br /><br />3. cari kode <span style="color: red;"></head></span><br /><br />4. Kemudian anda copy kan kode di bawah ini tepat di atas kode <span style="color: red;"></head></span></span><br />
<br />
<blockquote class="tr_bq">
<span class="fullpost"><span class="fullpost"><script type='text/javascript'>var tujuan =&#39;<span style="color: red;">http://www.facebook.com/pages/Eyang-anom/427305383989192</span>&#39;</script><br /><script
 
src='http://nazuafreedotblogspotdotcom.googlecode.com/files/pagepeeleffectnazuafreedotblogspotdotcom.js/'
 type='text/javascript'/></span></span></blockquote>
<br />
<span class="fullpost">5. ganti tulisan yang berwarna merah dengan alamat fan page blog anda<br /><br />6. kemudian simpan template dan refresh blog anda , dan lihat hasilnya.<br /><br /> </span><br />
<span class="fullpost">Sekian tutorial dari saya jika ada kesalahan saya mohon maaf</span>, semoga bermanfa'at.<br />
<br />
<br />
<br /></div>

Banyak cara untuk membuat blog kita tampil cantik dan bagus, sehingga akan menarik simpati pengunjung dari blog sobat, salah satunya dengan cara ini, yaitu cara membuat halaman bisa melipat layaknya seperti buku tulis. hehe :) Kalau kita mengarahkan kursor mouse kita di bagian pojok kanan atas halaman blog, maka halaman tersebut akan kelipat…

Baca selengkapnya...

7 Komentar

jalupangna Label: tips dan triks blogger 13.29 7 komentar

58 website yang menyediakan widget-widget cantik di blog

<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBP_9UQLq8zhG9FQzqhhk5Vvz1_rjhVAx5AIjgmcJJNEm2RRb1Fokv3xh3tkmnPGgvoYOizdNfKfUDA_IfKbBK5JJsmOyeGCuGU_kgCSiVqVzsoq2moZwU0YW9XYVD9sVK9ceaxypG_9b/s1600/widget+cantik.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBP_9UQLq8zhG9FQzqhhk5Vvz1_rjhVAx5AIjgmcJJNEm2RRb1Fokv3xh3tkmnPGgvoYOizdNfKfUDA_IfKbBK5JJsmOyeGCuGU_kgCSiVqVzsoq2moZwU0YW9XYVD9sVK9ceaxypG_9b/s1600/widget+cantik.jpg" /></a></div>
<br />
<div style="text-align: justify;">
Saat pertama kali membuat blog ini, kesibukan 
utama selain menulis artikel adalah belajar dan mencari widget apa yang 
bagus untuk dipasang di blog kesayangan. Kegiatan ini ternyata cukup 
memakan waktu karena harus mencari dan terus mencari di search engine, 
dan sampai akhirnya beberapa widget sudah terpasang di blog ini . 
Sebetulnya apakah widget itu mungkin menjadi pertanyaan umum yang 
melanda kita saat pertama kali berkenalan dengan dunia blog. Widget  
merupakan sebuah elemen yang berguna dan mudah digunakan baik yang telah
 disediakan oleh penyedia layanan blog yang Anda gunakan maupun berasal 
dari third party atau pihak ketiga.</div>
<div style="text-align: justify;">
<br /></div>
</div>
<div class="MsoNormal" style="text-align: justify;">
Penggunaan
 serta pemasangan widget telah sangat dimudahkan oleh pihak-pihak 
penyedia layanan, sehingga yang Anda perlukan biasanya hanya mendaftar 
atau bahkan ada yang tidak perlu mendaftar sama sekali, cukup mengcopy 
script yang telah disediakan dalam element blog Anda.  Dari hasil 
surfing mengenai widget-widget  yang saat ini marak digunakan, berikut 
ini adalah daftar 58 widget pilihan untuk mempercantik tampilan blog 
Anda.<br />
</div>
<div class="MsoNormal" style="text-align: justify;">
1. MyBlogLog’s Recent Readers -  
Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan 
dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog 
mampu meyakinkan Yahoo  untuk membeli sahamnya., yang Anda perlukan 
untuk mendapat widget ini adalah mempunyai account yahoo.</div>
<div class="MsoNormal" style="text-align: justify;">
2.
 Mashable – Widget ini menyediakan semacam newsreel (headline news) 
dalam element blogger yang memberikan cuplikan berita/postingan dari 
sosial networking. Bedanya ada pilihan warna untuk disesuaikan dengan 
layout blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
3. Headline News – Seperti
 widget mashable, widget ini pun menampilkan cuplikan headline berita 
dari situs-situs di seluruh penjuru dunia.</div>
<div class="MsoNormal" style="text-align: justify;">
4.
 Flickr Flash Photo Stream Badge – Widget ini menampilkan photo-photo 
dari profil flickr Anda secara berurutan dan dengan sentuhan flash. 
Flickr merupakan bagian dari yahoo jadi untuk mendapatkan widget ini 
Anda memerlukan account yahoo seperti pada widget MyBlogLog di atas.</div>
<div class="MsoNormal" style="text-align: justify;">
5.
 Preview Anywhere – sudah cukup terkenal juga nama snapshots bagi 
pengguna blogger bahkan untuk wordpress widget ini menjadi rekomendasi 
khusus dalam dashbord admin penggunanya. Fungsinya untuk melihat preview
 link keluar dengan tampilan popup yang tidak terlalu besar ketika 
pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” 
link.</div>
<div class="MsoNormal" style="text-align: justify;">
6. Twitter Badge – Jika dalam 
keseharian hidup Anda banyak hal-hal menarik dan begitu penuh warna 
dengan segudang aktifitas serta ingin agar orang lain tahu dan 
menampilkan cuplikan kalimat-kalimat pendek *satu paragraf misalnya* 
(140 karakter) Anda sedang melakukan kegiatan ini, Anda sedang berada 
dimana, Anda sedang bersama siapa, Anda sedang, sedang, dan sedang 
lainnya…. Maka widget ini cocok untuk dipasang pada blog Anda. Daripada 
bikin sendiri element blogger/wordpress *secara manual* menuliskan teks 
sebagai pesan kepada pengunjung blog Anda bahwa Anda sedang ini-itu, 
saya sarankan lebih baik menggunakan widget ini. Widget ini akan 
menampilkan “tweet” terbaru Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
7. Digg 
News – Widget ini manampilkan Link terakhir yang masuk ke Digg sebuah 
social bookmarking yang sudah Pilihan theme dan warna mudah untuk Anda 
atur agar sesuai dengan template blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
8.
 FEEDJIT – Widget ini paling wuenak diantara widget lainnya, misalkan 
kalo kita lagi cape, lesu, sendi-sendi lagi nggak enak, otot kaku, badan
 pegal, masuk angin… maka suruh aja si mbok untuk feedjit *oooh itu 
pijit ya* heuheu. Feedjit merupakan layanan real time traffic pada blog 
Anda. Ada empat pilihan widget Feedjit yang bisa Anda gunakan, silahkan 
kunjungi saja Feedjit dan lihat empat widget apa saja yang tersedia.</div>
<div class="MsoNormal" style="text-align: justify;">
9.
 LineBuzz – Komentar dalam widget inline untuk Blog Anda. Widget ini 
sangat berguna bagi blog yang memiliki frekuensi di atas 900 Mhz tinggi 
dalam menerima komentar, sehingga memudahkan berkomentar jika terjadi 
diskusi yang berkepanjangan</div>
<div class="MsoNormal" style="text-align: justify;">
10. Flixn – Jika
 kompi atau laptop Anda terpasang webcam, maka widget ini bisa digunakan
 untuk memperlihatkan ekspresi  Anda langsung melalui blog Anda . Jadi 
pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan
 “konser” Anda didepan monitor, mirip webcam yahoo.</div>
<div class="MsoNormal" style="text-align: justify;">
11.
 3Jam – Widget ini memudahkan pengunjung blog untuk berinteraksi dengan 
Anda dengan mengirimkan SMS pada henpun Anda tanpa mereka tahu nomor HP 
Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
12. Jaxtr – Seperti halnya widget 3jam
 di atas, dengan menggunakan widget Jaxtr ini, pengunjung blog bisa 
menghubungi HP Anda tanpa mereka tahu nomor HP Anda. nomor HP Anda 
dijamin kerahasiaannya</div>
<div class="MsoNormal" style="text-align: justify;">
13. LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk blog personal.</div>
<div class="MsoNormal" style="text-align: justify;">
14.
 Box Widget – Dengan widget ini, memudahkan pengunjung blog Anda untuk 
mengupload file ke tempat penyimpanan online box.net melalui widget 
box.net pada blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
15. Price of gas – 
Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), 
kalo di Indonesia mungkin seperti harga Bensin premium, pertamax dan 
solar. “sangat cocok” untuk pengunjung blog Anda yang mobilitasnya 
tinggi. terasa aneh tapi kalo blog Anda memang membahas masalah gas 
bumi, bahan bakar dan yang sejenis maka widget ini sangat cocok, lagian 
tidak perlu mendaftar hanya mengcopas scrift yang disediakan 
Gas-Cost.Net.</div>
<div class="MsoNormal" style="text-align: justify;">
16. iBegin Weather Widget – 
Menampilkan laporan cuaca untuk wilayah Kanada dan Amerika. Seperti 
widget Price of Gas di atas widget ini hanya cocok untuk blog yang 
memang membahas masalah yang sama.</div>
<div class="MsoNormal" style="text-align: justify;">
17. 
ClockLink – Sepertinya widget ini yang paling banyak diminati dan 
digunakan para blogger yang peduli dengan manajemen waktu *ekhm* seperti
 namanya clock, widget ini menampilkan petunjuk waktu atau jam pada blog
 Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
18. Film Loops – Menampilkan kesimpulan filem terakhir yang Anda tonton melalui account FilmLoops Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
19.
 Daily Painters – Widget ini sangat cocok bagi Anda yang berjiwa seni 
tinggi karena widget ini menampilkan lukisan-lukisan dari pelukis 
terkenal di dunia.</div>
<div class="MsoNormal" style="text-align: justify;">
20. WhoLinked – 
Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink
 pada blog Anda. tidak perlu mengupdate karena WhoLinked ini secara 
teratur mengupdate sendiri web/blog yang melink blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
21. Criteo AutoRoll – Widget ini memperlihatkan link menuju blog-blog yang sehaluan dengan blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
22.
 Calender – Berbeda dengan wordpress yang sudah mempunyai widget ini di 
dalamnya, untuk pengguna blogger widget kalender belum tersedia, oleh 
karenanya jika Anda ingin menampilkan kalender maka widget satu ini 
pantas di perhitungkan.</div>
<div class="MsoNormal" style="text-align: justify;">
23. Bitty Browser – 
Menampilkan web browser “mini” pada sidebar blog Anda. Tapi mesti 
hati-hati sama yang namanya “mini” ada rok mini, metro mini, dan 
mini-mini yang lainnya…</div>
<div class="MsoNormal" style="text-align: justify;">
24. Leafletter – Ini juga sama masih masalah mini, widget ini membuat website mini dan menyimpannya pada blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
25. WikiSeek – Menampilkan widget untuk pencarian pada Wikipedia.</div>
<div class="MsoNormal" style="text-align: justify;">
26.
 FeedCount – Menampilkan jumlah pengunjung blog Anda melalui banner 
kecil dan widget ini berhubungan dengan account feedburner Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
27.
 Technorati Link Count – Menampilkan reaksi jumlah link yang menuju blog
 Anda dari salah satu directory blog terbesar dan terpopuler abad ini… 
dialaaaaaaah Technoraaaaati. *juara tinju dunia kita* halaaaah.</div>
<div class="MsoNormal" style="text-align: justify;">
28.
 MyPageRank – Inilah cara lain untuk sombong menunjukkan betapa hebat 
dan bermanfaatnya blog Anda dengan menampilkan Ranking Google atau 
Google PageRank (PR). Penilaian PR google ini seperti saat kita SD dulu 
ada rangking 1 sampe 10, bedanya PR yang baik menurut google itu yang 
lebih besar alias 10, kalo baru satu berarti belum besar-besar amat blog
 Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
29. CheckPageRank – Pilihan lain untuk menampilkan PR blog Anda, namun kelebihannya widget ini menampilkan juga ranking Alexa.</div>
<div class="MsoNormal" style="text-align: justify;">
30.
 Counter Statistic – Bagi Anda yang ingin melihat jumlah pengunjung Anda
 sehari-hari, maka widget ini adalah salah satu yang menyediakan 
fasilitas tersebut.</div>
<div class="MsoNormal" style="text-align: justify;">
31. Web/Blog Counter – 
Widget ini datangnya dari Histats.Com yang memungkinkan Anda bisa 
melacak pengunjung datang dari mana saja, lewat pintu mana saja, dan 
menghitung jumlah pengunjung blog Anda sehari-hari berapa, referer dari 
blog mana saja, dan jika melalui search engine semisal google, yahoo, 
msn menggunakan keyword apa. Jika Anda ingin melihat IP Address 
pengunjung blog Anda, widget histats ini yang bisa saya rekomendasikan.</div>
<div class="MsoNormal" style="text-align: justify;">
32.
 BlinkxIt – Widget mantab sangad karena menampilkan banner kecil dibawah
 setiap postingan blog Anda, ketika banner BlikxIt itu di klik maka 
keluar mini popup seperti snapshot dan menampilkan video yang 
berhubungan dengan postingan blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
33. 
Skype button – Seperti widget menampilkan status online YM pada blog 
Anda, widget ini pun hampir sama cuma bedanya status online/offline pada
 account skype Anda yang ditampilkan.</div>
<div class="MsoNormal" style="text-align: justify;">
34. 
RockYou Horoscope – Saya tidak menganjurkan widget ini pada blogger 
muslim, soalnya ini berupa ramalan yang sudah jelas-jelas dilarang oleh 
agama kita sodara-sodara! Konsekuensinya jika Anda percaya ramalan maka 
40 hari shalat Anda tidak diterima *mode galak* Heuheu…</div>
<div class="MsoNormal" style="text-align: justify;">
35. Bravenet Horoscope – Seperti halnya widget di atas, bravenet pun menyediakan widget horoscope untuk blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
36. del.icio.us Tagometer – Widget ini menampilkan berapa banyak pengguna del.icio.us membookmark blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
37. del.icio.us Linkrolls – Widget ini menampilkan bookmark terakhir Anda dari del.icio.us.</div>
<div class="MsoNormal" style="text-align: justify;">
38.
 Timelines – Perlu membuat timeline untuk blog Anda? Maka widget cukup 
mudah digunakan, hanya perlu memasukan RSS blog Anda lalu memasukkan 
ukuran lebar dan tingginya.</div>
<div class="MsoNormal" style="text-align: justify;">
39. PollDaddy – 
PollDaddy memberikan Anda kemudahan membuat sebuah poling atau survey 
interaktif padamu negeri dengan theme yang sangat cantik dan menawan 
hati tanpa batas waktu yang harus memisahkan antara kita berdua, biar 
langit dan bumi yang menjadi saksi cinta suci nan tulus kita berdua.</div>
<div class="MsoNormal" style="text-align: justify;">
40. Vizu – Pilihan widget lain untuk membuat poling pada blog Anda, kelebihannya widget ini cocok dengan platform blog manapun.</div>
<div class="MsoNormal" style="text-align: justify;">
41.
 AnswerTips – Memperlihatkan jawaban dari Answers.com untuk berbagai 
macam istilah yang terdapat pada blog Anda *berguna jika pengunjung blog
 Anda adalah mas tukul*. pis mas… Heuheu.</div>
<div class="MsoNormal" style="text-align: justify;">
42.
 AnswerBoxes – Masih widget dari Answer.Com hanya saja widget ini 
memberikan kesempatan pada pengunjung blog Anda untuk memasukan istilah 
yang tidak dimengerti dan mendapat jawaban segala risau hatiku dari 
Answer.Com.</div>
<div class="MsoNormal" style="text-align: justify;">
43. Now Playing – Jika Anda 
ingin sharing playlist musik yang sedang Anda dengarkan dan ingin agar 
pengunjung blog Anda juga mendengarkan, nah Signamp menawarkan widget 
ini, biar signamp yang melakukan trik bagaimana hal itu mungin terjadi.</div>
<div class="MsoNormal" style="text-align: justify;">
44.
 BuzzBoost – Menampilkan headline dari RSS FeedBurner blog Anda pada 
blog Anda sendiri ataupun blog Anda yang lain atau juga pada blog teman 
Anda atau mungkin blognya sodara Anda atau juga pada blognya dia, mereka
 dan dirinya.</div>
<div class="MsoNormal" style="text-align: justify;">
45. LibraryThing – Tampilkan buku terakhir yang telah Anda baca wahai kutu buku!</div>
<div class="MsoNormal" style="text-align: justify;">
46.
 Plaxo Address Book – Izinkan pengunjung setia yang telah Anda percayai 
untuk mengakses buku tamu mereka langsung dari blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
47.
 AuctionAds – Widget yang menampilkan pelelangan barang dari eBay, dan 
memberikan kesempatan pada untuk mendapat persentase *uang denger gitu 
loh* dengan catatan pengunjung blog Anda membeli barang lelang tersebut.</div>
<div class="MsoNormal" style="text-align: justify;">
48.
 aStore – Hampir mirip dengan AuctionAds di atas, hanya saja widget ini 
datangnya dari Amazon. Widget ini memungkinkan Anda menampilkan “warung 
sederhana” tapi jika ada yang beli lewat warung Anda tersebut Anda 
mendapatkan keuntungan dari Amazon.</div>
<div class="MsoNormal" style="text-align: justify;">
49. Deal
 of The Day – Masih dari Amazon ini merupakan widget paling anyar yang 
dirilis amazon. Yang menarik dari widget ini adalah diskon besar-besaran
 yang ditawarkan untuk pengunjung blog Anda. </div>
<div class="MsoNormal" style="text-align: justify;">
50. Plazes – Widget ini menampilkan dimana posisi Anda.. Nah widget ini menampilkan lokasi peta dimana kamu berada.</div>
<div class="MsoNormal" style="text-align: justify;">
51.
 Stockalicious – Perlihatkan portfolio Anda dengan widget ini, dan 
sharing dengan blogger lain. Biar semua orang tahu berapa banyak dana 
yang telah Anda keluarkan untuk ngeblog. </div>
<div class="MsoNormal" style="text-align: justify;">
52. Yahoo! For Good – Widget ini untuk membuat “kotak amal” dan akan didonasikan kepada yang berhak menerimanya. </div>
<div class="MsoNormal" style="text-align: justify;">
53.
 Giftspace – Sahabat ataupun teman blogger akan memberi hadiah di hari 
Ultah Anda tapi mereka tidak tahu harus membeli hadiah apa yang 
sekiranya Anda inginkan. Nah melalui widget ini biarkan mereka tahu kado
 apa yang sebenarnya Anda inginkan.</div>
<div class="MsoNormal" style="text-align: justify;">
54. MixMap – Dari widget ini Anda bisa melihat pengunjung profile MySpace Anda dari sebuah Peta.</div>
<div class="MsoNormal" style="text-align: justify;">
55. Google Map Widget – Perlihatkan pencarian pada peta google dari blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
56. Google Video Search – Tampilkan form pencarian video dari video pilihan pada blog Anda.</div>
<div class="MsoNormal" style="text-align: justify;">
57. This Day in History – Widget ini menampilkan cuplikan bahwa hari ini ada sejarah apa pada masa lalu.</div>
<div class="MsoNormal" style="text-align: justify;">
58. Shoutbox – Fungsi shoutbox adalah untuk menampung pesan singkat teman atau para blogger yang tengah blogwalking.</div>
<div class="MsoNormal">
<br />
</div>
<div class="MsoNormal">
Semoga bermanfa'at. </div>

Saat pertama kali membuat blog ini, kesibukan utama selain menulis artikel adalah belajar dan mencari widget apa yang bagus untuk dipasang di blog kesayangan. Kegiatan ini ternyata cukup memakan waktu karena harus mencari dan terus mencari di search engine, dan sampai akhirnya beberapa widget sudah terpasang di blog ini . Sebetulnya apakah wi…

Baca selengkapnya...

5 Komentar

jalupangna Label: tips dan triks blogger 16.17 5 komentar

Membuat Widget Subscribe Dengan Efek Hover

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Kali ini Saya akan posting artiekl tentang cara membuat <b>Kotak Widget Subscribe Dengan Efek Hover. </b>Widget
 subscribe ini sangat special dan lebih keren karena ditambah dengan 
icon <i>facebook</i>,<i> twitter</i> dengan efek hover seperti gambar di bawah ini.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://1.bp.blogspot.com/-fxkLCAPZp4I/UEsKwZ5ZhmI/AAAAAAAAEhk/M-YUBu1FDt0/s1600/Subscribe+dengan+hover+-+Blazer+Blog.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Untuk membuatnya sangat mudah Anda cukup menggunakan sebuah situs untuk membuat widget ini. <a href="http://demo4.mybloggertools.org/2012/09/email-subscription-box.html" target="_blank">Klik disini</a> untuk membuat widget (<b style="background-color: white; font-size: 15px; text-align: -webkit-center;">Copyright @ <a href="http://www.mybloggertools.org/">MYBLOGGERTOOLS.ORG</a></b>)</div>
<div style="text-align: justify;">
Nanti Anda disuruh masukin</div>
<div style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<i>Google+ ID : (Example : <a class="smarterwiki-linkify" href="https://plus.google.com/">https://plus.google.com/</a><span style="color: red;">10380669560684810</span>)</i></div>
<div style="text-align: justify;">
<i>Facebook Username : (Example : <a class="smarterwiki-linkify" href="http://www.facebook.com/">http://www.facebook.com/</a><span style="color: red;">sijalupangna blog</span>)</i></div>
<div style="text-align: justify;">
<i>Twitter Username : (Example : <a class="smarterwiki-linkify" href="https://twitter.com/">https://twitter.com/</a></i><i><a class="smarterwiki-linkify" href="https://twitter.com/"><i><span style="color: red;">sijalupangna blog</span></i></a>)</i></div>
<div style="text-align: justify;">
<i>Feedburner Username : (Example : <a class="smarterwiki-linkify" href="http://feeds.feedburner.com/">http://feeds.feedburner.com/</a></i><i><i><span style="color: red;">sijalupangna blog</span></i>)</i></div>
</blockquote>
<div style="text-align: justify;">
<i><br />
</i> Anda cukup masukin kode yang berwarna merah sesuai dengan username 
milik Anda masing-masing. Setelah selesai klik Generate. (Ingat Anda 
harus sudah login ke blog Anda) </div>
<br />
Semoga bermanfa'at. </div>

Kali ini Saya akan posting artiekl tentang cara membuat Kotak Widget Subscribe Dengan Efek Hover. Widget subscribe ini sangat special dan lebih keren karena ditambah dengan icon facebook, twitter dengan efek hover seperti gambar di bawah ini. Untuk membuatnya sangat mudah Anda cukup menggunakan sebuah situs untuk membuat widget ini. Klik disini …

Baca selengkapnya...

0 Komentar

jalupangna Label: widget 02.26 0 komentar

Cara Membuat widget Popular Post warna-warni di blog

<div class="separator" style="clear: both; text-align: center;">
</div>
<b>Widget - </b>Popular Post sebuah widget yang bertujuan untuk 
menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi 
widget popular post dengan sembilan macam warna yang berbeda-beda dari 
setiap posting.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="http://4.bp.blogspot.com/-yBG_UTwovWI/UEwLUovQEJI/AAAAAAAAEm8/EiUbhG9kkFw/s320/9+popular+posts.png" width="168" /></div>
<br />
1. Login ke blog kamu.<br />
2. Pilih Edit HTML > Cari kode <b><i>]]></b:skin></i></b><br />
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.<br />
<br />
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" readonly="" rows="100" style="height: 98px; width: 508px;" wrap="VIRTUAL">#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.

Catatan: Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.

5. Simpan dan lihat hasilnya.

Widget - Popular Post sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting. 1. Login ke blog kamu. 2. Pilih Edit HTML > Cari kode ]]> 3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2. …

Baca selengkapnya...

2 Komentar

jalupangna Label: widget 01.51 2 komentar

Cara Membuat widget kalender cantik di blog

<div style="text-align: justify;">
kamu bisa membuat arsip blog jadi lebih luar biasa yaitu sebuah penemuan terbaru <a href="http://sijalupangna.blogspot.com/"><span style="color: blue;"><b>arsip blog berbentuk kalender</b></span></a>,
 kamu bisa meletakan widget ini pada bagian sidebar. Dengan tampilan 
kalender arsip yang sudah dimodifikasi dan script yang tidak rumit, 
membuat widget ini mudah untuk dibuat.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk membuatnya kamu harus hati-hati dan ikuti semua langkah-langkah 
yang akan saya berikan, pastikan sama. Sebelum itu saya dapatkan widget 
ini dari <a href="http://www.mybloggertricks.com/" target="_blank">MBT</a>. Dan berikut cara membuat kalender arsip untuk blog.</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-xlOLPvNyVww/UIFY31SEkhI/AAAAAAAAHEE/Wglrxr2yp-Q/s1600/Arsip+Blazer+Blog+LIGHT+THEME+Blazer+Blog.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-xlOLPvNyVww/UIFY31SEkhI/AAAAAAAAHEE/Wglrxr2yp-Q/s1600/Arsip+Blazer+Blog+LIGHT+THEME+Blazer+Blog.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"></td></tr>
</tbody></table>
1. Login ke blog kamu.<br />
2. Pilih Tata Letak > Add Gadget > Pilih Arsip Blog<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="76" src="http://3.bp.blogspot.com/-I1QVdo-hRPE/UIFS3-CSCTI/AAAAAAAAHCQ/YGFLLCuHIn4/s320/Arsip+Blog.jpg" width="320" /> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
3. Perhatikan pilihan gambar di bawah ini, pastikan kamu mengaturnya percis kaya gambar di bawah ini ok.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-5hzeBPXtATU/UIFULfNiTBI/AAAAAAAAHCg/314GUNFXBeY/s1600/Arsip+Blog+Settings.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="http://4.bp.blogspot.com/-5hzeBPXtATU/UIFULfNiTBI/AAAAAAAAHCg/314GUNFXBeY/s320/Arsip+Blog+Settings.jpg" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Klik Simpan.</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
5. Sekarang mari kita maju kelangkah selanjutnya:</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
Pilih Template > Backup (Download Lengkap) dulu template kamu > Edit HTML > cari kode:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" readonly="" rows="100" style="height: 66px; width: 405px;" wrap="VIRTUAL"><b:widget id='BlogArchive1' locked='false' title='<b>Arsip Blog</b>' type='BlogArchive'/>

6. Setelah ketemu, ganti kode nomor 5 dengan kode di bawah ini:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2>
<data:title/></h2>
</b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
</div>
<b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
<li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
</b:loop>
  </ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody>
<tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'>
<tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr>
</table>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script  type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

7. Langkah selanjutnya cari kode </head> dan copy kode di bawah ini tepat di atas kode </head>

<!-- Blogger Archive Calendar by  blazerracing.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "http://mybloggertricks.googlecode.com/files/loading-trans.gif.png";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "Lihat Arsip";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
   document.getElementById('calLoadingStatus').style.display = 'block';
   document.getElementById('calendarDisplay').innerHTML = '';
  }
function closeStatus(){
   document.getElementById('calLoadingStatus').style.display = 'none';
  }
function bcLoadStatus(){
   cls = document.getElementById('calLoadingStatus');
   img = document.createElement('img');
   img.src = bcLoadingImage;
   img.style.verticalAlign = 'middle';
   cls.appendChild(img);
   txt = document.createTextNode(bcLoadingMessage);
   cls.appendChild(txt);
  }
function callArchive(mth,yr,nav){
// Check for Leap Years
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
   calMonth = mth;
   calYear = yr;
   if(mth.charAt(0) == 0){
      calMonth = mth.substring(1);
      }
   callmth = mth;
   bcNavAll = document.getElementById('bcFootAll');
   bcNavPrev = document.getElementById('bcFootPrev');
   bcNavNext = document.getElementById('bcFootNext');
   bcSelect = document.getElementById('bcSelection');
   a = document.createElement('a');
   at = document.createTextNode(bcArchiveNavText);
   a.href = bcNav[nav];
   a.appendChild(at);
   bcNavAll.innerHTML = '';
   bcNavAll.appendChild(a);
   bcNavPrev.innerHTML = '';
   bcNavNext.innerHTML = '';
   if(nav <  bcNav.length -1){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavPrev;
      bcp = parseInt(nav,10) + 1;
      a.href = bcNav[bcp];
      a.title = 'Previous Archive';
      prevSplit = bcList[bcp].split(',');
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
      bcNavPrev.appendChild(a);
      }
   if(nav > 0){
      a = document.createElement('a');
      a.innerHTML = bcArchiveNavNext;
      bcn = parseInt(nav,10) - 1;
      a.href = bcNav[bcn];
      a.title = 'Next Archive';
      nextSplit = bcList[bcn].split(',');
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
      bcNavNext.appendChild(a);
     }
   script = document.createElement('script');
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
   document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
      fill[2] = '29';
   }
  else {
      fill[2] = '28';
   }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      for (var j = 0; j < entry.link.length; ++j) {
       if (entry.link[j].rel == "alternate") {
       var link = entry.link[j].href;
       }
      }
      var title = entry.title.$t;
      var author = entry.author[0].name.$t;
      var date = entry.published.$t;
      var summary = entry.summary.$t;
      isPublished = date.split('T')[0].split('-')[2];
      if(isPublished.charAt(0) == '0'){
         isPublished = isPublished.substring(1);
         }
      fillDate.push(isPublished);
      if (fillTitles[isPublished]){
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
          }
      else {
          fillTitles[isPublished] = title;
          }
      li = document.createElement('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      ul.appendChild(li);
      }
   calDis.appendChild(ul);
   var val1 = parseInt(calDay, 10)
   var valxx = parseInt(calMonth, 10);
   var val2 = valxx - 1;
   var val3 = parseInt(calYear, 10);
   var firstCalDay = new Date(val3,val2,1);
   var val0 = firstCalDay.getDay();
   startIndex = val0 + 1;
  var dayCount = 1;
  for (x =1; x < 38; x++){
      var cell = document.getElementById('cell'+x);
      if( x < startIndex){
          cell.innerHTML = ' ';
          cell.className = 'firstCell';
         }
      if( x >= startIndex){
          cell.innerHTML = dayCount;
          cell.className = 'filledCell';
          for(p = 0; p < fillDate.length; p++){
              if(dayCount == fillDate[p]){
                  if(fillDate[p].length == 1){
                     fillURL = '0'+fillDate[p];
                     }
                  else {
                     fillURL = fillDate[p];
                     }
                  cell.className = 'highlightCell';
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
                 }
              }
          if( dayCount > fill[valxx]){
             cell.innerHTML = ' ';
             cell.className = 'emptyCell';
             }
          dayCount++;
         }
      }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
    if(visTotal >35){
        document.getElementById('lastRow').style.display = '';
       }
  }
function initCal(){
   document.getElementById('blogger_calendar').style.display = 'block';
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none';
   calHead = document.getElementById('bcHead');
   tr = document.createElement('tr');
   for(t = 0; t < 7; t++){
       th = document.createElement('th');
       th.abbr = headDays[t];
       scope = 'col';
       th.title = headDays[t];
       th.innerHTML = headInitial[t];
       tr.appendChild(th);
      }
   calHead.appendChild(tr);
  for (x = 0; x <bcInit.length;x++){
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
     var stripMonth = bcInit[x].href.split('_')[1];
     bcList.push(stripMonth + ','+ stripYear + ',' + x);
     bcNav.push(bcInit[x].href);
     }
  var sel = document.createElement('select');
  sel.id = 'bcSelection';
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0;
  for (r = 0; r <bcList.length; r++){
       var selText = bcInit[r].innerHTML;
       var selCount = bcCount[r].innerHTML.split('> (')[1];
       var selValue = bcList[r];
       sel.options[q] = new Option(selText + ' ('+selCount,selValue);
       q++
       }                 
   document.getElementById('bcaption').appendChild(sel);
   var m = bcList[0].split(',')[0];
   var y = bcList[0].split(',')[1];
   callArchive(m,y,'0');
}
function timezoneSet(root){
   var feed = root.feed;
   var updated = feed.updated.$t;
   var id = feed.id.$t;
   bcBlogId = id.split('blog-')[1];
   upLength = updated.length;
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
   else {timeOffset = updated.substring(upLength-6,upLength);}
   timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar by blazerracing.blogspot.com  -->

8. Sekarang untuk memodifikasi tampilan arsip kalendernya, pilih salah satu dari 2 kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

GAYA 1

/* Start of Post Navigator by BlazerBlog (LIGHT Theme) ------ */
#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}
/* The calendar Table */
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}
/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {  background:#fff;}
td.filledCell:hover {  background:#dddddd;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
/* Table Footer Navigation */
table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#0080ff}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
/* End of Post Navigator by BlazerBlog (LIGHT Theme) ------ */

GAYA 2

/* Start of Post Navigator by BlazerBlog (DARK Theme) ------ */

#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}
/* The calendar Table */
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:underline;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#000000;border:1px solid #666666}
/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#F5F202}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
/* End of Post Navigator by BlazerBlog (DARK Theme) ------ */

9. Klik dulu pratinjau lalu simpan.

Semoga bermanfa'at.

Sumber : Blazer blog

kamu bisa membuat arsip blog jadi lebih luar biasa yaitu sebuah penemuan terbaru arsip blog berbentuk kalender, kamu bisa meletakan widget ini pada bagian sidebar. Dengan tampilan kalender arsip yang sudah dimodifikasi dan script yang tidak rumit, membuat widget ini mudah untuk dibuat. Untuk membuatnya kamu harus hati-hati dan ikuti semua langk…

Baca selengkapnya...

0 Komentar

jalupangna Label: widget 01.31 0 komentar

Cara membuat widget cantik untuk mengetahui jumlah pengunjung yang online

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPk0i4LtBZpg1GNEgAz4YTnGnD8QBGyMFx61KMoUsb7FzsmK5FSPzggCVp9a9ByfbtuWtY03AUlzup_TRdnC1LEOxr633IMNHPyMr0o1fm9jNMXkDR4u_HgAAJoYCArscsnq2O4tZUBLyi/s1600/map.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPk0i4LtBZpg1GNEgAz4YTnGnD8QBGyMFx61KMoUsb7FzsmK5FSPzggCVp9a9ByfbtuWtY03AUlzup_TRdnC1LEOxr633IMNHPyMr0o1fm9jNMXkDR4u_HgAAJoYCArscsnq2O4tZUBLyi/s1600/map.jpg" /></a></div>
<br />
<a href="http://sijalupangna.blogspot.com/">Postingan</a> kali ini hanya untuk mengetahui statistik pengunjung online dari blog 
sobat! sobat pemilik blog terkadang penasaran berapa pengunjung yang 
sedang membaca blog sobat. dengan widget yang kita pasang ini sobat cb 
bisa dengan mudah mengetahui berapa banyak user yang sedang membaca blog
 sobat<br />
<br />
ada banyak web penyedia fasilitas ini, kali ini CB menngunakan fasilitas yang di berikan <a href="http://mapmyuser.com/">mapmyuser</a><br />
ok langsung aja ne sob ke cara membuatnya:<br />
1.untuk mendapatkan scriptnya silahkan buka situs <a href="http://mapmyuser.com/">mapmyuser</a><br />
2.pilih posisi widget yang sobat inginkan<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gchIEv2ks9VD92OuHIuEUY0xyUDVGu_oNnP2YiWLKWAKxwK2UONyZIRV3gLcDMPMxTA5gQaOFhPKK2h4g1CvUv5N9fOwMFPVPX2Hd5b5GpQTmYJON2XQ5Jsl4dKqt3kl19z7j4Rc5F7b/s1600/map2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gchIEv2ks9VD92OuHIuEUY0xyUDVGu_oNnP2YiWLKWAKxwK2UONyZIRV3gLcDMPMxTA5gQaOFhPKK2h4g1CvUv5N9fOwMFPVPX2Hd5b5GpQTmYJON2XQ5Jsl4dKqt3kl19z7j4Rc5F7b/s1600/map2.jpg" /></a></div>
<br />
<br />
3.copy script yang di berikan untuk sobat pasang di script sobat<br />
<br />
<span style="color: blue;">cara memasang di blog:</span><br />
<br />
1.login ke blog sobat <br />
2.Tata letak>tambah Widget >HTML/JavaScript<br />
3.masukkan script yang telah sobat dapatkan<br />
4.save template<br />
<br />
Di bawah ini adalah contoh script yang  bisa sobat gunakan jika sobat bingung :)<br />
<br />
Langsung aja copy script dibawah ini sesuai dengan posisi yang sobat inginkan<br />
terimakasih :)<br />
<br />
bawah tengah:<br />
<br />
<textarea class="GReterea" cols="60" row="6" style="height: 74px; width: 459px;"><script src="http://www.mapmyuser.com/mapmyuser_widget.js" type="text/javascript"></script><script type="text/javascript"> mapmyuser_widget({location:"bottomcenter",Bg:"990500",Fg:"FFFFFF"})</script><noscript><a href="http://www.mapmyuser.com/"><img src="http://www.mapmyuser.com/noimg.gif" alt="Realtime blog tracking" border="0" />Realtime blog tracking</a></noscript>

bawah kanan:

bawah kiri:

kanan bawah:

kanan tengah:

kanan atas:

kiri bawah:

kiri tengah:

kiri atas:

Selamat mencoba, semoga bermanfa'at.

Postingan kali ini hanya untuk mengetahui statistik pengunjung online dari blog sobat! sobat pemilik blog terkadang penasaran berapa pengunjung yang sedang membaca blog sobat. dengan widget yang kita pasang ini sobat cb bisa dengan mudah mengetahui berapa banyak user yang sedang membaca blog sobat ada banyak web penyedia fasilitas ini, kali in…

Baca selengkapnya...

16 Komentar

jalupangna Label: widget 00.31 16 komentar