Home » Blogger Tutorials » Blogger Widgets » Add an Attractive Author Box in Blogger

Add an Attractive Author Box in Blogger

Category: , | Date: 4/14/2013 - No comments
Hello friends today i will share the new kind of Guest Author Box This widget is fully SEO optimized and looks good in all blogger template.
Get bellow to take advantage of this widget.Bellow i am sharing full steps to place this widget in your blogger template bellow every post.

How To Add Attractive Author Box In Your Blogger Blog ?


Step 1: Go to your Blogger dashboard > Navigate to template tab.> Click Expand Template Widget.

Step 2: Place Bellow Font HTML code after <head>  tag.


<link href='http://fonts.googleapis.com/css?family=Nobile&amp;v1' rel='stylesheet' type='text/css'/>

Step 3: Find Bellow Code in your template.


]]></b:skin>

Step 4: Paste Bellow CSS code Just before it. 


.tricksnhacks-box {background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #B3B3B3 100%);  border-bottom: 3px solid #000;font-size: 15px;font-family: 'Nobel', serif;font-weight:350;line-height: 1.5em;margin: 0 0 20px;padding: 10px;-webkit-border-radius: 20px;-moz-border-radius: 20px;min-height: 70px;}.tricksnhacks-box img {opacity: 1;margin-left: 2px;border: 2px solid #737373;-webkit-border-radius: 50px;-moz-border-radius: 50px;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;}.tricksnhacks-box img:hover {opacity: 0.5;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;} #backlink {font-size:6px;text-align:center} #backlink:hover {   font-size:10px;text-align:center}

Step 5: After doing the above steps,find bellow HTML code in your blogger template.


<div class='post-footer'>

Step 6: Paste Bellow HTML code After the above code.


<div class="tricksnhacks-box"><img alt="Author" border="0" height="64px" src="Your Image link her" style="float: left; margin-right: 5px;" /><b>Author - </b>My name is <b><a href="Your google plus profile url here" target="_blank"><span style="color: red;">Your Name Here</span></a>.&nbsp;</b>Admin and Owner of &nbsp;<a href="http://tricksnhacks.in/"><b><i>Tricksnhacks.in</i></b></a>. I just love to share my idea which i know.I love blogging a most.Find my another websites <b><span style="color: #274e13;"><a href="http://www.mediarls.com/" target="_blank">Free Movie download</a></span></b>, which i created it with my own experience and thats my first website. <div id="backlink"><a href="http://goo.gl/FyO8B">Get This</a></div></div>

Save Your Template!
Now you had done!

Keep Visiting for More Articles and Tutorials. :) Like our Official Page for More Updates... Our Downloading Portal Website. FileXOne!

Post a Comment