Cara Membuat Custom URL Permalink Blogger SEO Friendly

Cara membuat/meng-edit custom url permalinks Blogger/Blogspot agar lebih SEO friendly, Baru-baru ini Blogger telah memperkenalkan opsi untuk membuat custom URL permalink pada post editor-nya, meskipun masih beta atau tahap testing ini adalah berita yang sangat ditunggu-tunggu oleh pengguna Blogger platform karena kita bisa membuat URL permalink (permanent link) sesuai dengan title/judul blog post tanpa terpotong yang tentunya akan berpengaruh baik pada SEO

Sebelumnya pengguna Blogger platform merasa kecewa karena banyak kekurangan yang ada pada tubuh Blogger khususnya pada SEO, berbeda dengan Wordpress yang banyak option dan plugin untuk menunjang SEO. Tetapi sekarang kekecewaan pengguna Blogspot sudah sedikit terobati setelah Blogger melakukan banyak perubahan dan update pengguna Blogspot sekarang sudah bisa menggunakan option yang diberikan untuk menunjang SEO dan yang lainnya, seperti meng-edit robot.txt, meta description, threaded comments, fitur blogger custom permalink, dll. Apalagi sekarang ini saya sudah banyak melihat teman-teman yang berhasil membuat breadcrumbs terindex Google yang membuat blog terlihat lebih profesional. Nah sekarang kita akan bahas cara membuat custom url permalink blogger, silahkan ikuti tips & trik blogger dibawah ini.

Cara Membuat Custom URL Permalink Blogspot

• Silahkan masuk di draft.blogger.com bukan di blogger.com
• Buatlah post baru dan lihat disamping kanan post editor ada pilihan Permalink
• Kemudian buatlah permalink yang diinginkan atau sesuai dengan judul/title post
• Pisahkanlah antar kata permalink dengan karakter minus ( – ) agar lebih SEO friendly, menggunakan karakter ( - ) sangat direkomendasikan
• Klik selesai/done

Contoh URL permalink

Judul post " High PR Dofollow Blog Auto Approve Indonesia"

Jika menggunakan Automatic Permalink maka URL permalink dari judul post diatas akan terpotong karena standard blogger tidak lebih dari 38 karakter termasuk spasi,dan ini kurang baik untuk SEO sehingga akan menjadi

http://bloggerpeer.blogspot.com/ 2012/06/high-pr-dofollow-blog-auto-approve-indonesia. html

Jika menggunakan Custom Permalink maka URL Permalink akan terbentuk tanpa ada potongan kata dan tentunya ini akan sangat baik bagi SEO, sehingga akan menjadi

http://bloggerpeer.blogspot.com/ 2012/06/high-pr-dofollow-blog-auto-approve-indonesia. html

Nah sekarang terserah anda karena pilihan terakhir ada di tangan anda untuk membuat URL Permalink karena Blogger telah memberikan kita opsi yang sangat baik khususnya untuk membuat URL Permalink, untuk sementara kita hanya dapat membuat custom Permalink dari draft.blogger.com karena ini masih tahap percobaan (Beta) tetapi saya kira tidak lama lagi akan di-update sehingga bisa di akses dari blogger.com

Pada postingan ini saya belum menggunakan fasilitas Custom URL Permalink Blogger karena saya masih menggunakan Windows Live Writer untuk menulis artikel post.

Read More

Cara Membuat Breadcrumbs Terindex / Di indeks Google

Cara membuat / memasang navigasi breadcrumbs terindex Google di blog agar terlihat di dalam mesin pencari Google (Google search), beberapa waktu lalu saya pernah menjelaskan tentang cara membuat breadcrumb seo friendly yang tujuannya untuk memudahkan visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada

Sekarang saya akan membahas sedikit tentang perbedaan menu navigasi breadcrumbs seo friendly yang pernah saya tulis sebelumnya dengan yang akan kita terapkan sekarang. Mungkin sebelumnya anda sudah memasang breadcrumbs yang saya jelaskan dulu tetapi hasilnya tidak terlihat didalam pencarian Google seolah-olah tidak di index oleh Google, memang membutuhkan waktu yang sangat lama baginya untuk meng-indeks breadcrumbs yang seperti itu bahkan saya sempet dengar blog anda harus ber-pagerank 3 atau lebih. Tetapi sekarang hal itu tidak perlu dipersoalkan lagi meskipun blog anda belum mempunyai pagerank karena navigasi breadcrumbs yang satu ini akan terlihat di mesin pencari Google dengan waktu yang singkat dan semua label blog akan ter-index olehnya, nah untuk membuatnya anda ikuti tips dan trik blogger dibawah ini

Cara membuat Breadcrumbs di Blogspot / Blogger

• Login di Blogger
• Pilih Template
• Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
• Centang Expand Widget Templates
• Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
• Kemudian cari kode ]]></b:skin>
• Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

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

• Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
• Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>

Terakhir simpan template anda dan navigasi breadcrumbs akan siap di index Google

Baca artikel menarik lainnya tentang Link Bergoyang / link Nudging

Read More

Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Cara membuat link bergerak/bergoyang di blog, Link Nudging adalah suatu efek yang bergerak atau bergoyang dari sebuah/beberapa links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog. Mungkin dari kita biasa menyebutnya dengan Link Bergoyang/Bergerak atau menari, selain itu efek jQuery ini juga bisa diterapkan pada sebuah gambar (image)

Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

• Login di Blogger
• Masuk ke bagian Edit HTML pada template
• Centang pada bagian Expand Widget Template
• Cari kode </head>
• Copy paste script dibawah ini dan letakkan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label1 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>

Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini

<a href="http://bloggerpeer.blogspot.com" class="nudge">Blogger Peer</a>

Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini

<a href=http://bloggerpeer.blogspot.com" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKFoXGt8BsBy9xlcCGishCzYFnpHLh5V9TSf8GQIwtCGD0CS6MRDSGKUFhT49GU7H3S-1eFP1xa1NGAHrfSxAoJyoOWtwZw7G5uE9z7E5YNT2S1sigIBg0Wv1xXndd-8yshy9Y9f-vo8/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Read More

Komang & Blogger Peer is Comeback

Hi.. sobat blogger semua apa kabar? mohon maaf selama ini saya menghilang cukup lama di dunia maya karena kesibukan saya di dunia offline hingga tak sempat membuat artikel yang berguna bagi sobat blogger semua, bahkan saya tidak sempat mengikuti update tentang tips trik blogger maupun seo, saya sudah ketinggalan banyak neh dari kalian semua hehehe…

Terima kasih banyak bagi sobat yang sudah meluangkan waktu untuk comment pada blog saya ini dan minta maaf sebesarnya karena saya tidak sempat membalas comment kalian satu per satu dan juga tidak sempat visit back ke blog sobat.

Karena saya tidak pernah update blog Blogger Peer pada waktu yang lama kurang lebih 6 bulan akibatnya sangat besar, artikel saya yang terakhir adalah tentang cara buat tombol back to top , setelah tadi saya cek pagerank dan alexa blog ini menurun, dari PR 2 menjadi PR 1 dan juga Alexa rank juga menurun, sekarang saya mulai lagi sedikit demi sedikit berusaha untuk menaikkan Alexa rank maupun Google pagerank, wuuuhhh… capek deehhh…

Read More

Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

 

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Template > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

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

• Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_dDd_lu6aSU3plhDwhUTVh9TPhhIcmmx941VWeXtvOTZcJGVVj9uukddVnMKLEqzWeKH9vEUDfmmVUoNAnQcrBTGGELll8fKUOHvDCf-VUblbDqcrtTqzeLhiAdQ2-puFKvLXQkhyVo/s1600/back-to-top.gif'/></a>

• Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Read More

Cara Buat Bintang Jatuh dari Kursor

Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

• Login di Blogger
• Pilih Design > Add gadget > HTML/Javascript
• Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

Read More

Colorpic | Software Untuk Mengetahui Kode Warna HTML

Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah software kode warna yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog.

Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari Yahoo Messenger emoticons.

Gambar diatas adalah contoh pengambilan kode warna kuning dari YM buddy, hanya dengan meletakkan kursor ke warna tersebut maka kodenya pun dapat diketahui, mudah kan? nah bagi sobat yang ingin download software colorpic ini silahkan langsung menuju ke situs Iconico dan bagusnya lagi software ini gratis tanpa bayar sepeser pun.

Read More