Cara Dan Metode Menciptakan Widget Featured Post Image Slider Di Blogger Otomatis

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

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 Dan Teknik Memasangnya:1. Template > Edit HTML

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

<!-- BloggerDynamicSlider Basic CSS --> <style type="text/css"> /**  *  jQuery BloggerDynamicSlider v1.0.0  *  Copyright 2019 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXr8yKNBvt0twao378zDPGAlBMh5A2Vp4Iy5dnKTjWSEBXJ2wnhHrA8_Yhsz7nvDUin5-0bymH_0QvRzpEVryXXFuj8jetnnxtHmIoy60MsuuWjYhnx31fr_JmL5UGaEEfAz7GoOveRGF/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 instruksi 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 Dan Teknik Membuat Widget Featured Post Image Slider di Blogger Otomatis. 

Sebelumnya CB juga sudah share:

1. Modifikasi widget Featured Post bawaan Blogger
2. Featured Post SEO Friendly Halaman Depan Blog
3. Featured Post Content Slider Image
4. Featured Post Fast Loading

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber

Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Widget Featured Post Image Slider Di Blogger Otomatis

4/ 5

Oleh Unknown

Unknown Oktober 02, 2016