Cara Merubah Tampilan Blockquote Pada Blog

Daftar Isi:

Ambyarblog.com - Apa kabar? Dalam kesempatan ini saya akan memberikan tutorial Cara Merubah Tampilan Blockquote Pada Blog. Tutorial Blackquote ini sangat cocok sekarang, karena tampilannya yang keren.

Contoh:

Ini contoh tampilannya.

 Langsung saja ke tutorialnya.

Cara Merubah Tampilan Blockquote Pada Blog

#1 - Anda masuk terlebih dahulu ke dashboard blogger.
#2 - Kemudian ke option Tema - Edit HTML.
#3 - Kemudian cari sebuah kode blockquote atau .blockquote.
#4 - Jika ada berarti kode default blockquote anda seperti itu. Namun kali ini kita akan memodifnya dengan menambahkan kode dibawah ini simpan diatas ]]></b:skin>.

  blockquote {
	background: #f8e38d;
	margin-left: 2em;
	margin-right: 2em;
	border-left: 7px solid #27768e;
	padding: 15px 18px 15px 48px;
	font-style: italic;
	display: block;
	font-style: normal;
	position: relative;
	line height: 21px;
	border-radius: 4px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
blockquote:before{
	content:"\f0a1";
	font-family:FontAwesome;
	font-size:21px;
	font-style:normal;
	font-weight:normal;top:0;left:0;
	position:absolute;
	padding: 10px;
	background:none;
	color:#c9bc88;
	margin-right:8px;
	margin-left:5px;
}

#5 - Nah jika sudah anda tinggal Simpan.
#6 - Coba membuat sebuah artikel kemudian anda masukan fitur blockquote tadi. maka hasilnya akan sama seperti pada blog ini.

Jika iconnya tidak muncul anda tambahankan kode dibawah tempat DIATAS </head>.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Jika sudah, silahkan cek kembali dan Simpan.

Penutup

Itulah tutorial Cara Merubah Tampilan Blockquote Pada Blog. Sampai disini dulu, jika ada yang ingin ditanyakan silahkan komen dibawah. Selamat mencoba, semoga bermanfaat. Sekian dan terima kasih.

Share :