Đối với Blogger khi truy cập trên thiết bị có độ phân giải màn hình từ 600px trở xuống sẽ chuyển ngay sang truy cập link trên mobile có dạng url.html?m=1

Đối với giao diện này các điều kiện trên mobile bắt đầu hoạt động.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><!-- nội dung muốn hiển thị trên di động --></b:if>

và

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><!-- Nội dung không muốn hiển thị trên di động --></b:if>

Do vậy khi khi xem trên máy tính với kích thước màn hình lớn thì không thể nào tự chuyển sang url?m=1 được mà ta phải có button cho chuyển 2 chế độ. Sẽ được thêm ?m=1 vào cuối url.

Như cách mình làm thì ở chế độ Mobile sẽ tự động ẩn Sidebar-wrapper đi và để #main-wrapper{width:100%!important}

Bài viết này nằm trong Serie Javascript Blogger.

Trong các bài viết trước đây mình đã chia sẻ một số javascript

• Click change Text (Click để thay đổi nội dung)
• Scroll add class (Cuộn trang để thêm class)

Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.

Cách ứng dụng Click to add class

• DEMO trên trang web: https://www.tinhdauonline.com.vn

Click to add class áp dụng cho trang web tinhdauonline.com.vn

Khi click chuột vào 1 id hoặc class chứa text thì text (chữ) sẽ chuyển thành text khác.
Thủ thuật click change text này được mình sử dụng cho trang web https://www.tinhdauonline.com.vn và chỉ sử dụng một đoạn javascript nhỏ!

Được minh họa như sau (Click change text)

Hiện text ĐÃ THÊM +1 để xác nhận thao tác click thành công!

Việc tạo banner quảng cáo để phục vụ các hoạt động quảng cáo tìm kiếm lợi nhuận là điều mà nhiều Webmaster/Blogger mong muốn.

Và dưới thủ thuật sau đây sẽ giúp bạn tạo 1 banner đồng thời có nút button (x) để người dùng có thể tắt để ngừng xem quảng cáo để tránh ảnh hưởng đến trãi nghiệm trên website/blog chúng ta.

Qua thủ thuật tạo banner quảng cáo này chúng ta cũng sẽ học về 1 chút javascript rất hữu ích.

Banner được trên menu và nó button tắt (x)

Trước đây trong nền tảng blogger (blogspot). Google chỉ áp dụng xanh | Bảo mật cho tên miền miễn phí dạng .blogspot.com có chuẩn https (bảo mật) nhưng với tên miền tùy chỉnh vẫn được hiện được https nhưng không hiển thị được xanh bảo mật. Chữ s xuất hiện ở cuối https:// là viết tắt của chữ Secure = Bảo mật để xác nhận là trang đã bật chuẩn mã hóa để bảo vệ người dùng là trang an toàn.

Vậy là đến nay thì cuối cùng Google đã nâng cấp chuẩn xanh  https cho đứa con cưng blogger của mình dành cho tên miền tùy chỉnh trong suốt 1 năm nay hiện diện.

Về mặt SEO web chuẩn https sẽ giúp website của bạn tối ưu trên công cụ tìm kiếm vỏn vẹn ~ 1% nhưng động thái này đã cho thấy chuẩn này đang được Google đánh giá cao.

HTTPS Bảo mật trong web toilaquantri.com

Noel 24-25/12 mỗi năm sắp đến. Đây là dịp đi chơi và cũng như cho các blogger chúng ta trang hoàn cho blog của mình.

Đơn giản cho việc trang trí blog là tạo hiệu ứng tuyết rơi cho hợp với không khí Noel.

Chúng ta cùng tiến hành!

Chỉ cần 1 bước và chèn code cài đặt bên dưới trước thẻ /body là chúng ta sẽ có ngay hiệu ứng này.
[code]

Bài viết trước chia sẻ cho bạn các điều kiện xuất hiện hoặc chặn xuất hiện ở 1 trang nào đó trong blogger tiếp tục bài viết này là các thẻ điều kiện kết hợp cho các bạn áp dụng 2 hoặc 3 trang...

Xem lại: Điều kiện ẩn hiện trong blogger

Điều kiện ẩn hiện kết hợp nâng cao trong blogger

Điểm yếu của Blogger thường xảy ra khi phân tích Google Webmaster Tool về trùng lặp nội dung/tiêu đề vì Blogger có 2 phần giao diện trên smartphone và desktop khi xuất hiện các đuôi đằng sau tên miền.

Fix lỗi trùng lặp tiêu đề/nội dung nền tảng Blogger

Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Thủ thuật tạo thông tin tác giả chia sẻ liên kết và ngày tháng năm giống như trên facebook. Thông tin tương đối gọn gàn và đầy đủ chi tiết để có thể áp dụng được cho Blogspot. Chúng ta có 4 bước để thực hiện.

Điều đầu tiên trước khi thực hiện thủ thuật này là bạn cần xóa bỏ đi code cũ có trong blogspot từ trước để tránh trùng lặp.

Có rất nhiều câu hỏi về ưu nhược điểm của wordpress và blogspot. Nền tảng cái nào tốt hơn? Cái nào SEO web tốt hơn? Cái nào dễ tùy biến sử dụng hơn?... Bài viết này chia sẻ cho các bạn hiểu rõ hơn về wordpress và blogspot.

Khái niệm

Blogspot và Wordpress là 2 nền tảng trang web phổ biến nhất. Với blogspot là thuộc sở hữu của Google mà bất cứ một Seoer, blogger nào cũng không thể bỏ qua. Còn WordPress là một mã nguồn mở và phần mềm viết blog miễn phí. Vì vậy ưu nhược điểm của wordpress và blogspot là đều có.

Về ưu nhược điểm của wordpress và blogspot

Blogspot có những ưu và nhược điểm gì ?

Ưu điểm:

- Đó là 100% miễn phí và được sở hữu bởi Google. Đây là điều tuyệt vời nhất khi bạn chọn Blogger, bạn sẻ được sử dụng Host miễn phí và cực kỳ mạnh mẻ từ Google. Nhờ thế bạn không phải lo nghĩ gì về lỗi, hay các vấn đề khác như DDOS...

- Nó rất dễ dàng để thiết lập và quản lý một blog Blogspot.

- Xuất bản nội dung là đơn giản. Được xây dựng trong các tính năng mạng xã hội.

- Sản phẩm khác của Google được tích hợp: Một trong những lợi thế lớn khi sử dụng sản phẩm của Google là bạn có thể dễ dàng sử dụng sản phẩm khác của Google với một tài khoản gmail. Bạn có thể dễ dàng truy cập và tích hợp YouTube, Google Webmaster Tools, Google Analytics, Google Plus và nhiều hơn nữa.

- Nó rất đáng tin cậy và Đảm bảo an toàn bảo mật. Vì đây thuộc sở hữu của Google không ai có thể hack tài khoản blogspot của bạn dễ dàng được.

- Không cần đến cơ sở dữ liệu sao lưu. 

- Bài viết của bạn sẽ được tự động lập chỉ mục của Google. Và 100% quảng cáo miễn phí.

Nhược điểm

- Nếu blogspot của bạn có bài viết hay hình ảnh vi phạm nội quy thì họ có thể xóa blog của bạn mà không cần báo trước. Đây là điều bất lợi nhất khi sử dụng Blogspot. Nếu tuân thủ các quy định của Google thì bạn hãy chọn nền tảng này.

- Hỗ trợ SEO khá kém
- Ngoài file hình ảnh ra thì bạn không thể upload bất cứ file gì lên host được.
- Giới hạn Blog: Bạn chỉ có thể có 100 blog cho mỗi tài khoản
- Blogspot cho phép các trang web có dung lượng dưới 1 MB như Trang chủ, Trang lưu trữ vvv ,Nếu trang được hơn 1 GB, bạn sẽ nhận được lỗi "006"
- Tối đa chỉ 100 thành viên viết bài trên mỗi blog
- Không hỗ trợ FTP.

WordPress - Ưu điểm và khuyết điểm (Đối với bản miễn phí)

Ưu điểm:

- Đây là một hệ thống CMS sử dụng nhiều nhất trên thế giới với nhiều ưu điểm vượt trội.

- WordPress là rất đơn giản để sử dụng tuy nhiên phải mất một thời gian để tìm hiểu và khám phá các chức năng giao diện.
- Đó là sử dụng 100% miễn phí.
- Nó rất là thân thiện với công cụ tìm kiếm. Hỗ trợ SEO website tốt. Bạn có thể thiết lập tùy chỉnh thẻ meta của riêng bạn
- Nó chỉ mất vài phút để thiết lập blog của bạn. WordPress là rất linh hoạt vì nó là mã nguồn mở. Vì vậy, bạn có thể tùy chỉnh blog của bạn theo cách bạn muốn.
- Bạn sở hữu các blog và bạn có toàn quyền kiểm soát blog của bạn
- Bạn có thể cài đặt bất kỳ chủ đề hoặc bổ sung. Có sử dụng miễn phí và có phí cho các chủ đề - WordPress và các plugins. Có thể làm 1 website chuyên nghiệp.
- Không giới hạn số lượng thành viên.

Nhược điểm:

- WordPress phát hành bản cập nhật thường xuyên, do đó bạn phải cập nhật các phần mềm mỗi khi họ phát hành một phiên bản mới (nhưng nó đòi hỏi chỉ vài cú nhấp chuột).

- Chi phí đầu tư cho hosting cao: Bạn phải đầu tư Hosting  và chi phí bảo trì khá cao
- Khi sử dụng WordPress, bạn không được phép để kiếm tiền từ blog WordPress.com của bạn bằng cách sử dụng Google AdSense, Chitika, Amazon, biểu ngữ, vv
- Cần phải cài đặt, tạo database ban đầu. Cần phải có kỹ năng lập trình để có thể chỉnh sửa template
- Hỗ trợ hạn chế về chủ đề và bổ sung.
- Không có FTP Access.
- Sẽ hiển thị quảng cáo, trừ khi bạn mua opt cho phiên bản quảng cáo miễn phí mà chi phí $ 29,97 hàng năm.
- Bạn phải lấy thường xuyên sao lưu cơ sở dữ liệu.
- Dễ bị tấn công bởi Hacker

Trên đây là một số ưu nhược điểm của wordpress và blogspot. Nếu bạn không giỏi về lập trình, code. Với nguồn tài chính hạn hẹp và không có dự định phát triển đầu tư mạnh , mục đích chỉ muốn tạo blog nho nhỏ thôi thì hãy chọn Blogspot. Ngược lại, nếu bạn am hiểu về Code, nhiều vốn có định chiến lược đầu tư kinh doanh thì hãy chọn WordPress.

Xem thêm : http://blogloi.com/thiet-ke-website-wordpress-gia-re/

Giải đáp thắc mắc cho các bạn tại sao url không hiển thị theo label khi search trên google. Điều này hoàn toàn phụ thuộc vào template blogspot mà bạn đang sử dụng.

Bản thân trang web toilaquantri.com đã qua nhiều đợt thay đổi template và kết quả mình quan sát là kết quả hiển thị nào phụ thuộc vào code breadrumbs của template đó.

Nhiều bạn thích url hiển thị theo dạng Domain > label 1 > label 2 > label 3.... hơn là dạng Domain > url. Do vậy mình sẽ hướng dẫn bạn fix lại dạng này.

Vậy để làm Breadcumbs hiển thị trên Google theo Label (Nhãn) cho Blogspot bạn làm theo hướng dẫn sau.

Trong Mẫu:

Bước 1: Xóa CSS và HTML của Breadcumbs cũ

Bạn tìm theo chữ breadcumb và xóa code cũ trong web của bạn đi nhé!
Phần này mình sẽ không hướng dẫn nhiều nhé (riêng bạn nào mới chơi blog không biết code kiết là gì thì để lại bình luận bên dưới mình hd riêng.)

Bước 2: Chèn CSS dưới trên /b:skin

.breadcrumbs{background: #e8e8e8; word-wrap: break-word;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: -7px -10px 0px -10px;padding: 8px 12px; font: normal 14px Roboto}
.breadcrumbs a{color:#666;font-weight:bold}.breadcrumbs a:hover{color:#777}.breadcrumbs-labelname{margin:0 0 0 1px;padding-left:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgEYEa1uQq3pnFsqroJwUt8hmS-YsqyQs-bEbtLfU8JQxujnkszMOBiuY1sioSqe0Sz3_YT4FioJVJiMWz5vKYs6GUwXgsodDiRtTuncKbq1S9CdmGk_cWvzG1uF6OOju0Z4ETkFBqV2ml/s5/arrow%2520%25281%2529.png) left center no-repeat}

Bước 3: Chèn HTML breabcumbs tại vị trí hiển thị

Chèn code breamcumbs bên dưới trên của tiêu đề bài viết (Nếu chèn breabcumbs trên tiêu đề).

<b:if cond='data:blog.pageType == &quot;item&quot;'>

               <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

                 <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <brc>/</brc>

                 <b:loop values='data:posts' var='post'>

                   <b:if cond='data:post.labels'>

                     <b:loop values='data:post.labels' var='label'>

                       <span typeof='v:Breadcrumb'>

                         <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' property='v:title' rel='v:url'><data:label.name/></a></span>

                       <b:if cond='data:label.isLast != &quot;true&quot;'><brc>/</brc></b:if>

                     </b:loop>

                     <b:else/>

                     Unlabelled

                   </b:if>

                   <brc>/</brc> <span><data:post.title/></span>

                 </b:loop>

               </div>

</b:if>

Bước 4: Cho Google index lại toàn bộ trang và chờ kết quả

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

Tôi Là Quản Trị

Khi rê chuột vào ảnh bất kì màu ảnh sẽ chuyển sang màu xám xám, giúp hình ảnh trên blogspot có hiệu ứng dễ chịu.
Hãy thử rê chuột vào 1 ảnh bất kì trên trang blog này bạn sẽ thấy hiệu ứng tương tự

Thủ thuật tạo 3 tiện ích là like box fanpage kèm chat fanpage + Hotline kèm sđt liên hệ + trang liên hệ nằm ở góc phải của trang blog.

Xem ảnh demo:

1. Chèn toàn bộ code bên dưới vào trên thẻ /body

<!--=== BEGIN: SITE PHẢI ===-->
        <div class='site_supporrt'>
            <div class='ss_item window_popup'>
              <div class='i_title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPSa1FcjXK4D3h4BZs5G9dVBQnT-EUbpnzSJ8FZVxZBF8ISjrqtbFtizBJRWz3KRQsDgRHfKjYaZ_Qv4lmCv9Oi7-F9SGLmMsjQoCc_GwtU3o919LutaHjhfdcpSZpH2OWnRKSgkJ-ns/s1600/img_face.png' title=''/></div>
                <div class='i-content' style='border-color: #193c86'><div class='fb-page' data-adapt-container-width='true' data-height='400' data-hide-cover='false' data-href='https://www.facebook.com/huynhphungblogger' data-show-facepile='true' data-show-posts='false' data-small-header='false' data-tabs='messages' data-width='250'/></div>
            </div>
            <div class='ss_item window_popup'>
                <div class='i_title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOL0ueeJquF1r1D51ePQytUFVeVfhIJrV5Cj3bRsa8Nv-cbv7swPf594Gw_TnmTGyJotjGrSk5vsEiPw0dF8nRrEmNTYzO6OvluBFGW3N2N-6GfkGUQCKwnKHL48M8-hyb_VHDOYSYGFw/s1600/img_hotline.png' title=''/></div>
                <div class='i-content' style='border-color: #1387c0'>
                    <div class='ss_online'>
                        <div>Liên hệ hỗ trợ</div>
                        <a class='number_phone' href='tel:0932913631'><i class='fa fa-phone'/>0932.913.631</a>
                        <ul>
                            <li>
                                <a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdEpT8WC1QbRzDbH2cnws6J2yvkf8j7tXmv8DWwbwL57hCXYpiz97P0QAA8bV8vQgra7r_r0ektRcUKbQAJCsK1dhjjDVnZMKFXs-2YmRDwGQeDCAoI2Y_sZI65p6wiriGCVTY-dlvRX0/s1600/icon-skype.png' title=''/><span>skype</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class='ss_item1'>
              <div class='i_title'><a href='/p/contact.html'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9TlkZ3sH981Q4ToMmuqJgWRWMe-u56M25AN1HevIO1WMiHO9c5kulNjjZpRiTkloeVCetRGkk4dA2G5Be50-1sHION699XqBPLW7PLCVBlHcDq095GbzQG94GwvNOgemJV0HMxEv_B5s/s118/img_contact.png' title=''/></a></div>
            </div>
        </div>
        <!--=== END: SITE PHẢI ===-->
<style>
.site_supporrt .ss_item1{    pointer-events: auto;
    position: relative;
    margin-bottom: 5px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;}
.site_supporrt{z-index:999999;position:fixed;pointer-events:none;top:50%;right:0;z-index:100;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-o-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
.site_supporrt .ss_item{pointer-events:auto;position:relative;margin-bottom:5px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.site_supporrt .ss_item .i_title{width:40px;cursor:pointer}
.site_supporrt .ss_item .i-content{position:absolute;top:0;left:100%;border:1px solid;border-right:0;width:290px;padding:12px 9px;background:#fff}.site_supporrt .ss_item:hover{z-index:1;-webkit-transform:translate(290px,0);-moz-transform:translate(290px,0);-o-transform:translate(290px,0);-ms-transform:translate(290px,0);transform:translate(-290px,0)}.site_supporrt .ss_item .ss_online{padding-left:13px;font-size:16px;line-height:25px}
.ss_online .number_phone{padding:5px 0;font-size:20px;line-height:25px;font-weight:bold;color:#007dbb}.ss_online .number_phone i{font-size:20px;line-height:25px;padding-right:10px;color:#303030}
.ss_online ul{margin:10px 0}.ss_online ul li{display:inline-block;vertical-align:top;margin-right:25px}.ss_online ul li img{width:26px;margin-right:10px}
.ss_online ul li a{font-size:16px;line-height:25px}
</style>

2. Chèn dưới thẻ <body> mã script để hiện fanpage

<div id='fb-root'/><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

P/s nếu trang blog nào đã có mã script này rồi thì bỏ qua bước 2

Lưu lại và xem kết quả nhé

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

Tôi Là Quản Trị Blog

Ngay sau khi thực hiện thủ thuật này, tiêu đề bài viết sẽ xuất hiện 2 dấu nháy để nhấn mạnh tiêu đề đẹp mắt. Thủ thuật đơn giản và chỉ sử dụng đoạn css ngắn
xem ảnh bên dưới:

Tạo dấu 2 nháy cho tiêu đề bài viết blogspot

Vô tình phân trang trên blog Tôi Là Quản Trị bị lỗi nên mình đã tìm 1 code phân trang khác và tìm được đoạn code phân trang khá ưng ý hoạt động rất tốt mà không bị tình trạng mất bài trong các template blogger khác.

Phân trang này hoạt động cả trên các trang nhãn kèm nhiều style css rất đẹp. Ảnh demo bên dưới.

Tạo phân trang cho blogger đẹp và đã fix lỗi mất bài

Tiện ích này giúp tạo chữ cái đầu tiên trong bài viết thành Drop Cap to hơn các chữ còn lại mà bạn thường thấy trong các tờ báo giấy hoặc văn bản words.

Thủ thuật này cực kì đơn giản chỉ chèn code CSS 1 lần và tất cả các bài viết trong trang blogspot đều xuất hiện mà không phải làm 1 cách thủ công như các thủ thuật tương tự ở các trang khác.

Tạo chữ Drop Cap chữ cái đầu bài viết cho blogpost

Lỗi 404 là lỗi không tìm thấy trang được truy cập. Lỗi này xuất hiện có thể là người dùng truy cập link sai hoặc do người quản trị web đã xóa link kết nội dung này.

Thủ thuật dưới đây sẽ giúp các bạn tạo chuyển tiếp tự động khi người dùng truy cập vào link kết không tồn tại.

Hôm nay mình sẽ hướng dẫn các bạn tạo thêm nút share Facebook, Google +, Twiter..vvv cho blogspot.
Bạn có thể chèn tiện ích này dưới tiêu đề hoặc cuối bài viết trong blogspot để giúp trang web của bạn được phổ biến hơn khi tạo điều kiện cho người dùng chia sẻ nó.

Ảnh demo: