Css Social Menu Icon For Blogger

ब्लॉग पर social profile लिंक मेनू लगाये । पिछले लेख में मैने social bookmarking विजेट, सात का दम विजेट , All In One Sharebox Widget के बारे में बताया था इसी कड़ी में आज ब्लॉग पर css Social मेनू लगाने हेतु लेख आपके सामने है ॥ विजेट की खासियत के बारे में सिर्फ इतना कहना चाहूँगा की यह विजेट भी Hindi4Tech के अन्य विजेट की तरह सुन्दर और सुविधा युक्त है , कारण इसे css3, html5 कोड के साथ डिजाईन किया गया है । नीचे क्रमशः तिन स्टाइल के साथ इनका लाइव डेमो भी दिखाया गया है , अतः इसे ब्लॉग पर ले जाने के लिया नीचे क्रमशः पक्रिया अपनाये, कुछ ही मिनटों में विजेट आपके ब्लॉग पर होगा...

विजेट ब्लॉग पर ले जाये

• यहाँ जाये Blogger--->Design--->Page Element
• यहाँ Add a Gadget पर क्लिक करे
• यहाँ html/javascript आप्शन चुने
• नीचे बताये गए Style कोड में से अपने ब्लॉग हेतु एक Style कोड चुने
• बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

Style 1

<style>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg4_Yl9dpueaiDLWEohfSmA5jOsp66MBZ37j1HXR44AroUpMsJG-ZtTLXRi7mr-oGwj0UV-MHvAPrtPRkpHhL7YpsXPR_JHFe0LrJZ-qLV9jJ_0AOhz65X6AWQ8nGwOe-9AJdNLnZTjjS/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8ro1yc2yFBOd4nvEFtf0DFrXhGbz_NgZQbkoKkMFNgyuAAwKaBPZsC_fkjIvd5DLQ6t9AY_lMNUsdM-81HdajINZqPWM4WAQghG6z4KzIDxD5gtl595FNfhkG8Xyq_DJh7xLmtL_lfG-/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAUzrkOs84OXZZnslB88jkm_cIVCeOUb_pm3_C_IpbcOQvdz7BHlvCB10zLwQHZRPIq4uqXUVJfjVbCxDJ-BsYRSgF2QfbAEPsRvWK2CLp9kAUkSaHuaWveZI8_NpC2clAjDTkyBKDm4-/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qe4IubNNeRnJeNLyQE4yw-zrorzAtiJOd01Pf5do4oOCB02WkqNghmnwraBgrhgKfsa-LXXIavhyphenhyphenaB_Nx1JcqwqHFF1uaKoiVW3oxs1irRhsri9nO56GwgEUhNM-2bclSu6F6abAnl91/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-H1M4UCkOi8W2ChsrFUBAED3KmvLviCTBBwDmjrPdA0AqARWuvb5-tWSPrS1aE8_lSe0FxW_ISCPRJc-_T47uTq_KJUS2uQCVShcluQugVJ2qgMHGectlmVrpyY86rGiLpMvym6Cqo701/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>

Style 2

<style>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg4_Yl9dpueaiDLWEohfSmA5jOsp66MBZ37j1HXR44AroUpMsJG-ZtTLXRi7mr-oGwj0UV-MHvAPrtPRkpHhL7YpsXPR_JHFe0LrJZ-qLV9jJ_0AOhz65X6AWQ8nGwOe-9AJdNLnZTjjS/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8ro1yc2yFBOd4nvEFtf0DFrXhGbz_NgZQbkoKkMFNgyuAAwKaBPZsC_fkjIvd5DLQ6t9AY_lMNUsdM-81HdajINZqPWM4WAQghG6z4KzIDxD5gtl595FNfhkG8Xyq_DJh7xLmtL_lfG-/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAUzrkOs84OXZZnslB88jkm_cIVCeOUb_pm3_C_IpbcOQvdz7BHlvCB10zLwQHZRPIq4uqXUVJfjVbCxDJ-BsYRSgF2QfbAEPsRvWK2CLp9kAUkSaHuaWveZI8_NpC2clAjDTkyBKDm4-/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qe4IubNNeRnJeNLyQE4yw-zrorzAtiJOd01Pf5do4oOCB02WkqNghmnwraBgrhgKfsa-LXXIavhyphenhyphenaB_Nx1JcqwqHFF1uaKoiVW3oxs1irRhsri9nO56GwgEUhNM-2bclSu6F6abAnl91/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-H1M4UCkOi8W2ChsrFUBAED3KmvLviCTBBwDmjrPdA0AqARWuvb5-tWSPrS1aE8_lSe0FxW_ISCPRJc-_T47uTq_KJUS2uQCVShcluQugVJ2qgMHGectlmVrpyY86rGiLpMvym6Cqo701/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>

Style 3

<style>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg4_Yl9dpueaiDLWEohfSmA5jOsp66MBZ37j1HXR44AroUpMsJG-ZtTLXRi7mr-oGwj0UV-MHvAPrtPRkpHhL7YpsXPR_JHFe0LrJZ-qLV9jJ_0AOhz65X6AWQ8nGwOe-9AJdNLnZTjjS/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8ro1yc2yFBOd4nvEFtf0DFrXhGbz_NgZQbkoKkMFNgyuAAwKaBPZsC_fkjIvd5DLQ6t9AY_lMNUsdM-81HdajINZqPWM4WAQghG6z4KzIDxD5gtl595FNfhkG8Xyq_DJh7xLmtL_lfG-/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAUzrkOs84OXZZnslB88jkm_cIVCeOUb_pm3_C_IpbcOQvdz7BHlvCB10zLwQHZRPIq4uqXUVJfjVbCxDJ-BsYRSgF2QfbAEPsRvWK2CLp9kAUkSaHuaWveZI8_NpC2clAjDTkyBKDm4-/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qe4IubNNeRnJeNLyQE4yw-zrorzAtiJOd01Pf5do4oOCB02WkqNghmnwraBgrhgKfsa-LXXIavhyphenhyphenaB_Nx1JcqwqHFF1uaKoiVW3oxs1irRhsri9nO56GwgEUhNM-2bclSu6F6abAnl91/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-H1M4UCkOi8W2ChsrFUBAED3KmvLviCTBBwDmjrPdA0AqARWuvb5-tWSPrS1aE8_lSe0FxW_ISCPRJc-_T47uTq_KJUS2uQCVShcluQugVJ2qgMHGectlmVrpyY86rGiLpMvym6Cqo701/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>