Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / MEMBUAT SLIDE BANNER LINK MAGZ

MEMBUAT SLIDE BANNER LINK MAGZ

Posting Komentar




Follow the easy steps below to add this cool responsive featured image slider to your templates.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Just below <head> tag paste the following JS and CSS source links:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
    Note: Do not add JQuery, FontAwesome, FlexSlider or Oswald source links to your template if you are already using them on your site.
  5. Next search ]]></b:skin> and just above/before it paste the following code:
    /*######### Blogger Image Slider By MyBloggerTricks #############*/
    .mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}
    .mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}
    .mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
    .mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}
    .mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
    .flex-direction-nav .flex-prev{left:-50px}
    .flex-direction-nav .flex-next{right:-50px;text-align:right}
    .mbt-s .flex-control-paging{display:none}
    .flex-direction-nav{position:relative;top:-250px}
    .mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
    .mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}
    .mbt-s li a{color:#0080ff;text-decoration:none}
    .mbt-s i{color:#999;padding-right:5px}
    .mbt-s .iline{line-height:2em;margin:0;position:relative;top:-87px;background:#31363a;padding:3px 10px;display:inline-block}
    .mbt-s .icontent{line-height:1.5em;margin-top:5px}
    .mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
    .mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}
    .mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}
    .mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}
    .mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
    .mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
    .mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
    .mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
    .mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
    .mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
    .mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}
    .mbt-s .icomments a:hover{text-decoration:underline}
    .mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
    .mbt-s .idate{color: #ff0;padding: 9px 10px;font-family: Oswald;
        font-size: 12px;position: relative;top: -270px; left:-80px;
        background: #222;width: 23px;text-align: center;line-height: 1.8em;}
    .mbt-s .idate b{font-size:17px;}
  6. Make these changes
    • To change the black background color behind the title and date edit: #222
    • To change the yellow color of the slide title and date font edit: #ff0
    • To change the color of the comment link edit: #0080ff
  7. Save your template.
  8. Now go to Blogger > Layout
  9. Select "Add a Gadget"
  10. Choose "HTML/JavaScript" gadget
  11. Keep the title field empty and then paste the following code inside it:
    <script type="text/javascript">
    $(window).load(function() {
      $('.mbt-s').flexslider({
    animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});
    </script>
    <div class="flexslider mbt-s">
    <ul class="slides">
    <!-- SLIDE 1 -->
    <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li>
    <!-- SLIDE 2 -->
    <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li>
    <!-- SLIDE 3 -->
    <li>
    <div class="flex-div">
    <div class="iFeatured">
    <a href="POST LINK"><img src="POST IMAGE" /></a></div>
    <div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>
    </div>
    </li>
    </ul></div>
  12. The above code will help you create three image slides. Each slide has the same code. You just need to change the required fields in this format:
    • Replace POST LINK with Post URL. It must start with http://
    • Replace POST IMAGE with the thumbnail URL. Make sure your image should be at least 600px in width.
    • Replace AUTHOR IMAGE with author image URL also called author avatar or profile image. This image could have a small size, say for instance less than 50px in width and height. Same size for width and height.
    • Replace AUTHOR NAME with author name of that post.
    • Replace COMMENTS COUNT with how many comments are posted on that post.
    • Replace Jun and 10 with month and day respectively of published date.
    • Replace POST TITLE with the textual title of the post.
    • To add an additional slide simply copy the slide code starting from <li> and ending at </li> and paste it just above </ul></div>.
  13. Finally click save your widget and you are all done!

Posting Komentar untuk "MEMBUAT SLIDE BANNER LINK MAGZ"