हमें अपने blog का Design करना बहुत important होता है. हर blogger चाहता है की उसके blog का look अच्छा हो. आप भी अपने blog का design अच्छा करना चाहते हो तो इस post में हम आपको Blog में Author box लगाने के बारे में बताएँगे।

अगर आप एक blogger हो तो आपको आपको अपने visitors के साथ अच्छा तालमेल रखना बहुत जरुरी होता है. आपके visitors की आपके बारे में अच्छी जानकारी होने चाहिए जिससे आपके visitors के साथ अच्छा सम्बन्ध होगा और वो आपके blog को कभी भूल नहीं पाएंगे।

Author box ब्लॉग में क्यों add करें
आपके readers आपके बारे में जानने के लिए उत्सुक रहता है। आपके readers को आपके बारे में पूरी तरह से जानकारी होना बहुत जरुरी होता है की आप कौन हो,कहा से हो ये जानकारियां आपके readers को मालूम होगा तो आपको उससे relationship बढ़ेगी. और ये आपके blog की traffic बढ़ाने में मदद करेगा।

Author box कैसे Add करे?

अब में आपको एक अच्छा और fancy author box लगाने के बारे में बता रहा हूँ. आप मेरे साथ steps follow कीजिए और आसानी से आप इस widget को अपने ब्लॉग में लगा सकते हो।

Step 1: सबसे पहले blogger में जाकर login कीजिए और Blog Dashboard में जाइये।

Step 2: इस code को copy कीजिए।

 

<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='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>

 

 

 

Step 3: अब Layout>>HTML/Javascript में जाइये और copy किये हुआ code को past करके save कर दीजिए।

Step 4: अब template>>Edit HTML में जाइये और ctrl+f दबा के <div class=”post-footer”>    search कीजिए।

Step 5: अब निचे दिए गए code को  <div class="post-footer"> के निचे past कर दीजिए

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=' #ts-fab-bio-below-16747'>Bio</a></li>
<li class='ts-fab-twitter-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #ts-fab-twitter-below-16747'>Twitter</a></li>
<li class='ts-fab-facebook-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #ts-fab-facebook-below-16747'>Facebook</a></li>
<li class='ts-fab-googleplus-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog ID likhe yaha #ts-fab-googleplus-below-16747'>Google+</a></li>
<li class='ts-fab-latest-posts-link'><a href='http://www.blogger.com/blogger.g?blogID=Apna blog id likhe yaha #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='Image alt text yaha likhe' class='photo' height='80' src='Apna image link likhe' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>Apna nam yaha likhe</h3>
</div>
<div class='ts-fab-content'>
Apne baare me yaha likhe</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-16747'>
<div class='ts-fab-avatar'>
<img alt='Image alt text likhe' class='photo' height='80' src='Apna photo link dijiye' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='http://twitter link yaha likhe'>Twitter user name likhe</a></h3>
<div class='ts-fab-description'>
CEO &amp; Editor, <a href='http://Apne website ka url likhe/ ' target='_blank' title=' http://Apne site ka url likhe '>Apne site title likhe </a></div>
</div>
<br/>
<div class='ts-fab-follow'>
<a class='twitter-follow-button' data-lang="en_US data-show-count=’true’ href="Twitter link'>Follow @Twitter user name</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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-16747'>
<div class='ts-fab-avatar'>
<img alt='Image alt text' class='photo' height='80' src='Image link' 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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> <br/>
<div class='ts-fab-header'>
<h3>
<a href='http://Facebook link'>
Apka nam</a></h3>
</div>
<div class='fb-subscribe' data-href='http://Facebook link' 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='Image alrt text' class='photo' height='80' src='Image link' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='https://Google plus limk?rel=author">Apka nam</a></h3>
</div>
<!-- /.ts-fab-header -->
<g:plus height='69' href='https://Google plus link' width='320'/>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-latest-posts-below-16747'>
<div class='ts-fab-avatar'>
<img alt='image alt text' class='photo' height='80' src='image link ' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
Latest posts by Apka nam <span class='latest-see-all'>(<a href='http://apka website url'>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://www.yoursite.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
</script>
</div>
</ul>
</div>
</div>
</div>
</div>
</b:if>

 

अब जहा जहा red colour है वहां आप setup कर लीजिए उसके बाद template save कर दीजिए।