TUTORIAL

Trend 2015

Minggu, Januari 13

Membuat Widget Label dalam Scrolbar

Hallo sobat blogger...pada posting sebelumnya saya sudah share membuat menu breadcrumbs yang dapat terindeks google, hari saya akan share Membuat Widget Label dalam Scrolbar.
Dalam blog yang memuat banyak widget biasanya akan memakan tempat yang makin panjang pada side blog. Namun hal ini bisa diatasi dengan cara meringkas isi/konten dalam widget tersebut ke dalam sebuah kotak scrol bar. Dengan demikian anda tidak harus menghilangkan suatu widget karena dianggap penting, tetapi tampilan side blog anda tetap menarik.
Label atau kategori bawaan blogger tidak dikemas dalam suatu border, karenanya tampilannya tidak menarik, dan semakin banyak label posting anda maka daftarnya akan semakin memanjang ke bawah. Untuk itu sangat pas jika label dikemas dalam suatu border, dalam kotak scrolbar.
Jika anda berminat untuk mengemas Label dalam kotak scrolbar ikuti langkah sederhana berikut ini:
1. Login ke blogger
2. Klik Template >>Edit Html >>klik Expand widget templates
3. Cari kode Kategori atau Label, dan temukan kode-kode berikut:
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2>data:title/></h2>
    </b:if>
    <div class='widget-conten'> 
4. Tambahkan perintah --> style='overflow:auto; height:200px' pada kode warna biru, sehingga menjadi :
    <b:includable='idmain'>
    <b:if cond='data:title'>
    <h2>data:title/></h2>
    </b:if>
    <div class='widget-conten' style='overflow:auto; height:200px'> 
angka 200 bisa anda ganti sesuai dengan tempat atau keinginan anda.
5. Klik preview/ pratinjau, sudah bagus dan tanpa eroor klik simpan template.
Demikian sharing tentang membuat widget label dalam scrolbar, semoga berguna bagi anda.   
 
Baca Selengkapnya

Minggu, Januari 6

Membuat Breadcrumbs Terindeks Google

Membuat Breadcrumbs terindeks google. Banyak cara yang perlu dilakukan oleh para blogger agar Blog yang dikelolanya makin disayang oleh Eyang Google. Menurut para master SEO salah satu yang efektif adalah dengan cara membuat breadcrumbs yang cepat terindeks google.
Breadcrumbs adalah penunjuk halaman blog yang sedang dibuka, berupa link horizontal yang berurutan dari Home >> label >> judul posting/ judul halaman yang sedang dibuka. Breadcrumbs pada umumnya terletak di atas posting.

Fungsi Breadcrumbs

Breadcrumbs berfungsi mempermudah pengunjung menemumakan lokasi halaman web/blog dan kembali ke awal halaman (home page) dengan mudah. Membuat breadcrumbs berarti menyediakan fitur one click acses ke level halaman blog diatasnya dan menghindarkan pengunjung tersesat ke halaman yang sebenarnya tidak ingin dibukanya.Selain itu memasang breadcrumbs juga sangat membantu SEO blog karena dapat mempercepat postingan terindeks google. Tampilan di halaman pencarian google, bagi blog pemasang breadcrumbs juga akan sedikti berbeda. Coba lihat screenshot berikut;



Cara Memasang Breadcrumbs

1. Login ke blogger >> Template >> Edit Html
    (lebih baik back up dulu template untuk menghindari kesalahan)
2. Centang kotak Expand  widget templates
3. Cari kode : <b:includable id='main' var='top'> gunakan CTRL + F untuk mempermudah.
4. Ganti kode : <b:includable id='main' var='top'> dengan kode berikut 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'/>


5. Cari kode :  ]]></b:skin>
6. Kopi 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. Jika anda ragu, coba klik Pratinjau dulu
8. Sudah tidak ada masalah klik Simpan Template.
Nah inilah screenshot di halaman pencarian google beberapa menit setelah artikel ini saya publis.

Ok, breadcrumbs anda siap terindeks google, dan  mudah-mudahan akan membantu  blog anda tampil di halaman pertama pencarian google.  Salam bloger.


 
Baca Selengkapnya

blogger templates | Make Money Online