05 May, 2017

Blog Me Author Box Kaise Lagaye-Hindi

By:   Last Updated: in:

हैलो दोस्तो मे आपके लिए एक अच्छी पोस्ट लेकर आया हूँ ।जिससे आप अपने ब्लॉग मे अच्छा सा author बॉक्स लगा सकते है।और आपके ब्लॉग को एक अच्छी design create कर सकते है । author बॉक्स se हम अपने वेब के बारे मे बताते है की हम कोन है और यह वेब किस बारे या किस topic पर लिखी है।यह बॉक्स उतना ही जरूरी है जितना की ब्लॉग के लिए SEO  की जरूरत होती है।so friends ab apko kuch steps ke bad aap apne blog me author box laga sakte hai. Aap soch rhe honge ki es author box se blog ki download speed kam ho jayegi aisa kuch nhi hota hai isme css and html code ka use karke bnaya hai isliye apki blog ki speed par koi fark nhi padega

  1. Image Ko SEO Friendly Kaise Banaye?...
  2. CSS Code Kya Hai In Hindi
  3. Blogger Vs WordPress Who Is Best Platform – Full Guide in Hindi




Step 1. sabse pahle aap neche diye gaye css code ko copy kar le 
/* CSS Multi Author Box */Hitmeindia.blogspot.com.authorboxwrap{color:#000;margin:20px auto 0 auto;padding:2rem;overflow:hidden;border: 1px solid #e1e1e1;}.avatar-container{background:rgba(0,0,0,0.05);float:left;padding:4px;margin:0 20px 0 0;border:1px solid red}.avatar-container img{width:90px;height:auto;max-width:100%!important;transition:all .3s}.author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px}.author_description_container h4 a{color:#000}.author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:25px;font-weight:400}.social-links li{list-style:none!important;float:left}.social-links a{border-bottom:none}.social-links a:after,.social-links a:before{content:none!important}.social-links li a{color:#fff;font-size:12px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:24px;height:24px;line-height:24px;border-radius:3px}.social-links li:nth-child(1) a{background:#516ca4;}.social-links li:nth-child(2) a{background:#00c3f3;}.social-links li:nth-child(3) a{background:#f20000;}
Step.2 अब आप blogger पर जाये और  Theme>>Edit Html  पर जाये और Ctrl+F दबाये and निचे दिए गए कोड को search करे 
]]></b:skin>

Step.3 इसके बाद आप CSS code को copy किया है उसे ]]></b:skin> के ऊपर past kar de
ya blogger में जाकर Theme>>Customize>>Advance>>add css
अब आपको एक बॉक्स दिखयी देगा जिसमे ये CSS Code को Past कर दे।

Step.4 अब बारी है Html  code की उसके लिए आपको Edit html  में जाये और निचे दिया गया कोड search करे
<DATA:POST.BODY/>
Step.5  अब निचे दिया गया code copy करे और <DATA:POST.BODY/> के just निचे past कर दे।
<div class='authorboxwrap'><div class='authorboxfull'><div class='avatar-container'><a href=''><img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='90' width='90'/></a></div><div class='author_description_container'><h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'/></h4><p> यहा पर आप अपना  DSCRIPTION  डाले</p><div class='social-links'><li><a class='external external-link' href='https://www.facebook.com/yogeshsaiboy' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li><li><a class='external external-link' href='https://twitter.com/saiyogeshboy' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li><li><a class='external external-link' href='https://plus.google.com/collection/YrwelB' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li><div class='clear'/></div></div></div></div>

Costmize>>
  1. color:#000;>>इस code से आप अपने author बॉक्स के Font का  color Change कर सकते है।
  2. border: 1px solid #e1e1e1;>>इस code se आप author box का border color change कर सकते है।
  3. border:1px solid red>>इस code से आप अपनी image के border का color बदल सकते है।
  4.  यहा पर आप अपना  DSCRIPTION  डाले>> की जगह आप अपना dscription डाले।
  5. https://www.facebook.com/yogeshsaiboy>>की जगह अपना facebook url डाले।
  6. https://twitter.com/saiyogeshboy>>इस code की जगह अपना twitter url डाले।
  7. https://plus.google.com/collection/YrwelB>>इस code की जगह अपना google-plus url डाले ।
Note >>अगर यह ट्रिक काम नहीं कर रही है तो अगले  <DATA:POST.BODY/> कोड के JUST निचे  past kar de

  1. Blogger Me Floating Social Share Button kaise Add Kare?...
  2. Blog Ya Website Ki Loading Speed Ko Fast Kaise Kare Jane Hindi Me-100% Working
  3. Apne Blog Ko Google Search Main Submit Kaise Kare~FULL INFORMATION

तो कैसी लगी मेरी यह पोस्ट अगर अच्छी लगी तो comment &share जरूर करे।अगर आप अपनी इमेज को ROUND में दिखाना चाहते है तो वो CODE में आपको COMMENT के जरिये ही बताऊंगा या और कोई PROBLEM हो तो COMMENT करे  और हां अगली पोस्ट जरूर पढ़े।
THANK YOU ALL READERS

Sign up email newsletter to receive email updates in your email inbox!

Previous
Next Post
1 comment:
Write comment
  1. Sir apne copyrite© ke pas privacy policy,contact us page kaise lgaye hai

    ReplyDelete

Add Your Comments, and Your Thought