6 Model Blockquote Keren pada Blogger

Blockquote.

Blockquote merupakan kata-kata kutipan dalam sebuah tulisan di dalam artikel blog. Biasanya blockquote ini selalu menyesuaikan diri terhadap tema. Jika tema a maka blockquotenya akan sesuai tema a. Jika temanya adalah b maka blockquotenya juga sama dengan tema b. Lalu bisakah kita merubahnya? Karena tema a sangat bagus, tapi sayang blockquotenya kurang menarik. Kita ingin merubah modelnya. Bisakah itu terjadi? Tentu saja bisa kok.

.

Ada sebuah situs yang bernama shoutersclub.blogspot.co.id mengatakan bahwa blockquote ini sebenarnya tidak mempengaruhi SEO. Tapi blockquote dapat meningkatkan blog kita pada rangking google. Entahlah apa yang dikatakannya. Karena situs itu berbahasa Inggris. Dan penulis hanya tahu sebagian maksudnya saja muehehe. Tapi yang pasti sebagaimana yang dikatakan situs tersebut. Kemungkinan blockquote tidak mempengaruhi SEO.

.

Selain itu situs itu juga memberikan 5 model yang cukup menarik untuk diterapkan pada blog Anda. Langsung saja, pertama caranya adalah masuk terlebih dahulu pada blog Anda. Klik Templates atau Tema pada dashboard blog Anda. Lalu klik Edit HTML. Cari kode </head> dengan menggunakan tombol Ctrl+F.

</head>

Letakkan kode-kode tiap model dibawah ini tepat diatas kode </head> atau sebelum kode tersebut. Berikut kode-kode tiap modelnya. Akan penulis berikan juga contoh gambarnya.

1.

Blockquote 1

Kode-kodenya adalah berikut:

<style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify; 
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999; 
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}
</style>

Ingat ditaruh diatas </head> atau tepat pada sebelum kode tersebut.

2.

Blockquote 2

Kode-kodenya adalah berikut:

<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>

3.

Blockquote 3

Blockquote yang ketiga ini adalah paporit penulis hehe. Berikut kode-kodenya:

4.

Blockquote 4

Berikut kode-kodenya:

5.

Blockquote 5

Kode-kodenya adalah berikut:

<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>

Ingat ditaruh diatas </head> atau tepat pada sebelum kode tersebut. Dari kelima kode diatas, masing-masing masih bisa kita edit kembali kok. Mulai dari warna, font, ukuran font, warna font, dan lain sebagainya. Silahkan diotak-atik sendiri lalu pratinjau blog Anda. Oiya sedikit tambahan dari penulis. Harap dimaklumi jika blockquote Anda sedikit berbeda dari contoh pada gambar. Karena penulis masih mengeditnya dengan tambahan blockquote yang lain. Cek dibawah ini.

6.

Blockquote 6

Penulis menyebutnya blockquote yang keenam. Akan tetapi cara ini berbeda. Dan hanya sebagian template saja yang dapat meniru model blockquote ini sama persis. Caranya adalah dengan mencari kata blockquote dengan tombol Ctrl+F. Selanjutnya replace blockquote lama bawaan tema Anda dengan kode berikut:

blockquote{font-style:italic;color:#888;border-left:5px solid $(secondary.color);margin-left:0;padding:10px 15px}
blockquote:before{content:'\f10d';display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-right:10px;color:#888}
blockquote:after{content:'\f10e';display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:10px;color:#888}

Biasanya kode blockquote bawaan Anda terletak di bawah kata ini:

/*-------Typography and ShortCodes-------*/

Atau mungkin di kata ini:

/* Variable definitions
====================

Kebanyakan kode template blockquote itu diatas kode </b:skin>.

</b:skin>

Selesai sudah tutorial kali ini. Jika gagal silahkan coba berulang kali. Dan jika berhasil tapi masih kurang puas, silahkan otak-atik dan pratinjau blog Anda. Seru juga jika kita mengotak-ngatik blog. Penulis sendiri jadi lupa waktu hehe. Selamat mencoba.

• SumberFoto|ujiansma.com|