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/AVvXsEiEUnL4Y3RZ-toeF_SCPJ2U1k1GvT4D7NnxWCtKXQqst_0pXp_yOgvsTKUy01N1GybhseUotC2kqtCECK2somYq-R6prK1fyPGNoCkxKWIHFIpQDPqb56iAGF3jmpiVwvfCNLcTcWWTrglx/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/AVvXsEh4ClCmOtfsRZvC9r1srOD7GBV_hoXhyphenhyphend-wZ_GLzoYYFQNemvgsIcEmnsTPCWJjOmO4FdVIvigK8_og7x3-RDgoR_zdnine0wjwYeVQgZ6m2bxQc3yEqpXemHIjMoNPs4nLHEjGj4-1IHr8/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/AVvXsEjHwdCvAaqJm1_D53AP8SyNvzix9HVnfgtmUJCu5mtnSM6aPRTN14oKy_JEy03tJPWQ-Sb8z5tOYWwUbbWSXHwe_gR6722ItuJwhVExBfeJJLD5Giwr-ftX90nYOMedmUQSh9YpteAkz17K/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/AVvXsEgDJzQtxKs-cVYdVc62WguhlOjiMadjbxHDl_3hDJN3avqCqYsum7JfP2Nl9Ja4T8B9dMXtc1TcNmwBjqElyl5BGkRLh4fM9lGE76AgyX6_JwmU06bptQzBEQqflQwEwTVbUULVPe5nkZkQ/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/AVvXsEjaKIFbeZaB2O2Rnfz-ImgFifoFDFWflBZ-11wj01ofpdTVM8ZZIXBAXRKXbPvPU2-2QkNwXIHVX00Z0qD8-Mnqd2TvKdFP9WkCEvlAbWEc3pNbmVQte0uiHm0-4ETW-LsBNXzr91ubBZaM/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