Afiq Web

Cara Membuat Slider Like Box Facebook Di Blogger Dengan CSS3

2014-06-25T19:49:00.000-07:00

Cara Membuat Slider Like Box Facebook Di Blogger Dengan CSS3- Sosial media adalah salah satu ladang yang dapat mendatangkan pengunjung ke blog kita. Dalam hal ini, kita membicarakan Facebook. Kita dapat membuat pengunjung melihat update postingan kita lewat Facebook tanpa mengunjungi blog kita agar lebih efisien. Banyak cara yang dapat kita gunakan untuk mempromosikan fanspage Facebook blog kita, salah satunya dengan membuat widget slider like box ini.

Banyak sekali tutorial bertebaran mengenai slider like box, tapi saya melihat tutorial yang diberikan masih menggunakan kode yang di hosting dari luar, yaitu IFrame. IFrame sangat buruk untuk SEO, dan sangat tidak dianjurkan digunakan apabila memang tidak diperlukan. Sekarang, kita akan membuat slider like box Facebook tanpa menggunakan IFrame agar tidak merusak SEO blog kita, malah kita akan menggunakan CSS3.

Cara Membuat Slider Like Box Facebook Dengan CSS3:

1. Kunjungi Dasbor > Template > Edit HTML.

3. Pastikan blog Anda sudah terpasang jQuery. Jika belum, silakan tambahkan script jQuery berikut tepat diatas </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

2. Cari kode ]]></b:skin>. Jika sudah ketemu, letakkan CSS berikut tepat diatasnya.

.socialbox{
position:fixed;
top:10%;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.socialbox:hover{
right:0;
}

3. Cari kode <body>. Letakkan JavaScript SDK Facebook berikut ini tepat dibawahnya:

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Cari kode </body>. Letakkan kode berikut tepat diatasnya.

<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/AfiqWeb" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>

Ganti AfiqWeb dengan ID fanspage blog Anda.

5. Simpan template.

Sampai disini Anda telah berhasil memasang slider like box. Untuk mengujinya, coba Anda buka blog Anda lalu perhatikan pada sebelah sidebar kanan. Akan ada tombol berhuruf "F" berwarna biru dengan background putih yang apabila didekatkan kursor mouse akan menampilkan like box.

Semoga bermanfaat...

Daftar Shortcut Keyboard Untuk Edit Post Di Blogger

2014-06-24T15:52:00.001-07:00

Daftar Shortcut Keyboard Untuk Edit Post Di Blogger - Salah satu keunggulan Blogger adalah kita dapat menggunakan shortcut-shortcut untuk membantu kita membuat sebuah postingan. Shortcut yang dapat digunakan pun sudah lazim diterapkan di software writer seperti Microsoft Office Word atau Kingsoft Writer. Sehingga kita dapat menggunakan keyboard saja untuk mempercepat proses penyelesaian pembuatan postingan dan meminimalkan penggunaan mouse.

Berikut Daftar Shortcut Keyboard Untuk Edit Post:

Shortcut Keyboard	Kegunaan
Ctrl + C	Menyalin / Copy
Ctrl + Z	Membatalkan / Undo
Ctrl + X	Memotong / Cut
Ctrl + V	Menempel / Paste
Ctrl+ A	Memblok Semua Huruf Post
Ctrl + U	Membuat Garis Bawah / Underline
Ctrl + I	Membuat Huruf Miring / Italic
Ctrl + D	Membuat Postingan Sebagai Draft
Ctrl + F	Mencari Kata
Ctrl + S	Melakukan Autosave
Ctrl + Y	Mengembalikan Kondisi Sebelumnya / Redo
Ctrl + P	Menerbitkan Postingan
Ctrl + G	Transliterasi Ke Bahasa Hindi
Ctrl + Shift + A	Memasukkan Link

15 shorcut keyboard diatas dapat digunakan untuk mempermudah proses edit post. Bagi Anda yang bergelut di dunia microsoft Word pastinya terlihat beberapa shotcut yang sudah lazim yang digunakan pada microsoft Word tersebut, seperti Ctrl + C untuk copy atau Ctrl + V untuk menempel. Tapi ada juga beberapa shortcut khusus dari Blogger yang harus Anda kuasai.

Semoga bermanfaat....

Cara Menampilkan Widget Hanya Di Postingan

2014-06-21T21:07:00.000-07:00

Cara Menampilkan Widget Hanya Di Postingan - Mungkin ada beberapa widget yang sebaiknya tidak ditampilkan dalam homepage dan hanya ditampilkan pada postingan saja (post-body). Misalnya widget LinkWithin, widget tersebut memang seharusnya diletakkan di postingan saja karena akan merusak homepage blog secara keseluruhan.

Nah, untuk mengatasi masalah tersebut, yang perlu kita lakukan hanyalah dengan menampilkan widget hanya di halaman postingan saja. Caranya? Caranya yaitu dengan menggunakan bantuan kode tag kondisional. Berikut langkah-langkahnya:

Cara Menampilkan Widget Hanya Pada Halaman Postingan:

1. Lihat script widget yang akan dipasang.

2. Tambahkan kode yang tag kondisional berikut ini:

<b:if cond='data:blog.pageType == "item"'>
Script Widget Disini...
</b:if>

Yang kode berwarna hitam tersebut adalah kode tag kondisional yang berfungsi menampilkan widget di postigan saja. Sedangkan untuk kode yang ditandai dengan warna merah, itu adalah kode untuk widgetnya.

3. Simpan.

Kelebihan menggunakan kode tag kondisional adalah tidak memberatkan blog, sehingga loading page blog akan tetap terjaga. Semoga bermanfaat...

Situs-Situs Terbaik Untuk Belajar CSS Dan HTML Bagi Pemula

2014-06-20T20:32:00.000-07:00

Situs-Situs Terbaik Untuk Belajar CSS Dan HTML Bagi Pemula - Dalam kegiatan ngeblog, apalagi dalam hal desain, pastinya kita tidak akan pernah luput dari kata "CSS" dan "HTML". Ya, kedua kode tersebut adalah kode yang harus dipahami apabila Anda ingin mendesain blog Anda. CSS, adalah singkatan dari cascading style sheet yang memiliki fungsi sebagai penyusun layout untuk menopang kode HTML. Sedangkan HTML adalah singkatan dari hypertext markup languange yabg memiliki fungsi sebagai elemen suatu web/blog. Kedua jenis kode ini adalah kode yang wajib dikuasai untuk mendesain blog, sekurang-kurangnya Anda harus tahu dasarnya.

Namun, biasanya bagi pemula yang ingin belajar CSS dan HTML, pada awalnya mungkin akan merasa bingung dan kesusahan dan harus mati-matian mempelajari CSS dan HTML. Ibaratkan pepatah "bisa karena terbiasa", jika Anda sudah memiliki keinginan serius untuk belajar CSS dan HTML pasti nantinya Anda pasti berhasil. Saya sendiri juga masih bisa dibilang "newbie" dalam urusan CSS dan HTML.

Berikut ini akan saya tampilkan website yang menyediakan jasa untuk belajar CSS dan HTML, khususnya bagi pemula. Tutorial pada website tersebut telah disusun dengan baik dengan tahapan belajar yang berbeda-beda. Semakin tinggi tahapan semakin susah pula yang harus Anda pahami. Semua website memiliki keunggulan masing-masing. Meskipun tutorialnya ditulis dalam bentuk bahasa Inggris, namun kosakata yang digunakan tidak terlalu susah dan mudah dipahami.

1. W3 SCHOOLS

http://w3schools.com

W3 Schools adalah website tutorial coding yang paling saya kunjungi. W3 Schools adalah situs tutorial coding yang paling bagus kualitasnya menurut saya. Walau begitu, Anda sebelumnya harus memahami konsep-konsep dasar CSS dan HTML sebelum menggunakan situs ini. Terdapat fitur canggih yang bernama "Tryit YourSelf", yang memungkinkan Anda untuk praktek langsung. Penjelasan dalam W3 Schools juga dibuat terperinci mungkin. Ada juga tutorial coding lainnya seperti JavaScript dan HTML5.

2. CODE ACADEMY
http://codeacademy.com

Yang kedua adalah Codeacademy, yaitu situs tutorial coding yang juga banyak banyak dikunjungi orang. Tutorialnya sangat mudah dan dibuat selengkap mungkin. Disini Anda dapat memperlajari CSS dan HTML dari tingkat yang paling mudah hingga yang paling sulit. Terdapat fitur "all in one" yang memungkinkan Anda mempelajari sekaligus mempraktekkan kode yang sedang dibahas. Codeacademy adalah situs yang sangat disarankan untuk para web developer. Sangat disarankan untuk pemula.

3. CSS EASY
http://csseasy.com

Salah satu tempat terbaik untuk belajar CSS adalah disini. Walaupun CSSEasy tidak mempunyai tutorial untuk mempelajari HTML dan juga tidak sebagus dua situs diatas, namun dengan mempelajari dasar-dasar CSS, kedepannya Anda akan dengan lebih mudah lagi belajar CSS pada tingkat lanjut. Terdapat juga alat pengembangan web yang tersedia khusus untuk para web development yang dapat diterapkan di web/situs Anda.

4. HTML DOG
http://htmldog.com

HTMLDog, walaupun namanya hanya membuat orang situs tersebut hanyalah tutorial HTML saja, namun setelah saya mengunjungi HTML Dog terdapat pula tutorial CSS. Sistem tutorial di HTML Dog berbeda dari yang lainnya, karena tutorialnya terbagi atas elemen/tag seperti heading, link, table, dan sebagainya. Disini juga menyediakan tutorial seputar JavaScript.

Keempat situs diatas adalah situs-situs terbaik untuk belajar CSS dan HTML khususnya untuk pemula. Jika ada yang bisa menambahkan selain keempat situs diatas, silakan tambahkan melalui komentar dibawah. Selamat belajar CSS dan HTML!

Semoga bermanfaat...

Tips SEO Untuk Blog Yang Baru Dibuat

2014-06-20T09:53:00.000-07:00

Tips SEO Untuk Blog Yang Baru Dibuat - Setelah Anda membuat sebuah blog baru, pasti Anda akan memikirkan apa niche yang tepat untuk blog tersebut dan juga tampilan yang bagus. Walau kebanyakan orang lebih mementingkan tampilan/desain blog tersebut terlebih dahulu ketimbang memikirkan niche. Tapi, sebenarnya, diantara kedua hal tersebut masih ada satu hal yang lebih penting lagi setelah Anda membuat blog baru, yaitu melakukan SEO. SEO adalah kependekan dari search engine optimization yang bertujuan untuk memperoleh posisi yang bagus pada SERP search engine seperti Google. Pada blog yang masih berumur jagung, blog tersebut harus langsung menerapkan teknik-teknik SEO dasar agar kedepannya akan lebih mudah dalam mendapatkan ranking yang baik dalam SERP.

Seperti dikatakan diatas, untuk mendapatkan posisi yang bagus dalam SERP, khususnya untuk blog baru, Anda diwajibkan untuk mengikuti teknik-teknik SEO dasar sebagai fondasi untuk masa depan blog itu sendiri. Apabila dari awal pembentukan blog teknik SEO yang diterapkan sudah baik, nantinya blog pasti akan mendapatkan ranking yang bagus pada SERP, karena hal tersebut sudah saya rasakan sendiri. Nah, bagi Anda yang mempunyai minat untuk membuat dan merancang blog dari nol, pastikan Anda mengikuti teknik atau langkah-langkah SEO dasar berikut ini:

1. Tentukan Template Yang Akan Digunakan

Hal yang paling penting dan yang paling pertama harus dipikirkan adalah mempertimbangkan template yang akan digunakan oleh blog. Apabila template yang digunakan sudah baik dan memiliki struktur kode yang bagus pula, maka kedepannya blog akan lebih berpotensi mendapatkan ranking yang lebih cepat dan bagus ketimbang template yang kurang bagus. Template yang sudah teruji, baik premium maupun gratis, misalnya adalah template FastestMagz dan SuperSEO. Kedua template tersebut sudah menggunakan aturan tag heading H1, H2, dan H3 yang sudah ditetapkan oleh search engine. Jadi, tentukanlah template yang akan Anda pakai terlebih dahulu!

2. Memasang Meta Description

Setelah menentukan template yang akan digunakan dan niche yang akan digunakan, maka langkah selanjutnya adalah memasang meta descripiton. Meta description adalah meta tag paling penting yang harus ada dalam tubuh blog. Meta description berfungsi untuk memberi gambaran dan penjelasan umum mengenai isi halaman pada blog itu sendiri. Meta description haruslah mengandung keyword, karena meta description juga akan ditampilkan pada rich snippet pada hasil pencarian Google search engine. Dalam menentukan meta description, sebaiknya gunakan jumlah kata yang disarankan, yaitu 140-160 jumlah kata.

3. Biarkan Blog Anda Beristirahat Selama Seminggu

Setelah Anda membuat blog baru, pasti Anda akan langsung memikirkan postingan juga. Tapi, sabar dulu.. Kita harus menunggu selama 1 minggu agar blog telah ter-crawl oleh search engine dan baru membuat postingan. Tentu ini akan lebih efektif daripada Anda langsung membuat artikel pada blog yang belum ter-crawl search engine. Selama 1 minggu itu juga Anda juga dapat mulai menulis artikel pada Notepad atau menggunakan fitur postingan terjadwal.

4. Mulai Menulis Artikel Berkualitas

Setelah melakukan tiga langkah teknik SEO diatas, maka selanjutnya adalah Anda harus segera menulis artikel blog yang berkualitas dan sesuai dengan niche blog Anda. Mengingat Google mengupdate salah satu algoritmanya yaitu Panda yang ke 4.0, maka artikel berkualitas akan sangat mempengaruhi posisi SERP suatu blog. Kriteria artikel blog yang berkualitas adalah, postingannya paling panjang maksimal 500 kata (diusahakan), menggunakan ALT tag pada gambar jika ada, ditulis dengan bahasa yang baku, dan sebagainya. Sebaiknya tiap seminggu Anda membuat dua artikel berkualitas.

5. Lakukan Optimalisasi Berikut Ini!

Setelah keempat teknik-teknik SEO diatas sudah dilakukan dan blog Anda sudah memiliki artikel yang "berkualitas", maka langkah selanjutnya adalah optimalisasinya. Optimalisasi yang dimaksud adalah sebagai berikut:

- Submit sitemap sehabis membuat artikel ke Google Webmaster (GW).

- Mendaftarkan blog ke GW sehabis membuat artikel.

- Melakukan ping blog setiap seminggu sekali.

- Mensubmit artikel ke social bookmark.

- Mempromosikan artikel-artikel ke sosial media.

- Melakukan blogwalking ke blog lain.

- Cari backlink berkualitas untuk blog sebanyak-banyaknya.

Jadi, kesimpulannya adalah apabila Anda ingin blog kita terkenal di masa depan, maka tanamkalah teknik SEO dari blog tersebut dibuat. Lima teknik SEO (tepatnya empat teknik) untuk blog baru diatas saya rasa sudah akan menjadi permulaan yang bagus bagi blog yang umurnya masih tergolong baru. Jika ada yang kurang jelas dan pertanyaan, silakan berkomentar dibawah. Semoga bermanfaat...

Membuat Semua Link External Terbuka Otomatis Di Jendela Baru

2014-06-19T01:32:00.000-07:00

Membuat Semua Link External Terbuka Di Jendela Baru - Pada saat kita ingin membuat link terbuka di window baru, kita harus menggunakan script tambahan yaitu target="_blank" atau dengan cara bawaan dari Blogger. Lalu, mengapa kita harus membuat semua link external terbuka otomatis di jendela baru? Karena apabila link eksternal terbuka pada jenela yang sama, itu berarti Anda sama saja menaikkan angka bounce rate dan membuat pengunjung blog "kesusahan" karena harus bolak-balik halaman. Bounce rate mengakibatkan hal negatif untuk blog, misalnya penurunan ranking Alexa.

Nah, pada pembahasan kali ini, kita akan membuat semua link external terbuka di jendela baru dengan bantuan script jQuery. Script ini umumnya sudah diterapkan di berbagai platform blog lainnya seperti WordPress. Jadi sebenarnya script ini bisa bekerja pada WordPress juga.

Ikuti langkah-langkah berikut ini untuk membuat semua link external terbuka di jendela baru:

1. Lihat apakah blog Anda sudah memiliki kode jQuery atau belum. Untuk mencari kode jQuery Anda tinggal mencari kode dengan keyword jquery. Jika blog Anda sudah memiliki kode jQuery lewati langkah ini, dan apabila blog Anda belum memiliki kode jQuery, silakan tambahkan script berikut tepat diatas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Keterangan: Abaikan langkah pertama diatas apabila dalam blog Anda sudah tertanam jQuery.

2. Jika jQuery telah ditambahkan, maka sekarang adalah saatnya untuk menambahkan script pembuka link external otomatis. Cari kode </head> terlebih dahulu, jika sudah ketemu letakkan script berikut tepat diatasnya.

<script type='text/javascript'>
$(document).ready(function(){$("a[href^='http://']").each(function(){if(this.href.indexOf(location.hostname)==-1){$(this).attr("target","_blank")}});$("a[href^='https://']").each(function(){if(this.href.indexOf(location.hostname)==-1){$(this).attr("target","_blank")}})});
</script>

3. Simpan template.

Semoga bermanfaat...