Image Slider According To Your Blog Post - No Manual Need It

1.Go To Blogger > Design
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

Pls not using Top To Down Arrow script, it's will stop your slider, in this case you may change your "Top To Down" Button or do not used below automatic slider code

Code 1 Sila Paste di atas code </head>
<!-- Slider 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG855roT8MwwDlo7J6_HSYy-2oNDST1ySdvlPqJgvsjQjS8IO_ye0Az6H2DUn3plVydc0FFP20ChiMQK8kQhCpcKJvr3QISz0y5jNNv_VDlTdP1yszjS1VxyaWMkMT12HDvsRkObqpczF/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>

Code 2  Sila Paste di atas code </body>
<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>

That All, you are done, pls preview your template.

Google Barcode