[Blogger] Khung chưa code đẹp cho blogspot V2

Lê Hùng tháng 4 25, 2016
Hôm qua tình cờ thấy được cái khung chưa code đẹp nên hôm nay quyết định share mọi người.



Khung chứa code giúp bạn chứa code đẹp và gọn hơn khi post bài lên bài viết. Nó giúp người đọc dể nhìn hơn và không bị nhầm với bài viết
Demo : Các bạn có thể xem ở "Khung mình chèn code" bên dưới

Full Code

/* Short Codes
----------------------------------------------- */
.success {margin:5px auto;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewkq9211fzUO2M7CBGtV8Mvl6bO9uSlIrgGNwKoN27S1Nxxxr2T6VBPHPeBMGo5S9jsheDO0GKP13KyeK5-lMFhw0UH8yCioaYuRi9DlFi74KeyyzmP1n2zjppCIMnbi26W_w4KR4JQ/s32/success.png') no-repeat #E6EFC2 5px 50%;padding:1em;padding-left:3.5em;border: 2px solid #C6D880;color:#529214;}
.error {margin:5px auto;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAg8xrdYABAPbACMsjuxDCg63Qye65hpSJz3WSPzCkPCyZDw__kEE2CrpVVBBckDo_w8IU5O3n2C-7cgtYmwGPmMtI8wUXSu4tErYDKO3wal4GNBIJpP5wB5dEX2OKBl-YvdDFY6rJdQ/s32/error.png') no-repeat #FBE3E4 5px 50%;padding:1em;padding-left:3.5em;border: 2px solid #FBC2C4;color:#D12F19;}
.warning {margin:5px auto;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XJHWj1GCmSufYyAq6A0lLtr4X3gfYpPyE63F9t-72wwa_LOttkRqujlzJVeGoEZKL4dNfGrDBySOPycYx4heBC3VBM53YgGC249IZDMVQ0kWxY5EzlCZ-LWm8R_hk7Pj3ODd_H5sKA/s32/warning.png') no-repeat #FFF6BF 5px 50%;padding:1em;padding-left:3.5em;border: 2px solid #FFD324;color:#817134;}
.notice {margin:5px auto;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6qBV9daTKE_dx9Ft2ytOEJH72bi3c-dHXHVSl0GcvOKmnYG7YsxjegObO_J7T6esFdQe0LYPf0fGXIdSbfjw_jwKQ-ut2rI-vX0qPsM6Lu7h3GW1ZB4TleoKMyLzf8E_cAVzUVfoEb0/s32/notice.png') no-repeat #cbe0f4 5px 50%;padding:1em;padding-left:3.5em;border: 2px solid #96b6d3;color:#286eae;}
a.button {display:inline-block;line-height:12px;text-decoration:none;padding:10px;background:#a9b5d3;border:1px solid #cecece;color:#fff;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-ms-transition:all .1s linear;-o-transition:all .1s linear;transition:all .1s linear;}
a.button:hover {text-decoration:none;background:#4e69a2;}
.code {color:black;margin:5px auto;font-family:Georgia,Times,'Times New Roman',serif;font-size:16px;font-style:italic;line-height:22px;background:;padding:1em;border:#4e69a2 1px solid;border-top:#4e69a2 5px solid;}

Để chèn được code các bạn sử cú pháp bên dưới nhé

<div class="code">... Nội dung ... </div>
<div class="success">... Nội dung ... </div>
<div class="error">... Nội dung ... </div>
<div class="warning">... Nội dung ... </div>
<div class="notice">... Nội dung ... </div>

DEMO

<div class="code">... Nội dung ... </div>

<div class="success">... Nội dung ... </div>

<div class="error">... Nội dung ... </div>

<div class="warning">... Nội dung ... </div>

<div class="notice">... Nội dung ... </div>

Chúc các bạn thành công. Và khi các bạn copy nhớ ghi nguồn về Blog Bờm Khùng nhé :)


Tags: