Display Author Profile Below Every Post in Blogger | IT Sat Blogger
Ad Networks Reviews Ad Posting Adobe Photoshop Adobe Photoshop CS3 Adsense Advertising Definition Affiliate Afganistani Channels Alternate Android App Android Mobile as Webcam for PC – Wi-Fi & USB Mode AntiVirus Any Video Converter Apps Arabsat Argent Global Network Avira Biss Keys Black Friday Blog Design Blogger Templates Blogging Blogging Tools Branch Less Banking Broadband Tips Browsers CCcam Section CD and DVD Channel News Channel Updates Chargi Chrome Cinco De Mayo Comments computer Contact Forms Converter CPA CPC CPL CPM CPT CPV Cryptoworks Keys CSS & HTML CTR Cyber Monday DCW Keys Dictionary Digads Digital Receivers Dish Tv Dish Tv Bazar Djuice DM Digital Add New Channel Paksat IR at 38°East Downloader Dreambox Driver Updates Easypaisa Echolink Encryption Software English to Urdu and Urdu to English Dictionary Entertainment Channels Exchange Rate Facebook Fight Sport Firefox Flash Sale Format Factory 3.0 Free Download Wedding Album Maker Gold Software Frequencies Google Chrome Graphics Hosting Sale Hostings Hotspot Shield How To How to Download YouTube Videos on Android Devices How to Generate Adsense Revenue IDM Imtoo Video Converter Indian Channels Infolinks Internet Internet Download Manager Irdeto Keys IT News IT Tips Labels Language Softwares Live Channels Make Money Mardi Gras Sales Media Players MicroBox Mix Receivers Mobilink 3G Mobilink Offers MoboLive Review – Download (.apk) for Android Mozilla MP3 Cutter Mystery Sales NBA POOL EUROPE 1 Update New Biss Key Neosat Nero Burnning Rom 11 News Channels Offers okpay Online Payment Processors Online Sales Online Services OpenBox Optimization Tools Pakistani Channels Paksat Password Manager Payoneer Payza PC Drivers Perfectmoney Photo Editors Pixillion Image Converter 2.28 Posts PowerVu Keys PPC PPV PTC Ptcl Offers Regional Channels Religious Channels RoboForm RPM Samsung J7 Pro Samsung Mobiles Satellite News Satellite Tips and Tricks SEO Tips Sim Lagao Offers Snappy's Birthday Sales Social Media Social Media Exchange Sites Softcam Keys Softwares Sports Channels Sports News Spring Sale St.Patrick's Day Star Track Starsat System Tools Telecomunication Telenor 3G Telenor Offers TeraCopy Full Version Tiger Sat Tiger T800 Mini HD Digita Satellite Receiever New Software Top 10 Top 5 Highest AdSense Earners in the World Total Video Converter 3.61 Tour De Rouge Sale TP Link u Torrent Ufone Offers Ulead 3d 3.5 UltraISO Premium Edition 9 Uploading Valentine's Day Sales Viaccess Keys Video Marketing Video Monetization VLC media player Warid 3G 4G Packages Warid Offers Web Freer 2013 Web Traffic Widgets Windows Wingle WinRAR 4.02 WinZip Pro 17.0 Withdraw Money in Pakistan Wordpress Xiaomi Yayvo Zam tv On Paksat IR at 38°East Zong 3G and 4G LTE Zong Offers Zong Sim Lagao Offer

If your are writing articles on various topics and publish them on your blog then you may be like to display author profile below every post in blogger. By default blogger display the author name with link to blogger profile if Google Plus not linked at the end of each post. Displaying author profile below every post give the chance to visitors so they understand you.
Display Author Profile Below Every Post in Blogger
But many blogger's wants to display their short introduction with avatar and social connections at below of every post. This method is very easy so lets start it.
  • Go to Blogger Dashboard, Layout, and go into blog posts section.
  • Now check/select the "how Author Profile below post" option and save.
  • Now go to Template, Edit Html section and search "]]></b:skin>" tag. 
  • Before/above skin tag paste the following code.
/* Custom Author Profile by www.itsatblogger.com
----------------------------------------------- */
.swt-author {
margin: 1em 0;padding: .5em .25em;
background-color: #f1f4f8;
border: 5px solid #192a3e;
border-style: groove;
overflow: auto;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}

.swt-author:hover img {
border: 2px solid #1ABC9C;
border-radius:100px;
opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.swt-author profile {
font-family:"Times New Roman", Times, serif;
font-weight: normal;
padding:5px 0;
margin:0;
text-transform:auto;
line-height:24px;
word-wrap:break-word;
}
.swt-author profile info {
font-size: 12px;
text-align: justify;
font-family: 'Droid Serif', serif;
}
.swt-author profile img {
float: left;
margin: 5px;
width:100px;
border: 2px solid #192a3e;
border-radius:50px 0;
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
/* Tutorial at: http://www.itsatblogger.com/ */}
NOTE: Delete the lines 3-11 if you have already added it while adding the customised author name.
here
here
here
here

  • Now search following code in your blogger template:
<div class='post-footer-line post-footer-line-1'>
NOTE: You may be found this code 2 time in your blogger template 1st for mobile template and 2nd for desktop template, Thus its depends upon you where you want to display it only for mobile users, desktop users or for both.

  • Now paste following code below/after the searched tag.
<b:if cond='data:blog.pageType == "item"'>
&lt;!—Custom Author Profile by www.superwebtricks.com --&gt;
<div class='swt-author'>
<b><u>About Author:</u></b>
<profile>
<img alt='author' src='https://lh6.googleusercontent.com/-LofL3EnbELo/AAAAAAAAAAI/AAAAAAAADvU/ED8fSbGJZT4/s120-c/photo.jpg'/>
<info> Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. <i><a href='#'>Read More</a></i>...</info>
&lt;/br&gt;&lt;hr&gt;
Join him on
<a href='replace it'>Google+</a> |
<a href='replace it'>Facebook</a> |
<a href='replace it'>Twitter</a>
</profile></div>
</b:if>

customization


  1. Change "About Author" word with your own.
  2. Replace Url with your avatar Url in yellow olor.
  3. Replace "#" with the link of about you page or blogger profile link.
  4. Respectively "replace it" with your Google+, Facebook and Twitter accounts Url's.

Save your template and check your additions and enjoye.

Labels: ,

Post a Comment

Marlene Saffan said... 22 December 2016 at 21:47
This comment has been removed by the author.

Author Name

{picture#http://1.bp.blogspot.com/-60UhuKBkPJg/VqtduelZhHI/AAAAAAAAdUM/VR5bHxk6PMk/s1600/itsatblogger%2Bauthor.jpg} Hello Friends, My name is Muhammad Ahsan Yousuf founder of ITSATBLOGGER and Nusratcollection.com. I'm not guru in blogging but love it try to deliver good and informative content and news to my readers. {facebook#https://www.facebook.com/ahsan9226} {twitter#} {google#https://plus.google.com/u/0/+MuhammadAhsan871} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Contact Form

Name

Email *

Message *

Powered by Blogger.

itsatblogger