a

TUTORIAL WIDGET SECRET BOX

Halo teman!,..
Setelah  (  Di blog ini tuh maksudnya Hiatus,..) Selama satu minggu!
Sekarang akuuu kembali!...
Kali ini aku akan nge post tentang,.. 
^^Baca sendiri di judul !^^
Oke,.. Bay The Way kalian tau gak sih,.. 
Secret Box tuh apa?.. 
Yaah masak gak tauu??.. 
Nih liat gambar nya di bawah! 


Nah udah ngerti kan?.. Yuk yuk buatt!!..
  • Buka blog kamu
  • Klik > ini <
  • Hapus semua kode yang ada di sana! 
  • Copy kode di bawah ini, dan paste di kolom yang tersedia di sana


<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

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

a.tablo{-webkit-transition: all 0.5s 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:#fff;
width:20px;
text-decoration:none; 
border:1px dashed #BBBBBB; 
border-radius:33px;
color:#555; 
display:inline-block;
text-align:center;
}

a.tablo:hover{background:#ccc;color:#fff;}

 </style>
<div id="adv2" class="adv2">
<ul><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </ul>

<div id="wnsb" style="width:250px;">
Navigate around. Replace this with anything/your own words.
</div>

<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here.  
</div>

<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>

<div id="3" style="display: none;">
This navigation no.3 
</div>

<div id="4" style="display: none;">
This navigation no.4 </div></div>
  • Setelah itu,.. Akan muncul seperti gambar 1 2 3 4  ,.. dan di bawah nya ada tulisan,.. Navigate around. Replace this with anything/your own words.
  • Nah,.. kamu tekan CTRL + A trus tekan lagi CTRL+F cari tulisan yang tadi muncul itu,..(scroll ke bawah deh!)
  • Setelah ketemu,.. hapus tulisan itu,.. 
  • Ganti dengan tulisan awal yang mau kamu tampilkan di awal secret box. Misal nya, CLICK HERE! iNgat! tulisan! bukan kode!
  • klik angka 1 pasti ada tulisan, This navigation no.1 , remove this and replace with anything you want to be here.
  • Nah,.. kamu tekan CTRL + A trus tekan lagi CTRL+F cari tulisan yang tadi muncul itu,..
  • Ganti lah dengan kode yang nanti nya akan ada saat pengunjung meng klik angka 1
  • Sudah?.. Klik angka 2 ,.. pasti ada tulisan, You can also put cbox codes here. Just anything without messing the codes.
  • Tekan CTR+A dan CTRL+F lagi yaa... Dan cari tulisan yang baru muncul itu. Setelah ketemu, hapus.
  • Ganti dengan kode yang akan keluar wigdet nya saat pengunjung mengklik angka 2
  • lakukan hal yang sama dengan nomor 3-4 ..
  • setelah selesai kamu edit,.. Kamu copy semua kode yang tadi kamu edit,..
  • Dan masukan kedalam HTML/javascript yang ada di tata letak ..
  • Klik Save,.. dan klik simpan perubahan.
Selesai!.. Akhirnya kamu punya Secreat box deh!

CR kode : Kak Novita

No comments:

Post a Comment

^^Komentar adalah yang Nomor satu! Jadi kamu harus Komen! (‾^‾)b
^^Komentar harus sesuai Artikel (‾^‾)b
^^Jangan Me-Request di komentar! Di Cbox/Ask,fm Aja (‾^‾)b
^^Nah, ayo tinggalkan komentar di Kotak bawah \(´▽`)/