Mengganti Tulisan Older Posts, Newer Posts, Home Dengan Gambar Icon

Ada banyak cara yang bisa dilakukan oleh seorang blogger untuk mendesain tampilan blog-nya, mulai dari desain Header, kotak Posting, Sidebar, Footer ataupun elemen lainnya. Hal tersebut biasanya dilakukan untuk sekedar memberikan penampakan halaman blog yang berbeda daripada umumnya. Seperti juga yang akan kita ulas diposting ini, yaitu bagaimana mengganti objek tulisan Older Posts, Newer Posts dan Home dengan gambar berupa icon kecil agar terlihat lebih menarik serta (mungkin) bisa menambah minat pembaca untuk melakukan klik. Untuk situs blog, objek yang dimaksud tersebut pada umumnya terletak dibagian bawah kotak Posting atau sebelum kotak Footer dan berfungsi sebagai link navigasi untuk menuju kehalaman yang ditunjuk. Pada blog ini bisa kalian lihat penampakannya dibawah kotak komentar posting.

Secara default setelan template blogspot, ke-tiga objek tersebut memanglah ditampilkan dalam wujud teks biasa. Namun kita bisa mudah mengganti ke-tiganya dengan tampilan icon gambar. Bagaimana melakukan itu caranya bisa kalian ikuti panduan berikut ini :

1. Login di Blogspot
2. Pada halaman dashbor blog, pilih setelan "Template" lalu pilih "Edit HTML".

Untuk berjaga-jaga jika ada kesalahan nantinya, saran saya lakukan backup template terlebih dulu sebelum merubahnya. Panduannya bisa kamu baca diposting "Dua Cara Backup Template Blogspot"

3. Temukan kode seperti 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Keterangan:
<data:newerPageTitle/> = menyatakan Newer Posts (Posting lebih baru)
<data:olderPageTitle/> = menyatakan Older Posts (Posting lebih lama)
<data:homeMsg/> = menyatakan Home (Beranda/Halaman depan)

4. Ganti ke-tiga kode tersebut dengan URL gambar yang sudah di upload sebelumnya. Contoh penulisan kode-nya menjadi seperti ini :

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOX0X6YcWF26uMAgHtE-iGRmPW9qQY0K6jOD-rlujXw12tCQwBmjCoPCTgYBYEettfv1kjPFTbLKaoe1Ylq-C3wGMgv7c5vePOWP_gh1pXYwjxmd2iFOKSyP2__0o4h4DopeGGTmhyphenhyphenxCVJ/s1600/Home-icon.png"/></a>

Koinfigurasi:
Warna merah adalah URL dari gambar, silahkan ganti sesuai dengan URL gambar kamu masing-masing. 

Untuk memudahkan prakteknya, kamu bisa menggunakan gambar icon dibawah ini. Klik kanan pada masing-masing gambar lalu pilih "Copy Image Location" untuk menyalin alamat URL-nya.

Atau

Atau

5. Jika sudah langkah terakhir tinggal "Simpan Template"

Lebih banyak pilihan gambar icon, bisa kamu download di situs-situs penyedia icon gratis seperti misalnya di IconsPedia.com, IconArchive.com, FindIcons.com, DryIcons.com, dan lainnya.

Selamat mencoba.

Menyesuaikan Ukuran Kotak Komentar

Kalau boleh saya menebak apa yang kamu pikirkan begitu membaca judul posting ini, dalam hati mungkin kamu sedang bertanya "Merubah ukuran kotak komentar? Buat apa mas … ?!?"
Memang cara ini sangat jarang sekali dilakukan oleh kaum blogger, lha wong kalau dipikir-pikir ngapain juga musti repot merubah ukuran kotak komentar blog yang tidak memiliki pengaruh penting. Apakah iya dengan merubah komentar akan bisa menjamin Pembaca akan meninggalkan komentar setelah usai membaca artikel? Atau apakah bisa dengan merubah ukuran komentar akan menjadikan blog lebih SEO?
Tentu saja bukan seperti itu, tetapi ini lebih ke desain blog. Ukuran kotak komentar yang pas, tentu saja blog akan membuat blog lebih enak dipandang mata. Terutama sekali mata pengunjung yang membaca postingan serta ingin meninggalkan jejak pada kotak komentar. Bukankah begitu mas/mbak?

Pas atau tidak pas ukuran kotak komentar dilihat, tentu ditentukan dari berapa  ukuran template yang digunakan, serta ukuran elemen lain disekelilingnya. Untuk itulah terkadang seorang blogger perlu untuk menyesuaikan ukuran kotak komentar diblog-nya jika dirinya merasa kurang pas dengan ukuran sebelumnya
Cara merubah kotak komentar tidaklah rumit, kita hanya perlu masuk ke menu editor HTML template kemudian cari kode yang mengatur penampakkan kotak komentar didalamnya, dan tinggal dirubah saja angka Pixel-nya. Lebih detailnya seperti ini :

1. Login di Blogspot
2. Dihalaman dashbor pilih menu "Template" dan lanjutkan dengan klik "Edit HTML"
3. Kemudian temukan kode yang seperti berikut :

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='380px' id='comment-editor' scrolling='auto' width='500px'/>

4. Tinggal kamu rubah saja angka pada kode height='380px' dan width='500px' seperti diatas. Silahkan disesuaikan sendiri.

Kode warna merah adalah yang perlu disesuaikan :

• width= menyatakan ukuran lebar komentar
• height= menyatakan tinggi kotak komentar

5. Jika sudah tinggal disimpan saja template-nya

Semoga bermanfaat.