How To Add Fanciest Author Box Below Posts In Blogger

How To Add Fanciest Author Box Below Posts In Blogger - Hallo sahabat Information About Blogger, Pada Artikel yang anda baca kali ini dengan judul How To Add Fanciest Author Box Below Posts In Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widgets And Gadgets, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : How To Add Fanciest Author Box Below Posts In Blogger
link : How To Add Fanciest Author Box Below Posts In Blogger

Baca juga


How To Add Fanciest Author Box Below Posts In Blogger


Author box is among the trending widgets now a days because people who have blogs or websites want to get more followers and stay in touch with their fans. My recent post was also about "Author boxes with different styles for blogger" and once again I am about to share a new author box which will be added below every post in your blog. It is called fancy author box. It is designed with javascript and css and doesn't effect your blog's load time.


If you liked this gadget and want to add it in your blog below every post then follow below mentioned steps:

Step 1: Go to blogger dashboard and navigate to template.




Step 2: Click inside the code and search for below code by using Ctrl+F on your keyboard:



<div class='post-footer'>

how-to-find-code-in-blogger-template

Step 3: You will find the above code two times if you are using simple template but if you are using a custom or other template then you will find it many times. Now copy the below code and paste it after the second code in simple template and in other template paste it after third code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.css">
<link rel="stylesheet" href="https://rawgit.com/101Helper/docs/master/fanciest.css">
<div id="tabs">
<ul>
<li><a href='#fragment-1'><i class="fa fa-user" aria-hidden="true"></i> Bio</a></li>
<li><a href='#fragment-2'><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
<li><a href='#fragment-3'><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
<li><a href='#fragment-4'><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
<li><a href='#fragment-5'><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google+</a></li>
</ul>
  <div id="fragment-1">
<img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/>
<h4>Fahim Raza</h4>
<p>I am fahim Raza and this fancy author box is designed by me. Its free for blogger. Do not Remove copyright tag. </p>
<a id="bout" href="https://101helper.blogspot.com/2015/06/how-to-add-fanciest-author-box-below-post-blogger.html">101Helper</a>
  </div>
  <div id="fragment-2">
<iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2F101helperblogspot&width=64&height=65&layout=box_count&size=small&show_faces=false&appId" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
  <div id="fragment-3">
<a href="https://twitter.com/the101helper" class="twitter-follow-button" data-show-count="false">Follow @the101helper</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div id="fragment-4">
<span class="ig-follow" data-id="5479dee" data-handle="USERNAME" data-count="true" data-size="medium" data-username="false"></span>
<script>(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//rawgit.com/101Helper/docs/master/instagram.js";s.parentNode.insertBefore(g,s);}(document,"script"));</script>
  </div>
  <div id="fragment-5">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="//plus.google.com/u/0/109303537659462705427" data-rel="publisher"></div>
  </div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</b:if>


how-to-add-fancy-author-box-in-blogger

Step 4: Make changes in the above code according to your choices. I have highlighted my name and links all you have to do is to replace them with your name and social profile links.


Step 5: Click on save template and you are done.



how-to-save-template-in-blogger

Replace links and usernames with your own usernames. 

Note: Don't remove the 101Helper tag from widget, it will be our copyright violation and you will be reported to Google if tag removed widget was found on your site.

I hope you like this gadget and its working in your blog, if not please let me know by leaving a comment below. 

Try more blogger gadgets and widgets here.

Follow and subscribe below to get latest blogger gadgets news.

Share this post with other bloggers around you!


Search tags: How To Add Fanciest Author Box Below Posts In Blogger, Fancy author box for blogger, Fancy author box blogger, Author boxes for blogger with different styles, all in one author box blogger,101Helper gadgets for blogger.



That is the discussion about How To Add Fanciest Author Box Below Posts In Blogger

Thank you for visiting the article How To Add Fanciest Author Box Below Posts In Blogger hopefully always provide useful information, see you in another article.

the article you are reading is about How To Add Fanciest Author Box Below Posts In Blogger with the link as follows https://www.booknagar.com/2015/06/how-to-add-fanciest-author-box-below.html

0 Response to "How To Add Fanciest Author Box Below Posts In Blogger"

Post a Comment


Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog