Cara membuat navbar cantik secantik miyabi maria ozawa

Gunanya navbar ini intuk share misalkan berlangganan artikel via email atau bisa juga share tentang link kesukaan
Untuk yang tertarik ingin memasangnya yuk kita ikuti langkah langkah berikut ini
1.Login ke akun blogger dashboard
2.Klik layout(tata letak)
3.Edit HTML centang expand template widget
4.Cari kode yang seperti ini ]]></b:skin>
5.Copy paste kode dibawah ini dan letakan pas di atas kode tadi

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzFhS70SXekr6nqrIIC_-5Wp3qqj408qG_NORNALbOAn7pLHe3VPmxny3fCkxLYs3OV3m1uU1gpszfnylatiF7pWavSrC46jGaWvKmRUBlbdSzdiC04TG13bxgu1vy-hZ9xGkSMGeVrE/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

6.Cari kode yang seperti ini </head>
7.Copy paste kode dibawah ini dan letakan tepat sibawah kode tadi

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

8.Cari kode yang seperti ini </body>
9.Copy paste kode dibawah ini dan letakan pas tepat dibawah kode yang tadi

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://masih-berharap.blogspot.com' target='_blank'>Blogger Bandung Nu Aing Aing Pisan Euy</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;masih-berharap.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6EGGLMo2nZ5hNXT7U4nF09iUlrW3l9aG9fckxB-WAjoCseUm4wtl3LFqbaVk_YweiGSQvw4a-CffvHH8gn5tzPkSuaM8aw0yJsIHzPhoxGAOiebS4LO2zYE-xqsHHV209iaH9DQoluI/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Save template beres dech.. untuk melihat demonya klik Disini click here
Catatan tulisan yang berwarna biru silahkan sobat ganti dengan apa yang di inginkan

Read More

Sekarang jamannya read more otomatis

Walaupun sudah banyak yang posting tentang read more otomatis tapi nggak ada salahnya saya posting lagi

Ini hanya untuk teman yang belum mengetahui bagaimana membuat read more otomatis di blogger
Dengan menggunakan read more otomatis blog kelihatan lebih rapi dan menawan
Seperti biasa ikuti langkah langkah berikut ini
1.Login ke akun blogger dashboard
2.Klik layout(tata letak)
3.Edit HTML centang expand template widget
4.Cari kode yang seperti ini </head>
5.Copy paste kode dibawah ini dan letakan pas di atas kode tadi

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}




//]]>
</script>

6.Cari kode yang seperti ini <data:post.body/> hapus kode ini dan ganti dengan kode yang dibawah ini

<b:if cond='data:blog.pageType != "item"'>


<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>


</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Save template beres dech

Read More