Navigation Bar 1

Hai Readers ~ Tutor kali ini banyak banget yang req, di email, ask.fm  , cbox, dm twitter, wa, dll deh. Nah, kalau kalian belum tau mana navigation bar itu, itu loh yang sebelah kiri, ada tulisan "1,2,3,4" bagus kan ? ahaha :D 

--> Read more

Blogskins : 

1. Dashboard -- Template

2. Cari kode sidebar kamu, biasanya ctrl f  terus cari "sidebar"

3. Copy code dibawah ini

 </style>

<div id="adv2" class="adv2">

<center><style>

.babo{background:url(BACKGROUNDURL);padding:5px;border:3px solid #F2F4F2;text-align:center;width:200px;color:#555}

a.tablo{

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

cursor:pointer;

background:#D9DCDE;

width:20px;

text-decoration:none; 

border:3px dotted #fff;

color:#fff;

box-shadow:1px 1px 3px #eee;

border-radius:33px;

display:inline-block;

text-align:center;

font:16px uda, short stack;

}

a.tablo:hover{background:#E7DEF7;color:#bebebe;border:3px dotted #bebebe;}

#ysm img{max-width:245px;}

 </style>

<div class="babo">

<a class="tablo" onclick="document.getElementById('ysm').innerHTML=document.getElementById('1').innerHTML" >1</a> 

<a class="tablo" onclick="document.getElementById('ysm').innerHTML=document.getElementById('2').innerHTML" >2</a> 

<a class="tablo" onclick="document.getElementById('ysm').innerHTML=document.getElementById('3').innerHTML" >3</a> 

<a class="tablo" onclick="document.getElementById('ysm').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>

<div id="ysm" style="width:200px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font-size:11px; letter-spacing:1px;">

<center>1 = Isi.</center>

<center>2=Isi </center>

<center>3 = Isi♥.</center>

<center>4 =Isi</center>

</div>

<div id="1" style="display: none;">

<center>Posts!</center>

<center><div style="border:1px solid #efefef;background:#fff; width:188px; overflow-x:hidden; overflow-y:scroll;padding:5px; height:100px;text-align:left; ">

<bloggerpreviousitems>

<li><a  href="<$BlogItemPermalinkURL$>">

<$BlogPreviousItemTitle$></li>

</a>

</BloggerPreviousItems>

</div>

</center>

<center><center><div id="spoiler"><div><input value="Best Posts" style="width:170px;font:12px uda, short stack;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcyVT69NKKW5hnIqDr6k8NIOwCsGGHMgUQTwGhtPyxgrxOfGuSnofiSpRskmWY25kZLuN67lFolsrWmdjfwbyrsNTJT7oiBMa4myA27oHr_yNOw30FNJsK_eX6H5Ir6o-7YY-6zdRMMQ0/s1600/oristripe.gif);-moz-border-radius: 5px; border-radius: 5px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />

<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">

- <a href="YOUR LINK POST">TITTLE</a><br>

</div></div></div></center></center>

</div>

<div id="2" style="display: none;">

Banner pic

PUT YOUR CODE BANNER

</div>

<div id="3" style="display: none;">

My Status<br>

<div style="border:2px solid #efefef;background:#fff;border-radius:3px; width:188px; overflow-x:hidden; overflow-y:scroll;padding:5px;color:#000;font-weight:bold; height:100px;text-align:left;font-family:short stack;font-size:8px; ">

YOUR STATUS

</div>

</div>

<div id="4" style="display: none;">

Ask ~  <b>  YOUR CODE ASK FM

</center>

4. Pastekan bawah code tadi .  5. SAVE & Selesai 
NB : TEMPLATE SIMPLE / DESIGNER / DENIM PASTE DI HTML./JAVASCRIPT

NB : Ini Tutorial Ihza Sendiri. Jangan sembarang re-tutor tanpa izin!