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 li...

Baca selengkapnya...

31 Komentar

jalupangna Label: widget 02.13 31 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 da...

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 po...

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 widge...

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 pe...

Baca selengkapnya...

16 Komentar

jalupangna Label: widget 00.31 16 komentar