HOSTING MURAH 2014

Komentar Blogger Default berisi Reply Plus Iklan

Pada umumnya Komentar pada Blogspot bersifat default [sebelum adanya Thread comment] yang artinya tidak ada Reply atau Balasan Komentar, :q; itulah yang akan saya bahas sekarang dan khusus untuk kawan Blogger yang masih mempergunakan Komentar Default agar bisa menjawab atau Reply Komentar yang masuk Plus Penempatan Iklan diatas atau disamping Komentar :w;

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Beri tanda Expand Template Widget
Sebaiknya Simpan Template kawan dulu untuk jaga-jaga kalau ada kesalahan
Cari bagian #comment yang biasanya terletak diatas ]]></b:skin>
Hapus semuanya dan ganti dengan script berikut

h2.date-header {padding: 0 0 2px 5px;margin-top: -10px;margin-bottom: 0;color: #006400;font-size:11px}
.post {color:#333;font: normal 12px Cherry Cream Soda, Arial, Tahoma, Verdana;margin: 0 auto 0;padding: 5px 10px;text-align:justify;background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000');background:-moz-radial-gradient(left, #FFFFFF, #000000);background:-webkit-gradient(linear, left top, right top, from(#FFFFFF), to( #000000)) repeat-x top center;border: 1px solid #FFF;}
.post-body{overflow:hidden; line-height:16px;font: normal 12px Cherry Cream Soda; background: #FFF;border: 1px solid #ccc;border-left: 3px solid #999;border-top: 3px solid #999;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px; padding:10px 10px 0 10px; }
.post h2 {margin: 5px 0 10px;padding: 5px;color: #FF0;font: normal 120% Tekton Pro, Arial, Tahoma, Verdana;border-bottom: 1px dotted #333;background: -moz-linear-gradient(top,#000,#FFF);background:-webkit-gradient(linear, left top, right bottom, from(#000),to(#FFF)) ;}
.post h2 a, .post h2 a:visited {color: #FF0;margin: 5px 0 10px;padding: 5px 1px 2px 1px;text-align:left;font: normal 120% Tekton Pro, Arial, Tahoma, Verdana;}
.post h2 a:hover {color: #FFF;text-shadow:1px 1px 1px #F00;text-decoration:none;margin:5px 0 10px;padding: 5px 1px 2px 1px;
text-align:left;font: bold 120% Tekton Pro, Arial, Tahoma, Verdana;}
.comment-link{color:#122B15;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pf-wmWd2AWExeimr1V02ck189OY90L4bXfng2rcLzlNsQG1nM3jPL9oU1QIRuWftLb53Me1mjGWx23A3TZOfE53CF2vXjRp-UsjnM7WXrXt5-lmWZvWIFqTCje-eJTUf0HCYVZGoOvuO/s1600/CLIPBOARD.png) no-repeat;width:60px;height:60px;float: left;margin: 0 5px 0 0;padding:15px 5px 10px 1px;font-size:18px;text-align: center;text-shadow-hover: 2px 2px 2px #F00;}
.post img {padding: 10px;}

Selanjutnya cari <b:includable id='comments' var='post'> Sampai </b:includable> atau selengkapnya kurang lebih sebagai berikut :

<b:includable id='comments' var='post'>

................ Bla - bla - bla ...............................................................................................

<b:if cond='data:post.allowComments'>

</b:if>

</p>

</b:if>

<b:if cond='data:showCmtPopup'>

</iframe>

</div>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</b:includable> .............................. sampai pada disini ................................................

Hapus atau ganti dengan Script berikut

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> : “<data:post.title/>”
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<table><tr><td valign='top'>
<div style='width:515px;height:auto; text-align:left; border:0px solid #243B0B; padding-right:5px;'>
<br/>
<div style='width:480px;height:60px; background:#0FF;text-align:center; border:1px solid #243B0B; padding:15px;font-size:30px;font-family:Tekton Pro;'><br/><blink><b>MAU IKLAN ANDA TAMPIL DISINI</b></blink></div> </div><br/>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<ol class='commentlist-destacado'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'><b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
<b:else/>
<ol class='commentlist'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'> <b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/></p>
<span class='interaction-iframe-guide'/>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=2755282981621845502&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><span style='color: rgb(255, 0, 0); font-size:14px; font-weight:normal;float:left;padding-right:280px;'><blink>» Balas </blink></span></a>
<data:comment.timestamp/> </a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
</b:if>
</b:loop>
<h4 id='comment-post-message'><data:postCommentMsg/></h4><p><data:blogCommentMessage/></p><data:blogTeamBlogMessage/><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</td><td valign='top'>
<div style='width:200px;height:auto;padding:5px; float:right;text-align:center;margin-left:20px;border:1px solid #243B0B; background:transparent;'>
<img border='0' height='600' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1Ul8Wme-JdSDgQ_-x-k6MgTquRq043Iwla2zGv6VChDeOGWSo71_2IZzGLXGL20qECygmnYqtWJdk8FMvC-q_ol7dFB5PnAaRbxlprYdvoJ2LyRZnMAYPqJE6kggB6LY0tB5nQsSkWSd/s640/Banner.png' width='200'/>br/></div></td></tr></table>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Silahkan Ganti teks yang berwarna Biru dengan script Iklan Kawan atau menghilangkannya
Teks yang saya beri warna background Hijau silahkan kawan menyesesuaikan dengan lebar Blog kawan
Ganti teks yang berwarna merah dengan Blog ID kawan
Teks yang berwarna Violet, seandainya sudah berisi pada Template kawan ada 4[empat] silahkan hapus yang terakhir :x;
Jangan lupa simpan Template kawan

Cara Membuat Kumpulan Komentar berisi Avatar

Unknown | 15:55 | Komentar , tips trik , widget

Kawan masih ingat dengan postingan saya tentang Cara Membuat Kumpulan Komentar Bag-III yang sekarang ini sudah tak berfungsi lagi, :x; kemungkinan W2B yang punya sudah menghapus filenya atau memindahkan tempat menyimpannya yang menyebabkan menjadi macet, tapi kawan jangan kecewa karena sekarang saya akan berbagi dengan kawan Cara Membuat Kumpulan Komentar berisi Avatar, untuk Demonya kawan bisa lihat pada Kumpulan Komentar Blog saya ini

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Selanjutnya Pilih Tambah Gadget - HTML / JavaScript
Copas Kode berikut kedalamnya

<style type="text/css">
ul.bbc_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.bbc_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:1px solid #999;
}
.bbc_recent_comments li .avatarImage{
padding:3px;
background:#fefefe;-webkit-box-shadow:2px 2px 2px #999;-moz-box-shadow:2px 2px 2px #999;box-shadow:2px 2px 2px #999;
border:1px solid #999;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.bbc_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.bbc_recent_comments li span{
margin-top:4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments= 25,
showAvatar   = true,
avatarSize   = 40,
characters   = 150,
showMorelink = true,
moreLinktext = "More",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3U0InF4uKaNvR1nTNq32BkqJhxkY_6UEq15KS16TYKnLyGgl8nS70WRZdBUkWfIwwpOUlj_B9cmnh_kqeb3U3jIqGO6bYWVmQzmMmJuAf51zd0GJsaTYUrNz0-kvjbKLYBkCGRL4ogCop/s1600/avatar.png",
hideCredits     = false;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/bbc_recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://blogbego-creation.blogspot.com/feeds/comments/default?alt=json&callback=bbc_recent_comments&max-results=25"></script>

Silahkan ganti teks yang berwarna biru dengan URL / Link Avatar kawan
Silahkan ganti teks yang berwarna merah [URL / Link saya] dengan URL / Link Blog kawan
Simpan Blog kawan

Tambahkan Emoticon pada Blog

Unknown | 08:25 | animasi , Blog Bego , tips trik

Sekarang ini saya berbagi untuk kawan Blogger yang suka pernak pernik seperti emoticon pada Blog yang biasanya disisipkan dipostingan maupun pada Komentar :z; seperti pada Blog saya ini, bagaimana kawan suka, kalau kawan suka ikuti caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Copas Script berikut dibawah ]]></b:skin> atau diatas </body>

<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>

Untuk Template dengan Komentar Default / standar [Template yang belum beralih ke Thread] bisa ditampilkan pada posting dan Komentar, sedangkan Template kawan yang sudah beralih ke Thread Comment cuma bisa pada postingan saja
Cara pemanggilan atau penulisan :[Titik dua] Abjad/huruf kecil [a - z] ;[titik koma] tanpa spasi

:a ;

:b ;

:c ;

:d ;

:e ;

:f ;

:g ;

:h ;

:i ;

:j ;

:k ;

:l ;

:m ;

:n ;

:o ;

:p ;

:q ;

:r ;

:s ;

:t ;

:u ;

:v ;

:w ;

:x ;

:y ;

:z ;

[INGAT TANPA SPASI]

Khusus untuk Template yang sudah beralih ke Thread Comment, Copas Kode berikut diatas </body> sedangkan untuk pemanggilan / penulisannya sama seperti diatas

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/&feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed>");
theText = theText.replace(/:a;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");
theText = theText.replace(/:b;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");
theText = theText.replace(/:c;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");
theText = theText.replace(/:d;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");
theText = theText.replace(/:e;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");
theText = theText.replace(/:f;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");
theText = theText.replace(/:g;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");
theText = theText.replace(/:h;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");
theText = theText.replace(/:i;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");
theText = theText.replace(/:j;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");
theText = theText.replace(/:k;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");
theText = theText.replace(/:l;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");
theText = theText.replace(/:m;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");
theText = theText.replace(/:n;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");
theText = theText.replace(/:o;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");
theText = theText.replace(/:p;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");
theText = theText.replace(/:q;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");
theText = theText.replace(/:r;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");
theText = theText.replace(/:s;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");
theText = theText.replace(/:t;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");
theText = theText.replace(/:u;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");
theText = theText.replace(/:v;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");
theText = theText.replace(/:w;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");
theText = theText.replace(/:x;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETJqZuKFYclVzuVY-wheh5ebZEEnOCJtFKqbUbt_H1KUVqngvOUL4WSutY7iqHAc5GgxsGBoFwarqOe0sMZudqc3FEeQe7uL1ZQji8_i79Gsdxhy2RD-xaUsioyrNjVDnbWljlKO9zFg/s1600/buatD.gif'/>");
theText = theText.replace(/:y;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5c3kvq0CKSEehf8u-qUssSXaWeNTJtkIjKvAzQQcDOKcBBGoGYJfJ43FSaFpfnpu484mIkk9sd1vp42eGZqRM-5UcfGiqT2JunAPqXQnIo58GXDqTI_fNmI5Yhz3Rvi76Iyu4XSk2EM/s1600/joget.gif'/>");
theText = theText.replace(/:z;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_JR5p2fImYYjUAEWbvZxjmb7cidsHjINNS7JLG4n-ddSIAsLNMkZgX7Gu3v2GWgpWUzbjnfnrKijby3PLB4ijjsNtpuRr-m84m74oBR3VEksp5VY0S4QOh7MgcLlO5kC9RQG4ln5MzA/s1600/xKopi.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Jangan lupa simpan Template kawan

Blogger Template Kreasi BB.2 Gratis

Unknown | 15:30 | Blogger Template , Template

Blogger Template yang sekarang ini saya beri nama Kreasi BB.2 untuk kawan yang ingin mencobanya dipersilahkan karena saya bagikan secara cuma-cuma alias tetap Gratis, :w; karena gratis makanya saya minta pada kawan hanyalah kesadaran saja agar jangan menghilangkan Link yang mengarah ke Blog saya sebagai pencipta Template ini :y;

Cara Install Template

Download Template Kreasi BB.2 selanjutnya Ekstrak dulu di Komputer kawan
Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - pilih Cadangkan / Pulihkan
Simpan Template kawan dulu untuk jaga-jaga [Unduh Template Lengkap]
Pilih File Kreasi BB.2 yang sudah kawan ekstrak tadi - Unggah

Selanjutnya pilih Tata Letak untuk memindahkan Widget agar sesuai pada tempat yang kawan inginkan

Cara Setting Template Kreasi BB.2

Pilih kembali Template - Edit HTML - Lanjutkan
Cari Header, selengkapnya sebagai berikut :

#header {height: 70px;margin:0 auto 0;}

#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}

#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0r_JSf3iAZzOF_jzfqcomfVj2Nake6uY03zFmNldvmx3xnMlIIJ6IxLgTybC1O9LsJYEhT8yM1VvfqWSC3hWL1RgHMV6WDW6uQ_OdRDRj53hQfUTzPmnocycrtRD5YduoGuP0Vs6oGSM/s320/Kreasi+BB.2.png) no-repeat 0 0;}

#header .ad {width: 400px;float: right;padding: 15px 6px 0 0;}

Silahkan ganti teks yang berwarna merah dengan Link image [Judul Blog] kawan

Cari <div id='NavbarMenu'> selengkapnya sebagai berikut

<li><a href='http://belogbego.blogspot.com/'>BERANDA</a></li>

<li><a href='/search?max-results=500'>Daftar Isi</a></li>

<ul>

</ul></li>

<ul>

</ul></li>

<li><a href='#'>LAMAN</a>

<ul>

<li><a href='#'>LAMAN Page #A</a>

<ul>

</ul></li>

<li><a href='#'>LAMAN #B</a></li>

<li><a href='#'>LAMAN #C</a></li>

<li><a href='#'>LAMAN #D</a></li>

<li><a href='#'>LAMAN #E</a></li>

</ul></li>

<li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>

</ul>

</div>

Silahkan ganti sesuai dengan keinginan kawan, Seandainya pada Template kawan banyak menyimpan Script / HTML silahkan copas dan simpan disesuaikan agar tidak hilang

misalnya Blog Description, Keyword dan lain sebagainya

Jangan lupa simpan Template kawan

Cara Membuat Tab Menu pada Gadget

Unknown | 16:00 | Blog Bego , link , tutorial , widget

Melanjutkan Cara Membuat Tab Menu di Blog yang scriptnya disimpan pada Template :z; sekarang dengan cara lain yaitu langsung disimpan pada Widget yang bagi saya pribadi lebih gampang saat mau edit [setting] dibandingkan dengan yang sebelumnya :w;

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript
Copas Script berikut kedalamnya

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div style="width:300px; height:250px;" class="Pages">
<div class="Page">
<div class="Pad">
Tab 1 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 4 - SIMPAN DISINI FILE KAWAN
</div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Simpan Blog kawan :q;
Cara setting / Edit sama seperti sebelumnya

Cara Membuat Tab Menu di Blog

Unknown | 17:00 | Blog Bego , blogger , link , tutorial

Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, :y; Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog

Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template :z;

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template
Copas HTML berikut diatas ]]></b:skin>

div.TabView div.Tabs {height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}

Selanjutnya Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Simpan Template kawan
Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
Copas Script berikut kedalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Simpan Blog kawan dan lihat hasilnya

Sedikit penjelasan saya :

Lebar Tab adalah [width:73px;] sebanyak 4 tab ditambah border:8px [1+2+2+2+1], maka lebar keseluruhannya menjadi 300px;

HOSTING MURAH 2014

468x60 Ads

Komentar Blogger Default berisi Reply Plus Iklan

Cara Membuat Kumpulan Komentar berisi Avatar

Tambahkan Emoticon pada Blog

Blogger Template Kreasi BB.2 Gratis

Cara Membuat Tab Menu pada Gadget

Cara Membuat Tab Menu di Blog

Future Video

Blog Archive

Populer Post

Recent Post

Text

Comments

Followers

Ads