Melihat Keyword Pengunjung Blog dengan Google Analytic

Cara mengetahui keyword pengunjung blog dengan google analytic. Pada artikel sebelumnya saya sudah membahas mengenai cara melihat keyword pengunjung blog dengan menggunakan feedjit. Namun terdapat beberapa kelemahan pada aplikasi tersebut. Tidak semua keyword dapat terlihat dan hanya hari keyword pada hari itu saja yang terlihat. Beda dengan menggunakan analytic kita dapat melihat keyword pengunjung blog dalam beberapa hari ataupun bulan.

Baca Juga : Mengetahui Keyword Pengunjung Blog dengan Fedjit

Untuk melihat keyword pengunjung blog dengan google analytic, sebelumnya blog anda harus sudah terdaftar pada google analytic. Langsung saja, untuk mengetahui keyword pengunjung blog dengan menggunakan analytic dapat mengikuti panduan berikut :

Kunjungi google analytic dan login menggunakan akun anda. Atau klik disini untuk akses google analytic.

Pada tampilan awal, klik menu Access Google Analytic. Login dengan menggunakan akun google anda.

Pada tampilan home google analytic klik blog yang akan anda lihat keyword pengunjung. Kemudian pada menu sebelah kiri. Klik Acquisition – keywords – organic untuk melihat kata kunci yang digunakan oleh pengunjung blog ketika mengakses blog kita.

Setelah mengikuti langkah-langkah diatas, maka akan muncul tampilan keyword disebelah kanan. Anda bisa menentukan hasil keyword hari ini , mingguan ataupun bulanan dengan merubah tanggal yang berada disebelah kanan atas.

Baca Juga : Cara Mengatur Posisi Widget Yang Error di Layout

Itulah cara melihat keyword pengunjung yang mengakses blog kita. Dengan mengatahui keyword tersebut kita dapat mengetahui kata kunci apa yang paling dicari oleh pengunjung, sehingga kita bisa meningkatkan kualitas blog.

Cara Mengatur Posisi Widget Yang Error di Layout

Cara Mengatur Posisi Widget Yang Error di Layout. Sebenarnya ini adalah masalah mengatur posisi widget di blog. Yaitu ketika akan memindahkan widget ke sidebard ataupun di footer selalu terjadi error pada saat di save. Sehingga di blog hanya bisa menambahkan widget saja tidak bisa untuk memindahkan widget.

Baca Juga : Cara Memasang Widget Komentar Terbaru di Blog

Awalnya gini nih gan, saya itu hobi ngoprek-ngoprek tema blogspot, namun hanya sebatas edit-edit biasa saja. Pernah saya coba untuk edit tema blog ini yang sebelumnya agar seo checknya 100%. Namun akhirnya posisi widget ketika saya pindahkan di posisi kiri atau bawah tidak dapat di save, selalu terjadi error. Tampilan errornya seperti contoh dibawah ini :

Kemungkinan pertama yang saya pikirkan adalah ini mungkin karena template blog ane ada yang bermasalah. Namun waktu itu saya tidak berani ganti template blog karena takut berpengaruh pada traffic pengunjung blog yang katanya dapat berpengaruh.

Sekian lama dengan menggunakan template freezon yang lama akhirnya saya memutuskan untuk mengganti template ini dengan template lain. Semua template yang saya coba hasilnyapun sama yaitu tidak dapat memindahkan widget blog. Yah apa boleh buat saya saya akhirnya bertahan dengan template yang baru.

Namun karena penasaran saya mencoba merubah posisi widget langsung di pengaturan template di edit HTML dan akhirnya berhasil juga. Caranya sebagai berikut :

Cari nama widget yang akan anda pindahkan, lihat contoh dibawah ini :

Contoh diatas saya akan memindahkan widget artikel terbaru dan akan merubah posisinya tepat diatas widget Popular Posts. Cut code html widget artikel terbaru yaitu dimulai dari code <b:widget …. Hingga </b:widget> dan tempatkan tepat diatas code widget Popular posts. Kemudian save template. Dan hasilnya widget artikel terbaru telah berpindah posisi diatas widget popular posts.

Baca Juga : Cara Menambahkan Widget Alexa Rank di Blog

Cara diatas telah saya coba dan berhasil.

Semoga bermanfaat.

Mengetahui Keyword Pengunjung Blog dengan Feedjit

Cara mengetahui keyword pengunjung blog dengan menggunakan feedjit. Pengunjung blog menggunakan keyword pada search engine untuk dapat mengunjungi blog kita. Dengan menggunakan aplikasi feedjit kita dapat mengetahui kata kunci apa yang digunakan oleh pengunjung untuk mengunjungi blog.

Baca Juga : Cara Submit Blog ke Search Engine Google

Selain mengetahui keyword dengan aplikasi feedjit. Kita juga dapat mengetahui jenis browser dan dari kota ataupun Negara mana pengunjung tersebut.  Sebagai contoh lihat hasil screenshot aplikasi feedjit blog saya dibawah ini : 

Pada gambar diatas kita dapat melihat Negara pengunjung blog , browser yang digunakan, system operasi computer, search engine yang digunakan, kota dan Negara pengunjung artikel yang dikunjungi serta kata kunci atau keyword yang digunakan.

Baca Juga : Cara Mengatur Posisi Widget Yang Error di Layout

Itulah beberapa fungsi dari aplikasi feedjit. Dengan mengetahui keyword pengunjung blog kita dapat mengetahui apa yang sedang dicari oleh pengunjung blog.

Untuk menerapkannya pada blog, dapat langsung mengunjungi website feedjit DISINI.

Selamat mencoba.

Memasang Widget Komentar Terbaru dengan Avatar di Blog

Membuat widget komentar atau recent comment di blogspot. Widget komentar pada blogger tidak terdapat dalam bawaan blog, sehingga ada kode tersendiri untuk membuat widget tersebut. Kali ini saya akan share cara membuat widget komentar dengan avatar atau gambar profil g+. widget ini akan menampilkan komentar-komentar pada blog dengan disertai dengan foto profil (avatar).

Langkah-langkah dalam pembuatan widget recent comment :

Masuk ke dalam dasbor blog sobat, kemudian klik layout atau tata letak dan add gadget recent comment di tempat yang diinginkan.  Pada pilihan add gadget pilih gadget HTML/JavaScript. Selanjutnya copy code dibawah ini dan tempatkan pada gadget tersebut.

<div style="overflow:auto;width:auto;height:378px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style><script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 10, showAvatar = true, avatarSize = 35, roundAvatar = true, characters = 250, defaultAvatar = "", hideCredits = true; //]]></script><script type="text/javascript" >//<![CDATA[ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<x>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<v C=\\"1T "+k+"\\"><b C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{})) //]]> </script> <script type="text/javascript" src="http://freezon88.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=50"></script></div>

Sebelum melakukan penyimpanan cari code berikut :

<script type="text/javascript" src="http://freezon88.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=50"></script></div>

Ganti alamat URL diatas yang berwarna merah dengan alamat URL blog sobat. Simpan dan kemudian refresh blog. 

Sampai disini kita telah berhasil membuat widget recent comments atau widget komentar pada blogspot.

Selamat mencoba

Cara Membuat Menu di Blogspot

Cara membuat menu di blogger. Cara Membuat menu di blog bisa di lakukan dengan dua cara, yaitu dengan menggunakan tab halaman atau page yang ada di dasbor ataupun dengan merubah menu bawaan blog dari template-template yang di download. Pada artikel sebelumnya saya sudah menjelaskan tentang bagaimana merubah atau menghapus menu bawaan template bloger. Nah sekarang saya akan membahas bagaimana cara membuat menu dengan menggunakan tab halaman.

Dalam pembuatan menu di tab page atau halaman kita dapat membuat menu dengan dua cara yaitu menu dengan link yang menuju ke url tertentu atau menu yang menuju ke halaman tertentu pada blog.

Menu Yang Menuju Halaman Tertentu

Yang pertama kita akan membuat menu yang menuju halaman tertentu. Contoh pembuatan menu ini adalah menu tentang kami, privacy policy, kontak kami dll. Langkah – langkah pembuatan menu ini adalah :

1. Login kedalam dasbor – halaman (page) klik new page dan pilih blank page

2. Pada title Page isikan Tentang saya dan pada bagian bawah buat sebuah deskripsi tentang anda , seperti contoh dibawah ini, jika telah selesai klik publish.

3.  sampai disini kita tela membuat menu page yang menuju pada halaman tertentu, untuk melihat hasilnya klik kembali menu page dan lihat menu yang telah kita buat.

Untuk mengurutkan menu, cukup dengan klik pada bagian ujung kiri menu dan geser keatas dan kebawah.

Menu Yang Menuju ke Link URL Alamat Terntu.

Selanjutnya kita akan membuat menu yang menuju ke Link URL alamat tertentu, contoh kita buat menu yang menuju link label. Disini saya gunakan link label mikrotik.

Kembali ke tahap 1 pada langkah diatas, klik page – new page- Web address. Sebelumnya copy terlebih dahulu alamat url label anda.

Pada Page Tittle masukkan Nama Label dan pada Web address masukkan atau pastekan alamat url label blog anda yang telah di copy tadi. Kemudian klik save.

Nah sampai disini kita telah berhasil membuat dua buah menu yang berbeda.

Selamat mencoba.

Cara Membuat Recent Post (Artikel Terbaru) Berdasarkan Label di Blog

Membuat recent post berdasarkan label di blogspot. Kadang kita ingin membuat sebuah recent post atau artikel terbaru tapi dengan menggunakan label tertentu namun widget yang tersedia di blogger tidak bisa menampilkan recent post atau artikel terbaru berdasarkan label. Fungsi pemasangan ini sangat banyak karna kita dapat membuat sebuah recent post yang teratur. Cara ini saya terapkan pada blog saya yang lainnya.

Nah kali ini akan saya share cara membuat recent post berdasarkan label. Sebelumnya saya pun sempat mencari-cari widget recent post di widget blogger, namun saya tidak menemukan widget recent post yang bisa menampilkan berdasarkan label tertentu. Adapun cara ini saya dapat dengan hasil pencarian sama om google.

Langkah – langkah membuat widget recent post berdasarkan label

Login dalam akun blogger anda, kemudian klik blog yang akan di tambahkan widget recent post dan klik layout. 

Pada tampilan layout klik add gadget dan pilih  HTML/Javascript dan copykan code berikut ini :

<script type="text/javascript">

function showrecentposts(json)

{

  for (var i = 0; i < numposts; i++) {

    var entry = json.feed.entry[i];

    var posttitle = entry.title.$t;

    var posturl;

    if (i == json.feed.entry.length) break;

    for (var k = 0; k < entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        posturl = entry.link[k].href;

        break;

      }}

    posttitle = posttitle.link(posturl);

    if (standardstyling) document.write('<li>');

    document.write(posttitle);}

    if (standardstyling) document.write('</li>');

}

</script>

<script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://freezon88.blogspot.com/feeds/posts/default/-/mikrotik?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts" type="text/javascript"></script>

Contoh script diatas, saya membuat recent post berdasarkan label mikrotik.

Perhatikan code diatas, code yang berwarna biru ganti dengan alamat URL blog anda dan code yang berwarna merah gantikan dengan nama label. Jika nama label terdiri dari dua kata, biasanya dipisahkan oleh tanda %20 contoh label tips dan trik penulisannya adalah tips%20dan%20trik. Jadi nama label yang terdiri dari dua kata atau lebih pisahkan dengan tanda %20.

Setelah melakukan perubahan pada alamat url blog dan nama label, Save template dan lihat hasilnya

Selamat mencoba

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'>

<meta content='Blog yang membahas tentang tutorial internet, drupal, animasi, web, css, blog dan tips dan trik' name='description'/>

<meta content='Tutorial, cara, hotspot, mikrotik, drupal, css, web, website, blog, ms word, ms excel, animasi, membuat, windows, software, download, google, bagaimana, modifikasi, tips dan trik, tips, trik, pengenalan, internet, ' name='keywords'/>

</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

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>

<!-- Artikel terkait by freezon88.blogspot.com--><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><!--end of artikel terkait -->

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 == &quot;static_page&quot;'><data:post.body/></b:if>

<!-- Artikel Terkait--><b:if cond='data:blog.pageType == "item"'><div id='related-posts'><font face='Arial' size='3'><b>Baca Juga : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:if></b:loop></font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> <!--end of artikel terkait-->

Save template dan lihat hasilnya. Selamat mencoba

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

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.

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.

</b:includable><br />          </b:widget><br />          <b:widget id='HTML8' locked='false' title='' type='HTML'><br />            <b:includable id='main'><br />  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != ""'><br />    <h4 class='title'><data:title/></h4><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div><br />  <!--<b:include name='quickedit'/>--><br /></b:includable><br />

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'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h4 class='title'><data:title/></h4>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <!--<b:include name='quickedit'/>-->

</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

Cara membuat komentar facebook dan blogger dengan 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

<div class='comments' id='comments'>

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

Cara Memasang Breadcrumb di Blog

Tutorial memasang breadcrumb di blog.  Salah satu cara meningkatkan seo pada blog adalah dengan menambahkan fitur breadcrumb pada blog, inilah yang saya temui ketika mencari salah satu cara untuk meningkatkan SEO. Yah akhirnya saya juga memasang fungsi ini pada blog saya. Menurut beberapa sumber fitur ini membantu artikel agar mudah terindex oleh mesin pencari. Namun ada juga yang mengatakan bahwa fungsi ini tidak cocok untuk SEO. Nah ini terserah dari sobat, mau memasang fungsi ini atau tidak.

Setelah saya memasang fungsi ini, ketika melakukan search pada om google, ternyata fungsi ini terlihat juga pada search engine, seperti contoh gambar diatas beberapa artikel saya yang tampil di search engine google terdapat breadcrumb.

Breadcrumb merupakan link –link label yang menuju pada artikel yang dibuat. Berikut contoh tampilan breadcrumb pada blog

Home>>office>>excel>>belajar ms excel

Untuk memasang breadcrumb masuk ke dasbor blog anda, kemudian pilih menu template dan klik edit template. Pertama-tama masukkan style dari breadcrumb cari kata ]]></b:skin> kemudian copy style dibawah ini dan tempatkan diatasnya

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 13px 0px; font-size:100%; line-height: 1.4em; border-bottom:3px double #eee;}

Setelah itu cari code berikut <b:includable id='main' var='top'> dan gantikan dengan code dibawah ini 

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div><b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> » <span><data:post.title/></span> </div><b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div></b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div><b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div></b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

Save template dan lihatlah hasilnya pada google, jika belum muncul cobalah menunggu untuk beberapa hari. Menurut ane fungsi ini tidak langsung tampil di google pada saat kita memasangnya, butuh waktu agar breadcrumb muncul di search engine.

selamat mencoba :)

Cara mengganti atau memasang favicon pada blog

Cara mengganti favicon di blog. Logo favicon standar pada blog yang kita buat dibloger adalah dengan menggunakan logo bloger, nah bagaimana caranya agar logo favicon tersebut kita ganti dengan logo blog kita sendiri agar kelihatan lebih keren hehe. Coba ikuti langkah-langkah yang akan saya jabarkan dibawah ini.

Sebelumnya buatlah terlebih dahulu logo favicon yang diinginkan dapat berupa format jpeg atau format png. Setelah membuat logo tersebut, kunjungi website layanan untuk menggenerate logo agar menjadi favicon contohnya pada web favicon generator

Pada contoh gambar diatas, klik pilih file kemudian pilih logo yang telah dibuat, disini saya membuat logo blog saya dengan format .png. klik create favicon untuk membuat icon favicon dengan secara otomatis icon favicon akan dibuat dengan ukuran 16x16 pixel.

Selanjutnya klik download the generator favicon untuk mendownload favicon yang telah dibuat.

Untuk menerapkanya di blog, ada dua cara, yaitu langsung pada menu layout yang ada di dasbor atau dengan memasang code html baru untuk favicon pada menu template edit html.

Cara pertama masuk pada dasbor bloger sobat, kemudian pilih menu layout kemudian klik edit pada favicon dan upload favicon yang telah di download tadi kemudian save. kemudian lakukan refresh pada blog dan lihat hasilnya.

Jika cara ini masih belum berhasil, selanjutnya gunakan cara kedua yaitu dengan menambahkan code html untuk membuat favicon. Masuk pada dasbor bloger anda, kemudian pilih menu template dan edit html. Cari code dibawah dengan menggunakan CTRL + F jika tidak ada, copy code dibawah dan tempatkan di bawah tag <head> ataupun di atas tag </head>

<link href=’URL-FAVICON' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Ganti code merah dengan alamat ulr favicon blog anda, save dan coba lakukan refresh pada blog.

Mungkin bagi pemula bingung dan bertanya dimana kita mendapatkan alamat url favicon blog, untuk mendapatkan alamat url favicon pada blog, kita harus mengupload favicon tersebut kesalah satu website penyedia upload foto, seperti photo bucketatau web-web lain yang sekarang sudah banyak di internet. Namun kita juga bisa upload favicon ke dalam blog pada saat kita membuat sebuah artikel. Nah pada saat di upluad kita tidak perlu menempatkannya pada artikel namun kita hanya mengambil alamat url favicon tersebut yang telah di upload, sebagai contoh lihat gambar dibawah :

Klik kanan pada favicon yang telah di upload dan pilih salin url gambar, nah kemudian paste url gambar tersebut kedalam code html yang berwarna merah seperti contoh diatas.

Semoga membantu J

Cara mudah modifikasi tema blog atau web dengan menggunakan firebug

Belajar modifikasi tema template blog. Kali ini saya akan share sebuah addson browser yang berfungsi untuk membantu kita dalam modifikasi tampilan blog. Kadang beberapa tema blog yang kita gunakan ada sedikit yang tidak sesuai dengan keinginan kita. Dan ketika merubahnya langsung dari dasbor bloger kita harus melakukan penyimpanan untuk melihat hasil modifikasi tersebut pada blog.

Dengan menggunakan add ons firebug yang ada pada browser, kita dapat langsung melihat hasil dari modifikasi tampilan blog tanpa harus menyimpannya terlebih dahulu. Keuntungan menggunakan add ons ini adalah kita tidak perlu takut akan tampilan blog yang salah di modifikasi karena pada saat menggunakan add ons ini code hasil modifikasi belum tersimpan dalam blog sebelum kita melakukan penyimpanan terlebih dahulu. Ketika menggunakan firebug setiap code css yang kita rubah, akan langsung dilihat hasilnya pada browser.

Baca Juga : Memasang Meta Tag Deskripsi dan Keyword di Blog

Menginstal firebug pada browser sama halnya dengan cara menginstal add ons wappalyzer yang pernah saya bahas, jadi saya akan bahas cara penggunaannya saja. Untuk menggunakan firebug cukup dengan klik icon firebug yang ada pada browser sampai muncul jendela firebug pada bagian bawah browser seperti contoh dibawah :

Ketika jendele firebug telah muncul klik icon inspect no 1 pada gambar diatas, lalu klik bagian template yang akan di modifikasi. Sebagai contoh saya akan merubah Judul blog saya yang sebelumnya berwarna putih menjadi warna merah. Ketika kita klik judul blog makan akan muncul file code css disebelah kanan yang menunjukan style dari judul blog (no 3).

Pada gambar diatas setelah kita klik judul blog, selanjutnya kita klik tag <a href…….. </a> (no 1) dan perhatikan disebelah kanan yang saya tandai dengan angka 2, terdapat code css yang menunjukan style dari h1 atau judul blog. Disitu dilihat bahwa color warna dari header h1 sudah saya ganti menjadi #ff0000 (warna merah) yang sebelumnya adalah #ffffff (warna putih).

Baca Juga : Membuat Artikel Terkait Atau Related Post di Blog

Dari contoh diatas penggunaan firebug sangatlah mudah, sehingga jika kita sudah yakin akan style yang kita terapkan tadi kita dapat langsung menggantinya di menu edit html pada blog. Sebaiknya kita juga harus paham sedikit tentang bahasa pemograman css dan html sehingga sangat mudah dalam mendesain sendiri tampilan blog kita.

Itulah cara mudah modifikasi blog dengan menggunakan firebug

Memasang Comment Facebook Pada Postingan Blogger

Cara membuat kotak komentar facebook di blogger – kali ini saya akan membahas bagaimana cara menambahkan komentar facebook pada postingan di blogger. Komentar facebook pada postingan ini sebenarnya agar mempermudah pengunjung memberikan komentar pada postingan blog kita. Karena rata-rata pengguna internet sudah memiliki account facebook.

Selain mempermudah pengunjung untuk memberikan komentar, kotak komentar juga ini dapat menambahkan traffic pada blog yang berasal dari facebook, dimana di ketahui pengguna facebook sudah sangat banyak.

Saya pernah mencari referensi di google tentang bagaimana cara menambahkan kotak komentar facebook pada tiap postingan blog, namun saya merasa kesulitan dalam penerapannya walaupun pada akhirnya selesai juga. Oke dari pada banyak basa basi mendingan kita langsung saja mulai langkah langkahnya J sebagai contoh lihat gambar dibawah, saya memasang kotak komentar facebook tepat diatas kotak komentar standar bloger

jika sobat ingin membuat komentar facebook yang berdampingan dengan komentar blog seperti yang ane gunakan di blog ini dapat lihat tutorialnya disini

Masuk ke akun bloger anda, kemudian klik blog yang akan dipasangkan kotak komentar facebook. Pilih menu template dan klik edit html. Karena disini saya memasang kotak komentar facebook tepat diatas kotak komentar bloger dan dibawah postingan, maka saya akan menempatkan code comment facebook tepat ditengah-tengah antara postingan blog dan komentar standar blog, caranya tekan CTRL + F kemudian ketikan <data:post.body/>. Kita akan menemukan beberapa tag <data:post.body/> namun di template saya, saya mencari tag <data:post.body/> yang paling bawah, nah pada awalnya disini saya selalu gagal dalam penempatan code comment facebook hingga akhirnya saya memilih tag <data:post.body/> yang berada paling bawah. Awalnya saya menempatkan codenya pas dibawah tag <data:post.body/> namun tampilan kotak komentar facebook berada diatas  artikel terkait dan tombol share button (lihat no 1 pada gambar dibawah). Yang saya inginkan adalah komentar facebook tersebut tepat diatas komentar standar bloger, sehingga tampilannya lebih menarik (no 3 pada gambar)

Nah agar tampilan komentar facebook berada di no 3 contoh gambar diatas, saya menempatkan code comment facebook dibawah tag <data:post.body/> tapi lebih tepatnya diatas code komentar standar bloger, copy code comment facebook dibawah ini 
<!--Comment FB--><b:if cond='data:blog.pageType == "item"'><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' num_posts='1' width='450'/></div></b:if><!--End of Comment FB-->
lihat contoh gambar dibawah ini

Pada gambar yang diatas angka 1 menunjukan no 4 pada gambar pertama yang diatas yaitu home dan older post, jadi saya menempatkan code commentar facebook  tepat dibawah no 1 yaitu pada no 2. Sehingga kotak komentar facebook tepat berada antara navigasi home older post dan komentar standar bloger.

Contoh diatas merupakan contoh pada template blog saya , tetapi mudah-mudahan bisa menjadi referensi bagi sobat bloger untuk menambahkan komentar facebook pada postingan artikel. Pada saat saya mencoba cara diatas, sebenarnya saya sempat mengalami beberapa kegagalan, namun saya mencoba memindahkan code facebook comment diatas sehingga pas diatas komentar standar bloger.

Lihat tutorialnya di youtube

Selamat mencoba CMIIW 

Membuat Efek Berputar pada Icon atau Logo Blog

Tutorial cara membuat logo atau icon berputar pada blog dengan menggunakan css3 – Pada kesempatan kali ini saya akan membahas tentang bagaimana membuat efek berputar pada icon atau logo blog. Sebagai contoh saya akan membuat icon social media berputar yang ada pada blog. Ketika mouse berada diatas icon tersebut, maka icon tersebut akan berputar 360 derajat. Yah lumayan untuk mempercantik tampilan blog kita sehingga nyaman dilihat. Untuk melihat contohnya silahkan tempatkan mouse anda berada diatas icon social media yang ada pada blog freezon.

Untuk melakukannya kita cukup menambahkan icon css transition pada properti tag atau selector css social media tersebut dengan cara mencari tag social media yang ada pada template blog kita. Pertama-tama masuk ke akun bloger anda kemudian pilih menu template dan klik edit html. Tekan CTRL + F untuk mencari tag css social media tersebut. Contoh code css  social media yang ada pada template blog saya :

CLASS CSS ICON SOCIAL MEDIA :

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img { margin:0 4px 0 0; }

Kemudian tambahkan code css3 untuk efek berputar pada image sehingga Nampak seperti contoh dibawah ini

Code css Sesudah dipasangkan efek berputar pada icon :

margin:0 4px 0 0; transition:all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; }

CLASS CSS ICON SOCIAL MEDIA KETIKA MOUSE BERADA DIATASNYA

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; }

Code css Sesudah dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }

Jika anda sudah menambahkan code diatas, tinggal melakukan penyimpanan. Refresh browser anda dan coba tempatkan mouse pada icon social media yang ada pada blog dan lihat hasilnya. Jika tidak terjadi efek berputar berarti ada kesalahan pemasangan code css pada tag social media. Pastikan agar tag yang dipasangkan efek berputar merupakan tag css dari icon social media tersebut.

Cara merubah atau menghapus menu bawaan template blogger

Kali ini saya akan share sedikit tentang bagaimana mengganti , menghapus atau merubah menu pada template blogger. Mungkin sebagian blogger sudah tau cara ini, tapi bagi pemula hal ini mungkin agak sedikit kurang dipahami.

Sebelumnya download template blogger di btemplates.com, situs penyedia template blogger. Pada situs itu terdapat beberapa template blogger dengan berbagai variasi. Terapkan pada blog anda dan lihat apakah ada menu-menu bawaaan dari template tersebut. Jika ada, kita dapat merubahnya sendiri dan disesuaikan dengan menu dari blog kita. Yang ingin belajar modifikasi tema template blog dapat mengikuti panduan Cara mudah modifikasi tema blog atau web dengan menggunakan firebug

Sebagai contoh berikut menu standar template yang saya download dan akan saya ganti sesuai dengan menu pada blog saya.

pada gambar disamping terdapat menu bawaan template yang saya gunakanan. namun saya ingin menghapus sebagian menu yang tidak sesuai dengan blog saya.

pertama-tama masuk pada blogger dan pilih menu template lalu klik edit html seperti gambar dibawah ini 

kemudian tekan Ctrl + F untuk mengaktifkan search pada file xml, masukkan nama menu yang ingin dihapus atau dirubah, dibawah ini saya ingin menghilangkan menu business pada menu template saya

untuk menghilangkannya dapat dengan menghapus menu business yang ditandai pada angka 2 sampai angka 3, tapi contoh diatas saya hanya menambahkan code <!-- pada awal code menu business dan --> pada akhir code, fungsinya yaitu agar kode li pada menu business hanya terbaca sebagai comment di browser sehingga tidak tampil pada browser.

Baca Juga : Cara Mengetahui Keyword Pengunjung Blog

sedangkan untuk merubah menu tersebut, cukup dengan merubah kata business sesuai dengan menu yang diinginkan namun jangan lupa untuk memasukkan alamat url menu baru dengan cara memasukkan link menu pada href='masukkan-link-menu-disini'.

Untuk membuat menu di blog dengan menggunakan fungsi page atau halaman dapat mengikuti panduan Cara Membuat Menu di Blog

nah sampai disini kita sudah dapat merubah menu template yang kita download sesuai dengan keinginan :) semoga membantu

Cara menambahkan Widget Alexa Rank pada Blog

Alexa rank merupakan salah satu situs yang memberikan peringkat kepada situs-situs web ataupun blog di internet, jadi untuk mengetahui berapa peringkat sebuah blog atau website kita dapat melihatnnya di website alexa.com. Selain itu alexa juga menyediakan peringkat sebuah website secara internasional dan secara nasional sesuai dengan negara blog atau situs tersebut.


Agar kita dapat mengetahui secara jelas berapa peringkat alexa pada situs ataupun blog kita, kita dapat menambahkan widget alexa kedalam blog. Ini berguna juga sebagai motivasi untuk selalu berusaha menaikkan ranking blog kita menjadi sekecil mungkin yang artinya makin kecil ranking yang kita miliki di alexa rank berarti makin banyak pengunjung situs kita.

Memasang widget alexa rank pada blog kita harus terdaftar dalam web alexa, Bagi yang belum punya akun di alexa dapat klik disini. selanjutnya klik link ini dan masukkan alamat blog kita lalu klik tombol "build widget" nah sekarang tinggal copy code widget, ada beberapa model widget alexa rank, namun copy salah satu code widget yang sesuai dengan keinginan saja. setelah itu masuk ke dalam blogger - tataletak kemudian add gadget dan paste code alexa kemudian save. tentukan letak gadget alexa sesuai dengan keinginan.

Submit Sitemap Blog Ke Search Engine Google

Sitemap, Peta Situs

Salah satu cara agar blog dapat terindex dengan baik oleh google yaitu dengan cara mengirimkan sitemap atau peta situs ke google melalui webmaster tools. Untuk mengirimkannya terlebih dahulu login ke situs webmaster tools dan daftarkan blog anda dengan mengklik tombol tambahkan situs dan masukkan alamat situs anda. Jika sudah mendaftarkan blog anda, selanjutnya selesaikan tahap verifikasi dengan mengikuti salah satu cara verifikasi tertera. Disini saya menggunakan metode alternatif verifikasi dengan menambahkan tag meta kedalam blog.
Jika sudah melakukan verifikasi blog, maka alamat blog kita akan masuk didalam daftar webmaster tools. Klik alamat blog yang baru diverifikasi kemudian pada tampilan dasbor situs, klik sitemap atau peta situs. selanjutnya klik tombol Tambahkan/Uji Peta Situs. Untuk pengguna blogspot alamat peta situs adalah feeds/posts/default?orderby=updated, masukkan alamat tersebut dan lakukan pengujian terlebih dahulu, jika pengujian berhasil masukkan kembali alamat sitemap blogspot feeds/posts/default?orderby=updated
dan klik tombol mengirim peta situs.

Sitemap atau peta situs yang sudah terkirim akan diproses oleh search engine google, mungkin butuh beberapa hari agar sitemap atau peta situs yang dikirimkan terindex semua oleh google.

itulah cara Submit Sitemap Blog Ke Search Engine Google agar blog cepat terindex kedalam mesin pencarian google