Autohide Box

Auto hide boxs berfungsi untuk menyampaikan pesan ataupun konten lain yang berupa teks dan gambar yang hanya muncul di halaman blog pada saat blog mulai dibuka. Durasi kemunculan box bisa disesuaikan dengan kebutuhan dan keinginan blogger yang disesuaikan dengan seberapa penting pesan atau iklan yang ingin ditampilkan dan diatur melalui javascript. Menggunakan jQuery.1.3.2.min.js untuk fungsi ini tidak akan merugikan buat pengguna karena biasanya hampir semua blogger pasti menggunakannya untuk beberapa fungsi yang lain. Untuk melihat bagaimana Auto Hide Box bekerja, silahkan KLIK DEMO.
D E M O

jQuery & Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyotprojects.googlecode.com/svn/jq/GRautohidebox.js" type="text/javascript"></script> 
<script type="text/javascript"> 
alwaysOnTop.init({
targetid: 'stayontop1',
orientation: 1,
position: [5, 10],
fadeduration: [1000, 1000],
frequency: 0.95,
hideafter: 50000
})
alwaysOnTop.init({
targetid: 'stayontop2',
orientation: 2,
position: [20, 100],
hideafter: 40000,
})
</script>

Kode CSS :

#stayontop1,#stayontop2{
        padding:10px;
        text-align:justify;
        font-family:Arial;
        font-size:12px;
        font-weight:500;
        width:400px;
        background:#6699FF;
        border:4px solid #ccc;
        border-radius:4px;
        box-shadow:0 0 4px #000;
        color:#eee;
        text-shadow:1px 1px 1px #000;
}
#stayontop2{
        width:160px;
        background:#CCC;
        border:3px double #eee;
        border-radius:5px;
        box-shadow:4px 4px 4px #666;
        color:#111;
        text-shadow:2px 2px 2px #888;  
}
#stayontop1 a,#stayontop2 a{
        font-weight:bold;
        color:#F60;
        text-decoration:none;
}
#stayontop1 a:hover,#stayontop2 a:hover{
        color:red;
}
#stayontop1 a.jQGRautohide:hover,#stayontop2 a.jQGRautohide:hover{
        font-size:14px;
        font-weight:bold;
        color:#C00;
        background:#555;
        display:block;
        padding:2px 5px;
        float:right;
        margin:15px 0 0px;
        text-shadow:1px 1px 1px #000;
        text-decoration:none;
}
#stayontop1 a.jQGRautohide:hover,#stayontop2 a.jQGRautohide:hover{
        background:#C00;
        color:#eee;
}

xHTML :

<div id="stayontop1">
<img style="margin:0 auto;display:block;text-align:center;float:left;margin:5px 12px 5px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilPMUiN4BafbKijdRByzTXzfROTHcw0g6P5yAST02RK-_gDB4nlWh8Z3crHDGGN0aDDAaVKBRPy-7lt_A12i8rj4OhBxE4EffPJeSaHBx1HyLWLzxk_tlZSA6NmVFYsQ_LrVDvG3HwEXw/s400/image1.jpg" width="200" height="168"/>Box ini akan menghilang setelah 50 detik, sesuai dengan hideafter yang disertakan senilai 50000 ( 50000 equivalen dengan 50 detik karena setiap 1000= 1 detik). Lama waktu bisa kamu ubah dengan merubah nilai hideafter. Semakin kecil nilainya maka box akan semakin cepat menghilang.<br />Apabila ingin menghilangkannya secara manual silahkan 
<div style="celar:both"></div>
<a class="jQGRautohide" href="javascript:alwaysOnTop.hidediv('stayontop1')" title="Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan">CLOSE</a>
</div>
<div id="stayontop2">
<a href="http://bloggerstuars.blogspot.com" target="_blank"><img style="margin:0 auto;width:150px;height:173px;display:block;text-align:center;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMgKhmOvNYMxlg64LdGAmYMeDvL2yjCn9QG9-VmlZcwSQyjZhYcJ4e3M265f83z8nALMo2Gfh1BhjGf1sthute10ky2qM7KcIK6Ul2oztTGFr9mi3joB3zwu6n8AtfJ9UnqURFB8eFB0/s400/image2.jpg"/></a><br /><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a> Auto Hide Box bisa di gunakan untuk menyampaikan pesan, iklan atau bentuk yang lain, dimana materi di dalamnya bisa berupa gabungan teks dan image.<br />Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan:
<div style="celar:both"></div> 
<a class="jQGRautohide" href="javascript:alwaysOnTop.hidediv('stayontop2')" title="Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan">CLOSE</a>
</div>

Cara menggunakan :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode <head>
6. Copy dan letakkan jQuery dan javascript di bawah <head>
7. Cari kode ]]></b:skin> pada "Box Edit Template".
8. Copy kode CSS dan letakkan di atas ]]></b:skin>.
9. Klik "Simpan Template (Save Template)"
10. Gunakan xHTML melalui box posting atau "Add a Gadget | Javascript/HTML"

Catatan/Keterangan :

• Jika sebelumnya dalam blog sudah menggunakan jQuery v1.3.2 s/d jQuery v1.7.1, buang jquery/1.3.2/jquery.min.js yang ada di atas javascript dalam box di atas.
  Catatan : Dalam satu blog cukup menggunakan satu jQuery.
• Panduan cara backup template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dalam template, dapat dibaca melalui Special Tutorials yang terdapat pada menu sebelah kiri halaman.
• Ukuran box dapat dirubah dan besaran ukuran box digunakan untuk penyesuaian dengan ukuran image yang di gunakan.
• Border image bisa ditambahkan dengan memperhatikan perbandingan ukuran gambar dan box yang digunakan.
• Durasi tampilan box diatur dengan pengaturan nilai hideafter (setiap nilai 1000 (seribu)= 1 detik).
• Bisa menggunakan 1 box dengan stayontop1 atau stayontop2.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «

Sumber : Dynamicdrive.com