Social supsription Widget cho Blogger

Preview

Cài đặt

Vào Edit Layout HTML
Tìm ]]></b:skin> và chèn trước nó đoạn Code sau:

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");<br /> .w2bOldSocial ul {<br /> font-family: 'Oswald', sans-serif;<br /> margin: 15px 0;<br /> overflow: hidden;<br /> }<br /> .w2bOldSocial ul li {<br /> float: left;<br /> width: 90px;<br /> padding: 0 0 0 55px !important;<br /> margin: 0 0 0 5px !important;<br /> line-height: 48px !important;<br /> }<br /> .w2bOldSocial ul li a {<br /> font-size: 20px !important;<br /> text-decoration:none;<br /> padding:0 !important;<br /> margin:0 !important;<br /> text-decoration:none;<br /> }<br /> .w2bOldSocial ul li a:hover {<br /> text-decoration:underline;<br /> }<br /> .w2bOldSocial ul li.w2brss {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQRE4xZEf-WuFnuEKbxthwHe6A0C_v0-sdjCOuJ3PuTcr0KiMlkZbA24FJA_99UHAP2Y9wmiSDAnpb-nr2n0DkGz23Z5ImxDBsfRIqWg697nn2nOIiqNKbN0qwoTVWZu3H8tzVgmK1J_QP/s48/RSS.png") no-repeat scroll left center transparent !important;<br /> }<br /> .w2bOldSocial ul li.w2bmail {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GWmjHAfuBrpbZMA_wNBJj9Yqd-wIBHc50NUGYwTMcJekrmmVT5i41W1TF3rtMbyW3Ml7Gg_qrqaMa6MsDBtu-ZjJgxtnm-MWx4OhScrv8jquBhcxiEs9WVOHHI2HeaaetvnJdRkoWayD/s48/Mail.png") no-repeat scroll left center transparent !important;<br /> }<br /> .w2bOldSocial ul li.w2btwitter {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpc2pJDZo0ndkeRc8WViBUHd1gq0hCLCgPIkuKUt4AYnu0fZDk2Vva5UbORfuduxW8EcbkENC9Sikvg6pyyQLkm_8_iCOiYajafMxxn7r1zyxvX_mpBMih5WA6w7ph9w8KcvzrzIpGvLUK/s48/Twitter2.png") no-repeat scroll left center transparent !important;<br /> }<br /> .w2bOldSocial ul li.w2bfacebook {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdga3ZoLv2TPpAZ9P4DAbJdvjMkr5lylBycnDRjpGpjvbey6CtBuZRQtthYg2zLcY4ySSjXQlV4K0bHc8JjD7l_xu4j1x3Vas2aAmrTnPtXg9JAdDDJO6aYOEakRUGa533A6ufq78dGlwt/s48/Facebook.png") no-repeat scroll left center transparent !important;<br /> }<br /> #w2bEmailsub {<br /> display: block;<br /> clear: both;<br /> margin: 10px 0;<br /> }<br /> form.w2bEmailform {<br /> margin: 20px 0 0;<br /> display: block;<br /> clear: both;<br /> }<br /> .emailText {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvdDB-zKk-KSBEslBSD8C6DribVpR6FlGBtpsJ0zDO1gsbOr20u0LY9DOj4lXO4BF2d7OKiGMH9QMqW2U5eMuSePMnxsRPefvVkv16mCLKjzcojSyLYlEYCOpWO9QtgonFBRw-Qhje41M/s28/w2b-mail.png") no-repeat scroll 4px center transparent;<br /> padding: 7px 15px 7px 35px;<br /> color: #444;<br /> font-weight: bold;<br /> text-decoration: none;<br /> border: 1px solid #D3D3D3;<br /> <br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> <br /> -webkit-box-shadow: 1px 1px 2px #CCC inset;<br /> -moz-box-shadow: 1px 1px 2px #CCC inset;<br /> box-shadow: 1px 1px 2px #CCC inset;<br /> }<br /> .emailButton {<br /> color: #444;<br /> font-weight: bold;<br /> text-decoration: none;<br /> padding: 6px 15px;<br /> border: 1px solid #D3D3D3;<br /> cursor: pointer;<br /> <br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> <br /> background: #fbfbfb;<br /> background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br /> background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );<br /> background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> }

Lưu mẫu
Vào Phần tử trang -> Add Widget/HTML -> dán đoạn Code sau vào Nội dung Widget

<div class="w2bOldSocial"> <ul> <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li> <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li> <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li> <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li> </ul></div><div id="w2bEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform"> <input type="hidden" value="Way2blogging" name="uri" /><br /> <input type="hidden" name="loc" value="en_US" /><br /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" /><br /> <input type="submit" class="emailButton" value="SignUp" title='' /><br /> </form></div>

Bạn chú ý những Link sau:

• http://feeds.feedburner.com/way2blogging -> Đây là địa chỉ Feeds của bạn
• http://feedburner.google.com/fb/a/mailverify?uri=way2blogging -> Thay đổi địa chỉ Feedburner ID của bạn
• http://twitter.com/way2blogging -> Địa chỉ Link Twitter của bạn
• http://facebook.com/way2blogging -> Địa chỉ Link Facebook của bạn
• change the Feedburner

Nguồn bài viết way2blogging