Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

24/6/16

Nhúng video youtube vào sidebar cho blogspot theo phong cách riêng


Bạn có 1 blog đang hoạt động kèm theo đó là kênh youtube của bạn thì việc nhúng video youtube vào blog là chuyện bắt buộc điều này giúp người đọc tiếp cận kênh youtube của dễ dàng hơn.

Cách nhúng video youtube thì rất đơn giản nhưng giao diện không được đẹp. Hôm nay Tuấn hướng dẫn bạn làm theo phương pháp này nhìn sẽ gọn gàng và đẹp hơn. Các bạn theo dõi các bước dưới đây.

23/6/16

Tạo trang liên hệ trong Blogspot qua 4 bước

Mặc định Blogger không có trang liên hệ mà chỉ có gadget form liên hệ, nhưng chỉ cần vài bước đơn giản bạn cũng có thể làm một trang liên hệ riêng cho blog của mình.



Các bạn làm theo các bước sau:

1. Tạo form liên hệ bằng gadget:
Bạn đăng nhập admin => Bố cục => Chọn 1 vị trí bất kì để đặt gadget, chọn Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ như trong hình

Tiện ích nhận xét mới nhất cho Blogger

Có một tiện ích nhận xét, bình luận, comments, phản hồi mới nhất trên blogspot là một lợi thế, nó không chỉ giúp liên kết các bài viết trên blog của bạn, Bên cạnh đó còn giúp cho đọc giả dễ dàng theo dõi các cuộc thảo luận mới cũng như tương tác với các bài viết trên blog của bạn. Hãy thêm tiện ích nhận xét gần đây để cho blog của bạn trở nên chuyên nghiệp hơn. Trong hướng dẫn này, tôi sẽ chia sẽ cho bạn làm thế nào để Thêm tiện ích nhận xét mới nhất (​​gần đây) vào blogger. Nó hiển thị các nhận xét mới nhất cùng với các liên kết bài viết mà người dùng đã đăng. Điều này sẽ giúp cho bạn biết về các nhận xét mới và giúp bạn dễ dàng phản hồi những ý kiến đó hơn.

11/6/16

Code widget form đăng ký nhận bài viết mới qua email cho blogspot bằng Feedburner

Form đăng ký nhận bài viết mới qua email là tiện ích không thể thiếu cho mỗi trang blog. Giúp người đọc nhận bài viết mới nhất của qua việc đăng kí qua email giúp tạo mối liên hệ và giữ chân người đọc thường xuyên ghé thăm blog của bạn.

Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website. Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích nhưng để tạo ra được 1 form theo dõi hoàn chỉnh như trên thì chúng ta sẽ cần sử dụng tới tính năng gửi bài viết qua email.

Để tạo form như hình các bạn làm theo trình tự các bước sau:

Lấy url feedburner cho blogspot

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

Đăng nhập blogger, bên menu trái chọn Bố cục.
Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích chọn Theo dõi qua Email


    Tại phần này các bạn chỉ cần lấy phần chữ đằng sau .com/ sau đó bấm Hủy


    Tiếp tục bấm thêm tiện ích chọn HTML/Javascript


    Copy đoạn code dưới đây vào khung

    <div class="nam">
    <style>
    .nam {width:340px; height:240px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
    .nam b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
    .nam form {width:250px; margin:0 auto;}
    </style>
    <b>THEO DÕI QUA EMAIL</b><br />
    Đăng ký để cập nhật những bài viết mới nhất về thủ thuật Windows 10 từ blogthuthuatwin10.blogspot.com!<br />
    <br />
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThThutWindows10', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="email" placeholder="Email của bạn..." style="border: 1px solid #fff; box-sizing: border-box; padding: 9px 5px; width: inherit;" type="text" />
    <input name="uri" type="hidden" value="ThThutWindows10" />
    <input name="loc" type="hidden" value="vi_VI" />
    <input class="button" style="background: #019877; border: none; color: white; font-size: 18px; font-weight: bold; margin: 10px auto; padding: 9px 5px; width: inherit;" type="submit" value="ĐĂNG KÝ NGAY" />
    </form>
    </div>

    • Thay dòng chữ màu đỏ bằng đoạn bạn đã copy lúc thêm tiện ích Theo dõi qua Email
    • Thay dòng chữ màu xanh thành tên gì tùy thích
    • Dòng width:340px; height:240px để thay đổi kích thước phù hợp với sidebar
    • Dòng #3e433e thay đổi màu nền form
    • Dòng #019877 thay đổi màu nền dòng chữ ĐĂNG KÝ NGAY

      Code widget bài viết mới nhất có ảnh thumnail cho Blogspot

      Bên cạnh bài viết được xem nhiều thì bài viết mới nhất không thể thiếu cho một trang blog. Nếu bạn sử dụng mẫu template có cấu trúc bài viết dạng blog thì không cần thêm tiện ích này làm gì nhưng với mẫu template ví dụ như blog của mình dùng nhiều slide bên trái thì phần bên phải không thể nào thiếu được tiện ích này


      Cách làm thì đơn giản thôi
      • Đăng nhập Blogger.com
      • Bên menu trái, chọn bố cục
      • Ở khung sidebar chọn dấu + Thêm tiện ích chọn tiện ích HTML/Javascript


          • Copy - paste code khung



            Đây là đoạn code cần thêm

            <div>
            <style type="text/css">
            img.recent_thumb {padding:1px;width:70px;height:70px;border:0;float:left;margin-right:10px;border:1px solid #d1d1d1;}
            .recent_posts_with_thumbs {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff;}
            ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; list-style-type:none; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
            ul.recent_posts_with_thumbs li:last-child {border:none;}
            .recent_posts_with_thumbs hr {display:none;}
            .recent_posts_with_thumbs a {text-decoration:none; font-weight:bold;}
            .recent_posts_with_thumbs i {font-style:normal; font-size:12px; }
            .recent_posts_with_thumbs strong {font-size:10px;}</style>
            <script src="https://googledrive.com/host/0B4v2llDGaFQyNnZrTXE4ZjFSQVU"></script>
            <script>
            var numposts = 9;
            var showpostthumbnails = true;
            var displaymore = false;
            var displayseparator = true;
            var showcommentnum = false;
            var showpostdate = false;
            var showpostsummary = true;
            var numchars = 100;</script>
            <script src="https://blogthuthuatwin10.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>
            </div>

            Thay đường link màu đỏ bằng địa chỉ blog của bạn

            var numposts = 9 : số lượng bài muốn hiển thị
            var showpostthumbnails = true;
            var displaymore = false : hiển thị nút more
            var displayseparator = true;
            var showcommentnum = false :  hiển thị comment
            var showpostdate = false; hiển thị ngày tháng
            var showpostsummary = true;
            var numchars = 100; hiển thị đoạn mô tả ngắn gọn


            • Nếu muốn hiển thị ghi true ngược lại ghi false
            • Giá trị số có thể thay giá trị số khác
            • Phần kích thước ảnh thumnail width:70px;height:70px bạn có thể tùy chỉnh tùy ý sao cho phù hợp

            5/6/16

            Thêm Popup Like Facebook cho Blogspot

            Poppup Facebook like box sẽ tự động hiện lên khi ai đó vào blog của bạn, nó sẽ giúp các bạn tạo sự chú ý đến fanpage trên Facebook.


            Vào bố cục thêm 1 tiện ích HTML/Javascript bên sidebar copy đoạn code bên dưới vào

             <style>
            #fbox-background {
                display: none;
                background: rgba(0,0,0,0.8);
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 99999;
            }
            #fbox-close {
                width: 100%;
                height: 100%;
            }
            #fbox-display {
                background: #eaeaea;
                border: 5px solid #3a5795;
                width: 340px;
                height: 230px;
                position: absolute;
                top: 32%;
                left: 37%;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
            #fbox-button {
                float: right;
                cursor: pointer;
                position: absolute;
                right: 0px;
                top: 0px;
            }
            #fbox-button:before {
                content: "CLOSE";
                padding: 5px 8px;
                background: #3a5795;
                color: #eaeaea;
                font-weight: bold;
                font-size: 10px;
                font-family: Tahoma;
            }
            #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
                color: #aaaaaa;
                font-size: 9px;
                text-decoration: none;
                text-align: center;
                padding: 5px;
            }
            </style>
            <script type='text/javascript'>
            //<![CDATA[
            jQuery.cookie = function (key, value, options) {
            // key and at least value given, set cookie...
            if (arguments.length > 1 && String(value) !== "[object Object]") {
            options = jQuery.extend({}, options);
            if (value === null || value === undefined) {
            options.expires = -1;
            }
            if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
            }
            value = String(value);
            return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
            ].join(''));
            }
            // key and possibly options given, get cookie...
            options = value || {};
            var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
            return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
            };
            //]]>
            </script>
            <script type='text/javascript'>
            jQuery(document).ready(function($){
            if($.cookie('popup_facebook_box') != 'yes'){
            $('#fbox-background').delay(5000).fadeIn('medium');
            $('#fbox-button, #fbox-close').click(function(){
            $('#fbox-background').stop().fadeOut('medium');
            });
            }
            $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
            });
            </script>
            <div id='fbox-background'>
            <div id='fbox-close'>
            </div>
            <div id='fbox-display'>
            <div id='fbox-button'>
            </div>
            <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
            href=Linkfanpages/&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
            style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
            <div id="fbox-link">Powered by <a style="padding-left: 0px;" href="Link blogspot" rel="nofollow">TÊN</a></div>
            </div>
            </div>


            • Thay Linkfanpages thành link fanpage muốn hiển thị.
            • Thay Link blogspot thành link blog của bạn
            • Thay TÊN bằng tên bạn muốn đặt

            - Theo mặc đinh popup chỉ xuất hiện khi người dùng truy cập lần đầu tiên vào blog, nếu muốn nó xuất hiện mỗi lần tải trang thì xóa đoạn code
            $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7});

            4/6/16

            Share mẫuTemplate Blogspot tin tức chuẩn Seo Gaps Magazine

            Gaps là một template blogspot với giao diện rất thân thiện và thiết kế đơn giản, thanh lịch. Với thiết kế cao cấp và hoàn toàn responsive, Gaps sẽ là một trong những template cho blogspot chủ đề tạp chí cực tốt. Và template Gaps mang đến những tính năng cao cấp và hoàn toàn tối ưu hóa với các công cụ tìm kiếm.





            Template Gaps có thể được sử dụng trên tạp chí trực tuyến, tin tức, các trang công nghệ, review và các trang web nội dung phong phú.
            • Phong cách thiết kế tạp chí
            • Tự động resize ảnh cho Thumbnails bài viết
            • Giao diện 2 cột
            • Thanh menu xổ xuống
            • Bài viết phổ biến
            • Vị trí đặt quảng cáo có sẵn
            • Hệ thống bình luận G+ và FB
            • Tối ưu hóa công cụ tìm kiếm
            • Thiết kế hoàn toàn Responsive
            • Hình ảnh và thông tin về tác giả bài viết
            • Sidebar bên phải
            • Footer 3 cột
            • Có mục News Sticker
            • Bài viết liên quan
            • Tương thích với các trình duyệt phổ biến
            • Icons chia sẻ mạng xã hội
            • Thanh diều hướng trang
            • Trang 404 tùy chỉnh
            • Giao diện dễ sử dụng
            • Sử dụng tốt nhất cho tạp chí, tin tức, trang web công nghệ, các trang web review trực tuyến
            • Màu chủ đạo: Đen, xanh và trắng

                  3/6/16

                  Sửa lỗi không thể chỉnh sửa, di chuyển wiget trong layout blogspot


                  Nguyên nhân bạn không thể chỉnh sửa vị trí các tiện ích trong Bố cục.

                  Trong quá trình thiết kế có thể do vô tình hay cố ý mà người thiết kế khóa chức năng đó trong thẻ b:section và thẻ b:widget
                  Khắc phục lỗi không thể chỉnh sửa và di chuyển tiện ích trong phần bố cục của blogspot

                  1.    Điều chỉnh lại thuộc tính showaddelement trong b:section
                  • Trong blogspot các tiện ích HTML được chứa trong cặp thẻ b:section có dạng như bên dưới:
                  <b:section id='tên id' class='tên class' maxwidgets='số lượng' showaddelement='no'>

                  Các tiện ích Widget

                  </b:section>

                  Trong đó:
                  • Mỗi b:section quy định một khối bố cục duy nhất thông qua các thuộc tính id như: header, sidebar, main, footer,... bạn có thể di chuyển và thêm các phần tử giữa các khối này.
                  • Bao hàm trong bài viết này các bạn chú ý cho mình phần showaddelement, thông thường nó có dạng showaddelement='yes' tức là cho phép bạn thêm một tiện ích vào phần bố cục section của bạn. Tuy nhiên trong một số trường hợp người thiết kế lại để là showaddelement='no' do vậy bạn phải điều chỉnh lại thànhshowaddelement='yes' để có thể thêm tiện ích vào trong thẻ b:section trên.

                  2. Chỉnh lại thuộc tính locked của thẻ b:widget

                  Thẻ b:widget chính là một phần tử con của b:section, nó có thể là một tiện ích HTML, popularposts,... nói chung là tất cả những gì bạn có thể thêm trong phần Bố cục. Mình lấy ví dụ với tiện ích HTML1 có dạng như sau:


                  <b:widget id='HTML1' locked='false' title='Tên tiện ích' type='HTML'/>

                  Trong đó:

                  • Trong blog các tiện ích được phân biệt với nhau bởi id như: Popularpost1, HTML1,....
                  • type: Bao gốm các dạng sau : BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList,List, Logo, BlogProfile, Navbar,VideoBar, NewsBar, ListView .... Trong đó HTML được chúng ta sử dung nhiều nhất.
                  • locked: Quy định bạn có thể di chuyển các tiện ích giữa 2 thẻ b:section như từ footer lên header, nếu bạn không thể di chuyển các tiện ích trong phần bố cục thì tức là locked đang để ở chế độ locked='false' hoặc locked='no', Bạn hãy điều chỉnh lại thành locked='true'.

                  3. Xóa bỏ thuộc tính maxwidgets

                  Thông thường để ngăn thêm tiện ích trong một số section người ta thêm thuộc tính maxwidgets='1' do vậy bạn hãy xóa toàn bộ những đoạn maxwidgets='1' đi nha

                   Sưu tầm

                  Share bộ ảnh Bing HD và Full HD không có Watermark

                  Chia sẻ các bạn bộ ảnh Bing HD và Full HD không có watermark. Thông thường khi các bạn truy cập Bing để tải ảnh về tuy có chất lượng ảnh cao nhưng bức ảnh thường bị đóng dấu bản quyền Bing nhìn không được thẩm mĩ. 

                  Bạn thích bức ảnh nhưng không muốn có watermark dưới đây là cách mà bạn có thể lấy ảnh mà không bị đóng dấu bản quyền.




                  CÁCH 1
                  Tải ảnh tại trang web iorise.com
                  Truy cập vào 1 ảnh nào đó sẽ có 2 ảnh một cái có gán watermark và 1 cái không, bạn nhấp chuột vào ảnh không có watermark rồi save về máy là xong.


                  CÁCH 2
                  Tải về trọn bộ Bing Images HD kích thước 1366x768 và Full HD kích thước 1920x1080 tại đây 

                  Chuyên mục văn hoá giải trí của VnExpress

                  .

                  © 2017 www.blogthuthuatwin10.com

                  Tầng 5, Tòa nhà FPT Cầu Giấy, phố Duy Tân, Phường Dịch Vọng Hậu, Quận Cầu Giấy, Hà Nội
                  Email: nguyenanhtuan2401@gmail.com
                  Điện thoại: 0908 562 750 ext 4548; Liên hệ quảng cáo: 4567.