Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

11
Tgl. 02 April 2012

Mempercantik Judul Artikel Dengan Menambahkan Bingkai

Selain dipengaruhi oleh faktor konten artikel yang unik dan bermanfaat, pada dasarnya tampilan halaman sebuah blog juga sangat mempengaru...

Ilustrasi Judul Artikel
Selain dipengaruhi oleh faktor konten artikel yang unik dan bermanfaat, pada dasarnya tampilan halaman sebuah blog juga sangat mempengaruhi pengunjung agar senantiasa betah untuk membuka dan membaca setiap artikel pada blog yang dimaksud. Belum lagi bila didukung dengan loading halaman yang ringan, maka hal ini akan membuat pengunjung semakin betah berada di blog yang kita kelola.

Nah, bila pada artikel sebelumnya yang berjudul “Cara Mengatasi Konten Yang Menembus Bidang Posting”, kita memanfaatkan bingkai untuk mengatasi konten dalam bentuk kode HTML, CSS, Java Script atau konten lain yang melewati batas bidang posting, maka kali ini kita akan memanfaatkannya untuk mempercantik tampilan judul artikel yang kita terbitkan.

Pada prinsipnya kode yang digunakan untuk menambahkan bingkai pada judul artikel adalah serupa dengan kode yang digunakan untuk mengatasi konten yang menembus bidang posting. Dari kedua hal tersebut yang membedakan adalah dalam penerapan kode yang dimaksud. Jika kode tersebut digunakan untuk mengatasi konten yang menembus bidang posting penerapannya adalah dengan menyisipkannya dalam artikel yang akan diterbitkan, maka kode tersebut disisipkan pada template bila diterapkan untuk judul artikel.

Selanjutnya dalam hal menambahkan bingkai untuk mempercantik judul artikel yang diterbitkan, langkah-langkahnya adalah sebagai berikut:
  1. Login ke akun Blogger Anda.
  2. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
  3. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
  4. Centang pilihan ‘Expand Template Widget’.
  5. Cari kode <b:includable id='post' var='post'> dan kemudian perhatikan bahwa di bawahnya terdapat kode <h3 class='post-title entry-title'> yang secara default adalah seperti di bawah ini.
         <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>

  6. Ganti kode di atas dengan kode di bawah ini.
          <h3 class='post-title entry-title'>
          <div style='-moz-border-radius: 7px 7px 7px 7px; background-color: #f3f3f3; border: 1px solid #cccccc; height: auto; margin: 0px; overflow: auto; padding: 5px;  width: auto;'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </div>
          </h3>

  7. Simpan template Anda.

Sebagai contoh atas penggunaan dan penerapan teknik di atas adalah seperti yang tampak pada gambar di bawah ini.
Ilustrasi Tampilan Artikel Blog
Screenshot: eltelu.blogspot.com

Namun perlu Anda perhatikan bahwa kode #f3f3f3 dan #cccccc yang terdapat pada langkah nomor enam (6) adalah kode yang menyatakan warna latar serta warna garis. Sehingga bila warna yang dihasilkan oleh kedua kode tersebut kurang sesuai, maka Anda dapat menggantinya menggunakan kode warna yang sesuai dengan keinginan Anda.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 11 komentar pada artikel ini ▶
25/04/12 20.22 O

Boleh juga nih, selain WP kebetulan ane juga pakai blogspot, kunjungan balik dari ane gan, salam kenal.

Anonim
24/05/12 22.22 O

siip...biar blog lebih cantik.
tankyou

23/11/12 18.33 O

mantap gan,
visit back click-gen.blogspot.com
:)

25/11/12 15.31 O

@Anom WibowoTerimakasih serta salam kenal balik Sobat. Dan mohon maaf bila sekarang saya baru dapat membalas komentar ini.

25/11/12 15.32 O

@caraspektakulerSama-sama Sob.

25/11/12 15.43 O

@Ngurah SutaOke, terimakasih Sobat. :)

Anonim
13/12/12 21.01 O

sangat menarik mas bro postingannya, ringan bahasannya, tapi cukup besar manfaatnya mas bro.....trims saya coba ya.

Anonim
13/12/12 21.10 O

it work mas bro di blog saya, trims info nya, pasang linkback nya mas bro, link ELTELU sudah terpasang, trims.. http://duniaperawatdankesehatan.blogspot.com/

15/12/12 15.10 O

@duniaperawatdankesehatanOke Sobat. Syukurlah bila demikian. :)

22/03/13 21.17 O

kunjungan rutin gan.hehehe....follow juga blog ku ya

28/03/13 23.13 O

@curvasud sansiroOke...! Terimakasih Sobat.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog