Bài đăng

Hiển thị các bài đăng có nhãn Blogging tips

Hướng dẫn triển khai AMP trên Blogspot

Hình ảnh
AMP (Accelerated Mobile Pages) là một dự án của Google hỗ trợ tăng tốc độ load trang trên di động các trang AMP đã được xác thực được lưu trong bộ nhớ cache AMP của Google và điều này cho phép tải trang nhanh hơn đem đến trải nghiệm tuyệt vời cho người dùng.


Định dạng AMP được hỗ trợ bởi nhiều nền tảng, như Google Tìm kiếm. Nếu một trang web được liệt kê trong kết quả tìm kiếm của Google có phiên bản AMP hợp lệ, Tìm kiếm có thể hướng người dùng trên thiết bị di động đến AMP trong bộ nhớ cache.

Trong bài viết hôm nay longanit sẽ hướng dẫn các bạn cách để chúng ta thêm AMP vào Blogspot chỉ vài thao tác đơn giản.

Bước 1: Đăng nhập vào Bogger - Chủ đề - Chỉnh sửa HTML tìm thẻ <html> ở phần đầu tiên và thay đổi nó thành

<html amp='amp'> Tiếp theo copy đoạn code bên dưới sau thẻ <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">Bước 2: Copy đoạn code này phía sau …

Tạo Slideshow với HTML, CSS và Javascript căn bản

Hình ảnh
Slideshow là một phần rất quan trọng và không thể thiếu trong website hiện nay, thực chất thì đây chỉ là những hình ảnh chạy qua lại chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này longanit sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.



Bước 1: Tạo code HTML
<div class="slideshow-container">
  <h2>longanit.com hướng dẫn tạo slideShow đơn giản</h2>
  <div class="mySlides fade">
    <img src="./images/slide-1.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide đầu tiên!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-2.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 2!</div>
  </div>

  <div class="mySlides fade">
    <img src="./im…

Tạo hiệu ứng sóng chuyển màu tại các trang nhãn cho Blogspot

Hình ảnh
Hello các bạn. Tìm kiếm trên mạng thấy code này khá hay của bác Huỳnh Phi Phụng nên mình muốn mang về chia sẻ cho các bạn. Code tên là hiệu ứng sóng chuyển màu tại các trang nhãn cho blogspot. Nói thì khó hình dung ra đúng không thôi thì các bạn xem demo ngay trong link bên dưới mình đưa luôn.
https://www.longanit.com/search/label/SEO Ok như vậy là các bạn đã thấy được demo hiệu ứng của nó rồi đúng không vậy cách để chúng ta làm nó cho trang blogspot của mình thế nào thì các bạn hãy thực hiện như theo hướng dẫn của mình nhé.

Bước 1: Xác định vị trí chúng ta chèn code: Thường thì code này là dạng kiểu code intro tại trang tĩnh. Vậy thì tôi sẽ đặt code này nằm dưới menu trong blogspot và chèn thêm thẻ điều kiện là chỉ hiển thị ở trang nhãn.

Bước 2:  Đăng nhập vào Blogger - Chủ đề - Chình sửa HTML
Bước 3: Copy toàn bộ đoạn code bên dưới và dán vào phía dưới menu trong blogspot của bạn thường thì nó nằm dưới phần Header trong blog.

<b:if cond='data:blog.searchLabel'>
<style&…

Tạo Popup Thông Báo Theo Dõi Bài Viết Cho Blogspot Cực Chất

Hình ảnh
Khi truy cập vào một số trang web trên mạng chúng ta hay gặp phải cái thông báo với Style Popup hiện ra nằm ở góc phải màn hình. Cái Popup này được viết bằng code CSS, HTML, Java Script mục đích của Popup tùy vào người viết code. Trong bài viết hôm nay longanit xin chia sẻ cho các bạn code tạo thông báo theo dõi bài viết cho Blogspot để khi có bài mới nó sẽ hiện thông báo tự động cho những người đã nhấn Follow bạn.

Bước 1: Chúng ta cần thư viện Jquery

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Chú ý: Nếu trong template của bạn đã có sẵn jquery bạn có thể bỏ qua bước này nhé

Bước 2: Dán toàn bộ đoạn code bên dưới vào trước thẻ đóng </body>

<style>
.banner-noti-browser {
position: fixed;
z-index: 333;
bottom: 12px;
right: 15px;
width: 372px;
height: 186px;
border-radius: 8px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to bottom, rgba(43, 119, 190, 0.94), rgba(19, 66, 137, 0.94));
}

Tạo recent bài viết theo nhãn theo kiểu mới

Hình ảnh
Đăng nhập vào blogger - Chù đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>
<div id='newminanlabel1-wrapper'>
        <b:section class='newminanlabel1' id='newminanlabel1' maxwidgets='3' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Thủ thuật máy tính' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>SEO</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&qu…

Tạo recent bài viết cho blogspot theo 2 kiểu default và label

Hình ảnh
Hello các bạn hôm nay quay lại với chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi xin chia sẻ với các bạn code để chúng ta tạo recent post ( bài viết gần nhất ) của blogspot theo cả 2 kiểu là mặc định và theo từng nhãn như hình minh họa bên dưới.


Các bạn vui lòng thực hiện theo các bước mà tôi hướng dẫn như bên dưới nhé

Bước 1: Đầu tiên chúng ta cần tạo một Widget

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTMLTìm một vị trí đẹp đề đặt widget và copy đoạn code bên dưới vào
<b:if cond='data:view.isHomepage'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
<b:section id='laslide'/>
   </div>
</div></div>
</b:if> </b:if> Chú ý: Tôi sử dụng 2 thẻ điều kiện là chỉ hiển thị trên trang chủ và không hiển thị trên mobile và các class sử dụng tiện ích hệ thống lưới có sẵn trong boot…

Tổng hợp các kiểu slider bài viết blogger

Hình ảnh
Hello các bạn đã lâu không viết bài về thủ thuật blogspot. Hôm nay rãnh rỗi search trên google thấy mấy code slider bài viết blogspot khá hay với nhiều kiểu hiệu ứng cũng như tùy biến khá hay nên muốn chia sẽ cho các bạn nào cần nhu cầu sử dụng.
Thực hiện các bước như tôi hướng dẫn dưới đây
Bước 1:  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Preloader */
.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;