Skip to main content

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 पर कोई भी प्रभाव नहीं डालेगी |


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 पर जाए |


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

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

Linkedin Par Apna Account Kaise Banaye

Linkedin aaj ke jamane me ek famous professional social networking sites hai. Linkedin par aapko kitne hi million users mil jayenge jinki madad se aap apne ideas, knowledge ko increase kar sakte hai. Is site par aapko kitne hi professional log milege. Agar aap unke saath business karna chahte hai to yah site aapki bahut help karegi. Yah site aapko job search karne me bhi help karegi. Jyadatar business karne wale log is site par apne business ka promotion ke liye advertising karte hai. Jis tarah se blog ya website ka advertising facebook, twitter etc. par kiya jaata hai, usi tarah se linkedin par bhi aap apne blog ya website ka advertise kar sakte hai aur apni site ya blog ki traffic increase kar sakte hai. Read Also : Facebook पर Account कैसे बनाये ? Facebook पर Single Name Kaise Set करे : Easy Trick Ab hum sidhe apne point par aate hai aur aapko batana start karte hai ki linkedin par...
Post a Comment
Read more

Program Guidelines

Publishers participating in our program are bound by the terms and conditions available  at  http://www.media.net/legal/tos . In addition, all publishers must read and comply with the policies provided below. Media.net reserves the right to change the policies at any time without prior notice to the publisher. The publisher understands that it is their sole responsibility to keep themselves abreast of all policies available here. Media.net reserves the sole right to warn, or without notice, terminate any publisher that is found in violation of these policies. Media.net may make exceptions to any of these policies at their sole discretion. Program Guideline Our program is currently only open to website(s) with premium content that fulfill the criteria specified below: Contain significant amount of original content that is updated regularly and does not infringe any third party intellectual property rights Receive majority of their traffic from US / UK / Canada...
3 comments
Read more

11 Attractive Fast Loading Email Subscription Widget Ko Apne Blog Me Lagaye

Email subscription kisi bhi blogger ke blog ya website ki traffic ko badhane me bahut hi important role nibhati hai. Maine apni pichhli post me iske baare me batlaya tha ki email subscribe box kya hai aur isko blog me kaise lagate hai. Jab koi visitor blogger ke blog par lagaye email subscribe box me apna email dalkar subscribe karta hai to us visitor ke email par ek activation message aata hai. Activation message me link hota hai. Link par click karte hi visitor ke email par free email delivery ki service activate ho jaati hai. Matlab ab agar blogger koi bhi new post publish karega to visitor ko new post ki jaankari direct email par mil jaayegi. Iske baad visitor post ko padhne ke liye blog par visit karega jisse ki blogger ki traffic increase hogi. Yah maine aapko short me iske important ke baare me batla diya. Ab hum sidhe apne point par aate hai. Maine niche 11 email subscription widget ko diya hai. Aapko jo widget pasand aaye usko aap apne blog me lagaye. Widget me aapko kuchh...
Post a Comment
Read more