11 Januari 2014

Membuat 2 Jenis Blockquote berbeda pada postingan

Tutorial ini untuk kalian yang ingin membuat dua jenis blockquote yang berbeda pada satu postingan blog. Sebelumnya saya sarankan untuk backup terlebih dahulu template anda agar bisa di-restore jika terjadi kesalahan. Berikut contohnya :

Contoh blockquote pertama. Tutorial ini untuk kalian yang ingin membuat dua jenis blockquote yang berbeda pada satu postingan blog. 
Contoh blockquote kedua. Tutorial ini untuk kalian yang ingin membuat dua jenis blockquote yang berbeda pada satu postingan blog. 
Cara pembuatan :
  • Masuk ke akun blogger anda, pilih link template pada blog yang ingin di edit lalu klik tombol edit HTML disebelah kanan layout.
  • Setelah masuk pada text editor html, tekan ctrl+f untuk membuka kotak pencarian/search lalu ketik blockquote dan tekan tombol search. Biasanya kode css blockquote sudah tersedia dengan nama css "post blockquote". Kurang lebih kodenya seperti dibawah (tergantung gaya css-nya, intinya diawali dengan ".post blockquote" dan ditutup dengan tanda "}").

.post blockquote {
display:block !important;
background: #CFE2F3;
text-align:justify;
font-family:Georgia, Times, "Times New Roman", serif;
border-top: 1px solid #0b944b; 
border-bottom: 1px solid #0b944b; margin: 5px;
}

  • Jika kode belum ada, cari dulu kode ini ]]</b:skin>. setelah itu copy kode diatas tepat diatas kode ]]</b:skin>
  • Setelah itu tambah kode css blockquote kedua. Caranya copy kode css di bawah ini tepat di bawah kode css blockquote pertama tadi.

.post blockquote2 {
display:block !important;
padding:10px 20px;
background: #ffffff;
text-align:justify;
font-family:Georgia, Times, "Times New Roman", serif;
border-top: 2px dashed #000000;
border-bottom: 2px dashed #000000;
border-right: 2px dashed #000000;
border-left: 2px dashed #000000; margin: 5px;
}

  • Perhatikan kode css yang kedua diawali dengan nama .post blockquote2. Setelah itu simpan template anda.
  • Sekarang kita menuju halaman posting. Klik tombol entry baru untuk membuat postingan, ketik sebuah kalimat di text editor anda, lalu blok kalimat tersebut dan klik tombol blockquote (icon kutip dua) pada tombol menu di bagian atas.
  • Setelah itu buat kalimat kedua dan lakukan hal yang sama seperti kalimat di awal, blok kalimat dan klik tombol blockquote.
  • Sekarang klik tombol HTML yang ada disebelah tombol Compose disebelah kiri atas anda untuk melihat kode html pada postingan.
  • Lihat kalimat/text pertama dan kedua yang sudah di-blockquote. Semua text di awali dengan kode <blockquote class="tr_bq">, (class bisa saja tidak ada tergantung jenis template).
  • Untuk membuat masing-masing blockquote berbeda anda tinggal mengubah kode awal blockquote dari salah-satu kalimat menjadi  <blockquote2 class="tr_bq"> agar masing-masing mempunyai gaya yang berbeda. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser