Namun pastikan terlebih dahulu sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah. Apabila belum pernah memasang bisa melihat di tutorial sebelumnya tentang cara memasang dan menggunakan font awesome, disitu juga terdapat list icon font awesome yang bisa dijadikan panduan untuk melihat nama icon. Apabila sudah terpasang bisa dilanjutkan dengan tutorial dibawah ini untuk memodifikasi button dengan kombinasi font awesome.
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> //<![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>
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> <!-- 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: '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://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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>Demikianlah cara mengcustom button agar sedikit lebih menarik dan selanjutnya silahkan bisa di kreasikan sendiri di blog masing-masing.
Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
ReplyDeleteCara Menggunakan Template Flat Ui
Thanks.
Sip Gan..
ReplyDeleteKlo ada waktu pasti Update