Cảm nhận tư duy và tổng hợp kiến thức

Thứ Năm, 10 tháng 12, 2015

Random Post nằm ngang có thumbnail ảnh cho blogspot


Random Post nằm ngang có thumbnail ảnh cho blogspot
Random Post nằm ngang có thumbnail ảnh cho blogspot.Widget bài viết ngẫu nhiên nằm ngang có ảnh đại diên cho blogspot. Như tiêu đề Bít Tuốt xin chia sẻ với các bạn cách tạo một widget Random Post nằm ngang có thumbnail ảnh cho blogspot các bạn làm theo hướng dẫn dưới đây nhé

Random Post nằm ngang có thumbnail ảnh cho blogspot

Bước 1: Đăng nhập blogspot ==> Bố Cục (Layout) 

Bước 2: Thêm 1 tiện ích HTML/Javascript rồi copy code dưới đây vào

<style type="text/css"> #random-posts li{width:60px;height:200px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:60px;height:60px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 7; var rdp_snippet_length = 0; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibaZFQHB5YLoBZpv3GfBEzjMpvuC5jJZwDUsMF4q5eLbmNzbyZzfe2jwUm5vFxi8xrZ-M5G3wEJuj6qgJV1LNwS7X0kKkZ9GNrBr2H18memiIAsIGVy6fxFsUk7rT_4QJBZQTc5J3lOE/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script>

- Sau khi copy nhấn Lưu và ra web xem thử


Chú ý: Các bạn thay đổi các thuộc tính dưới cho phù hợp

  • width:60px;height:200px : hiểu là chiều ngang cà chiểu cao của từng phần bài viết
  • width:60px;height:60px : chiều ngang và chiểu cao của ảnh hiển thị
  • var rdp_numposts = 7: Hiểu là số bài viết sẽ được hiển thị
  • var rdp_snippet_length = 0 Số kí tự mô tả bài viết
  • Do nó là dạng nằm ngang để hiển thị đẹp thì các bạn phải cấu hình widget (đặt widget này vào nơi thích hợp có chiều ngang dài 1 chút để nó hiển thị tốt)
Bài viết bạn có thể quan tâm: Cách thêm widget vào vị trí bất kỳ trong blogspot
http://bittuot.blogspot.com/2013/08/cach-them-widget-vao-blogspot.html



Mọi thắc mắc vui lòng comment phía dưới để được hỗ trợ. Chúc các bạn thành công !

Bài viết được viết bởi : http://bittuot.blogspot.com/



Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !

Share:

Hướng dẫn cách tạo Slide ảnh dạng Joss Banget Slider cho Blogspot

Hướng dẫn cách tạo Slide ảnh dạng Joss Banget Slider cho Blogspot
Hướng dẫn cách tạo Slide ảnh dạng Joss Banget Slider cho Blogspot. Sau đây Trùm SOI Xin chia sẻ với các bạn cách tạo 1 Accordion Slider cho blog hay website của mình.


Cách tạo Joss Banget Slider cho Blogspot - Website

Bước 1: Đăng nhập vào Blog ==> template (Mẫu) ==> Chọn Chỉnh sửa HTML ==> Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.


#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqCnXpyo9Ev9-rIBwJFwCKyGuFjgqqA1P4Rr1ZVDkclnT_PrQa9PgDCqazH6P9hG77FxVAMEsNXDUm4afiW0QapgCzmBk7DBdarhlPTMYSxrhc3FXsz7Io9hh-1nq4tf2d7qfYMJdn_0/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjga3uBsu7DaegwjDpXArAQMqDYXM7xVRrAIPWQWF0Y705dtHjl1HE54AdhAkWWhQD4AzkvT6qkTmv88RAK4f87oGrP_Bvju6XhmeOhttjkFLcLfZ-p0pWEk7g7BJRh3uIHj6Da-bLNgQ4/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Chú ý: Các bạn down các ảnh từ link ảnh bôi mài xanh kia rồi up lên host riêng của mình để tránh trường hợp các file ảnh này bị xóa mất gây ra lỗi hiển thị.

Bước 2. Thêm đoạn code dưới lên trên thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
< script src='https://sites.google.com/site/seovnpro/jquery.innerfade.js' type='text/javascript'/>
< script src='https://sites.google.com/site/seovnpro/cycle.js' type='text/javascript'/>
< script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtIQp7lvXPigSAazsoU94fIWZtpjxa0BctGdRLWRVW5uaJTcwzvy3VW1XrZFuYvyCHqfG0Td5iTxZJF6lJizac59zGdvO7veb9-ksy2P3_Y8D4Ok3LqAntvuZ1Ze805SP-9LvsUbozW0/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
   
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; 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!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
 document.write(trtd);


 j++;
}
    document.write('</div>')
}

//]]>
< /script>

Lưu ý:
- Nếu website hay blog bạn mà có dòng tương tự như này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> thì các bạn ko cần phải thêm cái này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> vào nữa.

Bước 3: Tìm thẻ sau: <div id='content-wrapper'> rồi dán đoạn code dưới đây lên trên thẻ tìn được
(Đây là cách tạo ra 1 widget dạng HTML/Javascript ,và cho phép nó chỉ hiển thị ở trang chủ.Các bạn không nhất thiết phải cho code dưới lên trên <div id='content-wrapper'> mà có thể cho vào vị trí tùy ý mà muốn hiển thị khác nhưng bạn phải có kiến thức chút về HTML, CSS )

<b:if cond='data:blog.url == data:blog.homepageUrl'>
< b:section id='slider' maxwidgets='1' showaddelement='no'>
< b:widget id='HTML96' locked='true' title='Accordion Slider' type='HTML'/>
< /b:section>
< /b:if>
Lưu ý:

HTML96 - sliderCái này bạn đặt tên ko được trùng nhé
Accordion Slider: Tên của widget sẽ tạo

Bước 4: Nhấn lưu lại

Bước 5:  Quay lại Phần tử Trang tìm tới phần Layout(Bố cục) bạn sẽ thấy 1 Wiget mới với tên Accordion Slider bạn bấm vào chỉnh sửa (Edit). Xóa cái tên Accordion Slider đi và dán đoạn code bên dưới vào:

<div id='featuredSlider'>
< div class='container'>
< script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/tên label cần hiển thị?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
< /script>
< div class='navigation'>
< ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 3000,
  pager:  &#39;.pagination&#39;
  });
< /script>
< /div>           </div> <!--end .container-->
< /div>
Chú ý: Nếu các bạn muốn slide ảnh này chạy theo nhãn thì để phần chữ màu đỏ trên giữ nguyên và thay tên Label bạn muốn hiển thị vào

- Nếu bạn muốn nó chạy bài mới nhất thì thay đoạn chữ màu đỏ thành : /feeds/posts/default?max-results

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

Bài viết được viết bởi: bittuot.blogspot.com - Bít Tuốt Blogspot

Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !

Share:

Cách tạo tab nhiều tiện ích - widget cho blogspot

Cách tạo tab nhiều tiện ích - widget cho blogspot
Cách tạo tab nhiều tiện ích - widget cho blogspot - Code tạo tab nhiều tiện ích - widget cho blogspot. Hướng dẫn cách tạo tab nhiều tiện ích - widget cho blogspot.

Đây là cách giúp bạn có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật blogspot này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Phần này để chỉnh sửa và thêm vào tốt đòi hỏi các bạn phải biết qua code chút



Cách1: Cách tạo tab với nội dung có sẵn cho blogspot

Bước 1: Đăng nhập vào blog ==> Chọn mẫu (template) ==> Chọn chỉnh sửa HTML

Lời khuyên: Các bạn nên down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ ,nhớ sao lưu 1 bản để phòng bị lỗi code.

Share:

Background đơn giản và đẹp bằng CSS3

Hình ảnh là một trong những thứ khá bậc nhất làm chậm đi tốc độ tải trang trên website của chúng ta. Chính vì thế mà mình nghĩ ngày nay thì đại đa số những website bỏ đi ảnh background là vậy. Nhưng nếu bạn vẫn muốn có gì đó cho thêm màu sắc vào ảnh nền thì minh đã có cách để giúp các bạn.

Background đơn giản và đẹp bằng CSS3

Cùng với sức mạnh của CSS3 ngày nay thì bây giờ bạn có thể "vẽ hình" trực tiếp tại trình duyệt. Thì lợi dụng nó mình xin chia sẻ với các bạn một số ảnh nền đơn giản được vẻ bằng CSS3, cho những bạn nào đang có nhu cầu sử dụng chúng.

Background đơn giản và đẹp bằng CSS3

Sau đây mình sẽ tạo ra một đối tượng và sử dụng css3 để đặt background vào đó cho các bạn dễ dàng lựa chọn.

Mẫu 1
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
Mẫu 2
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
Mẫu 3
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
Mẫu 4
background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
Mẫu 5
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(45deg, transparent 75%, #555 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
Mẫu 6
background: #fdc;
background: -moz-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));
-webkit-background-size: 100px;
-moz-background-size: 100px;
Mẫu 7
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background:
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
-webkit-linear-gradient(135deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;
background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
Mẫu 8
background-color: hsl(34, 53%, 82%);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
-webkit-repeating-linear-gradient(-45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px 
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, 
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px 
);
background-size: 100%;
Mẫu 9
background-color: #fff; 
background-image: 
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-image: 
-webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .1em, transparent .1em);
background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Mẫu 10
background-color:#269;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: -webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0deg, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
Tạm thời sẽ là 10 mẫu, bao giờ mình tìm được thêm mình sẽ chia sẻ với các bạn.

Lời kết

Đây là những ảnh nền hoàn toàn được dựng nên bằng CSS3, do đó tốc độ sử lý của nó hầu như là rất nhanh, và mong rằng những background mà mình chia sẻ ở trên đây là những thứ mà các bạn đang tìm kiếm.

P/S: Trước đây được học trên trường thì để làm mấy cái menu nhìn bầu bầu, hoặc màu sắc cho một đối tượng nào đó thì thường sử dụng một hình có chiều rộng khoảng 1px và sử dụng css để đặt vào backround. Nhưng mà bây giờ thì những thứ đó chắc bây giờ gọi là lỗi thời, giờ chỉ với CSS3 thì bạn muốn làm ra màu sắc cũng như đủ mọi hiệu ứng khác mà không cần rờ tới hình ảnh.
Nguồn khampha's Blog

Share:

Anh hỏi em sao lại ghét mùa đông



Anh hỏi em sao lại ghét mùa đông
Bởi em sợ gió lồng qua khe cửa
Mang giá buốt chích vào da như cứa
Chẳng nồng nàn như ánh lửa thu sang

Anh hỏi em sao lại thích thu vàng
Em yêu lắm gió mơn man chiếc lá
Ánh vàng vọt của chiều thu nghiêng ngả
Sóng sánh tình, nhuộm tím cả hồn thơ

Em ghét đông bởi giá lạnh hững hờ
Khung trời xám nhạt mờ trong mưa bụi
Rót vào đêm tiếng mưa rơi lầm lũi
Lạnh tê người nỗi hờn tủi cô đơn

Em yêu thu, yêu cái nắng dỗi hờn
Sợ gió đông khua vờn đêm buồn bã
Sợ tiếng mưa giữa chiều đông buốt giá
Quất vào cây trơ trụi lá hờn đau.

Em yêu thu, yêu chiếc lá thay màu
Nhận xa cách để mùa sau gặp gỡ
Dù đớn đau nhưng không hề nức nở
Vẫn ấm nồng rạng rỡ đợi mùa yêu.



Bạn có thể tham khảo các bài thơ trong Bầu rượu túi thơ do  Khanhnguyen' s blog sưu tập từ trên các diễn đàn mạng xã hội

Thơ: TT
Nhạc: NBP


Share:

Làm thế nào để Add Fixed Social Media Side cho Blogger

Xin cáo lỗi cùng các bạn, Admin đang trong quá trình tu chỉnh bài viết

Sorry,You are trying to reach an invalid page...!
Click here to go to Homepage 
Have a nice Day...


Share:

Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot

Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot
Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot. Cách thêm Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot.hướng dẫn cách tạo widget Bài Mới Nhất Hiển Thị 2 Cột khi rê chuột vào bài viết sẽ có hiệu ứng toolip mô tả về bài viết đó nhìn rất bắt mắt



Tác giả của thủ thuật này là bác FanDung - Fandung.blogspot.com .Sau đây mình xin chia sẻ bài cách thêm Widget bài viết mới theo nhãn hiển thị hai cột có ảnh

Bài viết này mình sẽ hướng dẫn cách tạo widget Bài Mới Nhất Hiển Thị 2 Cột khi rê chuột vào bài viết sẽ có hiệu ứng toolip mô tả về bài viết đó nhìn rất bắt mắt. Đặc biệt tốc độ load của tiện ích này cũng khá nhanh. Mời bạn xem demo ở bên dưới để hiểu rõ hơn về thủ thuật này

Cách thực hiện : 

Bước 1: Vào blogger → Mẫu → Chỉnh Sửa HTML

Bước 2: Dán code bên dưới vào trước thẻ  ]]></b:skin> sau đó lưu lại template

/*Tooltip*/
#osdhtmltooltip{border: #999 1px solid;padding: 4px;font-size: 10pt;z-index: 100;left: -300px;visibility: hidden;width: 350px;font-family: Arial;position: absolute;background-color: #fcfee4;text-align: left;}

#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4dSYcnL0kvG-GmIB1cDIL7Ui9-zjn-KmflelMS4nbF7mVChiNz754Nq9gadQ0O2OHTZVhCpUrfz7Cc5q9aNSL0vqYyCrz7hRTQJmQBUNLMnky5ad6GazrVZzBjC1xgsMl_Ofb6vL-8C0/s1600/recent-bg.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:12px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float: left;width: 40px;height: 40px;border: 1px solid #ccc;margin:5px;padding: 1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}


Bước 3: Vào bloggerBố cụcThêm một widget HTML/Javascript mới sau đó dán vào phần nội dung code bên dưới rồi lưu lại để hoàn thành thủ thuật


<script src="http://dl.dropbox.com/u/66348944/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Thủ Thuật Blogspot"; //Tên nhãn
home_page = "http://bittuot.blogspot.com/";// Link blog của bạn
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Blogspot</h3><div id="rc-posts-loading"><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9WJ5kFOUTD1bgfhyphenhyphen6XSTrdCDI1UwV3QxYk4idOzo2hwrEnSimqE8YLxVDn29N99_5X7knTx5J60N5VvanSgyCVkJFTBybtoMsFCg6aGF9v_5nGgnt0AGZ4-E8ciQS8A_n1wrYlORkMATj/s1600/loading.gif'/></div>
<script src="http://dl.dropbox.com/u/66348944/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Chú ý: 

  • Thay đổi những thông số sao cho phù hợp với blog của bạn
  • Download 2 file .js về để sử dụng lâu dài
  • Bạn hãy dựa theo hướng dẫn của bài viết này để tự tạo cho mình một style riêng nhé!


Nguồn: Fandung.blogspot.com


Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !

Tài liệu tham khảo thêm

6 Stylish recent post widgets thiết kế blogger - Blogspot
Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery
Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển
[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1
Tiêu đề bài đăng mới với hiệu ứng chạy ngang
Tạo recent post theo dạng hình ảnh 3 cột cho blogger
BÀI VIẾT THEO NHÃN HIỂN THỊ DẠNG TIN TỨC Ở TRANG CHỦ
Thêm bài viết mới nhất và các bài viết cũ hơn cho nhãn và bài viết
Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot
New and Flexible Recent Posts Widget With Thumbnail for Blogger
Cách tạo tab widget bài viết mới nhất theo từng label blogspot
Widget bài viết mới với hiệu ứng load bài viết liên tục cho Blogspot
Cách ẩn bài viết mới nhất ngoài trang chủ blogspot
Retrieving Recent Posts Titles
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot

Share:

Thứ Tư, 9 tháng 12, 2015

How to add image before blog post title

How to add image before blog post title


1. Log in to blogger and Go to Design >> Edit HTML

2.Click on "Expand Widget Templates"  checked

3.  Scroll down and to this code

<b:if cond='data:post.url'>
<a expr:href='data:post.url'> <data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>


4. now paste this code between  <a expr:href='data:post.url'> and <data:post.title/>.


<img src="YOUR-IMAGE-URL" style="border-width: 0px;" />

*Replace with  YOUR-IMAGE-URL Use correct image URL

5. Now save your template you are done.

Nguồn MyBlogger Tricks

Share:

Random Posts Widget For Blogger Blogs

Random Posts Widget For Blogger Blogs
This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog's sidebar.

Adding a Random posts widget is very easy...
Simply log in to Blogger, go to Layout, click on "Add a Gadget", and select it as "HTML/JavaScript" type.

And finally paste this code in to it:

<a href='http://bit.ly/work24'><img alt='blogger widgets' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><script type="text/javascript">

var randarray = new Array();var l=0;var flag;

var numofpost=8;function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

< /script>

< script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

< span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>



Edit the code shown in 'red' to change the number of posts being displayed in the widget.

NOW CLICK SAVE TEMPLATE




Nguồn 24work.Blogspot.com


Thanks to Blog Godown for this widget.
Nguồn 24work.blogspot.com

Tài liệu tham khảo thêm


Share:

Tooltips Recent Post Widget For Blogger With Thumbnail

Tooltips Recent Post Widget For Blogger With Thumbnail


Tooltips Recent Post Widget For Blogger With Thumbnail




Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below


Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP