Tips & Tricks: December 2013

Sunday, December 15, 2013

Memasang Meta Tag Deskripsi dan Keyword di Blog

Cara memasang deskripsi dan keyword blog untuk optimasi SEO. Nah pada artikel yang lalu saya menjelaskan tentang bagaimana mengecek ranking SEO pada blog. Ketika melakukan pengecekan deskripsi dan keyword merupakan hal sangat berpengaruh, sehingga jika tidak memasang salah satu dari itu akan sangat menurunkan peringkat seo blog. Hal itupun terjadi ketika saya mengecek rangking seo blog ini dan ternyata hasilnya sangat mengecewakan heheh. Tapi setelah ditambah deskripsi dan keyword lumayanlah peningkatannya :D.

Langsung saja ya, untuk memasang descripsi dan keyword pada blog kita menggunakan meta tag. Bingung dengan apa itu meta tag heheh ni baca penjelasan dari Wikipedia tentang meta tag “Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang berfungsi sebagai penyampai informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”. Secara umum, terdapat beberapa macam meta tag dengan fungsi yang berbeda. Beberapa fungsi tersebut misalnya meta keywords dan description”.

Untuk memasang deskripsi dan keyword masuk ke dasbor blog – template – edit html, kemudian copy code dibawah ini dan tempatkan diantara tag <head> dan </head>. Terserah mau ditempati diatas </head> atau tepat dibawah <head> yang penting diantara kedua tag tersebut :D

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

Meta tag dengan name description itulah meta tag untuk deskripsi blog anda dan meta tag dengan name keywords untuk keyword blog. Ganti code yang berwarna merah tersebut sesuai dengan deskripsi blog anda pada bagian meta content dengan name description dan keyword blog anda pada tulisan yang berwarna merah pada meta content dengan name keywords.

Selamat mencoba

Monday, December 9, 2013

Membuat Artikel Terkait atau Related Posts di Blog

Membuat artikel terkait atau related post pada blog. Nah satu lagi cara agar blog lebih powerfull yaitu dengan membuat artikel terkait pada akhir postingan blog. Yang dimaksud artikel terkait adalah artikel-artikel yang berkaitan dengan postingan yang muncul dan kaitannya berupa persamaan kategori atau label. Jadi pembuatan artikel terkait ini berdasarkan label pada blog. Ini berguna agar si pengunjung dapat lebih lama mengunjungi blog dengan melihat artikel artikel yang berkaitan.

Pada kesempatan yang berharga ini (ceramah mode on) saya akan membagi tips cara membuat artikel terkait dengan menggunakan logo atau icon yang berbeda, seperti pada blog ini saya menggunakan icon favicon blog saya . Lebih jelasnya liat gambar diatas.

Baca Juga : Cara Menampilkan Widget di Halaman Tertentu Pada Blog

Logo atau gambar yang berada disamping judul-judul artikel pada gambar diatas, saya ambil dari link favicon pada blog saya. Jadi kelihatan lebih natural heheh kayak lagunya dmasiv yah.

Langsung saja pada step pertama copy code dibawah ini dan tempatkan diantara tag <head> dan </head>

<b:if cond='data:blog.pageType == "item"'><style>  #related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; color:#000000 } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuDw5ecYWtmlYTYUb9aqUNPp98hqHYkFE9cFa3FThTgzlyScq4oRgKEl_78C1yP2-NatFETa28FWR9ZiyECpwuywMXQ-qzN8Z6ooD5U82CxJzk0OLM-vXCMML8x9BfwKt0Aw0rLJYB9QL/h120/favicon.ico") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style><script type='text/javascript'>//<![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write(' <li><a href="'+ relatedUrls[r]+'">'+ relatedTitles[r]+'</a></li>');if(r<relatedTitles.length- 1){r++;}else{r=0;} i++;} document.write('</ul>');document.write('<a rel="dofollow" href="http://freezon88.blogspot.com/">Cara Membuat Related Post</a> By : FreeZon Blog</font>');} //]]></script></b:if>

Pada code diatas ganti url ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuDw5ecYWtmlYTYUb9aqUNPp98hqHYkFE9cFa3FThTgzlyScq4oRgKEl_78C1yP2-NatFETa28FWR9ZiyECpwuywMXQ-qzN8Z6ooD5U82CxJzk0OLM-vXCMML8x9BfwKt0Aw0rLJYB9QL/h120/favicon.icodengan alamat url favicon atau logo sobat agar gambar yang tampil disamping artikel tersebut adalah logo atau icon milik sobat sendiri. Jika menggunakan logo, gunakanlah logo dengan ukuran yang kecil seperti contoh.

Baca Juga : Cara Mengetaui Skor Atau Peringkat SEO Blog

Setelah menempatkan code diatas, sekarang copy code dibawah ini dan tempatkan dibawah <data:post.body/>. Kalau diblog ini saya tempatkan pas dibawah code ini <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Save template dan lihat hasilnya. Selamat mencoba

Sunday, December 8, 2013

Dowload Template Simple Login Hotspot Mikrotik

Template simple login hotspot Mikrotik. Ya lagi ga ada kerjaan dan sambil menunggu rasa ngantuk datang iseng-iseng ane buat template baru untuk login hotspot mikrotik. Template yang ane buat ini simple aja, ga perlu neko-neko heheh. Penggunaan gambarnya juga ga terlalu banyak hanya pada backgroundnya aja ya jadi lumayan ringanlah. walaupun tampilannya ga sebagus template-template yang udah banyak di internet. maklum lah ane ini masih newbie dalam mendesain template.

Pada template ini, ane hanya coba mempercantik tampilannya hanya dengan menggunakan css tanpa ada bantuan dari sotosop dan mba coreldraw. Sebenarnya tadi mau dipasangkan logo dengan effect animasi css3 tapi ya berhubung pantat ane sudah capek duduk, sampai disini saja deh desain templatenya :D. Pada tampilan judulnya ane cuman ngasih effect blur sama effect shadow biar kelihatan agak menyala gitu heheh. Selain itu background login, tarif hotspot dan info warnet ane kasih transparan dan ditambah dengan garis tepi warna putih.

Bagi yang minat template baru login hostpot mikrotik yang ada fitur slideshownya dan responsive klik link dibawah ini

Template Login Hotspot Slideshow dan Responsive Klik Disini

Jika ada yang berminat menggunakan template yang simple ini silahkan klik link download yang ada di akhir postingan ini dan gunakan cara ini untuk mengganti tampilan login hotspot ente. Ubah nama hotspot sesuai dengan nama hotspot sobat, sekalian dengan ubah tarifnya mas bro.

Selamat mencoba.

Download templatenya DISINI

NB. Silahkan Tinggalkan Email di Komentar Blogger Untuk di Kirimkan Passwordnya (Bukan Komentar Facebook) atau bisa add saya di Google + atau di Facebook

Saturday, December 7, 2013

Cara Mengetahui Skor atau Peringkat SEO Blog

Mengetahui rangking seo pada blog. Sebagai bloger pemula saya sempat mempelajari mengenai seo. Walaupun sebenarnya penerapan seo pada blog saya ini belum sepenuhnya optimal. Kemarin sempat blog walking tentang cara meningkatkan seo, eh malah ketemu website yang dapat mengecek tingkat seo pada blog. Alih alih ngecek seo blog ane, eh ternyata skornya sungguh sangat memilukan heheh cuman dapat skor 70+%. Ya sedikit demi sedikit di perbaiki dan sekarang hasilnya udah dapat 100%.

Untuk mengecek rangking seo pada blog sobat, sobat dapat mengunjungi web seo tools http://chkme.com/page-seo-toolsdan masukkan alamat url blog kemudian klik check. Tunggu beberapa saat sampai pengecekan selesai dan menampilkan skor seo blog sobat.

Jika hasilnya kurang memuaskan cobalah mengikuti pandungan yang diberikan di web tersebut. Mulai dari penggunaan tag h1, h2 pada heading atau judul blog, pemasangan deskripsi dan keyword blog, penggunaan deskripsi pada gambar dan lain sebagainya. Jika sudah memperbaiki kekurangan-kekurangan yang ada, cobalah kembali cek ranking seo sobat.

Dari hasil seo blog saya sebelumnya, ternyata penggunaan deskripsi dan keyword blog juga sangat berpengaruh pada skor seo ini. Selain itu gambar edit yang merupakan bawaan bloger juga mempengaruhi skor seo karena tidak memiliki title dan deskripsi.

Cara ini merupakan salah satu cara meningkatkan seo pada kode-kode html yang ada pada template blog. Jika mengalami kendala dalam memperbaiki rangking seo , sobat dapat mencari template blog yang seo friendly sama om google, udah banyak kok template seo yang tersedia di internet. Dan jangan lupa jika sudah memiliki template yang seo , pengoptimalan dalam penulisan artikel juga sangat berguna untuk menambah tingkat seo pada blog.

Apabila hasilnya sudah memuaskan sobat dapat menempatkan skor seo sobat dengan mengcopy code hasil skor ke dalam blog dan tempatkan di widget, ya itung-itung sebagai motivasilah hehe

Selamat mencoba

Friday, December 6, 2013

Cara mudah membuat fanpage atau halaman fans facebook

Pengguna situs jejaring social facebook mungkin sudah tidak asing lagi dengan halaman fans facebook atau yang biasa disebut fan page facebook. Halaman fan page facebook biasanya dibuat oleh perusahaan-perusahaan besar, artis, komunitas, website, blog dan lain-lain. Nah sebagai bloger sobat juga dapat membuat fan page facebook blog agar supaya lebih dekat lagi dengan pengunjung setia blog sobat. Sehingga para fans atau pengikut halaman fan page sobat dapat mengetahui update terbaru dari blog.

Selain itu fan page facebook ini juga dapat meningkatkan traffic atau pengunjung pada blog. Semakin banyak yang like atau mengikuti halaman facebook sobat, semakin besar juga traffic yang dihasilkan. Mengingat bahwa facebook adalah salah satu situs jejaring social yang paling banyak penggunanya.

Dibawah ini adalah langkah-langkah membuat fan page facebook untuk blog

1. Masuk ke akun facebook dan klik tombol pengaturan dan pilih buat halaman

2. Pada tampilan buat halaman pilih merek atau produk, kemudian kategorinya pilih Situs Web dan dibawahnya masukkan nama fan page facebook sesuai dengan nama blog sobat. Klik mulai untuk melanjutkan.

3. Pada tahap selanjutnya ada 4 step untuk menyelesaikan pembuatan halaman facebook. Step pertama masukkan deskripsi blog anda (1) , alamat situs blog (2) dan alamat halaman atau fan page facebook sobat (3).

4. Step ke 2 mengunduh foto profil, karena yang sobat buat adalah halaman untuk blog, jadi kita dapat mengunggah logo dari blog sobat dengan mengklik unggah dari komputer. sobat juga dapat mengimpor gambar langsung dari situs web atau blog dengan klik impor dari situs web.

5. Step ke 3 tambahkan ke favorit. Ini berfungsi agar halaman yang kita buat berada di favorit facebook sobat yang berada di beranda, sehingga sangat memperudah dalam mencari dan mengelolah halaman.

6. Step 4 jangkau lebih banyak orang, pada step ini dapat dilangkai saja

Setelah mengikuti step-step diatas sobat sudah dapat membuat halaman fan page facebook blog. Tinggal bagaimana mengelolah halaman tersebut dan mengundang pengguna facebook untuk menyukai halaman sobat.

Selamat mencoba.

Thursday, December 5, 2013

Redirect Halaman Login Hotspot Mikrotik ke Alamat web atau blog

redirect atau mengalihkan halaman login hotspot mikrotik

Redirect halaman login hotspot mikrotik. Pada saat login hotspot mikrotik halaman yang dituju adalah halaman yang saat itu di jelajahi di browser. Namun disini kita dapat merubah redirect halaman login hotspot menuju alamat website tertentu. Seperti contoh ketika user memasukkan username dan password mikrotik kemudian klik login setelah user login maka akan dibawah ke halaman website tertentu.

Cara merubah redirect halaman login pada hotspot mikrotik adalah dengan cara merubah script html yang ada pada file alogin.html di folder hotspot mikortik. Untuk mengambil file alogin.html kita dapat menggunakan cara modifikasi tampilan login hotspot mikrotik. Sebelum merubah script file alogin.html backuplah terlebih dahulu file tersebut, sehingga akan mudah ketika mengembalikannya ke file aslinya ketika terjadi error. Namun menurut pengalaman saya hampir tidak pernah terjadi error ketika mengubah script pada alogin.html

info :
- Template Simple Login Hotspot Mikrotik Klik Disini
- Template Login Hotspot Slideshow dan Responsive Klik Disini

Ikuti langkah-langkah berikut untuk merubah redirect login hotspot mikrotik sebagai contoh saya membuat redirect ke alamat blog saya.

Buka file alogin.html menggunakan notepad ataupun aplikasi lain seperti dreamweaver, kemudian cari code <meta http-equiv="refresh" content="2; url=$(link-redirect)"> dan rubah tulisan yang berwarna merah dengan alamat url sebuah web atau blog. Contoh : <meta http-equiv="refresh" content="2; url=http://freezon88.blogspot.com">

Selanjutnya cari code berikut dibawah :

<!--

function startClock() {

$(if popup == 'true')

open('$(link-status)', 'hotspot_status', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=290,height=200');

$(endif)

location.href = '$(link-redirect)';

}

//-->

</script>

Dan rubah tulisan berwarna merah menjadi alamat url web atau blog yang akan dituju ketika user login hotspot mikrotik. Seperti contoh dibawah ini :

<!--

function startClock() {

$(if popup == 'true')

open('$(link-status)', 'hotspot_status', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=290,height=200');

$(endif)

location.href = 'http://freezon88.blogspot.com';

}

//-->

</script>

Jika sudah merubah kedua code diatas, cobalah log out dari hotspot dan lakukan login kembali. Setelah melakukan login browser kita langsung menuju pada halaman web atau blog freezon88.blogspot.com

Selamat mencoba

Cara menampilkan widget di halaman tertentu pada blog

Widget yang terlalu banyak biasanya hanya akan memperburuk tampilan blog sendiri. Agar widget yang dipasang di blog lebih fleksibel kita bisa membuat widget tersebut muncul di halaman tertentu saja. Seperti menampilkan widget di halaman depan atau menampilkannya pada postingan tertentu.

Menampilkan widget pada halaman tertentu kita tinggal menambahkan conditional tags pada code html widget, namun harus sesuai dengan id widget tersebut. ID widget pada blog biasanya bertuliskan HTML1, HTML2, HTML3 dll. Tapi bagaimana cara mengetahui id sebuah widget? Ada beberapa cara yang bisa gunakan untuk mengetahui id sebuah widget. Cara yang biasa saya gunakan adalah dengan menggunakan add ons firebug. Dengan menggunakan firebug widget yang kita klik akan muncul id hmtlnya di jendela firebug seperti contoh diatas. Jika belum paham mengenai penggunaan firebug dapat mengikuti tutorialnya disini.

cara menampilkan widget di halaman depan blog

Atau dapat menggunakan cara yang paling mudah mengetahui id widget pada blog yaitu dengan hanya menempatkan cursor diatas icon edit widget tersebut. Sehingga akan muncul link di bagian bawah browser yang menampikan link ke widget tersebut. Pada link tersebut terdapat id widget. Perhatikan contoh dibawah ini :

Setelah mengetahui id widget yang ingin ditampilkan di halaman tertentu, kita akan mencari id widget tersebut di blog kita dengan cara masuk kea kun blog pilih template dan klik edit html. Tekan CTRL+F untuk mencari id widget seperti contoh saya disini menggunakan widget feedjit dengan id widgetnya HTML8 pada blog saya. Jika sudah menemukan code id widget seperti contoh dibawah ini.

Kemudian tambahkan conditional tag <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah code <b:includable id='main'> dan tag penutupnya </b:if> sebelum code </b:includable>. Sehingga menjadi seperti contoh dibawah ini

</b:includable>

</b:widget>

<b:widget id='HTML8' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

</b:if>

</b:includable>

Code <b:if cond='data:blog.url == data:blog.homepageUrl'> berfungsi menampilkan widget di halaman depan atau homepage blog. Untuk menampilkannya di halaman postingan saja, atau tepatnya dihalaman artikel tinggal merubah code conditional tagnya sedangkan code penutupnya tidak perlu dirubah seperti contoh dibawah ini :

Menampilkan widget dihalaman depan (halaman utama Homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Menampilkan widget dihalaman artikel atau postingan
<b:if cond='data:blog.pageType == "item"'>

Menampilkan widget dihalaman archive
<b:if cond='data:blog.pageType == "archive"'>

Menampilkan widget hanya di halaman tertentu atau artikel tertentu
<b:if cond='data:blog.url == "alamat url terntu"'>

Menampilkan widget dihalaman Statis
<b:if cond='data:blog.pageType != "static_page"'>

Save template dan refresh blog. Kemudian lihat hasilnya.

So jika ingin menggunakannya pada widget yang lainnya, cukup dengan cara mencari id widget tersebut dan ikuti cara diatas.

Selamat mencoba

Tuesday, December 3, 2013

Cara membuat komentar facebook dan blogger dengan model tab

membuat komentar facebook dan blog model tab

Membuat komentar facebook dan komentar blog dengan model tab. Pada artikel yang lalu saya sudah membuat cara memasang komentar facebook pada bloger namun dengan style yang berbeda. Nah kali ini akan saya akan membahas membuat komentar facebook yang berdampingan dengan komentar blogger dengan model atau style tab. Seperti yang saya gunakan pada blog ini. Penggunaan model tab ini biasa digunakan pada sidebar blog seperti pada tampilan tab label, artikel populer dan archive.

Cara membuatnya hampir sama cara membuat kotak komentar facebook yang saya bahas dulu. Pertama-tama masuk keakun blogger pilih template dan klik edit html. Cari code html berikut dengan menggunakan CTRL + F

Baca Juga : Cara Menambahkan Widget Alexa Rank Pada Blog

Lalu copy code dibawah ini dan tempatkan tepat dibawah code html diatas

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script> <style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

Jika sobat mempunyai fan page facebook cari kata IDFANPAGEFACEBOOK pada code diatas dan ganti dengan id fan page facebook anda.

Baca Juga : Cara Submit Sitemap Blog Ke Search Engine Google

Save template dan refresh blog anda. Jika komentar facebook belum muncul coba cari kembali tag <div class='comments' id='comments'> dan tempatkan lagi code komentar facebook dibawah tag tersebut. Karena pada saat saya memasang komentar facebook dengan model tab ini saya menemukan dua tag html tersebut dan kedua-duanya saya tempatkan code komentar facebook.

Selamat mencoba