Merubah Tampilan Blockquote dan Pre Terbaru

Merubah tampilan blockquote merupakan hal yang sangat mudah, lain halnya dengan membuat tampilan blockquote itu menjadi bagus dan responsive. Postingan kali ini adalah merubah tampilan blockquote yang di pakai oleh blog terkenal seperti Arlina Dzgn, Dunia Blanter, dan Kompi Ajaib.

Blockquote berguna untuk pengunjung atau visitor tidak keliru saat si publisher atau penulis kata-kata atau kode-kode yang di tuliskan pada postingan tersebut, dengan menggunakan blockquote ini kata-kata atau kode-kode yang di tandai akan lebih terlihat atau menonjol dari pada tulisan yang lain.

Ada beberapa blog yang tidak lagi memakai blockquote melainkan memakai tag pre. Setahu saya, yang saya baca pada blog Blog Kang Ismet, tag pre dapat merapihkan kode-kode atau script-script yang berada pada di tag pre, ntah itu benar atau salah yang pasti saya belum mencobanya.

Kali ini saya membagikan tampilan tag blockquote yang di pakai blog terkenal seperti Arrlina Desiign, Dnia Blanter, dan Kompii Ajaib. Kalau ada blockquote terbaru, saya akan membagikannya lagi secara gratis pada postingan ini. Berikut tutorial yang bisa saya bagikan secara sepengetahuan saya.

Tag Blockquote Arlina Design

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copy kode dibawah ini di atas kode ]]></b:skin> atau </style>


pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}

pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}

pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#fff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:5px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}

code .token.entity {cursor:help;}

pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}

pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#07ACEC;border-bottom: 1px solid #eee;color: #fff;}

Tata cara penggunaannya

Silakan Anda buat postingan, lalu Anda select kode atau tulisan yang ingin Anda beri blockquote, jika sudah maka akan ada kode <blockquote class="tr_bq">. Silakan Anda ganti dengan kode berikut <pre data-codetype="HTMLku" title="HTML"><code class="language-markup">

Silakan sesuaikan dengan kode-kode yang Anda berikan pada kode tersebut bila kode tersebut Javascript, silakan ganti tulisan HTMLku dengan JavaScriptku

Tag Blockquote Dunia Blanter

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda ganti tag blockquote{ Anda menjadi kode di bawah ini.

blockquote{margin:15px 15px 15px 0;padding:10px;clear:both;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);background:#f2f2f2;color:#666;border:1px solid #ddd;overflow:auto;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;font-weight:400!important;font-style:normal!important;font-size:12px!important;max-height:500px}

Tata cara penggunaannya

Silakan Anda buat postingan lalu Anda klik blockquote lalu Pratinjau, dan lihat hasilnya

Tag Blockquote Kompi Ajaib

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Silakan Anda ganti tag blockquote{ dengan kode di bawah ini.

blockquote{color:#BC587E;font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}

Tata cara penggunaannya

Silakan ikuti Tata cara penggunaan tag blockquote Dunia Blanter, kode ini dengan tag blockquote tersebut sama.

Demikian tutorial kali ini, semoga bermanfaat, jangan lupa like dan share ya sob!.

blog loker