Hello Guys Today i will share an awesome widget for blogger.Its look really beautiful
You can make your blog look more attractive by installing a slider image on your blog, to add to the appeal so that visitors interested to see pictures and links in seven by the slider.
There are many kinds of sliders that you can post on your blog, such as automatic slider recent article discussed earlier and also image slider where comrade must enter the picture buddy want into the slider.Now Follow The Steps.
[accordion][item icon="eye" title="DEMO"] [/item][/accordion]
Now replace all with a link destination image and caption.
If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.
You can make your blog look more attractive by installing a slider image on your blog, to add to the appeal so that visitors interested to see pictures and links in seven by the slider.
[accordion][item icon="eye" title="DEMO"] [/item][/accordion]
jQuery Image Slider with Thumbnails:
- Login back to your blogger account Select your blog < Template < Edit HTML
- Save a backup of your blog template code first, now click inside the template code box.
- Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Copy and Paste the below code above ]]></b:skin>
- Now Find the <head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Step Copy and Paste the below code above </head>
- Click on Save template to apply the CSS code to your blog.
- After adding the code to your blog’s template, all you need to do next is add the below line of code where ever you want to add the download button while composing a post.
/* image slider by prio-soft */
.slider-box { background:none repeat scroll 0 0 #FAFAFA; border-radius:5px 5px 5px 5px; box-shadow:0 0 3px #333333; margin:0 auto; width:675px; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:550px; position:relative; text-align:left; z-index:90; }
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://prio-soft.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8SxEo2kw1V23NiL106mY4N4YHnn44kEeRo_41Gl9ob8riPkAXrfKLzV_5nb_9ENeh3KZWzfSkpJOyAKkIHKllf1adjw9bvIgpFT9U91kEGr3ZygACjaXKKbo_vAdNeDkvfmJLoRRiS7cX/s550/sample1.jpg" title="Sunset"/></a>A boat with beautiful sunset.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV11ItZAUyeELtpk4c2_Ji7acTmHOsGfa_aUtzyeShcguoh8Np7NkVp97RT4MGC7OuOjwoXFWGs4ejdXxGKLO-JUe6fa8UmAHc9_btJuUxa4M9-zMLpZPAKkzoIQ5GNIMW6PHerxvojcq2/s550/sample2.jpg" title="Rainbow"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijY5OpVklQqdWgoixrRSqmMuEEDBPoHz3zyJx4dqn1LSC4hCCpBeX8X5c5b6fZrlimTJVBUcjlyNjdCGo3xtTYaStjXXEUDHPYvVm2txb9KsOYAl7he57vWyAiA5kjZHYz1rHGazsch-cn/s550/sample3.jpg" title="True Nature"/></a>Tree in field with blue sky.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcQNX7MA3ziHwrlV8c6MsaTKvegLn_GvafxoyKbiDzC9GrHVpz3k51ccEMUI1wkakyZhlFfyT3Yr6q8JLhD3gNoVxJR7ndevDoJdMDYXGyKKlvbBiShou8iRiK04LoKUpCRY-BApG6cTV/s550/sample4.jpg" title="Sunrise""/></a>Amaizing sunrise moment</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZryszgIU9azE8_lnyQux-Dnl6W03nl04zHt2NEi97lUIBPtAIYiPjgX1LjGGQiaintqiJD0eN7RgkYZfqnmvm_Anro3Vs5f9KiJsvbDtSleXG2QXbG8_Pv9k2TtfotrPvLXY0QoqcIZEM/s550/sample5.jpg" title="CAR in HDR Nature"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKnZx5S6v0QVOKB8hSvgnG49q2ss9Rj24T3dqXV62uHPB6sacgVczTiN0wW0l6w01VVoNjjJB9RjQN5B7zqXXP9QQ7t8kODa1SBn3e5ebuJ0_-5wtzD3raJ5bRCMI7LSpcPoasdb6NEU0/s550/sample6.jpg" title="Sunshine"/></a></li></ul></div><div class="jslider_thumbs"><div><a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcF5cUxIq-7BQvgU0hyphenhyphenRcaFA1No5-M9HxNSaEw-VZQ4uKKWfbLMwMPzoEh8Zdh3R0CRKeaKqMndWyeH6km5WkCVilspd2WGvWezMjbTywIMewd_ML80H5GMz_rXMfFotjVDat8AwvcAvY/s85/sample1.jpg"/></a><a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-yZd6zmZi9Mgkv1tnuLqRcTx1YCVVmh9rExaNeDpJrJzYD10Ce5PkhbFO3qz6T8UoN_FxUf_-r-NQtVGcYDZpQvQgPaIr-JoGxWSRRbUSPVVQpMuxtKr7grJ7NMpqBIOlXcWUZh0Caqm/s85/sample2.jpg"/></a><a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Kqxk1u1pzXmhktriW3Sflu37lhUAElE60Eu7mQ0Kc04cPV1shn1uLq_-GBH4zED68GU3ZdYmWjR3WCm8mUHb_X0na47eKUGJkoN7n3Pj3qyptO5MtxafIjARXtS-AxYod9p1Rli0XQmo/s85/sample3.jpg"/></a><a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2qytaJZUn7uSwsoMGHiS8NQsFPpGaP-FOV3MlbAp_g9jYw8Qa9N5F9hh45d-zmSazLzFHxeKT2HE6GO-54gFDG1-s7eNXxZhtuUIwNH4rL5jfT3gOfU3d9TPQlU5SN24ryCwaKmnr-08b/s85/sample4.jpg"/></a><a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzYsqLNYUKh8D-Lba_Ui5ItmG3wxDfMQyx48zizeTWBwHcNOCuZ33Gd34aLxgifHymHCDz9S0phgtMCtAJ0kQVhj7dyMrPGqxXUQ7lLVtIJs6B3BE4YRaAk6C_UA6aXVZXIcNf8CqowFF/s85/sample5.jpg"/></a><a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDKXwhfLINZhAYuqcfXetVK-K_3ZUKU1va2K_hlxRoFtM9_xmJMhnt4c7mN17mDgKruiif0tlL9cBCJHnuE6EMzs5Ar0pe9CTxvQ9Uf_Z_5iRJ3MRjrn467micYKH6H_Y-Vs_-SS4t5oO/s85/sample6.jpg"/></a></div></div></div></div></div>
Customization:
Now replace all with a link destination image and caption.
If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.
Any type of information please Contact us.
please tell me how can i modify the width of slider
ReplyDeletethx