Thứ Ba, 11 tháng 11, 2014

Hôm nay Hồng Designer giới thiệu cho các bạn Widget mạng xã hội và theo dõi cho Blogger đẹp có thể thêm vào trong chân của bài viết blog blogger của bạn. Widget này giới thiệu Facebook, Twitter và Feedburner hội nhập. Widget này đã được tối ưu hóa cho blog với chiều rộng nhỏ hơn và trông quá hoàn hảo trên tất cả các blog. Các widget sử dụng Jquery, CSS và HTML để làm việc của mình.

Cách thực hiện như sau :

Trước hết bạn cần phải thêm mã. Đầu tiên vào Blogger => Mẫu => Edit HTML. Nhấn Ctrl. + F và tìm kiếm <data: post.body /> mã trong mẫu của bạn và dán mã dưới đây đưa ra ngay dưới <data: post.body/>.
Chú ý: Có thể có nhiều hơn một (thường là 2-4) <data: post.body /> do đó hãy chắc chắn rằng bạn đã chọn một trong những quyền. Nếu các widget không xuất hiện hãy thử thay đổi vị trí của mã.
<section class="newsletter"><h2>Tired of checking for new posts ?</h2><div id="form-newsletter"><div class="social facebook"><a href="https://www.facebook.com/o0ohongdesigno0o" target="_blank">      <img src="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/s1600/nl-facebook@2x.png" />    </a>    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fo0ohongdesigno0o&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">    </iframe>  </div><div class="social twitter"><a href="https://twitter.com/o0ohongdesigno0o" target="_blank">      <img src="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/s1600/nl-twitter@2x.png" />    </a>    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=o0ohongdesigno0o&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">    </iframe>    <script>      !function(d,s,id){        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;        if(!d.getElementById(id)){          js=d.createElement(s);          js.id=id;          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);    </script>  </div><div class="newsletter-form"><fieldset><h2>       Get all posts directly in your mail.      </h2><div class="fields"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=o0ohongdesigno0o', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />          <input name="uri" type="hidden" value="o0ohongdesigno0o" />          <input name="loc" type="hidden" value="en_US" />          <input class="subscribe" name="commit" type="submit" value="Subscribe" />        </form></div></fieldset></div></div></section><style>.newsletter{text-align:center;margin:20px 0;}.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}.newsletter:after{clear:both}.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}.newsletter .social a:hover img{transform:scale(1.1)}.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}.newsletter .social .social-box.fb-like{margin-left:-45px}.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}.newsletter .newsletter-form fieldset .fields{position:relative}.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}</style><script type="text/JavaScript">fontsize = function () {    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);};$(window).resize(fontsize);$(document).ready(fontsize);</script>
Sau khi thêm các mã như ở trên, bạn cần phải thực hiện một số thay đổi cần thiết cho việc thay đổi các ID người dùng. Trong đoạn mã trên tôi đã thực hiện 6 chữ in đậm và màu xanh, bạn cần phải thay đổi chúng theo yêu cầu.
Việc đầu tiên hai là dành cho Facebook Username, thứ ba và thứ tư cho Twitter xử lý và cuối cùng hai được cho Feedburner ID. Sau khi thực hiện những thay đổi này, bạn chỉ cần Save Template của bạn.

0 nhận xét:

Đăng nhận xét