ब्लॉग पर आकर्षक सोशल प्रोफ़ाइल विजेट लगाइए

172

ब्लॉगिंग में सोशल प्रोफ़ाइल विजेट (Social profile widget) की बहुत माँग है क्योंकि शायद ही कोई ब्लॉगर सोशल नेटवर्क को अपने ब्लॉग के लिए सोशल हथियार के तौर पर इस्तेमाल न करता हो। सोशल प्रोफ़ाइल को ब्लॉगिंग के साथ मिला देने से आपके पाठकों एवं प्रशंसकों की संख्या में बड़ी तेज़ी से वृद्धि होती है आपने स्वयं भी इसका अनुभव किया होगा। हममें से बहुत से मित्र बहुत दिनों से सरल और आधुनिक सोशल प्रोफ़ाइल विजेट प्रयोग कर रहे हैं लेकिन हाल ही कि ईमेलों से मुझे ऐसे ही एक सोशल विजेट को शेअर/साझा करने की बात थी। तो सभी मित्र जो इस प्रकार का सोशल प्रोफ़ाइल विजेट इस्तेमाल करना चाहते हैं उनके लिए ख़ास यह विजेट तैयार किया है। बातों-बातों में यह बताना तो भूल ही गया कि सोशल प्रोफ़ाइल विजेट क्या है? – सोशल प्रोफ़ाइल विजेट को आप अपने ब्लॉग पर लगाकर अपनी सोशल प्रोफ़ाइल्स को अपने पाठकों तक पहुँचा सकते हैं ताकि वह आपसे सोशल नेटवर्क पर भी जुड़ सकते हैं इससे आपकी पहुँच अंतर्जाल पर चारों ओर हो जाती है। इस सोशल प्रोफ़ाइल विजेट में आज के समय के सबसे बेस्ट सोशल नेटवर्किंग प्रोफ़ाइल को शामिल किया है, जैसे फेसबुक, ट्विटर,गूगल प्लस और लिंक्डिन (Facebook, Twitter, Google+ and LinkedIn ), जिनपर आपका अकाउंट/खाता अवश्य ही होगा। फ़ीड के महत्व को देखते हुए इस विजेट में आर.एस.एस. फ़ीड (RSS Feed) को स्थान दिया गया है जिससे आपके पाठक आपके फ़ीड भी सब्सक्राइब (Subscribe) व संकलित कर सकें।

Attractive Social Profile Widget

Now a days Social profile widget is a basic necessity in blogging. As you grow your followers on social network your blog traffic goes high. You get more comments and more clicks on advertisements, it means social networking increase your blog revenue. Our social profile widget is CSS (cascade style sheets) based so it will not compromise you blog speed. Go through this post and select your favorite widget.

यह विजेट दूसरे विजेट से अलग कैसे है? इस विजेट में होवर प्रभाव (Hover effect) शामिल है जिससे जब आप किसी एक सोशल नेटवर्क आइकन (Social network icon) पर क्लिक करते हो तो वह हाइलाइट (Highlight) हो जाता है और बाक़ी सारे फ़ेड (Fade)/हल्के रंग के हो जाते हैं। यह देखने में बहुत आकर्षक लगता है। आशा है यह आपको बहुत पसंद आयेगा।

Demo देखिए

इस विजेट को तीन स्टाइल में प्रदर्शित किया गया है, जिसमें से आप अपनी पसंद का विजेट चुन सकते हैं। आशा करता हूँ कि आप इससे पूर्ण रूप से लाभंवित हो पायेंगे।

पहला विजेट: Burning Social Profile Widget

Burning Social Profile Widget

/* Burning Social Profile Widget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/R6wDVf");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/R6wDVf");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/R6wDVf");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/R6wDVf");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/R6wDVf");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

दूसरा विजेट: Snow White Square Social Profile Widget

Snow White Square Social Profile Widget

/* Snow White Square Social Profile Widget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/chaAwq");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/chaAwq");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/chaAwq");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/chaAwq");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/chaAwq");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

तीसरा विजेट: Shine Round Square Social Profile Widget

Shine Round Square Social Profile Widget

/* Shine Round Social Profile Widget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/Ilf79x");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/Ilf79x");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/Ilf79x");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/Ilf79x");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/Ilf79x");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

Social Profile Widget को ब्लॉगर पर जोड़ना

इसके लिए आपको ब्लॉग पर लेआउट में जाकर एक HTML/Javascript विजेट जोड़ना होगा। यह करने लिए नीचे दिये चरण पूरे करें –

Blogger ‘Dashboard‘ › Blog’s ‘Layout‘ › Click ‘Add a Gadget‘ › Add ‘HTML/Javascript Gadget‘ › ‘Paste‘ anyone code give above › ‘Save‘ the widget

आप ये सोशल विजेट किसी भी HTML/Javascript सपोर्टेड ब्लॉग/वेबसाइट पर जोड़ सकते हैं, जैसे वर्डप्रेस, टम्बलर, वेब्स (WordPress, tumblr, Webs) इत्यादि।

ध्यान दीजिए:
इस विजेट में अपनी सोशल प्रोफ़ाइल को जोड़ने के लिए लाल रंग से दर्शाये गये लिंक, आपको अपनी प्रोफ़ाइल लिंक के अनुसार ऊपर दिये विजेट कोड में बदलने होंगे।

<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

Keywords: social widget, social widget, social profile, social profile widget, social profile widget, social networking, social media and blogging, social media impact