Blog Ke Sabhi Post Ke Niche Author Box Kaise Add Kare

नमस्कार दोस्तों ! आज मैं आपको बताने वाला हूँ कि blog के सभी post के नीचे Author Box को कैसे लगाते है | इस author box को blog में लगाने के लिए आपको HTML और CSS code को blogger template में add करना पड़ेगा |

मैंने पिछले post में author profile widget को blog में add करने के लिए बतलाया था | इस widget में सिर्फ HTML code का इस्तेमाल किया गया था | Author box में author के बारे में कुछ जानकारियां होती है |

Author box को blog के post के अंत में लगाना बहुत अच्छा होता है | यह हमारे blog को एक अच्छा-सा look देता है | यह author box fully responsive design है | इसमें बहुत ही simple CSS code का प्रयोग किया गया है | यह आपके blog के loading speed पर कोई भी प्रभाव नहीं डालेगी |

Read Also :

• Contact Form Widget को Blogger में कैसे Add करे ?


• Blog के हर Post में Meta Search Description को Enable कैसे करे ?

Blog के सभी Post के नीचे Author Box कैसे Add करे ?

Step 1

सबसे पहले blogger account में login करके blog के dashboard पर जाए |

1. Layout पर click करें |


2. Blog posts section में Edit पर click करें |

Step 2

Edit पर click करने के बाद एक popup window open होगी |

1.  Show Author Profile Below Post के सामने check box में tick करें |


2. Save पर click करें |

Step 3

Note :- Code को template में add करने से पहले अपने blogger template का backup जरूर ले लें |

अब आप अपने blog के dashboard पर जाए |

1. Theme पर click करें |


2. Edit HTML पर click करे |

Step 4

अब code box में कहीं पर भी click करें और Ctrl + F key press कर search box में ]]></b:skin> लिखकर search करें |

]]></b:skin> के पहले या ऊपर निम्नलिखित CSS code को copy करके paste कर दें |

/*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 5

1. अब <data:post.body/> search करें |


2. <data:post.body/> के बाद या नीचे निम्नलिखित HTML code को paste कर दे |

<div class=”about-author”><h3>About Author:</h3><img align=”left” src=”Paste Your Image URL Here“/><p>Write Something About Yourself</p><br/><p>Let’s Get Connected: <a href=”http://twitter.com/newfeatureblog” rel=”nofollow” target=”_blank”><font color=”#00aced”>Twitter</font></a> | <a href=”http://www.facebook.com/newfeatureblog” rel=”nofollow” target=”_blank”><font color=”#3b5998″>Facebook</font></a> | <a href=”http://plus.google.com/110821185771963822382” rel=”nofollow”><font color=”#dd4b39″>Google Plus</font></a></p></div>

Note :- इस HTML code में आपको कुछ customization करना है |

1. Paste Your Image URL Here के place अपने image का URL अथवा link डाले |


2. http://plus.google.com/110821185771963822382 के place पर अपने Google Plus Page का URL डाले |


3. About Author : के place पर अपना नाम लिखें |


4. Write Something About Yourself के place पर अपने बारे में कुछ लिखें |


5. http://twitter.com/newfeatureblog के place पर अपने twitter page का URL लिखें |


6. http://www.facebook.com/newfeatureblog के place पर अपने facebook page का URL लिखें |

Step 6

Save Tempate पर click करें |

Note :- <data:post.body/> code blog के template में कई स्थान पर होते है | अगर Author box show न करे तो दूसरे वाले <data:post.body/> के नीचे HTML code को paste कर try करे |

अपने Photo अथवा Image का link (URL) कैसे पता करें ?

1. Post >> New Post पर click करके post editor को open करें और photo को upolad करें |


2. अब compose और HTML option में से HTML पर click करें |


3. Coding में src के सामने वाला link आपके photo का link होगा |

Read Also :

• Facebook पर Single Name कैसे Set kare ?


• Mobile Phone Ki Battery Life कैसे Increase करे : 12 Tips

उम्मीद है कि आपको यह post पसंद आया होगा | Author box को blog में add करने में कोई problem आती है तो मुझे comment करके बताये | मैं आपकी मदद करने का पूरी कोशिश करूँगा | इसी तरह का post पढ़ते रहने के लिए मुझे subscribe  करें |

अगर यह post आपको पसंद आया हो तो इसे facebook, twitter, google plus इत्यादि जैसे social sites पर share करें | इस post को like करें|

The post Blog Ke Sabhi Post Ke Niche Author Box Kaise Add Kare appeared first on New Feature Blog.