Cara Membuat Quote Otomatis di Postingan Blog dan Penjelasan


Membuat Quote Pada Postingan Blog - Apakah anda tahu quote itu apa? jika anda tidak mengetahui apa itu quote maka dibawah ini akan saya berikan contohnya langsung dihadapan anda, agar anda dapat langsung memahami tanpa harus saya jelaskan secara rinci
Quote artinya adalah tanda kutip yang sebagian besar menegaskan bahwa tulisan itu sangat penting untuk dipahami. dan letaknya di dalam sebuah postingan blog persis disamping kode  Tx  atau tanda ".
Diatas ialah bentuk gambaran Quote. memang banyak sebagian blogger menjelaskan bagaimana cara membuat quote kreasi sendiri. akan tetapi bagi saya masih kurang jelas dan lengkap, mengapa demikian? ada beberapa hal yang mereka lupakan, sehingga Quote menjadi dobel. lalu dampaknya? quote atau tanda kutip tidak bekerja maksimal. sebagai contoh gambarannya dibawah ini

membuat-quote-blog-postingan.imoul.blogspot.com
Keterangan:
Quote yang bertanda conteng hijau itu artinya quote yang bekerja maksimal, bisa anda bedakan sendiri perbedaannya
Quote yang kedua atau yang saya conteng merah, itu akibat peletakan kode HTML yang salah atau dobel quote.

Disinilah pentingnya anda untuk berkunjung ke blog belajar dan berbagi, karena blog ini tidak serta merta membagikan tutorial yang sekedar copy paste tanpa ada uji coba terlebih dahulu. memang tidak ada yang salah, semua tutorial yang diberikan kepada anda semua benar. akan tetapi tidak ada salahnya kita saling mengoreksi sebagai sesama pengguna blogger.

Berikut dibawah ini tutorial yang "salah" sering saya temui dan selalu saya koreksi. jangan anda peraktekan dulu, karena ini belum tentu benar.

SALAH & BENAR
Sebagai contoh saya terbang ke google mencari kata kunci "Cara Membuat Quote di Postingan Blog". banyak tutorial yang bertebaran disana. akan tetapi hasilnya sama semua, bisa saya jamin 95% rata-rata postingannya sama semua, dan hanya beberapa blogger saja yang menjelaskan secara rinci termasuk blog belajar dan berbagi.

Contoh:
Login ke blogger anda, Edit HTML, lalu cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>.
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicKBUOQ2Zxukfg0-Mxqmz950ZmAhfykIUxqui1QcDm8etyHce9uJ4EHIDUPPBhSMbGLk_DDtzkG7ynsohRA7ii3BdyD0mY0djD5pnYhMPfSq2Sop6wqLPX0trLa_P7V5wrtHq7cqy5sBU/s320/comma-side-orange1.gif);
background-position;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em helvetica, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Memang benar cara diatas, akan tetapi mereka tidak mengoreksinya. mengapa demikian? karena bawaan dari template blogger sendiri sudah menyediakan, yaitu posisinya di .post blockquote {  sampai dengan .post blockquote p {. sementara jika anda meletakan kode diatas kode ]]></b:skin>, maka hasilnya akan dobel Quote seperti gambar diatas yang saya berikan conteng merah.

Pertanyaan & Jawaban
Wah benar juga nih belajar dan berbagi, saya secara tidak sengaja sempat mengedit html tersebut, lalu bagaimana cara memperbaikinya?

Jawaban
Untuk anda yang sudah terlanjur mengikuti tutorial tersebut, maka silahkan anda hapus yang lama dengan mencari kode ini .post blockquote { sampai kode .post blockquote p {, dan hapus saja. kira-kira yang hampir sama seperti kode dibawah ini
.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #F0FFFF;
border: 1px solid #0000FF;
border-left: 20px solid #ff8c00
}
.post blockquote p
{ margin:0.5em 0;
}
Saya rasa penjelasan diatas sudah cukup anda ketahui. lalu bagaimana cara membuat yang benar? apakah anda sudah siap? jika sudah siap, mari kita terbang ke paragraf selanjutnya

BENAR
Silahkan anda login ke dasbor anda, setelan, template, edit html, cari kode .post blockquote {. jika anda sudah ketemu kode tersebut, maka hapus kode itu sampai dengan kode
.post blockquote p 
{ margin:0.5em 0; 
}
Jika sudah, maka ganti dengan kode dibawah ini
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicKBUOQ2Zxukfg0-Mxqmz950ZmAhfykIUxqui1QcDm8etyHce9uJ4EHIDUPPBhSMbGLk_DDtzkG7ynsohRA7ii3BdyD0mY0djD5pnYhMPfSq2Sop6wqLPX0trLa_P7V5wrtHq7cqy5sBU/s320/comma-side-orange1.gif);
background-position;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em helvetica, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Silahkan save template anda.
Mungkin masih banyak cara-cara lain tentang membuat Quote otomatis pada postingan blog, akan tetapi tergantung dari anda ingin memilih dan memakai yang mana.

Jika tidak berfungsi, saya berikan kesempatan untuk anda berdiskusi di kotak komentar dibawah ini.





Anda Berada di Label Blogger HTML


14 comments:

  1. Info nya lumayan gan bermanfaat ..

    ReplyDelete
  2. Padang Almafazi @ oke terima kasih atas kunjungannya mas

    ReplyDelete
  3. gan sya masang kode anti kopy di blog saya terus temtepla itu bukan buatan saya caranya bagai mana yah bingung ane gan

    ReplyDelete
  4. Oke, mari kita coba semoga berhasil ya. Trims tutorial belajarnya ini

    ReplyDelete
  5. saling tukar backlink gimana gan..

    ReplyDelete
  6. sudah saya coba di blog saya mas, alhamdulilah berhasil :)
    makasih atas tutorialnya

    ReplyDelete
  7. Gan kenapa kalau saya kasih quote 2. Satu mucul di judul artikel agak trasnpara. du muncul di teks yang saya kehendaki tak kasih quote

    ReplyDelete
  8. masukin teks nya nanti dimana dan gimana ??

    mohon bantuan nya para sesepuh....saya masih awam

    ReplyDelete
  9. Makasih infonya gan
    sayangnya kode seperti itu tidak terdapat pada template terbaru blogger yang di dominasi oleh elemen CSS, misalnya contempo dengan 4 variannya. Lalu gimana ya caranya meng"kustom" tampilannya agar beda

    ReplyDelete
  10. mantabs gan......

    mau saya praktekan di blog saya
    http://inovasirental.blogspot.com/

    ReplyDelete

Silahkan berikan komentar anda sesuai dengan konten yang saya bahas diatas. komentar yang tidak relevan, spam, maka tidak akan saya publikasikan di blog belajar berbagi ini.

Belajar Berbagi Home