TẠO SLIDESHOW ẢNH (Kiểu 7)

Giống các kiểu slideshow khác đã được chia sẻ TẠI ĐÂY. Slideshow kiểu 7 này cũng không chiếm không gian của Blog, các hình ảnh của bạn được trình chiếu gọn gàng trong một khung ảnh, đặc biệt của slideshow này là hiệu ứng rơi ảnh khá ngộ nghĩnh. Lúc bắt đầu slideshow sẽ tự trình chiếu...Phía dưới có các thẻ XEM LẠI, XEM TRƯỚC VÀ STOP. 
Lưu ý khi slideshow đang được trình chiếu tự động, bạn bấm một trong các thẻ phía dưới sẽ làm mất đi chế độ autostart của slideshow...

Mời các bạn bấm vào Xem thử phía dưới để xem trước slideshow này nha.

Xem thử

Bạn chỉ việc đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu bạn chưa biết các thêm HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó copy tất các code phía dưới dán vào.

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.css" />

<style>

.stackcontainer{
margin: 10px 0 0px 0;
}

#demo1{
width: 240px;
height: 320px;
margin-left: 210px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.js">

</script>

<script>

var demo1 = new carddeckslideshow({
 id: 'demo1',
 autoplay: true,
 cycles: 2,
 persist: false
})


</script>


<div id="demo1" class="stackcontainer">

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUg2zHaCgjiMujnmh-O4IN6rGaUvNoDct7rjyF6qavpn8NHE3OFQUOzHGuwYp8BZnfNbD5__R0OW-FGZqZM0mhm2LN-CdhwOAAv3vcYPB6jxv-fu3-TwBzhG8KvJeR7XhjX4eFB5WwD-Y/s1600/0024.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMKVonbTQLtAUBo8ymggJdg3Uh84_uxaEAWOdVXJrrTHdmPVWtnggwZXfkCsS1e-uNKDAR9XZ8Q3HsiU6k7gWtdjR3pZCjWm6c3knVp9t9JVrh7Cgf7NUzY70K3nPlQ_UQXH7SWDIXek/s1600/0055.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXzIafk7MlXYc2UccbbbE4p6cty6e33IHUk-cZ_jxFNACJodMFSbaYMuzyv-25FQYRxwiGP2In_tWDR4p-CSH1pqRvP9nm0k4y0jRFQzAVwhOC6MaL_YyyMxa-7greKGDC1RjQllh09jw/s1600/0013.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-WDyC6W4ZLbaQIQhdpHRA1oO-Pw5N1VrzLOdNTdf-2lXqpud69Y2DopLUELguI5Ytk_EE9fwBRs2nAxKejxkiqD3Kqxlo-eD3-7izrgoLuf4S9epC1b3aVhQsJ4IEt8dDO9lmdnncts/s1600/0015.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xR9CWO6qm-0Ns-K9UCL8n4Vfu9a9yS9TSMyzRU0pUw1cm5jv-JNCzKtazPQsDkGgdRHaFvwHSwNiLqXbBFZKYEVy_wlM6i9f7BT6Xea-r_nshYHIulu7CnWzfOUI7SA6vtMEtYGa0Uk/s1600/0014.gif" />
 </div>


<div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRxqnWrbvtMb7_7sIosLBPzkfcAkrujhEOBw2LiRQtXoVYvW_CpD9bhAqWbSogbuu0a81Q8CBac0jDb_V5_FOpx4NVIEkGWoTorB6Eot73IgQLVBFBu4UJp9j7ijYtgQjpaLthYURheI/s1600/0019.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglf6G2y4QZl3nFrttKAiB2UZ9mvR5xUALXTcaEMH2qNsOfKNvwpDWA4ULcM7plIDULdCsvtnD4kk5k0ZX8hewpO1AhQwLVmC1ntLxNICXKG66TYGaojV70O88J095uwYEYMDn4xp6MIDwr/s1600/0035.gif" />
 </div>




</div>

<div style="margin-top:1em; margin-left:250px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a> / <a href="javascript: demo1.userpause()">Stop</a>
</div>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ, trong đó:

Width: chiều rộng của khung trình chiếu

Height: chiều cao của khung trình chiếu

Margin-left: khoảng cách từ lề trái đến khung trình chiếu (khoảng cách này nếu bạn để ngắn quá thì hiệu ứng rơi ảnh sẽ không được đẹp).

Và các dòng lệnh màu xanh là link ảnh.

Cuối cùng bấm Lưu là xong.

Ở code trên tôi làm 7 ảnh, nếu bạn muốn nhiều ảnh hơn nữa thì dán đoạn code:

 <div class="inner">
  <img src="link ảnh" />
 </div>

lên phía trên thẻ đóng </div> cuối cùng.

Để slideshow được đẹp, bạn nên resize các ảnh có cùng kích thước với khung trình chiếu.

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

More about →

code chèn comment facebook vào blogspot

code chèn comment facebook vào blogspot giúp các bạn trao đổi với nhau qua facebook đơn giản nhanh chóng tiết kiệm thời gian và giữ chân khác ở lại lâu hơn vì có thể khách hàng đang online facebook



hướng dẫn chèn comment facebook vào blogspot

Bước 1 - Thêm đoạn mã bên dưới vào trước 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>




Bước 2 - Tìm một trong các đoạn code như sau:<b:include data='post' name='post'/>

- Rồi thêm ngay dưới nó đoạn code sau:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget3'>
<div id='com-tab22'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin:10px 0px 0px 0px;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='622'/>
</div>
</div>
</b:if>
</div>
</div>
</b:if>



Chúc các bạn thêm phần comment facebook và quản lý cho Blogspot thành công!

Mọi thắc mắc hay cần giúp đỡ các bạn vui lòng commnet phía bên dưới nhé !

More about →

Code phân trang cho blogspot

Code phân trang cho blogspot giúp khách viếng thăm blog của bạn dễ dàng điều hướng đến những trang kế tiếp hoặc trước đó. Hôm nay mình và các bạn sẽ lần lượt tạo phân trang cho blog của mình với các trang được đánh số thứ tự như hình bên dưới :




Hướng dẫn phân trang cho blogspot

Nào chúng ta cùng từng bước thực hiện nhá : Bước 1 : Đăng nhập vào Blogger : Dashboard > Design > Edit Html

Bước 2 : Sao lưu lại toàn bộ template trước khi tiến hành

Bước 3 : Tìm kiếm đoạn code sau : ]]></b:skin>


Thêm trước đoạn đó mẫ Css



.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



Bước 4 : Tìm đoạn code: </body>

Và thêm đằng trước bằng đoạn code sau

Code phân trang cho blogspot


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://www.thuthuatweb.net/download/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->




Giải thích một số tham số ở đoạn code trên :

- pageCount : Số lượng bài viết hiển thị trên trang
- displayPageNum : Số lượng trang được đánh dấu sẽ hiển thị trên trang
- upPageWord và downPageWord được dùng để hiển thị trang trước và trang sau, các bạn có thể thay thế bằng những dòng chữ hay kí tự tùy ý.


Mọi thắc mắc và cần giúp đỡ vui lòng comment phía dưới nhé !

More about →

Code bài viết liên quan blogspot

Code bài viết liên quan blogspot dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.






Hướng dẫn cách lấy bài viết liên quan theo nhiều label cho blogspot

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:


Đoạn 1:
<div class="post-footer">

Đoạn 2:
<div class="post-footer-line post-footer-line-1">

Đoạn 3:
<div class="post-footer-line post-footer-line-2">

Đoạn 4:
<div class="post-footer-line post-footer-line-3">



- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

========= chú ý =========

Code bài viết liên quan blogspot


<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;khamphablog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->




Chú ý:

Bạn sẽ phải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
Thay khampha.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối và http:// ở đầu. (ví dụ link blog bạn là http://www.khamphablog.blogspot.com/ thì bạn chỉ lấy khamphablog.blogspot.com và thay vào đó thôi )
maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label). Ở code trên là mình để là 6
maxNumberOfLabels là số nhãn (label) sẽ được hiển thị. Ở code trên là mình để là 3

Mọi thắc mắc và cần giúp đỡ vui lòng comment phía dưới nhé !