Post Title : Add to blog posts widget and beautiful effects with CSS author . Posted By : Unknown Category: Rating : 100% based on 10 ratings. 10 user reviews.| Post views: Viewed – Written of 0 great posts on TONEYSOFT-BLOG. Item Reviewed: Add to blog posts widget and beautiful effects with CSS author . 9 out of 10 based on 10 ratings. 9 user reviews. 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.

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

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.

Then click on Edit HTML.

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;}

.authorDetailsspan{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 .

<divclass='articleAuthor'>

<divclass='authorContent'>

<divclass='authorLeft'>

<divclass='authorAvatar'>

<imgalt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DHXzS-4ixnKarj4NTVNfjhPcM0OE9U-D2PMF6g7V4P41536xBKHz2UII28QX1BjRHuk22xJ4PhxJ8F-Ob0DALOX3QYgCs2fjG4-LilbHB-lqu8qcgMttC5RZ0Mj_Py8CBkTFkvPBb4F0/s1600/half.jpg' width='120'/>

</div>

</div>

<divclass='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 .