Blog में Author Box कैसे Add करें? (Without Plugin)

Blog Me Author Box Kaise Add Kare, Blog में Author Box कैसे Add करें: अगर आप एक Blogger हैं और आपने ब्लॉग पर बहुत ही जानकारी वर्धक आर्टिकल शेयर करते हैं, तो आपको आपने ब्लॉग पर अपने नाम तथा फोटो के साथ अपनी कुछ महत्वपूर्ण जानकारी भी हर एक पोस्ट में शेयर करनी चाहिए।

जिससे कि आपके ब्लॉग पर आने वाले विजिटर्स आपको आसानी से पहचान और जान सकें। कि इस ब्लॉग का Author कौन है। आज के इस लेख हम आपको बताने बताने वाले हैं कि Blog में Author Box कैसे Add करें? क्योंकि Author Box आपके ब्लॉग में Google EAT को बढ़ाने में महत्वपूर्ण भूमिका निभाता है।

WhatsApp Channel Join Now

Telegram Channel Join Now

अगर आप चाहते हैं कि आपके विजिटर आपको पहचाने और आपके ऊपर विश्वास करें, तो अपने ब्लॉग में Author Box अवश्य ही Add करें। तो चलिए ज्यादा समय न वर्बाद करते हुए सीधा चलते हैं अपने लेख पर और विस्तार से जानने कि कोशिश करते हैं कि Blog में Author Box कैसे Add करें?

Table of Contents

Author Box क्या है?

एक ऐसा Box जिसमें ब्लॉग पर अर्टिकल लिखने वाले की Profile यानि उसका संक्षिप्त परिचय होता है। Author Box कहलाता है। Author Box ब्लॉग की हर एक पोस्ट में Content के बाद सभी नीचे मौजूद होता है।

इसमें Author की एक इमेज के अलावा उसका नाम क्या है? वह क्या करता है? उसने यह ब्लॉग किस लिये बनाया है। आदि जानकारी Author Box में प्रदान की जाती है।

Blog में Author Box Add करने के फायदे क्या हैं?

Blog में Author Box Add करने के निम्नलिखित फायदे होते हैं।

Author Box Add करने से ब्लॉग पर विजिटर का विश्वास बनने लगता है।
Author Box Add करने से ब्लॉग का Author विजिटर्स की नजरों में विशेषज्ञ होता है।
Author Box Add करने से विजिटर्स आपके द्वारा दी गई जानकारी से संतुष्ट होते हैं।
Author Box Add करने से आपके ब्लॉग को जल्दी से लोकप्रिय और प्रसिद्ध हो जाता है।
Author Box Add करने से ब्लॉग के Author का नाम फेमस हो जाता है।

Blogger Blog में Author Box कैसे Add करें?

Blogger Blog में Author Box Add करने के लिए आप मेरे द्वारा बताये गये स्टेप्स को फॉलो करें।

Step#1 – सबसे पहले आपको अपने Blogger Dashboard को Log in कर लेना है।

Step#2 – इसके बाद इस ब्लॉग को सेलेक्ट कर लें जिसमें आप Author Box Add करना चाहते हैं यदि आपके पास सिर्फ एक ही ब्लॉग है, तो इस स्टेप्स को Skip कर दें।

Step#3 – अब Layout >> Blog Posts >> Show Author को Enable करना है।

Step#4 – इसके बाद आपको क्रॉल करने और नीचे जाना है। नीचे जाने पर आपको एक ऑप्शन Show Author Profile मिलेगा जिसे भी आपको Enable कर देना है।

Step #5 – इसके बाद Save पर क्लिक करके Layout को सुरक्षित कर दें।

इतना करने के बाद आपके Blog Post में Author का नाम तथा उसकी Profile Show हो गई होगी। चलिए अब आगे जानते हैं कि उसकी Author की फोटो और Author Box को स्टाइलिश कैसे बनायें?

Step#1 – इसके लिए आपको Dashboard >> Theme >> Edit HTML पर क्लिक करना है।

Step#2 – अब आपके सामने आपके ब्लॉग की थीम की पूरी HTML File खुल जायेगी। इसमें आपको Ctrl + F Press करके ]]></b:skin> को Find करना है।

Step#3 – ]]></b:skin> के ऊपर आपको निम्नलिखित Code को Paste कर देना है।

/* css Author Box start by https://www.a2zhindime.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.a2zhindime.com */.

इसमें आप अपने अनुसार Color को Change कर सकते है पर उसकी नॉलेज आपको हो तभी करें।

Step#4 – इसके बाद आप इसी HTML File में <data:post.body/> को Find करें।

Step#5 – अब <data:post.body/> के नीचे निम्नलिखित Code को Paste कर दें।

<div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img decoding="async" alt="jume%2Bdeen%2Bkhan" class="avatar avatar-120 photo dontshowit showit" height="120" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3C/svg%3E" width="120" title="Blog में Author Box कैसे Add करें? (Without Plugin) 5" data-lazy-src="../../3.bp.blogspot.com/-N2mOOAsAbMI/Vdxr_5yH76I/AAAAAAAABbU/eMdnoOf6DrU/s1600/jume%20deen%20khan.png"><noscript><img decoding="async" alt="jume%2Bdeen%2Bkhan" class="avatar avatar-120 photo dontshowit showit" height="120" src="../../3.bp.blogspot.com/-N2mOOAsAbMI/Vdxr_5yH76I/AAAAAAAABbU/eMdnoOf6DrU/s1600/jume%20deen%20khan.png" width="120" title="Blog में Author Box कैसे Add करें? (Without Plugin) 5"></noscript>
</div>
</div>
<div class='authorDetails'>
<h2>
About Author<a href="https://https://www.a2zhindime.com/" rel="author" title="Admin">your name</a></h2>
</div>
about you
</div>
</div>.

Note:

src के सामने जो लिंक है उसके स्थान पर अपनी इमेज के लिंक को Add करें।
A2zhindime.com के स्थान पर अपने ब्लॉग का Url इंटर करें।
About us में अपनी जानकारी प्रदान करें।

Step#6 – अंत में Save पर क्लिक करके Theme को सुरक्षित करें।

अपनी Photo का HTML Link कैसे पता करें?

अपनी Photo का HTML Link करने के लिए आप + New Post पर क्लिक करें।
इसके बाद पोस्ट में अपनी Photo को Add करें।
अब HTML/Compose में से HTML पर क्लिक करें।
इसके बाद आपको src के सामने वाले लिंक को कॉपी कर लेना है। Coding की भाषा में दो तरह के लिंक होते हैं। पहला href तथा src।

Note: Theme की HTML File में <data:post.body/> कई स्थान पर होता है। अगर पहले <data:post.body/> में यह ट्रिक काम नही कर रही है, तो आप दूसरे <data:post.body/> के नीचे कोड़ को Paste कर सकते हैं।

इसके बाद आप अपने ब्लॉग को रिफ्रेस करके चेक करें। आपके Blog Post में Author Box Add हो चुका है।

WordPress Blog में Author Box कैसे Add करें?

यदि आप अपने WordPress Blog में Author Box को Add करना चाहते हैं, तो वर्डप्रेस पर आपको बहुत सारी प्लगइन मिल जायेंगी। जिनकी मदद से आप बड़ी से अपने ब्लॉग पर लेखक की प्रोफाइल को Add कर सकते हैं, लेकिन इससे आपके ब्लॉग की लोड़िंग स्पीड Show हो जाती है क्योंकि आज अपने ब्लॉग में जितनी अधिक प्लगइन का इस्तेमाल करोंगे ब्लॉग की स्पीड उतनी ही कम होगी।

इसलिए हम आपको एक तरीका बताने वाले हैं जिनकी मदद से आप बड़ी आसानी से Without Plugin के अपने ब्लॉग में Author Box को Add कर सकते हैं। इसके लिए आप मेरे द्वारा बताई गई निम्नलिखित प्रोसेस को फॉलो कर सकते हैं।

Step#1 – Elements को Active करें

ब्लॉग में Author Box को Add करने के लिए सबसे पहले आपको Elements को Active करना होगा। इसके लिए आपको Appearance >> Generatepress >> Elements को Active करना होगा।

Note: आपको Generatepress Theme में Elements का Option तभी मिलेगा। जब आप उसका प्रीमियम वर्जन इस्तेमाल करते हैं, यदि आप Free वर्जन का इस्तेमाल कर रहे हैं, तो आप मेरे Telegram Channel को Join कर सकते हैं। वहाँ पर आपको इस थीम का प्रीमियम वर्जन मिल जायेगा।

Step#2 – Elements को Create करें

अब आपको एक Element बनाना होगा। इसके लिए आप Appearance >> Elements >> Add New Element पर क्लिक करें।
इतना करना के बाद आपके सामने एक छोटी सी Popup Window खुलेगी। जिसमें आपको Hook Select करके Create पर क्लिक करना है।
अब आपके सामने एक Page खुलेगा जिसके Title में आपको Author Box लिखना है तथा नीचे गये कोड़ को Copy करके Page में Paste करना है।

<div class="a2zhindime-author-box">
    <div class="insights-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="insights-author-info">
        <div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </div>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p><div class='code-block code-block-7' style='margin: 8px 0; clear: both;'>
<script async src="../../pagead2.googlesyndication.com/pagead/js/fb1fd.txt?client=ca-pub-3696036272707386"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-3696036272707386"
     data-ad-slot="5502668141"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
<div class="author-links">
            <a href="https://a2zhindime.in/" title="Read more about this author" target="_blank" rel="noopener">…</a>
       </div>
    </div>
</div>

इसके बाद नीचे Setting में आपको Hook में Generate_after_entry_content को सेलेक्ट करना है।
उसके बाद नीचे Execute Php को Check करना है।
फिर Display Rules सेटिंग पर क्लिक करके Location में आपको Post को सेलेक्ट करना है।
इतना करने के बाद अंत में Element को पब्लिश कर देना है।

इसके बाद यदि आप अपने ब्लॉग को Refresh करके देखेंगे। तो उसमें लेख की Bio और उसकी प्रोफाइल Image दिखने लगी होगी, लेकिन वो सारा कुछ अभी देखने अच्छा नहीं लग रहा होगा। उसके सुंदर बनाने के लिए आप निम्नलिखित प्रोसेस को फॉलो करें।

Step#3 – Enter CSS Code

Author Box को सुंदर बनाने के लिए आप CSS Code को Paste करना होगा। इसके लिए आपको Appearance >> Customize >> Additional CSS पर क्लिक करना होगा और नीचे दिये गये CSS Code को Copy करके वहाँ पर Paste करना होगा।

/* A2zhindime author box*/

.a2zhindime-author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
    border-radius: 25px;
}

.a2zhindime-author-box .insights-avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
.a2zhindime-author-box .insights-avatar img {
		border-radius: 100%;
	}
.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
	font-size:18px;
}
.author-description {
	line-height: 1.6em;
	font-size:16px;	
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.a2zhindime-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.a2zhindime-author-box .insights-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.a2zhindime-author-box .insights-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of a2zhindime author box*/

इसके बाद Publish पर क्लिक करें।

बधाई हो! आपके ब्लॉग में Author Box Add हो गया है। जिसे आप Refresh करके देख सकते हैं। यदि भी आपका Author Box Show नहीं हो रहा है, तो आप Cache Clear कर दें। उसके बाद आपका Author Box दिखना शुरू हो जायेगा।

ये महत्वपूर्ण लेख भी पढ़ें:

अंतिम शब्द – Blog Me Author Box Kaise Add Kare

आज के इस लेख में हमने आपको Blog Me Author Box Kaise Add Kare? के बारे में विस्तार से और सरल भाषा में बताया है ताकि आप बड़ी आसानी से अपने Blog में Author Box Add कर सकें। अगर फिर भी आपको परेशानी हो रही है, तो मुझसे कमेंट करके पूछ सकते हैं।

मुझे आशा है कि आपको यह लेख Blog में Author Box कैसे Add करें? बेहद पसंद आया होगा। अगर ऐसा है, तो इस लेख को अपने मित्रों के साथ सोशल मीडिया पर अवश्य शेयर करें। अगर आप Blogger.com पर Free Blog बनाकर ब्लॉगिंग सीखकर Online पैसे कमाना चाहते हैं तो आप इस ब्लॉग की Blogger कैटेगिरी को पढ़ सकते हैं।