Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Tiện ích theo dõi qua mạng xã hội cho Blogger


Ngày này thì những tiện ích theo dõi qua mạng xã hội (Widget Social Subscription) đang phổ biến trên tất cả mọi website. Lý do đơn giản là vì nếu bạn nắm trong nay một lượng người theo dõi càng lớn, thì đồng nghĩa với việc lưu lượng truy cập bạn sẽ càng cao. Do đó tiện ích này khá quan trọng, chúng ta cần phải trang trí cho thật đẹp để làm bắt mắt người dùng. Tại bài viết này mình xin chia sẻ widget theo dõi mình đang sử dụng.



Hướng dẫn cài đặt và sử dụng tiện ích theo dõi qua mạng xã hội

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS phía sau lên trên.

/* Social Subscription----------------------------------------------- */
.Twittco {
background: url(http://3.bp.blogspot.com/-q2MgHeleol8/Uh16ETq7mxI/AAAAAAAAEuo/avmmQVhO3qU/s1600/twitter_bird.png) 0 0 no-repeat;
padding: 0 15px 0 20px;
margin-left: 0;
height: 45px;
}
.Twitterocfollow {
background-color: #fff;
width: 294px;
height: 70px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.iframeoftwi {
margin-left: 55px;
margin-top: -31px;
}
.Socialiconsoc {
background-color: #fff;
width: 294px;
height: 70px;
background-repeat: no-repeat;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.Facebookox {
background-color: #fff;
width: 294px;
height: 40px;
margin-top: -6px;
background-repeat: no-repeat;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.Feedburneroc {
background-color: #fff;
background-repeat: no-repeat;
margin-top: -19px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
width: 294px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
#subboxs {
border: 1px solid #d2d2d2;
padding: 5px 26px 5px 10px;
color: #838383;
font-size: 18px;
height: 28px;
font-family: "Rancho", cursive;
outline: none;
width: 146px;
margin: 0 5px 0 0;
}
#subbuttons {
background-color: #3C3939;
border: 3px solid #272727;
cursor: pointer;
color: white;
width: 90px;
height: 38px;
margin: 0;
font-size: 22px;
font-family: "Rancho", cursive;
margin-right: 4px;
float: right;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#subbutton:hover {
background-color: #292929;
border: 3px solid #292929;
}
Bước 2: Chọn Lưu mẫu và tiếp tục chuyển đến phần Bố cục trong Blogger.



Bước 3: Tại Bố cục bạn chọn vào Thêm Tiện ích tại vị trí mà bạn muốn đặt, tìm đến và chọn HTML/Javascript.



Bước 4: Tại hộp thoại của HTML/Javascript bạn chèn đoạn code phía dưới vào Nội dung.

<style>
@import url(http://fonts.googleapis.com/css?family=Rancho);
</style>
<div class="Socialiconsoc">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/your-feedburner-id?ref=sb" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/intent/user?screen_name=your-twitter-id&amp;ref=sb" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://www.facebook.com/your-facebook-ID?ref=sb" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Your-pinterest-ID?ref=sb" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Your-Youtube-ID?ref=sb" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td></tr></tbody></table>
</div>
<div class="google+ss">
<div class="g-page" data-width="296" data-href="//plus.google.com/Your-Google-ID" data-layout="landscape" data-rel="publisher"></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 align="left" class="Facebookox">
<div style="padding:8px 0px 5px 10px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour-Facebook-ID&amp;width=284&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe>
</div> </div>
<div class="Twitterocfollow">
<div class="Twittco"></div>
<div class="iframeoftwi">
<a href="https://twitter.com/Your-twitter-id" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>
<div class="Feedburneroc">
<div style="padding:14px 0 11px 7px">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subboxs" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Your-feed-burner-id" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbuttons" type="submit" value="Subscribe!" />
</form></div></div>


Bước 5: Thay đổi toàn bộ những phần đánh dấu thành của bạn và lưu lại.



Qua 5 bước trên các bạn đã có được tiện ích theo dõi cho riêng bạn. Chúc bạn có một website ngày càng phát triển!

0 comments:

Post a Comment

Popular Posts