Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly

Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly. Sebagai blogger newbie alias blogger pemula, tentu saja saya mencari segala informasi tentang dunia blog, istilah istilah blog, tentang seo dan lain sebagainya.

Sampailah saya ke satu istilah dalam dunia blog yaitu breadcrumbs yang sebenarnya istilah breadcrumbs sudah cukup populer karena mungkin sudah banyak yang share mengenai hal tersebut. Selain cukup populer ternyata breadcrumb mempunyai fungsi yang penting untuk pengunjung blog dan dalam hal SEO fungsinya juga penting.

Sebelum masuk ke tata cara membuat dan memasang breadcrumb, ada baiknya kita bahas dulu pengertian, fungsi dan juga manfaat dari breadcrumb itu sendiri terhadap blog yang kita kelola.

Pengertian breadcrumb (menurut deskripsi saya sendiri) adalah merupakan suatu bentuk navigasi atau petunjuk yang ada pada blog yang menunjukan kepada pengunjung blog posisi dari kategori artikel atau halaman yang sedang dia buka.

Breadcrumb bentuknya berupa deretan link horizontal sedangkan posisi dari breadcrumb pada halaman artikel yang dibuka biasanya terletak di atas judul artikel blog (contohnya gambar diatas) atau ada juga yang dibawah judul artikel letaknya.

Dalam hal fungsinya breadcrumbs mempunyai fungsi sebagai berikut:

• mempermudah para pengunjung blog dalam menjelajah blog yang kita kelola.
• dengan link yang ada pada breadcrumbs, dapat membantu pengunjung blog dalam hal mencari artikel artikel yang berhubungan dengan artikel yang sedang dibuka.
• sebagai petunjuk bagi pengunjung blog tentang posisi artikel yang sedang dibuka.

Nah, dilihat dari fungsinya dengan adanya breadcrumbs pada blog menurut saya sangat penting untuk kemudahan pengunjung blog dalam mendapatkan artikel artikel yang saling berhubungan yang pengunjung blog inginkan.

Sedangkan manfaat dari breadcrumbs adalah selain telah disebutkan dalam fungsi diatas, breadcrumbs juga akan menambahkan kata kunci atau keyword dan judul yang terstruktur pada link blog sehingga berpengaruh dalam hal posisi index pada search engine dan bisa menjadikan blog kita lebih SEO friendly.

Apabila pada template blog yang anda pasang telah terpasang breadcrumb maka tidak perlu repot repot membuatnya lagi tapi apakah breadcrumbs yang terpasang di template blog anda merupakan breadcrumbs yang bisa terindex oleh search engine?

Contohnya bisa dilihat gambar dibawah apakah breadcrumbs pada template anda bisa terindex atau tidak oleh search engine (kotak merah adalah label breadcrumbs).

contoh breadcrumbs yang terindex oleh google

Apabila breadcrumbs pada template anda tidak bisa terindex oleh search engine, anda bisa pasang kode breadcrumbs yang caranya sebagai berikut:

• log in ke akun blog anda
• pada dashboard klik template dan klik juga edit HTML
• cari kode ]]></b:skin> atau bisa juga kode </style>
• silahkan copy kode dibawah ini dan paste kan diatas kode ]]></b:skin> atau kode </style> tadi

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

• selanjutnya cari kode <b:includable id='main' var='top'> dan ganti kode tersebut dengan kode 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'/>

•  simpan (save) template anda.

Untuk melihat hasilnya, kita bisa cek hasilnya di Google Reachsnipet Tools dengan cara klik https://developers.google.com/structured-data/testing-tool/ setelah itu anda klik ambil URL dan masukan url artikel blog anda. Untuk lebih jelasnya silahkan lihat gambar dibawah

langkah pertama

langkah kedua

dan apabila hasilnya seperti gambar dibawah maka anda berhasil memasang breadcrumbsnya

Dan satu hal yang penting dalam membuat breadscrumbs adalah biasakanlah selalu membuat suatu kategori atau label dalam setiap artikel yang anda buat yang letaknya ada pada setelan entri pada sebelah kanan halaman ketika anda membuat suatu artikel apabila tidak maka adanya breadcrumb pun akan menjadi percuma saja.

Selesai sudah mengenai tutorial cara membuat dan memasang breadcrumb yang SEO friendly, kurang lebihnya saya mohon maaf dan semoga bermanfaat. 

Read more »

Tutorial Cara Memasang Anti Copy Paste di Blog

Tutorial Cara Memasang Anti Copy Paste di Blog. Artikel artikel yang telah kita buat dan dipublikasikan di blog sangat rentan sekali untuk dicopy atau istilah jaman sekarangnya di copas orang lain dan ketika artikel atau konten yang sudah anda buat dengan susah payah dan dipublikasikan di blog di curi atau di copy paste orang lain pasti kesal rasanya bukan hehe...

Maka dari itu, sebaiknya kita harus mengantisipasinya, untuk meminimalisir hal-hal yang berhubungan dengan pencurian isi artikel yang telah kita buat di blog dengan cara memasang anti copy paste agar orang lain tidak seenaknya mencomot artikel artikel yang telah kita buat.

Baiklah, terdapat beberapa cara supaya artikel artikel yang kita buat di blog tidak bisa di copas dengan seenaknya oleh orang lain, berikut cara-caranya:

• Cara pertama

Cara pertama ini bisa digunakan apabila anda hanya ingin pada bagian-bagian tertentu saja yang hanya bisa di copy paste, contohnya pada blog ini hanya pada bagian yang ada pada quote saja yang bisa dicopy sedangkan bagian lainnya tidak bisa dicopy.

Cara pemasangannya sebagai berikut:

• Seperti biasa anda log in ke akun blogger anda
• Selanjutnya klik template dan edit HTML 
• Cari kode ]]></b:skin> atau kode </style>
• Setelah ketemu letakan kode dibawah ini diatas kode yang tadi 

.post  { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }.post blockquote,.post pre,.post code { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }

• Silahkan simpan (save) template anda dan coba tes hasilnya

Sebagai tambahan kode anti copy paste ini hanya berupa css sehingga tidak berpengaruh pada loading blog yang memasangnya.

• Cara kedua

Pada cara yang kedua ini akan membuat semua isi tulisan artikel artikel kita di blog tidak bisa di copy paste. Langsung saja untuk cara yang kedua cara pemasangannya sebagai berikut:

• Pada dashboard blog anda klik template dan klik edit HTML
• Cari kode </head> dan simpan kode dibawah ini letaknya dibawah kode </head> tadi

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >

• klik save template dan silahkan tes hasilnya.

Sebaiknya untuk blog yang artikel artikelnya berisi tentang tutorial tutorial blog yang didalamnya berisi membagikan kode kode atau script, saya sarankan tidak menggunakan anti copy paste cara yang kedua ini karena bisa membuat para pengunjung blog tidak bisa mengcopy kode script yang kita bagikan di blog.

• Cara ketiga

Cara yang ketiga ini bisa berfungsi tidak hanya sebagai anti copy paste tetapi juga bisa berfungsi sebagai anti klik kanan, dobel fungsi kira kira begitu hehe...

Untuk cara ketiga ini cara pemasangannya sebagai berikut:

• Seperti biasa anda klik menu template dan klik juga edit HTML
• cari kode <body>
• Selanjutnya apabila sudah ketemu, ganti kode <body> atau bisa juga menambahkan kode yang saya kasih warna merah dibawah ini pada kode tadi (seperti contoh dibawah)

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

• Save template anda dan tes hasilnya

Sebagai catatan, cara yang ketiga ini mempunyai beberapa efek yang menyebabkan beberapa fungsi pada blog akan menjadi error apabila anda memasangnya seperti contohnya akan mengakibatkan widget search pada blog bisa error.

Selain dengan memasang script anti copas seperti caranya diatas tidak ada salahnya lagi anda bisa mendaftar di DMCA protection. DMCA protection merupakan sebuah situs yang bergerak dalam hal perlindungan konten-konten dari suatu blog atau website sehingga bisa lebih menguatkan dalam melindungi artikel artikel yang telah anda buat dan telah anda pubikasikan melalui blog atau website yang anda kelola dari para pencuri atau copaser nekad yang hanya bermodal copy paste.

Itulah tutorial cara untuk memasang anti copy paste yang bisa saya sampaikan semoga membantu meminimalisir artikel artikel di blog kita dicuri orang lain dan semoga bermanfaat...

Read more »

Pengertian Backlink, Jenis Backlink, Fungsi dan Manfaat Backlink Serta Cara Mendapatkan Backlink

Pengertian Backlink, jenis backlink, fungsi dan manfaat backlink serta cara mendapatkan backlink. Backlink, termasuk salah satu kata yang sering ditanyakan oleh para blogger pemula seperti saya hehe...pengertiannya apa, fungsi dan manfaatnya apa buat blog atau seberapa pentingkah backlink untuk blog itulah kira-kira bentuk pertanyaannya dan untuk menjawabnya kita coba ulas pada artikel ini.

• Pengertian Backlink

Backlink adalah suatu link yang mengarah pada blog atau situs kita dari situs atau blog yang lain atau dengan istilah kerennya backlink adalah suatu tautan link yang dapat meningkatkan posisi SERP (Search Engine Result Page) pada search engine atau mesin pencari. Banyaknya backlink yang dimiliki oleh suatu blog atau situs bisa menandakan nilai popularitas blog atau situs tersebut.

• Jenis Backlink

Backlink terbagi kedalam dua jenis yaitu DoFollow Backlink dan NoFollow Backlink. 

Perbedaan dua jenis backlink adalah biasanya search engine akan merayapi atau menjelajah semua isi dari blog atau situs dan ketika search engine sampai pada suatu backlink maka search engine akan memeriksa apakah backlink tersebut dofollow atau nofollow dan apabila backlink tersebut dofollow maka search engine akan meneruskan perayapannya ke blog atau situs yang menaruh backlink tersebut sedangkan untuk backlink nofollow kebalikannya yaitu search engine tidak akan meneruskan perayapannya ke blog atau situs yang menaruh backlink atau dengan kata lain akan mengabaikannya.

• Fungsi dan Manfaat Backlink

Fungsi dan manfaat backlink untuk blog atau situs yang kita kelola adalah sebagai berikut:

1. Dapat mengoptimalkan SEO
2. Meningkatkan peringkat blog atau situs yang kita kelola di SERP 
3. Blog atau situs yang kita kelola menjadi lebih populer dimata search engine
4. Membantu meningkatkan PageRank blog atau situs yang kita kelola

Nah, setelah kita tahu segala macam dari pengertian backlink, jenis backlink, fungsi dan manfaat backlink, saatnya kita membuat suatu backlink yang berkualitas untuk blog yang kita kelola. Membuat backlink berkualitas bisa dibilang gampang-gampang susah tapi tergantung dari sudut pandang anda melihatnya jadi berikut cara-cara membangun backlink berkualitas:

• Backlink dari sosial media

Dengan banyaknya sosial media sekarang ini seperti facebook, twitter, linkedin, google+ dan lain sebagainya merupakan suatu lahan untuk mendapatkan backlink. Mendapatkan backlink dengan cara ini adalah dengan cara artikel yang kita buat di blog kita share ke sosial media. Walaupun dalam hal ini backlink dari sosial media kebanyakan bersifat nofollow tetapi search engine tetap akan memperhitungkannya apalagi kalau kita share ke sosial media google+ yang notabene merupakan kepunyaan google itu sendiri.

• Backlink dari social bookmarking

Fungsi sebenarnya dari situs situs social bookmarking adalah untuk menyimpan url situs yang disukai oleh user sehingga menjadi mudah apabila ingin membukanya kembali selain itu juga para pelaku SEO menggunakan situs social bookmarking untuk lebih mempopulerkan lagi blog atau website yang mereka kelola. Mendapatkan backlink dari situs situs social bookmarking akan berpengaruh apalagi backlink yang berasal dari situs social bookmarking yang mempunyai posisi page rank yang bagus dan bersifat dofollow.

• Backlink dari situs/blog dengan domain .gov .org dan .edu

Search engine google dipercaya sangat menyukai backlink dari situs-situs yang berdomain .gov .org dan .edu. Wajar saja google sangat menyukai backlink dari situs situs berdomain tersebut karena untuk mendapatkannya lumayan sulit.

• Backlink dari web directory

Hampir sama dengan mendapatkan backlink dari social bookmarking, hanya perbedaannya terletak pada mendapatkan backlink dari web directory cukup dengan memasukan url blog atau url feed blog yang anda kelola.

• Backlink dari artikel directory

Cara mendapatkan backlink dari artikel directory adalah dengan cara membuat artikel yang bermanfaat dan berkualitas dan selanjutnya artikel tersebut submit ke situs artikel directory.

• Backlink dari blogwalking

Blogwalking merupakan kunjungan anda kepada blog-blog lainnya. tidak hanya mengunjungi saja tetapi juga meninggalkan komentar yang baik yang disertai link aktif pada artikel blog yang anda kunjungi. Hanya mengingatkan saja cara ini jangan sampai anda lakukan secara membabi buta karena bisa dianggap spam oleh google.

• Backlink dari cara menjadi guest blogger 

Mendapatkan backlink dari cara ini anda bisa menjadi salah satu penulis artikel pada blog atau situs yang sudah populer yang tentu saja atas persetujuan pemilik situs atau pemilik blog tersebut sehingga nantinya pada bagian biografi anda bisa memasang backlink untuk blog yang anda kelola. Selain backlink yang anda dapatkan cara ini juga bisa mendatangkan tambahan visitor untuk blog anda.

• Backlink dari signature forum

Apabila anda merupakan member dari suatu forum maka pasanglah link blog anda pada signature sehingga apabila anda memposting post pada suatu trit di forum maka anda mendapatkan backlink dari forum tersebut.

Masih banyak cara untuk mendapatkan backlink berkualitas sedikit dulu yang bisa saya sampaikan yang terpenting dalam mendapatkan backlink jangan sampai hal yang anda lakukan dianggap spam sehingga merugikan pada blog yang anda kelola karena bisa berujung banned dari google.

Itulah kiranya ulasan tentang pengertian backlink, jenis, fungsi dan manfaatnya serta cara mendapatkannya semoga bisa membantu menjawab pertanyaan seperti yang saya sampaikan diatas dan semoga bermanfaat...

    

Read more »

Cara Membuat dan Memasang Generator Kode Warna di Blog

Cara Membuat Kode Warna di Blog. Bagi anda yang suka mengutak atik, mengedit atau mendesain dan memodifikasi template web atau template blog pastinya tidak asing dengan yang namanya kode warna.

Sedangkan untuk penerapannya masing-masing warna mempunyai kode-kode tersendiri dan kode-kode inilah yang diletakan pada template blog maupun situs. Selain itu fungsi dari kode warna ini adalah bisa mempercantik tampilan web atau tampilan blog.

Kode warna HTML biasanya digunakan untuk warna line atau garis, warna huruf, warna border, warna background, warna kotak dan warna yang lainnya. Untuk memodifikasi tampilan blog disarankan untuk tidak memakai warna warna yang terang karena bisa menyilaukan mata pengunjung yang datang ke blog kita.

Warna warna yang terang bisa digunakan untuk elemen elemen tertentu misalnya untuk warna kotak button atau bisa juga diterapkan pada menu. Pilihlah warna warna yang user friendly contohnya warna biru, hijau dan warna gelap yang lainnya yang tidak menyiluakan mata.

Nah, untuk lebih jelasnya mengenai macam-macam warna, anda bisa memasang generatornya pada blog dengan 2 cara sebagai berikut:

• cara pertama

Pada bagian ketika menulis artikel atau post ganti ke mode HTML bukan pada mode Compose dan masukan kode dibawah

<center>
<div style="text-align: center;">
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /> <param value="http://www.2createawebsite.com/build/col.swf" name="movie" /> <param value="high" name="quality" /> <param value="#ffffff" name="bgcolor" /> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div>
</center>

maka seperti ini hasilnya

• cara kedua

Apabila anda masih bingung dengan cara generator kode warna yang pertama tadi diatas, anda bisa mencoba memasang generator warna yang ke dua dan cara pemasangannya di blog pun sama seperti cara pemasangan yang pertama yaitu dengan cara pada penulisan artikel atau post rubah dulu dari mode Compose ke mode HTML dan masukan kode dibawah

<center>
<div style="text-align: center;">
<object getflashplayer="" go="" http:="" type="application/x-shockwave-flash pluginspage=" www.macromedia.com="">
<a href="http://www.blogger.com/null" name="colorgenerator"></a>                      
<param name="movie" value="http://www.2createawebsite.com/build/color.swf">
<param name="quality"value="High"><embed src="http://www.2createawebsite.com/build/color.swf"  name="obj1" quality="High" height="485" width="485">
</embed></object></div>
</center>

dan hasil generator warnanya adalah seperti ini

Tips cara untuk mengetahui warna yang ada pada blog

Jika anda ingin mengetahui apa kode kode warna yang ada pada template blog anda atau ingin mengikuti warna yang ada pada blog orang lain. Bisa dilakukan dengan cara :

1. silahkan arahkan cursor mouse anda ke elemen warna yang akan dilihat kodenya
2. klik kanan mouse anda dan pilih inspect element
3. dan akan terlihat kode warnanya yang diawali oleh tanda "#"

silahkan anda copy atau ganti sesuai dengan yang anda inginkan

Nah cukup mudah kan membuat dan memasang generator warna pada blog, selamat mencoba dan berkreasi dengan warna warna untuk mempercantik tampilan blog anda. Untuk kurang lebihnya saya mohon maaf dan semoga bermanfaat.

Read more »

Cara Menghilangkan dan Menghapus Tanda Obeng dan Tang di Blog

Cara Menghilangkan dan Menghapus Tanda Obeng dan Tang di Blog. Pada biasanya kita melihat tanda obeng dan tang yang ada pada blog di tiap sudut widget, apalagi blog baru yang memakai template standar yang kita pilih pada waktu pertama kali membuat blog tanda obeng dan tang banyak bertebaran ditiap sudut widget sehingga sangat tidak enak untuk dilihat.

Tanda obeng dan tang atau bisa juga disebut icon quickedit bukan merupakan masalah bahkan sebenarnya berfungsi mempermudah untuk mengedit apa yang ingin kita edit pada widget atau gadget blog secara langsung pada halaman ataupun postingan blog tanpa harus keluar dari situ, hanya saja apabila ada pengunjung mengunjungi blog kita blog kita jadi kelihatan kurang rapih karena banyaknya icon obeng dan tang yang bertebaran dimana-mana tersebut.

Nah, dalam hal ini terdapat cara untuk menghilangkan icon obeng dan tang atau icon quickedit pada blog sehingga tampilan blog menjadi rapi dan enak dilihat oleh pengunjung. Caranya adalah sebagai berikut: 

• log in ke akun blogger anda
• lalu klik menu template dan klik edit HTML
• cari kode ]]></b:skin> (biar lebih cepat dalam pencarian gunakan ctrl+F)
• selanjutnya copy kode ini 

.quickedit{display:none;} 

• dan pastekan tepat diatas kode ]]></b:skin> yang tadi anda cari
• save dan lihat hasilnya tampikan blog akan lebih rapi

Sekian cara menghilangkan dan menghapus tanda obeng dan tang atau menghapus icon quickedit, semoga membantu dan bermanfaat.

Read more »