Cách thêm mạng xã hội phẳng trong Blogger

Thêm tiện ích 

Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Bố cục >> Nhấp vào thêm tiện ích vào vị trí của bạn >> Thêm tiện ích HTML / JAVASCRIPT và dán mã bên dưới vào chỗ trống.
 <style>
.aboutme-wrpicon {
    display: block;
    margin: 10px auto 10px auto;
    position: relative;
}
.aboutme-wrpicon .extender {
    width: 100%;
    display: block;
}
.extender {
    text-align: center;
    font-size: 16px;
}
.extender .aboutme-icon {
    background: #4573cc;
    display: inline-block;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 3px;
}
.extender .aboutme-icon:hover {
 background: rgba(0,0,0,.06);
}
.extender .aboutme-icon:hover a {
color:#4573cc;
}
.extender .aboutme-icon a {
    display: inline-block;
    font-family: fontawesome;
    font-weight: 400;
    color: #fff;
    height: 42px;
    width: 42px;
    line-height: 42px;
    border-radius: 3px;
}
#Templatesyard-sbox-v2 {
  padding: 0;
  font-family: inherit;
  display: block;
  margin: 0;
  border-radius: 1px;
  border:1px solid #4573cc;
  background:#fff;
}
#Templatesyard-sbox-v2 p {
  font-size: 15px;
  color: #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #ebebeb;
  border-radius: 20px;
}
#Templatesyard-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#Templatesyard-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #ebebeb;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#Templatesyard-sbox-v2 .rssform .button:hover {
 opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
#Templatesyard-sbox-v2 .rssform .button {
  background: #4573cc;
  color: white!important;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}



#Templatesyard-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id='Templatesyard-sbox-v2'>
<p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
<div class='rssform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=cùng chia sẻ đam mê&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='email' placeholder='Enter your email address...' type='text' vk_15737='subscribed'/>
<input name='uri' type='hidden' value='cùng chia sẻ đam mê'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='button' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<div class='aboutme-wrpicon'>
<ul class='extender'>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='GitHub'><i class='fa fa-github'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'></i></a></li>
</ul>
</div>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Thay đổi văn bản màu đỏ được tô sáng bằng url hồ sơ xã hội của bạn, thay đổi văn bản màu vàng được tô sáng bằng id của trình ghi dữ liệu. và nếu bạn đã có fontawgie trong blog của mình thì hãy xóa mã được tô sáng màu xanh.  

Phần kết luận

Chúc mừng !! Bạn đã làm nó. bây giờ bạn đã biết rằng Làm thế nào để thêm tiện ích xã hội phẳng trong Blogger . Ghé thăm blog của bạn và kiểm tra tiện ích tuyệt vời trực tiếp hoạt động, hy vọng bạn thích hướng dẫn này, nếu bạn thích thì hãy chia sẻ nó với bạn bè của bạn, chúng tôi đang nỗ lực để phát triển thêm các tiện ích tuyệt vời như vậy, hãy theo dõi chúng tôi. 

Đăng nhận xét

0 Nhận xét

HOT !!!COMBO 6 CÁI SONOFF WIFI SWITCH CHỈ 637,500 đMua Ngay