Seni Blogger Pemula
Tampilkan postingan dengan label widget. Tampilkan semua postingan
Tampilkan postingan dengan label widget. Tampilkan semua postingan
3 komentar

Menu Vertikal Dengan Icon/Gambar

Cara Membuat Widget Menu Vertikal Dengan Icon/Gambar -  Menu vertikal
atau pun menu horizontal memang tidak bisa di hindari dalam dunia
blogger. Terutama menu horizontal yang 90% template pasti ada menu
horizontal. Nah pada posting kali ini saya akan berbagi
tutorial cara membuat menu vertikal dengan gambar/icon di blogspot seperti gambar dibawah ini.



Langkah-langkah Membuat Menu Vertikal :

  1. Login terlebih dahulu
  2. Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
  3. Kemudian copy kode dibawah ini lalu pastekan di kotak yang disediakan. Lalu Simpan/Save.
<style>

.list {

background:none; no-repeat left center;

border-bottom:1px dotted #ccc;

line-height:1.2em;

padding:2px 2px 2px 20px;

}

</style>

<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">

<ul><table width="100%" border="0">

<tr>

<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="25" height="25" /></div></td>

<td width="97%"><li><a href="http://karaokebatak.blogspot.com">Beranda</a></li></td>

</tr>

<tr>

<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3eScLFxGfUk1vvwBqXpasiM1OjiI242xnDxp5YWuLkid2UokFzC1DCujARk2cdzs6GIfaB1e5vTXaSV8Ar7d5ji1gJ4ekElKI9FF7MYnaEpFvFmaGMH5CjQPReYVEGtP1u2BjKF0UHAfX/s1600/report_magnify.png" width="25" height="25" /></div></td>

<td width="97%"><li><a href="http://karaokebatak.blogspot.com/2012/04/daftar-isi.html">Daftar Isi</a></li></td>

</tr>

<tr>

<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="25" height="25" /></div></td>

<td width="97%"><li><a href="http://karaokebatak.blogspot.com/2012/05/kumpulan-icon-untuk-blog.html">Kumpulan Icon</a></li></td>

</tr>

<tr>

<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="25" height="25" /></div></td>

<td width="97%"><li><a href="http://karaokebatak.blogspot.com/search/label/widget">Widget Blog</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="25" height="25" /></div></td>

<td><li><a href="http://karaokebatak.blogspot.com/search/label/Tips%2FTrik%20Blog">Tips/Trick Blog</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="http://www.downtownstockton.org/images/icon_music.gif" width="25" height="25" /></div></td>

<td><li><a href="http://karaokebatak.blogspot.com">Download Lagu</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72Ux3Fol_ksSg-qFH1HxO9tam7qaeZsfcD4qH1jODWIiwBSL7ObYHtI4zssmTP1_TfJkGxL1dIwzKhfw9kUjRXNarMKkPMbWPC31Vzxz3s9GI3scK9KUumsmvSIecNOYKfY5y6ksr0Ipn/" width="18" height="18" /></div></td>

<td><li><a href="http://www.facebook.com/pages/Batak-musik/168226019959239">Facebook</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUcS6NBT9yFy1S2_RrIkF_f1JcAsHzaflLSWhqXfXQcFIWD6yI2y7H1tdK-o4CUyGabH19h4WIR1FpQW_QvtMJZeFp2Hk9b4qDP8BQS9ElqEf1UzjgXrebaoVnyl3ZiALUZXWrDYxc8A0/" width="25" height="25" /></div></td>

<td><li><a href="https://twitter.com/batakmusik">Twitter</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="http://www.tektrify.com/wp-content/themes/default/images/icon_feedburner_40x40.png" width="18" height="18" /></div></td>

<td><li><a href="http://feeds.feedburner.com/HalakBatakMarlagu">Feedburner</a></li></td>

</tr>

</table>
<span style="font-size: 80%">Widget by <a href="http://seniblogger.blogspot.com/2012/05/menu-vertikal-dengan-icongambar.html" target="_blank">jemz</a></span>
</ul>

</div>


Keterangan :

  • Ganti kode warna merah dengan URL icon sobat.
  • Ganti kode warna biru dengan URL Tujuan.
  • Ganti Kode Warna Orange  dengan nama menu.
  • Ganti kode warna ungu untuk mengganti warna background.
Untuk memperbanyak atau menambah jumlah menu, silahkan tambahkan kode dibawah ini diatas code </table>
<tr>

<td><div align="center"><img src="URL icon" width="25" height="25" /></div></td>

<td><li><a href="URL tujuan">Nama Menu</a></li></td>

</tr>


Selamat Mencoba Sobat....Semoga Berhasil.........
( Label: ) Read more

3 komentar  

Label:

0 komentar

Related Posts / Artikel Terkait Bergambar

Dipostingan kali ini saya akan menuliskan cara membuat related posts atau artikel terkait dengan gambar dan ringkasannya (with thumbnail and summary).


Related Posts yang saya maksud adalah seperti gambar diatas, atau lebih jelasnya lagi lihat Related posts atau artikel terkait dibawah postingan ini.
Sudah jelas? Baiklah langsung saja Langkah-langkahnya.

1. Login terlebih dahulu ke akun blogger anda.
2. Masuk ke "Rancangan - Edit HTML"
3. Cheklist "Expand Template Widget"
4. Cari kode </head>
5. Masukan (copy paste) kode dibawah ini tepat diatas kode </head> :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum li:hover {
background-color: #E6E6E6;
}
#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\'  I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Catatan :
  • var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
  • var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
  • var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
  • var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik

6. Cari kode <div class='post-footer-line post-footer-line-3'/> (direkomendasikan)  atau kode <data:post.body/> (alternatif)
7. letakkan kode dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-3'/> atau <data:post.body/> (sebagai alternatif jika kode <div class='post-footer-line post-footer-line-3'/> tidak ada) 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>

8. Ganti tulisan Related Posts  dengan tulisan yang kamu mau.
9. Selesai dan silakan simpan.

Semoga Cara Membuat Related Post atau Artikel Bergambar ini bermanfaat bagi anda. Horas..!!

Sumber : http://modification-blog.blogspot.com/2011/05/artikel-terkait-dengan-gambar-mini-dan.html
( Label: , ) Read more

0 komentar  

Label: ,

0 komentar

Pasang Buku Tamu Buka Tutup

Pasang buku tamu buka tutup disebelah kanan blog - Sebelumnya saya sudah pernah menjelaskan Cara Membuat Buku Tamu / Guestbook Otomatis di Blog , kali ini saya akan menjelaskan bagaimana cara membuat buku tamu buka tutup disamping kanan blog. tidak jauh beda dengan buku tamu otomatis, buku tamu yang satu ini dapat dibuka tutup dengan cara mengklik dan tidak otomatis terbuka/tertutup, lebih jelasnya lihatlah gambar dibawah ini. Tapi sebelumnya anda harus punya script kode buku tamu/ guest book terlebih dahulu, Anda bisa mendapatkannya/mendaftar chatbox disini.


Anda tertarik memasangnya ??
Silahkan ikuti langkah-langkah cara memasang buku tamu buka tutup berikut :

1. Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
2. Masukkan semua kode dibawah ini di kotak yang di sediakan.
    <style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNYIKYG2bB1VAERsW6BySvH-Ii9x5wUh5k-WTnHTEmess5giKBBUbOWTrZ3hlQf7kZBaI0Jm6m5f6sqRRncZzOsu84sYIQRPCZSn7KwmNXeA1Xzk_WOd7dW7Y4fqiAS7RfhtKvqL734lkR/s1600/buku+tamu.jpg') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#000000;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="280" height="268" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-772205" style="border:#000000 1px solid;" id="cboxmain5-772205"></iframe></div>
    <div><iframe frameborder="0" width="280" height="85" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-772205" style="border:#000000 1px solid;border-top:0px" id="cboxform5-772205"></iframe></div>
    </div>
    <!-- END CBOX -->

    <br/>
    Mau punya buku tamu seperti ini?<br/>
    Klik di
    <a href="http://karaokebatak.blogspot.com/2012/05/pasang-buku-tamu-buka-tutup.html">
    <b>sini</b>
    </a>

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [tutup]
    </a>
    </div>

    </div>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

    3. Ganti kode warna merah dengan kode buku tamu anda.
    4. kemudian save/simpan

    semoga cara memasang buku tamu buka tutup ini bermanfaat bagi anda. Horas..!!
    ( Label: , ) Read more

    0 komentar  

    Label: ,

    2 komentar

    Cara Membuat Share Button Like, Share dan Twitter di Sisi Blog atau Postingan

    Cara Membuat Share Button Like, Share dan Twitter Melayang di Sisi Kanan Blog/Postingan - Untuk meningkatkan pengunjung ke blog kita, kita perlu mengintegrasikan blog kita melalui media jejaring sosial populer seperti facebook dan twitter. (lihat gambar disamping)
    Pada postingan sebelumnya yaitu Cara Membuat Widget/Gadget Mashable Style Social Subscription yang juga widget/gadget share like dan twitter tapi tidak melayang, Nah pada tutorial kali ini, Putra batak mau berbagi sama sobat-sobat bagaimana membuat salah satu widget Share Button Like, Share dan Twitter Melayang di Sisi Kanan Blog/Postingan. Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, Digg, stumble Upon dan Google+ (G-plus) Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML. Langsung saja, berikut langkah-langkahnya :
    1. Langkah pertama masuk ke akun blogger > Dasbor  > klik design/rancangan > Tata Letak 
    2. Klik Tambah Gadget, di bagian sidebar.
    3. lalu pilih HTML/Javascript, kemudian masukkan kode di bawah ini:

    <!--Widget Share Button Melayang Start-->

    <style>

    #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

    0;z-index:10;}

    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

    .fb_share_count_top {width:48px !important;}

    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

    </style>
    <div id='pageshare' title="bagikan ke teman anda">
    <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
    <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
    <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

    <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://karaokebatak.blogspot.com" target="blank"><font color="blue">[Get Widget]<font></font></font></a></div></div>

    <!--Widget Share Button Melayang End-->

    5. Klik Save/Simpan. Lihat blog sobat.

    Untuk pengaturan lihat kode warna merahubah sesuai yang sobat inginkan :

    • angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan dan ditambahi jika ingin dinaikkan.
    • angka 10px adalah posisi dari tepi paling kanan blog.
    • sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.
    ( Label: , ) Read more

    2 komentar  

    Label: ,

    1 komentar

    Cara Membuat Widget/Gadget Mashable Style Social Subscription

    Cara Membuat Widget/Gadget Mashable Style Social Subscription. Mungkin banyak sobat-sobat blogger yang bertanya apa maksud dari judul yang membingungkan ini.  Yap, Widget Mashable Style Social Subscription adalah Widget keren buat Blogger/Blogspot dari Mashable.com dimana para pengunjung dapat berlangganan, berbagi dan menyarankan setiap postingan di blog kita melalui Facebook, Google Plus, Twitter, Email dan situs jejaring sosial lainnya. Gadget/Widget keren tsb seperti gambar dibawah ini :

    Jika sobat berminat membuat/memasang gadget ini di blog sobat, caranya gampang. Berikut langkah-langkah :

    1. Copy semua code dibawah ini :

    <style type="text/css">
    /*<!CDATA[*/
    #w2b-mashable{width:280px;margin:auto;padding:0;}
    .w2b-facebook {background:#cfd0ff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
    .w2b-gplusone {background-color: #ffd4d4;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
    .w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
    .w2b-twitter {background-color: #bff5ff;border: 1px solid #c7dbe2;border-top: 0;}
    .w2b-twitter a.twitter-follow-button {display: block;}
    .w2b-twitter iframe {margin: 9px 11px;}
    .w2b-emailbox {background-color: #a6a6a6;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
    .w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
    .w2b-emailbox input.emailu:focus {color: #333;}
    .w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
    .w2b-emailbox input.submitu:hover {text-decoration: none;}
    .w2bBlue{border:1px solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background: -moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8), color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8', endColorstr='#4082c4',GradientType=0 );}
    .w2bBlue:hover{background: #9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background: -webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc', endColorstr='#5087bf',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
    .w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
    /*]]>*/
    </style>
        <div id="w2b-mashable">
        <div class="w2b-facebook">
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBatak-musik%2F168226019959239&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:66px;" allowtransparency="true"></iframe>
        </div>
        <div class="w2b-gplusone">
            <script type="text/javascript">/*<![CDATA[*/
              (function() {
            var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
            po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
              })();/*]]>*/
            </script>
            <div class="g-plusone" data-size="medium" data-href="http://karaokebatak.blogspot.com/"></div>
            <span>Recommend on Google</span>
        </div>
        <div class="w2b-twitter">
            <a href="https://twitter.com/batakmusik" class="twitter-follow-button" data-show-count="true">Follow @batakmusik</a>
            <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
        </div>
        <div class="w2b-emailbox">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=halakbatakmarlagu', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
            <table width="100%">
                <tr>
                <td>
                    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
                </td>
                <td width="64px">
                    <input class="submitu w2bBlue" type="submit" value="Subscribe"/>
                </td>
                </tr>
            </table>
            <input name="uri" type="hidden" value="HalakBatakMarlagu"/>
            <input name="loc" type="hidden" value="en_US"/>
            </form>
        </div>
        <div class="w2b-moresubs">
            <a href="http://karaokebatak.blogspot.com/2012/04/cara-membuat-widgetgadget-mashable.html">Buat Seperti Ini Di Blog Anda</a>
        </div>
        </div>

    2. Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
    3. Masukkan/pastekan kode diatas pada kotak yang di sediakan.
    4. Klik Save/Simpan

    Keterangan :
    • "width:280px" sesuaikan lebarnya, ganti angka yang bewarna merah.
    • http%3A%2F%2Fwww.facebook.com%2Fpages%2FBatak-musik%2F168226019959239   ganti tulisan warna putih dengan URL facebook page sobat
    • Ganti code warna merah "http://karaokebatak.blogspot.com/" dengan URL blog sobat
    • Ganti code warna biru dengan alamat/URL twitter sobat
    • Ganti code warna kuning "halakbatakmarlagu" dengan feedburner milik sobat.
    Semoga Cara Membuat Widget/Gadget Mashable Style Social Subscription bermanfaat bagi anda.
    ( Label: , ) Read more

    1 komentar  

    Label: ,

    3 komentar

    Cara Membuat Buku Tamu / Guestbook Buka/Tutup Otomatis di Blog

    Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog -  Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide.
    Lihat Gambar Setelah dan sebelum disorot mouse

    Gambar 1. Tertutup

    Gambar 2. Terbuka

    Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat :
    <style type="text/css">
    #gb{
    position:fixed;
    top:20px;
    z-index:+1000;
    }* html #gb{position:relative;}

    .gbtab{
    height:150px;
    width:50px;
    float:left;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ4qHTkXv1G_bkGY3JOPIogHufNP88AYxFRlizKh8nzbhPqv78qLscLVgzPNnQXG5UmYHgip3_R21Zj7bWDaJasupPZt8XsDjk-9LYgj-VICowXBvu0mop_RPo7ZpzNnG6Ow3xG21cHK8/s1600/bukutamu.gif') no-repeat;
    }

    .gbcontent {
    float:left;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-radius-bottomleft:5px;
    -o-border-radius-bottomleft:5px;
    -khtml-border-radius-bottomleft:5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    background: #F2F2F2; url() no-repeat bottom;
    padding:10px;
    }

    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
    gb.opened = !gb.opened;
    }function moveGB(x0, xf){

    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
    }</script>

    <div id="gb">
    <div class="gbtab" onmouseover="showHideGB()"> </div>

    <div class="gbcontent">
    <center>

    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="280" height="268" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-772205" style="border:#000000 1px solid;" id="cboxmain5-772205"></iframe></div>
    <div><iframe frameborder="0" width="280" height="85" src="http://www5.cbox.ws/box/?boxid=772205&amp;boxtag=cecpjf&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-772205" style="border:#000000 1px solid;border-top:0px" id="cboxform5-772205"></iframe></div>
    </div>
    <!-- END CBOX -->

    <br />
    <div style="text-align:center">
    <span style="float:right; color:#000000;">Widget by<a target="_blank" href="http://karaokebatak.blogspot.com/2012/04/cara-membuat-buku-tamu-guestbook.html"> KaraokeBatak </a></span>
    </div>
    </center></div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>

    </div>

    Cara Memasang :
    1. Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
    2. Masukkan kodenya di kotak yang di sediakan.
    3. Klik Save 
    Note :
    Ganti kode warna merahdengan kode buku tamu/GuestBook/Chatbox milik sobat. Jika sobat belum punya buku tamu silahkan buat daftar terlebih dahulu di chatbox ( seperti winget chatbox sebelah kanan blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

    ( Label: , ) Read more

    3 komentar  

    Label: ,

    0 komentar

    Cara Pasang ShoutCamp / Buku Tamu di Blog

    Cara Pasang ShoutCamp di Blog - Sama seperti Fibox, ShuotChamp juga layanan chat bos/ buku tamu gratis. bagaimana cara memasang shoutcamp di blog ? ikuti terus tutorial nya.

    1. Terlebih dahulu sobat harus memiliki akun shuotcamp. bagi yang belum punya, silahkan daftar di sini!

    2. Setelah masuk ke situs Shuotcamp, klik tulisan register atau cari dan klik Get it now seperti gambar berikut.



    3. Isikan data - data yang diminta pada formulir register nya. masukkan username twitter sebagai opsional. tidak di isi pun tak apa - apa. kemudian klik register.


    4. Klik pada tulisan seperti gambar berikut.


    5. Masukan nama shuotcamp pada ShuotCamp Title dan masukkan Url website sobat pada Website/Url, kemudian klik next.


    6. Selanjutnya sobat akan di minta untuk mengupload foto yang nantinya akan di jadikan avatar sobat.



    7. Klik Browse dan tekan Upload seperti yang terlihat pada gambar berikut.

    8. Sobat akan di minta untuk men Crop atau memotong foto sesuai keinginan sobat. Klik pada tulisan Crop Image and Save As Avatar.

    9. Setelah itu, sobat akan melihat tampilan berikut. Klik Install.


     

    10. Ambil kode yang di beri dan pastekan di HTML/Javascript sobat. Jika ada sobat yang belum tahu cara meletakkannya di blog sobat, ikut langkah - langkah berikut.
    • Log in ke akun blog sobat
    • Klik Rancangan --> Elemen Laman --> Tambah Gadget --> pilih HTML/Javascript.
    • Masukkan kode ShuotCamp ke dalam kotak yang di sediakan dan beri nama sesuai keinginan.
    • Klik Simpan atau Save
    11. Untuk mengatur tampilan Shuotcamp klik manage area kemudian Klik Edit Layout yang berada di sebelah kiri Menu twitter setting.





    12. Atur tampilan sesuka hati sobat. kemudian ambil kode nya..



    Sekian dulu tutorial membuat/memasang shoutcamp di blog, semoga membantu sobat blogger.
    ( Label: , ) Read more

    0 komentar  

    Label: ,

    0 komentar

    Cara Memasang Fibox Chat / Buku Tamu di Blog

    Cara Memasang Fibox Chat (buku tamu) di Blog.  Apa itu fibox? Fibox adalah salah satu layanan buku tamu gratis (chat box gratis) dimana para pengunjung blog kita dapat berkomunikasi layaknya chating di facebook, YM, dsb. Bagi anda yang tertarik memasang fixbox ini di blog, silahkan ikuti langkah - langkah berikut :

    1. Buka situs www.fibox.ws, kemudian klik Sign Up 






    2. Masukkan alamat email dan password sobat kemudian centang  kotak kecil pada term of service kemudian klik continue






    3. Akan terlihat tampilan berikut. kemudian buka email yang sobat daftarkan tadi .






    4. Buka email dan klik pada link yang diberi seperti yang tampil di bawah ini.






    5. Akan muncul tampilan berikut yang menyatakan bahwa akun sobat telah aktif.
        kemudian log in dengan email dan password sobat tadi.






    6. Buat nama Shuotbox kesukaan sobat, Klik Continue dan sobat akan otomatis di arahkan ke dashboard baru sobat.





    7. Pada dashboard, atur tampilan shuotbox sesuka hati sobat.





    8. Copy code yang diberi dan paste ke dalam  HTML/javascript blog sobat.
    Dengan cara :
    Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript --> masukkan kode di atas kedalam kotak -->

    9. Simpan dan lihat hasilnya.:)






    ( Label: , ) Read more

    0 komentar  

    Label: ,

    Best viewed on firefox 5+
    Langganan: Postingan (Atom)

    Entri Populer

    Daftar Isi

    Top RSS Home