সোশ্যাল মিডিয়া শেয়ার বাটন রেস্পন্সিভ সঙ্গে CSS স্টাইল ব্লগার ব্লগের জন্য !

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

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







উপর থেকে ডেমো দেখেনিন আশাকরি ডেমো দেখে আপনার স্টাইল পছন্দ হয়েছে এবং ব্যবহার করবেন ঠিক করেছেন। যাই হোক ব্যবহার করতে চাইলে নিচের স্টেপ গুল অনুসরন করুন।


কিভাবে সোশ্যাল মিডিয়া শেয়ার বাটন যুক্ত করবেন :


প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন তারপর Edit HTML এ ক্লিক করুন।

এবার কীবোর্ড এর CTRL+F প্রেস করে এই ট্যাগ সার্চ করুন ]]></b:skin> এবার এর ঠিক উপরে নিচের কোড গুল কপি পেস্ট করুন।


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if> 


এবার একি ভাবে CTRL+F প্রেস করে এই ট্যাগ সার্চ করুন <data:post.body/> বা <div class='post-header-line-1'/> এখুন এই কোড আপনি একবার থেকে দুই তিনাবার পাবেন কিন্তু আপনি দ্বিতীয় বার যেটা পাবেন তার ঠিক নিচে নিচের কোড গুল কপি করে পেস্ট করুন।



 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @esobondhu - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-twitter'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-google-plus'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-pinterest'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-linkedin'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if> 



উপরের কোড থেকে esobondhu খুজুন এবং সেটা মুছে সেখানে আপনার টুইটার উজার নাম বসিয়ে দিন তাহলেই হবে। 


দাঁড়ান আর একটু কাজ বাকি আছে। যদি আপনার থিমে Font-Awesome এই আইকন লিঙ্ক অ্যাড না থাকে তাহলে </head> ট্যাগ এর ঠিক উপরে নিচের লিঙ্ক টি বসিয়ে দিন।


 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/> 


ব্যাস Save Template এ ক্লিক করুন এবং আপনার ব্লগ ভিজিট করুন আশাকরি আপনি কাজটি করতে সুন্দর ভাবে সফল হয়েছেন। কোন রকম সমস্যা হলে অবশ্যই নিচে কমেন্ট করুন। আর বন্ধরা পোস্টটি ভাল লাগলে বন্ধদের সঙ্গে অবশ্যই অবশ্যই শেয়ার করুন এবং কেমন লাগলে আমাকে কমেন্ট করে যানাতে ভুলবেন না। ভাল থাকবেন সুস্থ থাকবেন। আসসালামু আলাইকুম।

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,3,অ্যান্টিভাইরাস,9,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,36,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,122,টেম্পেলেট,53,ডাউনলোড,75,নোটিফিকেশন,1,পিসি টিপস,15,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,2,
ltr
item
এসো বন্ধু: সোশ্যাল মিডিয়া শেয়ার বাটন রেস্পন্সিভ সঙ্গে CSS স্টাইল ব্লগার ব্লগের জন্য !
সোশ্যাল মিডিয়া শেয়ার বাটন রেস্পন্সিভ সঙ্গে CSS স্টাইল ব্লগার ব্লগের জন্য !
সোশ্যাল মিডিয়া শেয়ার বাটন খুবি দরকারি ও কার্যকারী একটি ওয়েডগেট এটা সবাই জানেন। কারন সোশ্যাল মিডিয়া শেয়ার বাটন ব্যবহার করলে আপনার ব্লগের ভিজিটর খুব সহজেই কোন পোস্ট পড়ার পর সেই পোস্ট ভাল বা পছন্দ হলে বন্ধুদের সঙ্গে বিভিন্ন সোশ্যাল মিডিয়াতে শেয়ার করে থাকে এর ফলে অবশ্যই আপনার ব্লগের জনপ্রিয়তা বাড়বে।
http://1.bp.blogspot.com/-bncj4_k5NwE/Vd_sg_KUKvI/AAAAAAAAK0g/zCYZuVxgGNY/s1600/social-media-share-buttons.jpg
http://1.bp.blogspot.com/-bncj4_k5NwE/Vd_sg_KUKvI/AAAAAAAAK0g/zCYZuVxgGNY/s72-c/social-media-share-buttons.jpg
এসো বন্ধু
http://www.esobondhu.com/2015/08/social-media-share-buttons-blogger-blog.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2015/08/social-media-share-buttons-blogger-blog.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy