Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda

Pernahkah Anda mencermati desain (model) bidang posting (artikel) yang digunakan pada halaman beranda blog ini? Model bidang posting yang digunakan untuk halaman beranda blog ini bisa jadi lain daripada yang lain karena memang telah dilakukan kustomisasi, dalam hal ini adalah dengan menjadikan bidang artikel paling atas sebagai headline dan bidang artikel yang lainnya didesain sedemikian rupa sehingga ukurannya menjadi lebih ringkas (termasuk diantaranya adalah dengan menampilkan pratinjau dari gambar yang terdapat dalam artikel pada bagian sebelah kiri serta ringkasan artikel di bagian yang berbeda, seperti yang tampak pada gambar di atas).

Uraian dalam artikel ini sendiri sebenarnya merupakan kelanjutan dari uraian dalam artikel sebelumnya yang berjudul “Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler”. Dimana apabila uraian dalam artikel tersebut menjelaskan cara atau teknik yang digunakan untuk membuat headline artikel pada beranda blog tampilan versi mobile, maka teknik yang diuraikan dalam artikel ini adalah digunakan untuk membuat headline artikel untuk tampilan blog versi web.

Dan kiranya tak perlu panjang lebar, sekarang kita langsung saja pada pokok pembahasan yaitu mengenai cara mengubah model bidang posting untuk halaman beranda blog versi web. Untuk mengimplementasikan teknik ini, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut secara berurutan.

Pertama, backup template Anda dan kemudian buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode </head> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
/************************************************
Kustomisasi Model Bidang Posting Blogger/Blogspot
Membuat Headline Artikel Di Halaman Beranda Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
*************************************************/
function HapusTagHTML(kalimat,ambil){
  if(kalimat.indexOf("<")!=-1)
  {
    var s = kalimat.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);
        }
      }
    kalimat = s.join("");
  }
  ambil = (ambil < kalimat.length-1) ? ambil : kalimat.length-2;
  while(kalimat.charAt(ambil-1)!=' ' && kalimat.indexOf(' ',ambil)!=-1) ambil++;
    kalimat = kalimat.substring(0,ambil-1);
  return kalimat+'...';
}

function BuatRingkasanArtikel(pID){
  var div = document.getElementById(pID);
  var JumlahKarakter = 300;
  var RingkasanArtikel = '<div>' + HapusTagHTML(div.innerHTML,JumlahKarakter) + '</div>';
  div.innerHTML = RingkasanArtikel;
}
//]]>
</script>

Keterangan:

Kode tersebut digunakan untuk membuat ringkasan artikel yang ditampilkan pada bidang posting kedua, ketiga, dan seterusnya, seperti yang tampak pada gambar (di atas) dengan tanda angka 2 (dua).

Untuk menentukan jumlah karakter yang dijadikan sebagai ringkasan artikel, dapat dilakukan dengan cara mengubah angka 300 yang terdapat pada kode var JumlahKarakter = 300; sesuai dengan jumlah karakter yang diinginkan.

Ketiga, cari kode <b:includable id='main' var='top'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut. Sebagai contoh perhatikan rangkaian kode di bawah ini.

<b:includable id='main' var='top'>   <!-- hapus dari sini -->

  ----- rangkaian kode -----

</b:includable>   <!-- hapus sampai sini -->

Keempat, salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang sebelumnya telah dihapus dengan menggunakan langkah ketiga.

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
        <!--artikel terbaru -->
        <b:include name='artikelterbaru'/>
      <b:else/>
        <!--artikel terlama -->
        <b:include name='artikelterlama'/>
      </b:if>
    </b:loop>

    <!-- navigation -->
    <b:include name='nextprev'/>

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

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
          function initialize() {
            google.annotations.setApplicationId(<data:top.blogspotReviews/>);
            google.annotations.createAll();
            google.annotations.fetch();
          }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>

<b:includable id='artikelterbaru' var='artikelbaru'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:defaultAdStart/>
      <b:if cond='data:post.isDateStart'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-outer&quot;&gt;
      </b:if>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-posts&quot;&gt;
      </b:if>

      <div class='post-outer'>
        <b:include data='post' name='post'/>

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>

      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
          <data:adStart/>
      </b:if>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    <data:adEnd/>
  </div>
</b:includable>

<b:includable id='artikelterlama' var='artikellama'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>

    <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
          
        <div class='post-outer'>
          <b:include data='artikellama' name='lama'/>

          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
        </div>
      </b:if>
    </b:if>
  </div>
</b:includable>

<b:includable id='lama' var='artikellama'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        <b:if cond='data:post.link'>
          <div style='text-align: justify;'>
            <a expr:href='data:post.link'><data:post.title/></a>
          </div>
        <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <div style='text-align: justify;'>
                <a expr:href='data:post.url'><data:post.title/></a>
              </div>
            <b:else/>
              <data:post.title/>
            </b:if>
          <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
      <div class='post-header-line-1'/>
    </div>

    <div class='mobile-index-contents'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='mobile-index-thumbnail'>
          <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
            <div class='Image' style='float:left; '>
              <img expr:src='data:post.thumbnailUrl' style='width:180px; height:114px;'/>
            </div>
          </div>
        </div>
      <b:else/>
        <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
          <img alt='eltelu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png' style='width: 180px !important; height: 114px !important;'/>
        </div>
      </b:if>

      <div class='post-body' style='text-align: justify;'>
        <div expr:id='&quot;RingkasanArtikel&quot; + data:post.id'><data:post.body/></div>
        <script type='text/javascript'>BuatRingkasanArtikel(&quot;RingkasanArtikel<data:post.id/>&quot;);</script>
      </div>

      <b:if cond='data:post.hasJumpLink'>
        <div style='border-bottom: 1px solid #666666; margin-top: 12px; width: 99,99%;'/>
          <div style='text-align: right;'>
            <div class='jump-link'>
              <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
            </div>
          </div>
        <div style='clear: both;'/>
      </b:if>
    </div>
  </div>
</b:includable>

Keterangan:

Pemisah artikel yang digunakan dalam rangkaian kode di atas adalah pemisah standar, yaitu <data:post.jumpText/> yang akan menghasilkan tautan teks berupa “Baca selengkapnya »” atau “Read more »”. Sehingga apabila sebelumnya Anda telah melakukan kustomisasi untuk bagian tersebut (sebagai contoh misalnya mengubah bagian tersebut menjadi gambar tombol), maka gantilah pula <data:post.jumpText/> yang terdapat pada kode di atas sesuai dengan rangkaian kode yang Anda gunakan (sebelumnya) untuk membuat tombol “Read more »”.

Silakan buka artikel dengan judul “Membuat Tombol Read More Tanpa Ribet” yang dapat Anda gunakan sebagai referensi untuk membuat tombol “Read more »” atau mengganti tautan teks “Baca selengkapnya »” dengan gambar berbentuk tombol.

Kelima, simpan template.

Dan selanjutnya perlu diketahui bahwa setelah Anda mengimplementasikan teknik tersebut maka post footer untuk artikel kolom kedua, ketiga, dan seterusnya secara otomatis tidak lagi ditampilkan ketika halaman yang dibuka adalah beranda. Namun post footer akan tetap dimunculkan sebagaimana mestinya ketika masing-masing artikel pada blog yang dimaksud dibuka.

Sementara itu post footer untuk artikel yang terletak pada bagian kolom paling atas akan tetap ditampilkan di halaman beranda, sehingga untuk menghilangkan bagian tersebut agar post footer tidak lagi tampil di halaman beranda seperti halnya pada artikel bagian kolom kedua, ketiga, dan seterusnya, maka Anda dapat mengerjakan teknik yang diuraikan dalam artikel dengan judul “Menyembunyikan Elemen Halaman Posting Dari Beranda Blog”.

Semoga berguna dan bermanfaat.

Salam.