SEO Blogger | Google Adsense

Menampilkan Judul Posting Pada Label dan Arsip

uki Monday, June 06, 2011 Label No comments

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!

Cara Membuat Breadcrumb

uki Monday, June 06, 2011 SEO No comments

Saat mencari tutorial SEO Blogger, ada yang mengharuskan Membuat Breadcrumb di Blog, Nah setelah dicari-cari ternyata ketemu, tapi saat mencari gambar, kan penasaran kalau tidak ada gambarnya, eh malah nemu kaya gambar di atas. Ternyata Breadcrumb ada juga selain trik blogger. Malah makanan, hi hi hi, baru tau, 

Sebenarnya apasih breadcrumb? saya sendiri belum begitu paham arti dan fungsi breadcrumb itu sendiri. Penting apa gak sih breadcrumb ini bagi blogger? Kalau saya sendiri breadcrumb ini tidak terlalu penting bagi blog, karna hanya menunjukkan urut-urutan dimana artikel kita berada. Sebagai contoh home, (label blog kita) trus halaman posting. Gak penting kan, Tapi kata master2, breadcrumb ini sangat penting untuk menunjang SEO blog kita agar lebih enak di akses oleh google atau search engine lain.

Ada banyak cara membuat breadcrum ini, baik silakan pilih saja dari 2 cara berikut :

# Cara pertama

1. Login ke blogger.com

2. Klik Tata Letak.

3. Pilih tab Edit HTML

4. Click Download Full Template and

please back up your template first.

5. Kemudian beri tanda centang

pada kotak kecil di samping

tulisan Expand Template Widget.

6. Silahkan cari kode ]]></b:skin>

7. Copy lalu paste kode di bawah

ini persis di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}

8. Silahkan cari kode berikut pada

template anda :

<div class='post hentry uncustomized-post-template'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>
 
10. Kemudian Save Template.

# Cara Kedua

Cara ini yang paling simpel :

Cari kode 

<b:if cond='data:post.title'> (dan semoga ada, He)

Lalu tambahkan kode berikut, tepat dibawahnya kode tadi

<b:if cond='data:blog.pageType == "item"'>
<a href='http://buwel.blogspot.com/'>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/>
</b:if>

Dan tinggal ganti alamat http://buwel.blogspot.com diatas dengan alamat blog anda
trus klik simpan templet dan selesai.

Nah, seperti itu Cara Membuat Breadcrumb, semoga bermanfaat

Thanks to :

http://abdulroqib.blogspot.com/2009/11/cara-membuat-breadcrumb-navigation.html

http://cah-cikrik.blogspot.com/2010/04/cara-membuat-navigasi-breadcrumb-versi.html

Mengubah Ukuran Font Header Blogger

uki Sunday, June 05, 2011 Header 7 comments

Mengubah Ukuran Font Header Blogger berikut adalah mengubah tanpa menambah dari google font, hanya mengganti atau mengubah ukurannya saja. Namun bagi yang ingin mengubah font header blogger dengan font khusus web, silakan mencari di gugel, ketik google font.

Ok gak usah lama lama, langsung aj cari kode yang seperti ini :

#header h1 { 

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Rubah variabel text-transform sesuai keinginan. 

- uppercase = huruf besar semua

- lowercase = huruf kecil semua

- atau normal

Simpan template. 

Catatan: 

- Untuk merubah cara penulisan deskripsi blog, cari dan rubah kode text-transform pada baris kode berikut:

    #header .description {

    margin:0 5px 5px;

    padding:0 20px 15px;

    max-width:700px;

    text-transform:uppercase;

    letter-spacing:.2em;

    line-height: 1.4em;

    font: $descriptionfont;

    color: $descriptioncolor;

    }

- Untuk memudahkan pencarian baris kode, gunakan “kotak pencari”, tekan  Ctrl + F,  lalu ketikan baris kode yang dicari dan tekan enter. Browser yang  digunakan disini adalah Internet Explorer (IE). Untuk browser lain,  “kotak pencari” letaknya sedikit berbeda.

Thanks to : asal ngelog.net 

Membuat Widget Multi Tab View

uki Monday, May 30, 2011 Widget 1 comment

Membuat widget multi tab view keren di blogspot 2019 kini semakin mudah dan praktis. Anda tinggal memasukkan kode HTML dan CSS saja murni tanpa javascript yang memberatkan loading blogspot. Multi tab view digunakan untuk meminimalkan tampilan blogspot dan penempatan layout lebih dinamis dan tepat sasaran.

Tampilan widget multi tab view responsive akan terlihat seperti berikut :

Codepen Dribbble Stack Overflow

Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.

Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.

Bagaimana? Anda tertarik untuk membuatnya? Mari kita bahas! Widget multi tab view digunakan untuk optimasi halaman blog. Dengan cara ini halaman akan terlihat rapi dan memaksimalkan ruang yang ada. Sebagai bukti widget ini seo friendly yaitu dengan penambahan jumlah kunjungan dengan memasukkan widget berisi link-link menuju halaman posting saya.


<div class='bodytab'>
<div class='all'>
<div class='maintab'>

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Stack Overflow</label>

  <div id="content1">
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
    </p>
  </div>

  <div id="content2">
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
    </p>
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
  </div>

  <div id="content3">
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto
      pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
    </p>
  </div>


</div>
</div>
</div>

Lalu tambahkan CSS layoutnya agar tampil maksimal


<style>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.all, .all::before, .all::after{margin:0;padding:0;box-sizing:border-box;}

.bodytab{display:flex;align-items:center;justify-content:center;padding:10px;font:14px/1.5 'Open Sans',sans-serif;color:#345;background:#f0f2f4;}

p:not(:last-child) {
  margin: 0 0 20px;
}

.maintab {
  max-width: 800px;
  padding: 40px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

#content3, #content2, #content1  {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16c'; }

label:hover {
  color: #789;
  cursor: pointer;
}

input:checked + label {
  color: #0af;
  border: 1px solid #abc;
  border-top: 2px solid #0af;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3{
  display: block;
}

@media screen and (max-width: 800px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  label {
    padding: 15px;
  }
}
</style>