Kombinasi CSS Button Flat UI Dengan Font Awesome – Untuk menjalankan perintah tersebut terlebih dahuli harus dipastikan sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah.
CSS Social Share Button
Button yang pertama adalah untuk widget social share. Karena sudah ada dibawah posting blog ini jadi saya rasa tidak perlu lagi untuk membuat demo, bisa dilihat langsung di akhir artikel. Berikut cara memasang widget social share dengan kombinasi font awesome. Untuk kode CSS seperti biasa, taruh di atas kode
]]></b:skin> atau
</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}
Sedangkan kode HTML bisa taruh di bawah kode
<data:post.body/> atau bisa juga
<div class='post-footer'> sesuaikan template masing-masing saja, Selanjutnya simpan template.
<b:if cond='data:blog.pageType == "item"'>
<div id='button-share'>
<h4><span><i class='fa fa-external-link'/></span> Share artikel ke :</h4>
<a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + 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='"http://twittter.com/share?url=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
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>
CSS Like Button Count (Efek Sliding)
Tombol like button biasanya terpasang dibawah post artikel yang digunakan untuk menampilkan banyaknya jumlah pengunjung yang menyukai artikel tersebut baik itu melalui button like Facebook, Google Plus maupun Twitter. Untuk membuat tampilan button like count agar lebih menarik dapat menggunakan CSS untuk mengatur tampilan dari widget ini. Penerapannya sama seperti pada tombol social share di atas.
#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 == "item"'>
<div id='button-count'>
<span>BAGIKAN:</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>
<div class='g-plusone' data-size='medium'/>
<script src='https://apis.google.com/js/platform.js' type='text/javascript'>
{lang: 'id'}
</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="https:</script>
</div>
</div>
</b:if>
CSS Post Button
Button yang ini adalah button yang saya gunakan pada area posting, untuk membuat tombol demo, dll. Penerapannya ke dalam blog, taruh kode CSS seperti langkah di atas. Sedangkan untuk HTML, taruh kedalam post area mode HTML.
.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://mas-andes.blogspot.com' class='bton'><span><i class="fa fa-download"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton orange'><span><i class="fa fa-file-text"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton purple'><span><i class="fa fa-folder-open"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton blue'><span><i class="fa fa-paperclip"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton red'><span><i class="fa fa-link"></i></span>Example</a>
</div>
Selamat Mencoba !.
0 Komentar