Add to blog posts widget and beautiful effects with CSS author .

Add to blog posts widget and beautiful effects with Awesome CSS author.


Take a nice blog and the author CSS colorful widget below each post. And with his own blog as day. 
Add to blog posts widget and beautiful effects with CSS author.


1




How do add up. Click to login to the Dashboard of your blog template


Unnamed+image


Then click on the backup / restore, click the Download Full Tamplate Take now your Tamplate the backup.  Because Tamplate Edit Template before you bring the good things to protect from damage.


Unnamed+image+%25281%2529


Then click on Edit HTML.


Unnamed+image+%25282%2529




Now the author CSS, widget add a keyboard to the search box,


Ctrl + F key press Enter. ]]> </ B: skin> press enter when you find the CSS code
]] ></ b: skin> Paste the above.


/* CSS Author Box */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#4791d2;padding:0;margin:1px;margin-bottom:0;border:double #fff;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:true;}
.authorLeft .authorAvatar img{background:#222;display:inline-block;}
.authorDetails{overflow:hidden;margin:10px 0 0 0;}
.authorDetails h2{font-size:14px;color:#fff;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#fff;background:#6bb1ee;padding:4px 8px;display:inline-block;font-size:14px;margin-left:5px;border:double #4791d2;}
.authorDetails h2 a:hover{color:#6bb1ee;background:#fff;border:double #4791d2;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#fff;line-height:20px;margin:0 10px;font-size:12px;}”</



Agian Enter this code into the search box. 



<div class = 'post-footer-line post-footer-line-1'> press enter when you have found the code below 
<div class = 'post-footer-line post-footer-line-1'> and paste the below .


<div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi188MzUfDkqYuZWelt3rbeYfhBULK-ylJQf7RjjESf4yewnXyd11GgNfCMGppcDNTH7uFZQSUwJPP_U6wjc1GJ1bvxDuUcisF3t19ER-qMg68AqA8kxkZTcPCE7yYdYeLJFoLJjNraqCII/s1600/half.jpg' width='120'/>
</div>
</div>
<div class='authorDetails'>
<h2>About Me <a href='#' rel='author' title='Posts by Admin'>TONEYSOFT</a></h2>
</div>&lt;
<p size='5' align='center'>
  <big><strong><b>Md. Eng. Xamil Hasan</b></strong><i><br /> Bsc in Computer Secience.<br/> "Microsoft Gold Critificate" Of Programminbrg.< />
     IT Media From Autocad and 3d Design ecours</i></big><br /><b>Join him on</b
>
&
lt;/br&gt;&lt;hr&gt;<font size='4' color='green' align='right'>
   <a href='https://plus.google.com/+Toneyysarkar/'><font color='ff3333'><b>Google+ </b></font></a> |
  <a href=' https://www.facebook.com/toney.sarkar'><font color='336699'><b>Facebook</b></font></a> |
  <a href='https://twitter.com/Toneysoft'><font color='3366cc'><big><b>Twitter</b></big></font></a>  |
  <a href='https://bd.linkedin.com/pub/md-jamil-hassan-toney-sarkar/95/7a5/2a8'><font color='ffffff'><b>LinkIn</b></font></a></font> |
<a href='https://www.youtube.com/channel/UChJS_YAvaHdZ6rFepGN8uBg'><font color='ff3333'><strong><big><b>YouTube</b></big></strong></font></a>
</
p>
<
/div>
</div>
<div style='clear:both'/>

</b:if>


Now you can link your name and Social Address and change the image url Hightlighted color  . It is recommend that before the note pad . See this article for adding effects to the image . 

Thanks , everyone will be better and be healthy . Allah Hafiz .

Technology

Toneysoft