Chèn khung sharing và subcribe ngay dưới bài viết

Hôm trước mình đã giới thiệu với các bạn một mẫu hộp subcribe theo kiểu kết hợp như thế này rồi và hôm nay mình lại giới thiệu thêm một mẫu nữa, nó có kết hợp socialbookmark, sharing và like.

XEM DEMO

#Cách thực hiện

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ bên dưới, các bạn tìm thẻ thứ hai mà bạn thấy

<div class='post-footer'>

4. Dán code dưới vào dưới thẻ mà các bạn vừa tìm được

<!-- Social Subscription Widget by khanh98.blogspot.com -->
<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 Oswald, cursive; margin: 0px 0px 10px 15px;'>Miễn phí nhận tin mới</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=blogkhanh98&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='tntbystc' />
<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;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Theo dõi tôi trên:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='https://www.facebook.com/khanh98blogspotcom' target='_blank' title='Tìm tôi trên facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2f8hLBIiY5xpC93tbcbIISxkBPwFL0Asu91h-9qWt8qzA9kizpsxHK5XWu2D-gGmydUNoAiWoSA2qd-GCDyD1fDgDebpXj1rveztbDP-Q2_P18QIuczvuxzLrJJR7zKfhhsMoosN93E/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/chelskivn29' rel='nofollow' target='_blank'
title='Theo dõi trên Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhbqnO5G2sPJZ7O582ryOoEFp9xEmS86aYwMwRD_2CFmElGQAXyvYwViX2fMY3wiLYqP5zXopo0sG9mz6m58wZTCR3_c92soimUFlrIZLGMh3FZvVorXpxUBsACdC5Kbw1jgQH_N8BCQ/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/+Qu%E1%BB%91cKh%C3%A1nhB%C3%B9i2641998' rel='nofollow' target='_blank'
title='Thêm vào vòng kết nối của Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh76vPSqI7sVv47n6UHyf2RcWrpqBuF81BjjwFd_P20Y6MQrmmY2J8DCOoCKq3ZcTkt0TTO-CCK5eK0VE8pYhCeJCdIpt1YIkldO3olYZSJpzzqTxlrPD0bAwFuTKg1tKHdPUx7FD6kqL8/s32/googleplus-revised.png' alt='gplus'/></a>
  <a href='http://pinterest.com/quockhanh.bui.50' rel='nofollow' target='_blank'
title='Theo dõi trên Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnVLx7MqGv-7SMhe62EAYPTmKQPXvdSWxQukqtbmEXTwcjKMZ10CaMhAGbNnWMMbovlKcoMa0HUdF0-VlnbX1_R-b7W4KM4xwi_9Mt5BIgeEFIey0QCznmlsflbZaggmwGlPJYTOACeig/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://khanh98.blogspot.com/atom.xml' rel='nofollow' target='_blank'
title='Xem nguồnRSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnMbcqURP5If8qM4VFx6EVXQruAftyQvDT7YVG5y8Khur3gir1bPUEeLBhVEYnGEIZXoYLUZcgSQpcKt5RNOQw7FMsVc7L4MLx-LbXLWymilEu12k3pmzUv6fsiknzviQO0itYdDHyWg/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/khanh98.blogspot.com&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>
<!-- End Social Subscription Widget by khanh98.blogspot.com -->

Lưu ý:

đoạn màu lam thành liên kết đến fanpage của bạn trên Facebook
Đoạn màu vàng là địa chỉ blog của bạn
Đoạn màu đỏ là liên kết đến trang Pinterest
Đoạn màu lục là liên kết đến tiểu sử Google + của bạn
Đoạn màu lam nhạt là liên kết tới trang Twitter của bạn
Thay blogkhanh98 thành ID Feeds của bạn

5. Lưu mẫu lại.
Bây giờ bạn hãy truy cập vào một bài viết bất kì trên blog của mình để xem kết quả.

Khanh blog

Search This Blog

Chèn khung sharing và subcribe ngay dưới bài viết

#Cách thực hiện

Comments

Post a Comment