আসসালামু আলাইকুম

শনিবার, ৩০ জুন, ২০১২

খুব সহজেই Blog-এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।

আসসালামুআলাইকুম। প্রিয় বন্ধুরা কেমন আছেন সবাই? আশা রাখি আল্লাহর মেহেরবাণীতে ভালো আছেন। ব্লগ নিয়ে ধারাবাহিক টিউন করার ইচ্ছা থাকলেও আমার থেকে অনেক যোগ্য টিউনাররা পূর্বেই তা করেছেন। তাই ঐ দিকে আর হাত বাড়ালাম না, আজকে ভাসমান শেয়ার বাটন কিভাবে ব্লগে যোগ করা হয় তা আমরা শিখবো(অনেকেই হয়তো পূর্বে থেকেই জানেন)। ব্লগে ভাসমান শেয়ার বাটন যোগ করলে সৌন্দর্য দারুন বৃদ্ধি পায় এবং পছন্দের Post গুলো ব্লগের ভিজিটররা সহজে Facebook, Twitter, Google+ ইত্যাদি সামাজিক সাইটে এ শেয়ার করতে পারে। এই শেয়ার বাটনের মাধ্যমে ব্লগের Page এবং Post গুলো খুব সহজে শেয়ার করা যায়। Page scroll করার সময় এটি সর্বদা দৃশ্যমান থাকবে। তাই দেখতে অনেক সুন্দর এবং ব্লগকে আকর্ষনীয় করে তুলে।
Floating+Share+Button1 খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
নিচের দিকনির্দেশনা গুলো যথাযথভাবে অনুসরন করুন কোনরকম ভুল না করে।
১. প্রথমত আপনার ব্লগের টেমপ্লেটটিকে ব্যাকআপ করে রাখুন। নিচের চিত্রগুলো যথাযথভাবে অনুসরন করুন।
ক. Template-এ ক্লিক করুন।
aTemplate+Clink খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
খ. Backup/Restore -এ ক্লিক করুন।
aBackupe খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
গ. Download Full Template এ ক্লিক করুন এবং সেভ করুন। Close করুন।
aDownload+Template খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
ঘ. এখন Layout-এ ক্লিক করুন।
aLayout খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
ঙ. Add a Gadget এ ক্লিক করুন।
aAdd+a+Gadget খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
চ. HTML/Javascript গেজেট টি বাছাই করুন।
aHTML খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
নিচের Code গুলো গুলো গেজেটে Copy/Paste করে Save করুন।


<style>
/*——-MBT Floating Sharing Widget————*/
#floatdiv {
position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small,
.FBConnectButton_RTL_Small {width:52px !important;
-moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small
.FBConnectButton_Text {padding:2px 2px 3px
!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id=”floatdiv”>
<div id=”mbtsidebar”>
<table cellpadding=”1px” cellspacing=”0″>

<tr>
<td style=”padding:5px 0px 0px 0;”>
<a
href=”http://twitter.com/share” class=”twitter-share-button”
data-count=”vertical”
data-via=”mybloggertricks”>Tweet</a><script
type=”text/javascript”
src=”http://platform.twitter.com/widgets.js”></script>
</td>
</tr>
<tr>
<td style=”padding:5px 0 2px 0;”>
<a name=”fb_share” type=”box_count”
href=”http://www.facebook.com/sharer.php”>Share</a><script
src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”
type=”text/javascript”></script>
</td>
</tr>
<tr>
<td style=” padding:5px 0px 0px 0px;”>
<script
src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’>
{lang: ‘en-US’} </script>
<g:plusone size=”Tall” expr:href=”data:post.url”>
</g:plusone></td>
</tr>
<tr>
<td>
<p
style=” line-height:0px; font-size:10px; font-weight:bold;
text-align:center;”><a style=”color:#D3D3D3;”
href=”http://www.mybloggertricks.com”>Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
গেজেটটি এখন Blog Posts এর নিচে Drag করে নিয়ে আসুন এবং Save arrangement-এ ক্লিক করুন।
aGadget+Add খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
ব্যস, Save করুন, View Blog-এ ক্লিক করে এখন ভাসমান শেয়ার বাটনটি আপনার Home page এবং Post গুলোতে দেখতে পাবেন। উপভোগ করুন।


বি: দ্র: শেয়ার বাটনটি Home page এ না দেখতে চাইলে এবং শুধু Post গুলোর পাশে দেখতে চাইলে নিচের কাজগুলো করতে হবে।
১. Template এ ক্লিক করুন। পূর্বের মত Template টি ব্যাকআপ রাখুন।
২. Edit HTML যান এবং Proceed-এ ক্লিক করুন।
aProceed খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
৩. Expand Widget Template-এ ক্লিক করুন।
aExpand+Widget+Template খুব সহজেই Blog এ ভাসমান শেয়ার বাটন(Floating Share Button) যুক্ত করুন।
৪. নিচের মত Code গুলো তালাশ করুন। HTML8 এর স্থানে HTML1,23 থাকতে পারে।
<b:widget id=’HTML8′ locked=’false’ title=’WIDGET-TITLE-HERE‘ type=’HTML’>
<b:includable id=’main’>
৫.লাল Code-এর পরে নিচের সবুজ Code গুলো দিয়ে দিন।
<b:if cond=’data:blog.pageType == “item”‘>


৬. এখন আরো একটু নিচে গিয়ে নিচের Code গুলো তালাশ করুন।
</b:includable></b:widget>
৭. লাল Code-এর আগে নিচের সবুজ Code গুলো দিন।
</b:if>




ব্যস, Save Template-এ ক্লিক করুন, ভাসমান শেয়ার বাটনটি Home Page-এ না দেখিয়ে শুধু Posts গুলোর সাথে দেখা যাচ্ছে।
সমস্যা হলে আমাদেরকে জানান সমাধান করা হবে ইনশাআল্লাহ।

0 comments:

একটি মন্তব্য পোস্ট করুন

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More