Cara Menampilkan Tanggal Posting Hari yang Sama

Cara Menampilkan Tanggal Posting Hari yang Sama - Tanggal posting biasanya muncul di bagian atas artikel. Penampilan tanggal posting tersebut dapat berbeda-beda sesuai dengan setingan template yang digunakan. Jika ada 2 atau lebih artikel yang diposting pada hari yang sama, maka tanggal ini muncul hanya di artikel yang paling baru pada satu halaman yang sama. Sedangkan pada artikel yang sebelumnya, tanggal ini tidak tampil.

Pada template tertentu ketidakhadiran tanggal posting ini dapat mengurangi keindahan blog karena judul posting letaknya jadi terlihat berantakan. Contohnya seperti yang terlihat pada screenshot di bawah ini.

Tanggal Posting Tidak Muncul pada Artikel Sebelumnya

Pada gambar di atas terlihat tanggal posting di artikel yang lebih lama tidak tampil. Nah, untuk membuat tanggal posting juga muncul pada artikel sebelumnya, kita perlu menambahkan kode tertentu pada bagian kode data:post.dateHeader template. Berikut langkah-langkahnya:

1. Masuk ke Blogger.

2. Klik "Opsi lainnya" pada blog yang dipilih, lalu klik "Template".

3. Klik tombol "Edit HTML".

4. Beri tanda centang pada "Expand Template Widget".

5. Carilah kode seperti di bawah ini.

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

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>

6. Kemdian hapus kode tersebut dan ganti dengan kode di bawah ini.

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

<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>

<h2 class='date-header'><data:post.dateHeader/></h2>

<b:else/>

<h2 class='date-header'>

<script>document.write(ultimaFecha);</script>

</h2>

</b:if>

7. Klik tombol "Simpan template".

Bila berhasil, maka tanggal posting hari yang sama dapat tampil seperti yang terlihat pada screenshot di bawah ini.

Tanggal Posting Hari yang Sama

Selamat mencoba dan semoga berhasil. Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Cara Menghilangkan Readmore di Page (Laman)

Cara Menghilangkan Readmore di Page (Laman) - Sebelumnya saya telah memposting tentang cara memasang readmore otomatis. Readmore otomatis berguna untuk memotong beberapa bagian artikel sehingga terlihat rapi di Beranda dan menjadi lebih singkat sehingga kita dapat menampilkan banyak postingan tanpa memakan banyak ruang.

Namun, readmore otomatis muncul juga di halaman page (Laman) seperti About, Contact, dan lain sebagainya.  Walaupun tautan "readmore" pada Laman sudah diklik, namun tidak dapat membuka isi Laman secara keseluruhan.

Readmore pada Laman ini dapat dihilangkan dengan cara menyisipkan kode tertentu pada bagian kode "Readmore Otomatis". Untuk lebih jelasnya, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" > "Template".

3. Klik tombol "Edit HTML" > "Lanjutkan".

4. Beri tanda centang pada "Expand Template Widget".

5. Kemudian carilah bagian kode readmore yang kira-kira seperti di bawah ini.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

6. Setelah itu tambahkan kode berikut di atas kode <b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>

<data:post.body/>

<b:else/>

Lalu, jangan lupa tambahkan kode penutupnya yaitu </b:if> di bawah kode <div style='clear: both;'/> <!-- clear for photos floats --> sehingga hasil akhirnya akan menjadi seperti di bawah ini.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>

<data:post.body/>

<b:else/>

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</b:if>

    </div>

7. Klik tombol "Simpan template" dan lihat pada Laman apakah masih ada "readmore"nya, jika tidak ada berarti berhasil.

Semoga bermanfaat bagi Sobat. Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Cara Pasang Readmore Otomatis di Blogger

Cara Pasang Readmore Otomatis di Blogger - Beberapa hari yang lalu, saya mengunduh template Blogger gratis dari internet. Ternyata, pada template tersebut belum terdapat fitur "Readmore Otomatis". Untuk itu saya perlu memasang sendiri "readmore otomatis" karena jika tak ada fitur ini, maka halaman beranda blog akan menjadi sangat panjang ke bawah.

Berikut langkah-langkah atau cara memasang readmore otomatis di blogspot:

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" diikuti klik "Template".

3. Kemudian klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda centang pada "Expand Template Widget".

5. Lalu carilah kode </head>. Untuk mempercepat pencarian, tekan tombol F3 pada keyboard lalu masukkan kata kunci yang dimaksud.

6. Selanjutnya taruh kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah ini.

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

8. Klik tombol "Simpan template".

Berikut keterangan untuk readmorenya...

• var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
• summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
• img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
• img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
• readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Semoga bermanfaat bagi Sobat. Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Trik Membuat "Diposkan oleh", "Waktu Posting", "Label", dan "Reaksi" Hanya Muncul di Halaman Posting

Trik Membuat "Diposkan oleh", "Waktu Posting", "Label", dan "Reaksi" Hanya Muncul di Halaman Posting - Biasanya pada halaman "Home" atau "Beranda" tulisan "Diposkan oleh", "Waktu posting", "Label", serta "Reaksi" akan tampil di bagian bawah artikel seperti yang ditunjukkan pada gambar di bawah ini.

Ada trik sederhana untuk membuat keempat elemen tersebut di atas tampil hanya di halaman posting atau dengan kata lain tidak muncul di "home page" yaitu dengan mengapit kode "span class" dari keempat unsur tersebut dengan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> serta </b:if> pada HTML template blog.

Span class masing-masing untuk keempat unsur tersebut adalah 'post-author vcard', 'post-timestamp', 'post-labels', dan 'reaction-buttons'. Biasanya kode-kode tersebut berada di deretan kode "post footer line". Untuk itu kita perlu mencarinya dengan teliti agar dapat meletakkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> serta </b:if> dengan tepat.

Tampilan "Diposkan oleh", Waktu Posting", "Label", serta "Reaksi" di Beranda

Berikut ini saya akan mencoba menjelaskan bagaimana cara membuat "Diposkan oleh", "Waktu Posting", "Label", dan "Reaksi" hanya muncul di halaman posting. Template yang saya gunakan untuk tutorial ini adalah template "Jendela Gambar" dari Blogger.

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" >> "Template".

3. Bila ingin membuat salinan template, silakan klik tombol "Cadangkan / Pulihkan" kemudian klik tombol "Unduh template lengkap".

4. Klik tombol "Edit HTML" >> "Lanjutkan".

5. Berikutnya beri tanda centang pada "Expand Template Widget".

6. Pertama kita akan menyisipkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> serta </b:if> agar "Diposkan oleh" sekaligus "waktu posting" tampil hanya di halaman posting.

Carilah kode yang mirip atau mengandung kode span class 'post-author vcard' sekaligus 'post-timestamp' seperti di bawah ini. Gunakan fitur pencarian cepat browser (Ctrl+F atau F3) untuk menemukan dengan mudah.

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->

Lalu sisipkan kode  <b:if cond='data:blog.pageType == &quot;item&quot;'>  sebelum kode  <span class='post-author vcard'> dan kode penutup  </b:if> setelah kode <data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> sehingga hasilnya akan seperti di bawah ini.

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><b:if cond='data:blog.pageType == &quot;item&quot;'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span></b:if> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->

Selanjutnya untuk "Label", carilah kode seperti di bawah ini.

<div class='post-footer-line post-footer-line-2'> <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <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 != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Lalu letakkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> sebelum kode <span class='post-labels'> dan penutupnya </b:if> setelah kode </span> sehingga hasilnya akan menjadi seperti di bawah ini.

<div class='post-footer-line post-footer-line-2'><b:if cond='data:blog.pageType == &quot;item&quot;'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <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 != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span></b:if> </div>

Yang terakhir untuk tombol "reaksi", cari kode seperti di bawah ini.

<div class='post-footer-line post-footer-line-3'> <span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span> <span class='post-location'>

Sisipkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> sebelum kode <span class='reaction-buttons'> dan kode </b:if> sesudah kode </span> sehingga hasil menjadi seperti di bawah ini.

<div class='post-footer-line post-footer-line-3'><b:if cond='data:blog.pageType == &quot;item&quot;'><span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span></b:if><span class='post-location'>

7. Klik tombol "Simpan template".

8. Selesai. Jika berhasil maka tampilan di halaman "home" akan menjadi seperti gambar di bawah ini.

Tampilan di Halaman Beranda setelah Pengeditan

Sedangkan pada halaman posting, pada bagian bawah artikel akan tampak seperti gambar berikut ini.

Tampilan di Halaman Artikel

Cara Menghapus Iklan yang Terinstal pada Template Blogger

Cara Menghapus Iklan yang Terinstal pada Template Blogger - Pernah saya mengunduh template untuk Blogger dari penyedia template di internet. Begitu diunggah untuk diterapkan pada blog, ternyata di dalam template tersebut mengandung beberapa iklan. Iklan yang ditampilkan diantaranya berupa banner iklan ppc (pay per click).

Unit-unit iklan tersebut sepertinya diinstal oleh si pembuat atau pengedit template. Kemudian saya berkeinginan untuk menghapus saja iklan banner tersebut karena terlihat mengganggu.

Langkah pertama untuk menghapus iklan tersebut adalah mencari tahu terlebih dahulu link dari banner tersebut. Caranya adalah dengan mengeklik kanan banner iklan tersebut lalu klik menu "Salin alamat tautan". Jika sudah, selanjutnya menempelkannya pada notepad atau tempat lain untuk dilihat sumber iklan tersebut berasal.

Berikut ini 2 alamat tautan yang sudah saya salin dari 2 iklan banner yang terdapat di template tersebut:

http://ads.sittiad.com/ck/ck.php?rc=0l3bbEbV7jFDWBn29NBBcQjA33yiyoV1_ejPG_LCI_ToGA9oY-vz4IPFeooJ6XbQ5GKffkRRm9llxoBncwj8Oxb5visLK6-sxHFiUlFHOklRbKgdyBF8OiMaSIAZlzS1CCLUcwGLC1o5ZLE5OMd7g-BI29kkZ5nnd00EWHDb_ME_KoAaA2uc0h94CSOLpTQBmPrn1xB9yy3VE4rKg7xkYIlfjNhDByWl2MraN4vUO2T89yHVeDx43nHhPzisyqc3_I-PZTt-vMqa-XVO79jRXpmcwFcrYfiX

http://bloggerbersatu.com/?ref=naughtyric

Setelah mendapatkan alamat tautan dari masing-masing iklan banner, langkah selanjutnya adalah mencari kode-kode iklan tersebut pada HTML template blog untuk kemudian dihapus. Langkah-langkah untuk menghapus kode iklan yang dimaksud adalah sebagai berikut:

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" >> "Template".

3. Klik tombol "Edit HTML" >> tombol "Lanjutkan".

4. Beri tanda contreng pada "Expad Template Widget".

5. Pada alamat tautan iklan yang pertama, saya temukan bahwa iklan tersebut berasal dari "SITTI", untuk itu saya memasukkan kata kunci "sitti" di pencarian cepat (tekan F3 atau Ctrl + F). Ternyata hasil pencarian menemukan kode iklan dari SITTI seperti yang terlihat pada gambar di bawah ini.

Kode iklan yang ditemukan.

Setelah ditemukan, langkah berikutnya adalah menghapus kode iklan tersebut, mulai dari awal hingga akhir kode. Pada alamat tautan iklan yang kedua, saya memasukkan kata kunci seluruh alamat tautan tersebut sehingga ditemukan kode iklan seperti yang ditunjukkan pada gambar di bawah ini.

Kode iklan banner yang ditemukan.

Sama seperti kode iklan yang pertama, jika sudah ditemukan tinggal hapus saja kode iklan tersebut mulai dari awal hingga akhir kode.

6. Klik tombol "Simpan template"

7. Selesai.

Cara Menghilangkan Ikon Pensil pada Blog

Ikon pensil biasanya muncul di bawah posting saat kita sudah masuk di Blogger. Sama halnya seperti ikon obeng dan tang yang muncul kalau telah login di akun Blogger. Walaupun kita dapat melihat ikon ini, namun tidak begitu halnya dengan para pengunjung yang melihat blog kita dari komputer lain.

Ikon pensil ini digunakan untuk melakukan pengeditan cepat terhadap suatu posting atau artikel yang sudah diterbitkan. Jadi, adanya ikon ini memudahkan kita dalam mengedit posting karena tanpa perlu lagi melakukan beberapa kali klik guna menemukan menu "Edit" pada posting tertentu.

Beberapa blogger mungkin tidak menyukai kehadiran ikon pensil ini sehingga mereka memutuskan untuk menghilangkan saja tampilan dari ikon ini. Bagaimanakah cara untuk menghilangkan ikon pensil tersebut? Berikut ini langkah-langkahnya:

1. Masuk ke akun Blogger Sobat.

2. Klik menu "Opsi lainnya" lalu pilih "Tata Letak".

3. Kemudian klik "Edit" pada Blog Posts (Posting Blog).

4. Lalu hilangkan tanda centang pada "Tunjukkan Pengeditan Cepat".

5. Klik tombol "Simpan".

6. Lihat artikel Sobat, apakah sudah hilang atau belum ikon pensil tersebut.

Cara Menghilangkan Bingkai Gambar di Posting

Bingkai gambar atau border image merupakan garis yang muncul di sekeliling gambar pada posting. Pada sebagian template, bingkai atau border ini masih muncul pada gambar yang diunggah dalam artikel. Namun, pada sebagian template yang lain, bingkai gambar ini sudah tidak terlihat lagi.

Jika dirasa kemunculan bingkai ini mengurangi nilai keindahan tampilan dari gambar itu sendiri, maka kita dapat menghilangkan bingkai tersebut. Sebenarnya kita tidak menghilangkan, hanya saja membuatnya tidak terlihat karena kita menentukan nilai ketebalan bingkai itu menjadi  nol piksel.

Bingkai gambar

Kalau sewaktu-waktu nanti kita ingin mengembalikan border image tersebut, kita tinggal memberi nilai kembali ketebalan dari border tadi. Berikut langkah-langkah dalam menghilangkan bingkai gambar.

1. Masuk ke akun Blogger Anda.

2. Klik segitiga hitam dropdown (Opsi lainnya) lalu pilih menu "Template".

3. Klik tombol "Edit HTML" kemudian klik tombol "Lanjutkan".

4. Kemudian carilah kode yang mirip dengan kode di bawah ini (.post img).

.post img {
border:4px solid #DDDDDD;
}

5. Selanjutnya ganti ketebalan border menjadi 0px sehingga kodenya menjadi seperti di bawah ini.

.post img {
border:0px solid #DDDDDD;
}

6. Klik tombol "Simpan template" dan lihat hasilnya pada postingan Anda yang mengandung gambar.

Cara Menghapus Widget yang Terkunci di Blogger

Setelah mengganti template dari template yang satu ke template yang lain, terkadang ditemukan ada beberapa widget atau gadget yang tidak bisa dihapus. Widget ini dapat dikatakan sebagai widget yang terkunci.

Saat kita ingin menghapus sebuah widget, biasanya kita mengeklik tautan “Edit” atau ikon “Obeng dan Tang” pada widget yang dimaksud. Namun, pada jendela konfigurasi widget tersebut tidak ditemukan tombol “Hapus”. Tidak adanya tombol ini tentu membuat kita kesulitan untuk menghapus tersebut.

Tombol “Hapus” ini dapat kita munculkan kembali dengan cara membuka kunci dari widget tersebut. Ada beberapa langkah yang harus dilakukan untuk membukanya. Untuk lebih jelasnya simak caranya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Tentukan widget yang terkunci yang Anda ingin hapus. Misalnya, salah satu widget yang terkunci adalah widget “Popular Posts”.

3. Masuk ke menu “Tata Letak” kemudian klik tautan “Edit” pada widget tersebut.

4. Maximize jendela konfigurasi widget tersebut.

5. Perhatikan address bar dari jendela konfigurasi, kemudian cari tahu apa nama widget id dari widget yang dimaksud. Dalam contoh ini, widget id dari gadget tersebut adalah PopularPosts1.

Widget id sebuah gadget

6. Copy widget id tersebut.

7. Masuk ke menu “Template” >> “Edit HTML” >> “Lanjutkan”.

8. Tekan tombol “Ctrl + F” atau tombol “F3” untuk memunculkan fitur pencarian cepat browser lalu paste widget id yang dicopy tadi (PopularPosts1).

9. Selanjutnya akan ketemu kode dari widget tersebut yaitu seperti di bawah ini.

<b:widget id="PopularPosts1" locked="true" title="Popular Posts" type="PopularPosts"></b:widget>

10. Perhatikan kode locked="true", kemudian ganti kata "true" dengan kata "false" sehingga hasilnya menjadi seperti di bawah ini.

<b:widget id="PopularPosts1" locked="false" title="Popular Posts" type="PopularPosts"></b:widget>

11. Klik tombol "Simpan template".

12. Masuk lagi ke halaman "Tata Letak".

13. Klik "Edit" pada widget tersebut.

14. Sekarang tombol "Hapus" sudah ada pada jendela konfigurasi widget yang terkunci tadi.

15. Klik tombol "Hapus" untuk menghapus widget tersebut.

Untuk widget-widget yang lainnya caranya kurang lebih adalah seperti di atas. Yang terpenting adalah cari tahu dulu apa widget id-nya atau judul (title) widget yang terkunci kemudian ubah kata "true" menjadi kata "false".

Cara Mengurangi Lebar Sidebar pada Template Thesis

Setidaknya ada 2 macam template Thesis untuk Blogspot yang saya temui. Ada template Thesis yang pada bagian sidebar-nya terdapat 2 kolom seperti pada template yang sedang saya gunakan ini. Ada pula template Thesis yang mengandung satu kolom saja di sidebar-nya.

Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.

Screenshot sidebar sebelum dikurangi lebarnya.

Mengurangi lebar sidebar harus dibarengi dengan menambahkan lebar halaman posting. Yang mana nilai pengurangan lebar sidebar sama dengan nilai untuk menambahkan lebar halaman posting. Misalnya, saya mengurangi lebar sidebar sebesar 60px, maka saya juga harus menambahkan lebar halaman posting sebesar 60px.

Berikut ini langkah-langkah yang saya lakukan untuk mengubah nilai lebar halaman posting dan lebar sidebar pada template yang sedang saya pakai ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian klik "Template".

3. Klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template.

4. Lalu klik tombol "Edit HTML" dan klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Kemudian saya mencari kode-kode seperti di bawah ini untuk menemukan lebar halaman posting dan lebar sidebar. Dari kode-kode di bawah ini kalau lebar halaman posting sebesar 507px, lebar sidebar atas dan sidebar bawah sebesar 362px, lebar sidebar-wrapper1 sebesar 160px, dan lebar sidebar-wrapper2 sebesar 182px.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px  dotted #dddddd;
border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:8px;
}
#sidebar-wrapper1 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:15px;
margin:18px 0px 5px 0px;
width:160px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:182px;
word-wrap:break-word;
}
#sidebar-bottom {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:362px;
word-wrap:break-word;
}

7. Di sini saya akan membuat lebar sidebar atas dan sidebar bawah menjadi 300px. Dengan demikian saya harus mengurangi lebar kedua sidebar tersebut sebesar 62px karena 362px dikurang 300px sama dengan 62px. Setelah mengurangi lebar sidebar sebesar 62px, berarti saya juga harus menambah lebar halaman posting sebesar 62px juga. Dengan demikian lebar halaman posting menjadi 569px (507px + 62px).

Sekarang saya harus menyesuaikan lebar untuk sidebar-wrapper1 dan side-wrapper2. Seperti diketahui, saya telah mengurangi lebar sidebar-top dan sidebar-bottom masing-masing sebesar 62px, untuk itu saya harus mengurangi juga lebar kedua sidebar-wrapper tersebut sebesar 62px. Agar lebih mudahnya saya bagi 2 saja angka 62px ini sehingga lebar (width) sidebar-wrapper1 yang 160px itu saya kurangi 31px. Dengan demikian lebarnya menjadi 129px. Begitu pula lebar side-wrapper2 saya kurangi 31px sehingga menjadi 151px (182px - 31px).

8. Karena lebar kolom komentar dan lebar kotak komentar sama dengan lebar halaman posting (sebelum diubah) yakni sebesar 507px, maka ada baiknya kita menambahkan pula lebar kedua elemen tersebut agar tampak serasi yaitu menjadi 569px (sama dengan lebar halaman posting setelah diubah).

Untuk mencari kedua lebar elemen tersebut, carilah kode-kode seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.

10. Klik tombol "Simpan template" dan lihat hasilnya.

Screenshot sidebar yang lebarnya sudah dikurangi

Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).

Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.

Sidebar yang belum dikurangi lebarnya.

Sidebar yang sudah dikurangi lebarnya.

Setelah melakukan perubahan pada lebar sidebar dan lebar halaman posting, kita perlu juga mengatur ulang banyaknya karakter atau huruf pada widget readmore otomatis agar tampilan home page menjadi lebih serasi.

Border Style Multiple pada 3 Kolom Widget

Sudah beberapa bulan ini saya menerapkan 3 kolom widget di atas footer blog ini. Memang saya sebelumnya pernah melakukan hal yang serupa, namun beberapa waktu kemudian saya menghapus kembali 3 kolom widget tersebut. Kini saya telah memasang kembali kolom widget tersebut.

Ada yang berbeda jika dibandingkan dengan pemasangan 3 kolom widget pada waktu sebelumnya. Di manakah letak perbedaannya? Pertama, dari segi widget-widget yang saya pasang pada ketiga kolom tersebut. Sekarang saya memasang widget-widget yang berhubungan dengan statistik blog ini yaitu info pagerank, info Alexa rank, total tayangan laman, user online status, dan jumlah pengunjung.

Perbedaan kedua adalah mengenai pemanis yang saya tampilkan pada ketiga kolom widget tersebut. Bila pada waktu sebelumnya saya menambahkan border dobel pada bagian atas, maka pada kali ini saya menambahkan border style multiple.

Border Style Multiple pada 3 Kolom Widget

Sedangkan mengenai cara pemasangannya dapat saya tuliskan di bawah ini. Kalau ada yang ingin menerapkannya pada template selain yang saya gunakan ini, mungkin hasil yang berbeda akan didapat.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" lalu pilih "Template".

3. Kalau mau membuat salinan template, bisa mengeklik tombol "Cadangkan / Pulihkan" terlebih dahulu.

4. Setelah itu klik tombol "Edit HTML" dan tombol "Lanjutkan".

5. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut di atas kode tersebut.

#tiga-kotak-bawah {
clear:both;
border-color: orange;
border-style: dotted dashed solid double;
border-width: 6px;
margin-bottom: 6px;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

6. Selanjutnya cari kode <div id='footer'> lalu taruh kode berikut di atas kode tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Klik tombol "Simpan template" dan lihat hasilnya di menu "Tata Letak".

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut.

Label yang muncul hanya satu pada menu breadcrumbs.

Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

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

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

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

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

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

</b:loop>

</span>

</p>

<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

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

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

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

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

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

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

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

<!-- No breadcrumb on home page -->

<b:else/>

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

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

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

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

<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 != &quot;true&quot;'> &#187;

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

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

</b:loop>

</span>

</p>

<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Semua label tampil pada menu breadcrumbs.

Cara Membuat Kolom Widget di Sebelah Kanan Header

Tutorial kali ini saya tujukan khusus bagi yang menggunakan template Thesis SEO Blogger dari Blog Juragan, template yang sedang saya gunakan saat ini. Seperti kita ketahui bahwa header template tersebut hanya memuat satu kolom. Namun, di dalam HTML template tersebut sudah ada potongan kode CSS untuk header bagian kanan yaitu #r_head.

Kita tinggal menyempurnakan kode-kodenya saja agar header tersebut dapat terbagi menjadi dua kolom. Nantinya, kolom widget yang ada di kanan header ini akan mempunyai lebar sebesar 468 piksel. Cocok bila ingin menaruh banner ukuran 468 x 60.

Baiklah, langsung saja ke topik bahasan kita yaitu cara membagi dua kolom header pada template Thesis SEO Blogger. Berikut ini langkah-langkahnya. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini berguna jika nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Cari deretan kode seperti di bawah ini.

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Kemudian ganti kode-kode tersebut dengan kode di bawah ini.

#header-inner {
width:432px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:left;
padding-top:10px;
}

6. Setelah itu carilah kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>

7. Kemudian tambah kode berwarna merah sehingga hasilnya menjadi seperti di bawah ini.

<div id='header-inner'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>

</b:section>

</div>

<div id='r_head'>

<b:section class='header' id='header2' preferred='yes'/>

</div>

</div>

8. Klik tombol "SIMPAN TEMPLATE".

9. Lihat hasilnya pada tab Elemen Laman.

Kolom widget di sebelah kanan header.

Mengganti Posting Lebih Baru dan Lama dengan Judul Posting

Hari ini saya berkeinginan untuk memodifikasi link "Posting Lebih Baru" dan "Posting Lama" agar menjadi seperti yang ada di blog WordPress. Sehingga nantinya link "Posting Lebih Baru" atau "Newer Post" dan "Posting Lama" atau "Older Post" akan berganti dengan "Judul Posting" seperti yang tampak pada gambar di bawah ini.

Bagi yang ingin mengganti link-link tersebut bisa mengikuti langkah-langkahnya di bawah ini. Namun, bila sebelumnya Anda pernah menghilangkan link tersebut atau menggantinya dengan gambar, sebaiknya kembalikan dahulu seperti semula agar nantinya dapat berjalan dengan lancar.

Tulisan "Posting Lebih Baru" dan "Posting Lama" telah berganti dengan "Judul Posting".

Berikut langkah-langkah untuk mengganti tulisan link "Posting Lebih Baru" dan "Posting Lama" dengan "Judul Posting". Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Cari kode </head>. Gunakan fitur pencarian dengan menekan tombol Ctrl + F atau F3.

4. Copy kode di bawah ini dan paste di atas kode </head> tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

5. Klik tombol SIMPAN TEMPLATE.

6. Selanjutnya silakan menuju Elemen Laman >> Tambah Gadget >> HTML/JavaScript.

7. Kemudian copy kode di bawah ini dan paste di "Konten"

<style type="text/css">

#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}

#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){

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

});

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:first").text();

$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

});

});

</script>

• Silakan sesuaikan ukuran huruf dan lebarnya dengan keadaan template Anda.

8. Klik tombol SIMPAN.

9. Selesai dan lihat blog Anda.


Sumber: http://www.themasdoyok.com/2011/04/mengganti-older-newer-link-post-dengan.html