Tuan Phan Blog

Những hình ảnh Noel đẹp dùng làm ảnh nền Facebook 2015

2015-12-19T18:33:00.002+07:00

Cái lạnh đả đến báo hiệu mùa noel sắp cạnh kề. Mỗi bạn điều chọn cho mình một cách riêng để đón noel 2015. Có bạn thì đi du lịch, có người chọn các địa điểm đẹp trung tâm thành phố đi chơi với người yêu.... nói chung có rất và rất nhiều sự lựa chọn dành cho bạn... còn tui là FAN FA năm nào củng ở nhà hê hê. Nói nhiều mà không đi vào chủ đề chình mất công mấy bác ném đá mất.
Ngồi rảnh chẳng có việc gì làm lượm lặt những tấm ảnh nền giáng sinh Noel 2105 đẹp chia sẻ cho bạn bè làm ảnh nền facebook.

Hình ảnh noel đẹp dành làm ảnh nền facebook

Ảnh lãng mạng đêm noel

Thanh niên cứng ngày noel 2015

Món quà ý nghĩa tặng gấu

Video vui từ ảnh nền noel

Chương 2 : Công cụ SHAPE TOOL trong CorelDRAW

2015-07-30T20:36:00.000+07:00

SHAPE TOOL có thể được coi như là một trái tim của chương trình CorelDRAW. Shape tham gia vào hầu hết các thao tác từ việc biến đổi tạo hình ảnh đơn giản đến việc tạo các hiệu ứng biến đổi phức tạp chúng ta cũng thấy bóng dáng của Shape. Sau đây chúng ta sẽ cùng tìm hiểu chức năng và các thao tác biến đổi của công cụ Shape. Công cụ có vị trí số 1 trong hộp công cụ 2.

Chức năng bo tròn góc trong SHAPE TOOL

Thao tác thực hiện bo tròn góc tự do

Chọn công cụ Shape trên thanh công cụ.
Nhấp chuột vào một trong 4 góc của đối tượng đồng thời drag chuột vào bên trong đến khi vừa ý thả chuột.

Thao tác thực hiện bo tròn góc với bán kính chính xác
Chọn công cụ Shape trên thanh công cụ.
Nhấp chuột lên đối tượng.
Quan sát thanh đặc tính:
Nhấp chuột mở khoá trên thanh đặc tính để bo rời rạc.
Nhập bán kính góc bo cho góc cần bo.
Nếu muốn bo đều cho tất cả các góc không cần mở khoá và chỉ cần nhập bán kính cho bất kỳ một góc.

Ví dụ: Vẽ cái ca
Khởi tạo bản vẽ: Khổ giấy A4, mở lưới, xác lập lưới 10x10. mở bắt điểm lưới Snap to grid.
Vẽ tự do một Hình chữ nhật đứng.
Chọn công cụ Shape bo tròn hai góc dưới: R = 50.
Vẽ 2 Elipse tự do rồi Combine lại. - Đặt vòng ellipse lên hình chữ nhật.
Nhóm tất cả chúng lại.
Tô màu cho nhóm đối tượng. Màu tô cùng màu đường viền.

Chức năng biến đổi đường biên trong SHAPE TOOL

Khái niệm Node
Node là điểm điều khiển trên biên đối tượng. Node còn gọi là điểm neo. Node là điểm chuyển tiếp giữa hai đoạn biên hay là điểm cuối của một đoạn biên. Node có 2 loại:

Node gãy: Cusp Node

Node trơn: Smooth node

Thao tác thêm Node

Chọn công cụ Shape trên thanh công cụ

Nhấp đúp chuột trái lên biên đối tựơng tại vị trí thêm node.

Hoặc nhấp trái chuột lên biên đối tượng tại vị trí cần thêm

Chọn chức năng Add Node trên thanh đặc tính hặc nhấn dấu

"+" trên vùng phím số.

Ví dụ: Tạo Logo Catex
Khởi tạo bản vẽ: Khổ giấy A4, mở lưới, xác lập lưới 10x10. mở bắt điểm lưới Snap to grid.
Vẽ Hình tròn 80 mm.
Chọn công cụ Shape tool vẽ hình sao 5 cánh kích thứơc 60x60 mm.
Align and Distribute hình sao theo hình tròn. Center.
Combine hai hình lại.
Thêm node trên cạnh và dời Node. Xem hình:

Còn update

Những mẫu báo tường đẹp đạt điểm cao ngày 26-3

2015-03-03T20:40:00.000+07:00

Tháng 3 đả đến, mọi học sinh, sinh viên đang háo hức thi đua ngày thành lập đoàn thanh niên 26-3. Các hoạt động như thi đua dạy tốt học tốt, văn nghệ, cắm trại, làm báo tường....nó không thể thiếu trong tháng 3 này. Làm báo tường là hoạt động khá quen thuộc của các lớp nhưng để có một mẫu báo tường đẹp không phải lớp nào củng có ý tưởng để làm đẹp nó.
Để có một mẫu báo tường đẹp ngày 26-3 , cần phải biết phân chia bố cục, chọn tiêu đề trình bày nội dụng trên báo tường sao cho nó bắt mắt trước cái nhìn của hội đồng chấm báo tường.
Bởi lẽ đó TuanPhan Blog sưu tầm những mẫu báo tường đẹp ngày 26-3 đạt điểm cao trong các lần cắm trại giúp các bạn có ý tưởng để làm báo tường lớp mình đẹp và hợp lý nhất. Và dưới đây là một số mẫu đẹp để cho các bạn có sự lựa chọn.

Mẫu báo tường đẹp ngày 26-3

SEO blogspot bằng cách tạo Anchor Link trong bài viết

2015-03-01T12:20:00.002+07:00

Anchor Link tức liên kết neo được các blogger WordPress viết khá nhiều nhưng các blogger blogspot ít nói đến. Cấu trúc Anchor Link ở mảng WordPress và Blogspot rất giống nhau sau một thời gian áp dụng và giờ TuanPhan Blog đả thành công nên mạn phép hướng dẫn cho anh em đam mê SEO blogspot .

Anchor Link là gì ?

Anchor Link là một thuật ngữ trong dân làm SEO người ta thường gọi là liên kết neo tức là nó là liên kết trỏ đến nội dung một vùng nào đó trong bài viết hiện tại chứ không phải liên kết ngoài.

Cách thức để hiển thị Anchor Link trên Google

Bước 1 : Tạo liên kết có giá trị #tên neo nó có cấu trức như sau:

<a href="#tên-neo">Tiêu đề cần hiển thị</a>

Ví dụ:

<a href="#chialy">Chia ly</a>

Bước 2 : Xác định nội dung cần trỏ đến bằng hàm name

<a name="tên-neo">Nội dung</a>

Hoặc

<h3><a name="tên-neo"></a>Nội dung</h3>

Ví dụ :

<h3><a name="chialy"></a>Chia Ly</h3>

Lưu ý : Thẻ a trong hàm name có thẻ thay bằng p, h1 , h2,...
Sau khi làm theo hướng dẫn để hiển thị liên kết neo Anchor Link trên kết quả tìm kiếm từ khóa của Google thường bài viết phải đạt Top 1, 2, 3 . Thường thì để hiển thị thì mất khoảng gần 1 tháng nhưng nhiều khi một số trang mất thời gian hơi lâu để hiển thị kết quả này .
Chúc các bạn thành công !

Responsive dropdown menu and Search sử dụng jQuery

2015-02-28T21:15:00.002+07:00

Responsive dropdown menu blogspot củng đươc các blogger viết khá nhiều, lần này mình bổ sung khung tìm kiếm ( Search ) kết hợp trên khung menu rất tiện lợi và đẹp mắt với một chút jQuery.

Responsive dropdown menu and Search lần này sử dụng tông màu đen làm chủ đạo kết hợp với màu vàng cam và màu chử trắng rất dễ nhìn . Nếu những ai không thích tông màu này có thể thay đổi theo ý thích của mình.
Và một cái hay ở bài này Menu và khung tìm kiếm ẩn khi chúng ta kéo thanh trượt xuống và hiện khi ta kéo nhẹ thanh trượt lên

Responsive dropdown menu and Search

Các bước tiến hành chèn Responsive dropdown menu and Search vào trong template của bạn, nếu các bạn nào chưa rành về code thì hãy tải template của mình về máy trước khi chèn tiện ích này vào. Hoặc 1 mẹo nhỏ khi chúng ta chèn bị sai thì ta cứ nhấn Ctrl+Z rồi lưu lại nó sẻ trờ về lại như ban đầu.
Bước 1:

Đăng nhập vào tài khoản blogger.com của bạn
Chọn Mẫu
Chỉnh sửa HTML

Sau đó chúng ta nhấn Ctrl+F tìm đến thẻ ]]></b:skin> và thêm đoạn CSS bên dưới lên trên nó.

CSS Responsive dropdown menu and Search

nav {
    width: 100%;
}

.nav_wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transition: top .5s ease-out;
    background: #2f3b3f;
}

.scroll {
    top: -90px;
}

.no-scroll {
    top: 0;
    z-index: 9999;
}

.btn {
    padding: 10px 1%;
    margin: 5px;
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    transition: all 0.1s ease;
}

.btn:hover {
    transition: all 0.1s ease;
}

#search {
    float: right;
    font-size: 30px;
    padding: 2px 15px;
    line-height: 40px;
    color: #fff;
    margin: 0;
    font-weight: 700;
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    -ms-transform: rotate(181deg);
    -o-transform: rotate(181deg);
    transform: rotate(181deg);
}

#search:hover {
    color: #efa666;
}

.search_box {
    clear: both;
    width: 100%;
    background: #e8ebf0;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
}

.search_box.active {
    height: auto;
    padding: 15px 0;
}

.search_box input {
    width: 80%;
    font-size: 13px;
    margin: 0 0 0 15px;
    padding: 10px;
    border: none;
    background: #fff;
}

.search_box input:focus {
    outline: none;
}

.search_box input.search_icon {
    clear: both;
    width: 10%;
    height: auto;
    padding: 10px;
    margin: 0;
    margin-left: -5px;
    border: none;
    color: #fff;
    cursor: pointer;
    background: #8c949d;
    opacity: 1;
    transition: all 0.1s ease;
}

.search_box input.search_icon:hover {
    background: #efa666;
}

.menu-link {
    display: none;
}

.spinner-master input[type=checkbox] {
    display: none;
}

.menu {
    width: 100%;
    height: auto;
    background: #2f3b3f;
    transition: all 0.3s ease;
}

.menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline-block;
}

.menu > li > ul.sub_menu {
    min-width: 10em;
    padding: 4px 0;
    background-color: #f4f4f4;
    border: 1px solid #fff;
}

.menu ul li {
    padding: 0px;
}

.menu > ul > li {
    display: inline-block;
}

.menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}

.menu ul li a:hover {
    background: #efa666;
    color: #fff;
}

.menu ul li.hover > a {
    background: #efa666;
    color: #fff;
}

.menu ul li > a {
    padding: 15px;
}

.menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 160px;
    background: #39484d;
}

.menu ul li:hover > ul {
    display: block;
}

.menu ul ul > li {
    position: relative;
}

.menu ul ul > li a {
    padding: 10px 15px;
    height: auto;
    background: #39484d;
}

.menu ul ul > li a:hover {
    background: #efa666;
    color: #fff;
}

.menu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

@media all and (max-width: 768px) {
    .example-header .container {
        width: 100%;
    }

    #search {
        padding: 10px;
    }

    .spinner-master * {
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .spinner-master {
        position: relative;
        margin: 15px;
        height: 30px;
        width: 30px;
        float: left;
    }

    .spinner-master label {
        cursor: pointer;
        position: absolute;
        z-index: 99;
        height: 100%;
        width: 100%;
        top: 5px;
        left: 0;
    }

    .spinner-master .spinner {
        position: absolute;
        height: 4px;
        width: 100%;
        padding: 0;
        background-color: #fff;
    }

    .spinner-master .diagonal.part-1 {
        position: relative;
        float: left;
    }

    .spinner-master .horizontal {
        position: relative;
        float: left;
        margin-top: 4px;
    }

    .spinner-master .diagonal.part-2 {
        position: relative;
        float: left;
        margin-top: 4px;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
        opacity: 0;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        margin-top: 10px;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        margin-top: -12px;
    }

    a.menu-link {
        display: block;
        color: #fff;
        float: left;
        text-decoration: none;
        padding: 10px 16px;
        font-size: 1.5em;
    }

    a.menu-link:hover {
        color: #efa666;
    }

    a.menu-link:after {
        content: "\2630";
        font-weight: normal;
    }

    a.menu-link.active:after {
        content: "\2715";
    }

    .menu {
        clear: both;
        min-width: inherit;
        float: none;
    }

    .menu, .menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background-color: #39484d;
    }

    .menu > li > ul.sub-menu {
        padding: 0px;
        border: none;
    }

    .menu.active, .menu > ul ul.active {
        max-height: 55em;
    }

    .menu ul {
        display: inline;
    }

    .menu li, .menu > ul > li {
        display: block;
    }

    .menu > ul > li:last-of-type a {
        border: none;
    }

    .menu li a {
        color: #fff;
        display: block;
        padding: 0.8em;
        position: relative;
    }

    .menu li.has-submenu > a:after {
        content: '+';
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        font-size: 1.5em;
        padding: 0.55em 0.5em;
    }

    .menu li.has-submenu > a.active:after {
        content: "-";
    }

    .menu ul ul > li a {
        background-color: #39484d;
        padding: 10px 18px 10px 30px;
    }

    .menu ul li a:hover {
        background: #4b5f65;
        color: #fff;
    }

    .menu ul li.hover > a {
        background: #4b5f65;
        color: #fff;
    }

    .menu ul ul, .menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto;
        top: auto;
        border: none;
    }

    .search_box {
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 10;
    }

    .search_box input {
        width: 70%;
    }

    .search_box input.search_icon {
        width: 17%;
    };
}

Sau khi chèn CSS xong các bạn tìm đến thẻ <body> hoặc </header> rồi chèn code HTML bên dưới nó sao nó phù hợp với chổ hiển thị template của bạn.

HTML Responsive dropdown menu and Search

<div class="nav_wrapper">
<!--<a class="menu-link" href="#menu"></a>-->
  
 <div class="spinner-master">
  <input type="checkbox" id="spinner-form" />
  <label for="spinner-form" class="spinner-spin">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
</div>
  
<a href="#search_box" class="btn" id="search">&#9740;</a>
<nav id="menu" class="menu">
 <ul class="dropdown">
  <li ><a href="#Link" title="Link">Home</a>
  <ul >
  <li ><a href="#Link" title="Link">Link Â» </a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">About</a></li>
  <li ><a href="#Link" title="Link">Link Â» </a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link </a></li>
   </ul>
  </li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Category</a>
  <ul >
   <li ><a href="#Link" title="Link ">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Portfolio</a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">Work</a>
  <ul >
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title=" Link"> Link</a></li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Playground</a>
   <ul >
    <li ><a href="#Link" title="Link">Link  </a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">Sitemap</a></li>
 </ul>
 </nav>
<form class="search_box" id="search_box" action="/search/">
   <input name="search_criteria" placeholder="Search here" value="" type="text"/>
   <input class="search_icon" value="Search" type="submit"/>
</form>
</div>

Cuối cùng là đoạn jQuery không thể thiếu trong bài hướng dẫn này. Và các bạn chèn nó trên thẻ </body> nhé

jQuery Responsive dropdown menu and Search

<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>

Các bạn lưu lại và xem kết quả. Chúc các bạn thành công !

DEMO

Teduh Responsive Template chuẩn SEO, HTML5 miễn phí

2015-01-04T10:40:00.002+07:00

Teduh là template miễn phí do bác NGUDANG thiết kế rất đáng dùng bởi nó thể hiện độ chuẩn của một template hiện nay đó là chuẩn SEO, chuẩn HTML5 và tích hợp chức năng Responsive. Dù nó chỉ mang một lỗi nhỏ bên CSS3 các bạn chỉ cần fix lỗi này là OK luôn.

Bên cạnh đó Teduh được thiết kế nhìn khá bắt mắt, template này phù hợp cho cả blog cá nhân hay trang tin tức giải trí.

Teduh Responsive Template có những gì ?

Chuẩn SEO >> Check
Chuẩn HTML5 Home >> Check, Post >> Check
Responsive >> Check
Thread comment Hack
Bài liên quan có hình chuẩn HTML5
Mạng xã hội chèn dưới bài viết khá đẹp
Breadcrumbs thanh điều hướng thân thiện SEO
Khá nhiều thứ khác....

Demo Click here | Download Click here

Hình nền máy tính đẹp Happy New Year 2015

2014-12-29T20:02:00.001+07:00

Còn mấy ngày nữa thôi là chúng ta đón chào năm mới 2015 rồi, một năm hứa hẹn nhiều điều mới dành cho các bạn . Và thế chúng ta lại già thêm đi một tuổi, đây là điều đáng buồn cho người đang F.A như tôi. Hihi nói đùa vậy thôi những ai cùng cảnh ngộ như tôi thì ráng kiếm một em nào hợp tính với mình để thoát khỏi kiếp F.A nhé .
Năm mới củng sắp đến rồi Tuấn Phan chẳng có gì mới cả , ngồi buồn qua lang thang mấy trang web của thằng bạn lượm lặt một số hình nền máy tính đẹp với chủ đề Happy New Year 2015 chia sẻ cho những ai thích làm đẹp máy tính của mình. Củng như ngồi hóng cái tết 2015 ấy mà các bạn nhỉ ?
Hôm nay mình viết bài với cảm giác hơi tếu tếu mong bà con cô bác đừng đặt gạch và ném đá Blog của tui nhé ?
Hình nền Happy New Year 2015 với chất lượng HD rất rỏ nét đảm bảo làm hình nền máy tính sẻ không bị nhòe . Hy vọng các bạn chọn cho mình một tấm ưng ý nhất để trang trí cho máy tính của mình .

Hình nền Happy New Year 2015

Chúc các bạn năm mới có nhiều điều mới. .D

Tối ưu hóa SEO blogspot bằng cách thêm thẻ Meta Description

2014-12-21T16:38:00.000+07:00

Nói đến tối ưu hóa SEO cho WordPress chắc ai củng biết 2 plugins SEO BY YOAST và ALL IN ONE SEO PACK, 2 plugins này rất có lợi cho việc SEO cho các blogger bởi nó tích hợp sẳn chức năng cho thẻ Meta Description thân thiện trong kết của tìm kiếm của Google. Và chức năng này củng được cập nhật trong lớn Google cập nhật cho đứa con cưng của mình là bloggspot. Nhưng làm sao để kích hoạt nó và thêm thẻ Meta gì để nó hoạt động không phải ai củng biết.

Meta Description là gì ?

Meta Description là thuộc tính HTML cung cấp lời giải thích ngắn gọn về nội dung của các trang web. Meta Description được sử dụng phổ biến trên các trang kết quả tìm kiếm (SERPs) để hiển thị các đoạn preview cho một trang nhất định.

Meta Description có chiều dài bao nhiêu ký tự ?

Meta Description có chiều dài bất ký nhưng thường được google index và cắt đoạn khoảng 160 ký tự, tốt nhất là các bạn viết đoạn Mô tả dài từ 150-160 ký tự là đẹp nhất.
Ví dụ: Mình thử gỏ từ khóa " Template chuẩn seo HTML5" nó sẻ có kết quả như sau:

Vậy kích hoạt thẻ Meta Description trong blogspot như thế nào ?

Để kích hoạt thẻ Meta Description trong blogspot các bạn tiến hành như sau:
Việc đầu tiên các bạn đăng nhập vào tài khoản https://www.blogger.com/home sau đó vào Cài đặt >> Tùy chọn tìm kiếm >> Thẻ Meta >> Bật mô tả tìm kiếm? >> Có. Viết phần Mô tả cho blog của mình nhớ không quá 150 ký tự sau đó lưu lại như hình bên dưới.

Cách thêm thẻ Meta Description trong template

Thẻ Meta Description thường được thêm dưới thẻ <head>

<head> 
<meta name = "description" content = "Đây là nội dung sẽ thường xuyên hiển thị trong kết quả tìm kiếm."> 
</head>

Còn đây là cách thêm thẻ Meta Description trong template của mình

<head> 
<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
</head>

Cách thêm thẻ Meta Description trong bài viết

Sau khi kích hoạt thẻ Meta Description trong trong cài đặt và thêm nó trong template xong việc chúng ta làm cho từng bài viết là thêm mô tả cho nó để tồi ưu hóa SEO cho blogspot hiển thị trên kết quả tìm kiếm Google.Và cách thêm nó như sau.
Ở phần Mô tả tìm kiếm trong bài viết nằm ở bên phải chúng ta thêm Mô tả cho bài viết dài từ 150-160 ký tự nhớ phần mô tả luôn sát với tiêu đề bài viết để có lợi cho kết quả tìm kiếm bài viết của bạn. Hoặc các bạn chọn 1 đoạn trong bài viết sao cho khớp với tiêu đề sau đó copy vào phần Mô tả tìm kiếm
Ví dụ: Ở bài viết "Template SEO blogger V2 chuẩn HTML5 và CSS3" mình thêm mô tả bài viết như thế này .

và đây là kết quả tìm kiếm trên google .

hoặc các bạn muốn kiểm chứng code có tồn tại hay không bằng cách thêm view source bài viết

Vậy là chúng ta đả hoàn thành bài viết tối ưu hóa SEO cho blogspot bằng cách thêm thẻ Meta Description rồi nhé.Chúc các bạn thành công !

Noel 2014 chọn địa điểm nào đẹp để chơi ?

2014-12-14T08:26:00.001+07:00

Cái lạnh của tháng mười hai bắt đầu là dấu hiệu của ngày Noel 2014 sắp đến. Noel 2014 bạn có dự định đi đâu chơi chưa? Chắc trong đầu các bạn đả có sẳn địa điểm đẹp để đi chơi Noel 2014 cùng người yêu, người thân, vợ con...rồi nhỉ. Nếu các bạn muốn khám phá mình có thể chia sẻ một số địa điểm đẹp đi chơi Noel 2014 chắc các bạn sẻ ưng ý.

Noel 2014 chọn địa điểm nào đẹp để chơi ?

Dưới đây là một số địa điểm đẹp ở một số thành phố lớn dành cho các bạn muốn đi chơi Noel 2014 .

Địa điểm đi chơi Noel 2014 ở Sài Gòn

1. Trung tâm Quận 1 – Nguyễn Huệ

Trung tâm Q.1, đặc biệt là trục đường Lê Lợi, Nguyễn Huệ, đèn trang trí được chăng khắp nơi, uốn lượn trên thân cây, chăng thành màn trên trời…

2. Khu vực nhà thờ Đức Bà – Đồng Khởi

Được trang hoàng công phu và rực rỡ, khu vực nhà thờ Đức Bà là một trong những điểm đến trong đêm Giáng sinh. Lấy nhà thờ Đức Bà làm trung tâm, các địa điểm vui chơi của khu vực này gồm Diamond Plaza, Kumho, đường Đồng Khởi, hồ con Rùa, đường Nam Kỳ Khởi Nghĩa, Tôn Đức Thắng…

3. Phú Mỹ Hưng

Ngoài nét đẹp của những chung cư cao chọc trời, hồ bán nguyệt lung linh, cầu Ánh Sao tuyệt đẹp cùng hàng loạt lâu đài lộng lẫy trong đêm (TajmaSago, Cham Charm, Parkson Paragon, Crescent Mall…), hàng loạt biệt thự tọa lạc trên các con đường yên tĩnh cũng khoác lên mình “không khí Giáng sinh” nhiều màu sắc tha hồ cho bạn dạo chơi khám phá hay pose ảnh.

4. Khu phố người Hoa – Hải Thượng Lãn Ông

Có thể mua đồ trang trí Giáng sinh tại các cửa hiệu tại rất nhiều con phố ở Sài Gòn nhưng nhiều người vẫn cứ thích đến khu phố người Hoa ở Hải Thượng Lãn Ông, đặc biệt là giới trẻ. Không quá đông đúc như rằm Trung thu, những người muốn cảm nhận không khí Noel sớm với hàng hóa trang trí đủ chủng loại có thể đến với khu phố người Hoa.

5. Khu xóm đạo quận 8

Khoảng 1 tuần trước lễ Giáng sinh, khu xóm đạo quận 8 bỗng trở thành con đường lễ hội mùa Noel với đèn màu rực rỡ cùng hàng trăm hang đá đẹp mắt kéo dài gần 4km.

6. Các trung tâm thương mại

Vào dịp Giáng sinh và đầu năm mới, hầu như tất cả các trung tâm thương mại lớn nhỏ của Sài Gòn đều chi một khoản không nhỏ để trang trí cả bên ngoài và bên trong nhằm thu hút lượng khách đến tham quan, mua sắm. Một số trung tâm mua sắm nổi bật được nhiều người biết đến như Saigon Center, Vincom A & B, Parkson, Daimond…

Địa điểm đi chơi Noel 2014 ở Hà Nội

1. Time City

Không khí Giáng sinh bắt đầu tràn ngập các con phố, các khu vui chơi giải trí, mua sắm… ở Hà Nội. Khu đô thị Times City (Minh Khai) rực rỡ ánh đèn và những tạo hình trang trí hút mắt.

2. Royal City

Khắp nơi ở Hà Nội, cảnh đêm thêm sống động nhờ những tạo hình trang trí Noel cầu kỳ, đẹp mắt. Khác với năm trước, dòng chữ Merry Christmas của Royal City Mega Mall 2014 có gắn thêm chiếc nơ đỏ thu hút, những cây thông đèn vàng được thay bằng tạo hình thiên thần đáng yêu của ngày lễ Giáng sinh.

3. Nhà thờ

Mỗi dịp Giáng sinh về, những nhà thờ cổ kính ở Hà Nội lại trở thành những điểm thăm quan hút khách bậc nhất. Năm nào cũng vậy, vào đêm Giáng sinh, để có được một chỗ đứng ở đây bạn sẽ phải tới từ rất sớm bởi chỉ chập choạng tối thôi là nơi đây đã đông nghẹt người. Là trung tâm của các hoạt động Công giáo tại Hà Nội và các vùng phụ cận, nhà thờ Lớn Hà Nội như thường lệ vẫn là nơi được trang hoàng lộng lẫy nhất.

4. Hồ Gươm

Đến Hồ Gươm trong dịp lễ Noel, bạn sẽ thấy một không khí rất lạ khi cùng người thương nắm tay nhau dạo phố, bạn có thể ghé thăm phiên chợ đêm với nhiều mặt hàng đặc sắc. Nhiều khách ngoại quốc tới đây luôn bảo rằng: Họ luôn có một ấn tượng rất đặc biệt với những quầy hàng xếp cạnh nhau san sát và cả một dãy phố dài đi bộ, người với người chen chân nhau không dứt.

5. Khu Hàng Mã, Lương Văn Can

Khu phố Hàng Mã là một trong những nơi thay da đổi thịt dịp giáng sinh. Vào những ngày này, con phố trở nên nhộn nhịp hơn, và khoác lên mình sắc đỏ, trắng của những món đồ chơi Giáng sinh đáng yêu như mũ ông già noel, đồ trang trí cây thông…

6. Vincom

Nằm trên tuyến phố lớn Bà Triệu, Vincom đã rất bắt mắt vào thời điểm này với đèn, những hàng chữ và cây thông lấp lánh.

Đây là điểm đến thu hút không chỉ giới trẻ mà còn có sức hấp dẫn với các gia đình vào buổi tối hoặc dịp cuối tuần, đặc biệt là các em nhỏ.

7. Tràng Tiền Plaza

Được biết đến là khu trung tâm thương mại dành cho những người “có điều kiện”, Tràng Tiền Plaza là địa chỉ được nhiều bạn trẻ yêu thích bởi vẻ đẹp lộng lẫy, sang trọng vào bậc nhất ở Việt Nam hiện nay.

Địa điểm đi chơi Noel 2014 ở Đà Nẵng

Đà Nẵng được mệnh danh là thành phố đáng sống nhất, lọt top 20 thành phố sạch nhất trên thế giới. Đà Nẵng đang đổi thay từng ngày với rất nhiều hoạt động du lịch, lượng khách du lịch đến Đà Nẵng ngày một tăng. Vào những dịp đặc biệt, Đà Nẵng luôn có nhiều chương trình thú vị và đặc sắc. Năm nay cũng vậy, tại thành phố Đà Nẵng cũng có nhiều địa điểm trang hoàng lộng lẫy để thu hút du khách.

Nếu những ngày thường, vào buổi tối, Đà Nẵng lung linh sắc màu với hàng ngàn ánh điện ở cầu Rồng, cầu quay sông Hàn thì vào dịp lễ Noel và Tết Dương lịch, Đà Nẵng lại có nhiều chương trình, hoạt động vui nhộn để chào mừng ngày Chúa sinh ra đời và cùng thế giới đón chào một năm mới. Nhiều du khách lại lựa chọn Đà Nẵng là điểm đến du lịch trong mùa Noel 2014 và Tết Dương lịch 2015.
Những điểm đến du lịch lý tưởng khác như Bà Nà, Ngũ Hành Sơn, Sơn Trà, Khu suối nước nóng Phước Nhơn… Càng thu hút thêm khách du lịch đến tham quan, du lịch tại Đà Nẵng. Và dịp giáng sinh hay tết dương lịch, những điểm du lịch này cũng trở nên rộn ràng hơn với những hoạt động lễ hội sôi động.
Các khu vui chơi trong nhà tại Đà Nẵng cũng rất phong phú. Các siêu thị lớn tại Đà Nẵng như Big C, Lotte Mart… đều có khu vui chơi trong nhà rộng lớn với nhiều hoạt động giải trí, ăn uống đa dạng. Dịp cuối năm 2014 này, Đà Nẵng khai trương một khu vui chơi lớn - Helio. Helio nổi tiếng trên thế giới nay đã đến Đà Nẵng sẽ có nhiều hoạt động giải trí trong nhà hơn.

Đó là các địa điểm đẹp đi chơi Noel 2014 ở 3 thành phố lớn của Việt Nam hy vọng các bạn sẻ chọn một địa điểm hợp lý nhất.

Tuấn Phan (tổng hợp)

Template SEO blogger V2 chuẩn HTML5 và CSS3

2014-12-06T17:55:00.000+07:00

Sau một thời gian chia sẻ template SEO blogger/blogspot V1 chuẩn HTML5 và CSS3 được nhiều bạn ủng hộ bởi template đơn giản nhưng tốc độ load trang rất nhanh.

Template SEO blogger V2 chuẩn HTML5 và CSS3

Tuan Phan Blog tiếp tục chia sẻ các bạn bản Edit Template SEO blogger V2 khá ấn tượng của nó tốc độ load cực nhanh template hỗ trơ SEO 100% bởi nó thiết kết chuẩn HTML5 và CSS3 bên cạnh đó nó còn tích hợp chức năng Responsive và thay đổi qua hệ thống comment google plus nếu bạn muốn. Có thể nói đây là một template blogger/blogspot miễn phí quá tuyệt vời đúng không các bạn.
Một templte hội tụ đủ các chức năng thì bạn còn chần chờ gì nữa.

Template SEO blogger V2 có tính năng gì ?

Responsive 100%
Chuẩn HTML 5 cả trang chủ và bài viết
Chuẩn CSS3
Hỗ trợ SEO 100%
Tích hợp chức năng comment google plus
Chuẩn Author Rich Snnipet
Bài viết liên quan chuẩn HTML5
Comment phân cấp đẹp chuẩn HTML5
Thanh điều hướng breadcrums chuẩn HTML5
Mạng xã hội
Và một số thứ khác nữa....

Tốc độ load trang Template SEO blogger V2 như thế nào ?

PageSpeed Insights: Check

Mobile 93/100

PC 95/100

Pingdom Website Speed Test: Check
Tốc độ load time 1.10s khá ấn tượng

Template SEO blogger V2 hỗ trợ SEO ra sao ?

CHKME: check tại đây

Google Webmaster Tools: không có một lỗi nào cả trang chủ và bài viết các bạn có thể kiểm tra tại đây

Template chuẩn HTML5 và CSS3 như thế nào ?

Chuẩn HTML5 :

Home

Pages và Post

Chuẩn CSS3 :

Một templte chuẩn SEO đúng không các bạn, vậy bạn còn chần chờ gì nữa hãy tham gia chương trình và nhận template và nhận template thôi nào.

Hình thức tham gia nhận template SEO blogger V2

Truy cập vào https://plus.google.com/+TuanphanInfo nhấn Theo dõi
Chia sẻ link bài viết này lên mạng xã hội google plus của bạn
Để lại link chia sẻ và Mail dưới khung comment để nhận template

Luu ý:

Đối với khung tìm kiếm các bạn tạo trang với với link như sau domain của bạn /p/search.html .Sau đó dán code bên dưới vào trang mới nhớ chuyển qua dạng HTML

<script>
  (function() {
    var cx = '001108512524680538283:wsteixqqy7o';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Các bạn vào đây https://www.google.com.vn/cse/all đăng ký và lấy mã nhúng thay ID 001108512524680538283:wsteixqqy7o thành ID blog bạn

Khi thêm widget các bạn nhớ vào tempate xóa <b:include name='quickedit'/> để chuẩn HTML5 nhé.
DEMO

Sitemap có post title, post date và labels cho blogger

2014-12-01T20:23:00.000+07:00

Sitemap cho blogger ở bài viết trước mình có giới thiệu cho các nhưng ở bài này mình cập nhật thêm tính năng ngày tháng đăng bài để tiện theo dõi bên cạnh đó với style củng khá bắt mắt.

Sitemap có post title, post date và labels cho blogger

Nếu các bạn có nhu cầu thêm trang sitemap cho blogger/blogspot để tiện theo dõi bài viết thì dùng thủ thuật sau.
Đầu tiên các bạn chèn CSS bên dưới trên thẻ ]]></skin> hoặc </style> sau đó lại lại.

/* CSS Sitemap */
#bp_toc {
    background: transparent;
    width: 100%;
    color: #999;
    margin-top: 10px;
    margin: 0 auto;
    padding: 5px;
}

.toc-header-col1 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #f56954;
    width: 250px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col2 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #2c323c;
    width: 75px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col3 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #252a32;
    width: 125px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
    opacity: 0.9;
}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
    font-size: 15px;
    text-transform: lowercase;
    text-decoration: none;
    color: #fff;
    font-family: 'Viga';
    font-weight: 400;
    letter-spacing: 0.5px;
}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: none;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding: 10px;
    font-size: 92%;
    ;transition: all 0.3s ease-in-out;
}

.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
    background: #fdfdfd;
}

.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease-in-out;
}

.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover {
    color: #f56954;
}

span.toc-note {
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    background: #fff;
    color: #666;
}

#bp_toc table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: transparent;
}

#bp_toc tr:nth-child(even) {
    background: #fafafa;
}

#bp_toc tr:nth-child(odd) {
    background: #f5f5f5;
}

Sau khi thêm CSS xong các bạn tạo một trang tỉnh với tiêu đề là sitemap rồi copy và paste code bên dưới nhớ chuyển sang chế độ HTML và nhấn xuất bản vậy là chúng ta đả hoàn thành cách tạo trang sitemap cho blogger/blogspot rồi nhé

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://dl.dropboxusercontent.com/u/184079020/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<b:if cond="data:blog.pageType == &quot;http://www.tuanphan.info/p/sitemap.html&quot;"> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if>

Lưu ý:

Các bạn muốn sử dụng lâu dài hãy tải file JS về máy tính rồi úp lên host của mình để sử dụng lâu dài.
Nhớ thay www.tuanphan.info thành tên miền của bạn
DEMO

Khung chứa CSS, HTML, Javascript, jQuery chuyên nghiệp cho blogger

2014-11-29T21:40:00.001+07:00

Ở bài viết trước mình có giới thiệu khung chứa code đẹp cho blogger nhưng chưa chuyên nghiệp cho lắm lần này mình cập nhật code chuyên nghiệp dành riêng cho CSS, HTML, Javascript, jQuery trong blogger/blogspot.

Khung chứa CSS, HTML, Javascript, jQuery này có tính rất nổi bật nó đếm số dòng, hiện riêng biệt CSS, HTML, Javascript, jQuery theo câu lệnh. Thật quá chuyên nghiệp đúng không các bạn.

Khung chứa CSS, HTML, Javascript, jQuery chuyên nghiệp cho blogger

Tiến hành chèn code này vào template gồm các bước sau:

Đầu tiên các bạn đăng nhập vào blogger.com >> Mẫu>>Chỉnh sửa HTML>>Ctrl+F rồi tìm đến thẻ ]]></skin> hoặc thẻ </style> và chèn trước nó

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

Tiếp các bạn tìm </head> và chèn đoạn javascript bên dưới lên trước nó

<script src='https://dl.dropboxusercontent.com/u/184079020/prism.js' type='text/javascript'/>

Sau khi chèn javascript xong các bạn tìm đến thẻ </body> và thêm đoạn jQuery bên dưới lên trên nó

<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

Sau đó các bạn lưu lại vậy là chúng ta đả hoàn thành việc cài trong template của mình. Một bước khá quan trọng khi đăng bài là sử dụng câu lệnh HTML để tách riêng biệt CSS, HTML, Javascript, jQuery nhìn rất chuyên nghiệp
Đối với HTML ta sử dụng câu lệnh:

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... HTML cần chèn... </code></pre>

Đối với CSS ta sử dụng câu lệnh:

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... CSS cần chèn ... </code></pre>

Đối với Javascript ta sử dụng câu lệnh:

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... Javascript cần chen ... </code></pre>

Đối với jQuery ta sử dụng câu lệnh:

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... jQuery cần chèn ... </code></pre>

Vậy là chúng ta hoàn thiện bài viết khung chứa CSS, HTML, Javascript, jQuery chuyên nghiệp cho blogger rồi nhé !
Lưu ý: các bạn tải file đoạn Javascript về máy tải lên host riêng của mình để sử dụng lâu dài

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license http://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */
(function () {
 // Private helper vars
 var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
 var _ = self.Prism = {
  languages: {
   insertBefore: function (inside, before, insert, root) {
    root = root || _.languages;
    var grammar = root[inside];
    var ret = {};
    for (var token in grammar) {
     if (grammar.hasOwnProperty(token)) {
      if (token == before) {
       for (var newToken in insert) {
        if (insert.hasOwnProperty(newToken)) {
         ret[newToken] = insert[newToken];
        }
       }
      }
      ret[token] = grammar[token];
     }
    }
    return root[inside] = ret;
   },
   DFS: function (o, callback) {
    for (var i in o) {
     callback.call(o, i, o[i]);
     if (Object.prototype.toString.call(o) === '[object Object]') {
      _.languages.DFS(o[i], callback);
     }
    }
   }
  },
  highlightAll: function (async, callback) {
   var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
   for (var i = 0, element; element = elements[i++];) {
    _.highlightElement(element, async === true, callback);
   }
  },
  highlightElement: function (element, async, callback) {
   // Find language
   var language, grammar, parent = element;
   while (parent && !lang.test(parent.className)) {
    parent = parent.parentNode;
   }
   if (parent) {
    language = (parent.className.match(lang) || [, ''])[1];
    grammar = _.languages[language];
   }
   if (!grammar) {
    return;
   }
   // Set language on the element, if not present
   element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
   // Set language on the parent, for styling
   parent = element.parentNode;
   if (/pre/i.test(parent.nodeName)) {
    parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
   }
   var code = element.textContent.trim();
   if (!code) {
    return;
   }
   code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\u00a0/g, ' ');
   //console.time(code.slice(0,50));
   var env = {
    element: element,
    language: language,
    grammar: grammar,
    code: code
   };
   _.hooks.run('before-highlight', env);
   if (async && self.Worker) {
    var worker = new Worker(_.filename);
    worker.onmessage = function (evt) {
     env.highlightedCode = Token.stringify(JSON.parse(evt.data));
     env.element.innerHTML = env.highlightedCode;
     callback && callback.call(env.element);
     //console.timeEnd(code.slice(0,50));
     _.hooks.run('after-highlight', env);
    };
    worker.postMessage(JSON.stringify({
     language: env.language,
     code: env.code
    }));
   } else {
    env.highlightedCode = _.highlight(env.code, env.grammar)
    env.element.innerHTML = env.highlightedCode;
    callback && callback.call(element);
    _.hooks.run('after-highlight', env);
    //console.timeEnd(code.slice(0,50));
   }
  },
  highlight: function (text, grammar) {
   return Token.stringify(_.tokenize(text, grammar));
  },
  tokenize: function (text, grammar) {
   var Token = _.Token;
   var strarr = [text];
   var rest = grammar.rest;
   if (rest) {
    for (var token in rest) {
     grammar[token] = rest[token];
    }
    delete grammar.rest;
   }
   tokenloop: for (var token in grammar) {
    if (!grammar.hasOwnProperty(token) || !grammar[token]) {
     continue;
    }
    var pattern = grammar[token],
     inside = pattern.inside,
     lookbehind = !! pattern.lookbehind || 0;
    pattern = pattern.pattern || pattern;
    for (var i = 0; i < strarr.length; i++) { // Don’t cache length as it changes during the loop
     var str = strarr[i];
     if (strarr.length > text.length) {
      // Something went terribly wrong, ABORT, ABORT!
      break tokenloop;
     }
     if (str instanceof Token) {
      continue;
     }
     pattern.lastIndex = 0;
     var match = pattern.exec(str);
     if (match) {
      if (lookbehind) {
       lookbehind = match[1].length;
      }
      var from = match.index - 1 + lookbehind,
       match = match[0].slice(lookbehind),
       len = match.length,
       to = from + len,
       before = str.slice(0, from + 1),
       after = str.slice(to + 1);
      var args = [i, 1];
      if (before) {
       args.push(before);
      }
      var wrapped = new Token(token, inside ? _.tokenize(match, inside) : match);
      args.push(wrapped);
      if (after) {
       args.push(after);
      }
      Array.prototype.splice.apply(strarr, args);
     }
    }
   }
   return strarr;
  },
  hooks: {
   all: {},
   add: function (name, callback) {
    var hooks = _.hooks.all;
    hooks[name] = hooks[name] || [];
    hooks[name].push(callback);
   },
   run: function (name, env) {
    var callbacks = _.hooks.all[name];
    if (!callbacks || !callbacks.length) {
     return;
    }
    for (var i = 0, callback; callback = callbacks[i++];) {
     callback(env);
    }
   }
  }
 };
 var Token = _.Token = function (type, content) {
   this.type = type;
   this.content = content;
  };
 Token.stringify = function (o) {
  if (typeof o == 'string') {
   return o;
  }
  if (Object.prototype.toString.call(o) == '[object Array]') {
   for (var i = 0; i < o.length; i++) {
    o[i] = Token.stringify(o[i]);
   }
   return o.join('');
  }
  var env = {
   type: o.type,
   content: Token.stringify(o.content),
   tag: 'span',
   classes: ['token', o.type],
   attributes: {}
  };
  if (env.type == 'comment') {
   env.attributes['spellcheck'] = 'true';
  }
  _.hooks.run('wrap', env);
  var attributes = '';
  for (var name in env.attributes) {
   attributes += name + '="' + (env.attributes[name] || '') + '"';
  }
  return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
 };
 if (!self.document) {
  // In worker
  self.addEventListener('message', function (evt) {
   var message = JSON.parse(evt.data),
    lang = message.language,
    code = message.code;
   self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));
   self.close();
  }, false);
  return;
 }
 // Get current script and highlight
 var script = document.getElementsByTagName('script');
 script = script[script.length - 1];
 if (script) {
  _.filename = script.src;
  if (document.addEventListener && !script.hasAttribute('data-manual')) {
   document.addEventListener('DOMContentLoaded', _.highlightAll);
  }
 }
})();
Prism.languages.markup = {
 'comment': /&lt;!--[\w\W]*?--(&gt;|&gt;)/g,
 'prolog': /&lt;\?.+?\?&gt;/,
 'doctype': /&lt;!DOCTYPE.+?&gt;/,
 'cdata': /&lt;!\[CDATA\[[\w\W]+?]]&gt;/i,
 'tag': {
  pattern: /&lt;\/?[\w:-]+\s*[\w\W]*?&gt;/gi,
  inside: {
   'tag': {
    pattern: /^&lt;\/?[\w:-]+/i,
    inside: {
     'punctuation': /^&lt;\/?/,
     'namespace': /^[\w-]+?:/
    }
   },
   'attr-value': {
    pattern: /=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,
    inside: {
     'punctuation': /=/g
    }
   },
   'punctuation': /\/?&gt;/g,
   'attr-name': {
    pattern: /[\w:-]+/g,
    inside: {
     'namespace': /^[\w-]+?:/
    }
   }
  }
 },
 'entity': /&amp;#?[\da-z]{1,8};/gi
};
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function (env) {
 if (env.type === 'entity') {
  env.attributes['title'] = env.content.replace(/&amp;/, '&');
 }
});
Prism.languages.css = {
 'comment': /\/\*[\w\W]*?\*\//g,
 'atrule': /@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,
 'url': /url\((["']?).*?\1\)/gi,
 'selector': /[^\{\}\s][^\{\}]*(?=\s*\{)/g,
 'property': /(\b|\B)[a-z-]+(?=\s*:)/ig,
 'string': /("|')(\\?.)*?\1/g,
 'important': /\B!important\b/gi,
 'ignore': /&(lt|gt|amp);/gi,
 'punctuation': /[\{\};:]/g
};
if (Prism.languages.markup) {
 Prism.languages.insertBefore('markup', 'tag', {
  'style': {
   pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,
   inside: {
    'tag': {
     pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,
     inside: Prism.languages.markup.tag.inside
    },
    rest: Prism.languages.css
   }
  }
 });
}
Prism.languages.javascript = {
 'comment': {
  pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
  lookbehind: true
 },
 'string': /("|')(\\?.)*?\1/g,
 'regex': {
  pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
  lookbehind: true
 },
 'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,
 'boolean': /\b(true|false)\b/g,
 'number': /\b-?(0x)?\d*\.?\d+\b/g,
 'operator': /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\//g,
 'ignore': /&(lt|gt|amp);/gi,
 'punctuation': /[{}[\];(),.:]/g
};
if (Prism.languages.markup) {
 Prism.languages.insertBefore('markup', 'tag', {
  'script': {
   pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
   inside: {
    'tag': {
     pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
     inside: Prism.languages.markup.tag.inside
    },
    rest: Prism.languages.javascript
   }
  }
 });
}
Prism.languages.java = {
 'comment': {
  pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
  lookbehind: true
 },
 'string': /("|')(\\?.)*?\1/g,
 'keyword': /\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,
 'boolean': /\b(true|false)\b/g,
 'number': /\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,
 'operator': {
  pattern: /([^\.]|^)([-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|%|\^|(&lt;){2}|($gt;){2,3}|:|~)/g,
  lookbehind: true
 },
 'ignore': /&(lt|gt|amp);/gi,
 'punctuation': /[{}[\];(),.:]/g,
};

DEMO

Code sử dụng arlinadesign

Tiện ích Recent Post với hiệu ứng Slider chuyên nghiệp cho blogger

2014-11-23T14:51:00.001+07:00

Recent Post là tiện ích chúng ta bắt gặp nhiều nhất ở các trang tin tức và giải trí mà đặc biệt là hiệu ứng Slider rất bắt mắt điều làm được trên các mã nguồn wordpress, blogspot, Drupal, Joomla...
Mấy hôm nay tinh thần mệt mỏi nên không online nên không ra bài mới được. Hôm nay là một ngày đẹp trời với tinh thân thỏa mái nên Tuấn Phan giới thiệu cho bà con cô bác một tiện ích Recent Post rất chuyên nghiệp cho blogger/blogspot với hiệu ứng Slider tự chuyển động đổi bài với thời gian quy định.

Tiện ích Recent Post củng được kha khá các blogger viết nhưng mỗi người điều có cách CSS và cấu trúc khác nhau và dưới đây là thủ thuật mình lấy từ 1 template của người indonesia về ngâm cứu và chia sẻ cho các bạn và kính mong các bạn đừng vác gạch ném lên blog của tui nhé.
Ở bài viết này mình sẻ hướng dẫn cho các bạn theo 2 cách:

Tiện ích Recent Post với hiệu ứng Slider chuyên nghiệp cho blogger

Cách thứ nhất là thêm tiện ích HTML/Javascript trong Bố cục : Cách này không chuẩn HTML5
Cách thứ hai là thêm trực tiếp vào trong Template : Cách này chuẩn HTML5

Cách thứ nhất là thêm tiện ích HTML/Javascript

Cách này có ưu điểm nhanh gọn dễ quản lý nhưng nhược điểm nó không chuẩn HTML5
Đầu tiên các bạn đăng nhập vào blogger.com chọn Bố cục chọn tiếp Thêm tiện ích và chọn HTML/Javascript sau đó copy code bên dưới và paste vào tiện ích sau đó lưu lại


<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/184079020/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.tuanphan.info/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});

Cách thứ 2 Recent Post Slider trực tiếp vào template

Cách này khá phức tạp và rườm rà nhưng ưu điểm của nó là hợp lệ HTML5 nhé các bạn.
Các bạn vào blogger xong chọn Mẫu tiếp chọn chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></skin> hoặc </style> sau đó chèn đoạn CSS bên dưới lên trên 1 trong 2 thẻ trên

/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Tiếp tục chúng ta thẻ </body> và thêm đoạn Javascript bên dưới lên trước nó


<script src="https://dl.dropboxusercontent.com/u/184079020/slider-post.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.tuanphan.info/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Bước này khá quan trong để chọn vị trí hiện Slider cho phù hợp với template của mình nhưng nó phải nằm trong content-wrapper hoặc menu-wrapper cách đơn giản nhất là các bạn chèn code <div id = "featuredpost" ></div > bên dưới menu của bạn thường nó có thẻ </nav> . Nếu các bạn muốn nó chỉ xuất hiện trang chủ thì dùng code này


<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id="featuredpost"></div> </b:if>

Các bạn nhớ thay http://www.tuanphan.info/ thành tên miền của bạn rồi lưu lại và xem kết quả nhé.

Ghi chú:

MaxPost: Số lượng bài viết
ImageSize: Kích thước ảnh
Interval: Thời gian chờ chuyển đổi
Autoplay: (True) Post sẽ tự động, (False) Post sẽ không tự động.

Video hướng dẫn

Vậy là chúng ta đả hoàn thành tiện ích Recent Post với hiệu ứng Slider cho blgger rồi nhé. Chúc các bạn thành công !

Ảnh bìa facebook noel 2014 đẹp và mới nhất

2014-11-19T20:28:00.000+07:00

Lễ Noel hay còn gọi lễ giáng sinh diễn ra từ đêm ngày 24/12 cho tới hết ngày 25/12 vào hằng năm dành cho người thiên chúa giáo . Nhưng nhìn chung ở Việt Nam ngày noel được các bạn trẻ khá quan tâm cho dù mình theo hay không theo đạo . Vào những ngày này các bạn trẻ thường chụp hình làm kỷ niệm tặng nhau những tấm thiệp, món quà có ghi Merry Christmas rất có ý nghĩa. Bên cạnh đó còn có những lời tỏ tình rất lãng mạn.....
Để chờ và đón noel 2014 sắp đến Tuấn Phan tuyển chọn nhiều ảnh bìa facebook đẹp để trang trí cho trang cá nhân của mình thêm nổi bật . Nói chung là đặt gạch hóng noel 2014 sắp tới các bạn nhĩ .

Ảnh bìa facebook noel 2014 đẹp và mới nhất

Dươi đây là 20 ảnh bìa facebook noel 2014 đẹp khác nhau các bạn có thể chọn một ảnh mình thích nhất tải về máy tính hoặc smartphone của mình rồi úp làm ảnh bìa trang cá nhân của mình. Nếu các bạn không chọn được tấm ảnh nào xin đừng ném đá Tuấn Phan nhé.

Ảnh bìa facebook noel 2014 đẹp

Cuối cùng chúc bà con, cô bác, anh, chị, em, cháu, chắt,... đón noel 2014 vui vẻ bên người yêu, người thân của mình .!D

Ơn Giời Cậu Đây Rồi! Full HD [ Cập nhật liên tục]

2014-11-18T21:47:00.000+07:00

Ơn Giời Cậu Đây Rồi! tên gốc Thank God! You’re here là chương trình giải trí của VTV được Tuấn Phan cập nhật liên tục chất lượng Full HD để các bạn tiện theo dõi.

Ơn Giời Cậu Đây Rồi! là chương trình giải trí khá vui và thú vị từ khi xuất bản tập đầu tiên vào ngày 11/10/2014 cho đến nay lượng khán giả theo dõi khá đông, chương trình được phát sóng vào lúc 21h tối thứ bảy hằng tuần và được úp lên YOUTUBE 1 ngày sau đó tức Chủ nhật.
Có thể nói chương trình Ơn Giời Cậu Đây Rồi! là nơi hội tụ các nghệ sĩ, ca sĩ, diễn viên, MC, người mẫu nổi tiếng như Hoài Linh, Trấn Thành, Việt Hương, Xuân Bắc, Chí Tài...
Chương trình khá hay và mới lạ đối với Việt Nam bởi kịch bản xảy ra khi thí sinh tham gia không hề biết trước tình huống mà thì sinh tùy cơ ứng biến tùy theo độ lanh lẹ của bản thân. Mỗi tuần mỗi tập mỗi chủ đề khác nhau nhằm đổi mới tạo tiếng cười cho khán giả xem trên VTV3 hay xem lại trên YOUTUBE. Nhìn chung các tập điều có bố cục chung gồm 4 thí sinh, các trưởng phòng số 1,2,3,4 gồm Trấn Thành, Việt Hương, Công Lý, Chí Tài, Thanh Thủy... và trưởng phòng số 5 đó là Hoài Linh
Ơn Giời Cậu Đây Rồi! cập nhật
Trưởng phòng số 5: Hoài Linh
MC: Xuân Bắc
Tập 1
Trưởng phòng: Trấn Thành, Việt Hương, Chí Tài, Thanh Thủy
Thí sinh: Trường Giang, Anh Đức,Kiều Linh, Thanh Vân
Tập 2
Trưởng phòng: Trấn Thành, Việt Hương, Chí Tài, Trường Giang, Thanh Thủy
Thí sinh: Dương Triệu Vũ, Phi Thanh Vân, Chiến Thắng, Thúy Diễm
Tập 3
Trưởng phòng : Trấn Thành, Chí Tài, Việt Hương, Đại Nghĩa
Thí sinh: Tiến Luật, Khánh Nam, Quỳnh Trang, Ngân Quỳnh
Tập 4
Trưởng phòng : Tự Lọng, Việt Hương, Trấn Thành, Chí Tài, Trường Giang
Thí sinh: Miu Lê, Phan Văn, Hoàng Phi, Thị Mười
Tập 5
Trưởng phòng: Thanh Thủy, Việt Hương, Trấn Thành, Chí Tài, Trường Giang
Thí sinh: Ngọc Tưởng, Tiết Cương, Trang Nhung, Sỹ Luân
Tập 6
Trưởng phòng:Trấn Thành, Chí Tài, Việt Hương, Trường Giang, Tự Long, Công Lý
Thí sinh: Thành Trung, Trà My, Huy Khánh, Hari won
Tập 7
Trưởng phòng : Trấn Thành, Minh Nhí, Chí Tài, Trường Giang, Việt Hương
Thí sinh: Lan Phương, Nam Thành, Nguyên Khang, Phi Phụng

Video Ơn Giời Cậu Đây Rồi! cập nhật

Bấm xem link bên dưới

https://www.youtube.com/watch?v=LtjHOXREOpE&list=PLfRqvKB65lpTPSrEd9X_H2OYBcm44CawF

Sora Red Responsive template tin tức giải trí miễn phí

2014-11-17T20:30:00.001+07:00

Sora Red Responsive là template miễn phí cực đẹp cho blogspot/blogger phù hợp cho những site phát triển nội dung giải trí và tin tức xã hội .

Sora Red Responsive template tin tức giải trí miễn phí

Sora Red được phát triển trên nền tảng blogger do Soratemplates Designer. Template được trang trí khá đẹp giao diện trang chủ hiển thị theo Nhãn yêu thích phù hợp với trang tin tức giải trí /

Sora Red Responsive có những gì ?

Responsive ( giao diện thay đổi theo trình duyệt
Slider (Trang chủ)
Drop Down Menu
Mạng xã hội
Commnet mặc định và comment facebook
Bài viết liên quan có hình
SEO Friendly
Footer chia thành 3 Column
Hỗ trợ HTML5
Và nhiều thứ khác.....

Code socials widget

<div class="kp-socials-widget">
<ul class="clearfix">
<li class="rss-icon text-center"><a href="#" class="fa fa-rss"></a></li>                                                                     <li class="twitter-icon text-center"><a href="#" class="fa fa-twitter"></a></li>                                                                 <li class="facebook-icon text-center"><a href="#" class="fa fa-facebook"></a></li>                                                                                   <li class="gplus-icon text-center"><a href="#" class="fa fa-google-plus"></a></li></ul></div>

Các bạn thêm tiện ích Javascript/HTML sau đó dán code này vào nhớ thêm link mạng xã hội vào nhé ?

Demo vs Download

DEMO
DOWNLOAD

Tuấn Phan đổi giao diện và hệ thống comment

2014-11-16T20:07:00.004+07:00

Sau hơn 5 tháng đi vào hoạt động Tuấn Phan đả 3 lần đổi giao diện và 3 lần đổi hệ thống comment bởi một số lý do cần thiết

Tuấn Phan đổi giao diện vì sao ?

Nói chung giao diện trước và sau củng khá tương đồng nhau về độ chuẩn HTML5 và CSS3, nhưng giao diện mình đổi lần này trong đơn giản và và thêm một số tính năng mới như Responsive video, thêm Back to Top, phân trang navigation, bài viết củ, bài viết mới....
Giao diện mới có cái nhìn thân thiện hơn cho một blogger cá nhân thực thụ, nên mình không hối tiếc khi đổi template này !

Thay đổi hệ thống commnet ?

Qua hơn 5 tháng hoạt động Tuấn Phan đả đổi hệ thống comment từ mặc định cho đến disqus rồi đến google plus cuối cùng mình củng quay lại với hệ thống mặc định của blogger vì một số lý do sau
Disqus ? là hệ thống comment khá hay với một số tính năng nổi bật và chống spame hiệu quả ngay cả Thạch Pham Blog củng ưu ái nó nhưng có cái nó làm cho tốc độ load trang khá chậm nên mình quyết định đỏi sang Google Plus.
Google Plus ?là hệ thống comment của ông lớn Google được sử dụng trong Youtube và Gooogle Plus... nó có tính rộng rãi rất cao bởi trong thời nay người ta sử dụng tài khoản Gmail rất nhiều nhưng nó có cái tội là khó kiểm duyệt nhận xét nhiều khi độc giả comment cả tháng mà mình không hay biết đó là cái bất lợi nhất khi sử dụng nó.
Vậy cuối cùng Tuấn Phan quyết định quay về hệ thống comment củ và một điều khá là buồn những comment từ khi đổi sang Google Plus đả mất hết đây quả là một điều tồi tệ đối với Tuấn Phan. Vì vậy Tuấn Phan xin lỗi độc giả khi các comment của bạn đả mất trên site mình.

Tuấn Phan hy vọng với giao diện mới và hệ thống comment mới các bạn ủng hộ nhiệt tình. Một lần nữa Tuấn Phan cám ơn !

Tạo hiệu ứng loading giống Youtube cho blogspot

2014-11-15T19:45:00.000+07:00

Làm thế nào để chèn hiệu ứng loading giống Youtube cho blogspot ? Code loading Youtube cho blogger .
Nói đến Youtube chắc ai củng biết và các bạn vào trang này xem các video hoặc bấm sang xem video khác các bạn để ý phía trên có hiệu ứng loading trang màu đỏ nhìn rất bắt mắt và chuyên nghiệp.
Còn blogspot có làm được điều không ? Câu trả lời được chứ chỉ cần một đoạn Javascript chèn trước thẻ </body> là xong thôi à.

Xem thêm: Một số hiệu ứng loading cho blogger

Tạo hiệu ứng loading giống Youtube cho blogspot

Quá đơn giản phải không các bạn, những ai có như cầu làm đẹp template nhất là demo loading giống Youtube thì sử dụng đoạn Javascript bên dưới nhé

Code loadging Youtube


<script type='text/javascript'>

//<![CDATA[

var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=

a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,

k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();

var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);

//]]>

</script>

Video hướng dẫn

Sau khi chèn xong hiệu ứng loading giống Youtube xong các bạn lưu lại và xem kết quả nhé . Chúc các bạn thành công !

Một số hiệu ứng loading đẹp cho blogger

2014-11-11T20:18:00.003+07:00

Hiệu ứng loading cho blogspot không còn xa lạ gì đối với các blogger Việt Nam và nước ngoài. Một số trang có hiệu ứng khá đẹp như google, facebook, youtube....

Thủ thuật hiệu ứng loading cho blogger này khá là chuyên nghiệp với nhiều style khác nhau để cho các bạn có nhiều lựa chọn khi chèn vào template của mình làm cho site của bạn đẹp hơn rất nhiều.
Nhưng nhược điểm của nó làm cho blog của mình load chậm đi một chút, các bạn nên cân nhắc khi chèn vào template của mình nhé.

Một số hiệu ứng loading đẹp cho blogger

Để chèn hiệu ứng loading cho blogger chúng ta cần 1 đoạn Javascript và một chút CSS cho nó.
Công việc đầu tiên của bạn khi chèn một tiện ích gì đừng quên đăng nhập vào tài khoản blogger nhé.
Sau khi đăng nhập xong các bạn chọn Mẫu tiếp chọn Chỉnh sửa HTML sau đó tìm đến thẻ </head> và thêm đoạn Javascript bên dưới lên trước thẻ </head>

<script src='https://dl.dropboxusercontent.com/u/184079020/progressbar.js'/>

Sau khi thêm Javascript xong chọn bạn chọn một số style CSS bên dưới và chèn trước thẻ ]]></skin> sau đó lưu lại và xem kết quả.

Một số style loading đẹp cho blogger

Style 1:

.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #29d;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
height: 2px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

Style 2:

.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: #29d;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
pointer-events: none;
}
.pace.pace-active .pace-activity {
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.pace .pace-activity::before,
.pace .pace-activity::after {
position: absolute;
bottom: 30px;
left: 50%;
display: block;
border: 5px solid #fff;
border-radius: 50%;
content: '';
}
.pace .pace-activity::before {
margin-left: -40px;
width: 80px;
height: 80px;
border-right-color: rgba(0, 0, 0, .2);
border-left-color: rgba(0, 0, 0, .2);
-webkit-animation: pace-rotation 3s linear infinite;
animation: pace-rotation 3s linear infinite;
}
.pace .pace-activity::after {
bottom: 50px;
margin-left: -20px;
width: 40px;
height: 40px;
border-top-color: rgba(0, 0, 0, .2);
border-bottom-color: rgba(0, 0, 0, .2);
-webkit-animation: pace-rotation 1s linear infinite;
animation: pace-rotation 1s linear infinite;
}
@-webkit-keyframes pace-rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}

Style 3 :

.pace {
width: 140px;
height: 300px;
position: fixed;
top: -90px;
right: -20px;
z-index: 2000;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
transition: all 2s linear 0s;
}
.pace.pace-active {
-webkit-transform: scale(.25);
-moz-transform: scale(.25);
-ms-transform: scale(.25);
-o-transform: scale(.25);
transform: scale(.25);
opacity: 1;
}
.pace .pace-activity {
width: 140px;
height: 140px;
border-radius: 70px;
background: #29d;
position: absolute;
top: 0;
z-index: 1911;
-webkit-animation: pace-bounce 1s infinite;
-moz-animation: pace-bounce 1s infinite;
-o-animation: pace-bounce 1s infinite;
-ms-animation: pace-bounce 1s infinite;
animation: pace-bounce 1s infinite;
}
.pace .pace-progress {
position: absolute;
display: block;
left: 50%;
bottom: 0;
z-index: 1910;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
-webkit-animation: pace-compress .5s infinite alternate;
-moz-animation: pace-compress .5s infinite alternate;
-o-animation: pace-compress .5s infinite alternate;
-ms-animation: pace-compress .5s infinite alternate;
animation: pace-compress .5s infinite alternate;
}
@-webkit-keyframes pace-bounce {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-webkit-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-webkit-animation-timing-function: ease-out;
}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes pace-bounce {
0% {
top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-moz-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-moz-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-moz-animation-timing-function: ease-out;}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {top: 0;
-moz-animation-timing-function: ease-in;
}
}
@keyframes pace-bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
50% {
top: 140px;
height: 140px;
animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
animation-timing-function: ease-out;
}
95% {
top: 0;
animation-timing-function: ease-in;
}
100% {
top: 0;
animation-timing-function: ease-in;
}
}
@-webkit-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-webkit-animation-timing-function: ease-out;
}
}
@-moz-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-moz-animation-timing-function: ease-out;
}
}
@keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
animation-timing-function: ease-out;
}
}

Style 4:

.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-perspective: 12rem;
-moz-perspective: 12rem;
-ms-perspective: 12rem;
-o-perspective: 12rem;
perspective: 12rem;
z-index: 2000;
position: fixed;
height: 6rem;
width: 6rem;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace.pace-inactive .pace-progress {
display: none;
}
.pace .pace-progress {
position: fixed;
z-index: 2000;
display: block;
position: absolute;
left: 0;
top: 0;
height: 6rem;
width: 6rem !important;
line-height: 6rem;
font-size: 2rem;
border-radius: 50%;
background: rgba(34, 153, 221, 0.8);
color: #fff;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
text-align: center;
-webkit-animation: pace-3d-spinner linear infinite 2s;
-moz-animation: pace-3d-spinner linear infinite 2s;
-ms-animation: pace-3d-spinner linear infinite 2s;
-o-animation: pace-3d-spinner linear infinite 2s;
animation: pace-3d-spinner linear infinite 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pace .pace-progress:after {
content: attr(data-progress-text);
display: block;
}
@-webkit-keyframes pace-3d-spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
}
}
@-moz-keyframes pace-3d-spinner {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(360deg);
}
}
@-ms-keyframes pace-3d-spinner {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(360deg);
}
}
@-o-keyframes pace-3d-spinner {
from {
-o-transform: rotateY(0deg);
}
to {
-o-transform: rotateY(360deg);
}
}
@keyframes pace-3d-spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

Style 5:

.pace.pace-inactive {
display: none;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
height: 60px;
width: 100px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace .pace-progress {
z-index: 2000;
position: absolute;
height: 60px;
width: 100px !important;
}
.pace .pace-progress:before {
content: attr(data-progress-text);
text-align: center;
color: #fff;
background: #29d;
border-radius: 50%;
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 100;
line-height: 1;
padding: 20% 0 7px;
width: 50%;
height: 40%;
margin: 10px 0 0 30px;
display: block;
z-index: 999;
position: absolute;
}
.pace .pace-progress:after {
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: spin-3 2s linear infinite;
-moz-animation: spin-3 2s linear infinite;
-o-animation: spin-3 2s linear infinite;
animation: spin-3 2s linear infinite;
}
.pace .pace-activity {
font-size: 15px;
line-height: 1;
z-index: 2000;
position: absolute;
height: 60px;
width: 100px;
display: block;
}
.pace .pace-activity:before {
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-animation: spin-1 2s linear infinite;
-moz-animation: spin-1 2s linear infinite;
-o-animation: spin-1 2s linear infinite;
animation: spin-1 2s linear infinite;
}
.pace .pace-activity:after{
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: spin-2 2s linear infinite;
-moz-animation: spin-2 2s linear infinite;
-o-animation: spin-2 2s linear infinite;
animation: spin-2 2s linear infinite;
}
@-webkit-keyframes spin-1 {
0% { -webkit-transform: rotate(0deg); }
100%{ -webkit-transform: rotate(359deg);}
}
@-moz-keyframes spin-1 {
0% { -moz-transform: rotate(0deg); }
100%{ -moz-transform: rotate(359deg);}
}
@-o-keyframes spin-1 {
0% { -o-transform: rotate(0deg); }
100%{ -o-transform: rotate(359deg);}
}
@keyframes spin-1 {
0% { transform: rotate(0deg); }
100%{ transform: rotate(359deg);}
}
@-webkit-keyframes spin-2 {
0% { -webkit-transform: rotate(59.8deg); }
100%{ -webkit-transform: rotate(418.8deg);}
}
@-moz-keyframes spin-2 {
0% { -moz-transform: rotate(59.8deg); }
100%{ -moz-transform: rotate(418.8deg);}
}
@-o-keyframes spin-2 {
0% { -o-transform: rotate(59.8deg); }
100%{ -o-transform: rotate(418.8deg);}
}
@keyframes spin-2 {
0% { transform: rotate(59.8deg); }
100%{ transform: rotate(418.8deg);}
}
@-webkit-keyframes spin-3 {
0% { -webkit-transform: rotate(119.6deg); }
100%{ -webkit-transform: rotate(478.6deg);}
}
@-moz-keyframes spin-3 {
0% { -moz-transform: rotate(119.6deg); }
100%{ -moz-transform: rotate(478.6deg);}
}
@-o-keyframes spin-3 {
0% { -o-transform: rotate(119.6deg); }
100%{ -o-transform: rotate(478.6deg);}
}
@keyframes spin-3 {
0% { transform: rotate(119.6deg); }
100%{ transform: rotate(478.6deg);}
}

Style 6 :

.pace {
-webkit-pointer-events: none;
pointer-events: none;
z-index: 2000;
position: fixed;
height: 90px;
width: 90px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace.pace-inactive .pace-activity {
display: none;
}
.pace .pace-activity {
position: fixed;
z-index: 2000;
display: block;
position: absolute;
left: -30px;
top: -30px;
height: 90px;
width: 90px;
display: block;
border-width: 30px;
border-style: double;
border-color: #29d transparent transparent;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.pace .pace-activity:before {
content: ' ';
position: absolute;
top: 10px;
left: 10px;
height: 50px;
width: 50px;
display: block;
border-width: 10px;
border-style: solid;
border-color: #29d transparent transparent;
border-radius: 50%;
}

@-webkit-keyframes spin {
100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(359deg); }
}
@-o-keyframes spin {
100% { -moz-transform: rotate(359deg); }
}
@keyframes spin {
100% { transform: rotate(359deg); }
}

Video hướng dẫn và mẫu style

Hy vọng 6 style đẹp trên các bạn chọn ra một cái ưng ý nhất về hiệu ứng loading đẹp cho blogger/blogspot.

Khung chứa Code đơn giản nhưng đẹp cho blogger

2014-11-09T09:13:00.003+07:00

Khung chứa Code như HTML, XML, PHP, CSS, JavaScript... là một phần không thể thiếu cho một blogger luôn chia sẻ thủ thuật, tiện ích blogspot thực thụ.

Khung chứa Code có tác dụng làm cho đọc giả dễ nhìn hơn, dễ copy code hơn ngoài ra nó củng có tác dụng chống tràn khung bài viết khi code quá dài. Thủ thuật này củng được viết khá nhiều nhưng mình viết lại cho những ai có nhu cầu dùng nó, mỗi người mỗi ý tưởng mà đúng không các bạn.

Khung chứa Code đơn giản nhưng đẹp cho blogger

Để tiến hành làm khung chứa code cho blogger chúng ta cần một chút CSS và một chút Javascript để hoàn thành bài viết này.
Để chèn CSS và Javascript vào template của bạn trước tiên chúng ta đăng nhập vào tài khoản blogger của bạn sau đó chọn MẪU tiếp chọn CHỈNH SỬA HTML.
Ở phần CSS mình chia ra 2 màu tối và màu sáng để phù hợp với template của các bạn.

CSS khung chứa code màu sáng


/* Light theme */
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

CSS khung chứa code màu tối


/* Dark theme */
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Các bạn chọn một trong hai màu sao cho phù hợp với template của mình sau đó thêm nó lên trên thẻ ]]></skin>
Sau khi thêm CSS xong các bạn thêm đoạn Javascript lên trên thẻ </body>


<script type="text/javascript" src='https://dl.dropboxusercontent.com/u/184079020/prism.js'></script>

Các bạn lưu lại thế chúng ta đả hoàn thành thêm code trong template rồi nhé .

Còn ở phần đăng bài ta cần một hàm HTML để hoàn thành thủ tục khung chưa code cho blogger này nhé.

Chúng ta quy định

HTML, XML, PHP là language-markup
CSS là language-css
JavaScript là language-javascript

Đoạn HTML khung chứa code


<pre><code class="language-markup"> ... CODE ... </code></pre>

<pre><code class="language-css"> ... CODE ... </code></pre>

<pre><code class="language-javascript"> ...CODE ... </code></pre>

Vi dụ:

<pre><code class="language-css">code .token.important {
font-weight:bold;
}</code></pre>

Video hướng dẫn

DEMO

Khi đăng bài chúng ta nhơ chuyển sang chế độ HTML nhé. Vậy là chúng ta đả hoàn thành xong khung chưa code tuy đơn giản nhưng đẹp rồi nhé. Chúc các bạn thành công !

Button Demo và Download chuyên nghiệp cho blogger

2014-11-07T20:10:00.003+07:00

Nút Demo và Download là phần không thể thiếu đối với một blog chuyên thiết kế mẫu template miễn phí và trả trí. Mỗi người có một cách thiết kế riêng cho button demo và download cho template của mình để làm cho blog của mình chuyên nghiệp hơn.

Button Demo và Download mình giới thiếu ở bài này với một chút HTML và một chút CSS3 khá chuyên nghiệp cho một trang blogger chuyên thiết kế template .
Chúng ta đi vào vấn đề chính là chèn CSS và HTML vào template thôi nào.

Button Demo và Download chuyên nghiệp cho blogger

Đầu tiên các bạn đăng nhập vào tài khoản blogger.com của mình, các bạn chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm đến thẻ </head> và thêm font awesome bên dưới lên trước thẻ </head>

Font awesome Demo và Download

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Sau khi thêm font awesome xong chúng ta thêm đoạn CSS bên dưới lên trên thẻ ]]></skin>

CSS3 Demo và Download

.whitebutton {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebutton a {
background: #B5D012;
color: #666;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
}
.whitebutton a:before {
content: '\f019';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -12px;
margin-right: 6px;
}
.whitebutton span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Arial', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebutton .up {
background: #e25734;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down {
margin: -30px auto;
opacity: 0;
border-radius: 5px 5px 0 0;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down:before {
content:'\f14a';
font-family: FontAwesome;
font-weight: normal;
margin-right: 6px;
color: #aaa;
}
.whitebutton:hover .up {
opacity: 1;
transform: translate(0,0);
}
.whitebutton:hover .down {
opacity: 1;
transform: translate(0,-90px);
}
.whitebuttondemo {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebuttondemo a {
background: #e25734;
color: #fff;
display: block;
font-size: 17px;
font-weight: 700;
font-family:'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
transition: 350ms;
}
.whitebuttondemo a:before {
content:'\f002';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -12px;
margin-right: 6px;
}
.whitebuttondemo a:hover {
color: #fff;
}
.whitebuttondemo span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Arial', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebuttondemo .up {
background: #444;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebuttondemo:hover .up {
opacity: 1;
transform: translate(0,0);
}

Sau đó các bạn lưu lại thế là xong phần CSS và Fonts trong template. Nhưng nó vẫn chưa đủ để có Button Demo và Download hoàn thiện được ta cần gọi hàm của nó trong bài đăng để hoàn chỉnh nó cụ thể đoạn HTML như sau

HTML Demo và Download

<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

Khi đăng bài ta nhớ chuyển sang HTML và copy đoạn HTML này vào nhớ thay # thành link demo và # thành link doanload nhé. Còn 1.6MB.rar là file mình úp lên host nhớ thay đổi theo kích thước từng file nhé.

DEMO

Video hướng dẫn

Vậy là xong Button Demo và Download cho blogger các bạn nhé. Chúc các bạn thành công !

Chương 2: Lệnh Order, Align And Distribute trong CorelDRAW

2014-11-03T20:38:00.002+07:00

Lệnh Order cho phép chúng ta thay đổi vị trí xếp lớp giữa các đối tượng với nhau, Lệnh Align and Distribute cho phép chúng ta giống hàng đối tượng A theo đối tượng B .

Xem thêm : Học CorelDRAW

Lệnh Order, Align And Distribute trong CorelDRAW

Lệnh Order

Lệnh Order cho phép chúng ta thay đổi vị trí xếp lớp giữa các đối tượng với nhau.
Thao tác thực hiện thay đổi vị trí xếp lớp giữa các đối tượng:
Chọn đối tượng cần thay đổi vị trí.
Chọn Menu Arrange, chọn Order, Chọn một trong các chức năng tại hộp thọai nhìn thấy.
To Front: Trên cùng. Nhấn tổ hợp phím Shift + PgUp.
To Back: Dưới cùng. Nhấn tổ hợp phím Shift + PgDown.

Lệnh Align and Distribute

Lệnh Align and Distribute cho phép chúng ta giống hàng đối tượng A theo đối tượng B.
Thao tác thực hiện:

Chọn đối tượng A bằng công cụ Pick, đồng thời nhấn giữ phím Shift chọn tiếp đối tựơng B.
Chọn Menu Arrange, chọn Align And Distribute.
Hộp thọai xuất hiện: Xem hình:
Chọn chức năng canh lề rồi chọn Ok.
Theo phương ngang có: Left: phím tắt là L. Center: Phím tắt là C. Right: Phím tắt là R.
Theo phương đứng có: Top: phím tắt là T. Center: Phím tắt là E. Bottom: Phím tắt là B.

Ví dụ:
Align hai Circle C1, C2 theo C0.
Vẽ Co
Vẽ C1 và C2 nhỏ hơn C0 2 lần
Với C1, C0: Top - Center. - Với C2, C0: Bottom - Center

Lệnh Khoa Khoa Học Và Kỹ Thuật Máy Tính

Chương 2: Công cụ OutLine trong CorelDRAW

2014-11-02T15:55:00.005+07:00

Công cụ OutLine cho phép chúng ta thực hiện các thao tác biến đổi thuộc tính đường viền của đối tượng.

Xem thêm series : Học CorelDRAW

Công cụ OutLine trong CorelDRAW

Công cụ OutLine

Thao tác thực hiện thay đổi thuộc tính đường viền:
Chọn các đối tượng bằng công cụ Pick.
Chọn công cụ Outline tool trên hộp công cụ.
Chọn một trong các chức năng trên thanh Menu sổ ngang.
Để chọn lại Style ta phải chọn hộp Pen trên Menu ngang, chọn lại Style trong hộp thọai.

Tài liệuKhoa Khoa Học Và Kỹ Thuật Máy Tính

Ảnh bìa facebook đẹp ngày nhà giáo Việt Nam 20-11

2014-11-02T08:47:00.001+07:00

Chắc ngày ngày này các bạn học sinh hăng hái thi đua các hoạt động của trường để chào mừng ngày nhà giáo Việt Nam 20-11. Tháng 11 đả đến với lượng từ khóa về 20-11 xuất hiện khá nhiều trên kết quả tìm kiếm google của bạn học sinh để tham khảo lấy ý tưởng làm cho lớp mình )như làm báo tường 20-11, mẫu báo tường đẹp 20-11, mẫu báo tường mới 20-11, thơ hay nhất 20-11....) điều này chứng tỏ các em chuẩn bị rất kỹ để lớp mình có điểm cao trong trường đó là món quà ý nghĩa nhất dành cho thầy cồ giáo chủ nhiệm của mình.

Ảnh bìa facebook đẹp ngày nhà giáo Việt Nam 20-11

Bên cạnh các hoạt động văn nghệ sôi nổi ấy các em củng sưu tầm rất nhiều ảnh bìa facebook đẹp ngày nhà giáo Việt Nam 20-11 để trang trí cho trang cá nhân của mình.
Với 13 ảnh bìa facebook đẹp ngày nhà giáo Việt Nam 20-11 các bạn có thể chọn 1 tấm phù hợp nhất để trang trí cho trang facebook của mình để chào đón ngày 20-11 nhé .

Ảnh bìa facebook đẹp 20-11

Nếu các thấy thích hãy chia sẻ link bài này cho bạn bè . Cám ơn

Chương 2: Lệnh Convert to Curve trong CorelDRAW

2014-11-02T07:59:00.003+07:00

Lệnh Convert to Curve cho phép chúng ta chuyển biên các đối tượng được vẽ bằng các công cụ như Rectangle, Ellipse Tool về dạng biên cong để biến đổi nhanh bằng công cụ Pick.

Lệnh Convert to Curve trong CorelDRAW

Thao tác thực hiện lệnh Convert to Curve:

Chọn các đối tượng bằng công cụ Pick.
Chọn Menu Arrange, chọn Convert to Curve.
Hoặc nhấn tổ hợp phím tắt Ctrl + Q.

Series : Học CorelDRAW

Tài liệu khoa học kỹ thuật và máy tính