Cara Memasang Font Awesome Di Blog

Bukan sulap bukan sihir pasti sobat berada dipostingan ini berarti sobat sedang mencari Cara Memasang Font Awesome Di Blog, benarkan? Memang sih sekarang ini banyak blog yang sudah memasang font awesome, kenapa ya? Karena font awesome memiliki kesan friendly, nyaman buat dilihat dan banyak kelebihan lainnya. Mungkin sobat pasti juga sudah mengerti tentang font awesome sendiri, langsung saja ikuti postingan ini.

Cara Memasang Font Awesome Di Blog

1. Buka Blogger > Template > HTML
2. Pasang kode dibawah tepat diatas kode </head>

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 

3. Simpan template

Font awesome bisa ditempatkan dimana saja sesuka anda, sebagai contoh: <i class="fa fa-cog"/> ganti teks yang berwarna merah dengan kode-kode dari font awesome yang sesuai keinginan anda.

 Penerapannya

 fa-cog

Jika ingin menambah ukuran icon tersebut tambahkan kode "fa-lg"  atau "fa-2x" atau "fa-3x" atau "fa-4x" atau "fa-5x" setelah kode teks yang diberi warna merah tersebut
 fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Jika ingin menambahkan efek putar (Spin) cuma tambahkan kode "fa-spin" setelah kode teks yang diberi warna merah tersebut


Demikian artikel tentang Cara Memasang Font Awesome Di Blog, semoga bermanfaat.

Cara Pembaruan Komentar Disqus Onclick Load Event

Dalam artikel kali ini saya akan membagikan Cara Membuat Komentar Disqus Onclick Event, fungsi dari fitur ini adalah menyembunyikan komentar disqus dan untuk mempercepat loading saat membuka halaman postingan di blog. Berikut langkah-langkahnya

Komentar Disqus Onclick Event

Buka Blogger > Pilih menu Tema/Template > Setelah itu klik tombol Edit HTML serta tambahkan  kode berikut ini tepat di bawah kode HTML <b:includable id='comments' var='post'>...</b:includable>

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

Kemudia kita tambahkan kode ini tepat di bawah kode <b:includable id='comments' var='post'>

<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
   <div id='disqus_thread'/>

Jika telah kita gabungkan maka hasilnya akan menjadi seperti ini

<b:includable id='comments' var='post'>
   <div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div> <div id='disqus_thread'/>

Kemudian tambahkan kode CSS di bawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#01a3a4;border-radius:2px}
.comments-blocks button:hover{background:#029091}#disqusshow{position:relative;overflow:hidden;display:block;text-align:left;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#00b894;color:#fff;transition:all .3s}
#disqusshow:hover,#disqusshow:active{color:#fff}
</style>
</b:if>

Sesuaikan CSS dengan keinginan kita sendiri

Setelah itu tambahkan kode di bawah ini tepat sebelum </body> atau &lt;!-</body>-&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;arcomp-design&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="arcompdesign";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Ganti kode yang telah ditandai arcomp-design dengan username disqus sobat

Simpan dan lihat hasilnya di blog sobat

Pemberitahuan

Jika sobat masih mengaktifkan sistem komentar Google+, silahkan sobat nonaktifkan terlebih dahulu supaya kode di atas bisa bekerja dengan baik lalu atur setelan komentar blod dengan cara Klik setelan > Postingan, komentar, dan berbagi > Komentar > dan kemudian sesuaikan menjadi seperti gambar berikut

Demikian artikel tentang Cara Membuat Komentar Disqus Onclick Event, Semoga bermanfaat