@bloggiabao
%
%
%
%

Code html dành cho dân viết blog trên nền tảng blogspot, wordpress và web code tay

 1. Code tạo khung bài viết đẹp :

Phần 1 CSS :  

<!--style post-->
<style>
.post_image_wrapper{display:block;text-align:center;position:relative;margin:0 auto;padding:0;max-width:100%;overflow:hidden;z-index:10; box-shadow: 0 0 5px rgba(0,0,0,0.12);transition:all .25s ease-in;}
.post_image_wrapper img{max-width:100% !important; height: auto;width:100% !important;margin:0!important; padding:0!important;text-align:center !important;position:relative;z-index:10}
a.post_image_demo{padding:0;height:45px;line-height:45px;background: -webkit-linear-gradient(35deg, #fad8a6, #faa6e9);background:linear-gradient(35deg, #fad8a6, #faa6e9);font-size:85%;font-weight:700;list-style:none;display:block;width:225px;border-radius:99em!important; margin:0 auto;text-align:center;z-index:10;position:absolute;top:-100px;right:-255px;z-index:10;text-transform:uppercase;color:rgba(0,0,0,.65);transition:all .25s ease-in;box-shadow: 0 0 5px rgba(0,0,0,0.25);}
a:hover.post_image_demo{color: rgba(0,0,0,.85)}
/* Post Description */
.post_configure{padding:0;margin:0 0 0 10px;display:block}
.post_info,.buy_now,.buy_premi{position:relative;display:block;margin:0 auto;padding:2.5em 0 2.5em 60px;}
.post_info:before,.buy_now:before,.buy_premi:before{content:'';position:absolute;top:0;left:0;width:30px;height:100%;display:block;background-color:#262626}
.post_info:after,.buy_now:after,.buy_premi:after{content:'\f069';position:absolute;top:50%;left:-15px;width:55px;height:55px;line-height:55px;font-family:FontAwesome;font-style:normal;font-weight:400;text-align:center;font-size:170%;color:#262626;border:3px solid #262626;border-radius:99em;background-color:#fff;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.post_info:nth-child(1):before{background-color:#0f9d58;border-radius:99em 99em 0 0}
.post_info:nth-child(1):after{content:'\f036';color:#0f9d58;border-color:#0f9d58}
.post_info:nth-child(2):before{background-color:#ffb203;}
.post_info:nth-child(2):after{content:'\f121';color:#ffb203;border-color:#ffb203}
.post_info:nth-child(3):before{background-color:#ef003c;}
.post_info:nth-child(3):after{content:'\f013';color:#ef003c;border-color:#ef003c}
.post_info:nth-child(4):before{background-color:#337cf9;}
.post_info:nth-child(4):after{content:'\f044';color:#337cf9;border-color:#337cf9}
.post_info:nth-child(5):before{background-color:#e1d816;}
.post_info:nth-child(5):after{content:'\f0e7';color:#e1d816;border-color:#e1d816}
.post_info:nth-child(6):before{background-color:#a700bc;}
.post_info:nth-child(6):after{content:'\f0ed';color:#a700bc;border-color:#a700bc}
.post_info h2,.post_info h3{padding:0 10px!important;margin:0;font-weight:700;font-size:100%!important;color:#0f9d58;position:absolute;top:1.8em;left:100px;display:inline-block;float:left;background-color:#fff;z-index:10;}
.post_info .post_desc{margin:0;padding:30px 25px!important;display:table;border:1px solid #262626;border-radius:15px;width:100%;;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}
.post_info .post_desc:before,.post_info .post_desc:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:#262626;opacity:.16;margin:10px;border-radius:7px;z-index:-1}
.post_info .post_desc:after{background: -webkit-linear-gradient(90deg, rgba(0,0,0,0),rgba(255,255,255,.45));background:linear-gradient(90deg, rgba(0,0,0,0),rgba(255,255,255,.45));opacity:1}
.post_info:nth-child(1) .post_desc{border-color:#0f9d58}
.post_info:nth-child(1) .post_desc:before{background-color:#0f9d58}
.post_info:nth-child(2) .post_desc{border-color:#ffb203}
.post_info:nth-child(2) .post_desc:before{background-color:#ffb203}
.post_info:nth-child(3) .post_desc{border-color:#ef003c}
.post_info:nth-child(3) .post_desc:before{background-color:#ef003c}
.post_info:nth-child(4) .post_desc{border-color:#337cf9}
.post_info:nth-child(4) .post_desc:before{background-color:#337cf9}
.post_info:nth-child(5) .post_desc{border-color:#e1d816}
.post_info:nth-child(5) .post_desc:before{background-color:#e1d816}
.post_info:nth-child(6) .post_desc{border-color:#a700bc}
.post_info:nth-child(6) .post_desc:before{background-color:#a700bc}
.post_info ul li a{border:0;border-radius:99em;background:#ffb203;color:#fff;font-size:70%;text-transform:uppercase;padding:3px 10px;transition:all .3s ease-in;}
.post_info ul li a:hover{border-radius:99em;background-color:#0f9d58;box-shadow:0 3px 20px -0.2px rgba(0,0,0,0.1);}
</style>

Phần 2 :

Code bài viết mẫu :

Mẫu 1 :

<div class="post_configure"><div class="post_info"><h2>Description</h2><div class="post_desc"><span class="item_name">Seo-content</span>&nbsp;is another blogger template from '<b>Risen</b>' version, before <b><a href="http://www.ivietpr.com" target="_blank">Seo nội dung</a></b>. Đó là điện thoại di động thân thiện, tải nhanh nhất, SEO tối ưu hóa blogspot / blogger template cho blog của bạn. Đó là hoàn toàn đáp ứng lên đến 240px thiết bị kích thước. Đó là một trọng lượng nhẹ template blogger đáp ứng cho các nhà văn, nhà báo và nhiếp ảnh gia. Đó là miniminal trong thiết kế và chỉ mất vài giây để tải và nhận được tất cả mọi thứ chạy. Bản mẫu này có nhiều tính năng quan trọng được yêu cầu cho một blog dựa tạp chí. Nhận mẫu đặc biệt này ngay bây giờ !!<br/>
<br/>
<i>Changelog:</i><br/>
<br/>
<b>03 Mar 2019</b><br/>
NEW - WhatsApp share button<br/>
<br/>
Fixed - comment reply button<br/>
Fixed - remove Google+ share button<br/>
<br/>
Improved - Emoticon comments<br/>
Improved - Some layout gadget to version 2<br/>
Improved - FontAwesome to 5.7.2
</div>
</div>

Mẫu 2 :

<div class="post_info"><h2>Features</h2><div class="post_desc">
<ul>
<li>Responsive Design - <a href="#" rel="nofollow noopener" target="_blank">check</a></li>
<li>Mobile Friendly - <a href="#" rel="nofollow noopener" target="_blank">check</a></li>
<li>PageSpeed Insight - <a href="#" rel="nofollow noopener" target="_blank">check</a></li>
<li>Structured Data Validated (Index) - <a href="#" rel="nofollow noopener" target="_blank">check</a></li>
<li>Structured Data Validated (Item) - <a href="#" rel="nofollow noopener" target="_blank">check</a></li>
<li>SEO Ready / SEO-friendly</li>
<li>For Adsense</li>
<li>High CTR</li>
<li>Support HTTPS</li>
<li>HTML5 Type Design</li>
<li>CSS3 Type Design</li>
<li>Fast loading</li>
<li>Tabbed Sidebar</li>
<li>Sticky Widget Sidebar</li>
<li>Responsive Recent by Tag Widget with Thumbnail</li>
<li>Search Show-Hide Event Click</li>
<li>Featured Widget</li>
<li>Advance Search Engine Optimization</li>
<li>Social Share Button with Counter</li>
<li>Auto resize thumbnail image</li>
<li>Threaded Comment</li>
<li>Custom Recent Post</li>
<li>Related Post Thumbnail</li>
<li>Search Column Responsive</li>
<li>2 Column</li>
<li>Valid Schema.org</li>
<li>Sidebar Right</li>
<li>Breadcrumbs SEO</li>
<li>Ads Ready</li>
<li>Respsive Ad Slot</li>
<li>Dyamic Heading</li>
<li>Back to Top Button</li>
<li>Dropdown Menu Event Click no Jacascript</li>
<li>Custom Error 404 Page</li>
<li>Custom Contact Form Widget</li>
<li>Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)</li>
</ul></div></div>

Mẫu 3 :

<div class="post_info"><h2>Instructions</h2><div class="post_desc"><a href="#">How to Install a Blogger Template</a></div></div>

Mẫu 4 :

<div class='terms-wrapper' id='terms-wrapper'>
<div class='terms-container'>
<p>Before you can proceed to <b>Download</b> or <b>Buy Premium</b>, You must accept the <a href='https://www.themeindie.com/p/terms-and-conditions.html' target='_blank' title='Terms and Conditions'><strong>Terms & Conditions</strong></a>. Please tick the box below to confirm that you agree!</p>
<span><input id='terms' type='checkbox'/>
<strong>Yes, I accept the Terms and Conditions</strong></span></div>
</div>

Ivietpr.com Blog Cá Nhân, Nền Tảng Blogger, Giao Diện Fletro : Xây dựng và phát triển nội dung, theo số liệu phân tích trên cấu trúc content của nhật ký trực tuyến digitalnomad.vn [ Blog Chạy Thử Nghiệm Đa Cấu Trúc ]

Bạn có thể thích những bài đăng này

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
456





💰

Top Sản Phẩm Công Nghệ / Thiết Bị Điện Gia Dụng /,...
Về Trang Chủ
Chiến mã đường rừng
Chợ Thủy Hải Sản
Điện Thoại Samsung Galaxy S20 FE (8GB/256GB)

Xem Giá Bán

Lenovo Legion Y90 5G Chơi Game SmartPhone Snapdragon 8 Gen1 6.92 ''144Hz AMOLED E4 5600MAh 68W Siêu NFC 64MP

Xem Giá Bán

ASUS ROG Điện Thoại 6 Phiên Bản Giới Hạn Dimensity 9000 + Tặng 5G 6000MAh Pin 6.78 "165Hz AMOLED chơi Game Điện Thoại

Xem Giá Bán

Điện thoại Gaming Tecno POVA 3 (6+5GB)/128GB - Helio G88 | 7000 mAh | Sạc nhanh 33W

Xem Giá Bán

Thotgo.asia - Tel 0968 970 650 : Xưởng Sản Xuất Thớt Gỗ Các Loại
Biến Content Thành Tiền Bạc