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(http://4.bp.blogspot.com/-f-caK-oCJHU/Tt59TlAs9KI/AAAAAAAADPA/6riSpqtUxRo/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!  

2 komentar:

After Read My Post? Dont Forget to Comment

Related Posts Plugin for WordPress, Blogger...
 
Fully Design By Ihza | For Ihza 2013-2015 ©| Best View: Google Chrome