Chương mục lựa chọn

  • Trang chủ
  • Kỹ thuật tin học
  • Mạng Xã hội
  • Tiện ích
  • Truyện hay
  • Site Map
  • Email this page
  • Print Friendly and PDF
  • Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng
    Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng

    Tạo form đăng ký nhận bài viết mới qua email cho blogspot

    Views:

    Feedburner là gì ?



    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  Một bộ công cụ hữu ích là tính năng Newletter cần cho chúng ta sử dụng để chuyển tải liên thông thông tin bài viết giữa các Web Blog và người dùng qua email.
    feedburner có rất nhiều tác dụng đặc biệt, bởi trong quá trình thiết kế Web Blog có rất nhiều tính năng yêu cầu phải cung cấp Fead mới có thể hoạt động.
    RSS là một định dạng tập tin thuộc họ XML dùng trong việc chia sẻ tin tức Web (Web syndication) được dùng bởi nhiều website tin tức và weblog.
    Công nghệ của RSS cho phép người dùng Internet có thể đặt mua, hoặc miễn phí thông tin từ các websites có cung cấp khả năng RSS (RSS feeds); chúng thường là các site có nội dung thay đổi và được thêm vào thường xuyên.
    Rõ ràng đây là một nguồn traffic không nên bỏ qua. Vì vậy bạn cần một dịch vụ để gửi “feed” đến khách truy cập đăng ký nhận bản tin mới trên website của mình. Hai dịch vụ miễn phí tốt nhất hiện nay được cung cấp bởi WordPress (cài đăt plugin Jetpack) và Google feedburnerGoogle feedburner dễ sử dụng, có số liệu thống kê trực quan và hoàn toàn miễn phí.


    Bước 1: Cách đăng ký:



    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.
    Việc đầu tiên là bạn đã có Account trên Google chưa? Nếu chưa có, bạn hãy vào trang: Làm thế nào đăng ký tài khoản Google?  nhé, ở nơi đây mình sẽ hướng dẫn cho bạn một cách tường tận.

    Nếu đã có rồi và hiện thời đã đăng nhập vào Google Account rồi, bạn cần thực hiện các bước sau:
    - Truy cập vào Blogger Dashboard như hình dưới:

    - 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.
    - Kéo thanh cuộn trượt dọc biên phải cửa sổ xuống phía dưới, chọn vào: Theo dõi qua Email





    - Chọn Theo dõi qua email (Subcribe via email). Đây chính là phiên bản thu nhỏ của feedburner.

    - Cửa sổ mới xuất hiện, copy đoạn text khoanh như hình dưới đây (KtBnCngKhanhnguyensBlog). Sau đó nhấn Hủy để kết thúc, chỉ cần lấy được đoạn text này là xong.




    Bước 2 : Tạo form đăng ký nhận bài viết mới:

    - Tạo 1 Widget HTML hoặc một trang HTML mà bạn muốn đặt Source Code bên dưới. Có thể bạn muốn đặt trong Template cũng được, ở chổ nào mà bạn muốn, chẳng hạn ở những phần <data:post.body/> hoặc <post-footer-line post-footer-line...> nhưng phải mã hóa Code. Trong Blog của mình có phần mã hóa Code nằm trên phần Comments cho Blogger.
    -  Add Code dưới đây vào phần bạn chọn và cho xuất bản. Nhớ làm xong thao tác nào, bạn cũng cần phải Save để ghi lại nhé.

    Mã Code:
    <div class="Email">
    <style>
    .Email {width:270px; height:250px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
    .Email b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
    .Email 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 từ Khanhnguyen' s Blog!<br />
    <br />
    <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=KtBnCngKhanhnguyensBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="KtBnCngKhanhnguyensBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Đăng ký" /></form></div>
    - Chọn Mẫu / Chỉnh sửa HTML.
    - Copy - paste đoạn mã sau vào vị trí bạn muốn đặt form theo dõi.- Thay thế URL chổ mã in đậm trên Code bằng đoạn text copy ở hình trên.
    - Chỉnh sửa lại chiều rộng width và chiều cao height cho phù hợp với yêu cầu của bạn.
    - Lưu template lại và cho Blog của bạn hoạt động thử xem nào.

    Bạn có thể vào xem bài viết dưới đây để biết thêm về feedburner:

    Hướng dẫn đăng ký và sử dụng FeedBurner cho Blogger


    Chúc các bạn thành công tốt.

    Người viết: Nguyễn Đạt Khánh

    Jquery Slideshow cho Blogger Sidebar

    Views:


    Một đoạn mã hay giúp cho người làm Blog tạo ra được một ấn tượng đẹp trên chính Blog do mình tự thiết kế. Nó sẽ Slideshow trình diễn cho bạn bè thấy, mỗi lần xem Blog. Có thể bạn sẽ đặt vào đây những tấm ảnh khác mà bạn thích, đó là tùy ở bạn.

    Mình vừa sưu tập được trên Web site của BloggerTrix, đó là một trang Web lớn với rất nhiều Source Code hữu dụng. Cách làm không khó khăn gì, nó chẳng yêu cầu nào khó đâu. Việc đầu tiên là bạn đã có Account trên Google chưa? Nếu chưa có, bạn hãy vào trang: Làm thế nào đăng ký tài khoản Google?  nhé, ở nơi đây mình sẽ hướng dẫn cho bạn một cách tường tận.

    Nếu như đã có trang Google rồi, các bước còn lại có trình tự như sau:
    1. Log in vào Blogger Dashboard.
    2. Tạo 1 Widget HTML hoặc một trang HTML mà bạn muốn đặt Source Code bên dưới. Có thể bạn muốn đặt trong Template cũng được, ở chổ nào mà bạn muốn, chẳng hạn ở những phần <data:post.body/> hoặc <post-footer-line post-footer-line...> nhưng phải mã hóa Code. Trong Blog của mình có phần mã hóa Code nằm trên phần Comments cho Blogger.
    3. Add Code dưới đây vào phần bạn chọn và cho xuất bản. Nhớ làm xong thao tác nào, bạn cũng cần phải Save để ghi lại nhé.


    <style> #slideshow {margin:50px auto;position:relative;width:410px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);} #slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> $(function() { $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); }); </script> <br /> <div id="slideshow"> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2svL0A3" height="208" width="400" /></div> </div> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2rC4tLg" height="212" width="400" /></div> </div> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2svqKhE" height="261" width="400" /></div> </div>

    Ghi chú:
    .Ở những đoạn Code sau như:
    width:410px, height:240px, 
    http://bit.ly/2svL0A3. 
    http://bit.ly/2rC4tLg, 
    http://bit.ly/2svqKhE
    Bạn có thể thay đổi được giá trị. Riêng ở những địa chỉ mà bạn thấy đó, có màu đỏ là do những địa chỉ đó đã được mình dùng ứng dụng ở địa chỉ bitly.com để rút gọn Link. Trên thực tế, ứng dụng rút gọn Link có rất nhiều, bạn có thể link vào chuỗi rút gọn Link nầy để chọn nhé.

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

    Người viết: Nguyễn Đạt Khánh

    Cách gỡ bỏ dòng "Đăng ký Nhận xét (Atom) cuối chân Blogger

    Views:
    Khi tạo Blog bằng ứng dụng Blogger của Google, với những Template chuẩn do nhà thiết kế Atom cung cấp thì ở cuối trang của Blog luôn luôn có hàng chữ: 
    Đăng ký: Đăng nhận xét (Atom)
    Để Seo Blog lên cho khá hơn với những gì mà Google cung cấp, và cũng là để không phải mang danh phận bản quyền tác giả của ai khác,  Khanhnguyen' s Blog vừa tìm được một thủ thuật nho nhỏ để xóa đi hàng chữ bản quyền nầy.



    Cách làm có mấy bước sau:
    - Truy cập Blogger Account , vào Dasboard
    Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
    Nhấn ( Ctrl + F ) tìm  :

    <b:if cond='data:blog.pageType != &quot;item&quot;'><!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div class='post-feeds'> <b:loop values='data:posts' var='post'> <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/> </b:loop> </div> </b:if>
    Xóa 2 hàng có mã Code như sau:
    <b:include data='feedLinks' name='feedLinksBody'/>
    và:
    <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>


    - Sau khi xóa xong, bạn vào Lưu chủ đề để Save lại Template nhé và cho Blog hoạt động thử xem nào.

    Nếu thấy cực quá và không muốn phải vất vã về những hứng thú tự thiết kế nầy, bạn có thể vào đây để tìm free Template để add chúng vào Blog mà sử dụng.

    Chúc các bạn thành công.

    Người viết: Nguyễn Đạt Khánh
    Trong thủ thuật Blogger
    Bạn có thể xem thêm các chủ đề:
    • Những Code Thông Dụng Cho Blogspot
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
    • Code tạo hình nền và chia cột cho bài viết Blog
    • Thủ thuật tạo chữ chuyển  động cho Blogspot
    • Hướng Dẫn Thiết Kế Template Blogger
    • Thiết kế trang trí cơ bản cho Blogger Blogspot
    • Thiết kế các Widget tiện ích

    Seo bài cho các Blogspot thường sử dụng

    Views:

    Trong thủ thuật Blogger
    Bạn có thể xem thêm các chủ đề:
    • Những Code Thông Dụng Cho Blogspot
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
    • Code tạo hình nền và chia cột cho bài viết Blog
    • Thủ thuật tạo chữ chuyển  động cho Blogspot
    • Hướng Dẫn Thiết Kế Template Blogger
    • Thiết kế trang trí cơ bản cho Blogger Blogspot
    • Thiết kế các Widget tiện ích
    • Hướng dẫn đăng ký và sử dụng FeedBurner cho Blogger

    Bạn có thể xem thêm các chủ đề:
    • vị trí của Javascript và Jquery
    • Chèn định dạng CSS
    • Nhúng CSS vào trong tài liệu HTML
    • Hướng dẫn làm hiển thị và ẩn Widgets trong Blogger
    Trong thủ thuật Iphone/Ipad
    Bạn có thể xem thêm các chủ đề:
    • Thủ thuật giải phóng dung lượng bộ nhớ cho iPhone
    • Facetime là gì? Cách sử dụng trên Iphone
    • Cách gõ tiếng Việt, tin nhắn có dấu trên iPhone như thế nào?
    Trong thủ thuật Google
    Bạn có thể xem thêm các chủ đề:
    • Nhìn lại lịch sử Google theo mốc thời gian
    • Thủ thuật tăng tốc khi lướt web bằng Google Chrome
    • Hướng dẫn thay đổi mật khẩu tài khoản Gmail
    • Làm thế nào đăng ký tài khoản Google?

      Alexa Rank - Thứ hạng Alexa là gì?

      Views:

      Thứ hạng Alexa là gì?

      • Alexa Rank là thước đo mức độ phổ biến của các website. Chỉ số thứ hạng của mỗi website được Alexa kết hợp đánh giá từ 2 yếu tố là số trang web người dùng xem (Page Views) và số người truy cập website (Reach).
      • Các số liệu thống kê của Alexa dựa trên những dữ liệu thu thập từ người dùng cài đặt Alexa Toolbar và từ một số nguồn khác. Cứ 3 tháng 1 lần, Alexa tiến hành tổng kết số liệu và xếp hạng các website.
      • Alexa Toolbar là một tiện ích giúp người dùng lướt web, hiện có khoảng hơn 10 triệu người dùng Internet trên thế giới sử dụng công cụ này.

      Alexa Rank - Thứ hạng Alexa là gì?

      Tăng thứ hạng Alexa mang lại những lợi ích gì?

      • Chỉ số thứ hạng Alexa của một website cao được hiểu là website đó có đông người truy cập, phần nào đem lại cho website ấn tượng sống động và uy tín.
      • Trong thị trường quảng cáo trực tuyến, Alexa Rank có thể được sử dụng để đánh giá giá trị quảng cáo.
      • Chỉ số Alexa rank là thước đo ghi nhận thành quả lao động của các webmaster với cộng đồng và là một công cụ rất hữu ích giúp các webmaster quản trị website hiệu quả.

      Làm thế nào để xem thứ hạng Alexa?

      • Cài đặt và sử dụng Alexa Toolbar - thanh công cụ hỗ trợ người dùng duyệt web: http://www.alexa.com/toolbar
      • Hoặc truy cập trực tiếp vào link thống kê của Alexa: http://www.alexa.com/siteinfo/domain_cua_ban.com

      Làm thế nào để tăng thứ hạng Alexa cho website?

      • Bạn nên tiến hành các chiến dịch quảng bá website định kỳ nhằm thường xuyên thu hút khách truy cập website, tăng cao chỉ số Reach.
      • Trong website, nên có các phần thông tin có giá trị cao, cập nhật để thu hút khách hàng thường xuyên quay lại website, tăng Page views.
      • Bạn cần bố trí nội dung, cấu trúc website sao cho thu nhận được thật nhiều cú nhấp chuột của khách truy cập để tăng Page views nhưng vẫn mang lại cảm giác thoải mái, tiện lợi.

      PageRank là gì? Tầm quan trọng của pagerank trong SEO

      Views:
      Pagerank (PR) là gì? Đây là câu hỏi thường đặt ra của những SEOer mới vào nghề. Bài viết này sẽ giúp bạn hiểu một cách đầy đủ nhất về pagerank và tầm quan trọng của pagerank trong SEO.
      Pagerank là thuật ngữ ám chỉ sự xếp hạng của Google về thứ tự các website trong kết quả tìm kiếm dựa trên các tiêu chí đánh giá do Google đặt ra.
      Nếu bạn là một SEOer thì chắc chắn sẽ rất quan tâm đến vấn đề PageRank. Tuy nhiên bạn sẽ có thể bị rối khi muốn biết chính xác Pagerank thực sự hoạt động như thế nào. Để giải quyết vấn đề này, SEOANTOAN.COM sẽ cung cấp cho các bạn bài viết chính là cẩm nang chỉ dẫn về Pagerank của Google

      Pagerank là gì

      Định nghĩa Pagerank của Google

      Theo Google PageRank là sự tín nhiệm, các link liên kết như là một tiêu chí để tín nhiệm hay bầu chọn. Thêm vào đó thì Google chỉ coi trọng một vài tín nhiệm chứ không phải tất cả. Pagerank chính là một hệ thống đếm những tín nhiệm về các link liên kết của Google và quyết định xem trang nào là có nền tảng tốt nhất dựa trên những tín nhiệm đó. Sau đó những điểm số này sẽ được sử dụng cũng với những yếu tố khác để quyết định thứ tự xếp hạng các trang trong lượt tìm kiếm của người dùng.

      PageRank ra đời như thế nào?

      PageRank được ra đời bởi hai nhà sáng lập: Larry Page và Sergey Brin tại trường Đại học Stanford, nó đóng vai trò trung tâm trong nhiều công cụ tìm kiếm web của Google. Và   trong khi chúng tối có hàng tá các kĩ sư đang làm việc để nâng cao từng khía cạnh của Google trên những dữ liệu ra hằng này, Pagerank tiếp tục đóng vai trò trung tâm trong nhiều công cụ tìm kiếm web của chúng tôi.

      Pagerank hoạt động như thế nào?

      Pagerank hoạt động dựa trên những yếu tố tự nhiên và mang tính công bằng về các trang web bằng cách sử dụng cấu trúc link rộng của nó như một tín hiệu thông tin đánh giá về giá trị của trang cá nhân.
      Theo Google một tín nhiệm là một liên kết link từ trang A đến trang B, và trang A là một tín nhiệm cho trang B. Tuy nhiên, Google đánh giá rất kĩ lưỡng chứ không chỉ hoàn toàn dựa vào tần số tín nhiệm và Google cũng phân tích trang web quyết định tín nhiệm cho một trang nào đó. Bằng cách phân tích đầy đủ cấu trúc của trang web, Google có thể quyết định những site nào được tín nhiệm là nguồn thông tin tốt nhất trong những nguồn thông tin được người dùng quan tâm nhất

      Giá trị của PageRank

      Giá trị của PageRank được đo trên thanh điểm từ 0-10 và đánh giá trên từng web page, trang con chứ không phải trên toàn bộ một website. Để biết được PageRank của một trang web dễ dàng bạn có thể sử dụng tiện ích của Google Chrome là Open SEO Stats hoặc của FireFox là Search Status. Hiện tại có rất ít trang web có PageRank 10 trên Internet, dưới đây là một số trang trong đó
      pagerank-la-gi
      PageRank 10

      Những điểm chính xác về PageRank mà bạn nên nhớ:

      • Pagerank của Google phải mất vài tháng thì mới cập nhật chỉ số.
      • Pagerank chỉ cho bạn thấy rằng một trang quan trọng như thế nào, nói một cách dễ hiểu, tức là khi bạn so sánh nó với một trang khác.
      • Pagerank chỉ là một trong nhiều yếu tố xếp hạng được sử dụng để quyết định thứ hạng trang trong các lượt tìm kiếm.
      • Chỉ số Pagerank cao không đảm bảo thứ hạng cao trong khi tìm kiếm bất kì thuật ngữ nào. Vì thế nếu bạn có website mới, chỉ số PageRank thấp, đừng nên lo lắng về vấn đề đó
      • Anchor text của link liên kết quan trọng hơn rất nhiều so với trang có chỉ số thứ hạng Pagerank cao

      Làm thế nào để tăng PageRank?

      Đây là câu hỏi được rất nhiều SEOer hiện nay đặt ra. Để tăng PageRank hiệu quả thì BackLink sẽ là điều bạn cần để tăng PageRank hoặc liên kết từ những người khác về trang web của bạn. Bạn cần trao đổi liên kết với người khác nhưng cần chắc chắn rằng những liên kết đó có nội dung liên quan và đặc biệt là đừng bao giờ liên kết với Link Farm. Bạn có thể đăng ký với các danh bạ website như DMOZ là một trong những trang lớn nhất và uy tín nhất hiện nay. Khi xây dựng một trang web, bạn có thể tạo ra một số liên kết bằng cách trỏ Backlink từ các trang vệ tinh của mình, đó là kĩ thuật hiện tại được rất nhiều bạn áp dụng. Tuy nhiên hãy nhớ rằng số lượng các liên kết mà bạn tạo ra cần phù hợp, đừng quá làm dụng nó để bị Google chú ý nếu không bạn sẽ phải trả giá trên cả hệ thống trang web vệ tinh của mình.
      Nguồn Seoantoan.com

      Thủ thuật chèn file pdf vào trang Web Blog

      Views:
      Tình cờ trong một lần duyệt Web site trên trang vnreview.vn, Khanhnguyen' s blog phát hiện thêm một số tính năng mới rất hay của Windows 10, không hiểu sao lại nói đó là tính năng của Google Chrome. Mặc đi bởi vì mình đâu có cài đặt Chrome đâu mà vẫn ứng dụng được, miễn sao làm ăn được thôi, mình chỉ có dịp tình cờ phát hiện ra và cảm thấy tiện dụng nên chia sẽ lại, trên tài liệu mà mình nói ở trang Web trên hoàn toàn không đề cập đến một cách tỉ mĩ.

      Chắc hẳn cách bạn sẽ rất ngạc nhiên không biết mình đang nói đến thủ thuật nào mà ghê dữ vậy, đơn giản thôi, bởi mình cần lưu lại cả một trang văn bản Web thành file có đuôi tệp .pdf  để nhúng nó vào trong Web blog bằng thẻ <iframe></iframe> ta thực hiện các thao tác như sau:

      Bước 1: Save trang muốn sao lưu thành tệp .pdf


      Mỡ trang Web blog có chứa nội dung mà bạn cần chuyển tải về hồ sơ của bạn. Khoan đã, cứ đợi cho trang Web đó load xong toàn bộ, trạng thái ổn định, bạn nhấn tiếp tổ hợp phím Ctrl + P. Một cửa sổ cho thao tác in ấn được mỡ ra như sau mà bất kỳ hệ điều hành Windows nào cũng có.


      Chọn vào lệnh Save để lưu lại trang in theo kiểu tệp .pdf vào đúng thư mục mà bạn cần lưu, xong nhấn nút lệnh Cancel để tắt cửa sổ trang in.

      Bước 2: Tạo hosting và tải tệp vào hosting


      Thực hiện trình tự: mỡ Hosting Google Drive. Nếu chưa biết, bạn có thể tham khảo thêm các tài liệu dưới đây:

      Tài liệu tham khảo thêm

      Khi bạn tải tệp vào hosting Google thành công, sẽ có kết quả như sau:


      Bước 3: Lấy mã nhúng



      Tiếp tục mỡ tệp pdf đó trên hosting Google Drive bằng cách nhấn Double Click chuột vào khung tệp như hình mũi tên trỏ vào khung đỏ phía trên. Bạn sẽ có một cửa sổ ở tab kế như hình vẽ dưới đây:


      Như trong bài trên, mình đang tạo hosting cho "15 thủ thuật cơ bản....." của một trang Web khác thành file .pdf vào trong Google Drive của mình đó. Bạn tiếp tục Click chỉ 1 lần thôi vào tên tệp đó, cửa sổ kế sẽ mỡ ra kế bên như hình vẽ dưới:


      Bạn tiếp tục Click chuột vào nút chấm chấm cạnh trái Avatar hình của bạn và chọn vào Nhúng mục....Avatar nằm trên góc phải cửa sổ. Sau khi chọn đúng, bạn sẽ có hình sau, chỉ việc chép mã nhúng nầy nhúng vào Html/JavaScript trong Blog xem như mọi việc đã ổn.


      Source Code:

      Cũng từ Source Code trên: bạn có thể dùng để nhúng được nhiều trang có định dạng khác nhau hoặc nhúng luôn cả Youtube chỉ bằng cách thay địa chỉ nơi phần khai báo: Src="địa chỉ". 

      Tài liệu tham khảo thêm

      Kết quả sẽ như sau:

      Người viết: Khanhnguyen' s blog

      Tạo khung nhúng video từ Youtube cho blogger

      Views:

      Cách tiến hành!
      1- Tạo một bài đăng
      2- Check vào phần HTML và dán code bên dưới vào.
      <div style="background: url(&quot;http://2.bp.blogspot.com/-kwLVqYTOQiE/URZfPgOTzII/AAAAAAAAIf4/y4K9a0bZVBM/s1600/frame-youtobe-namkna-blogspot-com-1.png&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px;"> <iframe width="500" height="300" src="http://www.youtube.com/embed/NB7NETne1rM?rel=0" frameborder="0" allowfullscreen></iframe> </div>

      Trong đó: Link màu xanh là link khung ảnh nền. Phần chữ màu đỏ là mã nhúng video từ youtube. Nếu chưa biết lấy mã nhúng hãy xem bài viết này
       Lưu ý: Các khung nền có độ rộng thích hợp với video là 300 và 500 do vậy hãy chỉnh lại widthheight trong phần mã nhúng lại bằng width="500" height="300"

      Bạn có thể tham khảo thêm về ý nghĩa các thuộc tính trong mã nhúng Iframe trong bài Ẩn link trỏ đến Youtube trong video chèn vào Blog

      Ví dụ: Khi ta lấy được một mã nhúng của một Youtube như sau:

      <iframe width="500" height="300" src="https://www.youtube.com/embed/hoO0oXw2ue0" frameborder="0" allowfullscreen></iframe>

      Khi thay vào Code phần trên theo hướng dẫn, ta sẽ được như Khung Video như sau:


      Nguồn tham khảo từ Terocket.
      Thật ra còn rất nhiều dạng khung giúp bạn có thể thay vào trên Source Code để thay đổi hình dáng như ý muốn. Bạn có thể tự tìm kiếm và thay vào được rồi đó. Chúc các bạn thành công.

      Khanhnguyen' s blog

      Tạo Banner Quảng Cáo tự động thay đổi cho Web - Blog

      Views:

      .
      Một thủ thuật hay, thuận lợi trong việc quãng cáo mà bạn không phải tốn nhều Widget thiết kế, tất cả chỉ trong một, cứ mỗi lần tự thay đổi banner sẽ tự động trỏ link về nơi mà bạn có chủ ý thiết kế.
      hình ảnh quãng cáo cho các thương vụ cứ theo một chu kỳ trình tự mà thay đổi, trong một mãng Array xếp đặt.

      Các bước thực hiện đơn giản như sau:

      1- Đăng nhập vào Blogger
      2- Vào Bố cục (Layout)
      3- Click vào Thêm tiện ích (Add Widget)






      4- Tạo một tiện ích  HTML/JavaScript  và dán đoạn code sau đây vào tiện ích HTML/JavaScript bạn vừa tạo.
      <script type="text/javascript">
      // Banner Rotation Script by Bloggerism
      var ban = new Array();
      var link = new Array();
      var index = 0;
      ban[0] = new Image();
      ban[0].src = "URL_banner_0";
      link[0] = "URL_link_0";
      ban[1] = new Image();
      ban[1].src = "URL_banner_1";
      link[1] = "URL_link_1";
      ban[2] = new Image();
      ban[2].src = "URL_banner_2";
      link[2] = "URL_link_2";
      index = Math.random() * (ban.length);
      index = Math.floor(index);
      function rotator()
      {if (index == ban.length) index = 0;
      if (document.images) {
      document.images.rotation.src = ban[index].src;
      }
      else {
      document.getElementById('rotation').src=ban[index].src;
      }
      index++;
      setTimeout('rotator()',3000);
      }
      function go() {window.open(link[index-1]);}
      </script>
      <img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
      <script type="text/javascript">rotator();</script>
      5- Lưu lại và xem kết quả, chỉ có bao nhiêu đấy thôi đó các bạn.

      Chú thích:

      • Thay URL_banner_0URL_banner_1URL_banner_2 thành URL của hình ảnh bạn muốn hiển thị trên banner
      • Thay URL_link_0URL_link_1URL_link_2 thành linh liên kết tới trang cần quảng cáo tương ướng với mỗi bức ảnh ở bên trên.
      •  Chú ý số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần thay đổi  banner. Bạn có thể điều chỉnh con số này tùy thích.

      Hiệu ứng tooltips chỉ dùng CSS

      Views:
      Chúng ta đều biết hiệu ứng tooltips được dùng phổ biến trong thiết kế web, nó giúp hiển thị thêm thông tin về một liên kết khi rê trỏ qua liên kết đó. Để tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Bài viết này giới thiệu một cách tạo hiệu ứng tooltips như vậy.

      Bạn hãy rê trỏ vào các liên kết trong đoạn text dưới đây để xem demo. Trong demo có 3 định dạng khác nhau theo thứ tự Style 1, Style 2, Style 3.

      This is a practical, elegant CSS tooltipĐể tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltipCó thể tùy biến tooltip một cách dễ dàng pops up, which works in all modern browsers. Unlike a regular tooltip (ie: one created using the "title" attribute), Cool CSS TooltipTooltip chỉ dùng CSS rất đơn giản và gọn nhẹ continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.


      Để thực hiện, bạn hãy làm theo các bước sau đây.

      Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

      Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>.

      /* Tooltip with CSS
      ----------------------------------------------- */
      a.tt{
      position:relative;
      z-index:24;
      color:#3CA3FF; /* Màu text cho liên kết */
      font-weight:bold;
      text-decoration:none;
      }
      a.tt span{ display: none; }
      a.tt:hover{ z-index:25; cursor:help;}
      a.tt:hover span.tooltip{
      display:block;
      position:absolute;
      top:0px; left:0;
      padding: 15px 0 0 0;
      width:200px;
      color: #000; /* Màu text cho mô tả */
      text-align: center;
      filter: alpha(opacity:90);
      KHTMLOpacity: 0.90;
      MozOpacity: 0.90;
      opacity: 0.90;
      }
      a.tt:hover span.top{
      display: block;
      padding: 30px 8px 0;
      background: url(http://goo.gl/TmNok) no-repeat top;
      }
      a.tt:hover span.middle{
      display: block;
      padding: 0 8px; 
      background: url(http://goo.gl/DqRTW) repeat bottom; 
      text-decoration:none;
      }
      a.tt:hover span.bottom{
      display: block;
      padding:3px 8px 10px;
      background: url(http://goo.gl/e8oAy) no-repeat bottom;
      }

      Trên đây là CSS cho Style 1. Nếu bạn muốn Style 2 thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

      a.tt:hover span.top{
      display: block;
      padding: 30px 8px 0;
      background: url(http://goo.gl/hIWel) no-repeat top;
      }
      a.tt:hover span.middle{
      display: block;
      padding: 0 8px;
      background: url(http://goo.gl/wg17s) repeat bottom;
      text-decoration:none;
      }
      a.tt:hover span.bottom{
      display: block;
      padding:3px 8px 10px;
      background: url(http://goo.gl/3RTsz) no-repeat bottom;
      }

      Nếu bạn muốn Style 3 thì thay bằng đoạn code bên dưới.

      a.tt:hover span.top{
      display: block;
      padding: 30px 8px 0;
      background: url(http://goo.gl/i7YJE) no-repeat top;
      }
      a.tt:hover span.middle{
      display: block;
      padding: 0 8px;
      background: url(http://goo.gl/NZ5f1) repeat bottom;
      text-decoration:none;
      }
      a.tt:hover span.bottom{
      display: block;
      padding:3px 8px 10px;
      background: url(http://goo.gl/jiFUt) no-repeat bottom;
      }

      Lưu Template.

      Bước 2. Thiết lập cấu trúc HTML cho liên kết như sau.

      <a href="URL_Liên kết" class="tt">Text liên kết<span class="tooltip"><span class="top"></span><span class="middle">Đoạn text thông tin mô tả cho liên kết</span><span class="bottom"></span></span></a>

      Hy vọng thủ thuật nhỏ này giúp ích nhiều cho blogspot của bạn. :47)

      Nguồn Thủ thuật Blogger - Huỳnh Nhất Hà

      Tài liệu tham khảo thêm

      BACK TO TOP