अगर आप blogging करते है. और आपके blog पर रोज लोग आते है. और आप ऐसा चाहते है. की, मेंरे बारे लोगो को पता होना चाहिये. तब तो आपको About author box add करना होगा. देखिये दोस्तों, internet की value दिन प्रति बढती ही जा रही है. अगर आप काफी अच्छे article share करते है. तो लोग आपके बारे में में जानने में दिलचप्स रहते है. और इससे हमारी भी popularity बढात है. इसीलिए इस post में, आपको बताऊंगा. blogger blog की हर post में about author box कैसे add करे.
blog में about author box कैसे ऐड करे?
Step 1:-
- सबसे पहले अपने blogger dashboard में login करे.
- layout पर करके, blog post edit section में click करे.
- जैसे आप edit पर click करोगे. आपके सामने new popup window open होगी. उसमे show author profile below post. के सामने जो box है. उसपर yes tick √ करो.
Step 2:–
अभी हमें template में कुछ coding कुछ coding ad करनी है.
- सबसे पहले आप Theme edit html पर click कीजिये.
- अभी आपके सामने template के html coding open होगी. अभी बस आप कही पर भी माउस का left key प्रेस कीजिये.
- आपके सामने search box open होगा. उसमे ]]></b:skin> यह code copy करके past करे. और enter कीजिये.
- अभी निचे वाला code ]]></b:skin> से पहले past कर दीजिये.
/*Professional Author Box CSS Code by http://jankaribook.com*/
.about-author {
width : 750px;
overflow : hidden;
margin:12px 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 http://jankaribook.com*/
Step 3:-
अभी फिरसे CTR+F दबाकर search box open करे.
- अभी <data:post.body/> फिरसे यह search करे.
- बस निचे दिया हुआ, code <data:post.body/>के निचे 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/jankaribook" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/jankaribook" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109329446131117217371" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
Important customization in about author box:-
- “about-author”“:- यहाँ अपना नाम add करे.
- “Paste Your Image URL Here”:- जो profile image लगाना चाहते है. उसकी link ad करे.
- “Write Something About Yourself”:- अपने बारे में कुछ लिखिये.
- “http://twitter.com/jankaribook“ :– अपनी twitter user url replace करे.
- “http://www.facebook.com/jankaribook“:- facebook page का url यहा replace करे.
- “http://plus.google.com/109208666606854207231”:- google plus profile url यहाँ पर डालिये.
जरुर पढिये:-
सभी steps को को follow template save कर दीजिये. और आप result देख सकते है. आपकी सभी post में एक stylish about author box नजर आने लग जायेगा. thanks! और अगर कोई सवाल है. तो निचे कमेंट करके अभी पूछ सकते है.