Secret Box Tutorial

02:31:00

Konnichiwa minna!!
apa kabarnya nih? pastinya minna semua dalam keadaan sehat kan? hehehe ><
ngomong-ngomong nih , ryoko mau bagi-bagi cara membuat secret box , nih , minna semua udah tau engga sama secret box? kalo ga tau nih ryoko kasih tau , lebih jelasnya silahkan scroll ke bawah dan akan ada terlihat seperti ini

nah, jadi ini dia secret box itu ^^

Nah, tanpa perlu ryoko jelaskan , kalo kalian udah lliat gambar itu pasti tau apa itu secret box kan? nah jadi untuk itu ryoko mau bagi-bagi tutorialnya nih , come on follow me ^^

  •  buka link ini (gunanya untuk mengedit secret box kalian nanti)
  •  copy kode dibawah ini dan masukkan ke dalam link yang sudah dibuka tadi


<style>.adv2 ul{background:url(URL Background );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:#bbbbbb;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:#ffffff;}
 </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;">letak apapun disini</div>
<div id="1" style="display: none;">1 fs  </div>
<div id="2" style="display: none;">2 nd  </div>
<div id="3" style="display: none;">3 rd  </div>
<div id="4" style="display: none;">4 th  </div></div>

*pink :  url background
*biru : warna border
*kuning : warna background button
*merah : warna boeder button
*hijau : background hover button
*ungu : color hover button
*biru : letak apa yang kalian mau


  •  edit dulu secret boxnya (yang perlu ditukar ada pada keterangan diatas)
  •  jika sudah di edit silahkan masukkan ke blog kalian
untuk denim template (simple)

  •  dashboard >> add widget >> HTML/JavaScript
untuk classic template (blogskin)

  •  dashboard >> template >> cari kode </blogger> dan copy diatas kode tersebut

  •  selesai deh ^^

Share This Story

Tags: , , ,

You Might Also Like

2 Cute Ota

Penting!!
*blog ini butuh saran & kritik jadi diharapkan semua memberi komentar
*gunakanlah kalimat yang sopan dan baik
*jangan berkata kasar atau kotor
*jangan bikin spam