Blog Optimization | Optimasi Blog



Blog Optimization | Optimasi Blog


Mengganti Nextprev dengan Judul Posting

Posted: 10 Jun 2011 03:51 PM PDT

Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen nextprev (blog-pager) dalam blogspot dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, home, & posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman home & di bawah form komentar pada halaman posting.

Berikut merupakan kode CSS (Cascading Style Sheets) untuk elemen nextprev.

#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}

Sedangkan markup HTML (HyperText Markup Language) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :

    <b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Nah, sekarang bagaimana cara merubah agar tampilan posting lebih baru, home, & posting lama menjadi judul posting? Silakan Anda simak tutorial berikut yang bersumber pada postingan di blog ETBlue.

Langkah Pertama

  • Login ke akun blogspot Anda.
  • Pilih Rancangan → Edit HTML.
  • Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Masukkan script berikut di atas </head>
  • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    Tips : Kalau susah mencarinya, coba tekan tombol F3 atau Ctrl + F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.

  • Opsional: Anda dapat menambah CSS blog-pager dengan tag berikut:
  • #blog-pager-newer-link:before {
    content:"\00ab";
    }
    #blog-pager-older-link:after {
    content:"\00bb";
    }

    Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik &#171; («) sebelum #blog-pager-newer-link dan karakter &#187; (») sesudah #blog-pager-older-link.

  • Simpan template
  • Pilih Rancangan → Elemen Laman → Tambah gadget (“HTML/Javascript”).
  • Masukkan jquery seperti di bawah ini:
  • <script type="text/javascript">
    $(document).ready(function(){
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link").text();
    $("a.blog-pager-newer-link").text(newerLinkTitle);
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link").text();
    $("a.blog-pager-older-link").text(olderLinkTitle);//rgt
    });
    });
    </script>
  • Lihat Blog Anda

Langkah Kedua

Antisipasi Tampilan Navigasi nextprev

Apabila Anda telah melakukan “Langkah Pertama”, maka navigasi nextprev (blog-pager) hanya akan menampilkan linkHome” pada halaman utama, pencarian (halaman pertama), & klik label (halaman pertama). Sebagai alternatif pilihan, mungkin Anda tidak menampilkan navigasi nextprev pada halaman-halaman tersebut. Caranya adalah dengan menambahkan kode optimasi tampilan widget dalam “Edit HTML”, seperti berikut:

  <!-- navigation -->
<b:if cond='data:mobile'>
<b:include name='mobile-nextprev'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "item"'>

<b:include name='nextprev'/>
<b:else/>
</b:if>
<b:else/>
</b:if>


<!-- feed links -->
<b:include name='feedLinks'/>
</b:if>

Kode yang berwarna merah merupakan penambahan kode yang dimaksud.

Kostumisasi nextprev

Ketika menampilkan judul posting yang panjang, maka tampilan navigasi nextprev akan berantakan. Bagaimana cara memperbaikinya? Hal itu telah diulas dalam update 19 Pebruari 2010 di blog ETBlue, yakni dengan menmbahkan beberapa atribut dalam CSS blog-pager.

#blog-pager {
font-size:…em;
}
#blog-pager-older-link, #blog-pager-newer-link {
width:…px;
line-height:…em;
height:…em;
overflow:hidden;
}

Silakan isi dot…dot…dot dengan nilai (angka) yang sesuai dengan struktur blog Anda

Menghilangkan LinkHome

Hapus kode yang berwarna merah pada mode “Edit HTML”.

    <b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Opsional: Ditindak-lanjuti mengganti CSS blog-pager.

#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}

Ganti semua CSS di atas dengan kode di bawah ini.

.blog-pager-newer-link {
margin-right:1.5em;
}
.blog-pager-older-link {
margin-left:1.5em;
}

Catatan

Khusus untuk “Langkah Kedua”, Anda dapat menerapkannya atau tidak sama sekali. Jika Anda melakukan “Langkah Kedua”—dari beberapa alternatif tersebut—maka Anda dapat menerapkan seluruhnya, sebagian (kombinasi), atau salah satu saja. Mungkin Anda dapat juga melakukan kostumisasi navigasi nextprev dengan beberapa variasi lainnya.

Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi nextprev di Optimasi-Blog.


Jangan Lupa Jempolnya :


 

Dibutuhkan Bulan ini :

Paling Dibutuhkan :

Dibutuhkan Minggu Ini

© 2011 tutorial blogger indonesia PublisedSeo Template Blogger Converted Template by Hack Tutors.info