tháng 3 2019

tháng 3 22, 2019 , ,
      Bài viết blog của bạn đăng các bài viết dài nên bạn muốn chèn quảng cáo Adsense vào giữa bài viết blogger nhưng không biết làm cách nào. Hôm nay Thủ thuật blogspot sẽ hướng dẫn các bạn chèn adsense vào giữa nội dung bài viết blogspot.

Đề chèn adsense vào giữa nội dung bài viết blogger các bạn thực hiện theo các bước sau:
Bước 1: Vào chỉnh sửa HTML tìm kiếm đoạn mã sau đây <data:post.body/>
Bước 2: Thay thế đoạn code vừa tìm kiếm được
bằng đoạn mã sau đây:
Code:
<div expr:id='&quot;aim1&quot; + data:post.id'/>
<div style='clear:both; margin:10px 0'>
Đặt mã quảng cáo tại đây
</div>
<div expr:id='&quot;aim2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&quot;);if(r&gt;0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>
Lưu lại mẫu và kiểm tra kết quả. Chúc các bạn thành công với thủ thuật nhỏ này.
Đọc thêm »

tháng 3 22, 2019 , , ,
    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 ý !
Đọc thêm »

tháng 3 22, 2019 , , ,
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!
Đọc thêm »

tháng 3 21, 2019 ,
   Hướng dẫn viết Blog kiếm tiền cho người mới bắt đầu
Viết blog, làm website kiếm tiền dường như bây giờ không còn xa lạ với nhiều người nữa, thậm chí đã nhiều người đã có website, blog riêng từ rất lâu, chỉ đơn giản để đăng những mẩu truyện mình thích, lưu lại video, viết nhật ký, review phim, truyện, quán ăn, ghi lại nhật ký ẩm thực, nhật ký phượt, hướng dẫn chơi game, đồ họa,…mỗi người đều có 1 sở trường riêng của mình.
   


    Với sự phát triển của công nghê, việc làm website hay viết blog kiếm tiền đã trở nên dễ dàng, một đứa nhóc tiểu học cũng có thể lên blogger tạo cho mình 1 trang blog riêng, hay việc tạo website chuyên nghiệp đã không cần phải “biết code mới làm được”. Hiện tại, ai ai cũng có thể tạo cho mình 1 trang web, blog dễ dàng

Một số điều bạn cần biết trước khi bắt đầu viết blog kiếm tiền
1, Xác định rõ đam mê/sở thích của bạn:
   Hãy viết về tất cả những gì bạn đam mê, yêu thích nhất. Bất kể đó là cái gì đi chăng nữa thì Misao vẫn đảm bảo với bạn rằng chắc chắn sẽ có rất nhiều người có cùng sở thích với bạn. Và đương nhiên đó sẽ là những độc giả trung thành nhất, nhân tố chính trong việc phát triển và tăng thu nhập của bạn. Ngoài ra viết về những thứ bạn đam mê sẽ tạo cho bạn một sự khác biệt với những người khác và độc giả thích điều đó.

2, Chuẩn bị thật tốt trước khi bắt đầu:
    Trước khi bắt tay vào viết blog kiếm tiền, bạn cần phải chuẩn bị cho mình những kiến thức thật tốt về lĩnh vực mình sẽ viết. Mình khuyên bạn nên lập danh sách những trang web liên quan đến chủ đề bạn yêu thích. Hàng ngày bạn hãy lướt qua các trang web đó để cập nhật tin tức cũng như định hướng được những chủ đề mình sẽ viết trong tương lai. Bạn nên viết các bản nháp trước, đôi khi chỉ vài dòng với mục đích ghi lại những ý tưởng hay bất chợt nảy sinh trong đầu.

3, Tìm một domain và nhà cung cấp host tốt:
Bạn hãy cố gắng chọn cho mình một domain ngắn gọn, dễ nhớ và liên quan đến chủ đề của blog thì càng tốt. Ngoài ra lựa chọn nhà cung cấp host cho blog cũng rất quan trọng, nếu nhà cung cấp host không tốt sẽ khiến blog của bạn gặp nhiều trục trặc gây ảnh hưởng tới thu nhập của bạn về sau.

4, Chọn nền tảng blog và theme phù hợp:
Hiện tại có rất nhiều nền tảng giúp bạn tạo blog vd: WordPress, Typepad, Bo-blog…v.v. Tuy nhiên theo mình tốt nhất bạn nên chọn WordPress vì lí do nó hoàn toàn miễn phí và đặc biệt có nhiều themes và plugins cho bạn lựa chọn.

Các hình thức kiếm tiền từ blog cho người mới bắt đầu :

1. Quảng bá dịch vụ, sản phẩm của chính mình
Nếu bạn đang kinh doanh, hay có bất cứ sản phẩm nào để bán thì việc làm website/blog để quảng bá là việc bạn không thể bỏ qua. Phần lớn xác cửa hàng, dịch vụ bây giờ 99% là có website, không có sẽ bị đối thủ vượt mặt vì lượng khách hàng tiềm năng trên internet phải nói là rất nhiều nếu bạn biết cách quảng bá tốt.

2. Kiếm tiền với Affiliate marketing
    Đừng lo khi bạn không có sản phẩm của chính bạn, vì bạn vẫn có thể đi bán sản phẩm của người khác và được hoa hồng, đặc biệt là hoa hồng sản phẩm số là rất cao, và khi làm afiliate cho thị trường nước ngoài, người mua hàng online rất nhiều nên bạn có thể kiếm rất nhiều tiền.

    Có rất nhiều trang web rất lớn và nổi tiếng (amazon, clickbank, sharealsales, commisison junction,…) cho phép bạn đăng ký làm affiliate và quảng bá sản phẩm của họ, phần lớn cách làm là bạn tạo 1 trang web đánh giá về sản phẩm, so sánh sản phẩm và thực hiện công đoạn SEO để làm sao cho khách hàng tìm những từ khóa liên quan trên google sẽ tìm thấy trang web bạn đọc và mua hàng.
Có rất nhiều hình thức phát triển website kiếm tiền với affiliate mà bạn có thể tìm và tham khảo thêm như :

Kiếm tiền product launch
Kiếm tiền nichesite
Kiếm tiền clickbank
Kiếm tiền authority site

3. Đặt quảng cáo Google Adsense.
Google adsense thì rất nổi tiếng rồi,đây là chương trình được phát triển bởi Google, là cầu nối giữa những người muốn đặt quảng cáo và người đặt quảng cáo. Google adsense cho phép người đặt quảng cáo (sỡ hữu trang web có lưu lượng truy cập, nội dung có ích cho người dùng) đặt quảng cáo (bao gồm các banner text, hình ảnh, video …) trên website của mình và trả tiền cho mỗi lần người dùng nhấp chuột vào quảng cáo.

   Google Adsense có nhiều điều khoản bạn cần phải tuân thủ theo để có thể đăng ký sử dụng và duy trì, tạm thời mình chưa nói đến, sẽ có bài viết riêng hướng dẫn bạn về những điều khoản này, giờ bạn có thể đọc bài viết sau để tìm hiểu thêm về chương trình này của google
    Google Adsense không phải là lựa chọn duy nhất, còn có rất nhiều Ads netwok khác trên thế giới cũng như ở Việt Nam mà bạn có thể chọn lựa, phụ thuộc vào nội dung trang web của bạn.

4. Cho đối tác đặt banner
Nếu bạn có website có lượng truy cập cao và đều đặn hoặc website chuyên về lĩnh vực nào đó thì mình nghĩ không cần bạn phải đi tìm mà sẽ có người chủ động liên hệ với bạn để hợp tác đặt quảng cáo.

Ví dụ website bạn về ẩm thực, đánh giá món ăn,..thì sẽ thu hút các nhà hàng, quán ăn đặt quảng cáo
Ví dụ website bạn về thời trang, làm đẹp,…sẽ thu hút các spa, shop,…đặt quảng cáo
Ví dụ website bạn về du lịch, phượt,..sẽ có các khách sạn đặt quảng cáo,..
Giá đặt website hay banner thì thường bạn chủ động ra giá cao cao hơn giá mà Google Adsense hoặc các ads network khác mang lại.

Một số chủ đề mà bạn có thể bắt đầu viết blog kiếm tiền
   Bất cứ chủ đề gì mà bạn cảm thấy bạn có thế mạnh trong lĩnh vực đó thì bạn có thể tiến hành viết blog ngay, dưới đây mình sẽ gợi ý cho các bạn một số chủ đề cơ bản:
 
Thủ thuật WordPress
Thủ thuật SEO
Thủ thuật marketing
Thiết kế, kỹ năng photoshop
Kiếm tiền online/offline,…
Hướng dẫn học ngoại ngữ
Chia sẻ mã giảm giá
Đánh giá về tên miền, hosting, VPS,…
Blog hướng dẫn kỹ năng viết
Blog về nghiên cứu loại động vật mà bạn biết
Blog về quá trình phát triển bản thân
Sức khỏe, cách luyện tập, gym, fitness,chạy bộ…
Blog truyền thông
Tình yêu, gia đình
Kỹ năng giao tiếp
Công nghệ (máy tính, điện thoại, tablet,…)
Blog về oto, xe máy
Thể thao (bất cứ môn nào là thế mạnh của bạn)
Âm nhạc (hướng dẫn chơi guitar, piano,…)
Phụ nữ
Hướng dẫn chơi game
Review phim
Blog ẩm thực, ghi lại hành trình ăn uống nơi bạn sống
Blog phượt – du lịch
Kỹ năng giao tiếp, kiến thức xã hội
Review sách, truyện
     Blog chia sẻ thiết kế, hình ảnh,,..của bạn nếu bạn là photographer.Chia sẻ những bài học bạn nhận được trong cuộc sống
...................

     Nói chung bạn có thể mạnh ở điểm gì, bạn đang làm gì hàng ngày, hãy dành khoảng 4-5 tiếng mỗi tuần hoặc hơn để viết blog về sở trường đó của bạn. Sau khi chọn được chủ đề, bạn có thể tiến hành ngay tạo 1 trang blog miễn phí, nếu bạn có tiền có thể đầu tư luôn 1 blog, website chuyên nghiệp cho riêng mình, việc thực hành khá đơn giản, mình sẽ viết hướng dẫn cho các bạn tạo blog miễn phí và chuyên nghiệp trong các bài viết khác.


   Chúc bạn tìm được chủ đề phù hợp và kiếm thêm thu nhập từ blog!
Đọc thêm »

tháng 3 21, 2019
            

    Chắc không cần phải nói gì thêm đâu nhỉ vì ngay trên bài viết này bạn cũng thấy được một hiệu ứng khá đặc biệt đó là tự động thay đổi màu nền trong blogspot. Đây là cách trang trí trang blogspot của bạn một cách đơn giản nhưng không kém phần bắt mắt và chuyên nghiệp. Nếu bạn muốn cài đặt hiệu ứng này cho blog của mình cũng khá đơn giản.Chỉ cần thêm đoạn code sau trước thẻ   ]]></b:skin>


 body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}/* blogduykhanh.blogspot.com */
@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}


Đọc thêm »

tháng 3 21, 2019 ,
    Hôm nay, Mình xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Khi chỉnh sửa đến phần menu trên Blog thì mình cũng muốn sửa lại cái icon cho phù hợp với Blog của mình. Nhưng mà không ngờ nó không phải là hình ảnh, mà thật ra nó chỉ là font chữ thôi các bạn ạ.
  

    Font Awesome này tính ra cũng rất hữu ích, là công cụ cần thiết cho các blogger và web designer bởi tính tiện dụng, dễ dàng chỉnh sửa và cũng có khá nhiều icon cho bạn lựa chọn. Bài này được Blog mình tổng hợp và tóm gọn từ trang http://fortawesome.github.io/Font-Awesome, bạn có thể xem thêm ở trang này. Giới thiệu nhiêu đó cũng đủ rồi nhỉ, giờ bắt tay vào làm thôi.
Trước tiên là cài đặt font cho Blogspot
Bạn đặt đoạn code sau trước thẻ </head> nhé
<Link  rel = "stylesheet"  href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
Bạn cũng có thể vào  đường link file CSS ở trên để tải file về và sử dụng riêng cho Blog của mình. Nếu không thì cứ để vậy mà xài cũng được :)
Cách sử dụng font Awesome
    Trước tiên bạn cần phải biết tên của icon mình cần sử dụng. Bạn có thể vào ĐÂY để tra cứu hoặc ấn "Ctrl + F" để tìm kiếm ngay trong bài này.
Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau
<i class="fa fa-download"></i>
Bạn sẽ được kết quả như thế này 
Tiếp theo là phần biến hóa của font Awesome
1. Thay đổi kích thước icon
Để thay đổi kích thước icon bạn có thể đặt các ký hiệu sau đằng sau tên của icon fa-lg (tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:
<i class="fa fa-download fa-lg"></i> fa-lg
<i class="fa fa-download fa-2x"></i> fa-2x
<i class="fa fa-download fa-3x"></i> fa-3x
<i class="fa fa-download fa-4x"></i> fa-4x
<i class="fa fa-download fa-5x"></i> fa-5x
Và kết quả chúng ta thu được:
 fa-lg  fa-2x  fa-3x  fa-4x  fa-5x
2. Trình bày dạng danh sách
Các bạn có thể trình bày dạng list dạng như sau:
List icons
can be used
as bullets
in lists
Bằng mã code sau:
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

3. Sử dụng icon động
Cái này cũng hay nè. Bạn có thể sử dụng để gây chú ý nhiều hơn đối với đọc giả hoặc sử dụng nút loading... cho blog mình cũng tiện, vừa nhẹ vừa dễ sử dụng. Bằng cách thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:
   
Để có icon như trên Khánh sử dụng đoạn code sau:
<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
<i class="fa fa-refresh fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

4. Xếp chồng các icon lên nhau
Bạn cũng có thể chồng các icon lên nhau để tạo hiệu ứng trang trí đặc biệt. Sau đây là vài cách sử dụng nổi bật
 fa-twitter on fa-square-o
 fa-flag on fa-circle
 fa-terminal on fa-square
 fa-ban on fa-camera
Sử dụng code:
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera

5. Xoay icon
Bạn cũng có thể xoay icon ở nhiều góc độ khác nhau. Dưới đây là các ví dụ kèm đoạn mã phía sau nó.
 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 icon-flip-vertical
Bạn có thể tham khảo đoạn code sau
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

   Và cuối cùng là danh sách các icon dành cho bạn
Danh sách gồm 479 icon. Chắc nhiu đây cũng đủ cho bạn thỏa sức sáng tạo rồi đúng không? Chúc bạn thành công! Nếu có vấn đề gì bạn có thể để lại comment nhé!
 fa-glass "\f000"
 fa-music "\f001"
 fa-search "\f002"
 fa-envelope-o "\f003"
 fa-heart "\f004"
 fa-star "\f005"
 fa-star-o "\f006"
 fa-user "\f007"
 fa-film "\f008"
 fa-th-large "\f009"
 fa-th "\f00a"
 fa-th-list "\f00b"
 fa-check "\f00c"
 fa-times "\f00d"
 fa-search-plus "\f00e"
 fa-search-minus "\f010"
 fa-power-off "\f011"
 fa-signal "\f012"
 fa-cog "\f013"
 fa-trash-o "\f014"
 fa-home "\f015"
 fa-file-o "\f016"
 fa-clock-o "\f017"
 fa-road "\f018"
 fa-download "\f019"
 fa-arrow-circle-o-down "\f01a"
 fa-arrow-circle-o-up "\f01b"
 fa-inbox "\f01c"
 fa-play-circle-o "\f01d"
 fa-repeat "\f01e"
 fa-refresh "\f021"
 fa-list-alt "\f022"
 fa-lock "\f023"
 fa-flag "\f024"
 fa-headphones "\f025"
 fa-volume-off "\f026"
 fa-volume-down "\f027"
 fa-volume-up "\f028"
 fa-qrcode "\f029"
 fa-barcode "\f02a"
 fa-tag "\f02b"
 fa-tags "\f02c"
 fa-book "\f02d"
 fa-bookmark "\f02e"
 fa-print "\f02f"
 fa-camera "\f030"
 fa-font "\f031"
 fa-bold "\f032"
 fa-italic "\f033"
 fa-text-height "\f034"
 fa-text-width "\f035"
 fa-align-left "\f036"
 fa-align-center "\f037"
 fa-align-right "\f038"
 fa-align-justify "\f039"
 fa-list "\f03a"
 fa-outdent "\f03b"
 fa-indent "\f03c"
 fa-video-camera "\f03d"
 fa-picture-o "\f03e"
 fa-pencil "\f040"
 fa-map-marker "\f041"
 fa-adjust "\f042"
 fa-tint "\f043"
 fa-pencil-square-o "\f044"
 fa-share-square-o "\f045"
 fa-check-square-o "\f046"
 fa-arrows "\f047"
 fa-step-backward "\f048"
 fa-fast-backward "\f049"
 fa-backward "\f04a"
 fa-play "\f04b"
 fa-pause "\f04c"
 fa-stop "\f04d"
 fa-forward "\f04e"
 fa-fast-forward "\f050"
 fa-step-forward "\f051"
 fa-eject "\f052"
 fa-chevron-left "\f053"
 fa-chevron-right "\f054"
 fa-plus-circle "\f055"
 fa-minus-circle "\f056"
 fa-times-circle "\f057"
 fa-check-circle "\f058"
 fa-question-circle "\f059"
 fa-info-circle "\f05a"
 fa-crosshairs "\f05b"
 fa-times-circle-o "\f05c"
 fa-check-circle-o "\f05d"
 fa-ban "\f05e"
 fa-arrow-left "\f060"
 fa-arrow-right "\f061"
 fa-arrow-up "\f062"
 fa-arrow-down "\f063"
 fa-share "\f064"
 fa-expand "\f065"
 fa-compress "\f066"
 fa-plus "\f067"
 fa-minus "\f068"
 fa-asterisk "\f069"
 fa-exclamation-circle "\f06a"
 fa-gift "\f06b"
 fa-leaf "\f06c"
 fa-fire "\f06d"
 fa-eye "\f06e"
 fa-eye-slash "\f070"
 fa-exclamation-triangle "\f071"
 fa-plane "\f072"
 fa-calendar "\f073"
 fa-random "\f074"
 fa-comment "\f075"
 fa-magnet "\f076"
 fa-chevron-up "\f077"
 fa-chevron-down "\f078"
 fa-retweet "\f079"
 fa-shopping-cart "\f07a"
 fa-folder "\f07b"
 fa-folder-open "\f07c"
 fa-arrows-v "\f07d"
 fa-arrows-h "\f07e"
 fa-bar-chart "\f080"
 fa-twitter-square "\f081"
 fa-facebook-square "\f082"
 fa-camera-retro "\f083"
 fa-key "\f084"
 fa-cogs "\f085"
 fa-comments "\f086"
 fa-thumbs-o-up "\f087"
 fa-thumbs-o-down "\f088"
 fa-star-half "\f089"
 fa-heart-o "\f08a"
 fa-sign-out "\f08b"
 fa-linkedin-square "\f08c"
 fa-thumb-tack "\f08d"
 fa-external-link "\f08e"
 fa-sign-in "\f090"
 fa-trophy "\f091"
 fa-github-square "\f092"
 fa-upload "\f093"
 fa-lemon-o "\f094"
 fa-phone "\f095"
 fa-square-o "\f096"
 fa-bookmark-o "\f097"
 fa-phone-square "\f098"
 fa-twitter "\f099"
 fa-facebook "\f09a"
 fa-github "\f09b"
 fa-unlock "\f09c"
 fa-credit-card "\f09d"
 fa-rss "\f09e"
 fa-hdd-o "\f0a0"
 fa-bullhorn "\f0a1"
 fa-bell "\f0f3"
 fa-certificate "\f0a3"
 fa-hand-o-right "\f0a4"
 fa-hand-o-left "\f0a5"
 fa-hand-o-up "\f0a6"
 fa-hand-o-down "\f0a7"
 fa-arrow-circle-left "\f0a8"
 fa-arrow-circle-right "\f0a9"
 fa-arrow-circle-up "\f0aa"
 fa-arrow-circle-down "\f0ab"
 fa-globe "\f0ac"
 fa-wrench "\f0ad"
 fa-tasks "\f0ae"
 fa-filter "\f0b0"
 fa-briefcase "\f0b1"
 fa-arrows-alt "\f0b2"
 fa-users "\f0c0"
 fa-link "\f0c1"
 fa-cloud "\f0c2"
 fa-flask "\f0c3"
 fa-scissors "\f0c4"
 fa-files-o "\f0c5"
 fa-paperclip "\f0c6"
 fa-floppy-o "\f0c7"
 fa-square "\f0c8"
 fa-bars "\f0c9"
 fa-list-ul "\f0ca"
 fa-list-ol "\f0cb"
 fa-strikethrough "\f0cc"
 fa-underline "\f0cd"
 fa-table "\f0ce"
 fa-magic "\f0d0"
 fa-truck "\f0d1"
 fa-pinterest "\f0d2"
 fa-pinterest-square "\f0d3"
 fa-google-plus-square "\f0d4"
 fa-google-plus "\f0d5"
 fa-money "\f0d6"
 fa-caret-down "\f0d7"
 fa-caret-up "\f0d8"
 fa-caret-left "\f0d9"
 fa-caret-right "\f0da"
 fa-columns "\f0db"
 fa-sort "\f0dc"
 fa-sort-desc "\f0dd"
 fa-sort-asc "\f0de"
 fa-envelope "\f0e0"
 fa-linkedin "\f0e1"
 fa-undo "\f0e2"
 fa-gavel "\f0e3"
 fa-tachometer "\f0e4"
 fa-comment-o "\f0e5"
 fa-comments-o "\f0e6"
 fa-bolt "\f0e7"
 fa-sitemap "\f0e8"
 fa-umbrella "\f0e9"
 fa-clipboard "\f0ea"
 fa-lightbulb-o "\f0eb"
 fa-exchange "\f0ec"
 fa-cloud-download "\f0ed"
 fa-cloud-upload "\f0ee"
 fa-user-md "\f0f0"
 fa-stethoscope "\f0f1"
 fa-suitcase "\f0f2"
 fa-bell-o "\f0a2"
 fa-coffee "\f0f4"
 fa-cutlery "\f0f5"
 fa-file-text-o "\f0f6"
 fa-building-o "\f0f7"
 fa-hospital-o "\f0f8"
 fa-ambulance "\f0f9"
 fa-medkit "\f0fa"
 fa-fighter-jet "\f0fb"
 fa-beer "\f0fc"
 fa-h-square "\f0fd"
 fa-plus-square "\f0fe"
 fa-angle-double-left "\f100"
 fa-angle-double-right "\f101"
 fa-angle-double-up "\f102"
 fa-angle-double-down "\f103"
 fa-angle-left "\f104"
 fa-angle-right "\f105"
 fa-angle-up "\f106"
 fa-angle-down "\f107"
 fa-desktop "\f108"
 fa-laptop "\f109"
 fa-tablet "\f10a"
 fa-mobile "\f10b"
 fa-circle-o "\f10c"
 fa-quote-left "\f10d"
 fa-quote-right "\f10e"
 fa-spinner "\f110"
 fa-circle "\f111"
 fa-reply "\f112"
 fa-github-alt "\f113"
 fa-folder-o "\f114"
 fa-folder-open-o "\f115"
 fa-smile-o "\f118"
 fa-frown-o "\f119"
 fa-meh-o "\f11a"
 fa-gamepad "\f11b"
 fa-keyboard-o "\f11c"
 fa-flag-o "\f11d"
 fa-flag-checkered "\f11e"
 fa-terminal "\f120"
 fa-code "\f121"
 fa-reply-all "\f122"
 fa-star-half-o "\f123"
 fa-location-arrow "\f124"
 fa-crop "\f125"
 fa-code-fork "\f126"
 fa-chain-broken "\f127"
 fa-question "\f128"
 fa-info "\f129"
 fa-exclamation "\f12a"
 fa-superscript "\f12b"
 fa-subscript "\f12c"
 fa-eraser "\f12d"
 fa-puzzle-piece "\f12e"
 fa-microphone "\f130"
 fa-microphone-slash "\f131"
 fa-shield "\f132"
 fa-calendar-o "\f133"
 fa-fire-extinguisher "\f134"
 fa-rocket "\f135"
 fa-maxcdn "\f136"
 fa-chevron-circle-left "\f137"
 fa-chevron-circle-right "\f138"
 fa-chevron-circle-up "\f139"
 fa-chevron-circle-down "\f13a"
 fa-html5 "\f13b"
 fa-css3 "\f13c"
 fa-anchor "\f13d"
 fa-unlock-alt "\f13e"
 fa-bullseye "\f140"
 fa-ellipsis-h "\f141"
 fa-ellipsis-v "\f142"
 fa-rss-square "\f143"
 fa-play-circle "\f144"
 fa-ticket "\f145"
 fa-minus-square "\f146"
 fa-minus-square-o "\f147"
 fa-level-up "\f148"
 fa-level-down "\f149"
 fa-check-square "\f14a"
 fa-pencil-square "\f14b"
 fa-external-link-square "\f14c"
 fa-share-square "\f14d"
 fa-compass "\f14e"
 fa-caret-square-o-down "\f150"
 fa-caret-square-o-up "\f151"
 fa-caret-square-o-right "\f152"
 fa-eur "\f153"
 fa-gbp "\f154"
 fa-usd "\f155"
 fa-inr "\f156"
 fa-jpy "\f157"
 fa-rub "\f158"
 fa-krw "\f159"
 fa-btc "\f15a"
 fa-file "\f15b"
 fa-file-text "\f15c"
 fa-sort-alpha-asc "\f15d"
 fa-sort-alpha-desc "\f15e"
 fa-sort-amount-asc "\f160"
 fa-sort-amount-desc "\f161"
 fa-sort-numeric-asc "\f162"
 fa-sort-numeric-desc "\f163"
 fa-thumbs-up "\f164"
 fa-thumbs-down "\f165"
 fa-youtube-square "\f166"
 fa-youtube "\f167"
 fa-xing "\f168"
 fa-xing-square "\f169"
 fa-youtube-play "\f16a"
 fa-dropbox "\f16b"
 fa-stack-overflow "\f16c"
 fa-instagram "\f16d"
 fa-flickr "\f16e"
 fa-adn "\f170"
 fa-bitbucket "\f171"
 fa-bitbucket-square "\f172"
 fa-tumblr "\f173"
 fa-tumblr-square "\f174"
 fa-long-arrow-down "\f175"
 fa-long-arrow-up "\f176"
 fa-long-arrow-left "\f177"
 fa-long-arrow-right "\f178"
 fa-apple "\f179"
 fa-windows "\f17a"
 fa-android "\f17b"
 fa-linux "\f17c"
 fa-dribbble "\f17d"
 fa-skype "\f17e"
 fa-foursquare "\f180"
 fa-trello "\f181"
 fa-female "\f182"
 fa-male "\f183"
 fa-gittip "\f184"
 fa-sun-o "\f185"
 fa-moon-o "\f186"
 fa-archive "\f187"
 fa-bug "\f188"
 fa-vk "\f189"
 fa-weibo "\f18a"
 fa-renren "\f18b"
 fa-pagelines "\f18c"
 fa-stack-exchange "\f18d"
 fa-arrow-circle-o-right "\f18e"
 fa-arrow-circle-o-left "\f190"
 fa-caret-square-o-left "\f191"
 fa-dot-circle-o "\f192"
 fa-wheelchair "\f193"
 fa-vimeo-square "\f194"
 fa-try "\f195"
 fa-plus-square-o "\f196"
 fa-space-shuttle "\f197"
 fa-slack "\f198"
 fa-envelope-square "\f199"
 fa-wordpress "\f19a"
 fa-openid "\f19b"
 fa-university "\f19c"
 fa-graduation-cap "\f19d"
 fa-yahoo "\f19e"
 fa-google "\f1a0"
 fa-reddit "\f1a1"
 fa-reddit-square "\f1a2"
 fa-stumbleupon-circle "\f1a3"
 fa-stumbleupon "\f1a4"
 fa-delicious "\f1a5"
 fa-digg "\f1a6"
 fa-pied-piper "\f1a7"
 fa-pied-piper-alt "\f1a8"
 fa-drupal "\f1a9"
 fa-joomla "\f1aa"
 fa-language "\f1ab"
 fa-fax "\f1ac"
 fa-building "\f1ad"
 fa-child "\f1ae"
 fa-paw "\f1b0"
 fa-spoon "\f1b1"
 fa-cube "\f1b2"
 fa-cubes "\f1b3"
 fa-behance "\f1b4"
 fa-behance-square "\f1b5"
 fa-steam "\f1b6"
 fa-steam-square "\f1b7"
 fa-recycle "\f1b8"
 fa-car "\f1b9"
 fa-taxi "\f1ba"
 fa-tree "\f1bb"
 fa-spotify "\f1bc"
 fa-deviantart "\f1bd"
 fa-soundcloud "\f1be"
 fa-database "\f1c0"
 fa-file-pdf-o "\f1c1"
 fa-file-word-o "\f1c2"
 fa-file-excel-o "\f1c3"
 fa-file-powerpoint-o "\f1c4"
 fa-file-image-o "\f1c5"
 fa-file-archive-o "\f1c6"
 fa-file-audio-o "\f1c7"
 fa-file-video-o "\f1c8"
 fa-file-code-o "\f1c9"
 fa-vine "\f1ca"
 fa-codepen "\f1cb"
 fa-jsfiddle "\f1cc"
 fa-life-ring "\f1cd"
 fa-circle-o-notch "\f1ce"
 fa-rebel "\f1d0"
 fa-empire "\f1d1"
 fa-git-square "\f1d2"
 fa-git "\f1d3"
 fa-hacker-news "\f1d4"
 fa-tencent-weibo "\f1d5"
 fa-qq "\f1d6"
 fa-weixin "\f1d7"
 fa-paper-plane "\f1d8"
 fa-paper-plane-o "\f1d9"
 fa-history "\f1da"
 fa-circle-thin "\f1db"
 fa-header "\f1dc"
 fa-paragraph "\f1dd"
 fa-sliders "\f1de"
 fa-share-alt "\f1e0"
 fa-share-alt-square "\f1e1"
 fa-bomb "\f1e2"
 fa-futbol-o "\f1e3"
 fa-tty "\f1e4"
 fa-binoculars "\f1e5"
 fa-plug "\f1e6"
 fa-slideshare "\f1e7"
 fa-twitch "\f1e8"
 fa-yelp "\f1e9"
 fa-newspaper-o "\f1ea"
 fa-wifi "\f1eb"
 fa-calculator "\f1ec"
 fa-paypal "\f1ed"
 fa-google-wallet "\f1ee"
 fa-cc-visa "\f1f0"
 fa-cc-mastercard "\f1f1"
 fa-cc-discover "\f1f2"
 fa-cc-amex "\f1f3"
 fa-cc-paypal "\f1f4"
 fa-cc-stripe "\f1f5"
 fa-bell-slash "\f1f6"
 fa-bell-slash-o "\f1f7"
 fa-trash "\f1f8"
 fa-copyright "\f1f9"
 fa-at "\f1fa"
 fa-eyedropper "\f1fb"
 fa-paint-brush "\f1fc"
 fa-birthday-cake "\f1fd"
 fa-area-chart "\f1fe"
 fa-pie-chart "\f200"
 fa-line-chart "\f201"
 fa-lastfm "\f202"
 fa-lastfm-square "\f203"
 fa-toggle-off "\f204"
 fa-toggle-on "\f205"
 fa-bicycle "\f206"
 fa-bus "\f207"
 fa-ioxhost "\f208"
 fa-angellist "\f209"
 fa-cc "\f20a"
 fa-ils "\f20b"
 fa-meanpath "\f20c"
Đọc thêm »
Đăng ký: Bài đăng (Atom)

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.