CSS সোশ্যাল শেয়ার বাটন ব্লগস্পট ব্লগে ব্যবহার করুন ।

সোশ্যাল শেয়ার বাটন এটা সাইটের জন্য খুবি জরুরি কারন বর্তমান সময়ে সোশ্যাল মিডিয়া ব্লগ ভিজিটরের একটা খুব বড় মাধ্যম । আর এটা সবাই যানেন এই সোশ্যাল বাটন কেন ব্যবহার করবেন বা ব্যবহার করা দরকার কারন একটাই আপনার পোস্ট বা ব্লগ কারও ভাল লাগলে সে খুব সহজে এই সোশ্যাল বাটনের সাহায্যে তার বন্ধুদের সঙ্গে আপনার ব্লগ এবং ব্লগ পোস্ট শেয়ার করতে পারবে । সোশ্যাল বাটন নিয়ে ইতি মধ্যে অনেক পোস্ট করেছি কিন্তু আজকের টা একদম ভিন্ন স্টাইল এবং নতুন স্টাইলও বলতে পারেন এই শেয়ার ওয়েডগেট এর সঙ্গে ব্যবহার করা হয়েছে - ফেসবুক , টুইটার , গুগল+ এবং লিঙ্কডইন তাহলে চলুন দেখে নেওয়া যাক কিভাবে আপনার ব্লগে ব্যবহার করবেন ।

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

CSS স্টাইল Contact Form - যোগাযোগ ওয়েডগেট ব্লগস্পট ব্লগের জন্য !!

কিভাবে CSS সোশ্যাল শেয়ার বাটন ব্লগস্পট ব্লগে ব্যবহার করবেন

প্রথমে ব্লগার অ্যাকাউন্ট লগইন করুন যে ব্লগে আপনি ব্যবহার করতে চান

এবার ড্যাশবোর্ড থেকে Template বাটনে ক্লিক করুন

ডান পাশে Edit HTML এ বাটনে ক্লিক করুন ।

এবার কোড ঘরের মধ্যে মউস ক্লিক করে CTRL+F প্রেস করে নিচের ট্যাগ খুজুন

]]></b:skin> বা </style>

উপরের ট্যাগ খুজে পেলে তার ঠিক আগে বা উপরে নিচের সিএসএস কোড গুল বসান

.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYaCuP_CoVod8HpUfKqlgAcSKcbCtxwln_lczH3Xzw0_mBd5WWHRrmiMjKx9seel5EbCib33gYuVn31BuD3CdpEyk-YHQq78qHqsv9DhKzFybp8BC5uXhb702fnJ9xbrz-oOQiBoBGgCc/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

সেভ করার দরকার নেই নিচের স্টেপ দেখুন একি ভাবে নিচের ট্যাগ খুজুন

<data:post.body/>

উপরের ট্যাগটি আপনার টেম্পলেটে বেশ কয়েক বার সার্চ করে পেতে পারেন কিন্তু আপনি দ্বিতীয় বার যেটা পাবেন বা তৃতীয় বার যেটা পাবেন তার ঠিক নিচে নিচের কোড গুল বসিয়ে দিন ।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

এই শেয়ার বাটনের ডেমো দেখাবো বলেছি তাই আপনি নিচের শেয়ার বাটনটা দেখুন এটা ঠিক এই রকম দেখতে হবে আপনার ব্লগেও ।

Share button demo

See the Pen RPZrBz by MD Aslam parvez (@okpt123) on CodePen.

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