Widget kết nối với các mạng xã hội và nhận bài viết qua email cực cool

Với mục đích thúc đẩy và tăng lưu lượng truy cập của blog của bạn va tiện ích sau có thể thực hiện giúp bạn.  Nó có khả năng thúc đẩy blog của bạn tăng người hâm mộ và từ các widget Facebook và các mạng xã hội khác nhau. Độc giả của bạn cũng sẽ có cơ hội để kết nối với bạn bè khác trên các mạng xã hội khác của bạn và tất cả các tính năng này chỉ trong một widget nhỏ gọn. Widget này có gần như mọi thứ bạn cần để quảng bá blog của bạn đến các độc giả. Gồm có một hộp nhận bài qua email, hộp chia sẻ , Facebook và tất cả những gì bạn muốn? Nó có thể thay thế bất cứ nút liên kết đến mạng xã hội của bạn trên blog. Hãy sẵn sàng để thêm tiện ích vô cùng thú vị này

Demo

Cách 1:Nếu bạn muốn tiện ích xuất hiện ở bài đăng thì làm theo các bước sau
Đến Blogger -> Mẫu -> Chỉnh sửa HTML -> Mở rộng mẫu
Tìm

 <data:post.body/>

Có thể sẽ có 2 hoặc 3 code tương tự như trên nhưng bạn chỉ cần thêm đoạn code bên dưới vào ngay sau code đầu tiên bạn tìm được và lưu lại

Cách 2:Nếu bạn muốn xuất hiện ở tất cả các trang thì tạo một widget HTML mới vào vị trí phù hợp sau đó dán toàn bộ code bên dưới vào rồi lưu lại

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Georgia, cursive; margin: 0px 0px 10px 15px;'>Nhận Bài Viết Qua Email</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TrollVL&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TrollVL' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Email Của Bạn...&quot;) {this.value = &quot;&quot;}'
type='text' value='Email Của Bạn...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Gửi Đi !'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='http://facebook.com/hcvvn' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvSS1SWhpZaLdBXjZAlzPM-wjc5DcPmafybKWOM-eZXZQiAPiZ6JSCRv1pkF2Fp2U47FsMdQe35bqVLnJ7VTA5-gCu8lEtqQqem-3V3fRF3OgupARCM1vng4LiQF-5xJChaA9Wte5tkg/s32/facebook500.png' alt='facebook'/></a>
<a href='https://twitter.com/huycovip' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQIXPUX8JSfcnLjE7607yhZegKWJ0MiIfpo5ixKK2tREliOtpnCwSVy-fYaj5OZZ5kLscQLzAGnPJoXHqwFNH8ajMe_ZoaptFNNWaVH5PDxpIli1OjEj16OXNZA7c33ARcKK3cJVrrP_I/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/111941549462862834354' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNant11HyD9t86iuQthJN3U7IfNpl5dZJpg0787XkBzSiVC1Mgs0YfftJ4mb0BRTG-EkM9fIFq6_nQIJDUd7jyLt3IzdsvEbjio2q80IrJFSTJA35FPhR-aMI92jZ9v-zLVS-ROzcbqqc/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/huycovip/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEapzT4QKFTleS-RpuHO9axxSllS_MYUtIwJeClxWGUN8e6WnmKz1gM4lHA3AF2l-CT7DneG93mGSARnJv4iMwJv9u1RxyWgo_AJ5VX_j85dG5lHsqUAtge2vw-pDR293dHEBkpqolTE/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://trollvl.blogspot.com/feeds/posts/default' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYOqm12QtnszzEhNK19R5UnZ-d-3Y2rvuZ46r6BgFANQyje8a8t8p7RoJyDI2L0NjOyOw5sf4VfB0vQ0QNo3emlYwpg4E7AuZkBD2zwlmnbosZF5R4Ytnh2YsU7nHkv40pIn5lBz2vtlk/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/hcvvn&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>

Thay đổi sao cho phù hợp với màu nền blog #fff  
Và bạn nhớ thay đổi những chữ và đường link mình bôi màu thành link của mình nha!
Hi vọng tiện ích trên sẽ giúp các thu hút nhiều độc giả hơn cho blog của mình

Bài viết trên mình dịch từ MBT