Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis. Bisa menampilkan posting terbaru, juga dapat menampilkan post per label / kategori. Lihat Demo1

Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis

Features Blogger Dynamic Slider:

  • Content Generates Automatically
  • Fully Responsive
  • Slider By a Specific Label
  • Slider By Recent Posts
  • Preloader Function
  • Lots of Customization Options
  • Easy Setup & Customization


Featured Post Image Slider di Blogger Otomatis ini cocok untuk blog toko online atau blog bisnis untuk menampilkan produk atau jasa unggulan.

Cara Memasangnya:1. Template > Edit HTML

Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis

2. Simpan isyarat berikut ini di atas isyarat </head> 

<!-- BloggerDynamicSlider Basic CSS --> <style type="text/css"> /**  *  jQuery BloggerDynamicSlider v1.0.0  *  Copyright 2016 http://shuvojitdas.com  *  Contributing Author: Shuvojit Das  *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider  *  */  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400); @import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");  /* Preloader */  .flexslider.loading:after {     content: '';     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;     background-color: rgba(255, 255, 255, 0.9);     z-index: 9999; }  .flexslider.loading ul.flex-direction-nav, .flexslider.loading ol, .loading .flex-caption {     display: none; }  .flexslider {     border: 1px solid #cacaca;     padding: 4px;     margin: 0 auto 60px auto;     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);     -webkit-border-radius: 0;     -moz-border-radius: 0;     border-radius: 0; }  .flexslider a {     text-decoration: none; }   /* Caption/Post Title */  .flex-caption {     position: relative;     padding-left: 15px;     padding-right: 10px;     height: 60px;     background: #FFFFFF;     color: #1C1C1C;     font-family: 'Open Sans', sans-serif;     font-weight: 300;     font-size: 26px;     line-height: 26px;     margin: 0;     -webkit-backface-visibility: hidden;     -moz-backface-visibility: hidden;     -ms-backface-visibility: hidden;     backface-visibility: hidden; }  .flex-caption span {     display: table-cell;     vertical-align: middle;     height: 60px; }  .flex-caption.overlayDark, .flex-caption.overlayLight {     margin-bottom: -60px;     bottom: 60px;     position: relative; }  .flex-caption.overlayDark {     background: rgba(0, 0, 0, 0.7);     color: #fff; }  .flex-caption.overlayLight {     background: rgba(255, 255, 239, 0.9);     color: #000; }  ul.slides li a {     display: block;     overflow: hidden; }   /* blogger css conflicts fix */  .flexslider ul {     margin: 0 !important;     padding: 0 !important;     line-height: initial !important; }  .flexslider ul.flex-direction-nav li {     margin: 0;     padding: 0;     line-height: initial; }  .flexslider ul li {     margin-bottom: 0 !important; }  .flexslider img {     padding: 0;     border: none;     -webkit-box-shadow: none;     box-shadow: none; }  ul.flex-direction-nav {     position: static; }  ul.flex-direction-nav li {     position: static; }  .error {     font-family: monospace, sans-serif; }  @media (max-width: 600px) {     .flex-caption {         font-size: 20px;         line-height: 20px;         font-weight: 400;     } } </style> <!-- Include Dependency Script --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script> <script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Note: 
Jika kode 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

sudah ada di template blog Anda, maka gak usah diikutkan, hapus saja.

3. Save Template!
Kembali ke Dashboard
- Layout > Add a Gadget > pilih HTML/Javascript
- Copas isyarat berikut ini:

<div id="slider1"></div> <script type="text/javascript"> $(document).ready(function() {     $("#slider1").BloggerDynamicSlider({         imageWidth: 636, // Image width in px value         imageHeight: 398, // Image height in px value         maxItem: 6, // Max number of Slider Image to show         animation: "slide", // Select your animation type, "fade" or "slide"         showPostTitle: true, // Show post title as Caption ? (true/false)         postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"     }); }); </script>

Beres!
All the options of 'Blogger Dynamic Slider'

$("#slider1").BloggerDynamicSlider({     blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog     labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts     maxItem: 6, // Max number of Slider Posts to show     showPostTitle: true, // Show post title as Caption ? (true/false)     postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"     imageWidth: 544, // Image width in px value     imageHeight: 280, // Image height in px value     animation: "fade", // Select your animation type, "fade" or "slide"     controlNav: true, // Navigation for paging control of each slide? (true/false)     directionNav: true, // Previous/next navigation? (true/false)     pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)     slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds     animationSpeed: 600, // Set the speed of animations, in milliseconds     animationLoop: true, // Should the animation loop? (true/false) });

Demikian Cara Membuat Widget Featured Post Image Slider di Blogger Otomatis. 

Sebelumnya CB juga sudah share:
Good Luck & Happy Blogging! (http://www.idtutorial.com).*


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours