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,
Posting Komentar