Cara Membuat Blockquote Keren Pada Blog

      Selamat datang di blog tutorwidget, kali ini saya akan memberikan sedikit trik bagaimana Cara Membuat Blockquote Yang Keren di Blog seperti pada gambar di bawah ini :

Cara Membuat Blockquote
Tidak disorot cursor
Cara Membuat Blockquote di Blog
Disorot cursor
Mungkin sobat blogger sudah tidak asing lagi dengan nama blockquote, karena ini juga bagian dari fasilitas membuat artikel dalam memasukkan kode-kode html atau untuk kata kata kutipan di postingan atau laman blog. Biasanya blockquote digunakan untuk memperjelas suatu arahan dalam artikel, atau memperjelas informasi supaya terlihat menonjol, seperti kata warning atau catatan kalimat penting dalam sebuah artikel atau tulisan.

Contohnya ketika kita membuat atau menulis sebuah artikel di dalam blog maka dapat dipastikan akan ada sebuah blok kalimat/tulisan penting yang perlu disampaikan kepada pembaca. Dan salah satu cara untuk melakukannya kita dapat menggunakan tool quote yang telah disediakan oleh platform blogger itu sendiri.

Blockquote ini juga berfungsi untuk code-code seperti HTML, CSS, jQuery, dll.
Sebenarnya blockquote di template default sudah ada namun blockquote bawaan blogger tampilannya mungkin agak kurang menarik dan terlihat biasa-biasa saja alias kurang keren, sehingga bisa jadi mungkin akan di abaikan oleh pengunjung namun jika anda membuat blockquote yang bagus maka perhatian untuk blockquote akan lebih di perhatikan. Pada akhirnya pemilik blog ingin membuat tampilan lebih menarik agar blog makin terlihat rapi dan keren pastinya. sehingga perlu dilakukan penambahan atau perubahan tampilan sesuai tema/topik tulisan masing-masing. Untuk merubahnya perlu menerapkan kode CSS (Cascading Style Sheet) kedalam kode template HTML - tag <blockquote>.

Gimana keren kan. mengerlingkan mata Jika anda tertarik untuk menerapkannya di blog berikut langkah-langkahnya cara membuat blockquote menjadi keren dengan sentuhan css:
  • Login ke Akun Blogger sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari kode ]]></b:skin> (untuk memudahkan pencarian gunakan CTRL+F)

Letakkan kode dibawah ini diatasnya kode ]]></b:skin>
blockquote{max-height:250px; overflow:auto;background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9irkItA6uJS65Ywd-toNxKYqgy7TjnT66DarNBILXDGI8sg3xxuK7fenHqwAO2IpaS43TqnZ05Vjqw3CZD5oKH33bDi58oKp_9DTQhczP005fhoHsdwv7F_vyl6ko8kLox8DjN-IRYE/s1600/Blockquote-wahyu-only-gelap.jpg) no-repeat right bottom ; margin: 0 20px; padding: 20px 70px 20px 20px; color:#595959; font:Courier new; border:1px solid #DDD; } blockquote:hover { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDSfnvlxbsWDA9V7QOVgYiGbnkG0Y5_7QZxuIVmewvDnARjZFDMkpYtFn9XpYOv4BWfLN-N8_ozD21cJ0oD3kM7xdCArsFXpGQYMTJZ3ZIF58TQSPDkPS1BmZM1IoS2e7riKVieqOXSg/s1600/Blockquote-wahyu-only-terang.jpg) no-repeat right bottom ; color:#00ff00; } blockquote p { margin: 0; padding-top:10px; }

  • Note : Tulisan yang berwarna Merah adalah URL gambar Blockquote
  • Klik pratinjau dan jika tidak ada kesalahan klik simpan. 

Cara menggunakan Blockquote di Dalam Artikel.

  •  Pertama buat Postingan atau Entri Baru
  •  Buat artikel lalu blok tulisat yang ingin di blockquote kemudian klik Quote. Untuk lebih jelasnya bisa lihat pada gambar dibawah ini yang saya beri tanda merah:
Cara menggunakan Blockquote di Dalam Artikel
Selesai.
Bagaimana? sangat mudah sekali bukan? ini akan membantu Anda untuk meningkatkan kualitas postingan blog anda. Jika ada yang kurang jelas sobat bisa bertanya, terima kasih.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Blog

Image
Blog ini sering membagikan seputar tutorial blogging, namun tidak pernah menjelaskan bagaimana cara membuat blog tersebut. untuk itu kali ini saya akan memberitahukan cara membuat blog gratis di blogspot dengan mudah. Sebagai langkah awal dalam membuat sebuah blog, terlebih dahulu anda harus mempunyai akun gmail. Sebenarnya ada banyak flatform yang menyediakan layanan membuat blog di internet, diantaranya:  Blogger.com  Wordpress.com  Blogdetik.com dan masih banyak lagi. Namun disini saya akan menjelaskan cara membuat blog secara gratis dan mudah memakai layanan blogspot di blogger.  Terlebih dahulu daftarkan diri anda di blogger.com untuk membuat sebuah akun google. Jika sudah punya abaikan saja langkah ini, masuk ke step selanjutnya.  Setelah terdaftar anda langsung masuk (login) untuk menuju kehalaman dasboard blogger. Di halaman ini anda akan membuat blog, silahkan anda klik blog baru seperti terlihat pada gambar. Selanjutnya akan muncul ...
Read more

Contact Form diHalaman Statis

Image
 Widget Contact Form Blogger pada Halaman Statis.  Sudahkah anda memasang fasilitas menu "contact form/ contact me/ contact us" di blog, Fitur ini biasanya berupa widget/gadget. Jika belum ada baiknya kamu membuatnya sekarang juga soalnya manfaat dari menu ini cukup penting untuk kita pasang di blog, gunanya untuk memfasilitasi pengujung blog yang ingin mengirimkan pesan kepada kita melalui email sebagai sharing secara personal antara pembaca dan pemilik blog, jika ada yang mau ditanyakan oleh pengunjung kepada pemilik blog atau ada perlu sesuatu lain, maka keberadaan menu contact form ini, keberadaan nya sangat penting dalam suatu blog. Untuk membuatnya sangatlah mudah, karena blogger sendiri sudah menyediakan fasilitas tersebut akan tetapi penempatan Contact Form pada widget ini kayaknya kurang disukai, dan lebih memilih menempatkan contact form pada halaman statis atau halaman posting. Nah dalam kesempatan ini, saya ingin memberikan sedikit trik agar widget Contact For...
Read more

membuat postingan terbanyak dikomentari

Image
Cara mengetahui postingan blog yang paling banyak dikomentari para pengunjung salah satunya menggunakan widget ini dengan menampilkan urutan postingan yang paling banyak dikomentari yang dilengkapi dengan bubbles berisi angka dari jumlah komentar post tersebut. Postingan dengan komentar terbanyak akan berada diposisi teratas. Dengan style yang cukup elegan widget ini sangat bagus sekali dan bermanfaat untuk mendorong pengunjung berpartisipasi dalam berdiskusi pada blog anda. Dengan begitu postingan lama anda tidak akan tenggelam karena selalu terupdate dengan komentar-komentar yang terbaru dan ini tentunya sangat disukai oleh mesin pencari (search engine). Widget ini hampir sama dengan Popular Posts. Yang membedakannya, jika popular post disusun atau diurut berdasarkan jumlah kunjungan. Sedangkan pada widget ini (Most Commented Posts) berdasarkan dari jumlah komentar terbanyak postingan tersebut. Untuk membuat Most Commented Posts ini sangatlah mudah cukup dengan melakukan trik b...
Read more