Showing posts with label Thủ Thuật Blogspot. Show all posts
Showing posts with label Thủ Thuật Blogspot. Show all posts

[ Templates ] Share Template Dii Nô Blog Đã Sử Dụng


Như tiêu đề bài này mình sẽ share template mình đang dùng. Được chỉnh sửa từ template gốc BMAG của Star Tuấn với những tính năng nổi bật như tương thích với mọi thiết bị, menu - nút demo và tải template, chia sẻ mạng xã hội, bài viết liên quan,... đẹp mắt, tích comment Facebook chắc chắn sẽ làm bạn hài lòng.
Thông tin về Template.
  • Chia sẻ bởi: Dii Nô Blog
  • Tác giả: Dii Nô 
  • Giá Cả: Miễn Phí
  • Hướng dẫn cài đặt: Không
  • Mã hóa bản quyền: Không
  • Tác giả khác: Trần Thanh Bình, Nguyễn Đăng Khải
  • Bước cuối - Tải Về

TRAO ĐỔI LIÊN KẾT BẠN BÈ VỚI Minh Nhật IT

Ảnh Minh Họa
Chào các bạn, vì muốn tăng thêm lượt xem cho blog, cũng như kết nối bạn bè gần xa với nhau. Hiện tại website Ngọc Tính IT đã có hơn 13.000 lượt truy cập.
Để hiểu rõ hơn thì các bạn vui lòng đọc rõ phần bên dưới này.

LIÊN KẾT VỚI CÁC BLOG CÓ LỢI ÍCH GÌ ?

    Thứ nhất, Liên Kết Blog giúp trang blog của bạn có nhiều người biết đến hơn và có một vị trí vững vàng trên Google.
    Thứ hai, liên kết với nhau giúp các admin có thêm nhiều kinh nghiệm, cũng như giúp đỡ nhau trong quá trình sử dụng Blogger.

    NHỮNG BLOG NÀO SẼ KHÔNG ĐƯỢC ĐẶT LIÊN KẾT ?

    Mình sẽ không bao giờ đặt liên kết với blog của những bạn có nội dung sau:
    - Khiêu dâm, phim sex hoặc chứa các video 18+
    - Sao chép bài đăng của blog khác nhưng lại không ghi nguồn
    - Lượt xem chưa tới 20.000
    - Blog đã ngưng hoạt động
    - Phản động hoặc liên quan đến chính trị không phù hợp

    MỘT SỐ YÊU CẦU KHI LIÊN KẾT

    Đây là một số yêu cầu khi đặt liên kết
    - Trước khi bình luận vào trang này, bạn phải đặt liên kết của mình trên trang của bạn trước
    - Phải đặt đúng tiêu đề là Minh Nhật IT, miêu tả và liên kết trỏ đến http://www.huynhngoctinhit.tk
    - Nếu bạn gỡ bỏ liên kết của mình trên trang của các bạn thì mình cũng sẽ gỡ bỏ liên kết của các bạn trên trang Ngọc Tính IT

    CÁCH LIÊN KẾT VỚI Minh Nhật IT

    Để đặt liên kết với Ngọc Tính IT, hãy bình luận nội dung như thế này xuống dưới, mình sẽ xem xét, nếu được thì mình sẽ đặt liên kết với các bạn.
    Tên hiển thị: ...
    Link Blog: ...

    TẠO NÚT BACK TO TOP, BACK TO HOME

    Oke Hôm Nay Mình Sẽ Hướng Dẫn Các Bạn Cách Thêm Nút Back To Top Và Back To Home Oke. Các Bạn Edit Đoạn CSS Sao Cho Phù Hợp Với Template Các Bạn Nhé Và Ngời Ra Các Bạn Có Thể Edit Màu Ở Đoạn CSS (Bước 2 Nhé)

    CÁCH THỰC HIỆN:
    Bước 1: Đăng nhập Blogger  Chủ đề  Chỉnh sửa HTML.
    Bước 2: Copy & Paste đoạn code này phía trên thẻ ]]<>/b:skin
    /Back To Top-Home/ .back-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-bottom{z-index:9999;width:35px;height:35px;position:fixed;bottom:30px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-top:hover,.back-home:hover,.back-bottom:hover{background-color:#DF7401}>
    Bước 3: Paste đoạn CSS ở dưới lên trên thẻ <body> 
    <div class='back-top'><i class='fa fa-chevron-up'/></div>
      <div class='back-home'><a href='http://www.huynhngoctinhit.tk' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
    <script type='text/javascript'>
     $(&#39;.back-bottom&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:$(&quot;#credit&quot;).offset().top},1000);});
        $(window).scroll(function() {
            if ($(this).scrollTop() &gt; 100) {
                $(&quot;.back-top&quot;).css({
                    bottom: &quot;110px&quot;
                });
            } else {
                $(&quot;.back-top&quot;).css({
                    bottom: &quot;70px&quot;
                });
            }
        });
        $(&quot;.back-top&quot;).click(function() {
            $(&quot;html, body&quot;).animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    </script>
    Bước 4: Lưu Template lại và xem thành quả.

    TẠO NÚT DEMO VÀ DOWNLOAD CHO BLOGGER

    Tạo nút Demo và Download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn, nút download và demo cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn Button download và demo cho bài viết, chia sẻ cho mọi người cách tạo nút DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider.
    Cách tạo button Download, Demo cho blogger:
    Đầu tiên các bạn mở Blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>
    Và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lại).

    #wrap { margin: 20px auto; text-align: center;} #wrap br { display: none;} .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;} .btn-slide2 { border: 2px solid #efa666;} .btn-slide:hover { background-color: #0099cc;} .btn-slide2:hover { background-color: #efa666;} .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;} .btn-slide2:hover span.circle2 { color: #efa666;} .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;} .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;} .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%;} .btn-slide2 span.circle2 { background-color: #efa666;} .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;} .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px;} .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;} .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
    Cách tạo button Demo và Download trong bài đăng:
    Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng hai button Demo và Dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới.
    Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào.
    <div id="wrap"><a href="http://www.startinhit.com" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span></a><a href="http://www.startinhit.com" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span></a></div>
    Vậy là xong chúc các bạn thành công!

    TẠO THANH TÌM KIẾM BÀI VIẾT TUYỆT ĐẸP CHO BLOGGER

    Trước khi đi vào các bước hướng dẫn thì mình xin nói qua về Live Search Box đã nhé. Khác với các khung tìm kiếm thông thường, khung Live Search tích hợp bởi tìm kiếm từ bên ngoài google và bên trong blog. Như vậy, bạn sẽ tiết kiệm được thời gian hơn và trông Blog sẽ chuyên nghiệp hơn rất nhiều đấy
    Vì không phải thêm quá nhiều Javascript nên Blog của bạn sẽ không bị ảnh hưởng tới tốc độ tải trang. Đây quả là một tin tốt lành phải không nào

    CÁC BƯỚC THỰC HIỆN:

    Rất đơn giản bạn chỉ cần vào BLOG → Bố Cục → HTML/Javascript sau đó dán ãm phía dưới vào trong HTML rồi lưu lại.

    LỜI KẾT:

    Vậy là xong bạn đã có một thanh tìm kiếm cực đẹp tích hợp bởi tìm kiếm từ bên ngoài google và bên trong blog. Nhớ theo dõi blog của mình để cập nhật thêm nhiều bài viết hay và bổ ích khác nhé

    Tặng template blogspot Nhật từng dùng


    Demo: Bấm vào đây
    Đây là template mình từng sử dụng, được mình chỉnh sửa từ template BMAG của Sweetheme. Vì nhiều bạn ib hỏi xin mình template này quá nên hôm nay sẽ share luôn template này cho m.n sử dụng :)

    Template này được mình chỉnh sửa từ template BMAG của Sweetheme nên các chức năng đều giống của bmag và vài chức năng khác của mình thêm vào...Nói chung là cũng đẹp, Seo ổn :))

    Để sở hữu template các bạn chỉ cần làm theo 2 bước sau:
    1. Share bài viết này lên facebook hoặc google ở chế độ công khai
    2. Xuống phía dưới comment link share và email nhận template.
    Mình sẽ kiểm tra link share và gửi template cho bạn trong thời gian sớm nhất có thể.
    Và nếu template này có lỗi gì thì liên hệ để mình sửa và update template nhé.