Bài viết mới

Thứ Sáu, 26 tháng 8, 2016

Chèn file Flash, MP3, PDF, Word, Excel, Powerpoint vào Blog

Hiện nay rất nhiều người có dự định xây dựng các web site học tập nhưng họ không biết cách chèn các file đính kèm vào blog mà độc giả có thể đọc nó như các trang chía sẻ tài liệu trực tuyến. Nếu bạn cũng đang có dự định xây dựng cho mình một blog hay trang web chuyên về học tập và chia sẻ tài liệu thì đừng nên bỏ lỡ bài viết này, AgoNews chắc chắn bạn sẽ thấy nó có ích nhiều hơn có hại....

Bài viết này mình sẽ hướng dẫn các bạn cách để nhúng tài liệu Flash, MP3, PDF, Microsoft Word (.doc), Spreadsheets, PowerPoint Slides(.ppt), and Excel Spreadsheetsg (.xls) vào trong blog hoặc website của bạn chỉ với vài thao tác rất đơn giản. Các bạn hãy bắt đầu theo các bước bên dưới:

Bước 1: Chuẩn bị tài liệu để nhúng vào blog

- Tài liệu bạn sử dụng có thể là một file Flash, MP3, PDF, Microsoft Word (.doc), Spreadsheets, PowerPoint Slides(.ppt), and Excel Spreadsheetsg (.xls),... Sau khi chuẩn bị xong tất cả những gì bạn cần là làm theo các bước bên dưới.

Bước 2: Đăng ký một host miễn phí để chứa tài liệu của bạn.

Nói đến host thì có rất nhiều loại từ miễn phí đến tính phí, Tiêu chuẩn để chọn cho minh một host thì nên căn cứ vào mục tiêu của bạn. Nếu hướng đến lượng độc giả lớn trên thế giới và Việt Nam thì hãy mua cho mình một host bởi nó không giới hạn dung lượng xem và tải xuống.

Trong khuôn khổ bài viết này nhằm hướng dẫn cho những người mới làm quen và đang có ý định xây dựng một trang chia sẻ tài liệu hay đơn giản là để học tập, với lượng độc giả ban đầu chưa nhiều thì mình sẽ giới thiệu cho các bạn host Google Drive. Tuy nhiên hãy lưu ý nó là miễn phí nên cái gì cũng có giới hạn như chỉ lưu tối đa được 10 Gb (Tài liệu Flash, MP3, PDF, Microsoft Word (.doc), Spreadsheets, PowerPoint Slides(.ppt), and Excel Spreadsheetsg (.xls) mà dùng hết 10GB thì chắc cũng phải chứa được một tủ sách ) Khi nào lượng độc giả tăng lên hãy tính tới chuyện mua host nha

Sau khi đăng ký thành công bạn tiến hành các bước tiếp theo, cụ thể là bước 3:

Bước 3: Tải file của bạn lên host vừa đăng ký được:

1. Đầu tiên, bạn truy cập địa chỉ https://drive.google.com/ và tạo ra một thư mục mới. Tại sao mình lại bảo tạo một thư mục vì để thuận tiện cho việc phân loại các file của bạn và không phải cài đặt riêng lẻ cho từn file tải lên.

Để làm điều này nhấp chuột vào nút lớn màu đỏ có chữ Create và nhấp chọn tùy chọn Folder từ trình đơn xổ xuống.

2. Đặt tên cho thư mục, điều này không quan trọng vì tên mà bạn sử dụng sẽ không xuất hiện trong các URL của trang web.

3. Nhấp chuột phải vào thư mục mới được tạo ra, và từ menu ngữ cảnh bấm vào Chia sẻ (Share) =>  Chia sẻ (Share). Bạn có thể truy cập vào menu từ nút More ở phía trên cùng của trang Google Drive, một khi thư mục của bạn được chọn.

4. Từ đây, sẽ mở ra trang Cài đặt chia sẻ (Sharing settings), với một liên kết dẫn đến các thư mục chia sẻ, bây giờ hãy sao chép liên kết vào clipboard của bạn.

- Thư mục hiện nay là riêng tư, bạn sẽ phải làm cho chúng trở thành công cộng nếu bạn muốn lưu trữ một trang web để mọi người có thể truy cập. Hãy nhấn vào liên kết Thay đổi (Change) như hình trên để thực hiện điều này. 
(Đây chính là lý do tại sao bạn nên tạo thư mục công cộng để chứa file, bởi nếu tải lên riêng lẻ bạn sẽ phải cài đặt cho từng file như trên rất mất thời gian).

5. Trên cửa sổ pop-up tiếp theo, chọn tùy chọn mà bạn muốn. Ở đây, đã chọn công khai trên web (Public on the web) nhưng bạn cũng có thể chọn Anyone with the link nếu bạn muốn chia sẻ các trang web chỉ với một nhóm được lựa chọn của riêng bạn. Phải biết rằng, bất cứ ai cũng có thể xem trang web này nếu họ có liên kết và họ cũng không cần đăng nhập Google để xem.

- Như vậy là bạn đã tạo được một thư mục để chưa các file của bạn rồi công việc tiếp theo là làm thế nào để Upload file và sử dụng link của nó. Để làm được điều đó ta tiến hành bước tiếp theo nha.

» TẢI VÀ LẤY LINK FILE CỦA BẠN

6. Bấm vào nút tải lên bên trái và chọn tải lên dạng tệp hay thư mục ở ví dụ này mình chọn tải lên một tệp (tất nhiên bạn có thể chọn tải lên cả một thư mục).
- Sau đó chọn file để tải lên.

7. Sau khi tải lên bạn tiếp tục click chuột  phải vào file cần lấy link sau đó vào Chia sẻ (Share) => Chia sẻ (Share)

- Khi đó có một cửa sổ popup mở ra các bạn hãy bấm vào Thay đổi  để cài đặt chía sẻ là Công khai trên web để tất cả mọi người đều có thể xem nó.

Bước 4: Chuyển đổi link thành link trực tiếp để sử dụng.


- Hãy Copy Liên kết chia sẻ đó bạn sẽ được một link có dạng tương tự như bên dưới:
https://drive.google.com/file/d/0B23iNT4ecDGWTUp0NXllSHRmYmc/edit?usp=sharing

- Bạn chỉ cần chú ý cho mình phần màu đỏ như sau 0B23iNT4ecDGWTUp0NXllSHRmYmc. Đây là phần đường dẫn của file khi chuyển đổi sang file xem trực tiếp.

- Để sử dụng link với nội dung thu gọn bạn thêm phần màu đỏ ở trên vào sau đường dẫn sau:
https://googledrive.com/host/
- Khi đó các bạn sẽ được một link mới như sau:
https://googledrive.com/host/0B23iNT4ecDGWTUp0NXllSHRmYmc
Giờ hãy nhớ link này để tiến hành bước tiếp theo nha các bạn.

Bước 5: Nhúng file bạn cần vào bài viết.

Bạn hãy Tạo một bài viết mới - Bấm vào phần HTML của bài viết và chèn đoạn mã nhúng bên dưới vào đó.
<iframe src="https://googledrive.com/host/0B23iNT4ecDGWTUp0NXllSHRmYmc" style="width:650px; height:550px;" frameborder="0"></iframe>

Tùy chỉnh:
* https://googledrive.com/host/0B23iNT4ecDGWTUp0NXllSHRmYmc Chính là link bạn đã chỉnh sửa ở bước trên.
* width:650px; Là chiều rộng của file khi chèn vào trong blog của bạn.
* height:550px; Là chiều cao của file khi chèn vào trong blog của bạn.
Giờ hãy xuất bản bài đăng và xem thành quả bạn đã làm được nha. Rất đẹp và hấp dẫn.

Thứ Tư, 24 tháng 8, 2016

Chia sẻ template Blog Tube cho blogger

BlogTube là Video Blogger chuyên nghiệp được thiết kế cho các trang web video , cổng thông tin phim video blog.

Mẫu này sẽ giúp bạn thiết lập một trang web video chuyên nghiệp một cách nhanh chóng . Nó được lấy cảm hứng từ các trang web phổ biến như YouTube , Vimeo và Dailymotion . Không có hai ý kiến ​​để nói rằng nó là chủ đề Video Blogger mạnh nhất bao giờ hết. Đó là nhanh chóng , đáp ứng, tối thiểu và đóng gói với tấn các tính năng cần thiết để thiết lập một trang web video chuyên nghiệp.

Hướng dẫn:

1. Cài đặt: tương tự như các template khác (cài đặt bằng file: "Videoism-Blogger-Template.xml")
Link tải về: Template BlogTube
2. Cách thêm Video:
2.1. Cách 1: Để hiển thị video , bạn phải sao chép và dán URL nhúng video trong bài viết của mình . Tuy nhiên , nó chỉ hỗ trợ tính năng tự động cho YouTube và Dailymotion. 

Vào mục đăng tin và nhúng code có dạng như sau:

<iframe allowfullscreen="" frameborder="0" height="320" src="http://www.youtube.com/embed/BCsfeGiZvgA" width="100%"> 

2.2. Cách 2: Nhấp vào icon  "Chèn video" trong phần đăng tin của Blog và dán link Youtube hoặc link Dailymotion vào ==> nhấn "Chọn" là xong.
3. Cách thêm mô tả cho Video:
Trong video của bạn, bạn có thể nhận thấy một văn bản gọi là " Mô tả". Để kích hoạt tính năng này bạn vào Blogger >> Cài đặt >> tính tìm kiếm >> Mô tả >> Có >> Lưu.


Bây giờ khi viết bài mới, bạn phải thêm "Mô tả Tìm kiếm" để hiển thị nó trong bài viết của bạn.

3. Tùy chỉnh Video Slider:
Video Slider hỗ trợ cho Vimeo và YouTube. Để thực hiện bạn vào: Blogger > Template > Edit HTML  và tìm kiếm code sau:  <ul id='mbl_playlist'>


Bây giờ với việc tìm kiếm các mã trên, bạn sẽ nhận thấy một vài link URL của Vimeo Video, thay thế chúng với URL video Vimeo hoặc URL của video YouTube và lưu mẫu của bạn.
4. Tùy chỉnh khu vực nhãn "Feature":
Đi đến Blogger.com ›› Web của bạn ›› Bố cục ›› Thêm tiện ích ›› thêm HTML/JavaScript và dán code sau vào HTML Text box:
<script style='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src='/feeds/posts/summary/-/Feature?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Lưu ý: Thay Feature bằng nhãn của bạn muốn hiển thị. Lưu lại và thưởng thức.

Thanks.

Thứ Năm, 18 tháng 8, 2016

Xóa bỏ dòng chữ 'Cung cấp bởi Blogger'

Dòng chữ 'Cung cấp bởi Blogger' (Powered by Blogger) chính là Attribution widget - một tiện ích được tích hợp sẵn trong blogspot mà khi vào phần bố cục (layout) cũng không xóa được.
Để xóa được ta sẽ làm theo cách sau:

1. Đăng nhập Blog > Vào Mẫu > Chỉnh sửa HTML > Ấn Ctrl F tìm chữ 'Attribution'
2. Tiếp theo để ý dòng
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

3. Thay từ true thành false rồi lưu mẫu lại.

4. Cuối cùng vào phần Bố cục, mở tiện ích [Định cấu hình Thuộc tính] Cung cấp bởi blogger . Lúc này ta sẽ thấy đã có thêm chữ Xóa bỏ, ấn Xóa bỏ và lưu lại là xong.
Thanks,

Thứ Tư, 17 tháng 8, 2016

Thêm widget bài viết ngẫu nhiên (Random post) cho Blogspot (có hiển thị ảnh đại diện)

Cũng tương tự như bài viết trước đây AgoNews.com đã hướng dẫn: "Thêm widget bài viết ngẫu nhiên (Random post) cho Blogspot (không hiển thị ảnh đại diện)". Hôm nay, AgoNews.com cũng xin hướng dẫn cách làm tương tự, nhưng có hiển thị ảnh đại diện.

Cách thực hiện

B1: Đăng nhập blogspot => Bố cục => Thêm tiện ích rồi Chọn Tiện ích HTML/JavaScript 
B2: Copy đoạn code bên duwois vào tiện ích HTML/JavaScript nhấn lưu

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=10;
var rdp_snippet_length=90;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh3.googleusercontent.com/2aXi4H7DA_-Wmqgn9Dk0sXVdmti_gTGvfjgF7J_nGEyHy4phPzg4oAz_nJo3kUzgO9w4MPhin_KjMFZPWWMzkUyWBEhpmHMnnHHx15YE3QPwbILkg6rweza2oyG2aE3D5OZJ1vvu8kkjMJjfy6oSEOUh8FCv3R4dIcaFFDBssrKU7dQJLSI28Vw15LFfCTAKSA5PP7BMS3gxcPkCxY7o_A1j7GCY_3u8HempWGaOt8hU2d6fcNNDlg97peDX8oIHZhISZxJCuypm1f1Y1jjc21UR_cXD5VdQvjZxshqFOxr5g_fHkuKF0ch4o7fei0_bfVB4B9jB3Mf-FOyFlPljxrLgvzg-ZZh1YsvakTfIyYRxFAmgeFTippfDwazSfOBkRh51yzDlDofpes4aKIGTYatU1hVbsLkosljODI9Z9L5-R2ulWI9WvLg0irXshkfvjtauRDVprn47bB_TuxDeAbQiULAz6kZuurOWhC60DKr1Z948MuB9zpzWtxkup1Ezx6ZyPvbgcjvXZT_qkZkHgjwJcTcXtPo8OdLbecrb70CyfAzxRnURXf2ggy6_aQZu6MniiBH5ZA6qF0zvYSoadzu8vc973dU=s128-no"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Chú ý: 

  • Thay 10 bằng số bài viết bạn muốn hiển thị
  • 90 là số ký tự của đoạn trích dẫn nội dung bài đăng. 
  • Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.
Thanks!

Hướng dẫn hiển thị bài viết theo nhãn trên trang chủ bằng rss (không hiển thị ảnh đại diện)

Chào các bạn! Hiển thị bài viết trên trang chủ theo nhãn cho blogger khá quan trọng, ngoài việc giúp cho blog trở nên chuyên nghiệp nó còn giúp ta phân loại các mục bài viết dễ dàng, khoa học, người viết cũng dễ tiếp cận hơn với các bài đăng trên các blog có nhiều bài viết, không mất công tìm kiếm. Có rất nhiều cách để hiển thị các bài viết lên trang chủ theo nhãn cho blogspot, đa số đều chèn css và dễ dàng tùy biến nhưng đôi khi tôc độ load trang cũng giảm đáng kể đối với các đoạn mã dài và nặng.

Liệu có một cách khác đơn giản hơn ngoài việc chèn code không? Chắc chắn rồi, blogger luôn dễ tùy biến. Hôm nay AgoNews.com sẽ hướng dẫn các bạn chèn tiện ích hiển thị bài viết theo nhãn ngay trên các tiện ích có sẵn của blogger. Các bước rất đơn giản.
Bước 1: Đăng nhập blogger
Bước 2: Chọn Bố cục và chọn thêm tiện ích
PicsArt_03-28-08.26.09
Thêm tiện ích
Bước 3: Chọn tiện ích
PicsArt_03-29-06.42.29
Chọn Nguồn cấp

Bước 4: Sao chép thẻ này và dán vào tiện ích vừa chọn nha!
http://agonews.com/feeds/posts/default/-/Khoa%20h%E1%
 Trong đó:
http://agonews.com ta thay bằng url trang blog của các bạn
Khoa%20h%E1% là nhãn để hiển thị, bạn thay bằng nhãn của bạn nha.



Nhấn "Tiếp tục" sẽ hiện ra một bảng như này để cho anh em tùy biến.


Tất cả chỉ có vậy thôi! Rất dễ dàng.

Thanks

Tạo nút Xem tin Ngẫu nhiên cho Blogspot

Hôm nay AgoNews.com sẽ hướng dẫn các bạn cách làm một thủ thuật đến Bài viết ngẫu nhiên/Random Post cho Blogspot. Đây là thủ thuật blog cực kỳ thú vị và mang đến nhiều trải nghiệm cho người dùng, giúp tăng lượt xem và tính tương tác của người dùng trên website.

Với thủ thuật blog này, khi người dùng vào website, nếu họ không biết xem nội dung gì...thì nút này rất có ích với họ. Nó giống như trò chơi xổ số vậy! Rất thú vị và tăng tính tương tác cho người dùng.

Để thực hiện thủ thuật này [Tips] - Nút bài viết ngẫu nhiên/Random Post cho Blogspot Blogger V1, các bạn chỉ cần làm theo các bước sau đây.

Chèn đoạn mã code sau vào HTML của website hoặc một Widget HTML/Javascript


Đầu tiên các bạn vào Blog Title → Layout → Add Widget → HTML/JavaScript. Và copy đoạn mã code sau đây vào và Save As hay Lưu lại nhé!
----------------------------------------------------------------
<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>
<center><div id="abt-random"></div></center>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Xem ngay...'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
----------------------------------------------------------------
Nhấn nút save và thưởng thức nhé!
Thanks.

Thêm widget bài viết ngẫu nhiên (Random post) cho Blogspot (không hiển thị ảnh đại diện)

Với widget bài viết ngẫu nhiên (Random post), sẽ giúp tăng tỉ lệ giúp người xem đến 1 liên kết khác trong blogspot của bạn, đồng nghĩa là tăng lượt view, thời gian view và giảm tỉ lệ thoát cho web của bạn.

Vậy làm thế nào để tạo widget bài viết ngẫu nhiên?

- Đầu tiên hãy vào trang quản trị tại blogger.com

- Tiếp tục chọn vào Bố cục (Layout), chọn thêm tiện ích trên thanh sidebar của bạn, và chọn HTML/JavaScript nhé.
- Thêm đoạn code này vào phần nội dung và lưu lại:
----------------------------------------------------------------

<style type="text/css">
.noop-random-posts ul li {
    list-style-image: url("http://2.bp.blogspot.com/-90ErnmngIVo/TyPTnufu8cI/AAAAAAAAADs/ndQtxxa6kkI/s1600/tick+list+style.png");
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=15;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

----------------------------------------------------------------
- Sau khi lưu lại thì coi như bạn đã hoàn thành, đã có widget bài viết ngẫu nhiên cho blogspot của bạn!
- Thanks các bạn đã xem bài này.


Code Breaking News Widget (Tin mới, Tin tiêu điểm) Đẹp_chạy ngang cho Blogspot

Ở nhiều trang tin tức người ta thường có 1 hoặc nhiều widget chạy ngang điểm những tin tức mới những bài viết mới và tác dụng của nó sẽ kéo thành viên ở lại trang lâu hơn bởi những tin nóng những tin hay mà nếu như bình thường người xem sẽ không để ý.
Nếu dạo qua các trang tin tức các bạn có thể thấy một thanh ngang được đặt lên đầu trang với tiêu đề là “Tin mới”, “Tiêu điểm”,… hiển thị các bài viết mới với hiệu ứng load sinh động rất thu hút người đọc. Đó gọi là Breaking News Widget (hay Widget Tin tức mới).

Bạn muốn Blog của mình cũng làm được như thế? Bài viết này sẽ hướng dẫn các bạn thực hiện làm một Breaking News Widget như sau:

Tạo Headline Breaking News cho Blog


Bước 1: Vào phần Chỉnh sửa HTML
Bước 2: Copy đoạn CSS sau vào trước thẻ </head>

<style type='text/css'>
#headlinenews {
position: relative;
background: #fff;
border-bottom: 5px solid #5FC6EB;
border-top: 5px solid #5FC6EB;
display: block;
height: 22px;
line-height: 22px;
overflow: hidden;
margin: 0 auto 20px;
padding: 5px 30px;
width: 980px;
}
#news {
float: left;
margin-left: 90px;
font-size: 12px;
}
#news a {
background: none !important;
color: #5FC6EB !important;
font: bold 12px/22px Tahoma;
text-decoration: none;
}
.titlenews {
background: #5FC6EB;
color: #fff;
display: block;
float: left;
font: bold 12px/22px Arial;
padding: 9px;
margin-top: -10px;
position: absolute;
}
ul.shsocial {
background#34495e;
float: right;
margin: -8px 0;
}
ul.shsocial li {
float: left;
list-style: none outside none;
border: none;
}
ul.shsocial li a {
background-color: transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:34px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a {
background-position: 0 0
}
ul.shsocial li.gp a {
background-position: -96px 0
}
ul.shsocial li.rs a {
background-position: -192px 0
}
ul.shsocial li.tw a {
background-position: -256px 0
}
ul.shsocial li.fb a:hover {
background-position: 0 -32px
}
ul.shsocial li.gp a:hover {
background-position: -96px -32px
}
ul.shsocial li.rs a:hover {
background-position: -192px -32px
}
ul.shsocial li.tw a:hover {
background-position: -256px -32px
}
</style>

<script src='http://google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA' type='text/javascript'/>
<script src='http://googledrive.com/host/0B_6O--IFsYfoc0dhYW1rOXRBMXc' type='text/javascript'/>
Bước 3: Lưu mẫu

Bước 4: Bạn vào Bố cục => Thêm tiện ích => HTML/Javascrip và chèn vào:
<div id='headlinenews'>
<span class='titlenews'>Bài viết mới</span>
<div id='news'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 5000, "_new")
cssfeed.addFeed("Feed Blog", "http://
www.agonews.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("span")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<ul class='shsocial'>
<li class='fb'>
<a href='
http://www.facebook.com/' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='
https://plus.google.com/' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='
http://twitter.com/' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='
http://feeds.feedburner.com/' target='_blank' title='rss'>
</a></li>
</ul>
</div>
– Thay các trang mạng xã hội(màu vàng) tương ứng của bạn
– Thay www.agonews.com thành địa chỉ blog của bạn
Chú ý
Nên để Widget ở vị trí phía trên Bài viết ( dưới header) vì độ dài cần thiết cho Breaking news là khá lớn.
Bước 5: Lưu Widget lại
Chúc bạn thành công!