Saturday, December 13, 2014

Tutorial Navigation Box

Hai, aku mau kasih tuto yg direquest oleh Tiara.
Cekidot!

1. Buka blogger
2. Lalu, setelah meng-klik judul blog yang akan diberi widget ini, klik Layout
Nih, gambarnya:

3. Terus, copy kode ini:
<div class='widget-content'><br/><center><style>#sidebar-position{border:2px solid #1EDFF8;z-index:9999;background:url(http://1.bp.blogspot.com/-0unS99GC5a8/Tva9xBojhbI/AAAAAAAAEvg/D6gJG8NRWoI/s1600/blue.png);padding:5px;width:200px;}#back{-webkit-transition: 1.0s;-moz-transition: 1.0s;border:4px solid #0EFFFF;background-image: url('http://1.bp.blogspot.com/-w8fuioyMmy4/T-RPpi1ko3I/AAAAAAAAH8I/IavJCe_PPyY/s1600/blue.gif'); width:193px;height:180px;overflow:hidden;margin-right:6px;margin-bottom:5px;}#back:hover{border:4px dashed #0DA7FF;-webkit-transition: 1.0s;-moz-transition: 1.0s;}.titu {margin-right:-90px;margin-top:-60px;font:32px 'from where you are';padding:5px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;text-align:center;color:#2801FF;background:#0EF3FF;padding:3px;letter-spacing:3px;}@font-face{font-family:tabitha;src:url('http://static.tumblr.com/eq1rpir/YvSm6kvcd/tabitha.ttf')}#statuss {margin-top:200px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;font:8px kyoritsu dengyo;text-transform:uppercase;color:#000;padding:3px;background:#fff;display:block;height:250px;}#back:hover .titu {margin-top:0px}#back:hover #statuss {margin-top:0px;}</style><div id="sidebar-position"><div id="back"><div class="titu">Hello!</div><div id="statuss"><div id="status"><br/><br/><br/>TEXT KAMU</div></div></div></div></center></div>
Hijau: untuk warna-warnanya
Merah: untuk font-nya
Pink: untuk text-nya dan yang Hello! itu judulnya
Ungu: untuk URL background
Kuning: untuk URL font

4. Klik Add A Gadget, terus HTML/JavaScript
5. Pastekan kode tadi di window HTML/JavaScript
6. Save!

NB: gk perlu pakai TITLE

There are 2 comments.
Please post another comment..

  1. gifta,,maaf ya aku nggak bermaksud nuduh kok..itu kamu dapet tutorial dari aku ya? cuma kata katamu yang diganti?

    ReplyDelete
    Replies
    1. ngga! aku buat sendiri. jujur kok aku...

      Delete