Iklan Terbaru :
  • pasang iklan

Cara Agar Breadcrumbs Terindex Google

Selasa, 15 Mei 2012
Cara Agar Breadcrumbs Terindex Google - Sebelumnya saya telah berbagi tentang cara membuat navigasi breadcrumb, namun navigasi breadcrumb yang lama tidak terindex oleh google. Sebenarnya Tutorial ini sudah banyak yang share, namun karena ada teman yang bertanya tadi siang via facebook makanya dipostingkan di blog ini saja, agar bisa dilihat sama-sama :D
Seperti apa sih breadcrumbs yang bisa terindex oleh google itu ?lihat gambar dibawah ini..

breadcrumb terindex google

Yang saya lingkar berwarna merah itu adalah Navigasi Breadcrumb nya, berikut cara membuatnya.

Note : Jika sebelumnya sobat sudah memasang breadcrumb yang lama maka hapus dulu semua kode nya

1. Cari kode <b:includable id='main' var='top'> didalam template sobat

2. Kemudian hapus kode tersebut dan ganti dengan kode dibawah

<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> &#187; <span><data:blog.pageName/></
span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb untuk halaman posting -->
<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'><b:if cond='data:label.isLast == "true"'>
&#187; <span typeof='v:Breadcrumb'><a
expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:if> </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 == "archive"'>
<!-- breadcrumb untuk pencarian label dan arsip -->
<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 ==
"index"'>
<div class='breadcrumbs'><b:if cond='data:blog.pageName == ""'><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'/>

3. Kemudian cari lagi kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode tersebut

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

4. Simpan Template

Untuk mengecek apakah breadcrumbs nya bekerja atau tidak, silahkan sobat pergi ke Rich Snippets Testing Tool, kemudian masukkan URL postingan yang sudah terindex oleh google.

Nah, sekian dulu postingan Cara Agar Breadcrumbs Terindex Google. Silahkan dicoba dan semoga bermanfaat :D

Cara Membuat Artikel Terkait atau Related Posts

Senin, 14 Mei 2012
Cara Membuat Artikel Terkait atau Related Posts - Pada postingan kali ini membahas seputar Tutorial Blogspot yaitu cara membuat artikel terkait atau biasa juga disebut dengan related post. Selain Cara membuat navigasi breadcrumb, artikel terkait juga berguna untuk memudahkan pengunjung menjelajahi blog dan berperan penting terhadap SEO.

Tampilan artikel terkait ini hanya menampilkan judul-judul artikel yang berkaitan berdasarkan label dari sebuah artikel blog. Untuk contoh artikel terkait bisa sobat lihat dibawah setiap artikel blog ini, atau lihat gambar dibawah.

artikel terkait - related posts

Dan berikut cara membuat artikel terkait atau related post dibawah postingan :

1. Login pada akun blogger sobat

2. Klik 'Rancangan' kemudian klik 'Edit HTML'

3. Centang 'Expand Template Widgets'

4. Cari kode </head>

5. Letakkan kode dibawah ini tepat diatas kode nomor 4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts .widget {padding-left:5px;margin-bottom:10px;}
#related-posts .widget h2, #related-posts h2 {font-size:1.6em;font-weight:bold;color:#000;font-family:Arial, Verdana;margin-bottom:0.75em;margin-top:0em;padding-top:0em;}
#related-posts a {color:#;}
#related-posts a:hover {color:#;}
#related-posts ul {list-style-type:none;margin:6px 0 10px 12px;padding:0;text-decoration:none;font-size:13px;}
#related-posts ul li {list-style-type:none;margin-bottom:5px;padding-left:25px;padding-top:0;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnn-aCAd9WEd9meSMUhRdZuKR5U7dLD-6U-khRc0mzc981mu51tpwMV8zVlP5z7je51cPh7_9sETVsVuFT2TQTj6GAnnbaI0VabXdEYhjY9DYNdnkI2zizOD4-V2JB_IppmyA_eNXSp0s/s400/arrowbullet.png) no-repeat;}
</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://wandhy.googlecode.com/files/artikel-terkait-v2.js' type='text/javascript'/>
</b:if>

6. Tulisan 'Artikel Terkait' yang berwarna merah diatas merupakan judul artikel terkaitnya dan bisa diganti sesuai selera

7. Kemudian cari lagi kode <data:post.body/> jika terdapat 2 kode tersebut, maka letakkan kode dibawah ini tepat dibawah <data:post.body/> yang kedua

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=7;
removeRelatedDuplicates();
printRelatedLabels(&:quot;<data:post.url/>&quot;);
</script>
</div>

8. Tulisan 7 diatas merupakan jumlah artikel yang ditampilkan, bisa dirubah sesuai selera

9. Simpan template sobat

Sampai disini dulu tutorial saya kali ini tentang Cara Membuat Artikel Terkait atau Related Posts, silahkan dicoba dan semoga bermanfaat :D
Salam Blogger Mobile

Membuat Widget Melayang Ala Zoomtemplate

Kamis, 05 April 2012
Membuat Widget Melayang Ala Zoomtemplate - Widget melayang atau biasa sering disebut floating ini sekarang banyak digunakan para blogger untuk menghiasi blognya, tak hanya untuk memperindah tampilang blog. widget melayang ala zoomtemplate ini juga bisa dimanfaatkan untuk add bookmark sebuah artikel.
Ngomong-ngomong dah lama nggak update artikel dan hati dah kangen untuk posting lagi, pada kesempatan kali ini saya sebagai admin Blogger Mobile akan berbagi cara membuat widget melayang atau floating ala zoomtemplate yang bisa sobat lihat langsung demonya di zoomtemplate.com atau mytemplatezone.com dan widget seperti itu lah yang saya maksud.

Postingan ini pun sebagai permintaan dari sobat kita "aa Solah" yang berkomentar pada postingan saya (Launching MyTemplateZone Dot Com), sebelumnya saya minta maaf karna lama menuliskan tutorial ini. Itu dikarnakan kesibukan saya yang begitu padat didunia offline, update ini aja pada jam kerja :D

Baik, dari pada berlama-lama dan besok dah kerja pagi lagi berikut cara membuat widget melayang ala zoomtemplate :


  • Pertama masuk ke dashboard blogger
  • Klik 'Rancangan' >> lalu 'Edit HTML'
  • Jangan lupa centang 'Expand Template Widget'
  • Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
#bookmarks {width:27px;height:147px;background:url(http://1.bp.blogspot.com/-CqLAaEpG0zo/TtPBkye8yLI/AAAAAAAALlg/LtdnGSSnew8/s400/likezoom.png) no-repeat 0 0;position:fixed;top:210px;left:0px;border:1px solid #ddd;-moz-border-radius:0px 5px 5px 0px;-khtml-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px;} #bookmarks a {display:block;width:16px;height:14px;text-indent:-9999px;outline:none;margin:9px 0px 0px 5px;}
  • Setelah itu letakkan kode dibawah ini tepat diatas kode </body>
 <div id='bookmarks'>
<a class='feed' href='http://feedburner.google.com/fb/a/mailverify?uri=mytemplatezone' rel='nofollow' target='_blank' title='MyTemplateZone On Feed'>Feed</a>
<a class='facebook' href='http://www.facebook.com/mytemplatezone' rel='nofollow' target='_blank' title='MyTemplateZone On Facebook'>facebook</a>
<a class='twitter' href='http://twitter.com/mytemplatezone' rel='nofollow' target='_blank' title='MyTemplateZone On Twitter'>twitter</a>
<a class='friendfeed' href='http://friendfeed.com/' rel='nofollow' target='_blank' title='MyTemplateZone On FriendFeed'>friendfeed</a>
<a class='google plus' href='https://plus.google.com/105690597319049646819/' rel='nofollow' target='_blank' title='MyTemplateZone On Google+'>G+</a>
<a class='submit' href='http://www.mytemplatezone.com/2012/03/submit-templates.html' rel='nofollow' title='submit your templates for free'>Submit</a>
</div>
  • Terakhir 'SAVE' template sobat dan lihat hasilnya

Demikian tutorial saya kali ini tentang Membuat Widget Melayang Ala Zoomtemplate dan semoga bisa bermanfaat bagi teman-teman :D

Baca juga : Kucoba.com Tempat Add Bookmark jika sobat ingin membookmark artikel ini :)

Apa Itu Dummy Blog dan Manfaatnya

Kamis, 22 Maret 2012
Apa Itu Dummy Blog dan Manfaatnya - Artikel kali ini Blogger Mobile update tentang Apa Itu Dummy Blog dan Manfaatnya?, sebenarnya saya juga bingung apa itu blog dummy. Dan setelah membaca dari berbagai sumber akhirnya mengerti juga sedikit dengan blog dummy dan manfaatnya, berikut yang saya tau tentang Dummy Blog dan Manfaatnya. Cekidot...

Pengertian Dummy Blog :
Dummy Blog adalah suatu blog yang mendukung terhadap blog utama, kita bisa membuatnya dengan memanfaatkan blog gratis seperti Blogspot, WordPress, MyWapBlog dan lain-lain. Dengan menanamkan Backlink yang mengarah pada blog utama kita.

Manfaat Dummy Blog :
Manfaat Blog Dummy adalah mencari perhatian google bahwa banyak web/blog yang menuju ke blog kita, sehingga kemungkinan besar blog atau artikel kita akan berada pada posisi yang baik di search engine. Dari sekian banyak panduan SEO dari master, mereka juga berpendapat bahwa kita juga harus memperhatikan konten yang relevan dengan blog utama, PageRank dari blog dummy dan juga antara dummy blog yang satu dengan yang lainnya saling berkaitan dan mengarah pada blog utama.

Apa Itu Dummy Blog dan Manfaatnya
Mungkin itu saja ulasan saya kali ini tentang Apa Itu Dummy Blog dan Manfaatnya, dan jangan lupa untuk Add Bookmark artikel ini siapa tau bermanfaat dilain waktu.

Salam Blogger Mobile
Refferensi : Dari berbagai sumber

Cara Pasang Tombol Tweet di Setiap Postingan

Sabtu, 04 Februari 2012
Cara pasang tombol tweet di setiap postingan - Wah,.. Dah lama banget rasanya Blogger Mobile nggak posting artikel bingung juga mau ngepost tentang apa, tapi setelah melihat-lihat blog ini muncul lagi ide untuk ngepost. Dan kali ini tentang cara pasang tombol tweet di setiap postingan seperti yang ada di blog ini (lihat sebelah kanan judul artikel)

Tombol tweet ini berfungsi untuk mengirimkan artikel-artikel blog layaknya tombol-tombol socialbookmark seperti Facebook, Digg dll, dengan adanya tombol tweet ini pengunjung dapat dengan mudah menyebar/membagikan artikel yang di tweet ke dalam akun twitter mereka seperti halnya tombol facebook like (baca: Cara pasang tombol facebook like di blog). Contoh tombol tweet bisa dilihat pada gambar yang saya lingkar merah dibawah :

cara pasang tombol tweet di setiap postingan

Berikut cara pasang tombol tweet disamping judul artikel :
  • Seperti biasa login ke Blogger.com
  • Pergi ke Rancangan, klik Edit HTML dan jangan lupa centang 'Expand Template Widget'
  • Cari kode <data:post.title/> contoh :
  • <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if>
  • Kemudian copy-paste kode dibawah ini tepat dibawah kode </b:if>
  • <div style='float:right;padding:0 5px 5px 0;'> <script type='text/javascript'> tweetmeme_style = &#39;compact&#39;; tweetmeme_url = &#39;<data:post.url/>&#39;; tweetmeme_source = &#39;wandhyfals&#39;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script> </div>
  • Simpan template

Jika ingin tombol tweet dibawah artikel, sobat hanya meletakkan kode diatas tadi tepat dibawah kode <data:post.body/>. Bagi yang ngeblog via hp bisa mengcopy kode tweet-nya pada kolom dibawah :



Note : Ganti tulisan wandhyfals diatas dengan username twitter milik sobat, jika ingin tombol tweet berada disebelah kiri tinggal ganti tulisan right menjadi left. Dan jika ingin mengatur jaraknya ubah nilai padding nya.

Sampai disini saja artikel cara pasang tombol tweet di setiap postingan, silahkan dicoba dan semoga bermanfaat

Best Regards
Blogger Mobile
Ultrabook Notebook Tipis Harga Murah Terbaik

Cara Menampilkan Kode HTML Dalam Postingan

Rabu, 25 Januari 2012
Kode HTML
Cara menampilkan kode HTML dalam postingan - Bagi blogger yang membahas tentang tutorial blogspot, trik-trik yang berhubungan dengan kode HTML dan JavaScript tentu sangat memerlukan cara ini apalagi seperti saya yang hanya ngeblog via hp. Seperti pada postinan saya sebelumnya tentang Cara Membuat Navigasi Breadcrumb dan Cara Membuat Text Area, tutorial tersebut sangat membutuhkan kode HTML yang sangat banyak dan sangat melelahkan.

Nah, untuk cara menampilkan kode HTML dalam postingan ini ada 2 cara yaitu :

Cara pertama menggunakan layanan Tools online untuk Parse kode HTML, ini alamatnya :
  • http://www.blogcrowds.com/resources/parse_html.php
  • http://tools.bartiqy.org/convert-text-to-html-entities/

Caranya sangat gampang, sobat tinggal memasukkan kode yang ingin di parse kedalam kotak yang telah disediakan dari salah satu alamat diatas, kemudian klik PARSE

Cara kedua ini menggunakan cara manual yaitu kita memasukkan kode-kodenya secara manual didalam postingan blog, berikut kodenya :
  • < cara menulisnya &lt;
  • > cara menulisnya &gt;
  • " cara menulisnya &quot;
  • & cara menulisnya &amp;

Bagaimana, mudah kan ?
Sampai disini dulu postingan saya mengenai cara menampilkan kode HTML dalam postingan

Salam Blogger Mobile, semoga bermanfaat
Ultrabook Notebook Tipis Harga Murah Terbaik

Cara Membuat Text Area

Selasa, 24 Januari 2012
text area Cara membuat text area - Huh, . . Belum sampai dua minggu udah terasa lama rasanya tidak posting artikel, dan setelah melihat alexa blog ini ternyata terkejut juga dengan datanya, akhirnya malam ini saya menyempatkan diri untuk posting artikel blog. Soalnya siang hari udah kerja lagi. Hehehe
Oke, postingan kali ini biasa-biasa saja yaitu cara membuat text area, mungkin sobat Blogger Mobile udah pada tahu apa itu text area, tapi yang masih newbie kan mungkin belum tahu. Hehehe

Apa itu Text Area ?

Text area adalah sebuah kotak atau bingkai yang dibuat untuk menyimpan tulisan atau kode-kode HTML yang ingin ditampilkan terpisah dari halaman posting tempat menerbitkan sebuah artikel.
Bagi blogger yang ngeblog via hp seperti saya ini tentu saja sangat membutuhkan text area ini untuk mempermudah dalam hal copy-paste kode HTML. Text area juga terdiri dari bermacam-macam bentuk, dari yang biasa sampai yang luar biasa (wah ada juga ya yang luar biasa ?) hehehe...

Berikut cara membuat text area :

Text area biasa



Kodenya :
    <textarea name='code' rows='5' cols='10'>Tuliskan kode HTML disini</textarea>

Text area dengan tombol highlight


Kodenya :
    <div><form name='copy'><div align='center'><input onclick='javascript:this.form.txt.focus();this.form.txt.select();' type='button' value='Copy Semua'></div><div align='center'></div><p align='center'><textarea style='width:200px;height:100px;' name='text' rows='100' wrap='virtual' cols='200'>Tuliskan kode HTML disini</textarea></p></div></form>

Text area dengan background



Kodenya :
    <textarea rows='10' cols='8' style='background:#cccccc;color:#ff0000;'>Tuliskan kode HTML disini</textarea>

Text area password



Kodenya :
    <input type='password' value='Tuliskan kode HTML disini'>

Text area garis putus-putus



Kodenya :
    <textarea rows='8' cols='10' style='border:1px dashed;'>Tuliskan kode HTML disini>

Keterangan :
Tuliskan kode HTML disini = Tulisan yang ingin ditampilkan didalam kotak text area
Copy Semua = Tulisan yang ingin ditampilkan pada tombol highlight
Background = Warna latar belakang kotak text area
Color = Warna tulisan di kotak text area
Border = Garis pinggir kotak text area
Dashed = Garis putus-putus
Rows = Tinggi kotak text area
Cols = Lebar kotak text area

Nah, mungkin segitu saja tutorial blogspot yang saya share kali ini tentang cara membuat text area. Jika sobat mengerti dengan kode HTML mungkin bisa dimodifikasi lagi tampilan text area nya !

Salam Blogger Mobile
Ultrabook Notebook Tipis Harga Murah Terbaik

Cara Pasang Tombol Facebook Like di Blog

Minggu, 22 Januari 2012
facebook like Cara pasang tombol facebook like di blog - Pada Tutorial Blogspot kali ini saya akan posting tentang cara pasang tombol facebook like di blog, selain mempercantik tampilan blog, tombol facebook like ini juga berfungsi untuk promosi blog. Sebab, jika ada pengguna facebook yang Like postingan atau blog kita maka secara otomatis postingan tersebut akan muncul kedalam profil pengguna facebook tersebut.

Berikut kode Facebook Like nya :

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden;'/>

  • Masuk ke blogger.com, klik Rancangan, pilih edit HTML dan centang 'Expand Template Widget'
  • Jika ingin menampilkan tombol facebook like dibawah postingan letakkan dibawah kode <data:post.body/>
  • Jika ingin diatas postingan letakkan saja kodenya diatas <data:post.body/>
  • Tapi bagi sobat yang ingin menampilkannya pada halaman depan (homepage) tinggal menambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> lihat contoh dibawah :
  • <b:if cond='data:blog.url == data:blog.homepageUrl'> Letakkan kode Facebook Like disini </b:if>
  • Jika sudah sempurna, Simpan template

Note : Tulisan standard diatas bisa diganti dengan button_count

Sekian dulu artikel cara pasang tombol facebook like di blog dan jangan lupa kasi Like juga artikel ini
Ultrabook Notebook Tipis Harga Murah Terbaik

Tag Heading Blogspot Yang SEO Friendly

Jumat, 13 Januari 2012
Kembali Belajar SEO Blogspot, dan kali ini tentang Tag Heading Blogspot Yang SEO Friendly, pada template blogspot sebenarnya struktur Tag Heading ini sudah tertanam. Namun, struktur-struktur tag heading tersebut masih acak-acakan atau masih tidak terletak pada tempat yang seharusnya. Menurut para master/pakar SEO mengungkapkan bahwa struktur tag heading yang disukai google adalah tag h1 untuk title/judul blog dan hanya satu, tag h2 untuk title/judul postingan kemudian dilanjutkan tag h3 untuk widget blog.

Susunan tag heading yang benar adalah salah satu cara membuat blog yang seo friendly, dan tentu saja dengan susunan yang benar blog akan dengan mudah dibaca oleh google. Untuk mengecek seperti apa susunan tag heading pada template sebelum dan sesudah dirubah, kita dapat mengeceknya melalui http://www.serchengineoptimisation.co.uk/seo-tools/h-tag-and-alt-tag-checker.htm

Berikut cara merubah struktur tag heading blogspot yang seo friendly :
  • Seperti biasa masuk ke blogger.com klik rancangan, edit HTML, dan jangan lupa centang 'Expand Template Widget'
  • Cari kode dibawah ini dalam template sobat
  • <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3>
  • Seharusnya judul/title posting menggunakan tag h2, jadi ubahlah tag h3 menjadi h2
  • Lalu cari lagi kode dibawah ini
  • <h3 class='mobile-index-title entry-title'> <data:post.title/> </h3>
  • Sama seperti diatas tadi, ganti tag h3 menjadi h2
  • Lanjutkan cari kode dibawah ini
  • <!- only display title if it's non-empty -> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if>
  • Ubah tag h2 menjadi h3, mungkin masing-masing template memiliki widget yang banyak atau sedikit, jika ada 4 widget maka kode tersebut akan ada 4, maka cari ke-4 kode tersebut dan ganti semuanya dengan h3

Note : Kode pada setiap template mungkin berbeda-beda, jadi tinggal disesuaikan saja pada masing-masing template.

Setelah menyusun tag heading blogspot yang seo friendly diatas, maka struktur tag heading telah tersusun pada tempatnya masing-masing. Jadi sampai disini dulu artikel saya kali ini. Semoga bermanfaat.

Salam Blogger Mobile

Ultrabook Notebook Tipis Harga Murah Terbaik

Cara Pasang Google Plus Page Badge di Blog

Minggu, 08 Januari 2012
google plus
Cara Pasang Google Plus Page Badge di Blog - Jika sebelumnya saya sudah posting tentang Cara membuat halaman di Google Plus, maka sekarang waktunya mempromosikan halaman G+ sobat dari blog sobat sendiri.

Nggak usah panjang lebar dech, langsung saja menuju TKP. Berikut cara pasang google plus page badge di blog :

1. Login terlebih dahulu ke akun Google+ sobat di https://plus.google.com

2. Klik halaman Google+ yang telah dibuat sebelumnya

Goole-Page-Blogger-Mobile

3. Copy ID Google+ Page sobat, contoh ID G+ Page punya Blogger Mobile (101357416272352129341)

ID Goole Page Blogger Mobile

4. Simpan dulu kode dibawah ini :

<g:plus href="https://plus.google.com/101357416272352129341" size="badge"></g:plus>

5. Masuk ke blogger klik Rancangan, klik Tambah Gadget dan pilih HTML/JavaScript

Tambah Gadget

6. Masukkan kode diatas tadi kedalam kotak yang telah disediakan dan klik Simpan

Save Code

7. Masih dalam menu Rancangan, klik Edit HTML, centang 'Expand Template Widget' dan cari letakkan kode dibawah ini tepat diatas kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"/>

8. Terakhir klik Simpan Template

Note : Ganti tulisan berwarna biru diatas dengan ID G+ Page milik sobat.
Dan tulisan berwarna merah bisa diganti dengan smallbadge

Contoh Google Plus Page Badge Blogger Mobile bisa dilihat disidebar (atas widget Fans Page Facebook)

Sekian postingan saya kali ini tentang cara pasang google plus page badge di blog semoga bermanfaat

Salam Blogger Mobile

Cara Membuat Navigasi Breadcrumb

Kamis, 05 Januari 2012
navigasi breadcrumb
Cara membuat navigasi breadcrumb - Masih tentang tutorial blogspot, kali ini Blogmob ingin share tentang cara membuat navigasi breadcrumb

Navigasi Breadcrumb merupakan salah satu plugin milik WordPress yang berfungsi untuk memudahkan pembaca dalam menelusuri sebuah halaman blog, jadi ibarat sitemap atau peta di dalam blog.
Selain dapat memudahkan pembaca dalam mengetahui lokasi yang sedang di telusuri, plugin ini juga berperan penting dalam optimasi search engine (SEO).

Berikut langkah-langkah memasang navigasi breadcrumb :

1. Langsung tuju blogger.com
2. Masuk ke Rancangan dan klik Edit HTML
3. Centang 'Expand Template Widgets'
4. Cari kode <b:if cond='data:post.title'>
5. Kemudian letakkan kode berikut dibawah kode yang diatas
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> &#187; </b:if> <data:post.title/></div></b:if>
6. Selanjutnya cari kode ]]></b:skin>
7. Letakkan kode CSS berikut tepat diatas kode ]]></b:skin>
.breadcrumb {padding:5px 5px 5px 0px; margin:0px 0px 10px 0px; font-size:90%; line-height:1.2em; border-bottom:2px double #e6e4e3;}
8. Save/Simpan dan lihat hasilnya

Selamat mencoba dan semoga bermanfaat terutama bagi yang sedang belajar ngeblog.

Note : kode pada setiap template mungkin berbeda-beda, jadi silahkan disesuaikan saja kode diatas pada template masing-masing.

Salam Blogger Mobile

Cara Membuat Meta Tag yang SEO Friendly

Minggu, 01 Januari 2012
Meta Tag
Di awal tahun 2012 ini Blogger Mobile ingin share tentang cara membuat meta tag yang seo friendly, sebenarnya postingan ini sudah banyak yang nulis bahkan sudah bertebaran di search engine. Walaupun sudah banyak yang share tentang postingan tersebut, nggak ada salahnya saya bahas kembali postingan tersebut, selain berguna untuk yang sedang belajar ngeblog, berguna juga untuk saya sendiri yang lagi belajar seo blogspot

Manfaat Meta Tag
Meta Tag berguna untuk mempermudah mesin pencari meng-index sebuah web/blog. Selain itu juga, Meta Tag berperan penting untuk optimasi optimasi SEO onpage.

Menurut saya begitu lah kiri-kira manfaat Meta Tag, lalu untuk cara membuat meta tag yang seo friendly adalah sebagai berikut :
  • Login ke Blogger.com
  • Klik Rancangan
  • Klik Edit HTML
  • Centang "Expand Template Widget"
  • Cari kode <title><data:blog.Title/></title> kemudian ganti dengan kode dibawah ini :
  • <b:if cond='data:blog.url == data:blog.homepageUrl'> <title><data:blog.Title/></title> <meta content='di isi dengan deskripsi blog sobat' name='description'/> <meta content='di isi dengan keyword blog sobat' name='keywords'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> | <data:blog.Title/></title> <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='description'/> <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='keywords'/> </b:if> <meta content='index, follow' name='robots'/> <meta content='all' name='spiders'/>
  • Klik Save/Simpan
Nb: Ganti tulisan berwarna merah dengan deskripsi dan keyword blog sobat.

Selamat mencoba, semoga bermanfaat
Salam Blogger Mobile

Cara Mendaftar Domain Gratis CU.CC

Jumat, 30 September 2011
Setelah saya blogwalking-blogwalking, ternyata ada informasi bagus buat teman-teman blogger terutama yang dulunya memakai domain CO.CC yang sekarang sudah deindex oleh google sekarang ada alternatifnya yaitu  Domain Gratis CU.CC. Menurut hasil blogwalking saya ke forum luar dan website luar Domain Gratis .cu.cc prospek kedepannya akan bagus di search engine.
Mumpung masih baru buruan buat domain banyak-banyak dengan nama yang bagus pasti bisa.
Ok buat sobat yang ingin mendaftar silahkan klik banner di bawah ini.

1.Klik banner di atas untuk menuju halaman registrasi.
2.Masukan nama domain yang di inginkan kemudian "check availabilty"

Karena masih baru domain 5 digit dengan nama cantik aja masih bisa
3. Pada domain option pilih "register 2 years", kemudian "Checkout"4.setelah itu sobat akan di bawah ke halaman input data registrasi. Isikan data-data sobat
Note : pada box street/number isikan alamat kurang dari 100 karakter tanpa tanda titik dan koma (. dan ,), jika semua sudah lengkap klik "create account".
5.Kemudian akan di bawa kehalaman verification, cek di inbox / spam email sobat kemudian copas key verificationnya pada box tersebut, kemudian klik "verify Action Key"
6.Terakhir klik "Finish Registration"
untuk setting domain .cu.cc ke blogspot akan di bahas pada postingan selanjutya.

Membuat Navbar Auto Hidden

Selasa, 27 September 2011
Nah kali ini saya akan menjelaskan tentang cara membauat navabar blog auto hidden, atau sekalian dengan membuat navbar transparan. jika di template Sobat navabar sudah hilang silahkan kembalikan dulu dengan membaca atikel disini. Karena saya pernah dengar rumor soal penghapuasn blog oleh Blogger karena tidak memasang navbar di blog tersebut.
Nah sekarang jika sudah ada navbarnya saya akan memberikan langkah-langkan untuk membuat Navbar Auto Hidden, caranaya mudah sekali ikuti langkah berikut ini :

Kode navabar :

#navbar-iframe {
height:0px; visibility:hidden; display:none }



  1. Login ke akun Blogger
  2. Klik Tata Letak / Layout Klik tab Edit HTML Agar mengantisipasi terjadi kesalahan backup dulu template sobat dengan cara klik downlod lengkap template
  3. Cari kode body { , Biar mudah cari dengan kotak penacari tekan F3 atau ctrl F masukan saja kode yang mau dicari tadiLetakan kode di bawah ini di atas kode body {

    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
    FinishedOpacity=100)}
  4. Klik Save

Cara membuat reply komentar blogspot

Selasa, 30 Agustus 2011
BlogHipniRohman - Cara membuat fungsi reply komentar pada blogspot. Sebelum lupa saya posting saja tentang Cara Menambah Reply Komentar Blogger. Fasilitas Reply di kolom komentar wordpress memang mudah karena sudah disediakan, tapi untuk yang berplatform Blogspot. musti sedikit merubah kode templatenya dulu, tapi caranya terbilang mudah. Fasilitas Reply ini berguna untuk menjawab komentar dari temen secara cepat tinggal klik tombol Replynya seperti pada komentar di BlogHipniRohman ini.

Inilah Cara membuat fungsi Reply di Komentar Blogger / Blogspot :

1.  Masuk ke Blogger / Dashboard, lalu pilih New Post / Posting Baru
2.  Lihat Nomor Blog ID sobat pada address bar atas, Contoh 5338424461967xxxxxx, kemudian copas /catat Nomor ID Blognya  dan simpan dulu di notepad atau dimana saja.


3. Setelah Blog ID di dapat, baru pilih Design, lalu Edit HTML
4. Centang dulu Expand Widget Template
5. Cari kode seperti ini : <data:commentPostedByMsg/> (untuk memudahkan mencarinya pake aja Ctrl+F kemudian copas kode ini di kotak yg telah disediakan)
6. Copas kode dibawah ini setelah kode yang no.5 tersebut (simpan dibawah kode no.5).

      <span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NOMOR-BLOG-ID-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

7. Ganti  NOMOR BLOG ID ANDA dengan nomor ID Sobat pada No. 2 diatas
8. Kalau  mau merubah tampila n Replynya, bisa merubah di kode Style nya.
9. Selesai … jangan lupa Save Template nya ya..,  (Sumber : saungweb.blogspot.com)
Selamat mencoba Cara Menambah Reply Komentar pada blogspot, semoga bermanfaat!!!




Cara membuat kategori / label blogspot

Senin, 29 Agustus 2011
BlogHipniRohman - Cara membuat kategori / label blogspot. Label adalah pengelompokkan postingan dalam kategori. Bisanya jika dalam penulisan kita selalu mengkategorikan postingan kita dalam beberapa kelompok. Misalnya judul pada postingan ini yaitu cara membuat kategoti / label, kemudian saya kelompokkan postingan ini ke dalam beberapa kategori yaitu kategori "tutorial blogspot".
Ok tidak panjang lebar langsung saja kita ke TeKaPe....
1.  Silahkan Login ke blogger dengan username dan pasword kamu;
2.  Klik tab "Rancangan" (tata letak)
3.  Klik "Elemen halaman"
4.  Kemudian klik "tambah gadget"
5.  Cari "Label" lalu klik
6.  Lalu akan ada tampilan halaman seperti di bawah ini : 
7.  Setelah itu klik "Simpan". Ok tahap pertama sudah selesai sekarang kita lanjutkan...
Selanjutnya agar pengkategorian dalam blog bisa tampil, kita harus mengisi setiap postingan pada blog kita dengan kategori sesuai dengan tag-nya caranya yaitu.dengan mengisi Kotak Label pada setiap form postingan blog kita sesuai dengan kategori yang kita inginkan sepeti ini :
Bagi blog yang sudah mempunyai banyak postingan terpaksa harus mengedit satu persatu postingannya dengan mengisikan kategori / label sesuai dengan tag nya.
Ok selesai...
semoga bermanfaat!!!



Cara membuat artikel terkait pada blogspot

Sabtu, 27 Agustus 2011
Cara membuat artikel terkait pada blogspot. Untuk membuat artikel terkait atau related post, kita akan sedikit mengotak-atik kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini. Buat yang belum faham tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).


Artikel terkait atau related post itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya cara membuat artikel terkait :
  1. Login ke Blogger.

  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

  4. Kemudian klik Expand Template Widgets .

  5. Cari kode yang seperti ini :<p><data:post.body/></p> atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut : <data:post.body/>

  6. Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.

  7. Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama. 




Kemudian langkah terakhir dalam membuat artikel terkait adalah klik Save template.
Selesai semoga bermanfaat.
(sumber : Miscah.blogspot.com)




Mengubah Blog Nofollow Menjadi Blog Dofollow

Kamis, 25 Agustus 2011
Sebenarnya apa sih nofollow dan dofollow itu ? dan kenapa banyak orang yang berkomentar di blog dofollow? sedikit pertanyaan yang cukup ribet dan membuat pusing kepala. Dari hasil survey, ternyata blog dofollow mendatangkan komentar yang lebih banyak ketimbang blog nofollow. Nah, sudah kebayang kan yang saya maksud, jadi blog dofollow artinya blog yang memberikan backlink oneway terhadap si pemberi komentar di blog kita.

Maksudnya backlink oneway adalah jika kita berkomentar pada blog yang dofollow, secara otomatis blog kita akan mendapat link balik dari empunya blog secara cuma-cuma dan juga akan membuat blog kita cepat terindeks oleh mesin pencari.

Dengan meninggalkan komentar di blog yang dofollow berarti sama saja kita mempromosikan blog kita. Lihat saja blog-blog yang sudah terkenal yang mempunyai page rank tinggi, disana terlihat puluhan komentar setiap postingannya. Memang ada juga yang enggan mengubah blognya menjadi dofollow dan tetap memakai nofollow mungkin semata - mata untuk menghindari link keluar lebih banyak.


Mau merubah menjadi dofollow? berikut langkah-langkahnya.
  1. Login ke Blogger dengan ID sobat.

  2. Klik Tata Letak.

  3. Klik Edit HTML, jangan lupa backup dahulu template sobat dengan mengklik Download Template Lengkap.

  4. Contreng Expand Template Widget

  5. Cari kode yang seperti ini :

    <a expr:href='data:comment.authorUrl' rel="nofollow">
    <data:comment.author/></a>


  6. Kemudian ganti menjadi seperti berikut ini :

    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>


  7. Jika bingung, klik saja Ctrl+F dan ketik kata nofollow.

  8. Kemudian hapus tulisan rel="nofollow" yang ada di template sobat.

  9. Save Template.


Sipp sekarang blog sobat sudah menjadi dofollow, tinggal percantik blog dan perbanyak postingan agar banyak yang berkomentar di blog sobat.

Cara Cepat Dan Mudah Memasang Tombol Google +1

Rabu, 24 Agustus 2011
Saya tidak perlu menjelaskan apa itu tombol Tombol Google +1 karena telah saya posting sebelumnya pada artikel  Apa Itu Google Plus dan perlu sobat ketahui bahwa sebenarnya Tombol Google +1 sudah lama muncul dan salah satu tabloid komputer (Kompute*) sudah pernah membahasnya. buat yang mungkin belum tahu silakan gugling. langsung saja berikut caranya :

Klik link berikut ini » http://www.google.com/webmasters/+1/button/index.html
Login » klik Rancangan » Edit HTML » centang Expand Widget Templates
Kalau sudah cari code seperti ini » <div class='post-header-line-1'/> untuk pencarian cepat gunakan Ctrl+F » Kalau sudah ketemu copy codenya (Tombol Google +1 ) dan letakkan tepat dibawah code yang saya beri warna merah (<div class='post-header-line-1'/>)
Contoh » 
<!-- Place this tag in your head or just before your close body tag -->
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;id&#39;}
</script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='small'/>


Save dan lihat hasilnya.
Selamat mencoba dan semoga bermanfaat terima kasih

Daftar Blog Dofollow 2011

Blog dofollow merupakan blog yang banyak dicari oleh para
pemburu backlink apalagi sekarang lagi maraknya kontes seo. Untuk mempermudah mencari blog dofollow saya merepost daftar blog dofollow 2011 dari blognya Roqib's Blog. Langsung saja di bawah ini daftar blog dofollow 2011 PR tinggi terbaru :

PR 5
http://harry.sufehmi.com
http://subagya.blogspot.com

PR 4
http://redeagle21.blogspot.com
http://rizky2009.blogspot.com
http://ruang-ihsan.blogspot.com
http://semuadablog.blogspot.com

PR 3
http://abdulroqib.blogspot.com
http://abidinblog.blogspot.com
http://adegustiann.blogsome.com
http://www.ad4msan.com
http://abulamedia.com
http://afifamru.blogspot.com
http://beha-titi.blogspot.com
http://bloggenre.blogspot.com
http://cafebisnis.com
http://cah-cikrik.blogspot.com
http://cendrawasih11.blogspot.com
http://ch4kim.blogspot.com
http://devit1104.blogspot.com
http://e-je.blogspot.com
http://eosmate.blogspot.com
http://handokotantra.com
http://id.latuminggi.com
http://indrowicahyo.blogspot.com
http://infokomp2008.blogspot.com
http://jemput-rizki.blogspot.com
http://jombloku.blogspot.com
http://kerjakeras.com
http://kurnia-one75.blogspot.com
http://kursusblog-smansapati.blogspot.com
http://liat-liat-aku.blogspot.com
http://linktea.blogspot.com
http://manekutau.blogspot.com
http://marsudiyanto.blogspot.com
http://www.mr-mung.com
http://mu-ri.blogspot.com
http://nuansapena.blogspot.com
http://numb3rblog.blogspot.com
http://www.sectoredwin.net
http://sekitarkita.info
http://www.seosaint.co.cc
http://rayzahome.blogspot.com
http://tomipurba.net
http://uvebana.com
http://vulkanisir.info
http://1001peluang-bisnis.blogspot.com

PR 2
http://adabisnis.com/
http://ahyari.com/
http://www.dudioke.co.cc
http://aurakeyboard.blogspot.com/
http://azkahikari.blogspot.com/
http://bisnis-inter-net.com/
http://blogheboh.blogspot.com/
http://blogsukadi.blogspot.com/
http://cariuangtambahan.blogspot.com/
http://dukundigital.blogspot.com/
http://hanyainfo.blogspot.com/
http://hputih.blogspot.com/
http://jembelisme.blogspot.com/
http://jingga.web.id/
http://komunitaskami.com/
http://mradhi.com/
http://muliardybanun-online.com/
http://nuansapena.blogspot.com/
http://penghuni60.blogspot.com/
http://penyo.web.id/
http://pinrangworld.blogspot.com
http://poetramahardika.blogspot.com/
http://ratnarespati.com/
http://ravatar.blogspot.com/
http://red-gear.blogspot.com/
http://riasmaja.blogspot.com/
http://ristizona.blogspot.com/
http://www.rumah-blogger.com/
http://filegratis2u.blogspot.com/
http://sastraculun.blogspot.com/
http://sebuaharti.blogspot.com/
http://sony_kuda.blogspot.com/
http://www.tutorialblogging.co.cc/

PR 1
http://aliyusrie.com
http://etalaseblog.blogspot.com
http://bagaswaras.co.cc
http://manajemenemosi.blogspot.com
http://tidaro.blogspot.com

PR 0
http://www.alhijradwitiya.com/
http://andreasandre.net/
http://www.blogbudiarjo.co.cc/
http://danu.web.id/
http://www.djumtks.co.cc
http://julicavero.com/
http://kampusblog.com/
http://miaswari.blogspot.com/
http://miz-hl.blogspot.com/
http://modifblogmu.blogspot.com/
http://www.tergaptek.com/
http://top-rekomendasi.blogspot.com/
http://top73.blogspot.com/
http://yanconx.blogspot.com/
http://zentainment.co.cc/

Itu saja yang bisa saya berikan, selamat mencoba !