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.

Cara Memasang Widget Alexa di Blog

Jika Anda sudah membuat akun Alexa, tidak lengkap rasanya apabila Anda tidak memiliki widget Alexa. Ya, fungsi dari widget Alexa adalah untuk melihat statistik peringkat blog Anda di mata Alexa di dunia internet internasional. Memang, jika Anda tidak memasang widget Alexa Anda masih dapat melihat peringkat blog Anda di situs resmi Alexa. Namun, cara tersebut kurang praktis. Oleh karena itu, kita harus memasang widget Alexa agar kita dapat melihat peringkat blog kita secara lebih praktis. Namun mungkin akan ada rasa  kebanggan tersendiri juga bagi orang yang memasang widget Alexa dengan peringkat yang sudah bagus. Jadi tunggu apalagi ? Ini dia cara memasang widget Alexa !

1. Kunjungi http://www.alexa.com/siteowners/widgets.

2. Masukkan alamat URL blog Anda pada kolom "Alexa Site Stats Button"(lihat gambar diatas). Setelah itu, klik Build Widget.

3. Copy kode yang disediakan Alexa, terserah Anda mau memilih tampilan yang mana saja. Setelah di copy, masukkan ke Gadget HTML/JavaScript.

4. Klik Simpan. Sekarang lihat perubahannya.

Letakkan Judul Posting Di Depan Nama Blog Untuk SEO

Meletakkan judul posting di depan nama blog bertujuan agar pengunjung dapat dengan lebih jelas melihat apa judul artikel (postingan) yang sedang dibaca. Coba Anda melihat tab browser blog ini, pasti tampilannya adalah judul artikel (postingan) kemudian baru judul blog. Ya, hal ini memang sudah diterapkan di blog ini, karena meletakkan judul artikel di depan nama blog diyakini banyak orang dapat meningkatkan SEO (search engine optimization) karena judul posting yang terpotong oleh judul blog tidak baik untuk SEO. Dan juga kadang-kadang judul artikel kita terpotong pada saat ditampilkan oleh query Google, sehingga dapat memperuburuk SEO blog kita juga tentunya. Oleh karena itu, sangat dianjurkan bagi Anda untuk meletakkan judul posting di depan nama blog.

1. Dari dasbor, ke menu Template.

2. Pilih Edit HTML.

3. Cari kode <title><data:blog.pageTitle/></title>. Untuk mempermudah pencarian, tekan Ctrl+F.

4. Jika sudah ketemu, ganti kode tadi dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

Pengaturan:

Warna hijau = Ganti dengan simbol pemisah antara judul posting dan nama blog.

5. Simpan Template. Sekarang, klik pratinjau untuk melihat perubahan.   

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.