Modifikasi Kotak Pencarian (Search Box) Dengan Background dan Button Pada Blogger

Sebagai kelanjutan dari postingan sebelumnya yaitu Cara Edit Search Box (Kotak Pencarian) Pada Blogger, kali ini kita akan berikan script program untuk modifikasi kotak pencarian searchbox dengan mengatur gambar latar (background) dan tombol pencarian(button search) . Disini kita akan bahas dua kotak searchbox dengan gambar latar dan button yang berbeda, yaitu :

Lansung saja :

1. Kita sediakan gambar latar (background) dan gambar tombol, seperti gambar berikut :

Kotak Search box pertama :

•  Button Search kondisi normal : 

• Button Search kondisi aktif :

• Background Search box :

Untuk Search Box yang kedua , sebagai berikut :

•  Button Search kondisi normal : 

• Button Search kondisi aktif :

• Background Search box :

Dan kemudian kita upload ke blogger sehingga mendapatkan link dari gambar tersebut seperti yang sudah dijelaskan pada postingan Cara Mempercantik Tampilan Blockquote Pada Blogger.

2. Berikutnya sama seperti yang sudah dijelaskan pada postingan Cara Edit Search Box (Kotak Pencarian) Pada Blogger, copy program dibawah dan paste pada widget HTML/Script.

Adapun untuk program searchbox seperti seacrh box dibawah ini adalah :

Script programnya adalah sebagai berikut :

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TBpOH-5PjEmMstQrnmTTFph6s6vP1zmeyyDeAXaWfvd2Z_ee3MwHSbnD7scmUkj6xY1-YR-9Y0W4hVWpiwIekpGEwEtOOldtbVAPlGUGL2wGGHiDNn3QSDXIsbkch5lWftib5jDzoZ0/s1600/searchboxelips.png)
no-repeat;height:30px;width:200px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:none}
#searchbox input[type="text"]
{
background:transparent;
margin:0px 0 0 12px;
padding:5px 0;
border-width:0;
font: 14px "Arial",sans-serif;
width:77%;
color:#828282;
display:inline-table;
vertical-align:top
}
#button-submit
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsYZCaptZiajLVBhCW5Wr8CepUih8-Pts40cdiIFe8VIE25KSi6D9XAhGgPt18d6ymOsIrBy1_xQK7iiRLiC2VnsD5w0Xghu-PW9qqPLMN360BpFcxnJygQw-CrNPV8dHyVz5CAYIhmk/s1600/search.png)
no-repeat;border-width:0;cursor:pointer;width:33px;height:30px
}
#button-submit:hover{
background:url(href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocqgRy5D3LqUkCpdcmkXd7KhgRXLt9EIJkLiCT9mV-pKlt_Cuqmxfl76s0XRYhkxwPhNSDnFwikzmue8JkHaTmPDXhyxumDf0lg9SaU6ZKuZi45JRGyN09cl8oEBZ1vYBbagA9oS_39I/s1600/searchhover.png) no-repeat}
#button-submit::-moz-focus-inner{border:0}
</style>
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="search..." size="15" type="text" /><input id="button-submit" type="submit" value="" />
</form>

Dan untuk search box kedua seperti dibawah ini, scriptnya adalah sebagai berikut :

Script programnya adalah :

<style type="text/css">#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmWqEj2Aicqkv9C93Cz1p81JOO8Is35UU2GLjhfAKtPaih2nf_w5vgMCrVVFPqliYS9nvWEuXsSRyoYhVgzh0zMHsjtIk9zQacr-Xl4g3kXqOlSFBug5SMZPUEoSm8mDCDlJ94214WLbF/s1600/searchboxarrow.png)no-repeat;height:60px;width:200px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:15px 0 0 12px;padding:5px 0;border-width:0;font: 14px Arial,sans-serif;width:63%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqiwrIooPxeN5cqxlJDMjGsdBPn1PfOWVCme5qt36rfnoYzUb3VddeNeq17cMGqRyC-AlEzckZWmAYTUSq7hq-GSbNa-_BsRSuFzxE24n1p_vzEMEbMzosuejgZ2ETWuJqcO9ItFtNWV6/s1600/searchbig.png)no-repeat;border-width:0;cursor:pointer;width:60px;height:60px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhub8On11gEgYdQWrkN_nKBixD8iDs1tQhjxj8RCNUJlavXZVzjzJWBLIpFynI_N6OuaPr5iCnlt9wfcmqqqgB1FMxhNJLyondhstWHT7Vg-gQfuZiTfst1JWlnDEqFwyGURjVSdqcb3961/s1600/searchbighover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}</style><form action="/search" autocomplete="off" id="searchbox5" method="get"><input name="q" placeholder="search..." size="15" type="text" /><input id="button-submit5" type="submit" value="" /></form>

Selamat mencoba

Read more »

Cara Edit Search Box (Kotak Pencarian) Pada Blogger

Umumnya sebuah blog dilengkapi dengan kotak pencarian (Search Box), yang fungsinya adalah untuk membantu pengunjung mendapatkan artikel postingan pada blog kita yang topiknya sesuai dengan kata kunci yang dientrikan. 

Berbagai variasi dan gaya banyak diterapkan pada search box yang disesuaikan dengan template blog yang digunakan. Secara default, blogger sendiri sudah menyediakan widget untuk kotak pencarian (search box) namun tampilannya sangat sederhana dan kurang menarik. 

Disamping bawaan dari Blogger, beberapa template juga menyediakan search box yang disesuaikan dengan tema tempalatenya, sehingga lebih menarik, tapi belum tentu sesuai dengan selera dan keinginan kita. 

Pada posingan kali ini, kita akan kupas tuntas cara edit kotak pencarian (search box) sehingga dapat disesuaikan dengan selera kita masing-masing. Postingan ini bukan sekedar menyediakan potongan script yang kemudian di copy dan dipaste pada bagian tertentu sesuai dengan petunjuk yang diberikan seperti kebanyakan kita temui pada blog – blog lain yang membahas cara edit kotak pencarian (search box).

Untuk melakukan edit search box (kotak pencarian) pada blogger template, sebenarnya bisa dilakukan dengan dua cara, yaitu lansung ke program utama pada script thameplate sendri melalui menu edit HTML atau melalui Widget HTML/JavaScript yang sudah disediakan oleh blogger.

Untuk postingan kali ini kita kan menggunakan widget HTML/JavaScript untuk meletakkan hasil edit kotak pencarian (Search Box) tersebut. Artikel ini akan kita kupas tuntas cara edit search box (kotak pencarian) pada blogger, kali ini kita akan mencoba bahas script tersebut baris demi baris sehingga pada akhir postingan ini kita dapat membuat sendiri search box sesuai dengan keinginan dari pada hanya sekadar copy – paste saja.

Berikut cara edit kotak pencarian search box :

1. Buka Dashboard Blogger Blogspot, pilih tata letak, tambahkan widget HTML/Script, seperti gambar dibawah ini :

2. Copykan program dibawah ini pada Widget HTML/JavaScript, seperti berikut :

5. Save

Untuk program yang akan dicopykan pada widget HTML/JavaScript pada langkah 4 diatas adalah seperti dibawah ini :

<style type="text/css">
input:focus::-webkit-input-placeholder {color: transparent}
input:focus:-moz-placeholder {color: transparent}
input:focus::-moz-placeholder {color: transparent}
#searchbox input {outline: none}
#searchbox input[type="text"] {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWq2bTgN0wLRk4rhRNiA8vDn8Jpxt-2zmuIHhSLFYYyJGRXj9nKNSswtu9WxY4bB1KvEaJeRsgDKlFpT5zNRo189hv4HoKm45Ktg7ARqv4JQfg6ta7VETfHJFIwn7VrB0JjiPgQSvYxFz/s1600/search-dark.png) no-repeat 10px 6px #fff;
  border-width: 2px;
  border-style: solid;
  border-color: #006393;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  font: bold 12px Arial, Helvetica, Sans-serif;
  color: #bebebe;
  width: 200px;
  padding: 8px 15px 8px 30px
}
#button-submit {
  background: #006393;
  border-width: 0;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  padding: 9px 0;
  width: 60px;
  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  color: #f3f3f3;
}
#button-submit:hover {background: #0063bf}
#button-submit:active {background: #5b5d60};
  outline: none
}
#button-submit::-moz-focus-inner {border: 0}
</style>
<div style="text-align: center;">
<form id="searchbox" method="get" action="/search">
  <input name="q" type="text" size="15" placeholder="Type here..." />
  <input id="button-submit" type="submit" value="Search" /></form>
</div>

Dan hasil dari program diatas adalah sebagai berikut :

Penjelasan Program :

1. Script diatas sebenarnya dibagi atas 2 bahasa program yaitu :

• CSS untuk pengaturan tampilan, seprti warna, lebar, tinggi, margin, border dan lain lain. Yang kedua adalah HTML untuk eksekusi perintah. Script CSS dimulai dari <style type="text/css"> dan ditutup dengan </style>
• Yang kedua adalah HTML untuk eksekusi program yang ditandai dengan warna abu-abu

2. Warna Biru yang terdiri dari 3 baris script dengan tujuan agar tampilan warna search box yang kita buat tidak berubah ketika dibuka dengan browser berbeda. Sementara Placeholder berfungsi untuk menempatkan teks entry kita tepat ditengah area box

• input:focus::-webkit-input-placeholder {color: transparent} untuk Chrome/Opera/Safari
• input:focus:-moz-placeholder {color: transparent} untuk Firefox 19+
• input:focus::-moz-placeholder {color: transparent} untuk Firefox 18

3. Warna kuning, #search input , bagian ini adalah untuk membuat kotak berupa elips tempat kita meng-entry-kan kata kunci yang akan dicari.

Link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWq2bTgN0wLRk4rhRNiA8vDn8Jpxt-2zmuIHhSLFYYyJGRXj9nKNSswtu9WxY4bB1KvEaJeRsgDKlFpT5zNRo189hv4HoKm45Ktg7ARqv4JQfg6ta7VETfHJFIwn7VrB0JjiPgQSvYxFz/s1600/search-dark.png  adalah untuk menampilkan kaca pembesar kecil dan tidak ada pengulangan dengan perintah no-repeat dengan posisi 10px 6px  dan warna #fff.

  border-width: 2px;

  border-style: solid;

  border-color: #006393;

Perintah border sesuai dengan namanya adalah untuk mengatur, ketebalan, solid dan warna garis border (batas). Untuk membuat kotak menjadi elips, maka 4 sudut kotak diberi radius dengan perintah sebagai berikut :

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

  border-bottom-left-radius: 30px;

  border-bottom-right-radius: 30px;

Untuk mengatur lebar search box kita gunakan script : width: 200px; dengan jarak padding: 8px 15px 8px 30px

4. Warna Ungu #button-submit   , adalah tombol untuk melakukan eksekusi pencarian.

Sama halnya dengan #search input, pada #button-submit juga diatur lebar, warna, dan border-radius untuk membuatnya menjadi elips.

5. #button-submit:hover {background: #0063bf}; adalah untuk perubahan tombol search ketika kursor atau mouse kita dekatkan kearah tombol.

6. #button-submit:active {background: #5b5d60};  adalah untuk perubahan warna tombol search ketika tombol tersebut di klik.

7. #button-submit::-moz-focus-inner {border: 0} adalah untuk menyesuaikan tombol ini ketika menggunakan browser Firefox

8. Perintah HTML  dimulai dengan <div style="text-align: center;">  untuk memposikan tombol search tepat ditengah.

 <form id="searchbox" method="get" action="/search">  untuk membentuk form dengan memanggil ID Search box yang style nya sudah kita tetapkan padascript CCS ebelumnya , yaitu : #searchbox. 

Perintah yang akan dilakukan adalah search melalui script action="/search"

<input name="q" type="text" size="15" placeholder="Type here..." />  adalah script mendeklarasikan kata kunci yang kita ketik dengan kode q, dengan besar huruf adalah 15, dan pengaturan penempatannya menggunakan placeholder.

<input id="button-submit" type="submit" value="Search" /></form>  adalah perintah search yang akan dilakukan ketika tombol  #button-submit  ditekan .

Demikian, penjelasan terkait program diatas.

Dilain kesempatan akan kita bahas tombol search box (kotak pencarian) yang berbeda, seperti sebagai berikut :

Read more »

Cara Membagi Postingan Jadi Beberapa Halaman Pada Blogger

Cara Membagi Postingan Jadi Beberapa Halaman Pada Blogger 

Sering kita melihat pada blog – blog terkenal, sebuah artikel yang panjang dibagi menjadi beberapa halaman. Meskipun artikelnya panjang, kita yang membacanya tidak merasa jenuh.

Hal ini dikarenakan disamping tulisan dan topik yang dibahas dan cara penyajian yang baik ada satu komponen penting yang ikut menunjang hal tersebut, yaitu tampilan susunan artikel tersebut yang dibagi jadi beberapa halaman sehingga pembaca pun tidak terasa berat dan bosan membacanya.

Kenapa Sebuah Artikel Harus Dibagi Jadi Beberapa Halaman 

Seperti yang telah disebutkan diatas, hal ini bertujuan untuk meningkatkan ketertarikan pembaca, karena jika sebuah postingan terlalu panjang, akan ada kemungkinan timbul rasa bosan pada pembaca. Yang kedua adalah karena hal ini sangat bagus untuk search engines, karena memudahkan search engine menjelajahi postngan tersebut.

Oleh karena itu, jika sebuah artikel yang kita posting pada blog terlalu panjang, akan lebih baik postingan tersebut dibagi menjadi beberapa halaman. Dan bagaiman cara membagi sebuah postingan menjadi beberapa halaman akan coba kita bahas pada postingan ini.

Cara Membagi Postingan Jadi Beberapa Halaman 

Berikut akan kita bahas langkah – langkah membagi postingan menjadi beberapa halaman pada postingan blogger. Akan ada beberapa tambahan script untuk hal tersebut seperti sebagai berikut :

1. Memeriksa script jquery pada template 

Sebagai langkah pertama, buka dashboard blogger >> Template >> Edit HTML. Setelah tampilan script HTML ditampilkan, carilah script jquery. Tujuannya adalah memastikan apakah template yang sedang kamu gunakan untuk themes blog sudah dilengkapi dengan script jquery. Bila telah dilengkapi dengan script jquery, maka script tersebut akan seperti script dibawah ini :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Angka 2.0.0 yang diberi warna merah merupakan versi jquery, bisa saja dari hasil pencarian script jquery pada template kamu, versinya adalah 1.8.0 atau yang lain. Perbedaan tersebut tidak jadi masalah. Tapi bila template yang sedang kamu gunakan pada blog tidak ditemukan script jquery, silahkan copy script jquery diatas, dan tambahkan tepat diatas script </head>

2. Menambahkan program button dengan jquery

Masih pada tampilan HTML, cari tag dengan tulisan </head>, copy sript program button jquerry dibawah dan tambahkan tepat diatas tag </head> .

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function()
{
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function()
{
jQuery('.content_1').fadeOut('fast');
 jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function()
{
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Penjelasan program :

Pada script diatas kita menggunakan jquery, sehingga terjawab kenapa kita perlu memastikan templates yang digunakan sudah menyediakan fitur jquery.

Dari script diatas, function jquery dibagi atas tiga , yaitu button 1, button 2 dan button 3 (button = tombol ), sesuai dengan warna biru, ungu dan hijau.

Perhatikan kelompok script berwarna biru, ketika button 1 dipilih (click), yang terjadi kemudian adalah :

jQuery('.button_1').click(function() = button 1 di pilih (click)
{
jQuery('.content_1').fadeIn('slow'); = artikel untuk halaman 1 muncul
jQuery('.content_2').fadeOut('fast'); = artikel untuk halaman 2 hilang
jQuery('.content_3').fadeOut('fast'); = artikel untuk halaman 3 hilang
jQuery(this).css('background','#F4655F'); = button 1 aktif,  background warna merah
jQuery(this).css('color','#fff'); = button 1 aktif, nomor berwarna putih
jQuery('.button_2').css('background','#fff'); = button 2 tidak aktif, backgorund putih
jQuery('.button_2').css('color','#F4655F'); = button 2 tidak aktif, nomor merah
jQuery('.button_3').css('background','#fff'); = button 3 tidak aktif, warna putih
jQuery('.button_3').css('color','#F4655F'); = button 3 tidak aktif, warna merah

return false;

Pada kelompok button 2 dan button 3 penjelsananya sama dengan button 1, yang membedakannya adalah button mana yang aktif dan artikel mana yang dipanggil.

Pada script untuk kelompok button 2, tombol yang aktif adalah button 2 , button 1 dan button 3 tidak aktif, dan artikel yang muncul adalah artikel untuk halaman 2. Begitu pula untuk script kelompok button 3, tombol yang aktif adalah button 3 , button 1 dan button 2 tidak aktif, dan artikel yang muncul adalah artikel untuk halaman 3.

Untuk pilihan warna latar (background) ketika tombol aktif adalah merah (#F4655F) dengan warna nomor halaman adalah putih (#FFF). Dan untuk tombol tidak aktif adalah kebalikannya, background berwarna putih (#FFF) dengan warna nomor halaman berwarna merah (#F4655F).

Kamu dapat menyesuaikan warna tersebut dengan warna pada template masing – masing.

Oh ya, karena ada 3 button, berarti artikelnya dibagi jadi 3 halaman. Kalau mau dua tinggal disesuaikan saja dengan programnya, yaitu menghapus semua perintah untuk button 3 . Begitu pula kalau mau menjadikannya 4 atau 5 atau lebih, tinggal menambahkan button.

3. Mengatur style tombol halaman (button 1, button 2 dan button 3)

Pada langkah no. 2 kita telah mengatur urutan kerja dari masing-msing button yang nantinya akan memunculkan artikel sesuai dengan nomor button yang dipilih ( click ) oleh pembaca.

Pada langkah ketiga ini, kita akan mengkreasikan bentuk button (tombal) yang akan dimunculkan pada setiap halaman.

Lansung saja, masih pada tampilan HTML, cari teks dengan tulisan ]]></b:skin>  , kemudian Copy program dibawah ini, dan tambahkan tepat diatas script ]]></b:skin>  .

post-pagination {
 margin: 40px auto;
 text-align: center;
 width: 100%;
 float:left;
}
.button_1, .button_2, .button_3
{
 border: 2px solid #f4655f;
 font-weight: 900;
 padding: 6px 36px;
 color:#f4655f;
 transition:ease 0.69s !important;
}
.button_1:hover,
.button_2:hover,
.button_3:hover
{
 background: none repeat scroll 0 0 #f4655f;
 color: #fff;
 text-decoration: none;
}

Program diatas adalah untuk mengatur tebalnya tombol (button), jenis huruf, tebalnya garis , warna dan lain lain agar tombol yang ditampilkan lebih menarik.

Silahkan berkesperimen untuk mendapatkan tampilan button ( tombol )s esuai selera.

Oh ya, setelah selesai menambahkan script pada langkah 1, 2 dan 3 jangan lupa di save.

4. Menampilkan page break pada artikel 

Langkah terakhir adalah menerapkannya pada artikel postingan. Pilih salah satu artikel yagn akan dibagi menjadi beberapa halaman, ( dalam contoh diatas menjadi 3 halaman ) atau bisa juga menerapkannya pada artikel postingan baru. Pada tampilan HTML di postingan , tambahkan script berikut :

<div class="content_1">
Artikel untuk halaman pertama
</div>
<div class="content_2" style="display: none;">
Artikel untuk halaman kedua
</div>
<div class="content_3" style="display: none;">
Artikel untuk halaman ketiga
</div>
<div class="post-pagination">
<a class="button_1" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">1</a>
<a class="button_2" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">2</a>
<a class="button_3" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">3</a>
</div>

Pada script diatas, artikel diisikan pada masing - masing bagian dengan maksimum halaman yang dibentuk sebanyak 3, sesuai dengan jumlah button yang kita tambhaan pada program HTMl pada langkah 2 dan 3.

Bila ingin membaginya lebih dari 3 maka pada langkah 2 , 3 dan 4 mesti ditambahkan scriptnya. Gampang kok, tinggal mengikuti contoh script yang sudah ada sebelumnya.

Sedangkan untuk membuat halaman menjadi 2, tidak perlu dimodifikasi script yang sudah kita tambahkan pada langkah 2 dan 3. Yang kita lakukan hanya cukup menghapus class conten no 3 dan button no 3 pada script langkah no. 4 menjadi seperti berikut :

<div class="content_1">
Artikel untuk halaman pertama
</div>
<div class="content_2" style="display: none;">
Artikel untuk halaman kedua
</div>
<div class="post-pagination">
<a class="button_1" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">1</a>
<a class="button_2" href="https://www.blogger.com/blogger.g?blogID=4273453835169366958#">2</a>
</div>

Sebagai contoh penerapan script ini, postingan ini sudah dibagi menjadi 2 halaman berdasarkan script diatas. Tombol ( button ) dan perpindahan halamannya dapat kamu lihat pada postingan ini. Selamat mencoba…

1 2

Read more »

Cara Mempercantik Tampilan Blockquote Pada Blogger

Cara mempercantik tampilan blockquote pada blogger – Sudah tahu blockquote ? Blockquote sering kita lihat pada sebuah artikel postingan blog, biasanya terletak ditengah-tengah artikel berupa beberapa kalimat atau potongan script yang diberi kotak khusus dan kadang kala dengan tampilan yang berbeda dengan tulisan pada artikel tersebut. Tujuannya adalah untuk menandakan tulisan yang didalam kotak tersebut sangat penting dan perlu diperhatikan. Itulah blockquote. 

Pada awalnya Blockquote pada pemograman adalah elemen html yang berfungsi untuk memperjelas bagian tertentu dari teks ataupun kalimat yang diambil dari website lain atau sumber lainnya. 

Tapi saat ini penggunaannya banyak dimanfaatkan untuk hal lain seperti menampilkan rumus matematika dari suatu artikel yang membahas masalah keteknikan ataupun untuk menampilkan beberapa baris script pada artikel yang membahas masalah pemograman dan lain sebagainya.

Meskipun penggunaannya tidak lagi hanya sekedar menampilkan kutipan kalimat, penggunaan blockquote pada sebuah artikel sangat efektif untuk membantu penekanan pada sebuah kalimat ataupun menandakan kalimat atau teks tertentu tersebut sangat penting dan harus menjadi fokus utama pembaca. 

Berikut beberapa blockquote ada yang tampil seadanya , memakai kode tanda kutip atau menggunakan bawaan blogger sendiri. 

Dengan melakukan sedikit editan pada program, blockquote dapat tampil lebih cantik dan tentu saja kesan professional dari sebuah blog akan kelihatan. 

Berikut beberapa contoh blockquote yang sering kita lihat ditengah-tengah artikel postingan. 

Dan ini tampilan blockquote hasil editan saya sendiri : 

Cara mempercantik tampilan blockquote pada blogger, tidak susah.
Dengan blockquote baru tampilan blog kelihatan lebih professional. 

Tertarik untuk membuatnya ? 

Ok, yang pertama kamu harus lakukan adalah membuat gambar untuk tampilan blockquote dengan ukuran sesuai keinginan, kebetulan ukuran yang saya buat adalah 34 x 276 type file PNG , seperti dibawah ini : 

Langkah berikutnya upload ke blogger melalui postingan baru, misalnya draft. Boleh juga postingan yang lain, tujuannya adalah untuk mendapatkan link gambar yang kita upload tersebut. 

Setelah itu tampilkan pada postingan, kemudian pilih model HTML sehingga pada tampilan model HTML terlihat link gambar yang kita upload. Copy link tersebut. 

Setelah link gambar didapat, buka menu edit html, cari kode ]]></b:skin>  .

Tepat diatas kode ]]></b:skin>  tambahkan script dibawah ini .

.post blockquote{-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTDpSsGBYgRIDb8vxWV6oGtMbYkMH4y2qnrA9bVzX7h4R1G-4tFprvwkvwBX2ZzdFr7Wdxwdfi8u26DgLluereLtxsdbS1lvcSMiYk6KJyEg2eHxp8t9VSZfpCzescnLAqUuxHdgpsWyY/s1600/blockquoteacc.png);/*ganti dengan link gambar kamu*/
background-position: 0% 0%;
background-repeat: no-repeat repeat;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221);
border-style: solid;
border-top-left-radius: 6px; /* untuk mengatur bentuk sudut pada kotak segiempat blockquote*/
border-top-right-radius: 6px; /* untuk mengatur bentuk sudut pada kotak segiempat blockquote*/
border-width: 1px;
color: black;
font-family: Consolas, 'Courier New', Monaco, Courier, monospace;
line-height: 18px;
margin: 0px 20px;
overflow: hidden; padding: 10px 20px 10px 45px;} 

Save dan coba buka artikel kamu yang menggunakan quote. Menarik bukan ??? 

Besarnya huruf, warna, bentuk sudut segi empat, besarnya radius dan lain sebagainya dapat kamu atur sesuai keinginan. Coba saja bereksperimen dengan mengganti parameter tersebut sehingga kamu mengerti fungsi – fungsi dari masing – masing parameter diatas. 

Untuk hal yang meragukan, silahkan tanyakan lansung lewat komentar dibawah artikel ini.

Selamat mencoba dan bereksperimen.

Terima kasih.

Read more »

Tips Memasang Google Map di Postingan Blog

Tips Memasang Google Map di Postingan Blog - Kadang kala pada sebuah postingan kita memerlukan tampilan peta yang menjelaskan lokasi dari tempat yang sedang dibahas atau lokasi khusus sehingga informasi peta yang kita tampilkan dapat membantu pengunjung blog yang kebetulan membutuhkan penjelasan detail tentang lokasi tersebut. 

Disamping itu, dengan dilengkapi informasi yang detail, postingan kita akan terasa lebih professional dan akan menambah kridibilitas blog dimata pengunjung. Untuk menampilkan peta pada postingan bisa dilakukan dengan meng-capture peta sehingga tampilan peta di postingan hanya berupa sekedar gambar mati yang tidak bisa diapa-apa kan oleh pengunjung. 

Ada baiknya tampilan peta yang kita tampilkan bersamaan dengan postingan tersebut berupa applikasi yang aktif sehingga pembaca dapat mengutak atik nya. Dengan kata lain aplikasi tersbut diembed dalam postingan. 

Google Map merupakan penyedia layanan peta paling popular dan terlengkap dari Google. Sehingga Google Maps inilah yang akan kita pilih untuk di pasang pada postingan. Untuk memasng tampilan Google Maps untuk lokasi tertentu pada sebuah postingan, langkah langkahnya adalah sebagai berikut : 

1. Mencai Lokasi Yang Akan Dipasang Pada Postingan 

Hal yang pertama yang harus dilakukan tentu saja mengunjungi situs Google Maps yaitu : Https:// maps.google.com dan meng-entri-kan lokasi yang ingin kita tampilkan pada kotak pencarian disudut kanan atas ( panah biru ).  Seperti pada gambar dibawah : 

Biasanya Google Map telah menandai berupa icon berwarna merah dan membuat ulasan tentang lokasi tertentu ( panah merah ) , tetapi apabila lokasi yang kita inginkan belum dikenali oleh Google Map dikarenakan tidak dikenal dan tidak umum, maka kita perlu membuat penjelasan terkait lokasi tersebut dan menandainya sendiri. 

2. Mengambil link dari tampilan peta pada Google Maps

Setelah ditemukan lokasi yang diinginkan, kita memerlukan link tampilan peta lokasi tersebut dengan mengklik gambar tiga buah garis datar tepat disebalah kiri kotak pencarian tempat kita mengentrikan lokasi yang akan dicari pada langkah 1 diatas ( panah hijau ). 

Setelah mengklik 3 garis datar tersebut akan muncul tampilan drop down menu dan kilik pada tampilan menu Bagikan atau Sematkan Peta ( panah kuning ).  

Ketika pilihan menu Bagikan atau Sematkan Peta diklik, akan muncul tampilan pop-up seperti gambar dibawah. 

Pastikan tab Sematkan Peta dipilih (aktif) ( panah coklat ). Disebelah kiri pada Popup tersebut terdapat pilihan ukuran, kecil, dedang, besar dan ukuran khusus. Pilihlah ukuran yang sesuai dengan lebar kolom postingan pada blog . 

Saran saya , pilihlah ukuran khusus, karena ukuran P x L dapat dientrikan sesuai dengan lebar kolom untuk postingan blog masing – masing ( panah ungu ). Disebelah kanan dari menu pilihan ukuran, terdapat link iframe yang akan digunakan untuk ditampilkan pada postingan blog. Copy seluruh script teks link tersebut. 

3. Memasang Script pada Postingan Blog 

Langkah selanjutnya adalah memasang script yang telah kita copy pada langkah no 2 pada postingan.

Setelah mendapat lokasi yang diinginkan, selanjutnya adalah memasang kode embed yang tadi dicopy. 

Pasang script tersebut pada postingan yang akan dilengkapi dengan tampilan Peta Google Maps. Saat mem-paste script tersebut harus pada model HTML ( panah hitam ). Karena kebetulan blog ini menggunakan blogger sebagai platformnya, maka untuk menampilkannya script tersebut harus di paste pada mode HTML, seperti pada gambar dibawah ini. 

Untuk selain blogger, tinggal mencantumkan tag <HTML> pada script tersebut atau disesuaikan dengan host yang digunakan.

Hasil dari pemasangan peta dari Google Map ini dapat dilihat pada tampilan dibawah ini. Kebetulan saya memilih lokasi Bakmie 12, karena lokasi makanan favorit saya. Selamat mencoba … Salam

Read more »

9 Tips Ampuh Memilih Nama Domain Yang Tepat

9 Tips Ampuh Memilih Nama Domain Yang Tepat - Persaingan Blogging dari tahun ke tahun akan terus bertambah intens dan lebih kompetitif. Untuk itu diperlukan rencana yang tepat untuk menghadapi persaingan itu. Bagi kamu yang akan memulai sebuah blog, sebagai pondasi awal untuk masuk kedalam persaingan tersebut adalah memilih nama domain yang tepat. 

Karena nama domain inilah yang akan terus digunakan sepanjang hidup blog itu. Nama domain sebuah blog seperti sebuah merek dagang yang menjelaskan tentang blog tersebut. 

Meski nama domain sebuah blog tidak terikat pada aturan – aturan tertentu, namun pemilihan nama yang tepat sangat menentukan karena lebih dari 80% pengunjung datang kesebuah blog dikarenakan nama domain blog. 

Pada artikel kali ini, ada 9 tips ampuh yang dapat dilakukan dalam memilih nama domain yang tepat untuk sebuah blog. 

1. Pakai domain Dot com (.com) 

Setelah nama domain ditetapkan, pemilihan ekstensi juga perlu diperhatikan. Hindarilah menggunakan ekstensi yang lain, selain dot Com (.com). Ekstensi selain dot Com, seperti dot edu (.edu) , dot blog (.blog), dot photography (.photography) , dot ly (.ly) kelihatan bagus dan menarik.

Berdasarkan pengalaman selama ini, blog dengan ekstensi dot com (.com) merupakan blog memiliki tingkat kepercayaan yang lebih ditinggi dimata pengguna maupun pengunjung. Ditambah lagi dengan tujuan untuk mendapatkan ranking di search engine Google, maka hindarilah pemakaian ekstens yang kurang dipercayai. 

2. Gunakan Kata kunci ( Keywords ) 

Blogging adalah semua hal tentang mencurahkan pikiran dan ide dalam sebuah artikel yang kemudian diposting pada blog. 

Untuk menjaring pengunjung agar datang ke blog dan membaca postingan tersebut, disisipkan beberapa kata kunci yang relevan dengan topik yang ditulis. 

Jika nama domain yang digunakan mengandung kata kunci yang banyak dicari pada search engine seperti Google, maka kesempatan untuk mendapatkan jumlah pengunjung yang lebih akan bertambah besar. 

3. Sederhana 

Kalau di poin sebelumnya menggunakan nama domain yang mengandung keyword yang banyak dicari pada search engine, maka nama domain yang singkat dan sederhana juga bisa dijadikan sebagai alternative pemilihan. Hal ini dikarenakan mudah diingat dan diucapkan 

Dengan nama domain yang singkat, akan membantu sebuah blog untuk mendapatkan peningkatan pada jumlah lalu lintas pengunjung. 

Contoh yang cukup jelas adalah eBay.com. Siapa yang tidak kenal eBay.com sebagai situs online shopping. Nama domain eBay.com sangat singkat dan sederhana sehingga mudah diingat dan mudah diucapkan. 

4. Unik 

Nama domain sebaiknya berhubungan dengan produk yang ditawarkan pada sebuah blog. 

Jika sebuah blog membahas tentang golf, dan disuatu tempat seseorang sedang mencari informasi mengenai stick golf, dan mengentrikan kata golf pada mesin pencari, maka kesempatan orang tersebut menemukan blog yang membahas tentang golf akan semakin tinggi jika blog tersebut menggunakan kata golf pada nama domainnya. 

5. Jangan menggunakan symbol hyphens (-) 

Jangan menggunakan symbol Hyphens (-) dalam sebuah nama domain. Karena susah diingat dan bisa menyebabkan penulisan yang salah ketika pengunjung mengetikan nama domain tersebut pada browsernya. Pengetikan nama domain yang salah akan mengarahkan mereka keblog yang lain, sehingga pengunjung akan menjadi berkurang. Dan imbasnya juga akan menurunkan jumlah lalu lintas pengunjung ke blog tersebut. 

6. Hindari huruf Ganda 

Nama domain seharusnya tidak menggunakan huruf yang sman saling berdekatan, karena akan membingungkan pengunjung dan pada kasus tertentu akan mengalihkan calon pengunjung yang seharusnya menuju ke blog kita , tetapi karena salah ketik malah beralih kesitus yang lain. 

Misalkan nama domain sebuah blog adalah bloggoo.com , kesalahan ketik pada nama blog seperti blogoo.com, bloggo.com akan mengarahkan pengunjung ke blog yang lain. Dan akan mengurangi lalu lintas ke blog itu sendiri. 

7. Jangan menggunakan kombinasi huruf dan angka dengan makna berbeda 

Just4u.com ; blog2good.com dan lain sebagainya menggunakan kombinasi angka atau huruf yang cara pembacaannya hanya sipengelola blog yang tahu. 

Kesalahan penulisan nama domain oleh pengujung akan menyebabkan penurunan pada jumlah lalu lintas pengunjung menuju blog tersebut. Seperti www. Just4U.com , ditulis menjadi www.justforyou.com, sehingga pengujung diarahkan ke blog yang lain. 

8. Jangan Terlalu Spesifik 

Trik lain yang dapat digunakan untuk memilih nama domain adalah membuat nama domain yang sedikit lebih umum dan tidak terlalu spesifik. Hal ini untuk mengantisipasi pergeseran topik bahasan blog dimasa yang akan datang sehingga bisa menarik pengunjung baru. 

Seperti nama sebuah blog yang membahas tentang golf, sebaiknya mencantumkan kata – kata sport pada nama domainnnya, sehingga topik blog nantinya tidak terkunci mengenai golf saja, meskipun yang kita bahas diblog tersebut hanya tentang golf. Tetapi masih menyediakan kesempatan untuk membahas olah raga lain, sehingga nama domain masih ada relevansinya dengan isi blog. 

9. Be Original 

Ilustrasinya seperti berikut, blog terkenal dengan nama domain www.detik.com dan untuk menggunakan popularitas blog tersebut dipakai nama bdomain www.detiks.com , atau www.detikku.com. 

Penggunaan nama domain tersebut sah – sah saja, tetapi yang pasti sangat merugikan. Karena, bila bicara detik pasti pengunjung memilih detik.com bukan detiks atau detik sehingga trafik yang diharapkan akan ikut terangkat karena menggunakan nama domain blog yang terkenal malah berbalik menjadi merugikan. 

Seperti yang dijelaskan diawal, persaingan didunia blogging dari tahun ketahun semakin ketat, perlu dilakukan perencanaan yang baik agar sebuah blog dapat bertahahn dan bersaing. Pemilihan nama blog harus dipikirkan dan direncanakan dengan matang agar dapat terus bersaing.

Read more »

Filosofi Climbers Pada Blog

Filosofi Climbers : Secara sederhana, kehidupan ini bisa diibaratkan sebagai pendakian gunung. Paul Stolz membagi manusia menjadi tiga dalam analogi mendaki gunung.

• Quitters, 
• Campers dan 
• Climbers. 

Tipe pertama adalah Quitters, mereka yang keluar dari pertarungan. Orang – orang ini mudah putus asa jika menemui rintangan sehingga jauh dari sukses.

Tipe kedua adalah Campers, mereka ini berhenti ditengah jalan, merasa sudah berhasil meskipun belum memcapai puncak. Dalam kehidupan nyata, orang – orang seperti ini adalah orang yang cepat puas meskipun belum mencapai hasil yang maksimal.

Tipe ketiga adalah Climbers atau mereka yang terus mendaki. Orang – orang ini selalu berpikiran positif, tidak kenal menyerah, terus melangkah dan berjuang sampai akhirnya mencapai puncak gunung.

Dalam kehidupan nyata, orang – orang inilah yang terus bergerak maju dan melihat tangtangan sebagai peluang. Jika rintangan adalah malapetaka bagi orang lain, maka bagi mereka adalah berkah, karena itulah yang akan membawa mereka naik kepuncak.
Inilah orang – orang yang akan sukses mengejar impian – impiannya.

Tulisan diatas saya baca pada sebuah dinding di salah satu Bank terbesar milik pemerintah. Analogi mendaki gunung untuk tipe – tipe orang tersebut terasa pas untuk menggambarkan perjalanan sebuah situs atau blog yang saat ini tengah saya coba rintis.

Untuk kategori Blog Quitters, saya menggambarkannya sebagai blog yang tidak pernah diurus, di update dan ditinggal oleh pengelolanya.
Pada awalnya blog ini dibuat dengan semangat yang tinggi, dengan impian suatu sasat nanti akan menjadi blog yang dikunjungi banyak pembaca. Namun dalam perjalanannya blog ini tidak pernah diupdate, dan hanya berisi beberapa artikel yang tanggal postingan terbarunya mungkin sudah sekian tahun yang lalu.

Blog ini persis seperti orang yang sedang mendaki gunung, diawal keberangkatan penuh semangat dan keceriaan. Namun karena menemukan halangan berupa semak belukar, kondisi alam , tebing yang curam dan lain sebagainya memutuskan untuk berhenti melanjutkan perjalanannya.

Padahal pendakaian yang baru mereka lakukan masih disekitar kaki gunung.

Tipe blog yang kedua adalah Blog Campers, artinya adalah blog kemping. Blog ini masih dikelola, masih ada update postingan, namun dilakukan sesuka hati pengelolanya. Jadwal postingan yang tidak teratur dan tidak ada niat untuk meningkatkan kualitas blog menjadi lebih baik dari sebelumnya baik dalam hal artikel dan tampilan web menjadi salah satu ciri blog dengan tipe Campers ini.

Blog ini tidak pernah berkeinginan untuk menjadi lebih bagus dari yang sebelumnya. Pengelolanya sudah merasa cukup puas dengan kondisi apa adanya, persis seperti orang yang sedang mendaki gunung namun berhenti di pinggang gunning dan mendirikan perkemahan.

Mereka tidak ada niat untuk melanjutkan perjalanan untuk melanjutkan pendakian, tapi sudah merasa melakukan pendakian dan menikmati kejayaan telah melakukan pendakian meskipun tidka benar – benar melakukan pendakian karena tidak pernah mencapai puncak gunung.

Blog Climbers adalah tipe blog yang ketiga. Blog dengan tipe ini adalah blog yang selalu memberikan yang terbaik untuk pembacanya. Terus memperbaiki kualitas artikelnya, tampilan webnya dan menjadi tempat untuk sumber informasi dan diskusi melalui komentar - komentar dari para pengunjungnya.

Blog ini diibaratkan seperti pendaki gunung yang terus melakukan perjalanan menuju puncak.
Terus kapankah sebuah blog dikatakan telah mencapai puncak ?

Blog dengan tipe climbers tidak pernah mencapai puncak, karena blog dengan tipe ini akan selalu berinovasi untuk menjadi lebih baik. Dan sebenarnya sebuah blog tersebut dikatakan sukses disaat dia terus merintis jalan untuk selalu mendaki sampai kepuncak. Dan momen sepanjang perjalanan menuju puncak itulah sebenarnya kesuksesan sebuah blog dapat dirasakan.

Semoga saya dan anda dapat menghasilkan sebuah blog yang selalu bertipe Climbers.

Read more »