Flipper Social Share Buttons Blogger Blog Me Kaise Lagaye

0
84

दोस्तो आप सभी का CWD पर स्वागत है। आज कि इस पोस्ट मे हम आपको ये बताएंगे कि कैसे हम अपने ब्लॉगर ब्लॉग में Flipper Social Share Widget या Buttons Add कर सकते हैं। अगर आपने अपना ब्लॉग ब्लॉगर Platform पर बना कर कुछ Post भी लिख दी है तो आपका अगला Target अपनी ब्लॉग की Traffic बढ़ाना होना चाहिए क्योंकि बिना Traffic कोई भी ब्लॉग आगे नहीं बढ़ सकती है और नयी ब्लॉग पर Traffic बढ़ाने के लिए लिये सबसे बेहतरीन जगह Social Media है।

आज कल पुरी दुनिया मे Social Media पर बहुत से लोग आ चुके हैं जिसकी वजह से हम अपनी ब्लॉग को Social Media पर Share करके काफी अच्छा Traffic अपनी ब्लॉग पर पा सकते हैं।

Social Media से अगर आप ज्यादा से ज्यादा Traffic पाना चाहते हैं तो इसके लिए आपके ब्लॉग मे एक बेहतरीन Social Share Widget भी होना चाहिए ताकि अगर आपकी कोई भी Post किसी भी Visitor को पसंद आए तो वो Direct Social Share Buttons पर क्लिक करके आपकी वो Share कर दे। जिससे कि आपकी Blog Post ज्यादा से ज्यादा लोगो तक पहुँच जाएगी और ज्यादा लोगो तक पहुचने का मतलब है कि आपकी ब्लॉग पर और ज्यादा Traffic भी आयेगा।

Blogger Blog में Flipper Social Share Widget या Buttons कैसे लगाए?
Blogger Blog में Flipper Social Share Widget या Buttons कैसे लगाए?

Social Share Button Blog Me Lagane Se Kya Fay

da Hai

दोस्तो, Social Share Widget अगर Blog में ना हो तो मानो जैसे आपकी ब्लॉग अभी अधूरी है। वैसे तो Social Share Widget Blog में लगाने के बहुत से फायदे है लेकिन जो सबसे बड़ा फायदा है वो है।

आपकी ब्लॉग की Traffic बढ़ाने का जी हाँ दोस्तो इससे आपको सबसे बड़ा फायदा यही है और आपको ये अपनी ब्लॉग में जरूर लगाना चाहिए।

Social Media Share Widget Kaisa Hona Chahiye

अगर बात करे Social Media Share Widget कैसा होना चाहिए तो Social Share Buttons एकदम Simple या थोड़े से Stylish होने चाहिये। और साथ ही एकदम Fast Loading और Responsive भी होने चाहिए ताकि कोई भी Visitor हमारी Blog को किसी भी Mobile या Browser में Open करे तो वो Social Share Widget एकदम ठीक दिखे।

और Social Share Buttons में ज्यादा से ज्यादा Social Media Buttons होने चाहिए ताकि किसी भी Country का Visitor आये तो आसानी से किसी भी Network पर Share कर सके।

Blogger Me Flipper Social Share Buttons Kaise Lagaye.

दोस्तो, इस पोस्ट मे मै आपको Flipper मतलब कि उछलते-कूदते Share buttons के बारे में बताने वाला हु जो कि काफी Stylish है यकीनन आपको ये पसंद आएंगे तो चलिए दोस्तो जान लेते हैं कि Flipper Social Media Share Buttons ब्लॉग में कैसे लगाते है। इससे पहले मै आपको इसका Demo दिखने के लिये नीचे GIF Image दे रहा हूँ।

Flipper Social Share Widget या Buttons का Demo
Flipper Social Share Widget का Demo
1. सबसे पहले अपने ब्लॉगर Dashboard में Log in करे अब Theme > Edit HTML पर क्लिक करें और Control + F दबाकर <data:post.body/> Code को Search करे।
2. अब नीचे दिया CSS Code <data:post.body/> के नीचे यहाँ से Copy करके Paste कर दे।

<style>
/*——– Flipper Sharing Widget By CodiWebDesign.com ——*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>

<div class=’flipper’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=”Pleaseshare”>
Please Share it! 🙂 </div>

<!–Google Plus–>
<a class=’googleplus’ expr:href=’&quot;http://plus.google.com/share?url=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’ title=’+1 it :&gt;’/>

<!–Facebook–>
<a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Share this on Facebook :&gt;’/>

<!– Twitter –>
<a class=’twitter’ expr:href=’&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Tweet this :&gt;’/>

<!– Pinterest –>
<a class=’pinterest’ href=”http://pinterest.com/” rel=’external nofollow’ target=’_blank’ title=’Pin it :&gt;’/>

<!– Delicious –>
<a class=’delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Delicious :&gt;’/>

<!–DIGG–>
<a class=’digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’ title=’Digg this :&gt;’/>
<!–Stumble–>
<a class=’stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Stumble this :&gt;’/>

<!– Reddit –>
<a class=’reddit’ expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Reddit :&gt;’/>
<!–RSS –>
<a class=’rss’ expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ title=’Bookmark plz :&gt;’/>
</b:if></div>
<div style=”clear:both”/>

3. ऊपर दिया Code Paste करने के बाद Save पर क्लिक कर दीजिये।

Congrats अब आपकी ब्लॉग मे Flipper Social Share Widget लग चुका है अगर आप इस Widget में से कोई भी Share Button Remove करना चाहते हो तो Simply आपको इस HTML Code मे से उस Button का Code Remove कर देना है तो चलिये इसे मै आपको एक Example देकर समझाता हूँ।

मान लीजिये कि आपको इसमे से Twitter का Share Button हटाना है तो आपको Simple नीचे दिया Code Whole Coding मे से Remove करना होगा।

<!– Twitter –>
<a class=’twitter’ expr:href=’&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Tweet this :&gt;’/>

आपको Code Remove करना है वो इसी प्रकार होगा।

तो दोस्तो मुझे उम्मीद है कि आपको ये पोस्ट अच्छी तरह से समझ आयी होगी और अपने अपनी ब्लॉग मे इस पोस्ट को Follow करके Flipper Share Button लगा लिया होगा और अगर इस पोस्ट मे आपको कही कोई Problem हुयी हो तो नीचे Comment में बताये साथ ही इस पोस्ट को अपने ब्लॉगर Friends के साथ भी Share करे और हमारी Blog CWD पर Visit करते रहे हो सके तो हमारी Blog को Subscribe भी कर ले क्यूकि Daily ऐसी ही पोस्ट मै इस Blog पर Publish करूंगा। Thank You