Chèn Social Media Fanpage botton bằng CSS cho blogspot

Demo

Chào các bạn!
Social botton là một cổng giao tiếp và liên hệ cần thiết đối với một web blog. Là nơi chia sẻ, bày tỏ, hỏi đáp của người dùng giành cho quản trị viên và giúp quản trị viên tương tác với khách một cách nhanh chóng, dễ dàng.
Hiện nay trên mỗi web blog có rất nhiều kiểu social botton, đa số đều do các blogger tùy biến theo màu sắc và sở thích cá nhân. Hôm nay 4tipsVn sẽ hướng dẫn các bạn chèn một widget Social botton hiện đang rất phổ biến trên các trang blog web chuyên nghiệp.
Tại sao lại chọn Social botton theo dạng này?
1. Đơn giản không màu mè
2. Không làm giảm tốc độ load trang
3. Dễ tương tác với mọi người hơn
Cách thực hiện.
Bước 1: Đăng nhập vào blogger, chọn Mẫu, chọn Chỉnh sửa HTML/Javascript.
Bước 2: Thêm đoạn CSS sau lên trước ]]></b:skin>

/* Fanpages */
#fanpages{padding:0;margin:0 auto 20px auto;position:relative;text-align:center;letter-spacing:1px;list-style:none;background:rgba(146, 146, 146, 0.04);border-radius:2px;}
#fanpages p{list-style:none;padding:0;margin:0 0 5px}
#fanpages a.a-fans{position:relative;clear:both;background:#67809F;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0;overflow:hidden}
#fanpages a.a-fans:before{content:'Like Us';position:absolute;bottom:25px;left:0;right:0;background-size:cover;z-index:2;opacity:0;visibility:hidden;transform:scale(0.0);transition:all .3s}
#fanpages a.a-fans:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#fanpages a.a-fans:hover{background:#39599a;color:#fff}
#fanpages a.a-fans p{color:#fff;display:inline-block}
#fanpages a.a-fans:hover p{color:#f1d657}
#fanpages a.a-fans span{font-size:13px;font-weight:normal;letter-spacing:2px;text-align:center;transition:all .3s}
#fanpages a.a-fans:hover span{opacity:0;visibility:hidden;transform:scale(0.0)}
#sosmed,#sosmed-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}
#sosmed-msg:before{content:"Like and follow social media askwithloud.com";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}
#sosmed ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}
#sosmed ul li{display:inline-block;margin:20px 0 0;position:relative}
#sosmed ul li a{background:#67809F;display:inline-block;color:#fff;padding:5px 10px;width:100%;border-radius:3px}
#sosmed ul li a.sosmed-gp{float:left}#sosmed ul li a.sosmed-tw{float:right}
#sosmed ul li a:hover{background:#e8635f;color:#fff;}

Bước 3: Lưu mẫu.
Bước 4: Coppy đoạn code sau rồi dán nó vào nơi mà muốn cái Social botton xuất hiện.

<div id='fanpages'>
<a class='a-fans' href='https://www.facebook.com/your user name here' rel='nofollow' target='_blank' title=''>Like Fanpage <p>Facebook</p><span>Type Any thing here!</span></a>
<div class='clear'>
</div>
<div id='sosmed'>
<ul>
<li><a class='sosmed-gp' href='http://plus.google.com/your url here' rel='nofollow' target='_blank' title=''>Google+</a></li>
<li><a class='sosmed-tw' href='https://twitter.com/your user name here' rel='nofollow' target='_blank' title=''>Twitter</a></li>
</ul></div>
<div id='sosmed-msg'>
</div></div>

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait