Cara Membuat Text Area Dengan Tombol Select All

Text area adalah area untuk memperlihatkan data-data yang sangat panjang, dan pengunjung blog yang melihat text area tersebut biasanya harus mencopy semua data yang ada dalam text area. Biasanya, data-data yang sangat panjang tersebut adalah kode HTML, kode CSS, dan lainnya. Afiq Tutorial juga menggunakan text area untuk memudahkan pengunjungnya untuk mencopy kode-kode HTML dan CSS. Secara utuh, berikut tampilan text area (dengan tombol select all).

Teks Area by Afiq

Nah, widget text area ini dapat kita pasang hanya di halaman postingan dan halaman gadget HTML/JavaSript. Berikut langkah-langkah membuat text area:

1. Buat dahulu entri baru.

 

2. Pada entri baru, pindahkan mode ke mode HTML, copy kode text area dibawah.

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">text area by afiq></p></div></form>

Pengaturan:

Text Area by Afiq = ganti dengan teks yang akan ditampilkan di text area.

WIDTH = ganti dengan ukuran lebar text area (ganti angka di depannya)

HEIGHT = ganti dengan ukuran ketinggian text area (ganti angka di depannya)

3. Publikasikan.

Menghapus Bayangan Pada Gambar di Postingan Blog

Tentu bayangan pada gambar sangat mengganggu artikel blog, karena jika dilihat akan memberi kesan jelek terhadap gambar tersebut. Apalagi, jika Anda sedang menulis artikel yang mengharuskan Anda menampilkan gambar yang banyak, tentu meresahkan bukan? Suasana seperti ini membuat gambar seakan tidak menyatu dengan artikel karena bayangannya. Saya juga dulu pernah mengalami hal seperti ini. Namun, seperti kata pepatah, banyak jalan menuju Roma, kita pun dapat menghapus bayangan tersebut.

Langkah 1: Dari Template, masuk ke Edit HTML.

Langkah 2: Cari kode .post-body img .

Langkah 3: Setelah ketemu, maka Anda akan melihat kode seperti dibawah ini.

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 2, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2); 

Langkah 4: Ganti angka yang ditulis dengan warna hijau dengan angka 0. 

Langkah 5: Simpan Template. Lihat perubahannya.

Membuat Recent Post di Blogspot

Recent post maksudnya adalah artikel terbaru. Ya, sekarang kita akan membahas widget recent post. Widget recent post (artikel terbaru) berfungsi untuk menampilkan artikel terbaru blog Anda, dan berguna juga untuk memberi tahu kepada pengunjung bahwa blog Anda sudah memiliki artikel terbaru. Dengan pernyataan seperti itu, dapat dikatakan bahwa widget recent post juga merupakan alat navigasi blog.

Recent post juga dapat mendongkrak traffic blog, karena mungkin saja ada blog yang memiliki pembaca setia yang menyukai isi artikel blog. Dengan recent post Anda dapat membuktikan bahwa Anda menunjukkan eksistensi didalam dunia blogging. Traffic juga dapat memberi nilai lebih dalam SERP (Search Engine Result Page) dan SEO (Search Engine Optimization).

Langkah 1: Masuk menu Tata Letak, kemudian tambahkan gadget HTML/JavaScript. Disarankan untuk menambahkan gadget di bagian sidebar (bagian kanan blog).

Langkah 2: Pada kolom judul, isikan dengan kata "Artikel Terbaru" atau kata lainnya yang relevan. Pada kolom konten, copy paste kode berikut:

<style type='text/css'> img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:10px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = true; var numchars = 100;</script> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> <hr/>

Langkah 3: Simpan Template.

Recent Post ini tidak membutuhkan alamat URL blog Anda, karena secara otomatis akan memuat daftar artikel terbaru blog Anda.

Membuat Tombol Back To Top Dengan Efek Smooth

Back to top adalah tombol yang digunakan untuk kembali lagi ke bagian atas blog tanpa menggunakan scrollbar atau menscrolling mouse. Fungsi dari tombol back to top ini selain untuk kembali ke atas adalah untuk mempercantik tampilan blog dan memberi kesan canggih kepada blog kita. Back to top ini tidak memberatkan blog, karena menggunakan kode jQuery. Back to top ini juga mudah dikonfigurasikan, dan kita juga dapat mengubah gambar tombol back to top yang akan dipakai.

Sebagai contoh, lihat pada bagian bawah blog Afiq Tutorial. Disana Anda akan mendapati tanda panah kecil mengarah keatas berwarna hitam. Cobalah untuk mengeklik tombol tersebut. Itulah contoh tombol back to top. Back to top ini sangat cocok untuk Anda yang suka memodifikasi blog karena tidak memberatkan blog.

Langkah 1: Dari menu Template, beralih ke menu Edit HTML.

Langkah 2: Cari kode (Ctrl+F) </body>. Copy terlebih dahulu kode jQuery dibawah. Lewati langkah ini apabila dalam blog Anda sudah memiliki kode jQuery, karena dalam blog hanya dibutuhksn 1 kode jQuery saja.

           

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

Langkah 3: Copy kode berikut dan masukkan diatas kode </body>.

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/> <!-- Back to top start www.afiqtutorial.blogspot.com --!> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsImPn-QZ4Jg9jArKxYjYvwonZLrTa_04nbONbnnfxjx66glZeScFA4DozTnI2xkHPPGysK0H8NlG-rg7h_vwYyPzqE5JpANv3vbgTJXoqNOVSKXwrC-aFlpA6er9vlrbGcUsXiRaG7Q/s1600/back-to-top.gif'/></a>

Keterangan:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsImPn-QZ4Jg9jArKxYjYvwonZLrTa_04nbONbnnfxjx66glZeScFA4DozTnI2xkHPPGysK0H8NlG-rg7h_vwYyPzqE5JpANv3vbgTJXoqNOVSKXwrC-aFlpA6er9vlrbGcUsXiRaG7Q/s1600/back-to-top.gif = Anda ganti dengan tombol back to top yang lain sesuai selera Anda.

Back To top = Anda ganti dengan kata ketika tombol back to top disorot.

Membuat Arsip Blog Auto Scroll

Arsip blog merupakan widget penting yang isinya untuk menampilkan posting terdahulu menurut tanggal publikasi. Arsip blog tentu akan terlihat tidak bagus dan tidak professional apabila posting sudah banya sehingga membuat arsip blog terlalu panjang. Terkadang, arsip blog yang terlalu panjang akan membuat widget lainnya tidak terlihat karena jauh dibawah. 

Namun, kita dapat mengantisipasinya dengan membuat auto scroll pada arsip blog. Dengan auto scroll, maka pengunjung blog yang ingin melihat seluruh posting harus menekan tombol scroll pada mouse atau melalui scroll bar yang ada di bagian arsip blog.

Langkah 1: Masuk ke menu Template, kemudian Edit HTML.

Langkah 2: Cari kode (Ctrl+F) <div id='ArchiveList'>. 

Langkah 3: Perhatikan kode dibawah ini.

<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Keterangan:

Kode berwarna hijau adalah kode yang ditambahkan. 200px, ganti dengan angka ketinggian scroll. Direkomendasikan dengan angka 200px.

Kode berwarna merah adalah kode yang dicari (lihat poin nomor 2).

Maaf jika tidak jelas. Silakan tanya di kolom komentar. Terima kasih.  

Memberi Warna Background Pada Judul Widget

Judul widget dalam blog tidak mempunyai warna background. . Secara default, Blogger tidak menyediakan fasilitas untuk memberi warna background untuk judul widget. Ini membuat judul widget kurang menarik dan kurang berwarna.Tentu saja, hal ini membuat blog kita tampak kurang bagus dan kurang professional. Namun, seperti judul diatas, kita dapat memberi warna  background pada judul widget dengan kode CSS. Penasaran? Ikuti langkah berikut ini:

Langkah 1: Dari dasbor, pindah ke Template, kemudian pilih Edit HTML.

Langkah 2: Cari kode (Ctrl+F) ]]></b:skin>. Copy-paste kode berikut DIATAS kode tersebut.

.sidebar h2 { background:#009900; color: #ffffff; margin: 0px 0px 8px 0px; box-shadow: 0 0 0 4px #009900, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); border-radius: 3px; -moz-border-radius: 1px; -webkit-border-radius: 1px; text-align:center;

Keterangan:
#009900= Ganti dengan warna background yang dikehendaki. Jika Anda tidak mengubah kode ini, maka background judul widget blog Anda adalah hijau muda.

Center= Ganti untuk mengubah rata teks. Ganti menjadi left untuk rata kiri, dan right untuk rata kanan.

Membuat Widget Related Post Dengan LinkWithin

Related Post merupakan widget yang berfungsi sebagai alat navigasi blog. Widget related post dapat menampilkan artikel terkait, karena arti related post dalam bahasa Indonesia berarti "Artikel Terkait". Dalam alat navigasi, widget related post ini menjadi yang cukup berpengengaruh. Letak widget ini biasanya berada di bawah postingan blog. Sehingga apabila seseorang yang membaca artikel Anda telah selesai, maka mereka akan menjumpai widget related post ini.

Dalam pembuatan widget related post, LinkWithin menjadi web yang dapat disebut sebagai "Related post generator" dan selalu diandalkan  orang yang ingin membuat widget related post.Tampilan widget related post ini elegan, dan mudah di pasang di blog. LinkWithin sendiri dapat membuat widget related post dengan thumbnails, sehingga apabila artikel Anda mempunyai gambar, maka akan ditaruh diatas judul posting dalam widget related post. Sehingga saya sarankan untuk menggunakan minimal satu gambar dalam artikel Anda jika Anda ingin widget related post Anda bagus. Kira-kira seperti ini tampilan widget Related Post:

Langkah 1 Kunjungi LinkWithin.

Langkah 2 Tuliskan alamat email , URL Blog , Platform Blog, dan berapa artikel yang akan ditampilkan dalam related post. Centang jika blog Anda backgroundnya gelap, dan jika sudah klik Get Widget!. Untuk platform blog, disarankan untuk platform pilih yang Other.

Langkah 3 Copy kode disana. Buka Template kemudian Edit HTML. Paste kode yang tadi diatas kode </body>.

Langkah 4 Simpan Template.