bvlq-blogspot

Cách tạo bài viết liên quan góc bên phải hiển thị khi kéo chuột blogspot. Bài viết nổi bật hiện ra góc phải góc trái màn hình khi kéo chuột xuống. Code javascipt hiển thị bài viết liên quan góc phải góc trái màn hình khi kéo chuột cho blogspot

Đã lâu mình không viết bài chia sẻ thủ thuật về blogspot, hôm nay rảnh nên mình chia sẻ một thủ thuật nhỏ cho những ai chưa biết cách này khá hữu ích giúp người truy cập tương tác tốt hơn trên blog của bạn. Nếu bạn nó chưa biết có thể tham khảo nhé

TẠO BÀI VIẾT LIÊN QUAN GÓC PHẢI HIỂN THỊ KHI KÉO CHUỘT

- Để làm các bạn thực hiện khá đơn giản qua các bước sau

Bước 1: Copy code dưới lên trên */]]></b:skin>

/* Widget Rekomendasi */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.chslidingbox-title{background:#30373B;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#30373B;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

Bước 2: Tìm dòng <b:includable id='post' var='post'> copy code dưới xuống dưới nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Recommended Posts</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script type='text/javascript'>

//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.arlinadzgn.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);


//]]>
</script>    
</div>
</div>
</b:if>

Bước 3: Copy code dưới đây lên trên thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});

//]]>
</script>
</b:if>



fb gg tw up
Từ khóa: Tạo, bài, viết, liên, quan, góc, phải, hiển, thị, khi, kéo, chuột,
Cùng Chuyên Mục
cac-tin-khac
Blogger Comments
Facebook Comments

Tin Tức Online
Xem Thêm Tất Cả »
Góc Chia Sẻ
Xem Thêm Tất Cả »
Game - Ứng Dụng Hay Tháng 8
Xem Thêm Tất Cả »
Góc Thư Giản
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
  • no_thumb
    22.10.2015 - 0 Comments
    Phần mềm tính cột áp bơm nước McQuayLINK DOWNLOAD Thông Tin Bài Viết    +Updata…
  • widget-danh-gia-1
    07.12.2014 - 0 Comments
    Bước 1 Các bạn vào http://rating-widget.com/get/rating/blogger/#_=_  Nếu bạn chưa có tài khoản hãy…
  • B%25C3%2581O+C%25C3%2581O+TH%25E1%25BB%25B0C+T%25E1%25BA%25ACP+T%25E1%25BB%2594NG+H%25E1%25BB%25A2P+CHUY%25C3%258AN+NG%25C3%2580NH+K%25E1%25BA%25BE+TO%25C3%2581N+T%25C3%2580I+CH%25C3%258DNH+DOANH+NGHI%25E1%25BB%2586P+TH%25C6%25AF%25C6%25A0NG+M%25E1%25BA%25A0I+-+C%25C3%25B4ng+ty+C%25E1%25BB%2595+Ph%25E1%25BA%25A7n+T%25E1%25BA%25ADp+%25C4%2590o%25C3%25A0n+Th%25C3%25A1i+H%25C3%25B2a
    08.11.2015 - 0 Comments
    I. TỔNG QUAN VỀ CÔNG TY CỔ PHẦN TẬP ĐOÀN THÁI HÒA.. 61.1 Quá trình hình thành và phát triển của Công ty.…
  • no_thumb
    05.08.2016 - 0 Comments
    Microsoft Office Visio 2010 là một chương trình vẽ sơ đồ thông minh, được tích hợp vào bộ chương trình…
  • GI%25C3%2581O+TR%25C3%258CNH+-+Nh%25E1%25BA%25ADp+m%25C3%25B4n+Ho%25C3%25A0n+l%25C6%25B0u+kh%25C3%25AD+quy%25E1%25BB%2583n+%2528TG.+Ian+N.+James+-+Bi%25C3%25AAn+d%25E1%25BB%258Bch+V%25C5%25A9+Thanh+H%25E1%25BA%25B1ng+%2526+L%25C3%25AA+Th%25E1%25BB%258B+Th%25C6%25B0%25C6%25A1
    18.05.2016 - 0 Comments
    Chuyên khảo ny trình bầy quan điểm hiện đại về hoàn lưu khí quyển ton cầu. Trong chuyên khảo có sự phối…
Copyright © 2016 - All Rights Reserved
Template by Bùi Đạt - Powered by Blogger | SiteMap