नमस्कार दोस्तों ! आज हम लोग इस post में blogger से संबंधित एक और नए topic के बारे में जानेंगे कि Blogger Ki Har Post Me Author Profile Box Kaise Lagaye? अगर आप blogging करते हैं और अपने blog के हर एक post में author box बॉक्स लगाना चाहते हैं और आपको author box लगाना भी चाहिए क्योंकि कोई भी visitors आपको इसी author box से पहचानते हैं|
इसलिए आपको अपने blog की हर एक पोस्ट में अपना name photo और अपनी details को जरूर से जरूर add करनी चाहिए ताकि visitors आपको पहचान सके कि इस ब्लॉक का author कौन है|
अगर आप इसे लगाते हैं तो आपके ब्लॉक का एक अलग ही look देता है|आपको author box को अपने ब्लॉग पर लगाने के लिए सबसे पहले आपको HTML और CSS Code को अपने blogger के theme में ऐड करना होगा, तो आइए जानते हैं कि Blogger Ki Post Me Author Box Ko Enable Kaise Kare?
Blogger Blog की सभी Post में Author Box कैसे Add करे?
Step 1.
Blogger पर login होने के बाद सबसे पहले अपने blog के dashboard पर जाइए |
1. layout पर click कीजिए |
2. blog post section में edit पर click कीजिए |
Step:- 2
जब आप edit पर click करेगें तो आपके सामने एक नया page open होगा उसमे show author profile के सामने आपको tick कर देना है|
1. Save पर click कर save theme पर click कर दीजिए|
Step 3.
1. अब आप अपने blog के dashboard में जाइए |
2. Theme > EDIT HTMLपर क्लिक कीजिए |
3. Edit HTML पर click करने के बाद आपके सामने code box आ जाएगा | इस code box में कहीं पर भी क्लिक कर Ctrl+F button दबाकर ]]></b:skin> लिखकर enter कर दीजिए |
4. ]]></b:skin> के ऊपर इस CSS code को copy करके paste कर दीजिए |
इन्हें भी पढ़े –
☛ How To Remove URL ?m=1 In Blogger In Hindi.
☛ Blog Post Me Code Box Kaise Lagaye?
Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |
/* css Author Box start by https://www.techifyideas.com/ */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#f1f1f1;padding:0;margin:1px;margin-bottom:0;border-top:2px solid #e9e9e9;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#f1f1f1;display:inline-block;}
.authorDetails{overflow:hidden;margin:14px 0 0 0;}
.authorDetails h2{font-size:12px;color:#222;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#4db2ec;background:#f1f1f1;padding:4px 8px;display:inline-block;font-size:15px;margin-left:5px;border:double #f1f1f1;}
.authorDetails h2 a:hover{color:#71c5f6;background:#f1f1f1;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#222;line-height:20px;margin:0 10px;font-size:15px;}
/* css Author Box start by https://www.techifyideas.com/ */
Note :- 1
1. आप चाहे तो Background:#f1f1f1 की जगह आप अपनी पसंद का कोई भी color लगा सकते हों।
2. techifyideas.com की जगह अपनी website का URL डालिए |
Step 4.
1. अब आप इसे <data:post.body/> search करें|
2. <data:post.body/> search करने के बाद नीचे दिए HTML code को copy कर इसके नीचे paste कर दीजिए |
Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |
<div class='articleAuthor'> <div class='authorContent'> <div class='authorLeft'> <div class='authorAvatar'> <img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://1.bp.blogspot.com/-7z0dh7nlgh4/X7uG8d3YgZI/AAAAAAAAAjQ/m8iZJAqLWAEwVDlMtgq0IvFUCs0H5pLXQCLcBGAsYHQ/s320/logo.webp' width='120'/> </div> </div> <div class='authorDetails'> <h2> About Author<a href='https://https://www.techifyideas.com/' rel='author' title='Admin'>your name</a></h2> </div> about you </div> </div>
Note :- 2
आपको इस HTML code में कुछ edit करना है |
1. src के सामने वाले link की जगह अपनी photo के link को paste करना है |
2. techifyideas.com की जगह अपनी website का URL डालना है |
3. about us की जगह पर अपने बारे में यानि अपनी details लिखना है |
4. code set करने के बाद last में save theme पर click करे |
अपने Profile Photo का link (url) पता कैसे करें |
1. Post >> New Post पर click कर यहाँ पर आप अपना photo upload करें ¦
2. अब आपके left side में pencil वाले icon पर click कर compose/HTML में से HTML पर click करना है |
3. अब coding में src के सामने वाले link को copy करें |
Note :- 3
आपके blog की theme में <data:post.body/> code कई स्थान पर होते है|अगर author box show नहीं हो रहा है तो आप दूसरे वाले <data:post.body/> के नीचे इस HTML code को paste करके check कर सकते हैं |
यह सब कर लेने के बाद आप अपने blog कि किसी एक post को open करके चेक कर सकते है ¦
इन्हें भी पढ़े –
☛ Blog Me Social Media Follow Button Kaise Add Kare?
☛ Blog Ke Image Ko Optimization Kaise Kare
Conclosion –
उम्मीद करता हूँ कि आपको Blog में About Author Box कैसे Add करे? इसके बारे में पुरी जानकारी आपको हमारे आर्टिकल से मिल गई होगी।
अगर आपका कोई Friend है और वो भी अपने Blogger Ki Har Post Me Author Box Enable Kaise Kare? इसके बारे में जानना चाहते है और उन्हें पता नहीं है की Blogspot Blog में एक साथ सभी पोस्ट में Author Box Enable कैसे करें तो आप ये स्टेप्स अपने Friend को बता सकते है और उनकी मदद कर सकते है।
अगर आप इससे सम्बन्धित कुछ पूछना चाहते हैं या फिर आपके पास कोई सुझाव है तो आप हमें Comment Box में बता सकते हैं | आगे भी ऐसी ही महत्वपूर्ण जानकारी प्राप्त करने के लिए बने रहे Techify ideas पर, धन्यवाद!
