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;

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

Shortcode HTML đẹp dành cho thiết kế nội dung

Hình ảnh
1. Button Thanh toán hoặc Chuyển Khoản USD $15.00Thanh toán bằng Paypal USD 9.00Thanh Toán 250.000VNĐChuyển khoản ngân hàng Thanh Toán
Code sử dụng
<div id="box-payment">
<div id="box-paypal">
<div class="cover-paypal">
<div class="icon-paypal">
<span class="coc"></span></div>
<div class="title-paypal">
<span class="app-title">USD $15.00</span>
<span class="label-paypal"><span class="tag-os"></span>Thanh toán bằng Paypal</span></div>
</div>
<div class="link-paypal">
<span class="item_price"><a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now"><span class="home-paypal">USD 9.00</span><span class="post-paypal">Thanh Toán</span></a></s…