Friday, March 30, 2012

Author Box

Pada blog biasanya terdapat author box, kali ini saya akan membahas cara membuat author box pada blog. Script author box ini cukup sederhana namun cukup lumayan berwarna :D
Langsung saja untuk cara pemasangannya, seperti biasa anda login pada blogger anda lalu masuk ke "rancangan" lalu pilih "edit entri" dan cari kode ]]></b:skin> dan letakkan script css di bawah ini di atas kode ]]></b:skin>
#author h1{
font:bold 32px 'Showcard Gothic',Arial,Sans-Serif;
margin:0 10px;
color:#000;
text-shadow:0 1px 0px rgba(255,255,255,0.4);
position:relative;
-webkit-animation:slow 5s;
-moz-animation:slow 5s;
-ms-animation:slow 5s;
animation:slow 5s;
-webkit-box-shadow:5 10px 10px rgba(1,0,0,0.10);
-moz-box-shadow:5 15px 10px rgba(1,0,0,0.10);
box-shadow:5 5px 11px rgba(1,0,0,0.10);
}
#author .deskripsi{
margin:5px 5px 5px 5px;
padding:8px;
background:#F6EEAB;
background:-webkit-linear-gradient(top, #FFFFFF, #25F);
background:-moz-linear-gradient(top, ##FFFFFF, #25F);
background:-ms-linear-gradient(top, #FFFFFF, #25F);
background:-o-linear-gradient(top, #FFFFFF, #25F);
background:linear-gradient(top, #FFFFFF, #25F);
border:3px solid #DCC56C;
-webkit-box-shadow:3 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow:3 15px 10px rgba(0,0,0,0.4);
box-shadow:3 5px 11px rgba(0,0,0,0.4);
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:10px;
position:relative;
z-index:10;
-webkit-animation:slow 3s;
-moz-animation:slow 3s;
-ms-animation:slow 3s;
animation:slow 3s;
border-color:#26a  ;
}
#author .deskripsi:before{
content:"";
width:0px;
height:0px;
border-width:15px;
border-style:solid;
border-color:#6e0 transparent transparent transparent;
position:absolute;
top:102%;
left:18px;
z-index:-50;
}
#box:after{
width:0px;
height:0px;
border-width:10px;
border-style:solid;
border-color:#F6EEAB transparent transparent transparent;
position:absolute;
top:100%;
left:21px;
}
Lalu untuk cara pemanggilannya pada Elemen Laman => Klik Tambah Gadget => Pilih Form HTML/javascript dan letakkan kode di bawah ini di formulirnya
<div id="author">
<h1>
Author Box</h1>
<div class="deskripsi">
<b>Mire Tahu Tempe</b>
Author Box
Author: Bayu Handono 
Download this project on <a href="http://miretahutempe.blogspot.com/">Mire 
Tahu Tempe</a></div>
</div>
Lalu klik simpan. Selesai.
Untuk Demonya anda bisa lihat di bawah ini

Author Box

Mire Tahu Tempe
Author Box
Author: Bayu Handono
Download this project on Mire
Tahu Tempe

2 comments: