Minggu, 18 Februari 2018

Navigate Able Box

Hasil gambar untuk boboiboy galaxy gif
Halloo.... siapa mau tahu, cara membuat "Navigate Able Box"? kalau mau... Ya Click READ MOREEE~!!


  • 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... edit-edit sendiri ya, 
    • kalau sudah ngedit, save. 
    Credit: Brown Talk

    Tidak ada komentar:

    Posting Komentar