Blogger

Khung chưa code đẹp cho blogger V2

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à…

Hung.Pro.VN

Developer Windows

---

• 25/04/2016
• Views

• #Blogger

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/AVvXsEiM7hLadwtieoQ1_YGuo6-q95uMKCP03aNki872e_Vn4Rp5GuGKwq26nw_2JQKWHTJ4vJOA3hmdX3ywH4csIaRBkxHM27K_fhaeiexv3yrtMPDmBo-pnBFPOPty9g0CfZ9VQsS4e8q_yw/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/AVvXsEj-bOSRNhz2bu3piUIjwVGEAstX3HjiObYJdbUTpg_0aMPPMQDArAZNX6-IhJX7U9JtZ2aTT9kuEFBBh7tnpCK_CrTcyrmaMO_czdsxmw1fOwPUfWABtKEt_m2aZ5B7fBAj28R1tiWEvg/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/AVvXsEjlMB9A6SSOGo6Mmgx9WtHgo08K9bEJUPLP-y3eT109m0kOIXvBkCmtqBZygCZFQeCkr6TkWmpOgFU80e25uds2UisuyJCjn3Vi8E-cc3hL12MOLcjaHPRjNwO0ZThZhGLWAGK7xmmUUg/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/AVvXsEjans8OiwTfyuKyrdv21vlmJfopF_QMKkXXReEEBRBRKwS3_PBE3hwdEdQmdO42Hkl7qNHUQOmLnVc-hrDM9dnStQNYaU7KOcQGkbkZksRvTPU36HQ8hjHaboWoQvLGCse-7hLh99mgWIw/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é :)

Previous post

Khung chưa code đẹp cho blogger V2

Next post

Khung chưa code đẹp cho blogger V2

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article