How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में :
How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में :
दोस्तों ! आप सभी का इस पोस्ट में स्वागत है आज के इस पोस्ट में हम जानेगे की किसी ब्लॉग या के पोस्ट में author box लगाने की पूरी जानकारी हिंदी में "How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में "
What is author box ? What is use of author box on any blogger Blog/Website ? :
Author Box क्या है ? किसी ब्लॉग या वेबसाइट में author या लेखक बॉक्स कैसे जोड़ें ? पूरी जानकारी :
दोस्तों ! author box ब्लॉग या वेबसाइट पोस्ट का एक भाग होता है | ब्लॉग या वेबसाइट में author box में ब्लॉग या वेबसाइट author का परिचय शो / प्रदर्शित करते है | ब्लॉग में author box लगे होने से किसी भी ब्लॉग विजिटर को author या लेखक का जानकारी प्राप्त होता है |
author box का उपयोग करके कोई भी ब्लॉग ka लेखक या राइटर अपना परिचय देता है | इस author box से निम्न लिखीत जानकारी प्राप्त होता है -
३. About As Page की जानकारी/ और लिंक
how to add author box at bottom of post in blogger :
ब्लॉगर में पोस्ट के नीचे लेखक बॉक्स कैसे जोड़ें :
तो आइये जानते है - html Coding box add करने के steps क्या क्या है -
Step 1 / चरण 1 :
सबसे पहले आपको अपने ब्लॉग के dashboard में जाना है .
Step 2 / चरण 2 :
ब्लॉग Deshboard में जाने के बाद आपको अपने टेम्पलेट / Tempate में जाना है . टेम्पलेट में जाने के बाद आपको टेम्पलेट का html कोडिंग को open करना है | इसके लिए आप इस स्टेप्स को follow कर सकते है -
ब्लॉगर → टेम्पलेट → संपादित करें एचटीएमएल पर जाएं । 
How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में :
Step 2 / चरण 2 :
अब आपको अपने टेम्पलेट / Template में <head> Tag को सर्च करना है " कोड को सर्च करने के लिए आप शोर्ट कट की "short cut key " - "Ctrl+f" ka उपयोग कर सकते है "
इस key के use से आपके टेम्पलेट में "CTRL+F" press करने पर एक text search box open होता है " इस box में आपको <head> tag को search करना है |
Step 3 / चरण 3 :
अब आपको <head> टैग के ठीक निचे इस कोड को कॉपी करके paste कर देना है |
<link href='https://amanbhattarai4400.github.io/csshosting/author-box.css' rel='stylesheet'/>
 |
| How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में : |
Step 4 / चरण 4 :
अब आपको अपने टेम्पलेट में एक CSS "Cascading Style Sheet" का code और add करना होगा | इस कोड को add करने के लिए आपको अपने template में "CTRL+F" key press करके search box में निचे दी गई code को search करना होगा |
]]></b:skin>
Step 5/ चरण 5:
अब आपको निचे दिए गए कोड को कॉपी कर लेना है |
/* -------------Copyright: TwistBlogg.com 2018----------------*/
.tb-about{ float:left;
width:100%;
padding: 10px 10px 5px 10px;
border:2px solid #ccc;
border-radius: 0px 30px;margin-bottom:15px;
margin-top:10px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP2Wd_evkjHMcrOAITwRVsDcH1jXbx9gLnK73_Ftg70g7JPb3ChoKOtO_3qf30eDqIZsNnnQ6KT8FknT3gMWLGSqsj9SvdXI2aS4r0sIfLTkv8R8zL0_hXcwWsI7YO-JcF46uhxK4XTy8/s1600/tbbg.png');color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
text-align:justify; }
.tb p{text-align:justify;
font-family: 'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif;
font-size: 13px;}
.tb-aboutheading h2 { color:#000;
font-family:'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif;
font-weight:bold;
text-shadow:#64665b 0px 1px 1px;
font-size:17px;
margin-bottom:-10px; margin-top:0px;
margin-left: 142; border-bottom: 1px dotted #FF3402; }
.tb-aboutimg{ float:left; margin-right:25px; }
.tb-aboutimg img{ border-top: 7px solid #000;
border-bottom: 7px solid #F70303;
border-left: 1px solid #646461;
border-right: 1px solid #646461;
border-radius: 0px 20px; margin: 0px 0px 0px 0px;
-webkit-transition:-webkit-transform .35s linear;
-moz-transition:-moz-transform .35s linear;
-o-transition:-o-transform .35s linear;transition:transform .35s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 0px;
-webkit-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-o-transform:rotate(+5deg);
transform:rotate(-7deg);float:left; }
#tb-aboutimgD{opacity: 0.5; filter: alpha(opacity=80);}
#tb-aboutimgD:hover{opacity: 0.9; filter: alpha(opacity=90);}
.tb-aboutimg img:hover { -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg); transform:rotate(0deg); }
Step 6/ चरण 6 :
अब आपको कॉपी किये गए कोड को उपर खोजी गई coding " ]]></b:skin> " के ठीक ऊपर paste कर देना है |
 |
| How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में : |
Step7 / चरण 7 :
अब आपको ब्लॉग के template में इस लाइन को search करना है -
<div class='post-footer-line post-footer-line-1'>
Step8 / चरण 8 :
Template में ऊपर दिए गये कोडिंग को खोज लेने के बाद निचे दिए गए कोडिंग को ऊपर दिए गए कोडिंग
<div class='post-footer-line post-footer-line-1'> के ठीक निचे paste करना है |
<!-- Coding start here -->
<b:if cond='data:blog.pageType == "item"'>
<div class='tb-about'>
<div class='tb-aboutimg'>
<img id='tb-aboutimgD' alt='Author Image' height='100' src='Your Image URL' width='110'/>
</div><div class='tb-aboutheading'>
<h2 > <Font color="red"> About the Author : </font> Gyan Ka Phool </h2></div><div class='tb'>
<p><b>Suraj </b> is the founder of this small blog which is all about Blogger Tricks, Windows Tutorials, SEO, Software and Wordpress Tutorials..!! If you liked this blog then please do share on social networks with your friends because sharing is caring..!! <a href='http://gyankaphool.blogspot.com/p/about-us.html'>Read more...</a></p></div>
</b:if>
<!-- coding End here -->
Step 9 / चरण 9:
ऊपर दिए गए कोडिंग में से आपको कुछ कोडिंग को modify / changes करना होगा | ये कुछ इस प्रकार से है -
i) ऊपर के coding में "Your Image URL" जो की photo का URL है , को अपनी author image के URL से बदल दें या replace कर दें |
ii ) यदि आप photo के आकार को भी बदलना चाहते है तो आप photo के height='100' , और photo के width='110' को अपने इच्छा अनुसार बदल सकते है |
iii) Suraj , को अपने name से replace कर दें |
iv) ऊपर दिए गए कोडिंग में -
is the founder of this small blog which is all about Blogger Tricks, Windows Tutorials, SEO, Software and Wordpress Tutorials..!! If you liked this blog then please do share on social networks with your friends because sharing is caring..!!
के स्थान पर आपको जो कुछ भी अपने बारे में बताना चाहते है वो लिख सकते है |
iv) कोडिंग में दिए गए url -
http://gyankaphool.blogspot.com/p/about-us.html
के स्थान पर पर आप अपने ब्लॉग पेज के about as पेज का url insert या replace कर सकते है | जिससे visitor के click करने के दौरान आपका about as page open होगा |
Preview of Author Box / ऑथर बॉक्स का प्रीव्यू :
 |
| Author box - first View / Simple |
 |
| Author box - Second View / On Hower |
इस पोस्ट में आपने जाना :
How to Add author box on blogger Blog/Website | किसी ब्लॉग या वेबसाइट में लेखक बॉक्स कैसे जोड़ें | पूरी जानकारी हिंदी में :टैग्स :
#How to add a Html author box in blogger. html Coding for author Box In Blogger Blog,
#Full Informations In HIndi
# ब्लॉग पोस्ट में html ऑथर बॉक्स लगाने की पुरी जानकारी हिंदी में |
#Coding for author Box in Blogger / वेबसाइट
इस जानकारी को अपने सभी दोस्तों के पास शेयर जरुर करें ताकि वो भी इस author box को लगाना सिख सके और इस जानकारी का लाभ उठा सके |
COMMENTS