দারুন অ্যানিমেটেড CSS Sprite সোশ্যাল ব্লগার ব্লগ ওয়েডগেট !

আসসালামু অলাইকুম বন্ধুরা সবাই কেমন আছেন ! আশাকরি সবাই খুব ভালোও সুস্থ আছেন আমিও আপনাদের দোয়াই ভালো ও সুস্থ আছি । যাই হোক আজকে আমি আপনাদের জন্য নিয়ে এলাম দারুন মজার একটি অ্যানিমেটেড সোশ্যাল ব্লগার ব্লগ ওয়েডগেট এটা একদম নতুন স্টাইল নিচে থেকে ডেমো দেখে নিন তাহলেই বুঝতে পারবেন এটা দেখতে কেমন । তাহলে দেরি না করে চলুন শুরু করা যাক ।

সোশ্যাল ওয়েডগেট ডেমো

☞ উপরের লিঙ্কে ক্লিক করে ডেমো দেখে আসুন । তাহলে নিচে থেকে দেখে নিন কিভাবে আপনার ব্লগে যুক্ত করবেন ।

কিভাবে আপনার ব্লগার ব্লগে যুক্ত করবেন নিচের টিপস দেখুন !

• প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ।

• ড্যাশবোর্ড থেকে Layout → Add a Gadget → HTML/Javascript এ ক্লিক করুন ।

• এবার নিচের কোড গুলো Content ঘরে কপি পেস্ট করুন ।

<div><a href="https://twitter.com/asobondhu" title="Follow us on Twitter" class="social-link social-twitter"></a><div>
<div><a href="https://www.facebook.com/asobondhublog" title="Like us on Facebook" class="social-link social-facebook"></a></div>
<div><a href="http://feeds.feedburner.com/asobondhu" title="Subscribe to our RSS Feeds" class="social-link social-rss"></a></div></div></div>
<style type="text/css">
/*CSS Sprite Animated Social Media Icons by bloggerwidgetgenerators.com*/
.entry-social {
  height: 40px;
  padding-top:10px;
  padding-bottom:10px;
}
.entry-social > div {
  float: left;
  margin-right: 20px;
}
.entry-social .fb-like span{
    vertical-align: top !important;
      padding-top: 2px;
}
.fb-like span iframe{
    max-width: none;
}
.sidebar-social > div > div {
    width:50%;
    float:left;
}
.sidebar-social > div > div:nth-child(odd) {
    width:60%
}
.sidebar-social > div > div:nth-child(even) {
    width: 40%;
}
.sidebar-social > div > div > a > img {
    float: left;
}
.sidebar-social > div > div > div {
    float:left;
    margin-top:10px;
    margin-left:12px
}
.sidebar-social p {
    clear: both;
    margin: 0;
    padding: 10px 0 0;
}
.social-link {
     display:block;
    height: 50px;
    width: 50px;
    float: left;
    -webkit-animation: social .6s steps(12,end) infinite;
    animation: social .6s steps(12,end) infinite;
    /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-twitter {
    background-image: url(http://3.bp.blogspot.com/-imX7YgRyr08/U-yARyGN5FI/AAAAAAAANbA/4hoPiwpFO28/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(http://1.bp.blogspot.com/-Z9xBt0KFJW4/U-yAR5YZ7tI/AAAAAAAANbM/wGmM77Q6sYk/s1600/rss-sprite.png);
      -webkit-animation: social-rss .6s steps(9,end) infinite;
    animation: social-rss .6s steps(9,end) infinite;
      /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-facebook {
    background-image: url(http://3.bp.blogspot.com/-d9tt3kxKbmg/U-yASA8GuWI/AAAAAAAANbE/2UwDsjlARbs/s1600/facebook-sprite.png);
}
@keyframes social {
    from { background-position: 0 0; }
    to { background-position: -600px 0; }
}
@-webkit-keyframes social {
    from { social-position: 0 0; }
    to { background-position: -600px 0; }
}
@keyframes social-rss {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}
@-webkit-keyframes social-rss {
    from { social-position: 0 0; }
    to { background-position: -450px 0; }
}
</style>

উপর থেকে কালার URL মুছে সেখানে যথাক্রমে আপনার ফেসবুক , টুইটার , ফীড URL বসান ।

Save এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ভিজিট করুন ।


☞ ব্যাস তাহলে আজকের এই পোস্টটি আপনাদের ভালো লেগেছে এবং এই ওয়েডগেট আপনারা আপনাদের ব্লগে ব্যবহার শুরু করছেন । কোন কোন ব্লগে ব্যবহার করলেন লিঙ্ক দিতে পারেন আমি দেখবো । আর হ্যাঁ পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন সমস্যা হলে আমাকে কমেন্ট করুন । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।