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
mantap gan tutorialnya, maksih infonya
ReplyDeletesalam kenal ya gan
ReplyDelete