আসসালামু অলাইকুম বন্ধুরা , আজকে আবারও আপনাদের জন্য দারুন একটি মজার ব্লগার ওয়েডগেট নিয়ে এলাম আশাকরি আপনাদের ভালো লাগবে । এটা আপনার ব্লগের প্রতিটি পোস্টের নিচে শো করবে দেখলেই আপনার ব্যবহার করতে ইছে হবে । যারা ব্লগার নিয়ে আমার মতো ঘাটাঘাটি করছেন তারা মনে এই ওয়েডগেট আগেই দেখেছেন । যাই হোক যারা নতুন তাদের এটা সত্যি একদম নতুন স্টাইল মনে হবে । তাহলে নিচে থেকে ডেমো এবং কিভাবে অ্যাড করবেন দেখে নিন ।
কিভাবে যুক্ত করবেন দেখে নিন !
- প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন ।
- ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
- Edit HTML এ ক্লিক করে নিচের ট্যাগটি খুজেবের করুন ।
<data:post.body/>
উপরের ট্যাগটি আপনি অনেক বার পাবেন কিন্তু দ্বিতীয় বার যেটা পাবেন তার ঠিক পরে বা নিচে নিচের কোড গুলো কপি পেস্ট করে বসিয়ে দিন ।
<b:if cond='data:blog.pageType == "item"'>
<style>
#byard-socializer {
width: 500px;
height: 240px;
border: 1px solid #ddd;
-webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
background: #f1f1f1;
-transition: background 0.50s;
-webkit-transition: background 0.50s;
-moz-transition: background 0.50s;
margin-bottom: 10px;
overflow: hidden;
}
#byard-socializer:hover {
background: #fff;
}
#byard-socializer-title {
text-align: center;
border: 1px solid #2aa4cf;
font-size: 20px;
background: #2aa4cf;
font-weight: 2000;
font-family: oswald;
padding: 5px;
color: #fff;
}
#SocializeIt {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
.heading {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 30px;
font-family: oswald;
}
#followus, #share {
float: left;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
}
.likeonfb, .followontwitter, .sharing {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
#sw-credits {
float: right;
padding: 3px;
font-size: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
if (!_0x2162x1['getElementById'](_0x2162x3)) {
_0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
_0x2162x1['id'] = _0x2162x3;
_0x2162x1['src'] = '//platform.twitter.com/widgets.js';
_0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
};
})(document, 'script', 'twitter-wjs');
</script>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='byard-socializer'>
<div id='byard-socializer-title'>
Socializer Widget By Blogger Yard
</div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FAsobondhublog&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/Asobondhu' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
</div>
</center>
</b:if>
<style>
#byard-socializer {
width: 500px;
height: 240px;
border: 1px solid #ddd;
-webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
background: #f1f1f1;
-transition: background 0.50s;
-webkit-transition: background 0.50s;
-moz-transition: background 0.50s;
margin-bottom: 10px;
overflow: hidden;
}
#byard-socializer:hover {
background: #fff;
}
#byard-socializer-title {
text-align: center;
border: 1px solid #2aa4cf;
font-size: 20px;
background: #2aa4cf;
font-weight: 2000;
font-family: oswald;
padding: 5px;
color: #fff;
}
#SocializeIt {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
.heading {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 30px;
font-family: oswald;
}
#followus, #share {
float: left;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
}
.likeonfb, .followontwitter, .sharing {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
#sw-credits {
float: right;
padding: 3px;
font-size: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
if (!_0x2162x1['getElementById'](_0x2162x3)) {
_0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
_0x2162x1['id'] = _0x2162x3;
_0x2162x1['src'] = '//platform.twitter.com/widgets.js';
_0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
};
})(document, 'script', 'twitter-wjs');
</script>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='byard-socializer'>
<div id='byard-socializer-title'>
Socializer Widget By Blogger Yard
</div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FAsobondhublog&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/Asobondhu' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
</div>
</center>
</b:if>
উপরের কোড থেকে হাইলাইট কালারের লিখা গুলো মুছে আপনার পছন্দের লিখা দিন । যেমনঃ width: 500px; height: 240px; আপনার থিমের উপর নির্ভর করে বাড়িয়ে কনিয়ে নিন এবং Asobondhu মুছে আপনার সোশ্যাল ID বসান ।
- ব্যাস এবার Save Template এ ক্লিক করে বেরিয়ে আসুন ।
☞ আশাকরি কাজটি করতে কোন সমস্যা হলনা কোন রকম সমস্যা হলে অবশ্যই আমাকে জানাবেন । পোস্টটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । তাহলে আজকের মতো এই পর্যন্ত ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।
কি সব গুলতে আসেনা ভাই ?
উত্তরমুছুন