ब्लॉगर में प्रोफेशनल ऑथर बॉक्स पोस्ट के नीचे कैसे जोड़ें [ How To Add Professional Author Box In Blogger ]

ब्लॉगर में प्रोफेशनल ऑथर बॉक्स पोस्ट के नीचे कैसे जोड़ें [ How To Add Professional Author Box In Blogger ]

क्या आपके ब्लॉग में Professional Author Box है? बेहतरीन ब्लॉग डिज़ाइन के अलावा, आपके ब्लॉग पर "about the author" बॉक्स होना चाहिए। इसमें लेखक के बारे में वर्णनात्मक जानकारी है। यहां तक ​​कि पेशेवर ब्लॉगर भी हमेशा अपने ब्लॉग पर पोस्ट के अंत में लेखक के बारे में "about the author box" जोड़ना पसंद करते हैं, क्योंकि वे जानते हैं कि लोग पोस्ट लिखने वाले लेखक के बारे में बहुत जानना चाहते हैं।

हर कोई अपने Blog or Website को अधिक attractive and professional बनाना चाहता है। इसलिए, मैंने उन blogger platform users के लिए professional author box साझा करने के बारे में सोचा जो अपने blog का रूप बदलना चाहते हैं।


निम्नलिखित tutorial में आप सीखेंगे कि "ब्लॉगर में प्रत्येक ब्लॉग पोस्ट के नीचे पेशेवर लेखक बॉक्स कैसे जोड़ें ( how to add professional author box below every blog post in blogger)" । आप अपने ब्लॉगर टेम्पलेट में CSS + HTML कोड जोड़कर अपने blogger blog में Post Footer में एक author box जोड़ सकते हैं।

पेशेवर लेखक बॉक्स विशेषताएं (Features of Professional Author Box ) :

• प्रोफेशनल लुक (Professional look)
• पूरी तरह उत्तरदायी डिजाइन (Fully responsive design )
• सरल सीएसएस डिज़ाइन (Simple CSS Design)
• उपयोग में बहुत आसान और अनुकूलन (Very easy to use and customizable)
• संक्षिप्त कोड (आपके ब्लॉग लोडिंग गति पर प्रभाव नहीं डालता) (Short code )
• टेम्पलेट के अनुरूप (Suits to your template)

ब्लॉगर में व्यावसायिक लेखक बॉक्स जोड़ना (Adding Professional Author Box In Blogger ) :

Note : सुरक्षित रहने के लिए, मैं आपको परिवर्तन करने से पहले अपने Blogger Template का Backup लेने की अत्यधिक सलाह देता हूं।

Step 1 :    अपने blogger dashboard पर जाएँ >> Template >> HTML संपादित करें:

Step 2:      Ctrl+F दबाकर निम्नलिखित कोड खोजें

]]></b:skin>

Step 3:      अब इस Code के ठीक before / Above, CSS Code का निम्नलिखित Part जोड़ें।

/*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 :    Next search for

<data:post.body/>

Step 5:  अब इस कोड के ठीक just after/below इस HTML code का निम्नलिखित part जोड़ें।

<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/" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> |

<a href="http://www.facebook.com/" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> |

<a href="http://plus.google.com/" rel="nofollow"><font color="#dd4b39">Google Plus</font>

</a></p>

</div>

अनुकूलन (Customization ) :

1. Paste Your Image URL Here : अपना प्रोफ़ाइल चित्र जोड़ें
2. Write Something About Yourself : अपने बारे में कुछ लिखो
3. http://twitter.com/: अपने Twitter पेज URL से बदलें
4. http://www.facebook.com/ : अपने Facebook Page Url से बदलें
5. http://plus.google.com/: अपने Google Plus Page URL से बदलें

Step 6:
Finally, अपना Template सहेजें और Result देखें।

Final Words!

दोस्त! मैं इस पर एक Post लेकर आऊंगा, लेकिन अभी अगर आप यह सुनिश्चित करना चाहते हैं कि इसे मिस न करें, तो हमारे Newsletter की सदस्यता लें!

फिर भी यदि आपके पास प्रक्रिया के बारे में कोई प्रश्न या उलझन है तो बेझिझक Comments के माध्यम से पूछ सकते हैं। मैं आपकी मदद करना चाहूंगा.

तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट "ब्लॉगर में प्रोफेशनल ऑथर बॉक्स पोस्ट के नीचे  कैसे जोड़ें [ How To Add Professional Author Box In Blogger ] " पसंद आई होगी। इसे अपने दोस्तों में शेयर करें ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके, और नीचे कमेंट करें, कि आपको हमारी यह पोस्ट "ब्लॉगर में प्रोफेशनल ऑथर बॉक्स पोस्ट के नीचे  कैसे जोड़ें [ How To Add Professional Author Box In Blogger ] " कैसी लगी। 

यदि आपका कोई प्रश्न है, तो नीचे Comment बॉक्स में हमें बताएं।