Cách khắc phục Lỗi Không Hiện Embedded Comment Form Trong Blogger

Chính mình đã gặp trường hợp này khi triển khai một blog trên blogspot với template của bên thứ 3. Tuy đã vào setting>comments để chọn Embedded below post nhưng vẫn không hiện như mình muốn. Tuy vậy nếu chọn dạng full page và popup thì vẫn ok.
Loay hoay tìm mãi trên mạng để xem có chuyên gia nào có giải pháp hữu hiệu cho vấn đề này không thì đã tìm được câu trả lời như mong muốn từ BloggerBuster, một trong những trang yêu thích của blogviet khi cần các thủ thuật đối với blogger powered blogs.
Hôm nay xin chia sẻ lại cùng các bạn và hy vọng những ai gặp tình trang như mình sẽ biết cách để khắc phục hiệu quả về lỗi comment form nhé.
Với các mẫu do bloggẻ cung cấp thì không cần thủ thuật này vì bạn chỉ cần đăng nhập vào Setting và chọn commént như hình dưới là ok. Tuy nhiên, nhu cầu sử dụng các mẫu đẹp và pro thì đôi khi gặp khó khăn giống như vietad.blogspot.com chẳng hạn. Do đó, để khắc phục các bạn cũng cần có thêm các thủ thuật để nó hiện lên như thông thường:

Bạn hãy đăng nhập vào blogger, đến phần Layout>Edit HTML và nhớ chọn “Expand widget templates” nhé. SAu đó bạn tìm đến đoạn code sau:

<p class=’comment-footer’> <b:if cond=’data:post.allowComments’> <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a> </b:if> </p>

Thay toàn bộ đoạn code đó bằng đoạn code dưới đây:

<p class=’comment-footer’> <b:if cond=’data:post.embedCommentForm’> <b:include data=’post’ name=’comment-form’/> <b:else/> <b:if cond=’data:post.allowComments’> <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a> </b:if> </b:if> </p>

Save Template  và xem thử xem mẫu comment fỏm đã hiện ra hay chưa nhé!
Với một số mẫu blog như vietad.blogspot.com thì không có đoạn code đó, giải pháp sẽ như sau
Bạn có thể làm cách thứ 2 nếu tìm không ra đoạn code ở trên và vietad.blogspot.com cũng nằm trong hoàn cảnh này nên đành áp dụng cách thứ 2 này, đơn giản hơn rất nhiều:
Tìm dòng có chứa đoạn tag như dưới:

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

Ngay sau dòng đó, bạn thêm dòng sau vào:

<b:include data='post' name='comment-form'/>

Sau đó, Save Template như thường và xem mẫu comment form đã hoạt động chưa. Với vietad.blogspot.com thì thủ thuật 2 hoạt động tốt và thủ thuật 1 không hoạt động do không tìm được đoạn code.
Không thể nói cách nào tốt hơn, nó phụ thuộc vào mẫu blog mà bạn đag dùng.Đo đố hãy nhớ cả 2 cách khi bạn sử dụng nhé. Một số mãu của bên thứ 3 đã được tối ưu rồi và tự động mẫu comment form sẽ hiện thị khi bạn chọn như hình trên, tuy nhiên phần lớn là không hoạt động.
Cám ơnAmada và bloggerbuster vè thủ thuật hữu ích này!

Nguồn: Blogger Buster

Đọc thêm »

Tạo copyright và menu mini cuối blog cho Blogspot

Tạo copyright và menu mini cuối blog cho Blogspot

Share |

Mình cũng chỉ là tay ngang mới bước chân vào thế giới Blogspot, tập tành làm blog nên biết gì thì mình chỉ cái đó thôi.
Mã bài viết này mình lấy từ blog của mình và đem lên đây chia sẻ với các bạn thôi chứ ko phải do mình viết đâu, mã cũng tương đối đơn giản và dễ thao tác.
Đầu tiên là khi lấy một theme nào trên mạng đều có hiển thị bản quyền tác giả phía cuối blog, điều này có hơi hạn chế một xíu, có nhiều bạn sẽ ko thích, nên bước đầu tiên là cần phải ẩn hoặc xóa nó đi để blog để blog đẹp hơn một xíu và mang tính riêng của mình hơn. Nó sẽ có dạng như sau:


Vào Thiết kế -> Chỉnh sửa HTML, ko cần chọn Mở rộng tiện ích. Bấm Ctrl + F để tìm dòng chữ Attribution, sau đó bạn sẽ nhìn thấy đoạn mã sau:

<b:widget id='attribution1' locked='true' title='' type='attribution'/> </b:widget>

Xóa nó đi là Ok, hoặc ẩn nó bằng cách làm như sau:

<!--
<b:widget id='attribution1' locked='true' title='' type='attribution'/>
</b:widget>-->

Cuối cùng lưu lại và xem thử blog của bạn nha!

Tiếp theo là tạo menu mini cuối blog.


Vào Thiết kế -> Chỉnh sửa HTML, chèn đoạn mã sau vào trước thẻ ]]></b:skin>

#credits{
width:840px;/*độ rộng tiện ích*/
padding:10px 0px 5px 0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPx2phJC26OnJBoRyivSYADffkjJZhqkM-DXi0m5fvyz6-KAZa0PSY_d0QEWj1isJlMAtsLRNumXrdxch9oDELVi9k0QQZCKGznc95EKi7RDWy3ntjNtBu1hvOqLyK80fVR_XDpQTnug/s1600/80percentblack.png") repeat scroll 0 0 transparent;/*link màu nền tiện ích, ở đây là màu đen*/
position:relative;
font-size:13px;
border:1px solid #404040;/*màu chữ hiển thị ko có link liên kết*/
margin-left:180px;/*khoảng cách so với lề trái*/
height:30px;/*chiều cao tiện ích*/
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-moz-box-shadow:1px 1px 5px #000000;
}

#credits_left {
float:left;
padding-left:40px;
}

#credits_right {
float:right;
padding-right:20px;
}

#credits a {
color:#D54E21;/*màu chữ hiển thị khi có liên kết link*/
}

#credits a:hover {
font-color:#AA0000;/*màu chữ hiển thị khi click chuột*/
text-decoration:underline;
}

Tiếp tục thêm đoạn mã sau vào trước thẻ </body>

<div id='credits'>
<div id='credits_left'>
Copyright 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div id='credits_right'>
<p>
<a expr:href='data:blog.homepageUrl' title='Home'>Home</a> | <a href='Link_lien_ket_1'><span>Ten_link_1</span></a> | <a href='Link_lien_ket_2'><span>Ten_link_2</span></a> | <a href='Link_lien_ket_3'><span>Ten_link_3</span></a> | <a href='Link_lien_ket_4'><span>Ten_link_4</span></a> |

</p>
</div>
</div>

Save lại là xong rồi đó.

Note: các bạn chú ý khi điều chỉnh khoảng cách so với lề trái thì phải điều chỉnh luôn cả chiều rộng của tiện ích để có được khoảng cách đẹp nhất trên blog. Nếu thấy hay đừng quên để lại comment nha!


Nguồn:Kira Phan

Đọc thêm »

Trình chiếu nội dung và hình ảnh sử dụng jQuery

Trình chiếu nội dung và hình ảnh sử dụng jQuery

Share |

Mày mò, lụm lặt bữa giờ mới ra được cái mã trình diễn ảnh kèm nội dung sử dụng jQuery cực đẹp này, hôm nay xin chia sẻ với các bạn. Cùng làm ngay bây giờ nào!



Xem: Demo

Trước hết bạn chèn đoạn mã sau vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

(function($){
$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Chèn tiếp đoạn mã sau vào trước thẻ ]]></b:skin>

#s3slider {
width: 620px;
height: 300px;
position: relative;
overflow: hidden;
margin-top: 17px;
margin-bottom: 10px;
*margin-bottom: 0px;
background:#ffffff;
border: 1px solid #000;

}
#s3sliderContent {
width: 620px;
height:300px;
background:#ffffff;
position: absolute;
top: -13px;
*top: 0px;
padding: 0px;
list-style:none;
margin-left: 0;
overflow: hidden;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
right: 0;
font:Georgia, serif;
padding: 10px 13px;
font-size:12px;
width:180px;
height:300px;
*max-height:300px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
top: 0;
overflow: hidden;
}

.s3sliderImage strong a{
color:$titlecolor;
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size:20px;
}

Cuối cùng là tạo một HTML và dán đoạn mã sau vào:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Link_anh_1" />
<span><strong><a href="Link_lien_ket_1">Ten _anh_1</a></strong>

<p>Noi_dung_1</p>
</span>
</li>

<li class="s3sliderImage">
<img src="Link_anh_2" />
<span><strong><a href="Link_lien_ket_2">Ten _anh_2</a></strong>

<p>Noi_dung_2</p>
</span>
</li>

<li class="s3sliderImage">

<img src="Link_anh_3" />
<span><strong><a href="Link_lien_ket_3">Ten _anh_3</a></strong>

<p>Noi_dung_3</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Tùy chỉnh Link cho phù hợp và Save

Nguồn: Nguyenlibra's blog

Đọc thêm »

Cách ẩn hiện chat box khá đẹp trên Blogger

Cách ẩn hiện Chat Box khá đẹp mắt trên Blogger

Chat Box là một công cụ giúp người đọc qua Blog của bạn có thể để lại những lời nhắn, thông điệp hoặc trao đổi thông tin với nhau. Tại trang Shoutmix chúng ta có thể đăng ký để tạo một Chat Box như vật khá dễ dàng.

Thủ thuật sau đây giúp ẩn hiện Chat Box và giúp tiết kiệm không gian Blog của bạn đồng thời làm cho diện mạo Blog trông đẹp mắt hơn.

Xem Demo.

Để thực hiện thủ thuật này, bạn chỉ cần đặt toàn bộ đoạn code sau đây vào trong một tiện ích HTML/JavaScript trên Blogger.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://farm3.static.flickr.com/2636/3935353655_32c6d2bb30_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:7px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<iframe title="abcdXXXX" src="http://www4.shoutmix.com/?abcdXXXX" width="200" height="360" frameborder="0" scrolling="auto"></iframe>
<div style="text-align:right">
<a href="javascript:showHideGB()" style="font-size:11px">
<b>x</b> Đóng lại
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<div class='clear'></div>

Chú ý: đoạn code giữa 2 thẻ <iframe>, </iframe> chính là code mà bạn lấy từ Shoutmix và thay abcdXXXX bằng id trên Shoutmix của bạn

Nguồn:Huynh Nhat Ha

Đọc thêm »

Phân trang cho Blogspot

Phân trang cho blogspot

Share |

Hôm nay mình xin giới thiệu cho các bạn một thủ thuật phân trang cho blogspot, cực kì đơn giản và dễ thực hiện chỉ trong 5 bước.




1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Tìm thẻ sau:

<b:include name='nextprev'/>

5. Chèn đoạn mã sau vào dưới thẻ trên:

<!-- start pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.pagutdnav li {
list-style-type: none;
display: inline;
}
.pagutdnav a {
border:1px solid #ef8116;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:hover {
background-color:#ef8116;
border:1px solid #ef8116;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#ef8116 none repeat scroll 0 0;
border:1px solid #ef8116;
color:#ffffff;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:link {
color:#333333;
text-decoration:none;
}
.pagutdnav a:link:hover {
color:#ffffff;
}
</style>
<span style='float:right;margin:0;padding:0;border:0;'><a style='margin:0;padding:0;border:0;' href='http://pagutd-script.vietutd.com/'><img alt='Pagutd - Pagging Script for Blogger Blogs by Vietutd Dot Com' src='http://sites.google.com/site/vietutd/pixel.png' style='margin:0;padding:0;border:0;display: none;'/></a></span>
<script type='text/javascript'>
var home_page = &quot;<data:blog.homepageUrl/>&quot;;
var div = document.getElementById(&quot;blog-pager&quot;);
var atag = div.getElementsByTagName(&quot;a&quot;);
var pager_max_main = (atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)==-1) ? atag[atag.length-2].href.substring(atag[atag.length-2].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-2].href.length) : atag[atag.length-1].href.substring(atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-1].href.length);
var sub_nav_half = 3;
var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_pages_text = &quot;Pages&quot;;
</script>
<script src='http://vietutd-js.googlecode.com/files/pagutd-bver.js' type='text/javascript'/>
</b:if>
<!-- end pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->

6. Save lại và xem kết quả.

Nguồn: Vietutd.blogspot

Đọc thêm »

Slide ảnh đơn giản

Trình diễn slide ảnh đơn giản trong blogspot

Hôm nay mình xin chia sẻ với các bạn thủ thuật tạo slide ảnh vô cùng đơn giản và gọn nhẹ. Thủ thuật này có ưu điểm là load rất nhanh.







Đầu tiên các bạn vào Thiết kế -> Thêm tiện ích -> HTML/Javascript, sau đó dán toàn bộ đoạn mã sau vào tiện ích, chỉnh sửa Link_anh và Link_lien_ket_den_anh là OK:

<embed type="application/x-shockwave-flash" src="http://img694.imageshack.us/img694/7500/beautifuldreamblogslide.swf?http://i465.photobucket.com/support/http://vn.myblog.yahoo.com/cindy-babylove" flashvars="config=4&amp;bcastr_flie=Link_anh1|Link_anh2&amp;bcastr_link=Link_lien_ket_den_anh1|Link_lien_ket_den_anh2" wmode="transparent" width="500" height="300"></embed>

Bây giờ là phần chỉnh sửa:
* config=4: tốc độ thay đổi ảnh 1 -> 10, số càng lớn, tốc độ thay đổi ảnh càng nhanh, nên chọn 4 là phù hợp nhất.
* Link_anh1: thay bằng link ảnh của bạn
* Link_lien_ket_den_anh1: thay bằng kink liên kết đến một trang nào đó mà bạn thích ( thứ tự phù hợp với link ảnh nha bạn)
* width=500, height=300: bạn tùy chỉnh chiều dài và chiều rộng ảnh hiện thị tại đây.

Cuối cùng Save lại là xong,nếu thấy hay thì đừng quên để lại comment cho mình nha!

Nguồn: Nguyen_Libra'sblog

Đọc thêm »