Chủ Nhật, 16 tháng 11, 2014

Cho đến ngày tôi có Slider bài viết nổi bật cho Blogger của tôi cho thanh trượt nội dung trên page. Là nhà nghĩ rằng các blogger muốn thêm Slider nội dung nổi bật để blog. Featured Content Slider giúp bạn để hiển thị tự động trượt nội dung đặc trưng của bạn trên trang chủ của bạn. Đây là mẹo tuyệt vời để hiển thị nội dung quan trọng nhất của bạn là nổi bật nội dung trên trang chủ của bạn. Nội dung Nổi bật trượt cũng giúp tăng lượt xem và giảm tỷ lệ trả lại của blog của bạn. 

Thêm Slider bài viết nổi bật cho Blogger.

Bước 1: 

 Đăng nhập vào Blogger =>Bố Cục => HTML/Javascrip thêm một widget ở nơi bạn muốn hiển thị slider bài viết.

Bước 2: 

Dán đoạn code bên dưới vào trong widget
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/2tuqn164c49bv4l/mbt-slider-0-01-jis.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/t2e14sks1ufhcwp/mbt-slider-0-02-jis.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/q81tdxkefnkwyxj/mbt-slider-0-03-jis.js" type="text/javascript"/></script><script type="text/javascript">/* <![CDATA[ */jQuery.noConflict();jQuery(function(){ jQuery('ul.menu-primary').superfish({ animation: {opacity:'show'},autoArrows: true,dropShadows: false, speed: 200,delay: 800});});    jQuery(function(){ jQuery('ul.menu-secondary').superfish({ animation: {opacity:'show'},autoArrows: true,dropShadows: false, speed: 200,delay: 800});});    jQuery(document).ready(function() {jQuery('.fp-slides').cycle({fx: 'fade',timeout: 4000,delay: 0,speed: 1000,next: '.fp-next',prev: '.fp-prev',pager: '.fp-pager',continuous: 0,sync: 1,pause: 1,pauseOnPagerHover: 1,cleartype: true,cleartypeNoBg: true});});    /* ]]> */    </script><a href="http://www.mybloggertricks.org/" rel="dofollow" target="_blank" title="blogger templates"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.mybloggertricks.org/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.mybloggertricks.org/2014/05/featured-content-slider-for-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="Fetured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} .fp-slides{} .fp-post{padding:13px;} .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} .fp-title a{color:#000;text-decoration:none;} .fp-title a:hover{color:#0080fF;text-decoration:none;} .fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} .fp-nav{width:590px;padding:0px 10px;height:14px;} .fp-pager a{background-image:url(http://2.bp.blogspot.com/-v3W9gCwnf4U/Tythw36ZkjI/AAAAAAAAAN8/WRB0morWYQM/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(http://1.bp.blogspot.com/-6ahEuAYHbEc/Tythvwy8nSI/AAAAAAAAANw/j5C2XRRPmvU/s1600/featured-prev-24work-1.png) top left no-repeat;} .fp-prev:hover{opacity:1;} .fp-prev:active{opacity:0.7;} .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(http://2.bp.blogspot.com/-oXQ8F_kSdS8/TythwUH4SrI/AAAAAAAAAN0/gc8pc6_1SlY/s1600/featured-next-24work-1.png;) top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}</style>    <div class="featuredposts clearfix"><div class="fp-slides"><div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://4.bp.blogspot.com/-5QLMjvy6SZ4/T8jKmOSDNbI/AAAAAAAAB2o/LZFGFRfj1BY/s400/add-nivo-slider-to-blogger-blog.png" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>    <div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>    <div class="fp-post">    <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div>    <h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>    </div><div class="fp-nav clearfix"><span class="fp-pager"></span><a class="fp-next" href="#fp-next"></a><a class="fp-prev" href="#fp-prev"></a>    </div></div>

Bước 3 :

Chỉnh sửa những phần mình bôi đỏ và lưu lại kiểm tra thành quả vừa làm được 

0 nhận xét:

Đăng nhận xét