Navigate Able Box (My Style)

Navigate Able Box (My Style)
Konnichiwaa semua! Wealaahh di rumah sendirian nih T_T :P Eh ternyata kemarin malam ada yang request nih... Cara buat widget Data kayak aku. Cekidot aja yuk!




  • Login ke blogger >> dasbor >> tata letak >> tambah gadget >> 
  • Scroll ke bawah sampe muncul HTML/JAVASCRIPT
  • Nah, copy kode ini :
<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

a.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.navi{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:20px;
text-decoration:none;
font-family:Annoying Kettle;
font-size:7px;
text-transform:uppercase;
color: #000000;
background: #FFEAEA;
border: solid #9E9E9E 2px;
text-align:center;
opacity: 1;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
a.navi:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}
a.navi1{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:80px;
text-decoration:none;
font-family:cOMFORTAA;
font-size:7px;
text-transform:uppercase;
color: #fff;
background: #aaa;
text-align:center;
opacity: 1;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
}
a.navi1:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}
 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background: #FBFBFB;padding:5px;border:1px solid #000;text-align:center;width:260px;color:#555;}


a.navi{
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:80px;
text-decoration:none;
font-family: ARIAL;
font-size:14px;
text-transform:uppercase;
color: #000000;
background: #F1f1f1;
border: solid #000 2px;
text-align:center;
opacity: 1;
MARGIN-RIGHT: 10PX;
MARGIN-LEFT: 10PX;
border-radius: 10px;
}
a.navi:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #fff;

-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #dfdfdf;
}
a.navi1{
border: solid #dfdfdf 2px;
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding:5px;
width:100px;
text-decoration:none;
font-family:comfortaa;
font-size:7px;
text-transform:uppercase;
color: #aaa;
background: #f1f1f1;
text-align:center;
border-radius: 10px;
}
a.navi1:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:3px;
color: #AAA;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #fff;
}

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

 </style>
<div class="babo">
<a class="navi" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >TITLE 1</a>
<a class="navi" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >TITLE 2</a>
</div>

<div id="wnsb" style="width:260px;color:#333; padding:5px;border:1px solid #000;border-top:none;font:11px century gothic; letter-spacing:1px;background:url(URL BACKGROUND);">
<img style="width:120px; BORDER: 1px solid #333; border-radius: 10px;" src="URL IMAGE KAMU" /><br /><br />
Konnichiwa! Delete this word and replace with ur word personal
</div>

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

<div id="2" style="display: none;">
WIDGET CODE 2
<br /></div>

  • Nah, itu kalian edit-edit sendiri yaaa!
  • Setelah puas ngedit, klik save!

Kode widget ini aku desain sendiri, tapi aku modifikasi dari secret box nya Kak Tiara. Oke?? silakan komen yaaaa maaksih Vivi udah request :)

7 comments:

1 ) Berikan komentar yang baik

2 ) Jangan pernah berkata kasar, jorok, dan menyakiti perasaan orang lain

3 ) Jangan sampai bikin gaduh di kotak comment

4 ) Blog ini secara otomatis memilah mana yang komen spam (termasuk yang menawarkan produk-produk seperti produk diet, dll). Jadi, hati-hati komennya

Related Posts Plugin for WordPress, Blogger...