MIRZA NOTES: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Rabu, 06 Maret 2013

5 Tips Mencari Inspirasi Untuk Menulis Artikel

Tips Mencari Inspirasi Untuk Menulis Artikel - Hai sahabat, selamat malam, pagi, siang sore bagi yang sedang membaca! Ngeblog itu memang mengasyikan ya, bisa bikin lupa waktu. Apa lagi jika kita sedang mendapatkan inspirasi untuk menulis artikel. Tapi bagaimana jika kita sedang tidak memiliki inspirasi untuk menulis? Biasanya apa yang anda lakukan? Kalau saya sih biasanya lebih memilih diam dan vakum ngeblog dulu untuk sementara heheh. Eiitss tapi itu dulu lho, sebelum saya tahu tips untuk mengatasi minim inspirasi hehe. Kalau sekarang sudah tidak lagi karena saya punya tips untuk mengatasinya. Penasaran apa saja? Ok kita lanjut baca!

1. Blog Walking

Ini adalah tips pertama untuk mengatasi masalah minim inspirasi, karena dengan blogwalking kita dapat menemukan hal baru yang sebelumnya belum kita ketahui.Sehingga kita dapat membuat artikel dengan tema yang sama tapi ingat jangan copas hehe!

2. Membaca Buku

Selain dapat menjadi sumber inspirasi, dengan membaca buku kita juga dapat melatih keterampilan menulis. Mengapa? Karena biasanya orang-orang yang menulis buku adalah orang-orang yang jenius sehingga kita dapat mengetahui bagaimana cara mereka menyampaikan ide-ide mereka dalam buku tersebut

3. Pergi Ke Luar Rumah

Mungkin cara ini dapat dicoba ketika otak anda sudah mentok gak bisa lagi diajak mikir, ya sebaiknya anda refres otak dulu dengan cara pergi keluar rumah dan melihat keadaan disekitar tempat tinggal anda, siapa tahu ada cewek cantik yang lewat haha kan lumayan, bener gak?

4. Melakukan Wawancara

Selain keempat cara yang telah saya sebutkan sebelumnya, kita juga dapat mewawancarai nara sumber. Misalnya mewawancarai para wirausahawan untuk mengetahu kiat-kiat menjadi orang sukses dsb.

5. Menerjemahkan Artikel dari Blog Luar Negeri

Nah, kalau cara ini lebih cocok dicoba untuk para blogger yang mempunyai blog dengan niche blogging / SEO. Cara ini sangat mudah dilakukan, kita dapat menerjemahkan artikel yang berbahasa ingris / yang lainnya dengan menggunakan google translate. Nah, sisanya tinggal kita revisi sehingg dapat menjadi artikel yang menarik untuk di baca.

Demikianlah 5 Tips Mencari Inspirasi Untuk Menulis Artikel yang dapat saya sampaikan. Mohon maaf untuk segala kekurangannya, entah dalam segi penyampaian atau pun yang lainnya. Walaupaun sederhana tapi mudah-mudahan dapat memberikan manfaat. Terimakasih

Minggu, 03 Maret 2013

Cara Memasang Recent Posts Dengan Thumbnail di Blog

Memasang Recent Posts Dengan Thumbnail - atau widget artikel terbaru, merupakan salah satu widget yang sangat penting untuk membantu meningkatkan jumlah page view blog. Mengapa? karena widget tersebut dapat menampilkan link-link yang menuju ke beberapa artikel yang terakhir yang telah kita buat jadi pengunjung blog dapat mengetahui mana artikel terakhir yang kita buat. Pada artikel sebelumnya saya telah membahas bagaimana cara membuat / memasang widget recent post berdasarkan label atau kategori.

Ok, bagi sobat yang penasaran ingin tahu bagaimana tampilannya, anda dapat melihat gambar dibawah ini :

Cara Memasang Recent Posts Dengan Thumbnail di Blog

DEMO

Bagaimana, kerenkan? ok bagi anda yang tertarik untuk memasang widget ini, silahkan ikuti beberapa langkah membuat / memasang widget recent post dibawah ini :

1. Silahkan login ke blogger
2. kemudian klik "Layout --> Add a Gadget --> HTML / Javascript"
3. selanjutnya copy-paste kode script dibawah ini kedalam kota isian HTML/Javascript!

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.zicblogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Keterangan :

Ganti kode zicblogger dengan alamat
Untuk mengatur jumlah artikel yang akan ditampilkan, silahkan ganti kode 5.

4. Klik tombol Save.

5. Selesai.Selamat anda telah berhasil memasang widget recent posts di blog!

Bagaimana mudah bukan? ok selamat mencoba! Mungkin hanya ini yang dapat saya sampaikan kali ini, untuk kurang dan lebihnya mohon dimaafkan. Terimaksih

Baca artikel menarik lainnya :

Rabu, 27 Februari 2013

Cara Memasang Threaded Comment Paling Keren di Blog

Cara Memasang Threaded Comment Paling Keren di Blog - hai sahabat blogger, bagaimana kabarnya? semoga anda selalu berada dalam keadaan yang super, sesuper pagi hari ini, amiin. Pada kesempatan kali ini kita akan membahas hal-hal yang berkaitan dengan tutorial blog yaitu mengenai bagaimana cara memasang fitur threaded comment di blog. Tapi sebelum kita membahas lebih jauh, mari kita cari tahu dulu apa yang dimaksud dengan threaded comment!

Apa itu threaded comment?

Theaded comment yaitu fitur komentar / form komentar yang lebih interaktif yang fungsi utamanya adalah untuk memudahkan admin dan pengunjung blog dalam membalas komentar yang masuk ke blog dengan fitur Reply-nya, yang jika anda gunakan, komentar balasan anda tidak akan masuk menjadi komentar paling akhir di dalam postingan itu, melainkan akan muncul tepat dibawah komentar yang ingin anda balas. Bingung ya? dari pada bingung mending langsung saja lihat gambar dibawah ini :

Bagaimana, sekarang anda sudah tahukan, apa itu threaded comment? bagaimana apakah anda juga berminat untuk memasangnya di blog anda? Jika jawaban anda ya, silahkan ikutli beberapa langkah mudah memsang fitur threaded comment pada blog dibawah ini :

Langkah Pertama | Mengaktifkan Fitur Threaded Comment

1. Login ke akun blogger

2. Klik "Template"

3. Lalu klik "Edit HTML"

4. Setelah itu centang pada :

Expand Widget Templates

5. Kemudian cari kode script berikut ini :

<b:include data='post' name='comments'/>

biasanya anda akan menemukan 4 kode semacam ini,

6. Jika kode pada langkah no.5 sudah ditemukan, selanjutnya ganti semua kode tersebut dengan kode dibawah ini :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

7. Jika sudah, silahkan simpan template!

Sampai disini fitur threaded comment pada blog anda sudah aktif, selanjutnya tinggal merubah tampilan dari threaded comment tersebut. Untuk lebih jelasnya, mari kita lanjut baca!

Langkah Kedua | Memodifikasi Tampilan Threaded Comment di Blog!

1. Silahkan login ke akun blogger

2. Klik menu "Template"

3. Lalu klik "Edit HTML"

4. Kemudian cari kode berikut ini :

]]></b:skin>

5. kemudian anda letakkan kode dibawah ini tepat dibawah kode pada langkah no.4 :

/*------------- START Blogger Threaded Comments -------------*/
    .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;
    }
    .comments .comments-content {
    font-size: 12px;
    margin-bottom: 16px;
    font-weight: normal;
    text-align:left;
    line-height: 1.4em;
    }
    .comments .comment .comment-actions a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comment .comment-actions a:hover {
    text-decoration: none; background:#fff; border:1px solid #5AB1E2;
    }
    .comments .comments-content .comment-thread ol {
      list-style-type: none;
      padding: 0;
      text-align: none;
    }
    .comments .comments-content .inline-thread {
      padding: 0.5em 1em;
    }
    .comments .comments-content .comment-thread {
      margin: 8px 0px;
    }
    .comments .comments-content .comment-thread:empty {
      display: none;
    }
    .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 40px;   font-size:12px; background:#EBF5FE;
    }
    .comments .comments-content .comment {
      margin-bottom:16px;
      padding-bottom:8px;

    }
    .comments .comments-content .comment:first-child {
      padding-top:16px;
    }
    .comments .comments-content .comment:last-child {
      border-bottom:0;
      padding-bottom:0;
    }
    .comments .comments-content .comment-body {
      position:relative;
    }
    .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
    }
    .comments .comments-content .user a {
    color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
    }
    .comments .comments-content .icon.blog-author {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin: 0 0 -4px 6px;
    }
    .comments .comments-content .datetime {
    color: #999999;
    float: right;
    font-size: 11px;
    text-decoration: none;
    }
    .comments .comments-content,
    .comments .comments-content .comment-content {
      margin:0 0 8px;
    }

    .comment-header {background-color: #F4F4F4;
        border: thin solid #E6E6E6;
        margin-bottom: 5px;
        padding: 5px;
    }
    .comments .comments-content .comment-content {
      text-align:none;
    }
    .comments .comments-content .owner-actions {
      position:absolute;
      right:0;
      top:0;
    }
    .comments .comments-replybox {
      border: none;
      height: 250px;
      width: 100%;
    }
    .comments .comment-replybox-single {
      margin-top: 5px;
      margin-left: 48px;
    }
    .comments .comment-replybox-thread {
      margin-top: 5px;
    }
    .comments .comments-content .loadmore a {
      display: block;
      padding: 10px 16px;
      text-align: center;
    }
    .comments .thread-toggle {
      cursor: pointer;
      display: inline-block;
    }
    .comments .continue {
      cursor: pointer;
    }
    .comments .continue a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comments-content .loadmore {
      cursor: pointer;
      max-height: 3em;
      margin-top: 3em;
    }
    .comments .comments-content .loadmore.loaded {
      max-height: 0px;
      opacity: 0;
      overflow: hidden;
    }
    .comments .thread-chrome.thread-collapsed {
      display: none;
    }
    .comments .thread-toggle {
      display: inline-block;
    }
    .comments .thread-toggle .thread-arrow {
      display: inline-block;
      height: 6px;
      width: 7px;
      overflow: visible;
      margin: 0.3em;
      padding-right: 4px;
    }
    .comments .thread-expanded .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    }
    .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
    border: 1px solid #DDDDDD;}
    .comments .avatar-image-container img {
      width: 36px;
    }
    .comments .comment-block {
      margin-left: 48px;
      position: relative;
    }

    /* Responsive styles. */
    @media screen and (max-device-width: 480px) {
      .comments .comments-content .comment-replies {
        margin-left: 0;
      }
    }

    /*------------- End of Blogger Threaded Comments -------------*/

6. Terakhir, simpan template! dan lihat hasilnya.

Jika anda melakukan semua langkah dengan benar, maka seharusnya sekarang anda sudah berhasil memasang fitur threaded comment di blog anda. Tapi terkadang walaupun sudah melakukan langkah ini dengan benar, tidak semuanya akan berhasil, karena biasanya tidak semua kode script blog sama, ada yang sudah dimodif oleh pembuat templatenya. Tapi tenang jika anda mengalami masalah, anda dapat membaca artikel selanjutnya tentang bagaimana cara memperbaiki fitur threaded comment di blog.

Demikian yang dapat saya sampaikan mengenai Cara Memasang Threaded Comment Paling Keren di Blog. Untuk kurang dan lebihnya mohon dimaafkan, semoga artikel ini dapat memeberikan manfaat. Terimakasih

Baca juga artikel menarik lainnya :

Inilah 3 Template Blog SEO Friendly Terbaik 2013
Cara Memasang Share Button (Facebook, twitter, google plus, linkedin dll.) di Blog
Cara Membuat Tombol Share Melayang di Blog
Cara Buat / Memasang Sharing Button di Bawah Postingan Blog
Daftar Blog Dofollow Auto Approve Comment Terbaru 2013

Senin, 25 Februari 2013

Cara Submit Blog ke Bing Webmastertool Dengan Mudah

cara submit blog ke bing webmastertool - hai sahabat blogger, bagaimana kabarnya? Mudah-mudahan selalu dalam keadaan yang super hehe ( ngikut gaya Pak Mario ). Masih ingatkah anda dengan artikel saya sebelumnya tentang Cara Mendaftarkan Blog ke Google Webmastertool? nah, artikel ini adalah artikel lanjutan dari artikel tersebut. Jika pada artikel sebelumnya saya telah membahas bagaimana cara mendaftarkan blog ke google webmastertool, maka dalam artikel kali ini saya akan mencoba menjelaskan cara mendaftarkan blog ke bing webmastertool.

Mempunyai blog / website yang memiliki banyak pengunjung adalah dambaan bagi setiap blogger, terlebih lagi bagi blogger yang ingin menjadikan blognya sebagai media untuk mendapatkan penghasilan tambahan. Agar blog kita mempunyai banyak pengunjung tentu saja kita harus mempromosikan blog kita, tapi ada hal yang harus anda ketahui bahwa ada teknik dasar SEO yang tak kalah pentingnya dengan mempromosikan blog ke berbagai web directory ataupun social bookmark. Apakah itu? Yup betul sekali, mendaftarkan atau mensubmit blog ke berbagai seach engine, dan salah satunya adalah mendaftarkan blog ke bing webmastertool. Ingin tahu bagaimana caranya? Ok silahkan langsung saja ikuti langkah-langkah berikut ini :

Langkah Pertama | Mendapatkan Kode Meta Tag Bing Webmastertool

1. Pertama anda harus mempunyai akun window live. Tapi jika anda belum punya,anda bisa membuatnya terlebih dahulu dengan cara mendaftar di : www.signup.live.com/signup.aspx

2. Jika sudah, silahkan kunjungi dan login di : www.bing.com/toolbox/webmaster dengan menggunakan akun window live yang telah anda buat tadi

3. Kemudian klik menu "My Site"

4. Kemudian masukan alamat blog / website anda misalnya, http://sharelagi.blogspot.com kemudian klik "Add" :

5. Selanjutnya silahkan masukan URL / alat blog dan sitemap blog anda,caranya adalah sebagai berikut :

misalnya alamat blog anda adalah : http://sharelagi.blogspot.com
Jadi untuk alamat sitemapnya adalah : http://sharelagi.blogspot.com/sitemap.xml

Lalu klik "Add" Untuk lebih jelasnya silahkan lihat gambar dibawah ini :

6. Kemudian anda akan diminta untuk memverfikasi akun blog pada bing webmaster. Silahkan anda pilih metode yang ada inginkan. Tapi disini saya menyarankan agar anda menggunakan cara ke dua yaitu dengan cara meletakan kode meta tag pada template blog, kita. Berikut caranya :

Anda akan mendapatkan kode meta tag, contoh kode meta tag punya saya :

<meta name="msvalidate.01" content="EE9888BCBFA8D27D1627C4F171C7872E" />

untuk lebih jelasnya silahkan lihat gambar dibawah ini :

Untuk langkah pertama, saya anggap sudah selesai, tapi ingat jangan dulu ditutup biarkan saja halaman bing webmastertool tetap terbuka pada browser anda. Ok, mari kita lanjut ke langkah selanjutnya!

Langkah Kedua | Memasang kode meta tag pada blog

1. Login ke akun blogger
2. Kemudian klik template
3. Lalu klik "Edit HTML"
4. Kemudian cari kode :

<head>

5. Selanjutnya anda copy kode meta tag yang sudah anda dapatkan tadi, lalu letakan di bawah kode <head>!

misalnya :
..................
<head>

<meta name="msvalidate.01" content="EE9888BCBFA8D27D1627C4F171C7872E" />
..................

6. Kemudian simpan template anda.

Langkah memasang kode meta tag pada blog sudah selesai, sekarang kita lanjut ke langkah selanjutnya yaitu memverifikasi blog di Bing Webmastertool.

7. Kita kembali ke bing webmastertool, kemudian klik tombol "Verify"

8. Jika anda melakukan langkah-langkah diatas dengan benar, seharusnya ini sudah selesai

Bagaimana, mudah bukan? tugas saya untuk menjelaskan sudah selesai, sekarang giliran anda untuk mencoba. Saya sudah berusaha menjelaskan semampu saya, tapi jika masih terdapat hal-hal yang belum anda fahami, silahkan tanyakan kembali. Jangan malu untuk bertanya, mumpung saya belum jadi artis jadi masih gratis hahah :P

Demikian penjelsan tentang bagaimana cara submit blog ke bing webmastertool. Walaupun artikel ini memiliki banyak kekurangan misalnya dalam segi penyampaian, tapi mudah-mudahan dapat memberikan manfaat bagi kita semua. Terimakasih

Baca artikel menarik lainnya :

Rahasia Meningkatkan Alexa Rank Dengan Cepat!
Cara Agar Postingan Cepat Terindex Google
Membuat Navigasi Breadcrumbs Terindex Google
Cara Memasang Navigasi Breadcrumbs di Blog
Cara Cepat Mendapatkan Page Rank Terbaru
Meta Tag SEO Friendly Valid HTML 5 ( Update! )
Cara Mengetahui Blog Dofollow Nofollow dengan Mozila Firefox
Dofollow Blog List Terbaru 2013
Cara Merubah Blog Nofollow jadi Dofollow
Mendaftarkan Blog ke Google Webmaster
Memasang Rating Bintang Rich Snippet pada hasil SERP
Apa dan manfaat Melakukan Ping!
Tips Memilih Template Blog SEO Friendly
Cara Membuat Link SEO Friendly
Tips Memilih Nama Domain Blog / Website!
Apa dan Manfaat SEO?
Inilah 3 Template Blog SEO Friendly Terbaik 2013
Daftar Blog Dofollow Indonesia Auto Approve Terbaru 2013
3 Optimasi SEO Yang Sering Terlupakan! Cara Memasang Widget Share Button di Blog ( Facebook, twitter, google+ dll )

Kamis, 17 Januari 2013

Membuat Navigasi Breadcrumbs Terindex Google

Membuat Navigasi Breadcrumbs Terindex Google | Selamat pagi sahabat blogger, setelah pada artikel sebelumnya saya telah menjelaskan bagaimana cara memasang navigasi breadcrumbs di blog, maka pada kesempatan ini saya akan menjelaskan bagaimana cara membuat navigasi breadcrumbs terindex google. Bagi anda yang belum mengetahui apa itu navigasi breadcrumbs, anda dapat membaca artikel sebelumnya tentang "Apa itu Navigasi Breadcrumbs dan Apa Fungsinya".

Membuat Navigasi Breadcrumbs Terindex Google

Maksud dari Membuat Navigasi Breadcrumbs Terindex Google yaitu agar navigasi breadcrumbs yang ada di blog kita dapat diindex oleh search engine dan dapat kita lihat pada hasil penelusuran google, selain itu dengan membuat navigasi breadcrumbs terindex google juga dapat mempersingkat url postngan pada hasil SERP Google. Untuk lebih jelasnya, anda dapat melihat gambar dibawah ini :

Contoh Navigasi Breadcrumbs Yang Sudah Terindex Google!

Bagaimana, apakah anda sudah faham dengan yang dimaksud navigasi breadcrumbs terindex google? Saya anggap anda sudah mengerti apa yang saya maksud. Sekarang saya akan menjelaskan bagaimana cara membuat navigasi breadcrumbs agar bisa terndex oleh google. Silahkan ikuti langkah-langkah membuat navigasi breadcrumbs agar terindex google berikut ini :

Langkah-langkah membuat navigasi breadcrumbs terindex google :

Untuk mencegah sesuatu yang tidak diinginkan, sebaiknya backup terlebih dahulu template anda! dan jika sebelumnya anda sudah pernah memasang navigasi breadcrumbs, sebaiknya dihapus dulu!

1. Login ke blogger

2. Klik "Template"

3. Kemudian klik "Edit HTML"

4. Lalu berikan tanda centang pada :

Expand Template Widget

5. Kemudian cari kode berikut :

]]></b:skin>

Tekan tombol CTRL + F Untuk mempermudah pencarian

6. 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;}

7. Kemudian cari kode berikut :

<b:includable id='main' var='top'>

Tekan tombol CTRL + F Untuk mempermudah pencarian

8. 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 == "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"'>

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

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

8. Kemudian simpan tempalte.

Membuat Navigasi Breadcrumbs Terindex Google

Selesai, dan navigasi breadcrumbs anda akan terindex google. Untuk membuktikannya silahkan anda membuat postingan baru dan berikan label yang sudah terindex google.

Demikian artikel tentang bagaimana cara Membuat Navigasi Breadcrumbs Terindex Google. Semoga artikel ini bermanfaat. Terimakasih

Cara Memasang Navigasi Breadcrumbs di Blog

Cara Membuat Navigasi Breadcrumbs di Blog - Jika kita membicarakan hal seputar blog dan SEO, memang tidak akan ada habisnya ya, dulu saya kira dalam blogging itu kita hanya perlu menulis artikel, ternyata saya salah, yang namananya kegiatan blogging ternyata tidak bisa dipisahkan dengan apa yang dinakan SEO. Apa itu SEO? anda dapat membaca artikel yang tentang "Apa itu SEO dan Apa Manfaatnya?". Ok, kita kembali ke pokok pembahasan, sebelum kita membahas bagaimana cara Membuat Navigasi Breadcrumbs di blog, disini saya akan menjelaskan pengertian atau definisi navigasi breadcrumbs itu sendiri.

Apa itu Navigasi Breadcrumbs?

Navigas breadcrumbs merupakan suatu navigasi atau petunjuk arah berbentuk internal link yang dapat mempermudah pengunjung dalam mengetahui dimana letak suatu konten blog/website. Navigasi breadcrumbs biasanya terletak diatas atau dibawah judul postingan / artikel. Biasanya urutan navigasi breadcrumbs akan dimulai dari Home, misalnya :

Home >> Nama Label / Kategori >> Judul Artikel / Postingan

Misalnya saya mempunyai artikel yang berjudul "Cara Cepat Mendapatkan Page Rank Terbaru", dan saya memaskan artikel tersebut kedalam kategori "Tips SEO" maka navigasi breadcrumbs yang terbentuk adalah sebagai berikut :

Cara Memasang Navigasi Breadcrumbs di Blog

Fungsi Navigasi Breadcrumbs?

Navigasi breadcrumbs berfungsi untuk mempermudah pengunjung dalam mengetahui posisi atau letak suatu konten atau artikel pada suatu blog. Navigasi breadcrumbs juga dapat mempermudah search engine dalam mengindex konten / artikel yang ada di blog kita.

Cara Memasang Navigasi Breadcrums

Bagaimana apakah anda tertarik untuk memasang navigasi breadcrums? jika jawabannya ya, silahkan anda ikuti beberapa langkah mudah memasang navigasi breadcrumbs di blog :

1. Login ke akun blogger
2. Klik "Template"
3. Kemudian "Edit HTML"
4. kemudian centang pada :

Expand Template Widget

5. Silahkan copy kode dibawah ini :

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

6. Lalu letakan diatas kode berikut :

]]></b:skin>

7. Kemudian simpan template

8. Selanjutnya anda copy kode dibawah ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
You are Here > <a expr:href='data:blog.homepageUrl'>Home</a> >
<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>
</b:if> > <data:post.title/>
</div>
</b:if>
</b:if>

9. Letak kode tadi tepat dibawah kode berikut :

<b:includable id='post' var='post'>

10. Kemudian simpan template dan selesai. :)

Demikian artikel [+] Cara Memasang Navigasi Breadcrumbs di Blog [+], semoga artikel ini dapat bermanfaat dan jika ada hal yang belum anda fahami, silahkan tanyakan kembali melalui form komentar. Terimakasih

Note :

Ini adalah cara memasang navigasi breadcrumbs standar, dan jika anda ingin mengetahui bagaimana cara membuat navigasi breadcrumbs yang langsung terindex google, jangan lupa untuk selalu mengunjungi blog ini. Karena saya akan menjelaskannya pada artikel selanjutnya.

Baca juga artikel menarik lainnya :

Rabu, 16 Januari 2013

Memasang Widget Google+ Dengan Javascript | Tutorial Blog

Memasang Widget Google+ Dengan Javascript - Selamat pagi sahabat blogger, setelah pada kesempatan sebelumnya saya membuat artikel mengenai Cara Cepat Mendapatkan Page Rank, maka pada kesempatan ini saya akan menjelaskan bagaimana cara Memasang Widget Google+ dengan Javascript. Berbeda halnya dengan jika kita memasang widget google+ melalui add widget pada dashboard yang cenderung agak berat dalam loading, memasang widget google+ dengan javascript akan lebih ringan pada saat loading blog.

Memasang Widget Google+ Dengan Javascript | Tutorial Blog

Memasang Widget Google+ dengan menggunakan javascript dapat menghemat ruang pada blog kita, karena kita bisa menyisipkan javascript tersebut ke dalam widget lain. Sebagai contohnya anda dapat melihat widget "Join & Get Free Article" yang terletak di sidebar sebelah kanan blog saya ini. Saya meletakan script google+ dibawah widget follower twitter. Bagaimana, apakah anda sudah mengerti dengan apa yang saya maksud? Ok saya anggap anda sudah mengerti dengan yang saya maksud.

Bagaimanakah cara memasang widget google+ agar lebih ringan? silahkan ikuti langkah-langkah memasang widget google+ dibawah ini :

1. Login ke akun blogger

2. Klik "Tata Letak"

3. Kemudian "Tambah Gadget"

4. Pilih "HTML / Javascript"

5. Lalu copy javascript dibawah ini :

<div class="g-plusone" data-size="medium"></div>

<script type="text/javascript">
window.___gcfg = {lang: 'id'};
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

5. Kemudian letakan / paste kode diatas kedalam kotak isian "HTML/Javascript", untuk lebih jelasnya, silahkanlihat gambar dibawah ini!

6. Kemudian simpan

Memasang Widget Google+ Dengan Javascript | Tutorial Blog

Bagaimana, mudah bukan sekarang tinggal giliran anda yang mencoba, hehe. Demikian cara Memasang Widget Google+ Dengan Javascript, mudah-mudahan dapat bermanfaat. Kurang dan lebihnya mohon dimaafkan, terimakasih.

Selasa, 15 Januari 2013

Cara Membuat Daftar Isi Blog Secara Otomatis

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger, setelah pada kesempatan sebelumnya saya sudah menulis artikel tetang bagaimana cara memasang "Meta Tag SEO Friendly Valid HTML5", maka pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :

DEMO

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Langkah-langkah memasang widget Daftar Isi di blog :

1. Login ke akun blogger

2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

Cara Membuat Daftar Isi Blog Secara Otomatis

Gambar 1.1

3. Kemudian pilih Mode HTML

http://zicblogger.blogspot.com/p/daftar-isi.html

4. Lalu copy kode script dibawah ini :

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://zicblogger.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </div>

Keterangan :

Ganti kode yang berwarna merah ( zicblogger ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,

Gambar 1.2

Keterangan gambar 1.2 :

1. Pilih mode HTML

2. Letakan kode pada halaman kosong

3. Berikan judul (terserah anda)

4. Klik "Publikasikan"

7. Selesai

Bagaimana, mudah bukan? Mungkin hanya itu yang dapat saya sampaikan, sekarang tingga anda yang mencoba mempraktekannya. Demikian artikel tentang bagaimana cara memasang daftar isi di blog secara otomatis. Walaupun artikel ini sederhana, tapi mudah-mudahan dapat bermanfaat. Terimakasih

Rabu, 02 Januari 2013

Cara Merubah Blog Nofollow jadi Dofollow

Cara Merubah Blog Nofollow jadi Dofollow!

Cara Merubah Blog Nofollow jadi Dofollow - Selamat pagi sahabat blogger, berhubung pada artikel sebelumnya saya membahas tentang "Apa dan manfaat blog dofollow" maka pada kesempatan kali ini saya akan mencoba menjelaskan cara-cara untuk mejadikan blog nofollow menjadi blog dofollow. Oleh karena itu, maka artikel ini dapat dikatakan sebagai artikel lanjutan dari artikel sebelumnya.

Mungkin anda sudah mengetahui apa itu blog dofollow, tapi bagi anda yang masih pemula seperti saya ini, anda dapat membaca artikel sebelumnya tentang Apa dan Manfaat Blog Dofollow. Karena dalam artikel tersebut saya sudah menjelaskan hal-hal berikut :

Apa itu blog dofollow
Apa Kekurangan Blog Dofollow
Apa kelebihan Blog Dofollow
Apa manfaat Blog Dofollow
dan hal-hal penting lainnya mengenai blog dofollow

Ok, kita kembali ke pokok permasalahan yang akan kita bahas kali ini, yaitu tentang bagaimana cara Merubah Blog Nofollow menjadi Blog Dofollow. Namun Sebelum anda merubah blog anda menjadi dofollow ada beberapa hal yang harus diperhatikan terlebih dahulu, untuk mengetahui apa saja hal-hal yang harus diperhatikan sebelum merubah blog menjadi blog dofollow, sebaikny anda baca postingan sebelumnya tentang "Apa itu blog dofollow dan manfaatnya?". Setelah anda yakin dengan prinsip anda, silahkan anda ikuti langkah-langkah merubah blog nofollow menjadi blog dofollow berikut ini :

Cara Merubah Blog Nofollow Menjadi Blog Dofollow 1:

1. Login ke akun blogger

2. Kemudian klik "Template"

3. Lalu klik "Edit HTML"

4. Silahkan centang pada :

Expand Template Widget

5. Selanjutnya anda cari kode berikut ini :

rel='nofollow'

Tekan CTRL + F untuk mempermudah pencarian

Anda akan menemukan beberapa kode tersebut.

5. Selanjutnya anda hapus semua kode yang berwarna merah tersebut, misalnya kode yang anda temukan adalah sebagai berikut:

<a expr:href='data:backlink.url' rel='nofollow'>

7. Maka kode yang harus anda hapus adalah kode rel='nofollow', Sehingga akan terlihat seperti berikut :

<a expr:href='data:backlink.url'>

8. Kemudian anda simpan template anda. Selesai!

Cara Merubah Blog Nofollow Menjadi Blog Dofollow 2:

1. Login ke akun blogger

2. Klik "Template --> Edit HTML"

3. Silahkan centang pada :

Expand Template Widget

4. Selanjutnya anda cari kode berikut ini :

rel='nofollow'

Tekan CTRL + F untuk mempermudah pencarian

Anda akan menemukan beberapa kode tersebut.

5. Kemudian anda ganti kode yang berwarna merah (nofollow) dengan kode "Dofollow", misalnya kode yang anda temukan adalah sebagai berikut :

<a expr:href='data:backlink.url' rel='nofollow'>

6. Setelah kode yang berwarna merah (nofollow) di ganti dengan kode "dofollow" maka akan terlihat seperti berikut :

<a expr:href='data:backlink.url' rel='dofollow'>

7. Kemudian simpan template anda. Selesai

Nah, itulah dua cara merubah blog nofollow jadi dofollow. Walaupun artikel ini sangat sederhana, tapi mudah-mudahan dapat bermanfaat bagi anda yang membutuhkan. Terimakasih.

Baca juga artikel menarik lainnya :