Chèn khung Social Sharing & Subscription bên dưới bài đăng

By Unknown Posted at 12:55 AM Thủ Thuật Blog 0 comments

Bài viết này mình sẽ chia sẻ tới các bạn cách tạo khung Social Sharing & Subscription vào cuối bài viết. Widget gồm có 3 thành phần là box subscribe, box sharing và box fanpage. Các bạn có thể xem hình bên.

Dưới đây là cách thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML. Tìm thẻ <data:post.body/>.

Bước 2: Chèn đoạn code sau vào bên dưới nó:

<!-- Social Subscription Widget by www.đoàntrịnh.vn --> 
<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;'>Đăng ký 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=tntbystc&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;'>Follow us on:</div> 
<div style='margin: -32px 0 0 120px;'> 
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-8dMFe5E2BqtV5wCwEdbNq1yDixebAcTGHn74pIehcXoN0-H1pPPjWZeeQrIHgIDu8WfDvhpH8ZOsmsjJi3U8ysCOUhyg3oIiRdFCwkGk_hM8Hk2KNsqhQ5LSlQOjgZDyr4ttzJLank/s32/facebook500.png' alt='facebook'/></a> 
<a href='TWITTER URL' rel='nofollow' target='_blank' 
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZRUa3X_UlvRaU69MyPdtRQPpDweHEuT0tV4-wxXf65MBfeRFcKpA4crwJIdB7v9MIRw6jSIlVlRUgIehFnld-Xg3IdYYycTHaUKRfEHOGido9nd_T4p1xxd25ExyU2WpDdcADoOJMnY/s32/twitter.png' alt='twitter'/></a> 
<a href='GOOGLE+ URL' rel='nofollow' target='_blank' 
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5b1UNicjKyGwgpZYAIB2AeWpxjsdSELYAqohSFMtaJectkJ2BVIbaqIl9UPo4sszpnDeKr__7lVoD_3JqE9X8Ru0yYGU1Q8SXs3YcFyCIPjhg39LcPOjdRGBuRB1UMUhLE-A9tf50a58/s32/googleplus-revised.png' alt='gplus'/></a> 
<a href='PINTEREST URL' rel='nofollow' target='_blank' 
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgci-HHAKA8EnypMWAiZth3l5Rl32GzCFg4fxeszAcf0h-zzKFpIIBCVfwgqYF7js6ZTLH2jamV5i_JW82MGOstGfASoqbt7CydIgFhelBz1PBt6l2Qjuqbf7b9cuLZnu5O7UzUtfGvNKM/s32/pinterest.png' alt='pinterest'/></a> 
<a href='RSS URL' rel='nofollow' target='_blank' 
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nWr2xSNb_ST2ttB5cLGRPWeJfmtmx6OM0LNXRPth5gyMmXKb6JS5NWW-AhnvGC28Z9tmHaO40jJ2nuYN8nPwPgKVTJL1Z8QN54lZ2gMcS0SOgv1x7DGiu_HrJ_t1gwX4ANtp5gGybY0/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%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&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 www.đoàntrịnh.vn -->