widget author box

Widget social media, widget subscribe, widget profil dan widget tanggal saya padukan menjadi satu widget author box, widget author box pada postingan kali ini sudah komplit untuk para blogger mania. widget author box kali ini memiliki tampilan yang menarik ditambah kesan image pada widget author box ini yang dipolesi oleh CSS 3 membuat widget author box ini menjadi pilihan buat para bloger. Postingan kali ini terinspirasi dari salah seorang sahabat saya waktu kecil yang memerlukan widget author box pada halaman blognya. Untuk tehnik pemasangan dari widget author box pada postingan kali ini silahkan simak penjelasan dibawah, jangan lupa di lihat demonya untuk melihat tampilan langsung widget author box ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget author box
By : Rivai Silaban | Blog Design
Update : Sabtu, 09 Nopember 2013
******************************************/
#boxbdrs_author {
width:550px;
margin: 5px auto;
padding: 10px;
border: solid 1px #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-radius:10px;
box-shadow:0 0 3px #666;
}
#boxbdrs_author .link{
color: #000099;
text-decoration: none;
padding-left:20px;
}
#boxbdrs_author .link:hover{
color: #990000;
}
#boxbdrs_author h2 {
border: solid 1px #CCCCCC;
font-family: Georgia;
font-size: 12px;
font-style: italic;
letter-spacing: 2px;
text-align: center;
}
#boxbdrs_author h3 {
font-family: Georgia;
font-size: 24px;
font-style: italic;
text-align: center;
text-shadow: 1px 2px 2px #999;
color: #990000;
margin:9px 1px;
}
#boxbdrs_author .gambar-style {
position:relative;
float:left;
width:150px;
padding:5px;
margin:5px 15px 5px 0;
background:#fff;
border:solid #999 1px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.gambar-style img{
width:150px;
height: 100px;
}
#boxbdrs_author .gambar-style:before,
#boxbdrs_author .gambar-style:after {
content:"";
position:absolute;
z-index:-2;
}
#boxbdrs_author .gambar-style p {
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #990000;
letter-spacing: 3px;
}
#boxbdrs_author .gaya {
-moz-border-radius:4px;
border-radius:4px;
}
#boxbdrs_author .gaya:before,
#boxbdrs_author .gaya:after {
bottom:10px;
left:10px;
width:30%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
#boxbdrs_author .gaya:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
#boxbdrs_author .rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
#boxbdrs_author .rotated :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/*--------------------------------------------------
SOCIAL-BOOKMARKS BLOG DESIGN
---------------------------------------------------*/
#boxbdrs_author .social-ballbdrs {
padding:0;
margin-left:-25px;
}
#boxbdrs_author .social-ballbdrs li{
float: left;
margin-right: 12px;
background-color: #FFFFFF;
display: inline;
border:solid #999999 1px;
box-shadow:0 0 5px 2px #999 inset;
padding:2px;
}
#boxbdrs_author .social-ballbdrs li a {
-moz-transition: all 0.3s ease 0s;
display: block;
float: left;
height: 100%;
width: 40px;
height: 40px;
text-indent: -9999px;
}
#boxbdrs_author .social-ballbdrs li.facebookball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLbhc0o1REVHFcMlYTckwV8XXBQsI-rarSpxK_PO5_D9uW7BlBI0KMk1jxMHI5mbiOwjyRVmo2w1Cciks1NyWeMZG35vg5AvD-BTEkUhxR9YbZbdQswwYJ_6C-oNuq67mFKvEgodzgJI/s1600/FACEBOOK.png') no-repeat 0 0;
}
#boxbdrs_author .social-ballbdrs li.facebookball a:hover {
background-color: #3b5998;
}
#boxbdrs_author .social-ballbdrs li.googleplusball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKxsyTGWOEYn58zR5jU17EghYLwEsAAgRGimdfLzI_bEJ1ZYQcRtwBX4fA6lfqNHhfH-BormrGQ9K7YxX_Me9vUrJZ1xsmD0DH0UwEVIZ1e6jxmvyuRKF2ox_2tpzQvrt7nCk3RT0Mqw/s1600/googleplus.png') no-repeat 0 0;
}
#boxbdrs_author .social-ballbdrs li.googleplusball a:hover {
background-color: #d94a39;
}
#boxbdrs_author .social-ballbdrs li.rssball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OCvpXjQT0wSkYoYerAZa5OBzS5Niipw9zvwN_z6OG4F_85vO831J1VhSkHcOSyolVDZE1bHVp7OCitmqStniKzm8x8bTWy_jQyGfCqMeCt1DtWOrh-PvznKNxA_T05qe-veVc__F7zQ/s1600/rssbd.png') no-repeat 0 0;
}
#boxbdrs_author .social-ballbdrs li.rssball a:hover {
background-color: #fe9900;
}
#boxbdrs_author .social-ballbdrs li.twitterball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekUIZbGCDNCZWwQOU19PI3sa17vrWKJay0KcDmcQqrCdPe_ZzuFCd88_gUS5Cb1oArLRMFhGs2PhhO0RYRqz-qWQyKjsNu8bibR5AbmfMs7lLEAlBWilrFGxdHl1-qDHH9Qrn5vnWAfk/s1600/TWITTER.png') no-repeat 0 0;
}
#boxbdrs_author .social-ballbdrs li.twitterball a:hover {
background-color: #48c4d2;
}
#boxbdrs_author .social-ballbdrs li.youtubeball a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioucRy3QURm7ZXwbYrdPb5z_c-mGRMVHxnB7b6kKTMOYjSU0GLARZbf0zA9zoS0FvGdflSn0unJgasQ9uF8lKp4I8uPhC6E1xEJYjlTYjRjxv5pId2eUxsQFvr_ZTWdNWmXZWNoDppt3s/s1600/youtube.png') no-repeat 0 0;
}
#boxbdrs_author .social-ballbdrs li.youtubeball a:hover {
background-color: #f45750;
}
#boxbdrs_author .social-ballbdrs li a:hover {
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
border-radius:50%;
}
#boxbdrs_author .social-ballbdrs li a:visited, #boxbdrs_author .social-ballbdrs li a:active{
background-position: 0 -40px;
box-shadow:3px 3px 10px 2px #333 INSET;
}
/*--------------------------------------------------
SUBSCRIBE BLOG DESIGN
---------------------------------------------------*/
#boxbdrs_author .BD-submin input{
border:1px solid rgb(9, 149, 223);
border-radius:10px 10px 10px 10px;
font-size:14px;
padding:10px;
text-shadow:1px 1px 0 #FFF;
width:22%;
color:#666;
font-family:georgia;
margin-bottom:5px;
border: 1px solid rgb(9, 149, 223);

border-color: #333;
background-color: #eee;
}
#boxbdrs_author .BD-submin input:hover{

background-color: #FFFFFF;
box-shadow:0 0 5px #000 inset;
}
#boxbdrs_author .BD-submin .submit{background:#09f;
border: 1px solid #333;
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:10px;
padding:3px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:auto;
height:37px;
background-color: #333333;
}
#boxbdrs_author .BD-submin .submit:hover{background-color: #666;
color: #CCCCCC;box-shadow:0 0 5px #000 inset;
}
#boxbdrs_author .bdrscss-tanggal {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
text-shadow: 2px 2px 1px #999;
font-size: 20px;
text-align: center;
font-weight: bold;
padding:20px 1px;
font-style: italic;
}

Install Program Tag HTML

• Setelah anda sudah memasang CSS widget author box ini, saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
  
  
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
• Edit kode html widget author box ini dan save template anda kemudian lihat hasilnya, selamat berkarya.

<!-- Rivai Silaban | BLOG DESIGN CODE widget author box start -->
<div id="boxbdrs_author">
<div class="gambar-style gaya rotated"><div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg-2IFYC1QFZf6PzeN7I4iiQO2TZDL7_DK_JKTIGbKE0AgwvtucOgGElqSOc6UUzafJfwVkxHHeBJtT83_M0-Dehl9_0baWwtgBhZwqN8xYFJGZWhSdvJsHhtdOVsa-aHct0bk2TdROQ/h120/rivai.jpg" alt="admin" title="admin"/><br/><h2>Rivai Silaban</h2></div>
</div><h3> Blog Design</h3>
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya. <a class="link" href="LINK PROFIL ANDA" target="_blank" title="About Me"> readmore &rarr; </a>
<!-- BDRS widget Date code start -->
<div class="bdrscss-tanggal">
<SCRIPT language="JavaScript" type="text/javascript">
//Ganti nama hari dan bulan, sesuai dengan bahasa anda.
var dayNames = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");
var monthNames = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli",
"Agustus","September","Oktober","Nopember","Desember");var dt = new Date();
var y = dt.getYear();
if (y < 1000) y +=1900;// format tahun
document.write(dayNames[dt.getDay()] + ", " + dt.getDate() + " " + monthNames[dt.getMonth()] + " " + y);
</SCRIPT>
</div>
<!-- BDRS widget Date code end -->
<div style="clear:both">
<div class="social-ballbdrs">
<ul>
<li class="twitterball"><a target="_blank" href="LINK TWITTER ANDA" rel="nofollow" title="twitter">twitter</a></li>
<li class="googleplusball"><a target="_blank" href="LINK GPLUS ANDA" rel="nofollow" title="gplus">googleplus</a></li>
<li class="facebookball"><a target="_blank" href="LINK FACEBOOK ANDA" rel="nofollow" title="facebook">facebook</a></li>
<li class="rssball"><a target="_blank" href="LINK RSS FEED ANDA" rel="nofollow" title="rss">rss</a></li>
<li class="youtubeball"><a target="_blank" href="LINK YOUTUBE ANDA" rel="nofollow" title="youtube">youtube</a></li>
</ul>
<div class='BD-submin'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ID FEDBURNER ANDA &#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Enter Email";}' onfocus='if (this.value == "Enter Email") {this.value = ""}' type='text' value='Enter Email'/>
<input name="submit" type='submit' class='submit' value='subscribe'/>
<input name='uri' type='hidden' value='ID FEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
</form></div></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE widget author box End -->

Keterangan Gambar

• Code warna MERAH ganti dengan ID Fedburner anda.
• Code warna BIRU ganti dengan link anda.
• Code warna KUNING ganti dengan text profil anda.
• Code warna HIJAU ganti dengan link gambar anda.
• Silahkan anda edit kode widget author box ini sesuai dengan thems template blog anda.

Kesimpulan

Widget author box pada postingan kali ini saya padukan dengan widget social media, widget subscribe, widget tanggal dan widget profil, sehingga menghasilkan satu widget komplit buat para blogger mania.

Bila anda mengalami masalah dalam pemasangan widget author box ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Widget author box
Sabtu, 9 November 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:40 PM