Tùy chỉnh sidebar cho blogspot (Thân web phải)

Tiếp theo seri các bài hướng dẫn tự thiết kế Blogspot, hôm nay mình sẽ hướn dẫn các bạn tùy chỉnh sidebar trong blogspot (Thân web phải) để sao cho đẹp mà lại cực kỳ dễ làm nhé. Sidebar chăc ai cũng biết đó là cột phụ bên phải web phải không, tuy nhiên nếu ai theo dõi seri tự thiết kế blogspot của mình thì mình còn gọi nó là Thân web phải cho dễ hiểu. Giờ bắt đầu nào...

Tùy chỉnh sidebar cho blogspot (Thân web phải)

Phần Tùy chỉnh sidebar cho blogspot này mình làm khá đơn giản. Chỉ việc vào Bố cục --> Layout Thân web phải --> Thêm tiện ích

Ở Thân web phải mình chọn bài đăng nổi bật, bài đăng phổ biến và HTML/Javascript.
Trước tiên tạo một HTML/Javascript trước nhé:
Vào Bố cục --> Layout Thân web phải --> Thêm tiện ích --> HTML/Javascript
Mình sẽ cho phần này hiển thị 3 bài viết trong 1 chuyên mục mà mình đã có sẵn.
Tiêu đề: các bạn điền gì cũng được, tùy. (Mình điền là Thủ thuật Blogspot)
Nội dung: copy paste đoạn sau vô:

<style>
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:72px; /* Thumbnail height */
width:72px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs { 
text-align: justify;
float: left;
width: 98%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
    text-decoration: none;
    color: #2e91ee;}
#label_with_thumbs a:link {
    text-decoration: none;
    color: #2e91ee;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3ZIZYg-07-J-RDbXr-vbLo0KsV510PnTRnma5xYazZS8LTw-dpcVI2s2qZoJgR4B2rqtH_Dy7IAT2r04GjKODQKRvNWL41EqfTZXAwPfTb3gwCxLrhgsuxRxANqHrk1VBCmYYMoo0Mg/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Blogspot?published&alt=json-in-script&callback=labelthumbs"></script>

Trong đó chú ý mấy chỗ chữ đỏ và chữ xanh mình đánh dấu nhé:
var numposts = 3 - Thay thế số 5 là số bài viết bạn muốn hiển thị.

/feeds/posts/default/-/Blogspot - Đổi Blogspot thành tên Label bạn muốn hiển thị.

Nếu các bạn muốn hiển thị các bài mới nhất của blog thì xóa-/Blogspot đi là được. Lúc đó code nó sẽ như thế này:

<script type="text/javascript" src="/feeds/posts/default?published&alt=json-in-script&callback=labelthumbs"></script>

var showpostsummary = false; - không hiển thị đoạn mô tả, nếu muốn thì thay false bằng true.
var numchars = 200; Hiển thị 200 ký tự trong đoạn mô tả, có thể điều chỉnh để rút ngắn đoạn mô tả hoặc tăng thêm.

Tàm tạm rồi nhỉ, tiếp theo các bạn Thêm tiện ích --> Bài đăng nổi bật và Thêm tiện ích --> Bài đăng phổ biến. Phần này dễ nên mình không hướng dẫn các bạn chỉ việc chọn vài lựa chọn trong đó là ok thôi.

Ngoài ra, trong phần bài đăng phổ biến bạn thấy nó không được đẹp, chúng ta có thể thêm đoạn CSS sau để nó hiển thị giống như cái widget mới tạo bằng HTML/Javascript phía trên.

.widget-content li {
list-style:none;
}
.PopularPosts li {
margin-left:-20px;
}
.PopularPosts a {
text-decoration: none;
}
.PopularPosts img {
border-radius: 4px;
border:1px solid #d6dde1;
}

Sau khi thêm widget, các bạn sẽ thấy phần tiêu đề của widget không được đẹp. Để thay đổi thì hơi thủ công tý nhưng cũng dễ thôi.

Thêm đoạn CSS sau vào trong <b:skin>:

.widget h2 {
color:white;
background: red;
border-bottom:2px solid black;
margin-top: 10px;
padding: 8px;
}

Vậy là có ngay một phần Thân web phải y chang như blogvuicuoilen rồi đấy

Hiển thị bài viết ngẫu nhiên trong Blogspot

Bounus thêm cho bạn nào rảnh nhé, đó là thêm widget hiển thị bài viết ngẫu nhiên ở sidebar. Bài viết ngẫu nhiên trong trang là một thứ rất hên xui nhưng cũng rất hay. Đôi khi hên thì nó hiển thị đúng cái mà người đọc cần mà xui thì đúng cái người đọc ghét. Nói chung là hên xui thì điều hướng không được tốt nhưng .... mình thích.

Giờ để có một widget bài viết ngẫu nhiên trên trang các bạn tạo một widget HTML/Javascript trong phần Thân web phải:
Tiêu đề: Bài viết ngẫu nhiên
Nội dung: paste đoạn code sau vào

<style>
#random-posts img {
border-radius: 4px;
border:1px solid #d6dde1;
color:#dddddd;
float: left;
margin-right: 5px;
margin-left: -3px;
width: 70px;
height: 70px;
padding: 3px;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 16px;
padding: 3px auto 5px;
text-decoration: none;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 3;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjpXW_CAmgVTlL8TFuGLHvbyYKngYOlXfiQ-Pndm9kEdXSZLGvJKTHmSrzK2lv_FSmf9ewXLYp_HSjI1_LB2-77ThkXxK_v-2JawEOQ-7GEB-X2ivDLShrIYYpOcdMc_c8mzU1lV2dEEw/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Một vài chú ý phần chữ đỏ:
width: 70px; (Chiều dài của ảnh thumb)
height: 70px; (Chiều rộng của ảnh thumb)
var randomposts_number = 3; (thay số 3 bằng số bài muốn hiển thị trên web)
var randomposts_chars = 0; (Thay số 0 bằng số ký tự mô tả bài viết)
var randomposts_details = 'no'; (thay no bằng yes để hiển thị phần mô tả sau tiêu đề)
Nếu các bạn không để phần mô tả nó sẽ không hiện gì nhưng có " ... " ở chỗ mô tả. Để bỏ cái ... này các bạn xóa phần này đi là ok: <br/><div class="random-summary">' + randomposts_snippet + '</div>

Một vài chú ý phần chữ màu xanh:
Nếu các bạn muốn hiển thị bài viết ngẫu nhiên trong 1 label nào đó, hãy sửa 2 chỗ chữ màu xanh phía trên một chút feeds/posts/default sửa thành feeds/posts/default/-/ten-label
Ví dụ hiển thị bài viết ngẫu nhiên trong chuyên mục Blogspot thì đổi 2 chỗ màu xanh thành feeds/posts/default/-/Blogspot
Hưởng thụ thành quả thôi nào:

Lời khuyên, mình thấy phần hiển thị bài viết theo chuyên mục khá ok còn phần hiển thị bài viết ngẫu nhiên load hơi lâu. Vì thế nếu bạn nào không thích web load lâu thì không nên để phần bài viết ngẫu nhiên nhé.
xong ! , bạn nào không làm dược thì hỏi nhá

Tạo hộp tìm kiếm đa năng cho blog

Để tạo điều kiện cho người truy cập có thể dễ dàng tìm kiếm thông tin, rất cần có "Hộp tìm kiếm" (Box search) trong mọi trang web, blog. Tiện ích tìm kiếm nội bộ blog của Blogspot đã có sẵn, và một số template cũng có sẵn tiện ích này. Nhưng, kết quả tìm kiếm rất hạn chế, không chính xác và nhiều khi không hoạt động.

     Hôm nay, Caocongkien 360, giới thiệu với các bạn hộp tìm kiếm đa năng. Ưu điểm nổi bật là có thể tìm kiếm chính xác các từ khóa liên quan trong blog, đồng thời tích hợp thêm nút chia sẻ lên các mạng xã hội. Nếu muốn chuyển sang tìm kiếm trên Google, chỉ cần đánh dấu kiểm vào "Google.com.vn". Các bạn có thể thấy và thử nghiệm ngay trên đầu cột sidebar của trang này.

Cách tạo hộp tìm kiếm đa năng tích hợp nút chia sẻ:

 - Đăng nhập vào blog.
 - Vào "Bố cục", bấm tiếp "Thêm tiện ích" [1] (nên chọn vị trí "Thêm tiện ích" ở bên tay phải và trên cùng của cột sidebar).

 - Trong bảng tiện ích hiện ra, chọn HTML/Javascript [2] (ảnh dưới).

-Tại giao diện "Định cấu hình HTML/JavaScript" (ảnh trên) - nhập tiêu đề và dán toàn bộ code trong khung dưới vào phần "nội dung". 

<form method=get action="http://www.google.com/search" class="googlesearch">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<table align="center"><tr><td>
</td>
<td class="bodyText">
<input type="hidden" name="domains" value="caocongkien.blogspot.com" />
<input type="radio" name="sitesearch" value="" />Google.com.vn
<input type="radio" name="sitesearch" value="caocongkien.blogspot.com" checked />Caocongkien 360<br />
<input type="text" name="q" size="28" maxlength="255" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value="Nhập từ khóa..." />
<input class="button" type="submit" name="btng" value="Tìm kiếm" /></td></tr></table></form>

<div style="border-style:ridge; width:280px; border-width:0px; border-color:dede; margin:1px 0px 1px 9px; padding:1px;"><div style="background-color:#FFFFFF; style="border:lime 1px dashed;margin:1px;padding:0px" align="left"> 

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-527a92ec749b0e6e"></script>

</div>

(Đoạn code trên Caocongkien 360 sưu tầm từ một trang web của nước ngoài và tích hợp thêm tiện ích chia sẻ)
 Lưu ý:  
 - Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
- Thay caocongkien.blogspot.com thành link blog (không cần http://) của các bạn và thay Caocongkien 360 thành tên blog của các bạn.
- Bấm "Lưu" [3] và định vị lại tiện ích vừa tạo nếu cần thiết. 
- Bước cuối cùng bấm "Lưu sắp xếp" để hoàn tất và trở lại trang chủ xem kết quả.
P/S: Phần code nằm trong nền màu xanh là code để hiển thị các nút chia sẻ lên các mạng xã hội. Bạn nào không muốn sử dụng các nút này thì xóa bỏ đoạn code nằm trong nền màu xanh là được. 
Chúc các bạn thành công! 

sưu tầm

Tạo menu đẹp đặt tại Sidebar cho blog

Có rất nhiều cách để tạo một menu đặt tại Sidebar, từ đơn giản đến phức tạp, với cách tạo Menu đặt tại Sidebar như dưới ban chỉ cần copy rồi dán code vào tiện ích HTML/Script là xong, tùy thuộc vào bố cục cũng như màu sắc của blog mà bạn chỉnh sửa cho phù hợp.

Menu kiểu này giống như dạng Label, tuy nhiên với Label bạn chỉ có thể tùy chọn thêm hoặc bớt các Label và sắp xếp theo thứ tự Alphabet hoặc theo số lượng bài trong label mà không thể tùy chọn sắp xếp theo ý thích. Với cách sau ngoài các tùy chọn trên bạn hoàn toàn có thể sắp đặt chúng theo thứ tự mà bạn lựa chọn.

Bước 1 . Tạo Menu

1- Đăng nhập vào Blogger Dashboard

2- Chọn Bố cục (Layout)

3- Bấm vào Thêm Tiện ích (Add A Gadget) và chọn HTML/JavaScript sau đó copy đoạn code dưới dán vào trong vùng HTML/JavaScript Content.

<style type="text/css">
/* Made By AllBlogTools.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #3CE612; /* Menu Font Color */
background-color: #9C12E6; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none; 
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #A204C1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #CA12E6; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #24EDEA;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Main Menu</div>
<ul>
<a href="http://namkna.blogspot.com/">Trang Chủ</a>
<a href="http://namkna.blogspot.com/2011/01/phim.html">Phim Online</a>
<a href="http://namkna.blogspot.com/search/label/Love%20-%20Friend">Love Story</a>
<a href="http://namkna.blogspot.com/search/label/H%E1%BB%8Dc%20T%E1%BA%ADp">Học Tập</a>
<a href="http://namkna.blogspot.com/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m">Phần Mềm</a>
<a href="#">Edit</a> 
</div>
</div>

Tương tự bạn copy giống như các dòng màu đỏ trên để thêm một danh mục menu (element) và thay đổi Edit thành đoạn text hiển thị mục và thay đổi # tthành url tương ứng với nó.

Bước 2 . Tùy chỉnh màu sắc cho Menu

Như đoạn code trên bạn thấy một số dòng in đậm và được đánh dấu bằng các màu sắc khác nhau, đó là các đoạn code mô tả màu các thành phần trong menu như hình:

- Bạn hãy sử dụng chức năng COLOR CODES để lấy code màu sắc ưa thích phù hợp với màu sắc của mẫu blogger template để thay thế.

- Ví dụ khi bạn muốn thay đổi màu sắc của background color đối với menu này, bạn tìm dòng mã:

background-color: #2175bc; /*Menu background Color */ 

- Thay đổi đoạn mã màu sắc: : #2175bc mà bạn lựa chọn từ Color code hoặc Html hex colors generator