Host File CSS atau JavaScript di Blogger menggunakan Google Drive

Hosting file CSS dan JavaScript di blog Blogger selalu menjadi suatu permasalahan bagi webmaster. Kebanyakan blogger lebih memilih untuk menambahkan seluruh kode StyleSheet (CSS) kedalam template, sehingga membuat loading blog semakin lambat.
Hal ini tentunya membuat blog kita kurang diminati oleh pengunjung. salah satu alternatifnya yaitu dengan membuat file CSS / JavaScript ke dalam file tersendiri dan menguploadnya ke Hosting yang berbeda,
sehingga dapat dengan mudah menerapkannya pada situs blog. Sayangnya, blogger memiliki beberapa keterbatasan yang membuat kita tidak bisa meng-Host file CSS dan JavaScript.
Untungnya, Google Drive menyediakan kita kesempatan untuk meng-Host file CSS, JavaScript dan HTML secara GRATIS. Pada artikel kali ini, saya akan menunjukkan Bagaimana cara meng- Host file CSS dengan Google Drive di Blogger.

Apa Keuntungan dari Hosting CSS / JavaScript dalam satu file?

Blogger tidak memberikan penggunanya fleksibilitas untuk meng- Host file CSS atau JavaScript dalam satu link terpisah. Blogger menyimpan semua coding melalui HTML Tag.

Untuk StyleSheet, tag <style> ini digunakan untuk mendefinisikan informasi gaya / desain untuk dokumen HTML. Kode CSS digunakan untuk menentukan bagaimana setiap elemen HTML harus ditampilkan di web browser. Setiap dokumen HTML dapat berisi beberapa tag <style>.

Untuk tag <script> JavaScript digunakan untuk mendefinisikan script, seperti JavaScript. Tag <script> baik yang berisi pernyataan scripting atau yang menunjuk ke suatu file eksternal (link) melalui atribut "src". Setiap dokumen HTML dapat berisi beberapa tag <script>.

Menggabungkan semua kode StyleSheet (CSS) / JavaScript ke dalam satu file akan membuat sebuah website / blog untuk memuat / loading lebih cepat. Selain itu, membantu mesin pencari (search engine) untuk menjelajah / meng- index situs situs kita dengan mudah dan lancar, sehingga dapat meningkatkan SEO blog / website.

Cara meng- Host file CSS / JavaScript Blogger dengan Google Drive

1. Copy kode CSS di dalam Template blog

• Login ke dashboard blogger
• Klik Template >> Edit HTML, kemudian cari kode <b:skin><![CDATA[
• Copy semua kode CSS yang ada mulai dari setelah tag <b:skin><![CDATA[ sampai sebelum tag ]]></b:skin>
  

2. Menyiapkan file CSS

• Buka Notepad atau Notepad ++ lalu paste kode CSS yang telah di copy dari template kedalam Notepad
• Lalu simpan dengan ekstensi .css

3. Host file CSS ke Google Drive

• Buka halaman Google Drive disini
• Lalu login dengan menggunakan akun Gmail
• Klik tombol Create >> Folder, lalu berinama webhost atau sesuai yang kita mau

• Klik folder yang telah kita buat, lalu klik Upload Icon >> Files...

• Pilih file CSS yang telah disimpan tadi
• Setelah file terupload, klik Share >> pilih Public on the web >> Save

4. Mengcopy Link file CSS untuk blogger

• Klik Kanan di file CSS yang di upload tadi lalu pilih Share >> Share

• Copy link file CSS lalu paste di notepad, linknya akan seperti https://docs.google.com/file/d/your-file-code/
• Ganti menjadi https://googledrive.com/host/your-file-code

5. Menambahkan File CSS yang terlah di Host ke Blogger

• Pastikan membackup template sebelumnya
• Masuk ke Dashboard Blogger >> Klik Template >> Edit HTML
• Pastikan semua kode CSS telah dihapus pada template
• Cari kode <head>, lalu paste kode di bawah ini

<link href='https://googledrive.com/host/your-file-code' rel='stylesheet'/>

• Ganti https://googledrive.com/host/your-file-code dengan link file CSS anda.
• Klik Save Template

Cara Memasang Facebook Comment Box untuk Blogger dengan Notifikasi

Setelah pada posting sebelumnya saya share Daftar Social Plugin Facebook yang Harus Anda Gunakan di Blog Anda dan Cara Memasang Facebook Recommendation Bar, kali ini saya akan share Cara Memasang Facebook Comment Box pada Blog Blogspot.

Facebook Comment Box merupakan cara yang baik untuk membuat blog lebih menarik dan mendorong pembaca untuk memberikan komentar jika mereka sudah login ke Facebook. Hal ini juga berfungsi sebagai sumber traffic karena dengan menggunakan Facebook Comment Box maka komentar dan halaman posting akan dikirim ke  dinding Facebook pengunjung.

Bagaiman Cara Memasang Facebook Comment Box pada Blogspot
Berikut ini langkah - langkah mudah untuk memasangnya pada blog anda, ikuti caranya dibawah ini.

1.Membuat Aplikasi Facebook

• Buka Facebook Devloper Page, klik Buat Aplikasi Baru
• Lalu masukkan Nama Aplikasi dan klik Lanjutkan

• Masukkan Security Captcha lalu klik Submit
• Pada halaman berikutnya masukkan Domain anda pada App Domains sesuai dengan domain yang anda gunakan (jika menggunakan custom domain) atau masukkan blogspot.com jika tidak menggunakannya.
• Masukkan alamat blog anda pada Situs web dengan Masuk Log Facebook

• Selanjutnya klik Simpan Perubahan, sekarang Aplikasi Facebook sudah dibuat dan copy App ID untuk digunakan pada tahap berikutnya.

2.Menambahkan Kode Pada Template

berikut ini syarat yang harus dipenuhi agar Facebook Comment Box bisa di gunakan pada blog

i. xmnls attribute
ii. SDK script
iiI. Open graph meta tag
iv. Comment form iframe code

• Log in dan ke Dashboard blog anda dan klik Template >> Edit HTML
• Tekan CTRL + F lalu cari kode <html lalu tambahkan kode berikut di depannya

xmlns:fb='http://www.facebook.com/2008/fbml'

• Sehingga menjadi seperti dibawah ini

html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

• Lalu cari kode <body> atau <body lalu paste kode berikut tepat di bawah/setelahnya

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Note : Ganti YOUR APPLICATION ID HERE dengan App ID yang sebelumnya dibuat

• Berikutnya menambahkan Open Graph Meta Tag, cari kode </head> lalu paste kode barikut diatasnya

<meta property="fb:app_id" content="YOUR_APP_ID" />
Note : Ganti YOUR_APP_ID dengan App ID yang sebelumnya dibuat

• Sekarang tinggal langkah terakhir, cari kode <data:post.body/> atau
<div class='post-footer-line post-footer-line-1'> lalu paste kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://allabout-stuff.blogspot.com/2013/04/facebook-recommendation-bar-blogger.html' target='blank'><small>[Facebook Comment Box For Blogger]</small></a></div></div></p></b:if>


• Lalu Save template

Note : Jika Facebook Comment Box terlihat terlalu kecil da ingin memperbesar ukurannya, ganti width='450' dengan width='600'.

3.Mengaktifkan Notifikasi

Notifikasi sangat berguna ketika ada pengunjung yang mengomentari postingan blog degan Facebook Comment Box maka anda akan mendapatkan notifikasi pada Facebook anda.

• Buka URL : https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
• Ganti YOUR_APP_ID dengan App ID yang sudah dibuat
• Klik Pengaturan dan tambahkan anda sebagai Moderator, klik Simpan

Sekarang ketika ada pengunjung yang memberikan komentar pada posting blog anda, maka secara otomatis anda akan mendapat notifikasi pada Facebook anda.

Daftar Social Plugin Facebook yang Harus Anda Gunakan di Blog Anda

Facebook menjadi salah satu support yang paling penting bagi blog dan blogger. Hampir semua blog memiliki halaman di Facebook dan tanpa dukungan dari Facebook, blogger pasti akan melihat traffic yang sedikit pada blog mereka.

Baru-baru ini saya iseng mengulas beberapa situs melalui fiverr.com dan saya menemukan bahwa banyak webmaster lebih memilih menggunakan gambar dengan link ke halaman Facebook mereka. Awalnya saya pikir hal itu sia-sia. Pada dasarnya hanya satu dari setiap 1000 pengunjung berpotensi menjadi fans dan akan kembali mengunjungi halaman Anda melalui beberapa jejaring sosial. Dan jika Anda menampilkan link gambar pada halaman Anda, kebanyakan dari mereka tidak akan repot-repot untuk pergi ke halaman Anda.

Jadi inilah daftar plugin dari Facebook yang dapat digunakan untuk membantu meningkatkan traffic pada blog atau website Anda. Hal ini juga dapat ditemukan di halaman Facebook Developers.

1. Social Plugin Like button

Siapa yang tidak suka berbagi social Like Button? Sekarang lebih dari satu miliar halaman web memiliki tombol yang terintegrasi dengan konten mereka yang bisa di-share dan di like.

2. Social Plugin Comments

Ini adalah tools yang berguna berikutnya dari Facebook yang dapat Anda tambahkan ke blog Anda. Ada banyak keuntungan dengan menambahkan plugin ini ke blog Anda. Salah satu alasan utama adalah sebagai alat bantu percakapan di blog anda, jika seseorang memberikan komentar pada blog anda, maka secara otomatis komentar tersebut akan berada pada timeline Facebook mereka, yang membuat lebih banyak pengunjung ke blog anda.

3. Social Plugin Like Box

Like Box digunakan untuk halaman facebook, ketika ditambahkan ke blog Anda, akan menunjukkan jumlah pengikut yang Anda miliki dengan jumlah dan like button.

4. Social Plugin Follow/Subscribe button

Meskipun tidak begitu populer, jika Anda ingin menampilkan informasi penulis dan link ke profil pribadi Anda dari blog, Anda dapat menggunakan tombol ini di blog Anda.

5. Social Plugin Recommendations Bar

Baru-baru ini dikembangkan oleh Facebook Developers, widget ini mendapatkan popularitas yang cepat. Jika halaman Anda memiliki banyak shared content, maka widget ini akan menampilkan konten yang telah mendapat jumlah like maksimum dari pengguna.

Meskipun ada banyak widget yang tersedia di Facebook yang dapat ditampilkan di blog Anda, saya pikir ini adalah 5 plugin Facebook penting yang akan membantu kegiatan blogging anda.

Semua plugin Facebook dapat ditemukan di halaman Facebook Developers.