Làm Đẹp Hộp Subscription Và Mạng Xã Hội

Điều này phụ tùng thuê bao xã hội được thực hiện 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 trong cách cư xử khác nhau. Nó có tiềm năng để thúc đẩy các thuê bao của bạn, người hâm mộ và các widget Facebook thậm chí có thể làm cho bạn virus trên các mạng xã hội khác nhau. Độc giả của bạn cũng sẽ nhận được một cơ hội để kết nối với bạn trên các mạng khác của bạn và tất cả các tính năng này chỉ trong một widget một cách nhỏ gọn và đoan trang. Widget này có gần như mọi thứ bạn cần để quảng bá blog của bạn và người hâm mộ tăng và các độc giả. Nó có một hộp subscribe, chia sẻ hộp, Facebook giống như hộp, những gì khác bạn muốn? Nó có thể thay thế bất cứ nút nào xã hội khác, vật dụng hoặc bổ sung bạn đang sử dụng trên blog của bạn. Hãy sẵn sàng để xem vẻ đẹp tuyệt vời trong hành động mà sẽ nuôi dưỡng blog của bạn.

Demo :

1.Đăng nhập vào Blogger - Thiết kế  -> Chỉnh sửa -> Tiến hành

Sao lưu mẫu của bạn

2.Đánh dấu ô mở rộng tiện ích.

3.Nhấn F3 tìm kiếm dòng code sau :

<data:post.body/>

Mã này có thể có 2-3 lần xuất hiện trong mẫu của bạn nhưng bạn cần phải chỉ cần tập trung vào sự xuất hiện đầu tiên. Dán đạon code sau vào bên dưới đoạn mã sau.

<!--No Ordinary Social Subscription Widget--> 
<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;'>Get Free Updates in your Inbox</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/AVvXsEj-gqUSJFVw270OH1kCM5E1zAQNnAfh9IyKRWa7a9sfRXtfy5RcrfNUkFPG9SWC_THehP_UKlEum7FAbBtfgAronTvE1DX4jwB0s2WnUKNTM9HP75rjcLzclm_yt2cJ1GvmcUrtSDInn2M/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/AVvXsEgz4ku-IUqMbs7ngCbXmIHkVsahblVMl2aS4mBRunYfOZeOA7lTD7XMksvi-LcU73NI47MnF4BYzcM4vfVrdQaVNeUyoRBh_mnA02SnuEzL475jxRzjKqFnXlQuzHAAVHQj5Wxb_ydEMfI/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/AVvXsEj4kOrogrCX83mdm1P9bQPWXsq2lLVtgx5xq7xXNNVncEH6jm-MF966Silz60ovfkimdVog3P45Hk6Q84TJIHKd-GXghrPlZuirBzsY3QcUcbAnizqPtMrB7U6vNxUuPyWAG_ZaXj22ayQ/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/AVvXsEhYocIQpfCmC3IaSlkgD2xZLyNfoAwParx5ZBcDkW6PjJv2oX4i-CNgbW3dNAJEOrPsva5yrUmVbmZ41kl1Q18x0w7ffRdTSOaimVBvc3jgMD65LX8dVHmvYzZc_wbuOpC1LIhikuL3TAU/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/AVvXsEjSx0MCN4PUFsBW8nu132kpI5kcWaiQFwNVjfPVOwpdfbmVFdWEPUhAznZeRGJpHKN7CB6kjQUtKpI_gokQxl395kePDUIKbGnfkyfxNmrtMIJQpAw0Q78JIsyv4_7Ift-s8jCIjcsNEtg/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%2Fbloggertricks&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> 
<!--No Ordinary Social Subscription Widget-->

Thay đổi được thực hiện:

Thay thế tntbystc với TITLE FEED Feedburner của bạn. Bạn nhận được những giá trị này bằng cách vào tài khoản Feedburner của bạn -> Công bố công khai - theo dõi Email>

Thay thế 'URL FACEBOOK' với liên kết trang Facebook fan hâm mộ của bạn

Thay thế 'URL TWITTER' với các liên kết Twitter của bạn

Thay thế 'GOOGLE + URL' với trang Google+ của bạn

Thay thế 'URL Pinterest' với các liên kết Pinterest

Thay thế 'URL RSS' với các liên kết nguồn cấp dữ liệu RSS

Bây giờ cho Facebook như hộp, hãy làm theo các bước sau:

Lấy URL trang Facebook fan hâm mộ (Không bao gồm http://)

Thay thế tất cả các dấu gạch chéo (/) trở lại với 2F%

Bây giờ thay thế www.facebook.com 2Fbloggertricks% với URL của bạn bạn đạt được chỉ là bây giờ.