Tạo bộ Social Share và Buttom đẹp với FONT AWESOME

byCode Encryption • • 2 min read
0
Với Font Awesome bạn có thể tạo ra nhiều thứ đẹp như Social Share với Button đẹp, cùng với Sys Blogger VN chỉ dẫn các bước để có Social Share và Font Awesome đẹp nhá

Bắt đầu với Social Share


Thêm đoạn code sau vào </b:skin> hoặc </style>
#button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px}
#button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#button-share h4 span{background:#2c3e50}
#button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222}
#button-share a:hover{background:#222}#button-share a:hover span{color:#222}
#button-share a span{line-height:20px;width:40px;padding:6px 0;top:0}
#button-share a span.fb{background:#2884f6}.fb{background:#1e90ff}
#button-share a span.tw{background:#45B0E3}.tw{background:#00bfff}
#button-share a span.gp{background:#e00}.gp{background:#f83124}
#button-share a span.me{background:#f39c12}.me{background:#f1c40f}

Thêm đoạn code bên dưới vào đoạn câu <data:post.body/> Hoặc <div class='post-footer'> và có thể bất kì đâu nếu các bạn muốn

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-share'>
<h4><span><i class='fa fa-external-link'/></span> Share artikel ke :</h4>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a> 
<a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a> 
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");
//]]>
</script>
</div>
</b:if>

Like Button Count

Các bạn thêm đoạn code sau vào như Social Share

#button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px}
#button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px}
.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}
.ikons i{color:#fff;line-height:42px}
.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}
.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}
.facebook .ikons,.facebook .slide{background:#305c99}
.twitter .ikons,.twitter .slide{background:#00cdff}
.google .ikons,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-count'>
<span>Sys Like:</span>
<div class='facebook button'>
<i class='ikons'>
<i class='fa fa-facebook'/>
</i>
<div class='slide'>
<p>
Like
</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>

<div class='google button'>
<i class='ikons'>
<i class='fa fa-google-plus'/>
</i>
<div class='slide'>
<p>
+1
</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'/>
<!-- Place this tag after the last +1 button tag. -->
<script src='https://apis.google.com/js/platform.js' type='text/javascript'>
{lang: &#39;id&#39;}
</script>
</div>

<div class='twitter button'>
<i class='ikons'>
<i class='fa fa-twitter'/>
</i>
<div class='slide'>
<p>
Tweet
</p>
</div>
<a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>
</b:if>

Post Button Flat UI

.bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c}

<div class='bton-grup'>
<a href='http://www.vnsys.info' class='bton'><span><i class="fa fa-download"></i></span>Example</a>
<a href='http://www.vnsys.info' class='bton orange'><span><i class="fa fa-file-text"></i></span>Example</a>
<a href='http://www.vnsys.info' class='bton purple'><span><i class="fa fa-folder-open"></i></span>Example</a>
<a href='http://www.vnsys.info' class='bton blue'><span><i class="fa fa-paperclip"></i></span>Example</a>
<a href='http://www.vnsys.info' class='bton red'><span><i class="fa fa-link"></i></span>Example</a></div>

4.94 / 169 rates

Đăng nhận xét

Mới hơn Cũ hơn