Test

• Xem thêm: Tạo thanh menu ngang hiệu ứng 3D cho Blogspot

Làm thế nào thêm ngày tháng vào cạnh bài viết Blogspot?

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>

</div> 

 <script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcPNw_BZzepyaHdKzhPU03bPSPyexqTN_y_9Ei-K6xvca6R01D-LVMP_QE0MD4ocgtxpIo8kFV9eRw-_u7FNqArFPAJFZeLWnC39SdaB7-kCBZjBTQRL1iLtXnfmcDnphZ4L0JPKoACsj/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

• Thiết kế đẹp và thanh lịch
• Hoàn toàn Responsive
• Thích hợp cho blog cá nhân
• Bài viết mới nhất ở sidebar
• Giao diện 2 cột
• Slider ảnh nền tự động
• Slider bài viết tại trang chủ
• Hộp tìm kiếm
• Tối ưu hóa công cụ tìm kiếm
• Thông tin về tác giả nằm ở sidebar
• Bài viết liên quan và có slider
• Tương thích với các trình duyệt phổ biến
• Các vị trí quảng cáo có sẵn
• Thanh menu responsive xổ xuống
• Màu chủ đạo: Trắng

Vậy làm thế nào để tạo widget bài viết ngẫu nhiên?

<style>

#random-posts img {

    border-radius: 1000px;

    borde:5px solid;

    color:#dddddd;

    float: left;

    margin-right: 5px;

    width: 75px;

    height: 75px;

    background-color: #F5F5F5;

    padding: 3px;

    transition: all 0.2s linear 0s;

}

#random-posts img:hover {

    opacity: 0.6;

}

ul#random-posts {

    list-style-type: none;

    padding: 0px;

}

#random-posts a {

    font-size: 12px;

    text-transform: uppercase;

    padding: 3px auto 5px;

}

#random-posts a:hover {

    text-decoration: none;

}

.random-summary {

    font-size: 11px;

    background: none;

    padding: 5px;

    margin-right: 8px;

}

#random-posts li {

    margin-bottom: 10px;

    border-bottom: 1px solid #EEEEEE;

    padding: 4px;

}

</style>

<ul id='random-posts'>

<script type='text/javaScript'>

var randomposts_number = 5;

var randomposts_chars = 110;

var randomposts_details = 'no';

var randomposts_comments = 'Comments';

var randomposts_commentsd = 'Comments Disabled';

var randomposts_current = [];

var total_randomposts = 0;

var randomposts_current = new Array(randomposts_number);

function randomposts(json) {

    total_randomposts = json.feed.openSearch$totalResults.$t

}

document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {

    for (var i = 0; i < randomposts_number; i++) {

        var found = false;

        var rndValue = get_random();

        for (var j = 0; j < randomposts_current.length; j++) {

            if (randomposts_current[j] == rndValue) {

                found = true;

                break

            }

        };

        if (found) {

            i--

        } else {

            randomposts_current[i] = rndValue

        }

    }

};

function get_random() {

    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));

    return ranNum

};

</script>

<script type='text/javaScript'>

function random_posts(json) {

    for (var i = 0; i < randomposts_number; i++) {

        var entry = json.feed.entry[i];

        var randompoststitle = entry.title.$t;

        if ('content' in entry) {

            var randompostsnippet = entry.content.$t

        } else {

            if ('summary' in entry) {

                var randompostsnippet = entry.summary.$t

            } else {

                var randompostsnippet = "";

            }

        };

        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");

        if (randompostsnippet.length < randomposts_chars) {

            var randomposts_snippet = randompostsnippet

        } else {

            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);

            var whitespace = randompostsnippet.lastIndexOf(" ");

            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";

        };

        for (var j = 0; j < entry.link.length; j++) {

            if ('thr$total' in entry) {

                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments

            } else {

                randomposts_commentsnum = randomposts_commentsd

            }; if (entry.link[j].rel == 'alternate') {

                var randompostsurl = entry.link[j].href;

                var randomposts_date = entry.published.$t;

                if ('media$thumbnail' in entry) {

                    var randompoststhumb = entry.media$thumbnail.url

                } else {

                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0jOG4KByaxdCGBr_yuSj66o_yKQq_v_uKZmklIgT-pPKFLa3FrsxdXOHQR5q9ZwyuqWo1n2AnrveQqgzjueqMUmLyEb1E8eyvaaE0ASCqCVLloLj0_8eUDOOcwacL_e30wpLgNxTW4Y/s1600/no_thumb.png"

                }

            }

        };

        document.write('<li>');

        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');

        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');

        if (randomposts_details == 'yes') {

            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'

        };

        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')

    }

};

getvalue();

for (var i = 0; i < randomposts_number; i++) {

    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')

};

</script>

</ul>

Một số tính năng của Template Xpress News:

• Thiết kế Responsive hoàn toàn
• Thanh News Ticker thông báo bài viết mới
• Slider sử dụng jQuery
• Thanh điều hướng và thanh menu xổ xuống trên top
• Footer4 Cột
• Giao diện 3 cột
• Màu chủ đạo: Đen, trắng, xám
• Trang 404 tùy chỉnh
• Đa màu sắc
• Các vị trí quảng cáo đã có sẵn
• Dễ dàng cài đặt
• Các widget có thể tùy chỉnh

• Xem thêm: Template Sevida cực đẹp

• Thiết kế Responsive
• Trang 404 tùy chỉnh
• Carousel Lite
• Slider sử dụng Jquery
• Cài đặt dễ dàng
• Thanh menu xổ xuống
• Bài viết liên quan
• Tự động resize ảnh thumbnails
• Giao diện 3 cột
• Thích hợp làm web về tin tức, hoặc blog cá nhân
• Footer 4 cột
• Hệ thống bình luận của Blogger

Hướng dẫn tạo thanh menu ngang hiệu ứng 3D cho Blogspot

<div id="cssmenu" class="dropdown">
<ul>
   <li class="active"><a href="#" data-title="Home">Home</a></li>
   <li><a href="#" data-title="Product 1">Product 1</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
   <li><a href="#" data-title="Company">Company</a></li>
   <li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family:Trebuchet Ms;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #3db2e1;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #3db2e1;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}
</style>

• Xem thêm: Template Sevida cực đẹp by MKR

• Thiết kế hoàn toàn Responsive
• Tính năng slideshow các bài viết tự động và có thể tùy chỉnh theo ý muốn của mình.
• Hỗ trợ biên tập trước
• Auto nhẹ đọc hơn (hỗ trợ hình ảnh của bên thứ ba, và Youtube Thumbnail)
• Tải thêm bài viết bởi Ajax
• Thanh điều hướng mới bởi Ajax
• Hỗ trợ bình luận từ G+
• Tương thích với các trình duyệt được ưa chuộng
• Công cụ tìm kiếm JSON
• 2 chế độ xem: Lưới và danh sách
• Có widget những bình luận mới nhất
• Widget News Ticker
• Widget bình luận mới nhất
• Tối ưu hóa SEO
• Emoticon
• Trang 404 tùy chỉnh 
• Hỗ trợ RTL mới
• Hỗ trợ xem trước bài viết
• Bố trí quản trị chuyên nghiệp, giúp bạn dễ dàng làm việc với các blog layout.
• Bài viết gần đây qua các tag bởi Ajax (3 định dạng: trượt, dọc, và Horizontal)
• Hỗ trợ widget bài viết ngẫu nhiên
• Giao diện 2 cột
• Footer có 4 cột

• Xem thêm: Template Sevida cực đẹp cho blogspot

Một số thông tin khác về Template Linezap cho Blogspot:

• Phong cách Tạp chí, tin tức
• Tự động resize ảnh thumbnails
• Giao diện 3 cột
• Có sẵn các vị trí đặt quảng cáo
• Bài viết liên quan
• 2 hệ thống bình luận: Blogger và Facebook
• Tối ưu hóa công cụ tìm kiếm
• Thiết kế hoàn toàn Responsive
• Thông tin về tác giả
• Đăng ký nhận tin mới
• 2 cột sidebar bên phải
• Footer 3 cột
• Tương thích với các trình duyệt phổ biến
• Các button theo dõi và chia sẻ mạng xã hội
• Trang 404 tùy chỉnh
• Hộp tìm kiếm
• Màu chủ đạo: Xanh, đen và trắng