Hướng dẫn chèn widget chia sẻ bài viết lên MXH cực đẹp cho blogspot
 |
| Widget chia sẻ bài viết lên MXH cho blogspot |
Khi đã sở hữu cho mình một blog tuyệt vời ông mặt trời thì điều trước tiên là chúng ta muốn quảng bá blog tới nhiều người. Các cách quảng bá blog thì vô số nhưng phổ biến nhất chính là chia sẻ bài viết lên MXH như Facebook, Zalo, Youtube...nhất là khi bạn vừa viết một bài cực hay và muốn chia sẻ ngay và luôn lên Facebook một cách nhanh nhất và đơn giản nhất thì có lẽ chèn một widget chuyên đảm nhiệm việc share này là điều hoàn toàn cần thiết.
Làm thế nào để chèn widget chia sẻ bài viết vào blog?
Điều này thì có nhiều cách khác nhau, sau đây mình hướng dẫn các bạn chèn widget chia sẻ MXH vào bài viết cực đẹp, khá nhiều trang blog đang áp dụng theo cách này.
Bước 1: Đăng nhập vào Blogger rồi chọn Mẫu
Bước 2: Chọn chỉnh sửa mẫu ở chế độ HTML.
 |
| Chỉnh sửa mẫu ở chế độ HTML |
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Bước 4: Tìm thẻ ]]></b:skin> rồi coppy đoạn mã sau dán lên trước nó
/* Smart Share widget */Bước 5: Tìm thẻ <data:post .body=""> hoặc </data:post>
.smartshare,.sharewrap{position:relative;display:block;font-size:0;margin:auto;text-align:center}
.sharewrap{display:block;text-align:center;margin:30px 0 0 0}
.sharewrap a.sb,.sharewrap a.fb,.sharewrap a.gp,.sharewrap a.tw,.sharewrap span.pl{text-decoration:none!important;display:inline-block;margin:0 .5px;font-weight:400;font-size:12px;color:#fff;text-shadow:none;padding:6px 10px;opacity:1;transition:all .3s}
.sharewrap a.sb {background:#222222;}
.sharewrap a.gp {background:#f20000;}
.sharewrap a.fb {background:#516ca4;}
.sharewrap a.tw {background:#00baff;}
.sharewrap span.pl {background:#ff6600;}
.fbbutback,.googlebutback,.plusbutback,.twbutback{font-size:13px!important;vertical-align:middle}
.sharewrap a.fb:hover,.sharewrap a.gp:hover,.sharewrap a.tw:hover,.sharewrap span.pl:hover{color:#fff;opacity:.9}
.sharewrap a.fb:active,.sharewrap a.gp:active,.sharewrap a.tw:active,.sharewrap span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#sharepop{display:none}
.sharepopup{position:absolute;bottom:100%;right:15%;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;}
.sharepopup li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.sharepopup li a{color:#333!important;font-weight:400;display:block}
.sharepopup li a:hover{color:#078FF8!important}
ul#sharepop{margin:10px 0;padding:5px 15px}
<div class="post-footer">
</div>
Bước 6: Coppy đoạn mã sau và dán nó lên trước (trên) thẻ <data:post .body="">
<b:if cond="data:blog.pageType != "index"">
<b:if cond="data:blog.pageType != "archive"">
<b:if cond="data:blog.pageType == "item"">
<script type="text/javascript">
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharewrap">
<div class="smartshare">
\
<a class="sb" <h2>Sharing is Caring </h2>
<i class="fa fa-share-square-o"></i></a> \ \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus googlebutback"></i> Google</a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbbutback"></i> Facebook</a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter twbutback"></i> Twitter</a> \
<span class="pl" data-target="#sharepop"><i class="fa fa-share-alt plusbutback"></i> Share More</span> \
<ul class="sharepopup" id="sharepop"> \
<li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li>
\
<li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li>
\
<li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li>
\
<li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li>
\
<li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li>
\
<li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li>
\
<li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li>
\
<li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li>
\
<li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li>
\
</ul>
\
</div>
<div class="clear">
</div>
</div>
\
');
$(document).ready(function(){$(".pl").click(function(){$("#sharepop").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
//]]>
</script>
</b:if></b:if></b:if>
<div class="clear">
</div>
Bước 7: Lưu template và thưởng thức!
Nhận xét