Jumat, 29 Oktober 2010

[TUTORIAL] Perbaiki Tampilan Static Pages Bermasalah pada Blogger

blogger-logo-tb.pngBeberapa waktu lalu Blogger, platform ngeblog kepunyaan Google, meluncurkan fitur baru yang memang sudah lama ditunggu-tunggu penggunanya, yaitu fitur untuk membuat dan menampilkan halaman statis (static pages) pada blognya. Dengan fitur ini, blog di Blogger/Blogspot tidak perlu lagi membuat halaman statis akal-akalan yang sebenarnya adalah artikel/post dengan setting tanggal yang dimundurkan.
Walau pun tentunya Static Pages ini adalah sebuah fitur yang sangat berguna, terdapat sedikit permasalahan, terutama bagi user Blogger yang menggunakan template lama sebelum fitur static pages ini diluncurkan, atau yang menggunakan script ringkasan/read more otomatis.
Permasalahan tersebut adalah halaman statis tidak dapat dibuka sepenuhnya atau tidak tampil utuh, melainkan hanya tampil sebagian yang diikuti dengan link atau tobol “read more” atau yang sejenisnya, walau pun sebenarnya pengunjung sudah berada pada alamat/URL static page itu (bukan lagi berada pada halaman/URL awal atau Home Page yang memang pantas kalau di Homepage ada link “read more”). Ini sekedar contohnya, halaman statis Chisato Gallery di blog Chisato Okai Archives (sori buat yg bersangkutan, blognya jadi contoh ga pake izin, tapi dikasih backlink deh, dua malah :D )
halaman-statis-blogger-sc.png
*

Cara Memperbaiki Halaman Statis yang Bermasalah di Blogger


Sebagai catatan, cara ini sangat tergantung pada template yang digunakan, jadi kemungkinan kode yang harus diubah berlainan untuk setiap template.
  • Login ke akun Blogger, lalu masuk ke tab Layout, selanjutnya masuk ke mode Edit HTML.
  • BACKUP TEMPALTE ANDA!
    Kalau biasanya cuma disarankan, kali ini rasanya wajib untuk backup template anda karena mungkin akan terdapat masalah dimana kode yang diubah bisa berlainan untuk setiap template. Cara backup template adalah klik link bertuliskan “Download Full Template” pada mode Edit HTML. Kalau nanti bermasalah, template awal tersebut bisa dikembalikan dengan cara upload.
  • Centang pilihan “Expand Widget Templates”.
  • Pada form Edit HTML, carilah (tekan Ctrl+F di keyboard) kode “read more” atau yang sejenisnya (bisa bertuliskan “lanjutkan…” atau “continue” atau yang lainnya).
  • Berikut ini adalah dua contoh perubahan pada template dengan kode yang berbeda:
    1. Contoh 1
      • Awal tampilan link read more sebelum diubah:
        <b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
        <a expr:href='data:post.url'>Read more...</a>
        </b:if>
      • Kode tersebut perlu diubah dengan memasukkan kode Static Page seperti ini:
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
        <a expr:href='data:post.url'>Read more...</a>
        </b:if>
        </b:if>
    2. Contoh 2
      • Awal kode template dengan script read more otomatis sebelum diubah:
        <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'> Read full story</a></span>
        </b:if>
        
        <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
      • Kode setelah diubah:
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&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'> Read full story</a></span>
        </b:if>
        </b:if>
        
        <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
  • Setelah perubahan seperti itu (ingat, mungkin berlainan pada setiap template), silahkan klik tombol SAVE TEMPLATE. Kalau ada yang nggak beres, coba kembalikan ke template semula dulu dengan cara upload, lalu dicoba edit lagi :)
Sekedar informasi yang mungkin bisa membantu, seperti terlihat pada contoh di atas, pada template Blogger ada beberapa syntax yang maksudnya merujuk ke jenis halaman tertentu, misalnya:
  • item <== merujuk ke halaman posting/artikel.
  • static_page <== merujuk ke halaman statis (static pages).
  • index <== merujuk ke halaman index (daftar artikel), misalnya homepage, archive, dan search label.
*
Tambahan, secara default Blogger akan mematikan form komentar untuk halaman statis. Untuk mengaktifkannya, pada saat kita menggunakan Page Editor silahkan klik Post Options, lalu pada opsi Reader Comments pilih Allow.
create-static-pages-blogger-sc.png
*
Bingung? Mudah-mudahan bisa membantu :)

0 komentar:

Posting Komentar

 
Design by Wordpress Themes | Bloggerized by Free Blogger Templates | Macys Printable Coupons