Cara Menampilkan Biografi Penulis Di Blogger

Contoh Biografi Di Blogger

Bismillahirohmanirrohim, Selamat siang sahabat tugaselesai. Pastinya ada seorang pembaca setia sebuah situs atau pengunjung setiap membaca artikel di situs internet, maka dia mungkin ingin tahu bahwa oleh siapa artikel ini telah ditulis. Nah untuk itu Cara Menampilkan Biografi Penulis Di Blogger ini berguna bagi sahabat blogger yang ingin menampilkan bigorafinya sebagai penulis di situsnya. Admin disini tidak hanya membahas tentang menampilkan biografi penulis di blogger tapi juga membahas untuk mempercantik tampilan biografi yang akan tampil nantinya. Sehingga nantinya si pembaca akan tambah tertarik untuk membaca biografi penulisnya lebih lanjut.

Cara Menampilkan Biografi Penulis Di Blogger

Kotak biografi penulis ini berisi gambar, biografi penulis, tombol sosial, feedburner untuk berlangganan juga ada disini. Tombol sosial networknya berupa google +, facebook, dan juga twitter. Widget ini dibuat murni dengan CSS3 dan HTML. Jadi tidak perlu berlama-lama lagi berikut Cara Menampilkan Biografi Penulis Di Blogger:
1. Hal pertama yang perlu kita lakukan adalah membackup tamplate kita ketika ingin mengubah-ubah isi tamplate kita untuk berjaga-jaga.
2. Silahkan sahabat buka Blogger >> Template >> Backup Template Kita.
3. Edit Tamplate >> Lalu centang expand widget tamplate.
4. Cari kode ]]></b:skin>
5. Patekan kode dibawah ini tepat diatas kode ]]></b:skin>

.mdauthor_info{
float:left;
width:550px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;color:#000;
}
.mdauthor_info:hover{
background:#eee;
border:1px solid #ccc;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
}
.mdauthor_info h3{
color:#000;
margin-bottom:10px;
}
.mdauthor_info h3:hover{
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
}
.mdauthor_photo{
float:right;
margin:0 0 0 10px;
}
.mdauthor_photo img{
border:1px solid #666;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;
}
.mdauthor_photo img:hover{
background:#FFFFFF;
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
ul.mdsocial{
list-style:none;
margin:10px;
overflow:hidden;
}
.mdsocial li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.mdsocial li a{
display:block;
width:40px;
height:40px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhii5wuN2eiaiPey8yFbmJnlYcP5CaV8UDirhyGFXZvMsJ2Jvh4g_ekBeJabGHpBYZQAio3AxsGTQAJnw14uBjjnRgtfewj02rF8kVD9vcbSqUJUCaepYpa13xuLWstviBwUBtrCm1Rkxog/s1600/social.png") no-repeat transparent;
text-indent:-99999em !important;
}
.mdsocial li a:hover{
padding:0 !important;
}
.mdsocial li.rssicon a{
background-position:0 0;
}
.mdsocial li.twicon a{
background-position:-50px 0;
}
.mdsocial li.fbicon a{
background-position:-100px 0;
}
.mdsocial li.gicon a{
background-position:-150px 0;
}
.mdsocial li.rssicon a:hover{
background-position:0 -50px;
}
.mdsocial li.twicon a:hover{
background-position:-50px -50px;
}
.mdsocial li.fbicon a:hover{
background-position:-100px -50px;
}
.mdsocial li.gicon a:hover{
background-position:-150px -50px;
}
.mdlinediv{
margin-top:25px;
height:0px;
clear:both;
display:block;
border-top:1px solid #fefefe;
border-bottom:1px solid #CCCCCC;
}
.mdemailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.mdemailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.mdemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.mdemailform{
position:relative;
width:250px;
margin:0 auto;
}
.mdemailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.mdemailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.mdemailbutton{
padding:8px !important;
}
.mdemailform, .mdemailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}

6. Cari Kembali Kode <div class=’post-footer-line post-footer-line-1′>
7. Paste kode ini di bawah kode <div class=’post-footer-line post-footer-line-1′>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mdauthor_info'>
<div class='mdauthor_photo'>
<img alt='author' height='150' src='Author Image URL' width='150'/>
</div>
<h2 style='color:#444;font-family:verdana;text-shadow: 3px 3px 3px 3px #ABABAB;'>This Post Was Written By :</h2>
<p>Author Bio Goes Here</a></p>
<div class='mdlinediv'/>
<div class='mdemail'>
<small style='text-align:center;'>Get Free Email Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='mdemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedUsername&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='FeedUsername'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mdemailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
 <input class='mdemailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='mdsocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/FeedUsername'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/TwitterUsername'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/FB Username'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/G+ ID'>Google +</a>
</li>
</ul>
</div>
</b:if>

•  Sahabat Ganti Author Image URL Dengan url gambar Sahabat.
• Ganti Author Bio Goes Here Dengan Biografi kita.
• Ganti FeedUsername Dengan Feed Burner Username Milik Kita.
• Ganti TwitterUsername Dengan Twitter Username Kita.
• Ganti FB Username Dengan Facebook Fan Page Username Milik kita.
• Ganti G+ ID Dengan Google Plus ID Punya Kita.
• Yang terakhir Click Save Template!
• Selesai Sudah.

Sekarang dengan Cara Menampilkan Biografi Penulis Di Blogger, sahabat sudah mempunyai sebuah biografi penulis di bawah artikel sahabat, semoga artikel ini berguna untuk sahabat tugaselesai. wasalamualaikum wr wb. Keep blogging my friend...

Cara Menampilkan Biografi Penulis Di Blogger