Tác giả "Code-blog"

Hiển thị các bài đăng có nhãn Code-blog. Hiển thị tất cả bài đăng


Thiết kế Responsive Blogger Template khi xem bằng mobile và PC
Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)

Thiết kế Responsive Template giúp cho blog hoạt động tốt trên điện thoại di động đã trở thành một xu hướng trong phát triển web ngày nay. Công nghệ điện thoại di động hiện nay phát triển vô cùng do vậy lượng người dùng sử dụng điện thoại di động lướt web không ngừng tăng nhanh. hiện nay mọi người thích đọc email, lướt web trên điện thoại so với sử dụng máy tính để bàn của họ. Đơn giản vì tính tiện lợi, dễ dàng kết nối wifi không dây và các mạng GPRS là một lý do khuyến khích sử dụng các thiết bị di động như điện thoại thông minh (Apple và Android), máy tính bảng, netbook và điện thoại di động có độ phân giải thấp như NOKIA.

Nhiều webmaster hiện nay quan tâm đến việc thiết kế các mẫu Blogger linh hoạt so với các bố cục có chiều rộng cố định truyền thống. Namkna đã nhận dược một số yêu cầu như vậy. Do đó bài viết này namkna sẽ hướng dẫn tối ưu hóa Responsive Blogger Templates cho cộng đồng Blogger của Google. Bạn sẽ học cách để thiết kế giúp cho bố cục Blog của bạn tự điều chỉnh tự động để phù hợp vớ các màn hình có kích thước khác nhau. (bài viết có sử dụng một số tư liệu hình ảnh của MTB)

Responsivetemplate là gì?

Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)

Đối với người dùng Blogger:

Nếu bạn đã kích hoạt Responsive di động cho blog blogger thì khi bạn xem blog của bạn trên một điện thoại thông minh, bạn sẽ thấy một giao diện hoàn toàn khác so với khi xem trên một máy tính để bàn hay latop của bạn. Theo mặc định, tất cả các blog blogger đã được tối ưu hóa khi xem bằng điện thoại di động nhưng giao diện mobile còn quá đơn giản và không đại diện cho blog của bạn vì vậy chúng ta sẽ học cách tạo và bố trí mang phong cách riêng cho các blogger mình.

Xem thử blog của bạn trên ác trình duyệt khác nhau!
Bạn có thể sem trước blog ủa bạn sẽ thay đổi thế nào khi áp dụng thủ thuật mà namkna sẽ giới thiệu sau đây bằng cách sử dụng công cụ sau:  

☼ Bước 1: Thêm thẻ meta hỗ trợ Responsive template.
1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây vào sau thẻ <head> :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Trong đó: 
width=device-width sẽ giúp phát hiệ và nhận biết kích cỡ màn hình khác nhau.
5- Lưu mẫu lại và tiến hành bước tiếp theo.

☼ Bước 1: Dùng CSS 3 để truy vấn các cài đặt của bạn cho các giao diện khác nhau.
Các thẻ Media dán trước thẻ ]]></b:skin> sẽ truy vấn theo thuộc tính CSS3 đã định trước để phát hiện kích thước màn hình và áp dụng các cài đặt cho kiểu màn hình đó.
Các bạn có thể xem hai ví dụ về việc truy vấn media cho điện thoại thông minh và các thiết bị Tablet.
@media screen and (max-width : 480px) {
/* nếu kích thước màn hình từ 480px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho điện thaoij thông minh */
}

@media screen and (max-width : 768px) {
/* nếu kích thước màn hình từ 768px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho Tablets */
}

Dưới đây là một số lời khuyên thú vị mà các bạn nên ghi nhớ khi áp dụng viết này:
Mẹo để nhớ:
Sử dụng em thay vì các điểm ảnh (px) để xác định font-sizes, padding, margin .v.v....
Sử dụng tỷ lệ phần trăm (%) thay vì giá trị số để xác định chiều rộng của cột
Tạo media riêng cho 3 kiểu màn hình chính là: 480/768/1024
Hãy nhớ sử dụng hộp kích thước (box-sizing), chiều rộng tối đa (max-width) và chiều rộng tối thiểu (min-width).

Ví dụ mình muốn thay đổi độ rộng của phần main, và để phần sidebar xuống dưới phần main khi xem ở điện thoại có kích thước màn hình dưới 480 thì sẽ dán code sau trước thẻ ]]></b:skin>.
@media screen and (max-width : 480px) {
#main-wrapper{width:100%px}
#sidebar-wrapper{float:none}
}

Thiết kế giao diện responsive hiện nay là một phần của một trang web chuyên nghiệp, và cả bạn, tôi và nhiều người khác đều thích một trang web có giao diện responsive. Hiện nay giao diện responsive đã trờ thành sống còn, khi các công cụ tìm kiếm ưu tiên nó hơn, và việc phải thiết kế 1 phiên bản di động cho website làm tốn chi phí nhiều hơn nữa.

Rất nhiều template tùy chỉnh cho blogspot có responsive, tuy nhiên nhiều template bạn thích lại không có giao diện responsive này? Vậy điều bạn nên làm chính là tùy chỉnh lại giao diện cho blogspot theo hướng dẫn ở bài viết này để trang web của bạn có một giao diện responsive tương thích với mọi kích cỡ màn hình.

Trước tiên, giao diện responsive là gì?
Giao diện responsive dễ hiểu nhất là làm cho trang web tương thích với mọi thiết bị có kích cỡ màn hình khác nhau như PC, laptop, tablet, phablet, smartphone…

Thời gian gần đây rất nhiều blog được thiết kế có giao diện responsive để thay thế giao diện di động mặc định được cung cấp cho Blogger. Vì vấn đề xảy ra là giao diện cho di động chỉ tương thích với điện thoại, trên các máy tính bảng thì giao diện này không thể sử dụng được, vì thế giao diện responsive sẽ là giải pháp.

Câu hỏi đặt ra là: giao diện responsive tốt hơn giao diện di động mới chổ nào?
Giao diện responsive sẽ thân thiện với SEO hơn giao diện di động
Thiết kế responsive có thể tự điều chỉnh cho phù hợp với kích thước màn hình như máy tỉnh bảng, phablet…
Thiết kế responsive giúp giảm tốc độ tải trang, tức là giúp tổng thể trang web được tối ưu hơn
Nếu bạn sử dụng Google Adsense, thì quảng cáo đáp ứng sẽ tốt hơn rất nhiều trên giao diện responsive, giúp bạn tăng thu nhập
Hướng dẫn thiết kế giao diện responsive cho Blogspot
Để có thể thiết kế được giao diện responsive cho trang blogspot của bạn, đầu tiên đòi hỏi bạn phải có những kiến thức cơ bản về html và css đã, vì những hướng dẫn bên dưới này chỉ là những hướng dẫn chung, bạn muốn tùy chỉnh chính xác cho website của mình thì bạn phải nắm rõ thành phần của web mình đã.

– Truy cập trang quản trị của Blogger, tiếp tục vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Cách thiết kế giao diện responsive cho Blogspot
– Click vào vùng code, và tìm đến thẻ <head>, thêm code sau bên dưới nó:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>

– Tiếp tục tìm đến thẻ ]]></b:skin>, và thêm đoạn code này vào phía trên nó:

@media screen and (max-width : 1280px) {
/* Cho kích thước màn hình nhỏ hơn 1280 —*/
/* code css cho desktop —*/
}
@media screen and (max-width : 1024px) {
/* Cho kích thước màn hình nhỏ hơn 1024 —*/
/* code css cho tablets —*/
}
@media screen and (max-width : 768px) {
/* Cho kích thước màn hình nhỏ hơn 768 —*/
/* code css cho tablets nhỏ —*/
}
@media screen and (max-width : 640px) {
/* Cho kích thước màn hình nhỏ hơn 640 —*/
/* code css cho iphone —*/
}
@media screen and (max-width : 480px) {
/* Cho kích thước màn hình nhỏ hơn 480 —*/
/* code css cho smartphone —*/
}
@media screen and (max-width : 320px) {
/* Cho kích thước màn hình nhỏ hơn 320 —*/
/* code css cho điện thoại nhỏ —*/
}

Đây là code css tương ứng với từng thiết bị và kích thước màn hình. Bây giờ bạn có thể tùy chỉnh code các thành phần tương ứng với các kích thước màn hình được rồi.

Thay thế / * code css cho…—* / bằng các id và class của tiêu đề, body, sidebar, footer và các phần khác của blog của bạn.

(max-width: ** px) là chiều rộng tối đa mà code sẽ làm việc giống như nếu bạn đặt mã trong phần max-width là 320px thì khi kích thước màn hình nhỏ hơn 320 px thì đoạn code trên sẽ được áp dụng, còn lớn hơn 320px thì code này sẽ không có tác dụng

Nếu bạn đặt css cho ID1(ví dụ thôi) trong max-width 480 nhưng không phải đặt 320 thì có nghĩa là code css ID1 đó sẽ áp dụng cho khoảng kích thước màn hình từ (0-480), nhưng nếu cả css ID1 trong max-width 320 (Có tùy chỉnh thông số) thì code css sẽ áp dụng: ID1 (tùy chỉnh thông số) từ (0;320) và ID1 từ (320-480).

Ví dụ:

@media screen and (max-width: ****px)
{
#main-wrapper { width:100%; margin:0px auto; }
.header-wrapper { width:100%; }
#content { margin-right:0; width:100%; float:left; }
#sidebar { display:none; }
#footer-wrapper { display:none; }
}

Một số css quan trọng trong thiết kế giao diện responsive:
Chiều rộng luôn sử dụng %, không được sử dụng px, ví dụ như width:100%
Luôn sử dụng đơn vị em cho kích thước, thay thế cho px. Ví dụ 10em thay cho 10px
Margin:auto để tự động căn giữa và nếu muốn cách các mép một giá trị nào đó thì sử dụng đơn vị % nhé
Display:none để ẩn các thành phần khác
Chú ý: Các đơn vị chiều dài trong giao diện responsive nên là đơn vị % nhé, để tránh trường hợp một số thành phần bị lỗi không hiển thị được.

Chúc các bạn thành công!!!



Cách xóa link logo trỏ đến Youtube trong video chèn vào web blogspot

Cách ẩn link trỏ đến Youtube trong video chèn vào website - Blogspot. Cách xóa logo youtube trên video khi up lên website blog. Làm sao để xóa link của youtube trên video khi đăng lên website - blog

Xin chào các bạn hôm trước có bạn hỏi mình làm sao ẩn hay xóa link trỏ đến Youtube trong video khi chèn vào website - Blogspot

Như các bạn biết khi chèn video vào website hay blog thì thường video sẽ có cái logo chứa link của youtube, Vậy để xóa logo chứa link của Youtube khi đăng bài thì bạn có thể dùng đoạn code sau để chèn vào bài viết hay web -blog, logo youtube và link trỏ đến youtube sẽ được ẩn hoàn toàn cho dù người dùng có click chuột phải để tìm Url.

Code xóa link logo trỏ đến Youtube trong video chèn vào web blogspot

Link nhúng bình thường:  <iframe width="560" height="315" src="//www.youtube.com/embed/nDcQ-2f57W4" frameborder="0" allowfullscreen></iframe>

Link nhúng xóa link và logo: <iframe width="560" height="315" src="//www.youtube.com/embed/nDcQ-2f57W4?modestbranding=1" frameborder="0" allowfullscreen></iframe>

Một số thủ thuật khi up video khác
<iframe width="532" height="300" src="http://www.youtube.com/watch?v=ka-LfjkddnI?theme=light&hl=en_US&fs=0&hd=1&ap=%2526fmt%3D22&showsearch=0&showinfo=0&modestbranding=0&rel=0&disablekb=1&iv_load_policy=3&cc_load_policy=1&autoplay=1&start=0&loop=1&autohide=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

?theme=light là giao diện (màu trắng), có thể đổi thành ?theme=dark (màu đen).


&hl=en_US bộ mã la tinh.

&fs=0 tắt chế độ xem toàn màn hình.

&hd=1 mở chế độ xem phim HD.

&ap=%2526fmt%3D22 xem với độ phân giải tối đa.

&showsearch=0 tắt khung tìm kiếm.

&showinfo=0 tắt thông tin và tiêu đề clip.

&modestbranding=0 tắt logo thương hiệu nếu có.

&rel=0 tắt các gợi ý về video khác nếu có.

&disablekb=1 tắt sự điều chỉnh từ bàn phím nếu có.

&iv_load_policy=3 tắt chú thích nếu có.

&cc_load_policy=1 tắt phụ đề nếu có.

&autoplay=1 tự động chạy video khi truy cập.

&start=0 bắt đầu chạy từ giây thứ 0.

&loop=1 tự động lặp lại video khi xem hết.

&autohide=1 tự động ẩn thanh điều khiển khi rời chuột khỏi clip.

Ngoài ra bạn còn có thể tùy chình chiểu rộng, chiều cao của video qua 2 thuốc tính là width và height .


Chúc bạn thành công!
                                                   

    Bài viết này mình sẽ hướng dẫn các bạn tạo mẫu quảng cáo giống với quảng cáo văn bản của Google AdSense, một mẫu quảng cáo ưa nhìn với hiệu ứng bắt mắt, kích thích người dùng nhấp vào.
Hướng dẫn tạo quảng cáo giống với Google AdSense


Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code này vào trước thẻ ]]></b:skin>

#iklan-teks {
    height:275px;
    width:300px;
    background-color:white;
    position:relative;
    overflow:hidden;
    margin:20px auto;
}
#iklan-teks h2.iklan-header {
    cursor:pointer;
    background-color:white;
    background-image:none;
    font:normal 13px Verdana, Tahoma, Serif;
    color:#f0523f;
    border-top:1px solid #d8d8d8;
    padding:10px;
    margin:0;
    position:relative;
    text-transform:none;
    letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {
    border-bottom:0;
}
#iklan-teks h2.iklan-header:first-child {
    border-top:0;
}
#iklan-teks h2.iklan-header:before {
    content:"
    "
    ;
    width:0;
    height:0;
    position:absolute;
    top:20px;
    right:15px;
    border:5px solid transparent;
    border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
    height:120px;
    padding:10px 70px 10px 10px;
    z-index:1;
    background:white;
    font:normal 13px Verdana, Tahoma, Serif;
    color:white;
    position:relative;
    border-top:1px solid #d8d8d8;
}
.judul {
    font:normal 20px Verdana, Tahoma, Serif;
    color:#f0523f;
    margin:0 0 5px 0;
}
a.judul {
    font:normal 20px Verdana, Tahoma, Serif !important;
    color:#f0523f !important;
    text-decoration:none;
    display:inline-block;
}
.isi-iklan a {
    font:normal 13px Verdana, Tahoma, Serif;
    color:green;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}
.isi-iklan a:hover {
    color:green;
    text-decoration:underline;
}
.isi {
    padding-top:15px;
    color:#222;
    text-align:left !important;
}
.panah-besar {
    background:#f0523f;
    border-radius:50%;
    cursor:pointer;
    height:34px;
    float:right;
    margin-right:-60px;
    margin-top:-40px;
    width:34px;
    text-align:center;
    line-height:34px;
}
.panah-besar:hover {
    background:#2c343e;
}
.info-icon {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    z-index:2;
    right:0;
    cursor:pointer;
}
.info-iklan {
    background:#f2f2f2;
    height:15px;
    border-bottom-left-radius:4px;
    position:absolute;
    top:0;
    right:0;
    color:#000;
    z-index:2;
    font:normal 11px Arial, Sans-Serif;
    text-align:left;
    overflow:hidden;
    padding:5px 19px 0 5px;
}


Thêm tiếp đoạn code dưới vào trước thẻ </head>

 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-37px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-37});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>



Nếu template của bạn đã có thư viện JQuery rồi thì xóa bỏ dòng đầu đi nhé: <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>

Làm xong thì Lưu Mẫu lại.
Bây giờ bạn vào Bố Cục ~> Thêm tiện ích HTML/Javascript
Sao chép và dán đoạn code dưới vào tiện ích HTML/Javascript rồi Lưu lại


<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- ads 1 -->
    <div data-header='Blog DX'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blog DX</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Blog thủ thuật, công nghệ và mọi thứ.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLRkBbFtHz6N1WNn0VJn7Xl1obDjHSXAQgyx8qW6fnmF0UX0490aCZ6NBrUzqheD3qUAG-4dI_zxpK2qYTE0T_CzAsN-lyyFy4af5guvTqQI4yoLazpHQWXI2-1vRtvsy7NFEbrWINIo/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 2 -->
    <div data-header='Template'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Template Blogspot</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Chia sẻ Template Blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLRkBbFtHz6N1WNn0VJn7Xl1obDjHSXAQgyx8qW6fnmF0UX0490aCZ6NBrUzqheD3qUAG-4dI_zxpK2qYTE0T_CzAsN-lyyFy4af5guvTqQI4yoLazpHQWXI2-1vRtvsy7NFEbrWINIo/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 3 -->
    <div data-header='Blogspot Series'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blogspot Series</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Học và tìm hiểu về blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLRkBbFtHz6N1WNn0VJn7Xl1obDjHSXAQgyx8qW6fnmF0UX0490aCZ6NBrUzqheD3qUAG-4dI_zxpK2qYTE0T_CzAsN-lyyFy4af5guvTqQI4yoLazpHQWXI2-1vRtvsy7NFEbrWINIo/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 4 -->
    <div data-header='Thủ Thuật Blogger'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Thủ Thuật Blogger</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Kho thủ thuật blogger, blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLRkBbFtHz6N1WNn0VJn7Xl1obDjHSXAQgyx8qW6fnmF0UX0490aCZ6NBrUzqheD3qUAG-4dI_zxpK2qYTE0T_CzAsN-lyyFy4af5guvTqQI4yoLazpHQWXI2-1vRtvsy7NFEbrWINIo/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>


Sửa lại link, tiêu đề và mô tả phù hợp với quảng cáo của bạn
Vậy là xong rồi, chúc bạn có một quảng cáo ưng ý !

Code tự động chèn quảng cáo Tự động Google Adsense vào bài đăng trong Blogspot

    Đây là cách được nhiều blogger sử dụng vì quảng cáo sẽ tự động hiển thị trong bài đăng, có thể thay đổi được kích thước và hiển thị được ở nhiều vị trí tối ưu trên blog. Trước khi chèn mã Adsense vào Blog bạn phải chuyển đổi (converter) Google Adsense Converter.
    Sau khi chuyển đổi bạn nhận được một mã mới, sử dụng mã này mới có thể chèn vào Template
Để chỉnh sửa Template bạn vào : Mẫu (Design) - Chỉnh sửa HTML (Edit HTML) - Chọn Mở rộng tiện ích mẫu (Expand Widget Templates)
a/ Chèn trên đầu nội dung bài viết
- Tìm đoạn code sau:
<div class='post-header-line-1'/>
- Chèn ngay vào dưới nó đoạn mã sau:


<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>

Mã Adsense đã chuyển đổi

</p>
</b:if>

b/ Chèn vào dưới cuối mỗi bài đăng
- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:


<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>

- Chèn vào ngay dưới nó đoạn mã sau:


<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>

Mã Adsense đã chuyển đổi

</p>
</b:if>

* Note : Vì một blog sẽ có ít nhất 2 thẻ  nên bạn thử cho tới khi được nhé!
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>

c/ Hiện quảng cáo bên trái mỗi bài đăng
- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:
<div class='post-header-line-1'/>
- Chèn vào ngay dưới nó đoạn mã sau:
<b:if cond='data:blog.pageType == "item"'>
<p class='ads' style='float:left'>

Mã Adsense đã chuyển đổi

</p>
</b:if>

d/ Hiện quảng cáo bên phải mỗi bài đăng
- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:
<div class='post-header-line-1'/>
- Chèn vào ngay dưới nó đoạn mã sau:
<b:if cond='data:blog.pageType == "item"'>
<p class='ads' style='float:right'>

Mã Adsense đã chuyển đổi

</p>
</b:if>

 

Chúc bạn thành công!

  Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang với ảnh thumbnail cho Blogspot (Blogger), với tiêu đề đầy đủ như vậy chắc hẳn các bạn cũng hình dung được chức năng của thủ thuật này. Nhưng thủ thuật này chủ yếu dùng để trang trí trang chủ hoặc trang tĩnh nhằm làm nổi bật những trang này.


Giờ bắt đầu thủ thuật nhé các bạn .

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ</b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin>.
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJQLsdHwSoNhsLUie6qY7qbB-jvIUYw7O1_YJWDDTOZ_t2Wsx2aMQH8IsUOuU6TPUZA6hdc_D_P0blgdxJ4llkM0U2VAeCamoYqnaGZNWNnqKYYxaU0Ts6gNv7U_0D8kDy_ojYwT-cb_E/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzBPyFoY4C88QS6E7t8dDlUV_M6UPZFvLWQZLbeGMUtkw9nddqMnTLArojotDGFI0xIsgzQODF9UX43n_S7-sgD6uOzY_yXdmp6w-Y0osMNWIsdK665nDYub-T5dA6A9CAwhLX8JUtoI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynkdzlrZrwPID-wQLCZ0DulOLH6j_1wUgfFCo4MVlivCImufq9MpDI35cb6H3mSFT-C7OMLM8AD-D_zXkGt50D-gfO-RdB0vXW27xZCm85ivFCdqZx-Eu0zVImpadfZK8abiDMQHdeq8/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMqtjeqFCVk65BnbL4uAgeF7IsIZ9WrgesQdR_Oj415wnPUisXdatUys-3yUizXiXtN2h7iYNuWvlpSDdf8r1Ecrk9ldJVXs-ZDiwzJQrL5WjwwqeSTm8XMLExx39Awufi07xj-EtmYQ/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeegdjN7Tm7ri2cxbepdyxsbJPyi-26dG1_itgXuSZ4Dp4EzFCcpGFKetCtukgKz1Zj-ThEpYEeyva7LkDxNoFrBwqZoTnaUmoThftsKTBlolzNF_j7UUOZEeWgYY4c4Zd7TMdsshyphenhyphenOcc/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAAAAACap/5LAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAsSURBVHjaYvzPAAMs7+FMJgaEKCM2UfoqGBKGDZgjh4QVdDBskDln5DEBAwCNEQLr2H+8AwAAAABJRU5ErkJggg==) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0} 

Các thống số:

·        width: 980pxheight: 185px lần lượt là chiều rộng và chiều cao của Slider.
·        width:145px;height:150px lần lượt là chiều rộng và chiều cao của khung chứa hình ảnh và tiêu đề.
·        Bạn có thể thay đổi các Link hình ảnh Next và Preview theo ý của bạn nha.

Bước 2: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src=
'http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script
type='text/javascript'>
//<
![CDATA[
imgr = new Array();
imgr[
0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplKrUDQDtVOdPA1mFm9rFMgi6i4hY5Ary4NMRmpqrmAj4T0Ydk7jZjOdELwt34X5-p0zqraaYWUkHbnUzMyb_2zHYEH1aqregsSpPmrfDHG5q38HsfJqzub7dkKAYS-E6KCKL2y6H3p8/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split(
"<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(
">")+1,s[i].length);
}
}

s = s.join(
"");
s = s.substring(
0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg)
? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write(
'<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.
$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(
" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.
$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.
$t;}
else var postcontent = "";
postdate = entry.published.
$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(
"<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text !=
'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [
1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = [
"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split(
"-")[2].substring(0,2);
var m = postdate.split(
"-")[1];
var y = postdate.split(
"-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ;
break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd =
'<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write(
'</ul>');
}
//]]>
</script> 
 

Các thông số:

·        numposts1 = 15: là số bài sẽ được gọi từ feed.
·        label1 = "news": là tên của nhãn muốn gọi.
·        summaryPost = 140: là số ký tự mô tả
·        summaryTitle = 25: là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
·        width="145";height="100" lần lượt là chiều rộng và chiều cao của ảnh thumbnail.
·        showRandomImg = true: là lấy ảnh thumbnail cách ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.

Bước 3: Dán đoạn code dưới đây vào dưới thẻ <data:post.body/> thủ thuật này và Lưu mẫu.(Lưu ý : một blogspot thường có vài thẻ <data:post.body/> vì thế các bạn thử cho tới khi được nhé!

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div
id='carousel'>
<div
id='previous_button'/>
<div class=
'container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default
/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class=
'clear'/>
</div>
<div
id='next_button'/>
</div>
<script
type='text/javascript'>
(function(
$) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: &quot;
#previous_button&quot;,
btnNext: &quot;
#next_button&quot;
});
})})(jQuery)
</script>
</b:
if>   

Các thông số:

·        Nếu muốn lấy toàn bộ các nhãn thay vì một nhãn cụ thể thì xóa phần màu đỏ đi nha.
·        auto: 4000: Thời gian để cuộn 1 lần (4000 = 4 giây)
·        scroll: 1: Số bài viết cuộn mỗi lần.
·        speed: 800: Tốc độ cuộn (800 = 0.8 giây).
·        visible: 5: Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
·       start: 0: Bài hiển thị đầu tiên.
·       circular: true: Tự động lặp lại nếu không muốn lặp lại sữa thành false.
CHÚC CÁC BẠN THÀNH CÔNG!!!

TÁC GIẢ

{facebook#https://www.facebook.com/couponkhuyenmaimoingay/}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.