Hai-hai... ketemu lagi nih dengan saya admin dari blog DhonShin, Hmmm... lumayan lama juga saya tidak update di blog kebanggaan saya ini, hehehe. Kali ini saya akan memberikan sebuah tips blogging yang berjudul Membuat Kotak Info Blog Tersembunyi, untuk tutorial ini sudah saya modifikasi sedikit agar terlihat lebih menarik. Oke langsung aja kita mulai dengan beberapa langkah dibawah ini :
1). Login ke akun blogger anda
2). Pilih Menu Template dan klik Edit HTML
3). Setelah itu cari script berikut ]]></b:skin> dan letakan script dibawah ini tepat di bawah teks yang berwarna biru tersebut.
<style type='text/css'>
#sejagad {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#sejagad{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #sejagad:hover{width:400px;opacity:1.0;margin-left:0;}
.sejagadkotak {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}
.sejagadkotak:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}
.sejagadkotak2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}
.sejagad15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}
.sejagad2 ul.bom {margin: 0; padding: 0;}
.sejagadkotak2 li {margin-left:20px;}
.sejagadkotak2 li a {color: #FFFFF; line-height: 4px; font-size: 30px;font-weight: bold; text-decoration:none;}
.sejagadkotak2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}
.sejagadkotak2 h3 { font: 26px Oswald;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}
.sentuhansejagad {font-size:22px;font-weight:bold;font-family:Oswald;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}
.sentuhansejagad:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: blue;}</style>
#sejagad {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#sejagad{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #sejagad:hover{width:400px;opacity:1.0;margin-left:0;}
.sejagadkotak {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}
.sejagadkotak:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}
.sejagadkotak2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}
.sejagad15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}
.sejagad2 ul.bom {margin: 0; padding: 0;}
.sejagadkotak2 li {margin-left:20px;}
.sejagadkotak2 li a {color: #FFFFF; line-height: 4px; font-size: 30px;font-weight: bold; text-decoration:none;}
.sejagadkotak2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}
.sejagadkotak2 h3 { font: 26px Oswald;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}
.sentuhansejagad {font-size:22px;font-weight:bold;font-family:Oswald;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}
.sentuhansejagad:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: blue;}</style>
4). Jika sudah anda cari lagi script <body> dan letakan script berikut di bawah nya.
<div id='sejagad'><span class='sentuhansejagad'>Info</span>
<div class='sejagadkotak'><div class='sejagadkotak2 sejagad15'>
<h3 align='center'>Salam Sobat Blogger</h3>
<a align='center' href='http://dhonshin.blogspot.com/' title='Home'><img alt='dhonshin.blogspot.com' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP27Zd3W0-cguYyOy4gtuaPdznMXUb_lQlIZ2qL2aYTjH5bIgALZpA3LL1clK0nW7qx8sVZcEuMjtBBKzYMhe1kRnvul5_cBqApL8WlHES-kGGP9OacZvsd1Kil_dmlMKykkG2hhNYbBvr/s1600/cooltext1138117729.png' title='dhonshin.blogspot.com' width='250px'/></a>
<p align='justify'> Selamat datang di blog DhonShin, Blog DhonShin akan update sekurang-kurangnya 1 postingan per 2 hari kecuali film Anime yang akan update pada saat tertentu seperti hari jum'at dan minggu. Semoga blog ini dapat bermanfaat dan menghibur anda, selamat mendownlaoad dan menikmati... Terima Kasih </p>
</div>
</div></div>
<div class='sejagadkotak'><div class='sejagadkotak2 sejagad15'>
<h3 align='center'>Salam Sobat Blogger</h3>
<a align='center' href='http://dhonshin.blogspot.com/' title='Home'><img alt='dhonshin.blogspot.com' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP27Zd3W0-cguYyOy4gtuaPdznMXUb_lQlIZ2qL2aYTjH5bIgALZpA3LL1clK0nW7qx8sVZcEuMjtBBKzYMhe1kRnvul5_cBqApL8WlHES-kGGP9OacZvsd1Kil_dmlMKykkG2hhNYbBvr/s1600/cooltext1138117729.png' title='dhonshin.blogspot.com' width='250px'/></a>
<p align='justify'> Selamat datang di blog DhonShin, Blog DhonShin akan update sekurang-kurangnya 1 postingan per 2 hari kecuali film Anime yang akan update pada saat tertentu seperti hari jum'at dan minggu. Semoga blog ini dapat bermanfaat dan menghibur anda, selamat mendownlaoad dan menikmati... Terima Kasih </p>
</div>
</div></div>
5). Selesai deh. Mau lihat contohnya di sini
Keterangan Warna :
Merah - Judul yang akan diberikan
Orange - URL blog sobat
Hijau - URL gambar
Ungu - Isi dari info yang akan diberikan.
Yups... Selesai sudah tips dalam Membuat Kotak Info Blog Tersembunyi versi DhonShin semoga dapat bermanfaat dan mempercantik blog yang sobat miliki, Terima Kasih.
Monggoh di coba semoga berhasil ya gan....
ReplyDelete