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

Are you sure?

You want to turn off ads.

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. 
Mong các bạn sẽ thích nó :D 
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  ]]></b:skin>
/* 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.
Khi trích dẫn lại bài viết xin vui lòng ghi rõ nguồn Gia Huy NY Blog
Tác giả: Gia Huy NY

Tôi là Huy,Say hello to you!

  • 9 nhận xét: