Blog Mas Andes

CSS Icon Social Network Flat UI Dengan Font Awesome

2015-02-08T15:04:00.001+07:00

CSS Icon Social Network Flat UI Dengan Font Awesome – lama tidak update artikel jadi lumayan bingung mau menulis apa dan mulai dari mana. Tapi pada intinya seperti biasa hanya membahas tentang CSS untuk yang suka bermain kode dan mencoba untuk merubah tampilan blog. Tentu semua sudah tahu tentang font awesome, ikonik font yang banyak di gunakan oleh blogger untuk membuat ikon dengan cara yang ringkas ke dalam tampilan blog mereka. Membuat ikon jaringan sosial dan menerapkan ke dalam blog merupakan salah satu cara untuk menarik perhatian dan mendapatkan pengunjung ke jejaring sosial anda. Demikian juga untuk memudahkan mereka untuk menemukan situs anda di akun jejaring social lain. Icon pack social network flat UI ini lumayan lengkap sehingga akun apapun yang anda punya dapat dengan mudah untuk di tempatkan ke dalam area widget pada blog anda. Terdapat 30 akun social network, yang ukuran dan bentuk ikon serta efek hover bisa di sesuaikan agar sesuai dengan blog masing-masing. Berbagai pilihan bentuk icon media social dan efek hover bisa dilihat ada di halaman demo.

Langkah pertama yang perlu di perhatikan adalah pada template sudah terpasang font awesome, jika belum bisa memeasang terlebih dahulu dengan menaruh kode berikut ini dan taruh di atas kode </head> pada template.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

Berikut untuk kode CSS dan markup HTML masing-masing icon:
Taruh CSS di dalam tag <style> atau sebelum </style>

.sc-network a{color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}

Markup HTML Icon Social Network

<div class="sc-network">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>

Ganti semua tanda # dengan link ID masing-masing.

Dari pola bentuk icon tersebut tentu dapat di modifikasi agar sesuai dengan tampilan blog masing-masing. Seperti contoh diatas dengan menambahkan sedikit property border-radius:5px; pada .sc-network a{ … } untuk membuat icon sedikit melengkung pada setiap sudutnya atau bahkan mungkin dengan menambahkan border-radius:100%; agar setiap icon menjadi bulat/circle. Pada intinya bentuk icon atur saja sesuai keinginan, seperti gambar di atas misalnya border-radius:15px 0px 15px;. Untuk penyesuaian background jika ingin lebih simple maka semua icon di atur ke dalam warna yang sama dengan menambahkan background:#666; pada .sc-network a{ … } seperti contoh di atas. Untuk kode CSS secara lengkapnya seperti di bawah ini:

.sc-network a{background:#666;color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}

Sedangkan untuk markup HTML-nya tidak perlu menambahkan attribut class pada tag , contohnya seperti dibawah ini:

<div class="sc-network">
<a href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
</div>

Semua icon tentu tidak akan di pasang semuanya ke dalam blog, jadi hanya beberapa icon saja dengan akun yang sudah dimiliki.

BMA Lovers Responsive Blogger Template

2014-03-06T20:25:00.000+07:00

BMA Lovers Responsive Blogger Template – sebelumnya saya mohon maaf untuk yang sudah mengirim pesan meminta template yang saya gunakan pada blog ini (BMA Minimalis theme) baik itu lewat Facebook, Google+ maupun Email dan sampai sekarang belum saya balas. Bukan berarti saya tidak boleh, saya juga senang mendapat respon positif. Namun karena templatenya yang masih sederhana dan apa adanya serta masih banyak kekurangan dan belum saya perbaiki, terutama pada menu yang belum mendukung semua perangkat. Mungkin lain waktu akan saya bagikan juga.

Oleh sebab itu sebagai gantinya mungkin template BMA Lovers walaupun masih sederhana juga namun ini bisa sebagai gantinya dan ini jauh lebih baik daripada yang saya gunakan pada blog ini. Setiap elemen sudah tersusun rapi di setiap media query sehingga bisa menyesuaikan setiap perangkat yang digunakan untuk mengakses. Mendukung beberapa fitur diantaranya bisa dilihat dibawah atau bisa melihat demonya langsung.

PREVIEW DOWNLOAD

BMA Lovers Featured

Responsive
Valid HTML5
Fast Loading
Score SEO 100%
Lightbox Contact Form
Dinamis Post Meta
JSON Search Result
404 Error Custom
Comment Spam Detected, dll.

Konfigurasi Template

Mulai dari menu yang paling atas terlebih dahulu. Menu ini pada resolusi layar atau media query yang memiliki lebar minimal 768 piksel maka tampilan menu akan muncul di bagian atas header, sedangkan jika lebar layar dibawah 768 piksel akan beralih ke mode panel yang mengarahkan menu ke bagian atas footer. Untuk mengcustom list menu yang akan ditampilkan cari kode berikut ini:

<ul>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Follow</a></li>
</ul>

Sedangkan konfigurasi menu navigasi bagian bawah header cari kode berikut ini:

<ul class='clearfix'>
<li><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Home</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Tools</a></li> 
</ul>

Untuk merubah Google+ Badge cari kode berikut ini:

<div class='g-person' data-href='//plus.google.com/104093787575230359634' data-layout='landscape' data-rel='author' data-showtagline='false' data-theme='dark'/>
</div>

Replace 104093787575230359634 dengan ID Google+ anda.

Juga untuk merubah fanspage (facebook like box) cari kode berikut ini:

<div class='fb-like-box' data-colorscheme='light' data-header='false' data-height='350px' data-href='http://www.facebook.com/andestyle' data-show-border='false' data-show-faces='true' data-stream='false' data-width='400px'/>

Replace andestyle dengan ID facebook fanspage blog anda.

Pada bagian email subscribe juga ganti dengan ID Feedburner blog anda, cari kode berikut ini:

<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=masandes' class='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-email' name='email' placeholder='Enter your email ...'/><input class='subscribe-button' title='' type='submit' value='Submit'/>
</form>
</div>

Replace masandes dengan ID Feedburner blog anda.

Untuk memasang banner ukuran 468x60 piksel yang terdapat pada bagian header caranya cari kode berikut ini:

<!-- Start banner ukuran 468 x 60 -->
<div class='ads468'>
<a href='#'>
<h5>Advertisment 468 x 60</h5>
</a>
</div>
<!-- End banner ukuran 468 x 60 -->

Replace <h5>Advertisment 468 x 60</h5> dengan banner yang akan di pasang.
<img alt='' src='url-banner.jpg' title=''/>

Sedangkan 2 banner ukuran 300x250 piksel yang terdapat pada bagian bawah posting, cari kode berikut ini:

<!-- Start banner ukuran 300 x 250 -->
<div class='ads300'>
<div class='iklan'>
<a href='#'>
<h5>Advertisment 300 x 250</h5>
</a>
</div>
<div class='iklan'>
<a href='#'>
<h5>Advertisment 300 x 250</h5>
</a>
</div>
<div style='clear:both'/>
</div>
<!-- End banner ukuran 300 x 250 -->

Replace <h5>Advertisment 300 x 250</h5> dengan banner yang akan di pasang.
<img alt='' src='url-banner.jpg' title=''/>

Ikon yang digunakan pada BMA Lovers Blogger template menggunakan Font Awesome V4.0.3. Apabila ingin menambahkan atau merubah beberapa ikon bisa melihat pada halaman List Icon Font Awesome dan CSS Value Content V4.0.3.

Instalasi Template

Instalasi atau penerapannya template kedalam blog, caranya buka file *txt hasil download lalu Select all dan masuk ke Edit HTML template kemudian replace seluruh kode yang ada pada template lama seperti pada gambar di atas.

Kombinasi CSS Button Flat UI Dengan Font Awesome

2014-02-22T16:35:00.001+07:00

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

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)

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

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.