CODE968.COM: CODE CHO BLOG.

Hiển thị các bài đăng có nhãn CODE CHO BLOG.. Hiển thị tất cả bài đăng

Thứ Sáu, 26 tháng 7, 2013

Avatar mặt cười có chữ (Tổng hợp).

Dưới đây là tổng hợp avatar biểu tượng mặt cười có kèm theo chữ. Rất phù hợp với các bạn vui tính...

Thứ Năm, 20 tháng 6, 2013

Tiện Ích Bài Mới Dạng SlideShow Tự Động Lấy Bài Kiểu 1.

Đây là tiện ích tôi sưu tầm được trên mạng mang về đây chia sẻ cùng mọi người.Tiện ích này hoàn toàn tự động lấy hình ảnh kèm tiêu đề bài viết và tổng số nhận xét của những bài mới trên blog.Ta cũng có thể trình chiếu theo bài mới của từng nhãn,ta chỉ việc sửa đổi đôi chút code

Nếu dùng cho toàn blog thì ảnh đại diện của mỗi bài viết nên để kích thước lớn thì khi lên hình ảnh không bị vỡ hạt(ảnh mới nét)
Để thuận tiện cho những người tính tình sớm nắng chiều mưa lúc thích lúc không.Nên có thể gộp code vào 1 tiện ích nếu không thích thì xóa bỏ tiện ích không cần can thiệp vào template.
Vào bố cục chọn thêm một tiện ích và dán đoạn code sau vào rồi lưu lại

<style type="text/css">
#slider,
#sliderContent,
#slider img {
  width:620px; /* Chiều rộng slideshow */
  height:500px; /* Chiều cao slideshow */
}

#slider {
  margin:0 auto 10px;
  border:2px solid white;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAtRbkfKMuzY3hSLnIbGbNEmZPjZOlB_c66IzceI2DNMaDdIgO3t2tFquo4YCg7tQqnSC6vqsjexJUpD2IhoToSUZlmfj1RAI2y4SxRK-JXo0FAJKaE5aX1ssxBy67c6je_8tfX0tl6Ng/s16/nivo-loading.gif') no-repeat 50% 50%;
  position:relative;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  overflow:hidden;
}

#sliderContent {
  position:absolute;
  top:0;
  left:0;
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#slider img {
  border:none;
  padding:0 0;
  margin:0 0;
  width:100%;
  height:auto;
  outline:none;
}

.sliderImage {
  list-style:none;
  margin:0 0;
  padding:0 0;
  width:100%;
  display:none;
}

.sliderImage span {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:auto;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  background-color:black;
  opacity:.8;
  filter:alpha(opacity=80);
  padding:7px 10px 12px;
  display:none;
}

.sliderImage span a {
  font-size:12px;
  font-weight:bold;
  color:white;
  text-decoration:none;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://krdautocrazyblog.googlecode.com/files/S3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
    $('#slider').css('background-image', 'none').s3Slider({
        timeOut:3000
    });
});
//]]>
</script>
<script type="text/javascript">
var showPostDate_g  = true,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,//Nếu theo nhãn thì để true
    slideLabelName  = "Nhãn",
    thumbWidth      = 420,
    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcn08VJKmbGUJ-fwHvnh1Vjx2iKd4sNtkFabBW-sQZv0KLKZgMrWfGMC80l4eSjZX3-Xdd4ITPdXG1lPNnbXgRsc6bH-JNIqvIfH-NOXnS8In0jYwhvtbUvncAIh-8pFolqbcITz_Mpqy/s88/dte-darkblue.png",
    text            = "Comments",
    numposts_g      = 10,//Số bài trình chiếu
    home_page       = "http://kartriderdautocrazy01.blogspot.com/";//URL Blog
</script>
<script src="https://krdautocrazyblog.googlecode.com/files/autoContent4s3Slider.js" type="text/javascript"></script>

Vậy là xong.

SlideShow với javascript có chú thích cho ảnh.

Đây là một thanh trượt với javascript không dùng jquery và flash.
Với khả năng tùy biến là rất cao kèm theo có thể thêm chú thích cho ảnh cộng với code gọn nhẹ rất phù hợp với blog.

Để tạo Slider này bạn cần thêm 1 tiện ích cho blog và dán đoạn code sau vào và lưu lại
<style type="text/css">
#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;/* Chiều rộng bên trong khung trượt */
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZXI-OQQi5cgdkGCAHpVx0iIrbseTry5O6FAP0ao1RuRvk6wngRlMQK8C7T72ae0bgS5zRJ3_5BQAxm0tWIO29MKe-QBoD2VOyPvPjZwcFl6hTPMc57MU4f7DsIR5puVTD9M7dAOFkdJLm/s109-no/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;/* Chiều rộng ảnh */
height: 218px;/* Chiều cao ảnh*/
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFUDITJhj_bfOqqs0X_D7ZTKZl6MiAUfTpy5_6viUHXB2WSg0gXtmEhvszLUNObG8wcAycW74KSN8iBCry39iB-FZsAQfaG3DylRl_yOP4dT3g5raDX0UyS-XhXIUpoy1snZIdJcRGyPV/w39-h15-no/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivjquGpAk8ck7wPZ2Of5cjWK1-oq9bQ5RmtVbZZJnPJuaSTCUAns0lapWOTkOR-nNhSjtqSASNg5yHithgYbIYBj_XLlLEu8V3a_nux_VmZBu_UxGN5Y4jtjbW7-OQLarkYIDgnR9wRQk0/w11-h22-no/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="http://blogdautocrazy.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">

<a href="URL nếu cần gắn liên kết"><img src="Link ảnh 1" alt="Chú thích cho ảnh"></a>

<a href="URL nếu cần gắn liên kết"><img src="Link ảnh 2" alt="Chú thích cho ảnh"/></a>

</div></div>

Slider này yêu cầu ảnh phải có cùng kích thước và chỉnh chiều rộng slider bằng chiều rộng ảnh nghĩa là chiều rộng slider theo chiều rộng ảnh.

Code Tạo SlideShow Ảnh K2.

Để chỉnh chiều cao và chiều rộng của slide, các bạn chỉnh lại thông số width, height ở dòng 3
Code

<html>
<style>
.sl_kenny_m {position:relative;width:610px;height:340px;background:#000;}
.sl_kenny_m ul{display:none;}
.sl_kenny_m .ctn_sl_kenny{overflow:hidden;position:relative;}
.sl_kenny_m .image{overflow:hidden;}
.sl_kenny_m .image img{display:none;}
.sl_kenny_m .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:2;}
.sl_kenny_m .box_clone img{position:absolute;top:0;left:0;z-index:2;}
.sl_kenny_m .prev_button{position:absolute;top:50%;left:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMRW0xmHfpr83K9QC1L2jl2wcyRHggEMp7Tl0ds3p7HM_0Lyn8jAdm0FWU408rpKDR9PhqrnF7tw7S0XNpTVmLYtvUK_GeqoEyZyOBLH1LoSOSpA4YrPh0SxbpMTZQvstU9zkSkqwmrIn/s34/prev.png) no-repeat left top;}
.sl_kenny_m .next_button{position:absolute;top:50%;right:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfxMgYNqevR-unWsdVQzbxxRMS-kAXKUm9TcvtbBfmzvX5tJAgoBCDySjQlmjc8smdkQiuHBpKQwnCgP1-pX-JVWmqdaDzF_Wfeg4-n99zx-uJBYlpr2963p8M-3Sfc2piSRAPZc8Hh2m/s34/next.png) no-repeat left top;}
.sl_kenny_m .tt_sl{position:absolute;top:15px;left:15px;z-index:10;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:.75;}
.sl_kenny_m .tt_sl .img_nb{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.sl_kenny_m .tt_sl .img_nb_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0;}
.sl_kenny_m .container_thumbs{position:relative;overflow:hidden;height:50px;}.sl_kenny_m .tt_sl_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}.sl_kenny_m .tt_sl_thumb .img_nb{overflow:hidden;width:70px;height:40px;position:relative;}
.sl_kenny_m .tt_sl_thumb .img_nb img{position:absolute;top:-50px;left:-50px;}.sl_kenny_m .box_scroll_thumbs{padding:0 10px;}.sl_kenny_m .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg,#555,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:11;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.sl_kenny_m .tt_sl_dots{position:absolute;right:10px;bottom:10px;z-index:16;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.sl_kenny_m .tt_sl_dots .img_nb{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.sl_kenny_m .tt_sl_dots .img_nb_select{background:#c00;float:left;margin:0 5px 0 0;}
.sl_kenny_m .ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;display:none;}.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTjQRPlL6DU083WZg2kmhSkuNlxsIuQu1oG3AVn8UVx5Pzj7MbeLB8b5i3Jjm2jH8o9jblF5Q9MK8FTexOR1GXZMZgH76Qd8Fqx0eVNtJJJUL2ML4JTX4szsAMaKvbzlnR2WSlK55j9Mj7/s32/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:.8;background:#000;}
.ll_sl_kenny p{padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}.tt_sl *{font-family:Consolas,arial,tahoma!important;}
.sl_kenny_m .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:9;border-radius:20px;}#prev_sl{display:none;position:absolute;z-index:17;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden;}#prev_sl ul{height:100px;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0;}
#prev_sl ul li{width:100px;height:100px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block;}#prev_sl ul li img{position:absolute;top:0;left:0;height:150px;width:auto;}#overlay_sl_kenny{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000;}
.sl_kenny_m .focus_button{position:absolute;top:50%;z-index:10;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7IFHvfXLWR_-yzWPChJGgrvehgjFNXboA3m2MVHu1xxUYEI_x7GnYn27a7C37nObbAHY9mk9tzxZ4hIdOmY4yMCBEYzDRs9L20E05X_61Dt-kh1pz08-J0VGoPWmEEmBD1OvLTcxqrp86/s42/focus-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button{position:absolute;top:50%;z-index:16;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJi-7LGHtbWNK_48-aIKo3CQ6sFZuBop_jYNvKxvV5pBfKnGR5Hv-VHWMUsIwwjysNa9RbvSqcV1q1E4SSZyomLMIeHq3wEFoaYXNN-PwYtxyVNXXgceZi0pc5LD_TtsqEBeI4FFw8JFtT/s42/pause-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button.play_button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEHqPFJCTsFFvKE1fZ_-zp3dzromApUcPkG9qim1oRZbcRq3ADjIrm9EHuPFftETBAI6gfN8PQ0jok5LMU-7FiOjQl8W-SdyiJA4C69NgL8sb8ubrmUGu1nT-STqmhQH1rhwnyJ78Kswn/s42/play-button.png) no-repeat left top;}.sl_kenny_m_small {width:200px;height:100px;}
</style>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/jq144.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/sl_kenny.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/animate_colors.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/easing13.js"></script>
<script>
$(document).ready(function() {
$('.sl_kenny_w').sl_kenny({
animation: "random",
interval: 3000,
stop_over: false,
max_number_height: 8,
numbers_align: "Left",
numbers: false,
label: false,
dots: true,
animateNumberOut:{backgroundColor:'#e2e2e2', color:'#fff'},
animateNumberOver:{backgroundColor:'#fff', color:'#000'},
animateNumberActive:{backgroundColor:'#FF8DC4', color:'#fff'},
controls: true, 
controls_position: "leftTop",
progressbar: true, 
progressbar_css: { 
top:'10px', 
left:'50px', 
height:6, 
borderRadius:'2px', 
width:560, 
backgroundColor:'#FF8DC4', 
opacity:.7 
}
});
});
</script>
<div class="bb_c">
<div class="sl_kenny_m sl_kenny_w">
<ul>
<li><a href="Địa chỉ  ảnh 1" target="_blank"><img src="Link ảnh 1" /></a>
</li>
<li><a href="Địa chỉ ảnh 2" target="_blank"><img src="Link ảnh 2" /></a>
</li>

<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
</ul></div>
</div></html>

Cần thêm bao nhiêu ảnh là tùy chỉ cần thêm dòng code sau:
<li><a href="Địa chỉ ảnh"><img src="Linh ảnh"/></a></li>
Trước dòng:
<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
Nên size ảnh cho phù hợp với kích thước slideshow cần tạo.