Hướng dẫn tạo widget theo dõi cực đẹp cho Blogspot

Hello mọi người, hôm nay mình sẽ hướng dẫn tạo widget theo dõi facebook,googleplus,twiter,blogspot cho blogspot nha.Widget này được mình lấy từ blog nước ngoài mình thấy cũng khá đẹp.





Các Bước Thực Hiện

Bước 1: Thêm code css sau đây trước thẻ  ]]></b:skin> trong HTML Blogger:
/* Post info */.post-info{display:block;position:relative;margin:4px auto;padding:0;font-weight:400;color:#aaa;overflow:hidden;font-size:13px!important}.author,.author a,.clock a{text-transform:capitalize;font-weight:normal !important;color:#aaa !important;margin:0;border:none}.clock i{margin-left:10px}.post-info a:hover{color:#111 !important}/* Sidebar wrapper */#sidebar-wrapper {background:#fafafa;width:100%;max-width: 330px;float: right;display:block;word-wrap: break-word;list-style:none;padding-top:30px;overflow:hidden}#sidebar-wrapper h2,#footer-wrapper h2 {font-size: 19px;line-height:1.2em;display:inline-block;font-weight:700;padding: 0 ;margin:0 0 15px;padding:0 0 15px;position: relative;color: #111;font-weight: 700;text-transform: uppercase;}#sidebar-wrapper h2:before,#footer-wrapper h2:before {content: &quot;&quot;;display: block;width:800px;height:1px;position: absolute;background:#E2E2E2;left:0;right:0;bottom:0;z-index:0}#sidebar-wrapper h2:after,#footer-wrapper h2:after {content: &quot;&quot;;display:inline-block;width:100%;height: 3px;position:absolute;background:#e0262c;left:0;bottom:-1px;z-index:1}#sidebar1, #sidebar2, #sidebar3, #sidebar4, #sidebar5{margin-left:30px;}#sidebar1 .widget-content,#sidebar2 .widget-content,#sidebar3 .widget-content,#sidebar4 .widget-content{margin:0 auto 30px;padding:0} #ContactForm1{display:none}/* Search wrapper */#search-form{padding:0 0 0 30px;margin:auto;position:relative}#search-wrapper{margin:0;padding:0;overflow:hidden;width:100%}#search-wrapper table{width:100%;margin:0;position:relative;height:40px}#search-wrapper td.search-boxs1{color:#cbd1e1!important}#search-wrapper input#search-boxs1[type=&quot;text&quot;]{background:transparent;height:38px;line-height:38px;margin:0;padding:0 10px;width:100%;border:1px solid #ddd;color:#aaa!important}#search-wrapper input#search-button1[type=&quot;submit&quot;]{font-size:15px;background:#e0262c;color:#fff;height:40px;line-height:40px;margin:0;padding:0 20px;border:none;outline:none;font-weight:normal!important;transition:all 0.25s;position:absolute;right:0;top:0;z-index:2;border:none;cursor:pointer}#search-wrapper input#search-button1[type=&quot;submit&quot;]:hover{background:#222}#search-wrapper input#search-boxs1[type=&quot;text&quot;]:focus{outline:none;color:#444!important}/* Social Wrapper */#social-wrapper{position:relative;margin:25px 0 35px 30px}.social-facebook,.social-pinterest,.social-twitter,.social-googleplus,.social-rss{float:left;margin:0 auto; padding:0; display:inline;color:#fff !important;width:25%; text-align:center;height:90px;font-size:12px;text-transform:capitalize;font-weight:400;transition:all 0.25s;}#social-wrapper a i{font-family:FontAwesome;font-size:20px;margin:15px auto 5px;font-weight:normal;height:40px;width:40px;line-height:40px;text-align:center;background:rgba(0,0,0,.2);border-radius:99em}#social-wrapper a p{display:block;font-size:8px;line-height:1.2em;padding:0;margin:auto;display:none}.social-facebook:hover,.social-pinterest:hover,.social-twitter:hover,.social-googleplus:hover,.social-rss:hover{background:#333;text-decoration:none}.social-facebook{background-color:#526ba5}.social-twitter{background-color:#33a1e1}.social-rss{background-color:#ea7237;}.social-googleplus{background-color:#e54343;}

Bước 2: Vào Bố cục và thêm tiện ích HTML /Javascript sau đó thêm code sau đây :
<div id="social-wrapper"><a class="social-googleplus" href="https://plus.google.com/110008362446225440834" target="_blank" title="Follow us on G+"><i class="fa fa-google-plus"></i><p>Circle us on</p><br>Google+</a><a class="social-facebook" href="https://www.facebook.com/DoanAnhHuy" target="_blank" title="Follow Us on Facebook"><i class="fa fa-facebook"></i><p>Like to our</p><br>Facebook</a><a class="social-twitter" href="http://twitter.com/" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i><p>Follow us on</p><br>Twitter</a><a class="social-rss" href="https://plus.google.com/110008362446225440834" target="_blank" title="Theo Dõi Website"><i class="fa fa-rss"></i><p>Subscribe to our</p><br>Theo Dõi</a></div>

Lời kết

Như vậy là Gia Huy NY Blog đã hướng dẫn các bạn tạo widget theo dõi cực đẹp cho blogspot.Trong nỗ lực đem đến nhiều hơn nữa những bài viết chất lượng dành cho độc giả, Gia Huy NY Blog mong muốn sẽ giới thiệu đến các bạn những bài viết nội dung hay được biên tập kỹ lưỡng và nghiêm túc. Hy vọng các bạn sẽ tiếp tục ủng hộ chúng tôi.
Được xuất bản bởi Gia Huy NY

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm