Kali ini saya akan share tentang Cara membuat Author Box di blog.
Penasaran kan seperti apa , , yuk kita lihat ScreenShotnya!!!
Penasaran kan seperti apa , , yuk kita lihat ScreenShotnya!!!
Nah udah tau kann??
Langsung aja ke tutorialnya!!!
Langsung aja ke tutorialnya!!!
1. Buka Blog kamu
2. Langsung menuju ke Template
3. Lalu letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
.AHSadmin {width:auto; height:83px;padding:5px}
.AHSadmin-gambar {-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;}
.AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}
.AHSfb, .AHSgp, .AHStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.AHSfb {background: #3B5998;margin-left:73px}
.AHSfb:hover { -moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}
.AHSgp {background: #D34836;font-size:11px;margin-left:85px}
.AHSgp:hover {-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #EB503C; box-shadow: 0 0 3px #EB503C;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}
.AHStw {background: #4099FF;margin-left:73px}
.AHStw:hover {-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);background:#444}.admin-gambar:hover{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);opacity:0;}
.AHSadmin-gambar:hover {border-radius:10px;border:2px solid #0000FF;box-shadow:0 0 30px #ff0000;-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);-moz-transform:rotate(715deg);-webkit-transform:rotate(715deg);-o-transform:rotate(715deg) }
4. Kalau udah , , silahkan menuju ke tata letak
5. lalu , , add gadget > HTML/Javascript
6. Silahkan anda masukan kode di bawah ini kedalamnya!!!
<!-- Author Blog Start -->
<div class='AHSadmin'>
<img alt='Oriezt' src='https://sites.google.com/site/maencit/gambar/Protagonist_DeSu2_Break_Record.png' title="Oriezt" class='AHSadmin-gambar' />
<a class='AHSfb' href='http://www.facebook.com/Oriezt' rel='nofollow' target="_blank">f</a>
<a class='AHSgp' href='https://plus.google.com/u/0/100694433203791510224' rel='nofollow' target="_blank">G</a>
<a class='AHStw' href='http://twitter.com/OrieztMaenCit' rel='nofollow' target="_blank">t</a>
<div class='AHSdeskripsi'>
Hai, perkenalkan nama saya <a href=http://www.facebook.com/oriezt title="Oriezt" rel='nofollow' target="_blank">Oriezt</a><br/>
</div></div>
<!-- Ends -->
7. Kalau sudah silahkan anda edit sendiri!!!
8. Setelah itu klik Save , , SELESAI.
^_^ Backlinks Please Thanks ^_^
| URL |
| Code For Forum |
| HTML Code |
| Feed RSS |
0 Blogger Comments
