Cara Membuat Blokquote Mirip Arlina Design – Blokquote adalah sebuah Tanda di dalam postingan yang berguna untuk memberikan pesan penting di dalam kotak kepada pengunjung atau pembaca. Semu blog memiliki Blokquote yang berbeda-beda, saya sendiri sudah mencoba mencari tampilan Blokquote yang menarik di semua Blog atau website namun menurut saya yang paling menarik adalah Blokquote milik Arlina Design. Jika sobat mengunjungi blognya sobat akan sering melihat Blokquote yang ia design sendiri terlihat sangat menarik dan tidak merusak tampilan. Bagi sobat yang ingin memasangnya atau mencoba untuk mempelajari nya silahkan sobat simak cara membuatnya berikut ini.
1. buka Blog Sobat > masuk menu “Template” > Edit HTML > salin kode di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>
]]></b:skin> atau </style>
/*Blockquote */
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
.post-body blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2}
.post-body blockquote:after{position:absolute;content:'f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
.post-body blockquote a,.post-body blockquote a:hover {color:#fff;}
2. Berikutnya salin kode di bawah ini di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
NB : kode no2 adalah kode jQuary fone awesome, jika sudah ada di dalam template sobat atau sejenisnya lewati saja cara ke 2 ini.
Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Blokquote sudah berhasil di terapkan dengan baik.
Baca juga : Cara Mengetahui Jumlah Duplikat Konten Blog Dengan Siteliner
Baca juga : Cara Mengetahui Jumlah Duplikat Konten Blog Dengan Siteliner
Demikianlah tutorial mengenai Cara Membuat Blokquote Mirip Arlina Design, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar