Ads By Google info
webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

Css Social Menu Icon For Blogger

Posted : | Posted By: Piush Trivedi | Labels: , 2 Comments
Posted by: Piush
Pin It

ब्लॉग पर 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="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/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="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/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="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>


Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

Post A Comment Blogger Disqus

2 comments:

  1. Bahut hee simple lekin effetive tutorials hote hain aapki site pe.

    ReplyDelete

Post A Comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
और दिखाए


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए ऊपर बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech


Top Commen tor Ask A Question Follow