Showing posts with label thu thuat blog. Show all posts
Showing posts with label thu thuat blog. Show all posts

Sunday, August 11, 2013

ANCKeywords - Tự động cập nhập keywords

Plugin này giúp chúng ta cập nhật từ khóa mới và hot nhất ! Tuy nhiên mỗi 1 blogger nên cân nhắc trước khi dùng . Vì đối với Google sanbox, penalty... không an toàn lắm . Nó có thể là con dao 2 lưỡi cho trang web của bạn.
Nói sơ qua về plugin này, nó có thể nói là một công cụ mạnh cho việc tạo và hỗ trợ thêm về từ khoá cho site của bạn. Đôi khi bạn hay phải cập nhật từ khoá hot cho site, nhưng công việc bận rộn, khiến bạn không thể rảnh tay mà cập nhật được. Mình làm tool này mong làm giảm nhẹ việc đó. Tất cả các từ khoá sẽ được cập nhật từ người dùng, các từ khoá tìm kiếm nhiều nhất, hot nhất đều được tự động thêm vào sau mỗi ngày, mỗi giờ, tuỳ vào tuỳ chỉnh của bạn.
Đọc thêm »

Saturday, June 8, 2013

Tạo hiệu ứng đẹp cho hình ảnh

Hôm nay Vietin24h.com sẽ giới thiệu đến các bạn code tạo hiệu ứng đẹp cho hình ảnh ! Ưu điểm của đoạn code này là chỉ dùng CSS3 va HTML nên không ảnh hưởng gì đến tốc độ của Website/blog của bạn 

Ảnh minh họa: 
Các bước thực hiện: 
Đọc thêm »

Sunday, June 2, 2013

Thanh di chuyển lên,xuống,cuộn trang cho Blog

Để thuận tiện hơn trong việc di chuyển trên trang ,cuộn trang theo kiểu xoắn ốc đây là thủ thuật tạo ra các nút di chuyển Home, Page Up, Page Down And và cuôn trang dự động!
Ảnh mịnh họa:



Cách thực hiện:
1. Đăng nhập Blogger
2. Chọn mẫu--> Chỉnh sảu HTML
3.Tìm đến thẻ </body> và dán code bên dưới vào trước nó:


Đọc thêm »

Thêm 3 lựa chọn cho giao diện Blog/website

Hôm nay Viettin24h giới thiệu đến các bạn thêm một số template! Hi vọng các bạn sẽ chọn được 1 giao diện đẹp và thích hợp cho mình!

1.Johny Kena Banned 





2.Johny jeepers


Johny jeepers Banget




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

Tuesday, May 28, 2013

Thêm hộp Google plus vào Blogspot

Hôm nay mình giới thiệu đến các bạn thủ thuật tạo hộp box Google+++

Ảnh minh họa:
Đọc thêm »

Like box facebok xuất hiện khi vào Blog/web

Ảnh minh họa:

Các bước thực hiện: 
 1. Đăng nhập Blog
 2. Bố cục--> Thêm tiện ích HTML/javascritpt
 3. Dán code sau vào tiện ích HTML trên:

<!--popup box like Facebook - up by quangvietmkt -->
<div style='position: fixed; left: 0%; top: 0%;'>
<style type='text/css'>
#makingdifferentpopup{

border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:300px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7T5uRKeaAgz0N2sWSBCW3h-UnIjAQF3mdwLhGzM1UbnDhECoE-FtbzPbXivhwbyQ9D8LJIqmH5HAYqaAgpVhyGrSB_acjuKWjxi0YQFmOEkEa1yJ8uXEZYqcjANOxKAB_Ojini_xYeUOY/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup() {
var sec = 10
var timer = setInterval(function() {
$(&quot;#mdfooter span&quot;).text(sec--);
if (sec == 0) {
$(&quot;#makingdifferentpopup&quot;).fadeOut(&quot;slow&quot;);
clearInterval(timer);
}
},1000);
var mdwh = jQuery(window).height();
var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
var mdfromTop = jQuery(window).scrollTop()+50;
jQuery(&quot;#makingdifferentpopup&quot;).css({&quot;top&quot;:mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
//alert(jQuery.cookie(&#39;sreqshown&#39;));
//var mdww = jQuery(window).width();
//var mdppw = jQuery(&quot;#makingdifferentpopup&quot;).width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 500;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;1&quot;, left: &quot;0&quot; , left: mdleftm}, 0).show();
jQuery(&quot;#mdclose&quot;).click(function() {
jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;0&quot;, left: &quot;-5000000&quot;}, 1000).show();});});
</script>
<div id='makingdifferentpopup'>
<h1>
Like Fan Page Quangvietmkt</h1>
<div class='htmlarea'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=
http://www.facebook.com/pages/VIT-Tin-t%E1%BB%A9cGi%E1%BA%A3i-tr%C3%ADTh%E1%BB%A7-thu%E1%BA%ADt/102371373304961&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250' style='border:none; overflow:hidden; width:300px; height:250px;'/>

</div>
<div id='mdfooter'>
Please wait..<span>10</span> Seconds
<a href='#' id='mdclose' onclick='return false;'>Close</a>
</div>
</div>
<!-- End popup -->
</div>


Tùy chỉnh: 
- Màu đỏ: bạn thay thành địa chỉ fanpage của mình]
- Màu xanh: tên hiển thị tiêu đề cho phù hợp
- code:  <div style='position: fixed; left: 0%; top: 0%;'> : bạn điều chỉnh lại theo ý bạn muốn hiển thị

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

Sunday, May 26, 2013

Tùy biến bài đăng phổ biến cho Blog

Thủ thuật này sẽ thay đổi một chút về giao diện của tiện ích Popular post . Tuy rất đơn giản nhưng cũng khá bắt mắt cho người đọc
 Ảnh minh họa:


Các bước thực hiện:1. Đăng nhập Blogger
2. Chọn bố cục-->Thêm tiện ích HTML/ Javascript và dán code bên dưới vào :


<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #PopularPosts1 li .item-title { color:#A5A9AB; font-size:1em; margin-bottom:0.5em; } #PopularPosts1 li .item-title a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #PopularPosts1 li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } #PopularPosts1 li .item-snippet { overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } #PopularPosts1 .item-snippet a, #PopularPosts1 .item-snippet a:visited { color:#3E4548; text-decoration: none; } #PopularPosts1 .spyWrapper { height: 100%; overflow: hidden; position: relative; } #PopularPosts1 { -webkit-border-radius: 5px; -moz-border-radius: 5px; } .tags span, .tags a { -webkit-border-radius: 8px; -moz-border-radius: 8px; } a img { border: 0; } --> </style>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').simpleSpy(); }); </script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
3.Đặt tiện ích vừa tạo lên trên "Popular posts"
minh họa :


Explanation of Popular Post with Animation


4. Lưu lại và xem kết quả

Saturday, May 25, 2013

Trình diễn bài viết mới hiệu ứng slider đẹp mắt

Hôm nay mình giới thiệu đến các bạn  một cách trình bài viết với hiệu ứng slider và trên các hình ảnh nhỏ hiệu ứng khi di chuột thích hợp cho các trang web/blog tin tức, trưng bày sản phẩm ....

Ảnh minh họa:


image slider otomatis

Các bước thực hiện: 
 1. Đăng nhập Blog
2. Chọn mẫu---> Chỉnh sửa HTML
3. Dán code sau vào trên thẻ :  ]]></b:skin>
#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4zyO3Vsotz1uCLF24xhjROaKdsi9DQruVT9mpcgWH1HgwTRTZqajWc7EQAxdsCvAjGInSzhu8a4y1ot00Z16L65H4o4v1BVGKz357zKDWjim9rJ5KunPm3EcMWtNXWGzZXkpNktjmCIG/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}


Điều chỉnh các thuộc tính màu xanh cho phù hợp

4. Tìm đến thẻ   </head>  dán code dưới vào trước nó:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TE_kziyolD44Ko3klFdjPf_cm9S1OyomOWxFxfutIBvAuFJtcxKE2vd__JFRoJiExfj1v3LlZik4j_9BV9V8v9XiI6keaAunn-Z7LbMj22cUZxKyEAgriEFHNc8UCcfuV54notF7lmE/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

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 showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
</script>

Tùy chỉnh:
-  numposts3 = 5  : Số bài viết hiển thị thanh trượt
width="407height="240  : Kích thước của ảnh chính
width="75" height="50"   :  Kich thước ảnh thanh trượt

5. Lưu mẫu
6. Layout---> Thêm HTML/Javascript và dán code bên dưới vào --> Đặt  vị trí bạn muốn:


<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Blogspot%20tips?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Blogspot%20tips?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Chỉnh lại label màu xanh cho phù hợp

 Nếu các bạn muốn hiển thị cho cả bài viết thi thay đoạn code :

script src=\"/feeds/posts/default/-/sport?max-results
bằng
script src=\"/feeds/posts/default?max-results
 
Chúc các bạn thành công

Friday, May 24, 2013

Giao diện đẹp thích hợp làm trang tin tức

Giao diện này rất nổi bật và nhiều tiện ích hay! Main body được xen lẫn hàng ngang và cột nên rất tiện lợi cho các bạn bày trí đẹp mắt






Hình ảnh bố cục giao diện





Hướng dẫn cài đặt

1. Sider: Các bạn tìm đến code
<div id='featuredContent'> <div id='slideshow'> <div id='slideshowThumbs'> <ul><script> document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script> </ul> </div> <div class='post' id='slideshowContent'> <script> document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> </div> <script type='text/javascript'> $(function() { $("#slideshowThumbs ul").tabs("#slideshowContent > div", { effect: 'fade', fadeOutSpeed: 1000, rotate: true }).slideshow({ clickable: true, autoplay: true, interval: 3000 }); }); </script> <div class='clear'> </div> </div>

2. Tiện ích bài viết theo nhãn





3.Tìm đến code
Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"

Chỉnh sửa lại tên cho phù hợp với Blog của bạn


4.Tiếp đến các bạn tìm code: 
<div class='tabber' id='tab1'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;); </script></div> <div class='tabber' id='tab2'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/lifestyle?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;); </script></div> <div class='tabber' id='tab3'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/economics?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;); </script></div> <div class='tabber' id='tab4'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/diary?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;); </script></div> <div class='tabber' id='tab5'> <script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/health?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;); </script></div> <div class='clear'> </div>

Chỉnh các label màu đỏ phù hợp

Có gì thắc mắc để lại comment ở dưới nhé!


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

Thanh các mạng xã hội bên phải Blog

Hôm nay mình sẽ giới thiệu đến các bạn một tiện ích khá hay cho Blog! Các trang mạng xã hội : facebook, Twitter, G+... xuất hiện thanh bên phải dọc theo Blog

Ảnh minh họa
floating social bookmark
Đọc thêm »

Slider bài viết mới trượt ngang cho Blog

Cách đây không lâu mình đã giới thiệu với các bạn trình diễn bài viết theo nhãn trượt ngang ( Xem tại đây) ->>>Hôm nay là Slider bài viết mới trượt ngang đẹp cho blog của bạn.

Ảnh minh họa

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnnhNf8rmIf3pGaKkmIJJNmzM1ZoTt3Sgv7xcQ2Jn28FfUsBKIUFa57IQAk8cw4zxKgKVw89q-ZcREX3T9vph3FLZvDt95RSUxeACynjz_voTwZ9RJPoCmVxLrC9KpzkTAOHglw7LqnM/s1600/slider+carousel.gif


Đọc thêm »

Thursday, May 23, 2013

Một số template đẹp và chuyên nghiệp cho Blog

1/Phiên bản template tin tức, news Vipshock V1 rất thành công tuy nhiên còn một số hạn chế và được khắc phục trong Vipshock V2:
+ Tối ưu load imager

+ Thêm Menu Drop xổ xuống

Demo:
Đọc thêm »

Wednesday, May 22, 2013

Recent post đẹp mắt cho blog chuyên nghiệp


Tiện ích recent posts kì này khác với tiện ích Recent post. Nhưng ở bản lần này sẽ có 2 điểm khác biệt, đó là các bạn có thể tùy chỉnh số bài viết có ảnh thumbnail, và điểm chú ý ở thủ thuật này là sẽ có ảnh gif minh họa cho bài viết mới. Mới ở đây là trong phạm vi 1 ngày.
Bạn có thể xem Demo:

Demo for
Đọc thêm »

Monday, May 20, 2013

Tự động đăng bài từ Blog lên Facebook, Twitter


Trong các kênh của Marketing OnlineSocial Media Marketing không chỉ là 1 kênh chăm sóc khách hàng mà việc chia sẻ, lan truyền trên mạng xã hội sẽ giúp độ phủ của website trở nên mạnh mẽ hơn. Bài viết sẽ hướng dẫn chia sẻ tự động bài viết lên 2 mạng xã hội lớn nhất hiện nay: Facebook &Twitter.

Chúng ta sẽ chia sẻ từ website lên Twitter và từ Twitter lên Facebook
Bước 1.    Từ website lên Twitter
Đọc thêm »

Code popup chỉ xuất hiện 1 lần duy nhất trong 1 ngày với 1 địa chỉ ip!

Hiện nay để tránh tình trạng các đối tác chuộc lợi bất chính từ các hợp đồng quảng cáo các công ty cung cấp dịch vụ quảng cáo đã áp dụng các điều luật dành cho hình thức always on top như chỉ chấp nhận thanh toán với những click xuất hiện 1 lần/1 ngày/1 ip máy tính. Như vậy nếu có mở nhiều lần cũng chỉ được tính một lần. Vạy tại sao ta không giới hạn số lần mở của sổ popup với tàn xuất 1 lần/1 ngày/1 ip để tránh gây phản cảm cho dộc giả truy cập vào blog của bạn.




» Cách tạo quảng cáo popup chỉ xuất hiện 1 lần duy nhất trong 1 ngày với 1 địa chỉ ip!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ mở sau:
<body>
- Thay thế đoạn code vừa tìm được thành đoạn 1 trong 2code bên dưới:


<body onclick='popunder();'>
<script>
/* <![CDATA[ */
function Set_Cookie(a,b,c,e,f,g){var d=new Date;d.setTime(d.getTime());d=new Date(d.getTime()+c);document.cookie=a+"="+escape(b)+(c?";expires="+d.toGMTString():"")+(e?";path="+e:"")+(f?";domain="+f:"")+(g?";secure":"")}function Get_Cookie(a){var b=document.cookie.indexOf(a+"="),c=b+a.length+1;if(!b&&a!=document.cookie.substring(0,a.length)||-1==b)return null;a=document.cookie.indexOf(";",c);-1==a&&(a=document.cookie.length);return unescape(document.cookie.substring(c,a))} function Delete_Cookie(a,b,c){Get_Cookie(a)&&(document.cookie=a+"="+(b?";path="+b:"")+(c?";domain="+c:"")+";expires=Mon, 11-November-2020 00:00:01 GMT")}
function popunder(){null==Get_Cookie("cucre")&&(Set_Cookie("cucre","cucre Popunder","1","/","",""),
pop=window.open("http://quangvietmkt.blogspot.com/","windowcucre"),
pop.blur(),window.focus())}function addEvent(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener?a.addEventListener(b,c,!0):a["on"+b]=c} addEvent(window,"load",function(){addEvent(document.body,"click",function(){popunder()})});
/* ]]> */
</script>


hoặc

<script>
//<![CDATA[
function Set_Cookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
var expires_date = new Date(today.getTime() + (expires));

document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}

function Get_Cookie(name) {

var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) &&
(name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}

function Delete_Cookie(name, path, domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
";expires=Mon, 11-November-1989 00:00:01 GMT";
}

function popunder() {
if (Get_Cookie('cucre') == null) {
Set_Cookie('cucre', 'cucre Popunder', '1', '/', '', '');
var url = "http://quangvietmkt.blogspot.com/";
pop = window.open(url, 'windowcucre');
pop.blur();

window.focus();
}
}

function addEvent(obj, eventName, func) {
if (obj.attachEvent) {
obj.attachEvent("on" + eventName, func);
}
else if (obj.addEventListener) {
obj.addEventListener(eventName, func, true);
}
else {
obj["on" + eventName] = func;
}
}

addEvent(window, "load", function (e) {
addEvent(document.body, "click", function (e) {
popunder();
});
});
//]]>
</script>
<body onclick='popunder();'>



- Thay http://quangvietmkt.blogspot.com/ thành URL trang 

quảng cáo bạn muốn mở trong cửa sổ Popup.

Sunday, May 19, 2013

Tùy biến trang chủ đẹp mắt cho blog

Hôm nay mình giới thiệu cho các bạn 1 cách tùy biến ở trang chủ đẹp mắt .

»Một số đặc điểm nổi bật của Recent post hompage Magazine ves 3?
- Giao diện đẹp, bắt mắt. cải tiến
- Khả năng tùy biến cao thông qua CSS.
- Sử dụng 1 file javascripts duy nhất cho tất cả các nhãn nhằm hạn chế ảnh hưởng tới tốc độ load của blog khi sử dụng scripts.
- Thêm thanh menu cho phần nhãn theo các chuyên mục khá đẹp.
Hãy xem demo hoặc ảnh minh họa bên cạnh để thấy rõ hơn nha.:  Demo
1- Đăng nhập vào blog
2- Chọn mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn mã bên dưới vào trước thẻ </head>



<b:if cond='data:blog.url == data:blog.homepageUrl'>      
<script type="text/javascript">
//<![CDATA[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
//]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
5- Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin> 


/* ------ main home -- namkna blog ------ */
.boxhome{
width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1,.box2{background:#fff;border:1px solid #ddd}
.box1{overflow:hidden;}
.box1-left{
width:380px; float:left; height:390px; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;
height:280px; width:380px;}
.box1-right{
height:45px; width:240px; float:right; line-height:18px; padding: 10px}
.box2-right:hover, .box1-right:hover {background:#3B5998}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left;
height:45px; width:72px; margin-right:10px}
.box2{margin-top:20px; overflow:hidden; }
.box2-left{width:390px; float:left; height:150px; padding:5px}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}
.box2-right img {float:left; height:30px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}
 
- Phần này mình để độ rộng của khung là 680px. Nếu độc rộng blog của bạn khác bạn sẽ phải chỉnh lại toàn bộ code để cho phù hợp nha. Bạn có thể tham khảo thuộc tính bên dưới:
  • width:680px độ rộng của cả khung. 
  • width:380px độ rộng khuing bên trái của ô bài viết mới nhất cho cả blog.
  • height:390px độ cao của khung bên trái ô bài viết mới nhất cho cả blog.
  •  height:280px; width:380px; Độ cao và độ rộng của ảnh thumbnail bên phải ô bài viết mới nhất cho cả blog.
  • height:45px; width:240px; độ cao và độ rộng của mục bài viết cột bên phải  ô bài viết mới nhất cho cả blog.
  • height:45px; width:72px; Độ cao và độ rộng của ảnh thumbnail bên trái  ô bài viết mới nhất cho cả blog.
6- Tìm đoạn mã bài viết như bên dưới (Mẹo: Tìm với từ khóa Blog1):

<b:section class='main' id='main' showaddelement='no'>
<b:widget id=
'Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
- Chèn vào sau nó đoạn code sau: 


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>

<div class='box1'>
<script src='/feeds/posts/default
?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Magazine Template</a></li>
<li><a href='#'>Shopping Template</a></li>
<li><a href='#'>Movie Tempalte</a></li>
</ul>
<script src='/feeds/posts/default/
-/Label1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>CSS - HTML</a></li>
<li><a href='#'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-
/Label2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>CSS - HTML</a></li>
<li><a href='#'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-
/Label3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

</div>
</b:if>

Trong đó:
  • Thay Label1Label2Label3 thành tên nhãn mà bạn muốn hiển thị. Lưu ý là tên nhãn phải chính xác cả dấu cách và các chữ in hoa hoặc in thường nếu sử dụng trong tên nhãn nha.
  • max-results=5 là số bài hiển thị ở cột bên trái của phần nhãn.
  • max-results=7 là số bài hiển thị ở cột bên phải mục bài viết mới nhất.,
Mẫu 2: chúng ta thay đoạn code ở  bước 5 bằng code này:


.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:0px;}
.box2{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:380px;border-right: #ABABAB 1px dashed; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:250px; width:300px}
.box1-right{height:50px; width:330px; float:right; padding:9px;line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#6CD0DD}
.box1-right a {padding:-5px 0px;margin:-5px 0px}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:50px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px;}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:35px; width:285px; float:right; border-left:#ABABAB 1px dashed; border-bottom:#ABABAB 1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:35px; width:48px; margin-right:5px}
.box1-left-info{ text-align:justify;}
.box2-left-info{height:170px; text-align:justify;margin:10px 0px 0px 0px; padding:10px 0px 0px 0px}
.box3{margin-bottom:10px; width:640px;}
.box1-googlesearch{width:650px;float:left}
.box1 img, .box2 img {box-shadow: 0.5px 0.5px 0.5px 0.5px #EEE;border-radius:4px;max-width: 600px; }
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: &quot;&quot;; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}