Membuat Label Dengan HTML

Apa kelebihan Membuat Label dengan HTML? Demi membuat valid HTML template, sekaligus membahas SEO Friendly, ternyata label di dalam blog kita mengandung masalah tentunya dengan SEO dan Validnya. Nah untuk menyikapi hal tersebut mari kita optimalkan blog kita dengan membuat label dengan HTML

Nah mari kita bahas satu persatu.

1. SEO

Untuk blogger kaitannya antara SEO dengan Label adalah jauh sekali. Saya baca di blognya juragan, bahwa memasang link label di postingan untuk masalah SEO adalah pekerjaan yang sia-sia. Nah hal ini cukup beralasan, lihat URL label di bawah ini :

http://sejutatrik.blogspot.com/search/label/SEO

di link label SEO di atas tidak akan saling berkaitan, karena label tersebut menggunakan search untuk menampilkan URL. Jika kita memasang url label, akan sia-sia. Maksudnya walaupun kita menaruh puluhan link label ke dalam posting, sampai kiamat gak akan saling berkaitan. Benar bukan?

2. Valid

Ternyata setelah saya cek di validator V3, masalah yang ditimbulkan untuk label adalah eror untuk & dan lain-lain. Coba perhatikan blognya hendro prayitno, deconstruction code, chilarsip, dll. Sebagian besar blog yang valid HTML5 tidak menaruh label dalam sidebar. Dengan kata lain blog yang valid HTML5 menggunakan Template 1 Kolom.

Nah sekarang kita ganti label bawaan blogger dengan HTML. Caranya cukup mudah yaitu mengganti navigasi di bagian Edit HTML menjadi Widget di sidebar.

Caranya cukup mudah, Silakan copas kode yang ada di bawah ini ke dalam Widget atau Add Element blog sobat.

<div id="tabs"> 
<ul> <li><a href="http://status-status-lucu.blogspot.com/"><span>Label 1</span></a></li> 
        <li><a href="http://status-status-lucu.blogspot.com/"><span>Label 2</span></a></li> 
        <li><a href="http://status-status-lucu.blogspot.com/"><span>Label 3</span></a></li> 
        <li><a href="http://status-status-lucu.blogspot.com/"><span>Label 4</span></a></li>
</ul> </div>

DEMO

Jika dirasa sudah berjalan sukses, hapus label bawaan blogspot.

Tidak semua template mendukung cara ini, silakan saja sesuaikan dengan menu di bagian edit HTML sobat masing-masing. Hasil label dengan HTML di atas masih sederhana dan efeknya tergantung bawaan template sobat blogger semua.

Nah semoga dengan membuat label dengan HTML bisa mengurangi error di blog sobat. Selamat berjuang!

Happy Blogging! by. Sejuta Trik Blogger

Membuat Label Menjadi 2 Kolom

Gambar di atas menunjukkan bahawa label ditampilkan menjadi 2 kolom. Nah tanpa basa basi, mari kita praktik Membuat label Menjadi 2 Kolom.

Jika di blog sudah ada labelnya, maka tinggal masuk ke html blog sobat. Setelah itu centang kotak kecilnya ya sob. Setelah itu cari kode ]]></b:skin>

Untuk mempermudah gunakan Ctrl+F atau F3 (jika sobat menggunakan mozilla firefox). Jika sudah paste kode ini diatas kode merah tersebut.

#Label1 li {
      float:left;
      width:45%;
}

Simpan deh! atau kalau tidak preview dulu hasil edit label sobat. 

Perlu diperhatikan nama label sobat. Mungkin nama label di atas bisa berbeda dengan nama label punya saya, untuk mengetahui nama label silakan sobat gunakan pencarian dengan Ctrl+F atau F3 dan ketik 'Label1' tanpa tanda petik, jika sama lanjutkan, jika beda silakan sobat ganti dengan nama label sobat.

Tidak semua template mendukung ID target li, serta perintah float, karena css template rata-rata disetting otomatis untuk banyak daftar list atau HTML li. Seperti kasus saya, dengan trik ini hanya merubah posisi daftar list label itu bukan lebar widget. Yang jelas saya sudah mencoba di blog saya yang lain dan berhasil. Untuk versi terbaru design responsive akan saya posting di kemudian hari.

Seperti itulah cara Membuat label menjadi 2 kolom. Semoga berhasil

Last Update : 24 September 2018

Menampilkan Judul Posting Pada Label dan Arsip

Dari judulnya saja Menampilkan Judul Posting Pada Label dan Arsip di atas sudah ketahuan maksudnya. Yap intinya kita hanya membuat Judul Posting Pada Label dan Arsip saja. Ini bertujuan untuk menghemat waktu loading blog kita untuk dijelajahi pengunjung. Sehingga blog kita mudah dan komplit untuk di pelajari.

OK langsung saja cara menampilkan Judul Posting Pada Label dan Arsip. Cara ini saya dapatkan dari blog bukan rahasia tapi sudah saya edit dengan penambahan title agar lebih SEO. Kata para master gitu gan.

Berikut cara Menampilkan Judul Posting Pada Label dan Arsip

1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.

2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)

3. Ganti dengan script ini:

<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--sejuta trik.blogspot.com-->

4. Save template HTML.
5. Tunggu ame bener2 loadingnya selesai lho gan,
6. Coba dicek hasilnya dengan klik salah satu label dan arsip



*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:

<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--sejuta trik.blogspot.com-->

*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:

 <!--Judul posting saja di arsip-->
 <b:if cond='data:blog.pageType == "archive"'>
    <h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></a></h3> 

<b:else/> 

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

</b:if> 

<!--sejuta trik.blogspot.com-->

-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Nah seperti itulah Cara Menampilkan Judul Posting Pada Label dan Arsip semoga berhasil dan bermanfaat!