Blogger Blog Me Professional Author Box Kaise Add Kare

Blogger Blog Me Professional Author Box Kaise Add kare

Hallo dosto agar aap blog mein author box use nhi kar rahe hai to aap ek bahut badi opportunity miss kar rhe hai kyu ke agar aap ek blogger hai aur logo ko aap ke article pasnd aa rhe hai to wo aap ke baare mein jarur janana chahenge. So apne blog mein hmesa ek acha unique author box jarur use kare. Yaha par mai aap ko blogger blog mein professional author box kaise add kare ke baare mein btaunga jo aap ke blogger blog ke author box ko ek professional look dega aur sab se unique show hoga. Aur aap sab to jante hi hai ke blog ka design blog ki traffic bdhane mein kitna helpful hai. So hmesa ek author box use jarur kare.

Professional author box kaise add kare

Apne blog mein professional author box ko add karne ke liye aap  ko sab se phle ye bta du ke agar aap blogger ke phle se diye huye templates ka use kar rahe hai tabhi ish trick ko use kare. Otherwise na kare . Kyu ke blogger blog mein author box add krne ki ye tips sirf ushi template ke anusar bnayi gyi hai. Lekin agar aap  custom template ka use kr rahe to mai ush ke baare mein bhi ishi post mein btaunga. To ab aap blogger blog mein author box ko add krne ke liye tips ko follow kare.

Professional author box ke features

1 Professional Look

2 fully Responsive design

3 css design bahut hi simple hai

4 use krna bahut easy hai.

5 sort css code use kiya gya hai jo site loading speed ko kam nhi karta hai.

6 aap ke blog ke template ko suit karta hai.

Professional Author Box Add karne ki steps

Note: steps ko follow krne se phle apne blog ka template download kar le.

Step 1

Professional author box ko apne blog mein add krne ke liye dashboard par click kar kre aur template ki edit section ko open kare.

Step 2

Ab aap ctrl+f ki help se nich diye gaye code ko search kare

]]></b:skin>

Step 3

Ab jo maine niche html code diya hai ushko upr waale code ke just upar copy kar ke paste kare.

/*Professional Author Box CSS Code*/

.about-author {

width : 750px;

overflow : hidden;

margin:10px 0px;

border:0px;

background: #f2f2ef;

margin: 0 0 30px 0;

padding: 10px;

border: 1px solid #EAEDEF;

overflow: hidden;

color: #333333;

font-size: 14px;

font-family: Georgia, Tahoma, Verdana;

line-height: 24px;

}

.about-author img {

display: block;

width: 90px;

height: 90px;

margin: 0 1.2em 0 0;

float: left;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

-webkit-border-radius: 999em;

-moz-border-radius: 999em;

border-radius: 999em;

border: 2px solid #ddd;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

.about-author h3{

font-family:georgia !important;

font-size:18px !important;

margin:9px 0px !important;

color:#666 !important;

border-bottom:2px solid #666 !important;

border-top:0px !important;

}

.about-author p {

margin:0px;

text-align:justify;

color:#666;

}

/*Professional Author Box CSS Code*/

 Step 4

Ab aap jo mai niche code bta rha hu ushko search kare.

<data:post.body/>

Step5 

Ab aap upar waale code ke niche jo mai code btaunga ushko copy kar ke paste kar de.

/*Professional Author Box HTML Code*/

<div class="about-author">

<h3>About Author:</h3>

<img align="left" src=" paste your image url here "/><p>yaha aap apne bare description likhe </p><br/>

<p>Let's Get Connected: <a href=" http://twitter.com/blogtipshub " rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href=" http://www.facebook.com/blogtipshub " rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href=" http://plus.google.com/blogtipshub " rel="nofollow"><font color="#dd4b39">Google Plus</font>

</a></p>

</div>

/*Professional Author Box HTML Code*/

Customizastion :

1 "paste your image url" ki jagah apni image ka url link paste kare.

2 "yaha par apna description likhe" ki jagah aap apna full description likhe.

3 "http://twitter.com/blogtipshub" ki jagah aap apna twitter account url add kare.

4 "www.facebook.com/blogtipshub" ko apne facebook page url se replace kare.

5 "http://plus.google.com/blogtipshub " ko apne google account url se replace kare. 

Step 6

Ab aap apna template save kar de.

Custom template mein author box kaise show kare.

Dosto agar aap ek custom blogger template use kar hai to niche ke steps ko follow kare

Step 1

Go to Blogger dashboard> template> edit html par click kare.

Step 2

Ab aap apne blog mein author box ki jagah jo likha hua aa rha tha ushko ctrl+f key ki help se search kare. Ab aap upar btaye huye code ki jagah par phuch gye hai to setp 5 ko follow karte huye apna description likhe aur imag url ki jagah apni image ka url daale. Agar social plugins show ho rhe ho tbhi aap apne blog se related social sites ke link add kare.

Note: agar author box show nhi ho rha hai to aap blogger dashboard mein jaaye aur layout par click kare ushke baad main blog post ke edit option par click kare. Yaha par niche aap ko show author likha hua milega ushme right click kare aur save kar de.

Step 3

Ab apna template save kare.

Final words

Dosto  upar diye gaye steps ki help se apne blogger blog mein professional author box add kare . Agar aap ka koi confusion hai to comment kare aur post ko share kare.