Saturday, 8 April 2017

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 के बारे में कुछ जानकारियां होती है |


blog-me-sabhi-post-ke-niche-author-box-kaise-add-kare


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




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



Step 1

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


click-on-layout-and-edit

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



Step 2

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

show-author-profile-below-post-me-tick-kare

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


Step 3

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

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

click-on-theme-and-edit-html

  1. Theme पर click करें |
  2. Edit HTML पर click करे |



Step 4

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

paste-css-code-before-bskin


]]></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


paste-html-code-after-data-post-body-code

  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 होगा |





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

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

2 comments:

  1. Bahut Hi Achi Janakri Hai Or Aapka Blog Bhi Badiya Hai
    www.hindimeseva.com

    ReplyDelete

Comment Rules :

1. Comments deemed to be spam or solely promotional in nature will be deleted.
2. Anonymous comments will be deleted. We only accept comment from posters who identify themselves.

About Admin