Membuat Kotak Author yang Stylish



Alhamdulillah... kita bertemu lagi sobat, sekian beberapa hari aku tidak ada posting di blog ini, dan pada hari ini aku ada sedikit info yang aku dapat dari blog dezignmatterz yaitu, membuat kotak Author dengan gaya unik dan stylish. ini merupakan sebuah design yang sangat bagus untuk di taruh di blog sobat, dikarenakan sebuah blog jika memiliki tampilan yang kurang mengesankan maka pengunjung akan cepat bosan berkunjung ke blog Sobat, tetapi untuk penampilan blog yang berlebihan dalam widget - widget yang sangat mengganggu dalam membaca, dan itu semua akan membuat blog kita menjadi berat untuk di loading para pengunjung.

Pada kali ini aku akan memberikan sedikit info mengenai pembuatan kotak author yang sangat stylish dan tidak berat untuk di taruh di blog sobat, Cara pembautannya apakah susah? "Cukup mudah Sobat, sobat tidak perlu susah payah karena aku akan memberikan sedikit turorialnya, Mengapa? "Karena pengunjung ada Raja dan si Author adalah Pelayan , hehe "

Tidak Berpanjang lebar tar melar waktu pembuatannya, untuk itu sulakan ikuti saja Tutorial di bawah ini sobat :

Membuat Kotak Author yang  Stylish


1. Login » Blogger
2. Rancangan » Edit HTML
3. Jangan Lupa Centang Expand Template Widget
4. Masukan kode di bawah ini tepat di atas ]]></b:skin>

*/ AuthorBoxStylish */
a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
.socialize{background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/34023454.png)no-repeat;width:515px;height:55px;padding-top:7px;padding-bottom:5px;padding-left:80px;}
.authorbox{width:555px;height:175px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/16237904.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}
.left {
float:left;
height:100px;
margin-bottom:-5px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:-55px;
width:200px;
}
.right {
float:right;
margin-top:-50px;
width:430px;
}

KETERANGAN
Pada kode CSS di atas silakan sobat ganti sesuai kehendak sobat sendiri agar kotak author ini dan keselarasan warna template menjadi menyatu dan enak untuk di lihat.





5. Jika tahap penaruhan Kode CSS sebelumnya sudah selesai, kemudian kita beralih ke halaman HTML, Pada tahap ini silakan sobat cari kode <div class="post-footer"> Kemudian taruh kode di diatas kode tersebut.


<!-- Author Box -->
<div class="socialize">
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/digg-square.png" border="0" alt="DiggIt" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/stumbleupon-logo-square.png" border="0" alt="Stumble" /></a>
<a class="linkopacity" title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/twitter-logo-square.png" border="0" alt="Twitter" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/facebook-logo-square.png" border="0" alt="Facebook" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/technorati-logo.png" border="0" alt="technorati" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/delicious-3.png " border="0" alt="Delicious" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/designbump-logo-square.png " border="0" alt="DesignBump" /></a>
<a class="linkopacity" href="mailto:mia@dezigndiva.com" target="_blank"><img src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/mail-square.png" border="0" alt="EMail" /></a></div>
<div style="clear: both;">
<div class="authorbox">
<div class="left">
<h5>Author</h5>
<h3>David</h3>
<a href="http://www.dezigndiva.com"><img style="border: 0pt none; padding: 8px; background-color: #c3c3c3; width: 70px; height: 70px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/administrator.jpg" alt="" /></a></div>
<div class="right">
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the <img title="Spread the Love" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/heart-48x48.png" border="0" alt="Spread the Love" width="32" height="32" />
<a href="http://twitter.com/Masukan Usernam Twitter Sobat di sini" target="_blank"><img style="float: right; margin-top: -30px; padding-right: 50px; padding-bottom: 25px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Bird-Alt-64.png" border="0" alt="Black_Twitter_Bird" />
<h4>Follow Me on Twitter !</h4>
</a></div>
</div>
<div style="clear: both;">
<!-- Author Box --></div>
</div>

KETERANGAN
Untuk kode yang berwarna merah silakan sobat ubah sendiri sesuai dengan kehendak sobat, dan pada Tulisan berwarna merah yang di bawah silakan masukan Username Sobat




6. Selesailah sudah pembuatan Kotak Author yang Stylish, Kemudian Klik SAVE TEMPALATE


Untuk style yang lain seperti di bawah inim caranya sama dengan di atas,

Style 2


CSS CODE
a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/TYPOGRAPHY/67358746.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;color:#121212;}
.left{float:left;width:100px;height:100px;margin:25px;margin-left:15px;margin-top:10px;}
.right{float:right;margin-top:50px;width:425px;}


HTML CODE
<!-- Author Box -->
<div class="authorbox">
<div class="left">
<h4>Author</h4>
<h3>David</h3>
<a href="http://www.dezigndiva.com"><img style="padding: 8px; background-color: #c3c3c3; width: 70px; height: 68px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/administrator.jpg" alt="" /></a></div>
<div class="right">
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the <img title="Spread the Love" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/heart-48x48.png" border="0" alt="Spread the Love" width="32" height="32" />
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/digg-square.png" border="0" alt="DiggIt" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/stumbleupon-logo-square.png" border="0" alt="Stumble" /></a>
<a class="linkopacity" title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/twitter-logo-square.png" border="0" alt="Twitter" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/facebook-logo-square.png" border="0" alt="Facebook" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/technorati-logo.png" border="0" alt="technorati" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/delicious-3.png " alt="Delicious" /></a>
<a class="linkopacity" rel="external nofollow" target="_blank"><img title="Bump This Post" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/designbump-logo-square.png " alt="DesignBump" /></a>
  <a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -38px; padding-right: 30px; padding-bottom: 25px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Bird-Alt-64.png" border="0" alt="Black_Twitter_Bird" />
<h4>Follow Me on Twitter !</h4>
</a></div>
</div>
<div style="clear: both;">
<!-- Author Box --></div>


Style 3

CSS CODE
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/89118614.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;color:#121212;}
.left{float:left;width:100px;height:100px;margin:25px;margin-left:15px;margin-top:10px;}
.right{float:right;margin-top:20px;width:425px;}
-->

HTML CODE
<!-- Author Box -->
<div class="authorbox">
<div class="left">
<h4><span style="color: #eaeaea;">Author</span></h4>
<h3><span style="color: #eaeaea;">David</span></h3>
<a href="http://www.dezigndiva.com"><img style="padding: 8px; background-color: #eaeaea; width: 70px; height: 68px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/administrator.jpg" alt="" /></a></div>
<div class="right">
<span style="color: #eaeaea;">If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the </span><img title="Spread the Love" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/1620289818.png" border="0" alt="Spread the Love" width="32" height="32" />
<a rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/digg.png" border="0" alt="DiggIt" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/stumbleupon.png" border="0" alt="Stumble" width="42" height="42" /></a>
<a title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/twitter-1.png" border="0" alt="Twitter" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/facebook.png" border="0" alt="Facebook" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/technorati.png" border="0" alt="technorati" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/delicious-1.png " alt="Delicious" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Get The Feeds" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/rss.png " alt="RSS" width="42" height="42" /></a>
<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -38px; padding-right: 40px; padding-bottom: 25px; width: 62px; height: 62px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/6331764211202929640.png" border="0" alt="Silver_Twitter_Bird" /><span style="color: #99ccff;">
<h4>Follow Me on Twitter !</h4>
</span></a></div>
</div>
<div style="clear: both;">
<!-- Author Box --></div>


Style 4

CSS CODE
.socialize{background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/1270446985_234.png)no-repeat;width:608px;height:55px;padding-top:4px;padding-bottom:5px;padding-left:130px;}
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/89118614.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}
.left {
float:left;
height:100px;
margin-bottom:25px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:10px;
width:200px;
}
.right {
float:right;
margin-top:-70px;
width:430px;
}

HTML CODE
<!-- Author Box -->
<div class="socialize">
<a rel="external nofollow" target="_blank"><img title="Digg this Article and Be Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/digg.png" border="0" alt="DiggIt" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Stumble this Article come on you know you want to !" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/stumbleupon.png" border="0" alt="Stumble" width="42" height="42" /></a>
<a title="Tweet it on Twitter" target="_new"><img title="Tweet this Article and show your followers youre Super Cool" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/twitter-1.png" border="0" alt="Twitter" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Post this Article to Facebook and share with your friends" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/facebook.png" border="0" alt="Facebook" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Post this Article to Technorati and spread the Word!" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/technorati.png" border="0" alt="technorati" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Save to Delicious Bookmarks" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/delicious-1.png " alt="Delicious" width="42" height="42" /></a>
<a rel="external nofollow" target="_blank"><img title="Get The Feeds" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/rss.png " alt="RSS" width="42" height="42" /></a></div>
<div style="clear: both;">
<div class="authorbox">
<div class="left">
<h4><span style="color: #eaeaea;">Author</span></h4>
<h3><span style="color: #eaeaea;">David</span></h3>
<a href="http://www.dezigndiva.com"><img style="padding: 8px; background-color: #eaeaea; width: 70px; height: 68px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/administrator.jpg" alt="" /></a></div>
<div class="right">
<span style="color: #eaeaea;">If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the </span><img title="Spread the Love" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/1620289818.png" border="0" alt="Spread the Love" width="32" height="32" />
<a href="http://twitter.com/Vegagirl5" target="_blank"><img style="float: right; margin-top: -8px; padding-right: 40px; padding-bottom: 25px; width: 62px; height: 62px;" src="http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/6331764211202929640.png" border="0" alt="Silver_Twitter_Bird" /><span style="color: #99ccff;">
<h4>Follow Me on Twitter !</h4>
</span></a></div>
</div>
<div style="clear: both;">
<!-- Author Box --></div>
</div>


KETERANGAN
Pada kode CSS di atas silakan sobat ganti sesuai kehendak sobat sendiri agar kotak author ini dan keselarasan warna template menjadi menyatu dan enak untuk di lihat.




Demikian tutorial yang aku berikan semoga bermanfa'at dan membantu sobat,

Selamat Mencoba,

31 Responses to "Membuat Kotak Author yang Stylish"

  1. wuih... layak dicoba nih... tampilan koment-nya jadi mantap... thanks sharenya gan...

    ReplyDelete
  2. @cyber**:
    Makasih sobat, tpi ini bukan kotak komentar sobat, tetapi Kotak Penulis yang ada di bwah postingan sobat,,, :D

    ReplyDelete
  3. wuiih keren bgt tuh sob,, terlihat sangat stylish,, heheh,, nanti saya coba di blog saya,, thx udah berbagi sob,, happy blogging,, :D

    ReplyDelete
  4. Waaaaaah.... keren baaaanget tutonya..... boleh di coba ini... makasih buuwanyak sob... tutornya keren banget,,,, jempol dah buat sobat...??? hehehe

    ReplyDelete
  5. nah iya am, hanyar aku hapus sumalam dangsanak ae.. tapi lain yg kaya ini pang.. aku mahadang tips nang lain haja gen.. hehe

    ReplyDelete
  6. Makasih sob atas berbagi artikel dan tutorialnya..membuat berat loading blog gak sob...?Masalahnya blognya udah keberatan nih..?

    ReplyDelete
  7. Kunjungan silaturahmim malam sahabat di Codelain Blog...
    Terima kasih sahabat atas berbagi pengetahuan dan tutorialnya ini

    ReplyDelete
  8. Pena hadir dan absen kembali di sini sob...
    Dilihat dari screenshotnya bagus tuh sob..tak simpen dulu, nanti suatu saat akan dipakai sob

    ReplyDelete
  9. The information is very useful. Thank you for sharing knowledge. Hopefully can benefit us all. ^^

    All Insurance Articles

    ReplyDelete
  10. Nice informations, Visit my dear friend, Happy weekend 4 you :)

    ReplyDelete
  11. Good evening,Thank you for your visit :)

    ReplyDelete
  12. menarik gan :) INFORMasinya :) heheheh ijin bookmark dl yah :) thanks gan :) ditunggu kedatangannya :)

    ReplyDelete
  13. Terima kasih sob atas berbagi tutorial yang bermanfaat ini.
    Memang pas dengan judulnya membuat kotak author yang stylish

    ReplyDelete
  14. Ingin nyoba, sukses artikelnya terbukti dari banyaknya komentar diatas. Kunjungan malam sebelum tidur..

    ReplyDelete
  15. Terimakasih buat tutorialnya sobat.

    ReplyDelete
  16. kunjung pagi senang hati :)Good Day, blog hopping!

    ReplyDelete
  17. menarik minat hati kawan untuk segera mencoba kotak author yang style ini :)
    terimakasih sudah berbagi

    ReplyDelete
  18. makasih sob... semoga bisa diterapkan di template blog saya ^_^

    ReplyDelete
  19. keren cuy, kalo buat kotak komentar Blogspot seperti kotak komentar wordpress bisa gak cuy? nyari2 tutornya gak ketemu :(

    ReplyDelete
  20. jiah manteb sob!
    ane naksir ingin pasang, tapi masih bingung mau di taruh dimana!
    hihihihi...

    saran sob, commentnya di buat doFollow!!

    ReplyDelete
  21. @tigefa dot info:
    Kenapa sob? hehe, silakan reply sob untuk sarannya .. :D

    ReplyDelete
  22. mantap blognya...
    salam kenal yaaaaaaa...

    ReplyDelete
  23. wuihh mantap nih tutornya sobat..

    ReplyDelete
  24. Ijin pake kotak authornya gan.
    thx b4

    ReplyDelete
  25. wah.. izi di pakek ya.. oya mas.. kalo mau dilebarin lagi kotaknya.. bisa gak ya??

    ReplyDelete