.blazerboxlike {border: 3px solid #008E00; padding:6px 5px 6px 5px;Simpan Template. Kembali kemenu awal Rancangan > Add Gadget > HTML/JavaScript. Copy kode di bawah ini. Kode yang berwarna orange adalah lebar widgetnya harus sama dengan lebar Facebook Like box nya.
font: 11px/1.4em Arial, sans-serif;width:292px;background:#ccc;background-image: -webkit-linear-gradient(top, #CCC,#FFF, #FFF);
background-image: -moz-linear-gradient(top, #FFB200,#FFF, #FFF);
background-image: -ms-linear-gradient(top, #FFB200,#FFF, #FFF);
background-image: -o-linear-gradient(top, #FFB200,#FFF, #FFF);}
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
.blazerblog {border: 1px solid #008E00; padding:6px 5px 6px 5px;
font: 11px/1.4em Arial, sans-serif;background:#ccc; color:#ff0000;font-size:20px}
<div class="blazerboxlike left">Kode yang berwarna biru adalah kode bagian facebook like box nya. Kamu ganti kode yang berwarna merah dengan username facebook fan page kamu.
<div class="blazerblog">
Like Blazer Blog Di Facebook</div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FVICKYBLOG&width=292&connections=10&stream=false&header=true&height=280" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:280px;" allowTransparency="true"></iframe>
<table width="100%" border="0"style="margin-top:5px;background:#ff6600">
<tr>
<td width="35%">
Folow Us On :
</td>
<td width="10%"><img src="https://lh3.googleusercontent.com/-CG_YzZL85uQ/T-kXatzTqFI/AAAAAAAADoc/jxCeEWxBeVU/s32/Twitter-icon.png" width="32" height="32" /></td>
<td><a href="twitter.com/vicky_blog">@vicky_blog</a></td>
</tr>
</table>
</div>
<style>
/* Div Wrapper */
#menuBar{
/* Hide text that goes beyond
the bottom of the wrapper */
overflow:hidden;
/* Give wrapper background image */
width:503px;
height:102px;
background: transparent url(https://lh5.googleusercontent.com/-35weoKqLCtI/UGLffqVYtiI/AAAAAAAAFnU/UBy-L4-5kuM/s503/bar.jpg) no-repeat scroll left top;
/* Center menu on page and give it a border */
margin:0 auto;
border:10px solid #111;
}
#menuBar ul{
/* Center menu inside wrapper */
width:380px;
margin:0 auto;
/* Get rid of bullets */
list-style-type: none;
}
#menuBar ul li{
/* Make menu horizontal */
float:left;
/* Add spacing between menu items */
padding-right:40px;
}
#menuBar a{
/* Give each menu item a background image */
width:55px;
height:102px;
display:block;
background: transparent url(https://lh5.googleusercontent.com/-YQA8S8-VJGo/UGLfktfY-UI/AAAAAAAAFnc/kslfGZTu63s/s503/logos.jpg) no-repeat scroll left top;
/* Push text down below bottom of wrapper*/
padding-top:100px;
/* Beautify Text*/
color:#ddd;
font-family: Arial, "MS Trebuchet", sans-serif;
text-decoration: none;
font-size:10pt;
font-weight:bold;
outline:none;
}
#menuBar a:hover{
/* change background image for rollover state */
background-image:url(https://lh6.googleusercontent.com/-J3e-zxNABXQ/UGLfpr_RZkI/AAAAAAAAFnk/4DORq-4EOHw/s503/logos-over.jpg);
}
/* Position each background image accordingly
to display icons */
#menuBar a#Home{
background-position:-67px top;
}
#menuBar a#About{
background-position:-166px top;
}
#menuBar a#Gallery{
background-position:-266px top;
}
#menuBar a#Contact{
background-position:-373px top;
}
</style>
<div id="menuBar">
<ul>
<li><a href="ADD URL BLOG KAMU" id="Home">Home</a></li>
<li><a href="ADD URL" id="About">About</a></li>
<li><a href="ADD URL" id="Gallery">Gallery</a></li>
<li><a href="ADD URL" id="Contact">Contact</a></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("a").mouseover(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"78px"}, 100);
}).mouseout(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"100px"}, 100);
});
});
</script>
<div id='header-wrapper'>Untuk mempermudah mencari nya cukup cari kode <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='vicky_blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
#mbt_bar{6. Selanjutnya cari kode </head>, setelah ketemu letakan kode di bawah ini tepat di atas kode </head>
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiDzi6vN1KVAuBKZMbs_v7N1bImmtQ3IPHSftUVuVE3zhkjYhZ7obeCmQ9mUVuT9oLSz1tplHylFSP8wIBAFHxfqeDR2VfyPZuaa18eaCZpjrHfTjB-imz6AbQPKijpPW_VT5_RVcEZN0/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}
<script type='text/javascript'>7. Terakhir cari kode <body> setelah ketemu letakan kode di bawah ini tepat di bawah kode <body>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>
<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVliTvm9jKdxnhbtpAeS4Nmv7wodKdsP1mGbX4g6mAvdSJFxyl0p_suZ6PVsp5rNayEyIsE14JbdpU4cM1btjgnDa2FlBVXVEvgRuaFIqQg1UIkP_C_zZCP2ScAhMPFff80XgCS1R0PY/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fvicky-blog&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://vickyblog26.blogspot.com/' size='medium'/> </div> </div>Ganti kode yang berwarna biru dengan Username Facebook fan page anda.
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>Semoga bermanfaat ..
Sinopsis Boruto adalah putra atau anak dari Uzumaki Naruto, sang Hokage Ketujuh yang begitu dihormati karena jasanya dalam menyela...
Vicky Blog Copyright © 2011 - |- Template created by O Pregador - |- Powered by Blogger Templates
