যুক্ত করুন একটি সু্ন্দর শেয়ারিং গ্যাডগেট এবং পড়ুন কিভাবে tooltip ইফেক্ট দিতে হয়

5
288

আপনার ব্লগের জন্য নিয়ে এলাম আরও একটি সুন্দর শেয়ারিং বাটন। আপনি খুব সহজ উপায়ে এই গ্যাডগেডটি ব্লগে যুক্ত করতে পারবেন। ড্যাশবোর্ড থেকে Layout ট্যাবে যেতে হবে সেখানে যেকোন একটি Add Gedget বাটনে ক্লিক করুন এবং লিস্ট থেকৈ HTML/JavaScript নামের গ্যাডগেট টি যুক্ত করুন। এখন নিচের কোডটি কপি করে HTML/JavaScript গ্যাডগেটে পেষ্ট করুন ।

<style>
/*social icon By tipsworldb*/
#head-htb{width:230px ; }
#head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;}
#head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0;
overflow: hidden ; height: 64px; width: 64px ;border: 0px; background:transparent url(https://lh4.googleusercontent.com/-yEXXN_B-6l8/UCRV34EwUvI/AAAAAAAAAWw/p409CMgxlXw/s353/Social%2520Media%2520Widget.PNG)
no-repeat; display: block;}
#head-htb li#fb a {background-position: -210px 0px;margin:0px 0px;}
#head-htb li#fb a:hover {background-position: -210px 0px;margin:0px
0px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-o-transform:rotate(15deg);
-moz-transition-duration: 950ms;
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;
}
#head-htb li#twit a {background-position: -290px 0px;margin:0px 0px 0px
7px;}
#head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px
0px 7px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-moz-transition-duration: 950ms;
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;
}
#head-htb li#g a {background-position: 0px 0px;margin:0px 0px 0px -8px;}
#head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px
-8px;
transform:rotate(15deg);
-ms-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-o-transform:rotate(15deg);
-moz-transition-duration:950ms;
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;
}
#head-htb li#rss a {background-position: -68px 0px;margin:0px -3px;}
#head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px
0px -3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-moz-transition-duration: 950ms;
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;
}
/*Social Icons tipsworldbd */
</style>
<div id="head-htb">
<ul>
<li id="fb"><a href="YOUR FB URL">Facebook</a></li>
<li id="twit"><a href="YOUR TWT URL">Twitter</a></li>
<li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li>
<li id="rss"><a href="YOUR RSS URL">RSS
Feed</a> </li>
</ul>
</div>
<div align="center">
<font size="0.125">
<a href="http://tipsworldbd.blogspot.com">
Grab This]</a></font>
</div>

 

এবার আপনার username এবং url দিয়ে গ্যাডগেটটি সেইভ করুন। আপনার কাজ শেষ এবার ব্লগটি ভিজিট করে দেখুন। কেমন লাগছে দেখেতে? কমেন্টস্ এর অপেক্ষায় রইলাম।

5 মন্তব্য

একটি উত্তর ত্যাগ