Showing posts with label làm đẹp blogspot. Show all posts

Hướng dẩn chèn comment của facebook vào blogspot

Facebook đã trở nên phổ biến và quen thuộc mỗi khi chúng ta muốn lên đây để ... "chém gió". Và hôm nay mình sẽ hướng dẫn cho các bạn đem cái công cụ "chém gió" này vào blog của các bạn. Với việc thay thế comment của blogspot bằng comment của facebook hy vọng blog của các bạn sẽ sôi động hơn.


Có thể nói thủ thuật chèn comment của facebook vào mỗi bài viết blogspot cũng không mới lạ gì, 1 số blog thủ thuật nước ngoài đã đăng tải rồi (các bạn có thể vào google search với từ khóa facebook comments for blogger là có kết quả ngay). Tuy nhiên phải nói là cách thực hiện nó cũng khá phức tạp. Ngay cả mình cũng chưa thực hiện thành công khi làm theo các bước hướng dẫn. Có lần mình đã cố thử vào trang http://developers.facebook.com/setup/ mà không được, không biết có phải facebook hạn chế đối với user ở Viện Nam ko nữa.

Và ở thủ thuật này, các bạn sẽ chỉ cần copy và paste code là xong, không cần phải thiết lập hay tạo App trên facebook.

Xem DEMO dưới bài viết này

Bước đầu tiên bạn phải làm là đóng comment của blogger lại( có thể bỏ qua bước này). Các bước thực hiện như hình bên dưới :


- Save cài đặt lại.

Bước 2 : chèn code của thủ thuật vào template.
1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
- data-width là độ rộng của comment box.
- data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
- data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.

3. Chèn đoạn code bên dưới vào sau thẻ <body>
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

4. Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>


5. Chèn ngay sau nó đoạn code bên dưới :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

6. Save template.

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

Sưu tầm

Sử dụng Template Designer để tùy biết giao diện blogspot


Tôi tham gia blogger từ đầu năm nay.Qua một khoảng thời gian đủ ngắn khi gia nhập môi trường này, tôi cũng 'ngộ' ra được một vài điều nho nhỏ giúp cuộc sống của mình trở nên thú vị hơn.

Blogger - ngoài hiệu ứng làm cho con người ta chết mê chết mệt ra thì nó chẳng có mấy điều là thú vị cả. Nhất là mấy vấn đề liên quan đến giao diện hay một vài tiện ích html/javascript khó hiểu, gây ra cho tôi, người mới bước chân vào viết blog, rất nhiều rắc rối mà gần như là không thể nào khắc phục nổi.

Và thế là Tôi thường xuyên phải phục hồi lại hoàn toàn giao diện ban đầu ( số lần phục hồi giao diện còn nhiều hơn cả số bài viết đã đăng trên blog! ) vì luôn gặp phải bế tắc.

Công việc chỉ trở nên nhẹ nhàng hơn khi một dịp tôi định chỉnh sửa màu nền cho blog của mình nhưng lại bắt gặp đoạn css như thế này:

background:$(body.background);
font: $(body.font);
color: $(body.text.color);
Nó khác hẳn với những gì mà tôi từng biết với đống kiến thức nông cạn của mình về CSS. Vậy là tôi lao vào tìm hiểu và thấy các thuộc tính đó xuất hiện sau thẻ <b:skin><=!=[=C=D=A=T=A=[ 

* VARIABLE DEFINITIONS
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#667fdd"/>
<Variable name="body.font" description="Font" type="font"default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#858585" value="#656565"/>
Té ra, thì đó là các biến giúp chúng ta dễ dàng tùy biến giao diện hơn khi sử dụng Template Designer.


GIỚI THIỆU MỘT CHÚT VỀ TEMPLATE DESIGNER

Được hiểu là công cụ chỉnh sửa giao diện thông minh, giúp tùy biến các thuộc tính về hình nền, độ rộng, link, color.vv..được Blogger tích hợ sẵn giúp bạn dễ dàng chỉnh sửa giao diện blog.

Vì thông thường, ta hay điều chỉnh các thuộc tính như màu sắc, kích thước, kiểu chữ, ... bằng phương pháp chỉnh sử trực tiếp từ mã nguồn, upload template rồi xem thử.

Đối với những ai đã vững rồi thì no vấn đề. Nhưng với những bạn mới thì nó sẽ là tai họa nếu chỉnh sửa 'đống hỗn độn' ấy không đúng hoặc không biết chỉnh sửa ở đâu, vị trí cụ thể nào.

Vì vậy, xin được đóng góp một vài kiến thức cơ bản để sử dụng công cụ này và cũng để bạn có thể khai báo các biến template cho riêng mình nhằm nhanh chóng tùy biến lại giao diện blog mà không cần can thiệp vào code, chỉ cần dùng Template Designer


MỐI LIÊN HỆ GIỮA TEMPLATE DESIGNER VÀ BIẾN

Tôi sẽ giải thích một vài thuộc tính quan trọng trong ví dụ trên: Mỗi thẻ Variable định dạng cho một biến. Các biến được định dạng sẽ được hiển thị tại Design / Template Designer / Advanced (giao diện mới là: Template / Customise / Advance).

  • name: tên của biến (dùng trong code).
  • description: mô tả của biến (dùng hiển thị lên cho người dùng biết trong Template Desinger - Chỗ mà tôi ghi chú là Tên biến ở ảnh trên).
  • type: loại giá trị.
  • default: giá trị mặc định.
  • value: giá trị thực tế.
Để nhóm các biến lại với nhau, ta dùng thẻ <group></group>
  • description: mô tả của nhóm.
  • Selector: phạm vi ảnh hưởng.
Để sử dụng các biến đó, chúng ta chỉ cần tham chiếu đến tên biến trong phần CSS 
/* Body */
body{
background:$(body.background);
font: $(body.font);
color: $(body.text.color);
}


/* Link */
a {
color:$(link.color);
text-decoration:none
}
a:hover, a:active,a:focus {
color:$(link.hover.color);
text-decoration:none
}


/* Heading */
h1, h2, h3, h4, h5, h6{
font:$(heading.font);
}

Biến được tham chiếu có dạng : $(ten_bien). Tên của biến phải khớp với tên của biến đã khai báo trong thuộc tính: name="ten_bien". Lúc này việc chỉnh sửa còn lại rất dễ dàng: sửa và xem trực tiếp ngay phía khung dưới tới chừng nào ưng ý thì thôi.







KHAI BÁO MỘT BIẾN CỦA RIÊNG MÌNH

Phần ở trên tôi chỉ giải thích mối liên hệ giữa các biến template khai báo trong code với những gì hiển thị tại công cụ Template Designer. Sau đây tôi xin lấy một ví dụ về khai báo một biến của riêng tôi. Bạn bỏ code này vào chỗ mà Blogger đã khai báo các biến khác:

<Variable name="my_color" description="Màu của tôi" type="color" default="#D54E1F" value="#D54E1F"/>


Lúc này, trong mã template ở chỗ chèn CSS, tôi sẽ sử dụng biến của tôi như sau:




a {color:$(my_color);}
Còn trong công cụ Template Designer sẽ hiển thị như sau:






Tính năng này vốn đã có từ lâu, trước khi Blogger ra Template Designer, nhưng ít thấy ai để ý và sử dụng.Hi vọng với bài hướng dẫn này sẽ giúp ít nhiều các bạn có thể tùy biến tốt hơn giao diện của mình.

Trích: vnblogspot


Xem thêm: http://kenhdaihoc.com/forum/showthread.php?t=5042#ixzz1ynPAGlZR

Muốn lập trình blogspot thì cần những kiến thức gì?

Lập trình Blogger-Blogspot banner
Blog là một cấu trúc như bao ngôn ngữ lập trình khác. Nếu bạn am hiểu một ngôn ngữ nào đó thì việc vọc Blog với bạn đôi khi lại cực kỳ đơn giản. Nhiều bạn khi làm Blog chỉ nghĩ rằng "Blog của anh này đẹp thật." . Rồi lao đầu vào học HTMLCSS. Nhưng quả thực bạn đã giỏi và làm được như họ. Lý do vì đâu ?

Nguyên nhân chính là bạn chưa hiểu gì về Blog, bạn đã bao giờ thử tự hỏi bản thân rằng mình đã làm ra một template mà không cần sự hộ trợ từ một template đã có sẵn, hay các thủ thuật được cung cấp sẵn trên mạng? Bạn đã đạt được bao nhiêu phần trăm nhận thức sau những gì mình đã làm ?

Chắc chưa thể trả lời ngay được, nhưng câu hỏi đơn giản hơn là bạn đã thuộc bao nhiêu thủ thuật bạn copy về, bao nhiêu thuộc tính của một widget... Bạn nghĩ mình cần bổ sung cái gì là cốt lõi. Nhiều bạn mình gặp đều chỉ chăm chăm tập trung làm một cái Blog cho chính mình từ CSS, HTML để được ca ngợi từ mọi người. Nhưng họ không biết làm sao hiển thị được bài đăng ra ngoài trang của Blog. Hay nói dễ hiểu hơn là họ chỉ làm được trang index.

Không phải những người họ đã biết họ không chỉ các bạn, mà là do chính các bạn tự làm lười mình đi. Hãy thử một lần tự mình search, tự mình kiểm tra, tự mình học hỏi. Làm vậy bạn sẽ mau tiến bộ hơn, mau hiểu hơn... Học theo từng bước sẽ làm bạn cảm thấy tự tin hơn khi làm một template. Trước đây mình ít chuyên sâu vào javascript mà chỉ chạy theo hớt ngọn Jquery. Nhiều các chức năng đơn giản mà Javascript thuần có thể mình vẫn dùng Jquery để thực hiện, làm template nặng trịch. Load rất chậm..Tự đợt đó mình dừng tìm hiểu Jquery luôn, quay về học Javascript từ đâu.

Mình khuyên bạn, nên chọn cho mình một ngôn ngữ căn bản để học và nghiên cứu trước khi vọc Blog. Blog là một cấu trúc XML, khi được biên dịch trên host của Google nó sẽ xuất thành các cấu trúc trang HTML (hay còn gọi là phân trang) theo người thiết kế định nghĩa. Trong đó chỉ tồn tại CSS, HTML, Javascript. Vậy chung quy lại để giỏi về Blog bạn nên học JavaScript đâu tiên. JavaScript coi như một công cụ biến hoá các chức năng trong Blog của bạn một cách kì diệu, còn CSS, HTML chỉ như một chiếc áo và những bộ xương bất động.

Hãy học theo các câu hỏi mình đưa ra, bạn xem mình có thay đổi điều gì không.

Blogger là gì ? Là bao gồm các Widget, các thực thể - LayOut Tag nằm trong nó
Feed là gì ? Là cấu trúc XML, các bạn có thể xem thêm về CallbackVí dụ về json blogger
Blogger không hỗ trợ gì sao? Hỗ trợ đầy ra đấy, chẳng qua bạn không chịu đọc thôi

Mình đã đi theo con đường tự mình xây dựng lên, mình nghĩ có lẽ mình đi đúng và mình muốn chia sẻ. Để có người đam mêm, góp sức cùng mình phát triển blogger Việt theo nhiều hướng tốt đẹp.

Trích: vnblogspot

Topic giới thiệu theme dành cho Blogger [ Đẹp ] - Update liên tục


Xem -Download - Và nhiều hơn nữa tại  topic bày




Nút thích 4 trong 1 bật ra từ bên phải cho blogspot gồm( facebook, twitter, google+ và feed)


 Hôm nay mình hướng dãn các bạn thêm tiện ích nâng cấp của tiện ích cũ, nó bao gồm nút thích Facebook, twitter, google+ và feed

Xem thêm: http://kenhdaihoc.com/forum/showthread.php?t=3928

<style> img,a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 196px; height: 340px; overflow: hidden; } #twitter_div { width: 246px; height: 353px; overflow: hidden; } #google_plus_div { width: 152px; height: 97px; overflow: hidden; margin-left: 50px; margin-top: 10px; } #knfeedburner_div { width: 300px; height: 97px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #kakinetwork_div { width: 300px; height: 97px; overflow: hidden; }/* right side style */
#facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; right: -200px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; left: -2px; top: -3px; } 
#twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; right: -250px; } 
#twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } 
#google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: hidden; width: 152px; height: 97px; position: fixed; right: -154px; } 
#google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; }
 #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -303px; 
} #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } 
#kakinetwork_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } 
#kakinetwork_right img { position: absolute; top: -2px; left: -101px; }/* left side style */
#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; left: -200px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px; } 
#twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px; } 
#twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } 
#google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px; }
 #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; }
 #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -303px; } 
#feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_left img { position: absolute; top: -2px; right: -101px; } 
.box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } 
.enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; }
 .submitbutton { background: #F2F2F2; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> 
<div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheD7U7aQPpD3PgnCJvYZEmTXr68x-WCylWFCZ34xIxWRqvRot3FuTXeVu_GKKBfCpa3UEsIpQgYgNmhPxHO5jFJ8ZVTtLL-u1HawC407jjqoFj-O_LfD6Jnd0u1IQiS6eOQ5zyGFJTtSI/s1600/helperblogger.com-facebook-icon.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkenhdaihoccom&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> </div> </div> </div> 
<div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRYKypqt8y0P9M-j1-__HtWJtGpJVlPx2AdIprX9S_JMD4elMMjPbMVAalSMkG9HQyTHerSl4s7SvdDESACjlq7xeOXCVIEVLPjOipbR6Pfk8OBexjEqNrMBFNLXqL4T_bX2vczSZZ6A/s1600/helperblogger.com-twitter-icon.png"/>
 <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('contact_kdh').start();</script> </div> </div> </div> 
<div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZub9RfTlfx6BCXKIgITX0d6ncuikM1ae2Kh2x1Cg6vvJaPwNGUFe9RkePlRD9eLNJAWfGfC6-LTcnZqe1PiU1KMnhsebVvFfY0UVTIGdWtIWQp-i72c9HdXXQ3FCaMF5koaKTf-oFBpw/s1600/helperblogger.com-google-plus-icon.png"/> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div>
 <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4> 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kenhdaihoc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="kenhdaihoc" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/> </form> 
</center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaECbsBFUImlEnP85f2Xd-wsDHR0jMo0UfDd7N7eVs-oaoaq_Z_P59jXEd7NwgEmtks8rc-tuLwkyW1DgLOEx2DCJNxbbNzNgvuVTBAkwYadnyHVdZ8gqI7DZAK6cfZyFopAfnQ7QAQOs/s1600/helperblogger.com-subscribe-icon.png"/> </div> </div> </div> </div>


Lưu ý: những đoạn mình đánh dấu màu dưới đây bạn hãy thay bằng địa chỉ của bạn nhé
  •  kenhdaihoccom thay đổi với tên Trang facebook của bạn
  •  contact_kdh thay đổi với tên tài khoản Twitter của bạn
  •  kenhdaihoc Thay đổi bằng ID feed của bạn.


[Chia sẻ] - Tạo hộp thoại thông báo cho blog


Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.


Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.


Hình ảnh minh họa từ blog của mình:


- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widgetHTML/Javascript và dán code bên dưới vào :
<style type="text/css">
#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}thu


#thbao-margin {margin: 0 auto;}
.thbao-container {
width:705px;
border: 1px solid #f2b768;
padding: 4px;
font-size:90%;
}
.thbao-header {
background: #ff6734;
color: white;
border:1px solid #ffa789;
padding: 5px 10px;
white-space: nowrap;
}
.thbao-body {
background: #fae9c8;
padding: 5px 10px;
width: 99%;
}
.thbao-close {
float: right;
margin-right: -5px;
}
</style>


<script language="JavaScript">
function hideitem() {
document.getElementById("thbao").style.display="none";
}
//<![CDATA[
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';


tbindex = Math.floor(Math.random() * thbao.length);
//]]>
</script>


<div id="thbao">
<div id="thbao-margin" class="thbao-container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="thbao-header"><b>Note</b></td>
<td class="thbao-body">
<a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span class="thbao-text">


<script type="text/javascript">
document.write(thbao[tbindex]);
</script>


</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.


Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';


Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :
thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';


Như vậy đã hoàn thành. Chúc các bạn thành công.


Nguồn: BlOg FD

Hướng dẩn chèn Facebook Like Box vào web(blog và forum)

Bạn đang là thành viên tích cực trên Facebook? Bạn muốn chia sẻ những thông tin của mình đến tất cả bạn bè? Bạn muốn kết nối và chia sẻ cùng bạn bè trên cộng đồng mạng?

Hiện nay, Facebook cung cấp rất nhiều công cụ để bạn có thể dễ dàng chia sẻ những bài viết, ứng dụng của bạn từ Blog lên Facebook và ngược lại. Những công cụ này đã và đang rất phổ biến và được nhiều Blogger sử dụng để thu hút sự quan tâm của bạn bè trên Facebook, hướng họ đến với Blog của mình.

Một trong những công cụ mà Facebook cung cấp là “Like Box”. Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like” (thích) ngay phía trên hộp thoại.

Để tạo nút Like Box cho Blog, trước tiên bạn cần có một tài khoản trên Facebook
 và bạn cần tạo trang Facebook riêng

Sau khi đã có tài khoản và trang Facebook riêng, bạn vào trang
http://developers.facebook.com/docs/reference/plugins/like-box để bắt đầu.


Bạn chọn vào Like Box trong danh sách Plugin ( xem ảnh)



Tiếp theo là lấy code( Đầu tiên nó sẻ ở trang HTML5, bạn chọn phần IFRAME và copy code)

Bước cuối cùng là chèm vời nơi bạn cần chèn
chúc thành công

Thêm chức năng sửa bài viết nhanh cho blogspot

Có 1 bạn hỏi mình làm cách nào để thêm chức năng sửa bài viết nhanh đối với 1 số theme không có chức năng này. vậy nên mình làm hướng dẩn này để các bạn tham khảo nhé


Vào chỉnh sửa HTML tìm: ( chọn thẻ nơi xem bài viết nhé )
<data:post.title/>
và thêm bên trên code:
<!-- quickedit pencil -->  <b:include data='post' name='postQuickEdit'/>

Chú ý: bạn có thêm chổ khác tùy ý :
Nếu chưa làm được vui lòng rply bên dưới hoặc thảo luận nhanh tại đây: http://kenhdaihoc.com/forum/showthread.php?t=3171

Show Recent Comments - Hiển thị comments mới nhất cho blogspot

Thêm tiện ích  HTML/Javascript và chèn code bên dưới  vào nhé


Demo: http://home.kenhdaihoc.com







Xem thêm: http://kenhdaihoc.com/forum/showthread.php?t=3083

<!--comments mới nhất -->

<script style="text/javascript" src="http://kenhdaihoc.com/blogger/kenhdaihoc-comments.js"></script>
<script style="text/javascript">
var numcomments = 5;// số comments hiển thị
var showcommentdate = true;
var showposttitle = true;
var numchars = 35; // số kí tự hiển thị trên 1 comment
var standardstyling = true;
</script>
<script src="http://home.kenhdaihoc.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
<!-- /comments -->

Thêm nút Google+1, Tweet, Like Facebook,Share theo chiều ngang vào Blogspot

Mặc dù butthons Facebook Like, Tweet  Google+1.... Các nút chia sẻ này có thể được dễ dàng thêm vào bài viết Blogger bằng cách làm theo hướng dẫn của mình, sắp xếp chúng một cách hoàn hảo sao cho hợp với bố cục của mỗi blog.

Để không mất công ngồi giải thích cách sắp xép các nút like hiện tại của bạn,dayto.kdh nghĩ rằng nó dễ dàng hơn thông qua việc cung cấp cho các bạn một Code sẵn có để các bạn sử dụng. Đơn giản chỉ cần loại bỏ các nút like hiện tại của bạn và thêm mã mới.
Bạn có thể xem hình sau để thấy rõ hơn:



Xem thêm: http://kenhdaihoc.com/forum/showthread.php?t=3017


Demo: http://home.kenhdaihoc.com




Cách tiến hành:





  1. Đăng nhập vào Blogspot
  2. Chọn Thiết Kế
  3. Chọn Chỉnh sửa HTML
  4. Chick vào ô Mở rộng tiện ích mẫu (Expand Widget Templates)
  5. Tìm đoạn Code sau ( chú ý có vài cái thẻ như vậy nhé- hãy thử với thẻ khác nếu chưa được)





<data:post.body/>
Thêm bên trên code sau
<!-- AddThis Button BEGIN --><div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f54e84a689419c2' type='text/javascript'/>
<!-- AddThis Button END -->
Xem thêm: http://kenhdaihoc.com/forum/showthread.php?t=3017
Chúc thành công

Popular Posts

Labels