Thứ Sáu, 17 tháng 10, 2014

Để tạo ra một sự khác biệt của bài viết như mặc định của blogger thì nay ishare 247 hướng dẫn các bạn tạo box thông tin bài viết cho blogspot

Cách bước thực hiện như sau :

Bước 1

Vào template blogspot của bạn (Mẫu => Chỉnh sửa HTML) tìm đến thẻ ]]></b:skin> và dán đoạn code sau vào trước nó .
.box-info, .ndpost{border:1px solid #323232;background:#161616;background-image:-moz-linear-gradient(#161616,black);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(black));background-image:-webkit-linear-gradient(#161616,black);background-image:-o-linear-gradient(#161616,black);background-image:-ms-linear-gradient(#161616,black);-pie-background:linear-gradient(#161616,#000);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:10px;overflow:hidden} .thumbnail-info{float:left;padding:5px;background-color:black} .thumbnail-info img{border:0} .info-box{float:left;color:white;width:560px} .info-box ul{margin:0;padding:0} .info-box li{list-style:none;padding:3px 10px}

Bước 2

Tìm kiếm trong template của bạn đoạn code sau
<a expr:name='data:post.id'/>
Bạn sẽ tìm được 2 đoạn code như trên và dán lần lượt vào dưới 2 đoạn code này (lần lượt có nghĩa là dán vào một trong hai đoạn đó, nếu dán vào chổ nào được thì thôi nhé)
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> <b:else/> &#187;Unlabelled </b:if> &#187; <span><data:post.title/></span> </b:loop> </div> <div class='thumbnail-info'> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <b:else/> <img alt='no image' class='post-thumbnail' src='https://googledrive.com/host/0Bz_65BAr9KCZMk5fWGQ5SDUzOUU'/> </b:if> </div> <div class='info-box'> <ul> <li>Title : <data:post.title/></li> <li>Author : <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li> <li>Date : <a class='updated timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></li> <li>Labels : <span class='post-labels'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop> </b:if> </span></li> </ul> </div> </div> </b:if>
Tải code CSS về up lên host của mình về để sài lâu hơn nhé
https://googledrive.com/host/0Bz_65BAr9KCZMk5fWGQ5SDUzOUU 
Như vậy là các bạn đã vừa thêm hộp box thông tin bài viết ngay bên dưới bài viết của bạn. Chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét