Bài đăng

Hiển thị các bài đăng có nhãn Thủ thuật blogspot

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 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 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;

Hướng dẫn cách tạo Subdomain cho blogspot

Hình ảnh
Hello! Xin chào các bạn. Đã lâu không viết bài về thủ thuật blogspot. Hôm nay tìm kiếm trên google thấy anh em công đồng blogger có chia sẻ một template bán hàng khá đẹp nên ý định tạo ra một tiên miền phụ (subdomain) để tạo một trang web bán hàng.


 Việc tạo subdomain cho blogspot cực kỳ đơn giản, và bạn có thể tạo rất nhiều subdomain hay tên miền phụ mà không bị giới hạn và có thể tạo cả ngàn subdomain đó nha. Blogger thật tuyệt vời đúng không nào. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách để chúng ta tạo và add subdomain vào tên miền blogspot.

1. Tên miền phụ hay subdomain là gì? Tên miền phụ hay subdomain có thể được ví dụ như sau. Ví dụ longanit có tên miền chính là www.longanit.com và giờ longanit sẽ tạo một website khác, nhưng ở cùng trên tên miền longanit.com thì sẽ tạo một tên miền dạng subdomain.abc.com. Như trong bài viết thì tôi tạo một subdomain có tên là shop.longanit.com

2. Cách tạo subdomain cho blogspot?Bước 1:  Thêm IPCNAME vào quản trị DNS tên miền

Thêm các button liên hệ cực chất cho blogspot

Hình ảnh
Dạo qua một số trang thủ thuật blogger thấy code này hay nên muốn chia sẻ với anh em nào có nhu cầu sử dụng. Code này sử dụng plugin của trang whatshelp lấy ra nó có thể sử dụng cho blogspot rất đơn giản nhằm làm đẹp cho blogspot của bạn giúp tiếp cận với nhiều khách hàng nếu như bạn sử dụng website bán hàng hay giới thiệu sản phẩm.

Đầu tiên các bạn thêm link css của button vào trước thẻ Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng

Lưu ý: mình chỉ lấy css của button thôi nhé, nghĩa là button kèm link ngoài ra chả có tính năng gì khác. Nếu bạn thấy đẹp thì cũng lấy về mà dùng, dưới đây là cách thực hiện:

Đầu tiên các bạn thêm link css của button vào trước thẻ </head>

<link href='https://vietblogdao.github.io/css/contact-button-widget.css' rel='stylesheet'/>
Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng </body>
<!--Contact Button Widget-->
<div class='wh-widget-send-button-desktop'>
  <div class='wh-widget-…