Drop in Content Box bisa dimanfaatkan untuk menyampaikan kata sambutan yang berupa ucapan selamat datang, pesan kepada pembaca, iklan, memuat gambar/photo atau mungkin profil blogger dengan menampilkan secara bersamaan antara foto dan identitas yang layak diketahui pemngunjung blog. Fungsi yang cenderung fleksibel ini membuat drop in content box menjadi sangat layak untuk di dayagunakan guna melengkapi dan menambah daya tarik blog.
Cara membuat drop in content box :
Cara membuat drop in content box :
1. Lakukan pengamanan template terlebih dahulu dengan cara :
Login ke Blogger --> Tata letak --> Edit HTML -->
Download Template Lengkap --> Simpan di Folder PC
2. Tetap di Edit HTML.
- Cari KODE ]]></b:skin>
3. Letakkan KODE CSS berikut persis di atas ]]></b:skin>
<style type="text/css">
#BGSdropinGRcover{
width: 330px; /*change width to desired */
height: 300px; /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}
#BGSdropinGR{
font-weight:bolder;
color:#00FF99;
width: 302px; /*change width to above width-20. */
height: 280px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
margin:0;
border: 8px double magenta; /*Customize box appearance*/
background: #404041;
padding: 4px;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;
}
</style>
4. Letakkan javascript berikut persis di bawah ]]></b:skin>
<script type="text/javascript">
var dropboxleft=300 //jarak dari kiri
var dropboxtop=180 //jarak dari atas
var dropspeed=1 //kecepatan jatuh
var displaymode="always"
/// jangan lakukan perubahan di sini ///
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("BGSdropinGRcover") : document.all.BGSdropinGRcover
crossbox=(dom)?document.getElementById("BGSdropinGR"): document.all.BGSdropinGR
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}
</script>
5. Letakkan KODE berikut pada bagian <body> :
<div id="BGSdropinGRcover">
<div id="BGSdropinGR">
<center><a href="#" onClick="dismissboxv2();return false" style="background:#6699FF; border:2px solid #666666;padding:2px; border:2px solid #CC3300; font-size:12px;"> - CLOSE - </a><br />
<img src="http://www.wallpapers3dvistaxp.com/mfiles/6940hb.jpg" style="width:200px; height:100px;"/><br />
Drop in Content Box bisa dimanfaatkan untuk menyampaikan kata sambutan, ucapan selamat datang, pesan kepada pembaca, iklan, memuat gambar atau mungkin profil blogger dengan menampilkan secara bersamaan antara foto dan identitas yang layak diketahui pemngunjung blog.<br />
<font style=" background:black; border:1px solid #990000; font-weight:bolder; "><a href="http://gubhugreyot.blogspot.com">bloggerstars1 - gubhug reyot</a></font></center>
6. KLIK Simpan Template.
7. Lihat hasilnya dengan membuka blog.
Catatan :
- KODE yang berwarna merah, oranye dan hijau di atas (no. 5), silahkan untuk disesuaikan dengan kebutuhan blog anda !
1 0 komentar:
Post a Comment