How To Add Social Share Buttons on Blogger. - Urdu Mein Help -->
Home
Blogger
blogging

How To Add Social Share Buttons on Blogger.

blogger post ke oper niche social share button widget kaise lagaye sharing button lagane ka tarika blog website me share buttons add kaise kare.

Blogger Post Ke Oper Niche Social Media Sharing Buttons kaise Lagaye.

Social Shared Button widget for blogger: Aad below every post, blog ki har Post ke niche Responsive Social Share Button widget kaise add kare ya kaise lagaye. Social share Button blogger website me aad karne ka bhut fayda hair, is par click kar ke peoples aap ki posts articles ko share kar ke apne other friends tak ponchate hain, ye shares Button widget for blogger website me lagane se aap ke blog par social sites se unlimited traffic aye Gi aap ke blog me page view ka azafa hoga hoga.

 Email subscription box widget se bhi bhut ziyada traffic drive hoti agar aap ne abhi tak email subscribe box widget blogger blog me add nahi kiya to ye article read kar ke blog websites me stylish email subscribe box widget lagaye, Blogger blog me stylish email subscribe box widget kaise lagaye har post ke niche.  Kiya aap ne bhi responsive fast loading custom social sites share Button widget add Karne hain har post ke niche to aap is article ko end tak read Kare . 🐻


Responsive-social-share-button-widget-for-bloggersocial-share-widget


Fast Loading Responsible Social share buttons Blogger Blog Ki har Post ke niche kaise lagaye. ?

  1. Responsive social share buttons widget blogger blog me Add karne ke liye Sab se pehle apne blog ke dashboard par jaye.
  2. Template  Par press kare .
  3. Edit HTML par click kare.
  4. Ab Template editor box me kahin bhi click kare , phir keyboard ki help se CTRL F press kare right side me in search box open hoga.
  5. Is search box me <head/> tag enter Kare ke keyboard se Enter button dabaye head tag aapke samne ajaye ga.
  6. Ye niche se code copy kare aur <head/> tag ke oper past kar de.


<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Add-social-share-button-widget-in-blogger


Adding The CSS Code Of Social share buttons.

Ab same step 1 wala process Kare search box me  “<b:skin>” likh Kare search Kare so agar <b:skin> tag na mile to aap  “]]></b:skin>” tag ko search Karle. Niche se code copy Kare and “]]></b:skin>” ke oper past Karde.

CSS Code.
/* CSS Share Button ----------------------------------------------- */ .tlp_post_sharebar {background:none;position:relative;z-index:2;width:100%;display:inline-block;margin:5px 0px;padding:10px 0;font-family:sans-serif;border-bottom:1px dotted rgba(0, 0, 0, 0.05);border-top:1px dotted rgba(0, 0, 0, 0.05);} .tlp_post_sharebar .tlp_Share_buttons {display:block;} .tlp_post_sharebar .tlp_Share_buttons .wrap {display:inline-block;textualism textual ITN 9:center;min-width:41px;margin:0 auto;} .tlp_Post_sharebar .tlp_Share_buttons .wrap1 {float:left;display:inline-block;width:31px;} .tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;} .tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {display:block;text-decoration:none;color:#FFF !important;cursor:pointer;height:100%;line-height:25px;} .tlp_post_sharebar .tlp_Share_buttons ul li {float:left;list-style:none;list-style-type:none;margin:1px;padding:0;width:16%;max-width:115px;display:inline-block;overflow:hidden;font-size:13px;line-height:25px;text-align:left;height:25px;color:#fff;border: 1px solid rgba(0,0,0,0.04);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;} .tlp_post_sharebar .tlp_Share_buttons ul li .fa {font-family:FontAwesome;font-weight:normal;background-color:rgba(0,0,0,0.1);color:#fff;font-size:17px;display:inline-block;text-align:center;padding:0;width:30px;height:25px;line-height:inherit;border-right:1px solid rgba(0,0,0,0.05);} .tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;} .tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;} .tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;} .tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;} .tlp_post_sharebar .tlp_Share_buttons .button_gplus {background:#df4a32;} .tlp_post_sharebar .tlp_Share_buttons .button_gplus:hover {background:#be3f2b;} .tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;} .tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;} .tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;} .tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;} .tlp_post_sharebar .tlp_Share_buttons .share.h6 {font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;} .tlp_post_sharebar .tlp_Share_buttons .share {border:none;margin:0px 5px 0px 1px;overflow:visible !important;width:95px !important;} .tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0px 5px;background-color:rgba(0,0,0,0.28);border-radius:0px 0px 0px 15px;} @media only screen and (min-width:260px) and (max-width:989px){ .button_pntrst,.button_linkdin{display:none !important}}

Social-share-button-widget

So, You have successfully added the CSS for your new social share button for blogger which will be shown after all of your blogger posts. Now let’s add the HTML code.

 Adding The HTML Of Social Share Button.

Ab Ctrl f press Kar ke search box me ye code searching Kare“<div class=’post-footer’>”. Agar ye na mile to ap ye search karle  <div class=’post-footer-line post-footer-line-1′> ye niche wala HTML code copy Kare aur us code ke oper past Kare de.


Social-sharing-button-widget-for-blogger



HTML Code.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tlp_post_sharebar'> <div class='tlp_Share_buttons'> <ul> <li class='share'> <div class='share-buttons' data-service='total'> <div class='share h6'> SHARE : </div> </div> </li> <li class='button_fb'> <a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-facebook'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='facebook'> </div> </a> </li> <li class='button_twtr'> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @Blog_Ornate - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-twitter'/> </div> <div class='wrap'> Tweet </div> <div class='share-buttons' data-service='twitter'> </div> </a> </li> <li class='button_gplus'> <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'> <div class='wrap1'> <i class='fa fa-google-plus'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='google'> </div> </a> </li> <li class='button_pntrst'> <a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-pinterest'/> </div> <div class='wrap'> Pin It </div> <div class='share-buttons' data-service='pinterest'> </div> </a> </li> <li class='button_linkdin'> <a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-linkedin'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='linkedin'> </div> </a> </li> </ul> </div> </div> </b:if>
If you have followed my instruction correctly then these social share buttons should works perfectly for your blogger blog. If you are having any problem to add these share buttons on your blog then please let me know by leaving a comment.
As I have told you before that social media is very important to your blogging success so I will highly recommend to add social sharing buttons to your blog and let your readers share your content. If you like this article then please share it.
Don't Miss :

Post a Comment