Cách tạo hộp thông tin của Page Facebook vào Web/blogger

Fanpage Facebook  ngày càng trở nên như một thương hiệu làm ăn phát triển. Chỉ cần bò ra $35/ tháng cho công việc quảng bá công việc, bạn có thể thu lại nhiều lợi nhuận từ lượng khách hàng truy cập facebook.

Để kết nối thuận tiện với Website/Blogger để tăng sự chú ý vào công việc trên fanPage, không chỉ ngoài những cái Like thân thiện mà còn ở những dòng tin nhắn, cùng những sự kiện và thông tin để giúp bạn và khách hàng tiếp cận mau mắn.

Dưới đây là hình dạng, kiểu cách của hộp giao tiếp Fanpage Facebook được nhúng trên Website/Blogger mà mình đã làm từ Source code tìm kiếm cách đây vài bữa.

Phần Source Code nầy, mình sử dụng trong thiết kế Web site bằng Blogger Dashboard của Google, tất nhiên là bạn phải biết và đã có sẳn một Google Account.
Việc trước tiên, bạn vào phần Blogger Dashbooard.
Vào bố cục (Layout) sau đó thêm một tiện ích mới, dán code sau và thay đổi địa chỉ Page của bạn là được. Sau đó nhấn Lưu lại nhé.

<center><div class='widget-content'>
<div class="fb-page" 
data-href="https://www.facebook.com/khanhnguyenblogger/" 
data-tabs="messages, timeline, events"
data-small-header="true" 
data-adapt-container-width="true" 
data-hide-cover="false" 
data-show-facepile="false"
data-height="320">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/khanhnguyenblogger/"><a href="https://www.facebook.com/khanhnguyenblogger/">Facebook</a></blockquote></div></div>
<div id="fb-root"></div>
<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 = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></div></center>

Chú ý:
Bạn có thể thay thử một số tham số truy vấn có giá trị True/False và tham số biến data-height để biết thêm hiệu ứng để có một lựa chọn thiết kế phù hợp, bắt mắt.
Thay màu đỏ thành link Fanpage của bạn. Nhớ là FanPage nầy phải có, nếu chưa có tiền mua, bạn cứ thử tự tạo đi, đến phần đăng ký Bank Account thì đừng khai báo bậy vào là được. FanPage của mình cũng làm như vậy đó, chẳng có chết gì đâu, cứ xem như không có tiền thì để vậy chơi thôi, cho biết.

• DEMO

Bạn cứ thử, chỉ cần có gan, chẳng chết ai đâu, nó cho Demo thử nghiệm mà. Chúc các bạn thành công.

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

-->đọc tiếp...

Chèn bài viết liên quan ngay dưới tiêu đề bài cho blogger/ Blogspot

Việc chèn bài viết có liên quan vào trong Web/Blog thì cái nào mà không có. Đó là điều hữu ích cho cả Admin và độc giả. Tuy nhiên, cách cho xuất hiện thường là ở cuối bài viết, hoặc chân trang. Mình tìm được mà Code nầy và có cải tiến lại vài chổ nhầm chia sẽ lại cùng các bạn sử dụng. 

• DEMO

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

Bước 1: Chèn mã code Css sau lên trước thẻ  ]]></b:skin>

.post-ads{padding-top:0}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px} p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}

Bước 2: Thêm JavaScript lên trên thẻ </head> 

<script type='text/javascript'> //<![CDATA[ var titles = new Array();var titlesNum = 0;var urls = new Array();var time = new Array();function related_results_labels(c){for (var b = 0;b < c.feed.entry.length;b++){var d = c.feed.entry[b];titles[titlesNum] = d.title.$t;for (var a = 0;a < d.link.length;a++){if (d.link[a].rel == "alternate"){urls[titlesNum] = d.link[a].href;time[titlesNum] = d.published.$t;titlesNum++;break;}} ;}} function removeRelatedDuplicates(){var b = new Array(0);var c = new Array(0);e = new Array(0);for (var a = 0;a < urls.length;a++){if (!contains(b,urls[a])){b.length += 1;b[b.length - 1] = urls[a];c.length += 1;c[c.length - 1] = titles[a];e.length += 1;e[e.length - 1] = time[a];}} titles = c;urls = b;time = e;} function contains(b,d){for (var c = 0;c < b.length;c++){if (b[c] == d){return true;}} return false;} function printRelatedLabels(a){var y = a.indexOf('?m=0');if (y != -1){a = a.replace(/\?m=0/g,'');} for (var b = 0;b < urls.length;b++){if (urls[b] == a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);}} var c = Math.floor((titles.length - 1) * Math.random());var b = 0;document.write("<ul>");if (titles.length == 0){document.write("<li>Không có bài viết liên quan → </li>");} else{while (b < titles.length && b < 20 && b < maxresults){if (y != -1){urls[c] = urls[c] + '?m=0';} document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8,10) + "/" + time[c].substring(5,7) + "/" + time[c].substring(0,4) + '">' + titles[c] + "</a></li>");if (c < titles.length - 1){c++;} else{c = 0;} b++;}} document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length);} ;//]]> </script>

Bước 3: Tìm đến hàng lệnh <div class='post-header-line-1'/> bằng cách nhấn tổ hợp phím Ctrl+F và dán code sau xuống phía dưới nó:  

<b:if cond="data:blog.pageType == &quot;item&quot;"> </b:if> <br /> <div class="qc-header-post"> <div class="post-ads"> Dán quảng cáo của bạn ở đây </div> <div class="post-right"> <div class="post-excerpt"> <data:post .snippet=""> </data:post></div> <b:if cond="data:blog.pageType == &quot;item&quot;"> &lt;blockquote class="tr_bq" style="background-color: white; border-left-style: solid; border-left-width: 6px; border-radius: 3px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; font-family: cuprum; font-size: 15.4px; line-height: 21.56px; padding: 8px 9px;"&gt; </b:if><br /> <div id="related-posts1"> <h4> <i class="fa fa-bullhorn"> Bài viết liên quan:</i></h4> <b:loop values="data:post.labels" var="label"> <script expr:src="&quot;/feeds/posts/default/-/&quot;+ data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;" type="text/javascript"> </b:loop> <script type='text/javascript'> var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startruongit.net/" style="position: absolute; visibility: hidden;"></a> </b:loop></div> &lt;/blockquote&gt; </div> </div>

Cuối cùng các bạn Lưu mẫu lại và xem kết quả Blogspot. 
Lưu ý với các bạn: Khanhnguyen dùng thẻ Blokquote để thể hiện một bảng đóng khung cho việc xuất dữ liệu của các hàng lệnh. Thẻ Blokquote nầy được mả hóa và in hàng chữ đỏ trên khung Code mà bạn thấy. Nếu muốn thay đổi khung về màu sắc, size chữ, hay kiểu chữ hiển thị...đều được cả.
Chúc các bạn thành công !

Khanhnguyen' s Blog tổng hợp

-->đọc tiếp...

Tạo Widget thống kê cho blogspot

Demo trang thực nghiệm:

• DEMO

Các bước thực hiện như sau:

Bước 1: Đăng nhập vào Blogger Dashboard của  bạn. Tiếp theo bạn vào Layout -  Bố cục

Bước 2: Chọn Thêm Tiện ích (Add Widget)/ chọn Thống kê blog

Chọn kiểu hiển thị (như hình dưới) rồi Save lưu lại.

Lưu ý: Các bạn để ý vào link của Widget các bạn vừa tạo và nhớ cái ID sau cùng của dòng link. Thường thì mặc định của Widgetid=Stats1

Bước 3: Vào  Mẫu Template/ Edit HTML Chọn đến tab chuyển tiện ích chổ có mũi tên màu đỏ chỉ như hình dưới và chọn vào  Stats1

Hoặc dùng tổ hợp phím Ctrl + F tìm kiếm đoạn: b:widget id='Stats1'

Bạn sẽ thấy 1 đoạn code như sau:

<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'> <b:includable id='main'> ........................ </b:includable> </b:widget>

Bạn chép cả đoạn code sau thay vào nó: 

<b:widget id='Stats1' locked='false' title='Thống kê Blogspot' type='Stats' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title'><h2 class='iconthongke'><data:title/></h2></b:if> <div class='widget-content'> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> </b:if> <script type='text/javascript'> function postCount(json){ document.write(&quot;<span class='counts post2'> Tổng số bài viết &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } function numberOfComments(json){ document.write(&quot;<span class='counts comment'> Tổng lượt Comments &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } </script> <script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/> <script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/> </div> </div> </b:includable> </b:widget>

Sau đó bạn tìm đến thẻ </head> và dán code sau lên trước nó 

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'> .Stats img {display:none!important;background-image:none;} .Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;} .Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;} .counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;} .counts .count {display:inline-block;font-size:16px;height:30px; vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;} .counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);} .counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;} .counter-wrapper.text-counter-wrapper:before, .counts:before { display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;} .counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;} .counts.post2:before {content:&quot;\f044&quot;;} .counts.comment:before {content:&quot;\f0e6&quot;;} #Stats1_content {width:auto;height:auto;background-color:#fff;} </style>

Nhấn lưu mẫu và xem kết quả ứng dụng.
Chúc các bạn thành công.

Khanhnguyen' s Blog tổng hợp

-->đọc tiếp...

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

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 feedburner. Google 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

-->đọc tiếp...