Cara Membuat Author Box Untuk Blogger

Cara Membuat Author Box Untuk Blogger . Anda mungkin pernah melihat Author Box Widget atau Kotak Tentang Penulis di blog. Kotak tentang pe... thumbnail 1 summary

22.01.00

Cara Membuat Author Box Untuk Blogger. Anda mungkin pernah melihat Author Box Widget atau Kotak Tentang Penulis di blog. Kotak tentang penulis sangat berguna untuk ditambahkan di blog Anda sehingga memberikan tampilan yang profesional di blog dan juga hal ini memberikan sekilas informasi tentang penulis.

Ada 2 Author Widget atau Kotak Tentang Penulis. Kotak Tentang Penulis yang akan kita buat ini akan tampil disetiap bawah posting blog Anda dan cara menambahkannya sangat mudah. Selain sekilas informasi tentang penulis, widget dibawah ini juga mempunyai fitur lain yaitu media sosial yang akan menguhubungkan pengunjung dengan akun sosial Anda. Silakan untuk mencoba.

MD Author Box

Login ke Blogger - masuk ke halamanDashboard Blog Anda
Klik Template - Pilih Edit HTML
Tekan Ctrl+F dan cari tag ]]></b:skin>
setelah Anda temukan salin Script STYLE tepat diatas
selanjutnya, cari tag <div class='post-footer-line post-footer-line-1'> gunakan Ctrl+F untuk memudahkan pencarian.
kemudian salin script HTML tepat dibawahnya
klik Simpan Template - selesai

/*****************************************
mulai MD Auhor STYLE
******************************************/
.mdauthor_info{
float:left;
width:550px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;color:#212121;
}
.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/AVvXsEgIPMLmQSfMdmkDWi_o_E3_EKlznm6g2dB6ZfP-BVYCeBp1SHVhZHzwFl_mnDUMrdc717E1_jMMFLVGzTfGfsR4Ry-VUFNP5Fnb7_Nc7Wv7pZHyFqpmJDpVym4NEig5DUXNM96J6iVzVEp7/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;
}
/*****************************************
akhir MD Auhor STYLE
******************************************/


<b:if cond='data:blog.pageType == "item"'>
<div class='mdauthor_info'>
<div class='mdauthor_photo'>
<img alt='author' height='75' src='' width='75'/>
</div>
<h6>This post was written by:</h6>
<small><p>Data penulis </p></small>
<div class='mdlinediv'/>
<div class='mdemail'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='mdemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=thegressnews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='thegressnews'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mdemailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='mdemailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='mdsocial'>
<li class='rssicon'>
<a href=''>Rss</a>
</li><li class='twicon'>
<a href=''>Twitter</a>
</li><li class='fbicon'>
<a href=''>FaceBook</a>
</li><li class='gicon'>
<a href=''>Google +</a>
</li>
</ul>
</div>
</b:if>

Facnciest Author box

Login ke Blogger - masuk ke halaman Dashboard Blog Anda
klik Tata Letak - dan pilih Tambahkan Gadget
Pilih HTML/javascript - dan salin script HTML/JAVASCRIPT
Klik simpan
Selanjutnya, klik Template - dan pilih Edit HTML
Tekan Ctrl+F dan cari tag <data:post.body/>
Saat pencarian ada lebih dari 3 atau 4 kode yang sama, penulis menggunakan kode yang ke-dua.
Kemudian salin tepat tepat dibawah <data:post.body/>
Klik Simpan Template

<script>jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});</script> <style>.ts-fab-wrapper{margin:0 0 2em;clear:both}.ts-fab-wrapper a{text-decoration:none!important}.ts-fab-wrapper img{border:none!important}.ts-fab-list{overflow:hidden;padding:0 0 0 5px!important;margin:0!important}.ts-fab-list li{display:block;float:left;list-style:none;margin:0 5px 0 0!important}.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#e9e9e9;border:1px solid #e9e9e9;border-bottom:none!important;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none!important;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.ts-fab-list li a:hover{color:#333}.ts-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}.ts-fab-list li a{background-image:url('http://www.pagetrafficbuzz.com/wp-content/plugins/fanciest-author-box/images/fab_tab_icons.png')}.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-bio-link.active a{background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link a{background-position:8px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link.active a{background-position:-276px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-latest-posts-link a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-latest-posts-link.active a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-custom-link a,.ts-fab-list li.ts-fab-additional-link a{background-image:none!important}.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0!important}.ts-fab-tab{display:none;border:2px solid #333;padding:12px;background:#fff;min-height:80px}.ts-fab-tab:after{content:'';display:table;clear:both}.ts-fab-tab:first-child{display:block}.ts-fab-widget .ts-fab-tab{padding:8px}.ts-fab-avatar{display:block;float:left;width:64px;height:64px}.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}.ts-fab-avatar img{display:block;border:none!important}.ts-fab-text{margin-left:104px;line-height:1.5}.ts-fab-no-float .ts-fab-text{margin-left:0}.ts-fab-header{margin-bottom:10px}.ts-fab-text h4{clear:none;font-size:18px;line-height:1!important;font-weight:bold;margin:0 0 .2em!important;line-height:1;padding:0}.ts-fab-description{font-size:12px}.ts-fab-follow{margin-top:10px}.ts-fab-latest{margin:0!important;padding:0!important}.ts-fab-latest li{list-style:none!important;line-height:1.1;margin:0 0 .6em!important}.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}.ts-fab-wrapper iframe{margin-bottom:0!important}body.rtl .ts-fab-avatar{float:right}body.rtl .ts-fab-text{margin-left:0;margin-right:76px}body.rtl .ts-fab-list{padding:0 5px 0 0!important}body.rtl .ts-fab-list li{float:right;margin:0 0 0 5px!important}.fb_iframe_widget>span,.fb_iframe_widget>span iframe{min-height:64px!important} </style><div style="overflow:hidden;height: 0px;width: 0px"><a href="http://thegressnews.blogspot.com/">thegressnews</a></div> <!-- end HTML/JAVASCRIPT>

<b:if cond='data:blog.pageType == "item"'> <br/> <div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-16747'> <ul class='ts-fab-list'> <li class='ts-fab-bio-link'><a href='http://www.blogger.com/blogger.g?blogID=ID-BLOG-ANDA#ts-fab-bio-below-16747'>Bio</a></li> <li class='ts-fab-twitter-link'><a href='http://www.blogger.com/blogger.g?blogID=ID-BLOG-ANDA#ts-fab-twitter-below-16747'>Twitter</a></li> <li class='ts-fab-facebook-link'><a href='http://www.blogger.com/blogger.g?blogID=ID-BLOG-ANDA#ts-fab-facebook-below-16747'>Facebook</a></li> <li class='ts-fab-googleplus-link'><a href='http://www.blogger.com/blogger.g?blogID=ID-BLOG-ANDA#ts-fab-googleplus-below-16747'>Google+</a></li> <li class='ts-fab-latest-posts-link'><a href='http://www.blogger.com/blogger.g?blogID=ID-BLOG-ANDA#ts-fab-latest-posts-below-16747'>Latest Posts</a></li> </ul> <div class='ts-fab-tabs'> <div class='ts-fab-tab' id='ts-fab-bio-below-16747'> <div class='ts-fab-avatar'> <img alt='ALT-TEXT' class='photo' height='80' src='URL-PHOTO-ANDA' width='80'/></div> <div class='ts-fab-text'> <div class='ts-fab-header'> <h3>Name</h3> </div> <div class='ts-fab-content'>ISI-DENGAN-SEKILAS-INFORMASI-TENTANG-PENULIS</div> <small><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://thegressnews.blogspot.com/' target='_blank'>Get This Widget !</a></span></small> </div> </div> <div class='ts-fab-tab' id='ts-fab-twitter-below-16747'> <div class='ts-fab-avatar'> <img alt='ALT-TEXT' class='photo' height='80' src='URL-PHOTO-ANDA' width='80'/></div> <div class='ts-fab-text'> <div class='ts-fab-header'> <h3> <a href='http://twitter.com/ID-TWITTER-ANDA'>@bNAMA-ID-TWITTER</a></h3> <div class='ts-fab-description'> CEO & Editor, <a href='http://SITE-BLOG-ANDA.com/' target='_blank' title='http://SITE-ANDA.com/'>NAMA-SITE</a></div> </div> <br/> <div class='ts-fab-follow'> <a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/ID-TWITTER-ANDA'>Follow @NAMA-ID-TWITTER</a></div> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement (s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> <div class='ts-fab-tab' id='ts-fab-facebook-below-16747'> <div class='ts-fab-avatar'> <img alt='ALT-TEXT' class='photo' height='80' src='URL-PHOTO-ANDA' width='80'/></div> <div class='ts-fab-text'> <div id='fb-root'> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <br/> <div class='ts-fab-header'> <h3> <a href='http://www.facebook.com/ID-FANS-PAGE-ANDA'>NAMA-FANS-PAGE</a></h3> </div> <div class='fb-subscribe' data-href='http://www.facebook.com/ID-FANS-PAGE-ANDA' data-layout='standard' data-show-faces='false' data-width='320'> </div> </div> </div> <div class='ts-fab-tab' id='ts-fab-googleplus-below-16747'> <div class='ts-fab-avatar'> <img alt='ALT-TEXT' class='photo' height='80' src='URL-PHOTO-ANDA' width='80'/></div> <div class='ts-fab-text'> <div class='ts-fab-header'> <h3> <a href='https://plus.google.com/u/1/ID-GOOGLE-PLUS-ANDA/posts?rel=author'>+NAMA-ID</a></h3> </div>  <g:plus height='69' href='URL-ID-GOOGLE-PLUS' width='320'/> </div> </div> <div class='ts-fab-tab' id='ts-fab-latest-posts-below-16747'> <div class='ts-fab-avatar'> <img alt='ALT-TEXT' class='photo' height='80' src='URL-FOTO-ANDA' width='80'/></div> <div class='ts-fab-text'> <div class='ts-fab-header'> <h3> Latest posts by NAMA-ANDA <span class='latest-see-all'>(<a href='http://SITE-ANDA.com/'>see all</a>)</span></h3> </div> <ul class='ts-fab-latest'> <div id='hlrpsa'> <script src='http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js'> </script> <script> var numposts = 3;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true; </script> <script src='http://SITE-ANDA.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'> </script> </div> </ul> </div> </div> </div> </div> </b:if>

The Gress News

Senin, 26 Agustus 2013

Cara Membuat Author Box Untuk Blogger