Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Kombinasi CSS Button Flat UI Dengan Font Awesome

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother Tenri Baso yang menanyakan di artikel sebelumnya, karena pada artikel tersebut tidak sesuai tema konten yang dibahas jadi alangkah baiknya jika saya jawab pada artikel ini. Dengan adanya font awesome saya rasa sangat memudahkan untuk keperluan berbagai hal dan tanpa perlu adanya penggunaan gambar sehingga sangat efektif penggunaannya. Beberapa waktu lalu pernah saya bagikan tutorial untuk membuat tombol share dibawah posting blog, apabila ingin menggantinya dengan kombinasi font awesome seperti yang saya gunakan pada blog ini langkah-langkah penerapannya masih sama seperti pada tutorial sebelumnya.

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

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 == &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>

CSS Like Button Count (Efek Sliding)

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 == &quot;item&quot;'>
<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: &#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>

CSS Post Button

CSS Button Flat UI 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.

Berlangganan artikel via email

65 Response to "Kombinasi CSS Button Flat UI Dengan Font Awesome"

kalau di terapkan di worpress, kudu ngutak ngatik lagi ini tapi sepertinya bisa nih mas, test dulu di wordpress

Balas

Selamat sore Mas Andes, wah lengkap dan komplit artikel tentang
Font awesome dan share button dan lainya, perlu di pelajari nih Mas
Ijin coba dan belajar saya terima kasih Mas Andes :-bd

Balas

Saya coba di blogspot dulu deh setelah succesful
Saya coba pada platform lainya. ijin coba Mas Andes

Balas

Wiiisssss...
Klo udah ktemu sama Mas Andes,, udah gk ada matinya dah msalah kayak gini...
Keren dah mas....

Balas

mantap mas, ijin tes..........
lanjutkan karyamu

Balas

widih mantapz kang euy hehe .. kemana z nih ???

Balas

cuti ngeblog kang hehehe..

Balas

bisanya cuma posting yang kaya beginian mas

Balas

kirang keneh pepek saleresna kang nanging geus wae lah segitu wae ti dina paos teuing

Balas

tombol kombinasi share dan lain lainnya wajib ada dalam sebuah blog, untuk mudahin pengunjung ikutan beratensi pada artikel yang kita tulis...gituhlah kira-kira kan ya kang?

Balas

Terima kasih mas sudah di buatin tutorial kaya gini .. Mantap Banget dehh

Balas

jadi lebih menarik ya mas

Balas

Siiip mas...perpaduan yang kontras dan fullcolor banget, kaya share button di blog ini :-d btw itu link urlnya panjang banget yach ga di custom permalink

Balas

yang efek sliding kayanya menarik tuh buat tempalte blusmulusnya mas-andes.. izin pake mas... salam kenal

Balas

wah keren banget mas kombinasi css button flat ui nya jadi tambah menarik tampilannya yah, sip mas :)

Balas

Ini dia yang gua cari mas..
thanks yaa ^_^

Balas

wah jadi tambah keren mas tombol share nya kalau ada variasinya getu. Bisa dicoba nih. Kebetulan saya masih pakai tombol share buatan mas andes yang lama dulu hehe :D

Balas

Like Button Count nya keren Mas... saya coba praktekan ya..

Balas

Udah lama ndak main
Makin bagus aja mas blognya :)

Postingnya kompakan sama mas virly nih :)
Eh..beda ding

Balas

nggak wajib juga kang terserah yang punya blog ajah..

Balas

link url yang mana mas?

Balas

iya silahkan coba aja mas

Balas

lumayan nambah variasi mas :D

Balas

okelah kalo begituh..

Balas

yah begitulah kira2 mbak :)

Balas

iya silahkan mas..

Balas

orangnya juga kok :D

kalo beda berarti kompak gak mas..



Balas

kalo di WP beda naruh kodenya aja mas

Balas

Nembe sakitu ge tos sae Mas, mung abi nirona rada sesah
Dongkap deui di ajar deui hatur nuhun Mas Andes :)

Balas

mantep nih mas andes, nanti saya coba di blogspot saya deh :D

Balas

untuk pembuatan gambar pada demo diatas pakai apa mas andes

Balas

saya juga masih menggunakan tombol share buatan mas Andes yang dulu mas, masih tetep keren sampai sekarang hehe...

Balas

Pengen nyoba yang ini mas cuma belum sempet otak-atik lagi, kapan-kapan saya coba mas :)

Balas

santai aja mas nunggu waktu yang pas biar nggak keburu buru :)

Balas
avatar
Anonymous

makin keren aja mas !
mas bikin template lagi dong blues mulus yang tampilan homepage nya seperti biasa saja dan dropdownnya yang professional ya !
dan kunjungan balik juga

Balas

http://mas-andes.blogspot.com/2014/02/kombinasi-css-button-flat-ui-dengan.html kepanjangan dikit judulnya

Balas

kurang banyak kodenya :3 .

Balas
avatar
Anonymous

Tutornya manteb kang,
Tapi resikonya memperberat load blog kayaknya

Balas

nyoba ah. kali aja berguna :)

Balas

Mau nanya ni kang kalau di kombinasikan CSS Like Button Count (Efek Sliding) dengan Share to unlock the download button pada postingan seperti di Blog kang ismet http://blog.kangismet.net/2014/01/share-to-unlock-download-button.html

Balas

saya sendiri belom nyoba mas, mungkin konsepnya dari kode kang ismet perhatikan pada bagian HTML pada kode ini<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="kangismetdotnet" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span> bungkus dengan kode diatas

Balas

tidak bisa Mas Andes saya sudah nyoba tadi.
Mungkin cara pemanggilannya beda

Mohon pencerahannya Mas karna ini sangat penting mas untuk menyembunyikan link premium

Balas

Begini mas cara mengganti style default dari http://blog.kangismet.net/2014/01/share-to-unlock-download-button.html dengan style share CSS Like Button Count (Efek Sliding)

Balas
avatar
Anonymous

izin coba gan

Balas
This comment has been removed by the author.
avatar
Anonymous

wah tutorial disini keren2 ya

Balas

Wah sangat bermanfaat , Terima kasih mas.

Balas

di blog saya kok gak bekerja ya? bingung :| ni diliat blog saya mas www.nyantai.us

Balas

NB setelah saya pasang itu komen dan nafigasi yang di bawah post hilang semua pliisss help me mas andes

Balas

kang , jika sudah di pasang dengan share button bawaan template gmana caranya ???

Balas
This comment has been removed by the author.

Wah keren nih, cuman sayang gak work di blog saya. gak sesuai sama demo.
www.indo-cybershare.blogspot.com

Balas
avatar
Anonymous

waw , keren mas boleh di coba mas , salam kenal blog baru saya
www.masyadi.com

Balas

Thanks Mate ... !!!
http://www.onlineallsolutions.blogspot.com

Balas

kalo untuk tab menu hover sliding gitu gimana ya?

Balas
avatar
Anonymous

Makasih mas tutornya sangat membantu, blognya jadi lebih kelihatan profesional kalo pake button kayak gini ... :)

Balas

Terimakasi suda berhasil setelah dimodifikasi sedikit.

Balas

makasih mas andes , work di template ane

Balas

makasih mas andes , work di template ane

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Kombinasi CSS Button Flat UI Dengan Font Awesome" ini bermanfaat, share ke jejaring sosial.
Konversi Kode