slider-2

A nice easy Javascript Slider with "recent Posts" label showing or whichever is your choice

EXAMPLE::

ORIGINAL CODE:

<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJA9srgAqPODX3NTIqPezE85V4ktw7bCQK96rPOW_9mZwrjP7xsgAFRAX0eM2GnpZneiTvr1yQv6SzJVB5Jr5wXG6pXls2uuLmtnH4wk_wRcTIrH_02wAHjZbKdd6SMMZHPbmyxRSVuaKv/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>

<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider2").BloggerDynamicSlider({
        blogURL: "http://labelpost.blogspot.com/", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"
        labelName: "Demo Photo", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
        maxItem: 9, // Max number of Slider Posts to show
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayDark", // Select post title/caption style "default, "overlayDark" or "overlayLight"
        imageWidth: 704, // Image width in px value
        imageHeight: 440, // Image height in px value
    });
});
</script>

Read More

slider-1

EXAMPLE::

Camera is a responsive/adaptive slideshow. Try to resize the browser window

It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers

It's completely free 

Camera slideshow provides many options to customize your project as more as possible

It supports captions, HTML elements and videos.

I used photos from my Flickr acct https://www.flickr.com/photos/lazsrealm/
Source: bloggerslider.shuvojitdas.com

CODE::

<!---------------------------------------------
    Blogger Slideshow Widget by
    http://imagesliderforblogger.blogspot.com/
    org. by dimpost.com
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link href="http://project.dimpost.com/camera-slideshow/css/camera.css" id="camera-css" media="all" rel="stylesheet" type="text/css"></link>
<!-- Camera Slideshow Scripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/camera-slideshow/scripts/camera.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 4500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1000, // length of the sliding effect in milliseconds
        thumbnails: true, // thumnails & tooltip is controlled by it
        pagination: false, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<br />
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
    <br />
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="http://www.dimpost.com/" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
</div>
<div data-link="http://www.dimpost.com/" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
            </div>
</div>
<div data-link="http://www.dimpost.com/" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em>&nbsp;</div>
</div>
<div data-link="http://www.dimpost.com/" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
            </div>
</div>
<div data-link="http://www.dimpost.com/" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos.
            </div>
</div>
</div>
<!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

<br />
<i><br /></i>
<i><br /></i>
<i>I used photos from my Flickr acct</i> <a href="https://www.flickr.com/photos/lazsrealm/" target="_blank">https://www.flickr.com/photos/lazsrealm/</a><br />
Source:&nbsp;<a href="http://bloggerslider.shuvojitdas.com/2015/12/how-to-add-responsive-slideshow-widget-to-blogger.html" target="_blank">bloggerslider.shuvojitdas.com</a><br />
<b><br /></b>

Read More

daily-image-script

Code for Images

<br>
Day of the Year<br>
    
    <script type="text/javascript">
        var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start;
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);
console.log('Day of year: ' + day);
    </script>
<br>
Day of the Year #2<br>
<script type="text/javascript">
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start + (start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000;
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);
console.log('Day of year: ' + day);
 </script>



<span style="color: #cc0000;">https://www.miniwebtool.com/day-of-year-calendar/</span><br>
<span style="color: #cc0000;">https://www.calendardate.com/todays.htm</span><br>
<span style="color: #cc0000;">Code for Images</span><br>
<script language="JavaScript">

var now = new Date();
var dd = now.getDate();

if (dd==1)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/1.jpg">');
else if (dd==2)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/2.jpg">');
else if (dd==3)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/3.jpg">');
else if (dd==4)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/4.jpg">');
else if (dd==5)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/5.jpg">');
else if (dd==6)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/6.jpg">');
else if (dd==7)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/7.jpg">');
else if (dd==8)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/8.jpg">');
else if (dd==9)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/9.jpg">');
else if (dd==10)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/10.jpg">');
else if (dd==11)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/11.jpg">');
else if (dd==12)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/12.jpg">');
else if (dd==13)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/13.jpg">');
else if (dd==14)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/14.jpg">');
else if (dd==15)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/15.jpg">');
else if (dd==16)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/16.jpg">');
else if (dd==17)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/17.jpg">');
else if (dd==18)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/18.jpg">');
else if (dd==19)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/19.jpg">');
else if (dd==20)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/20.jpg">');
else if (dd==21)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/21.jpg">');
else if (dd==22)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/22.jpg">');
else if (dd==23)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/23.jpg">');
else if (dd==24)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/24.jpg">');
else if (dd==25)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/25.jpg">');
else if (dd==26)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/26.jpg">');
else if (dd==27)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/27.jpg">');
else if (dd==28)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/28.jpg">');
else if (dd==29)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/29.jpg">');
else if (dd==30)
document.write('<img src="http://www.penoxgroup.com/images/galleries/default/30.jpg">');

</script>

https://www.miniwebtool.com/day-of-year-calendar/
https://www.calendardate.com/todays.htm

Read More

Multi-Feed Script

/* Multi Feed Loader /www.arlinadzgn.com */

Read More

Dailymotion Shortcode

[dailymotion highlight="70CF0A" height="300" src="x273r70" info="0"][/dailymotion]

Embed customized Dailymotion videos anywhere in blogger using shortcodes.

example source: http://blogger-shortcode.blogspot.com/2015/03/dailymotion-shortcode.html

[dailymotion highlight="70CF0A" height="300" src="x273r70" info="0"][/dailymotion]

Read More

Wonder-Widget

Each day, this widget will automatically update with the new Wonder of the Day® — offering an easy reminder that every single day Wonderopolis offers a daily dose of family learning.

Example:

CODE <span style="color: orange; font-family: &quot;trebuchet ms&quot; , sans-serif;"><b><iframe src="https://wonderopolis.org/widget" width="360" height="730" frameborder="0"></iframe></b></span>

Read More

Tip of the Week

This free script provided by JavaScript Kit

Read More

Daily HTML Quote

Example:

"This free script provided by JavaScript Kit and yourlifeyourway.net for quotes"

HTML CODE:

<div align="center"><script>

<!--

/*

Tip of the day script

By JavaScript Kit (http://javascriptkit.com)

Over 200+ free scripts here!

*/

var today_obj=new Date()

var today_date=today_obj.getDate()

var tips=new Array()

//Configure the below variable to contain the "header" of the tip

var tiptitle='<img src="../../tip.gif"> <b>JavaScript Tip of the day</b><br />'

//Configure the below array to hold the 31 possible tips of the month

tips[1]='Tip 1 goes here'

tips[2]='Tip 2 goes here'

tips[3]='Tip 3 goes here'

tips[4]='Tip 4 goes here'

tips[5]='Tip 5 goes here'

tips[6]='Tip 6 goes here'

tips[7]='Tip 7 goes here'

tips[8]='Tip 8 goes here'

tips[9]='Tip 9 goes here'

tips[10]='Tip 10 goes here'

tips[11]='Tip 11 goes here'

tips[12]='Tip 12 goes here'

tips[13]='Tip 13 goes here'

tips[14]='Tip 14 goes here'

tips[15]='Tip 15 goes here'

tips[16]='Tip 16 goes here'

tips[17]='Tip 17 goes here'

tips[18]='Tip 18 goes here'

tips[19]='Tip 19 goes here'

tips[20]='Tip 20 goes here'

tips[21]='Tip 21 goes here'

tips[22]='Tip 22 goes here'

tips[23]='Tip 23 goes here'

tips[24]='Tip 24 goes here'

tips[25]='Tip 25 goes here'

tips[26]='Tip 26 goes here'

tips[27]='Tip 27 goes here'

tips[28]='Tip 28 goes here'

tips[29]='Tip 29 goes here'

tips[30]='Tip 30 goes here'

tips[31]='Tip 31 goes here'

tips[32]='Tip 32 goes here'

document.write(tiptitle);

document.write('<span style="color: maroon;">');

document.write(tips[today_date]);

document.write('</span>');

//-->

</script>

</div>

<div align="center">

<span style="font-size: xx-small;"><span style="font-family: arial;">This free script provided by <a href="http://www.codingforums.com/javascript-programming/160083-tip-day-script.html?highlight=message+year" target="new">JavaScript Kit</a></span></span></div>

Read More

Animated-Rotating text quotes

I'm a huge fan of inspirational quotes and have been on the lookout for "scripts" 
This one seems to work well so far and will generate a new quote automatically or until you change the page.

Create a new Posts >> Edit HTML Tab and just paste the following JavaScript
 and CSS Codes within the Blogger HTML Editor.

Add these 3 lines

<!-- MyBloggerLab Quote Rotator -->

<link href="https://drive.google.com/open?id=0B1Fxft67CB1zdkZ3YldjMlgxNWM" rel="stylesheet"></link>

<script src="https://drive.google.com/open?id=0B1Fxft67CB1zcFN6UldvSlFQTWc" type="text/javascript"></script>

 <script>

 jQuery(document).ready(function($) {

  $('#words').quoteRotator();

 });

 </script>

<!-- MyBloggerLab Quote Rotator -->

Then add the following HTML code into the Blogger HTML Editor so that you can create the rotating and animated text quotes such as... 

<div id="words">

<ul class="word-container">

<li data-author="---  Syed Faizan Ali" data-easeout="lightSpeedOut">Blogging is not about earning. Its about serving the Humanity.</li>

<li data-author="---  Syed Faizan Ali">Don't choose Blogging as your profession, unless you really have no choice!!!</li>

<li data-author="---  Syed Faizan Ali" data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>

<li data-author="---  Syed Faizan Ali" data-easein="fadeInDown">The Lift is too short, Live it or be dead. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li>

<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss.</li>

</ul>

<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

mybloggerlab.com
http://www.jqueryscript.net/rotator/jQuery-Quote-Rotator-with-A-Slim-Progress-Indicator-simpleQuote.html


EXAMPLE::
.cbp-qtrotator { width: 800px; height: 180px; position: relative; float: left; margin: 0; padding-top: 11px } .cbp-qtcontent { width: 100%; height: auto; position: absolute; min-height: 180px; top: 0; z-index: 2; display: none } .cbp-qtrotator .cbp-qtcontent.current { display: block } .cbp-qtrotator blockquote { margin: 40px 0 0 0; padding: 0 } .cbp-qtrotator blockquote p { font-size: 2em; color: #888; font-weight: 300; margin: 0.4em 0 1em } .cbp-qtrotator blockquote footer { font-size: 1.2em } .cbp-qtrotator blockquote footer:before { content: '― ' } .cbp-qtrotator .cbp-qtcontent img { float: right; margin: 50px 0 0 50px } .cbp-qtprogress { position: absolute; background: #47a3da; height: 1px; width: 0%; z-index: 1000 }

Quote 1

Author 1

Quote 2

Author 2

Quote 3

Author 3

...

Read More

Holiday Widget

Copy and paste this code into your website: Direct link to this dailymotion jukebox:
http://www.dailymotion.com/widget/jukebox?list[]=%2Frated%2Fuser%2Flori-ann2%2F1&&autoplay=0&mute=1

Source: 100Widgets.com

Read More

sudoku game

Cute little sudoku game to add to your blogger site. 
Click here to customize your colors, size  etc...

Code: 
<iframe src=http://widgetscode.com/wc/sudoku/all?skin=dblue1 style='width:250px;height:370px;margin:0;'frameborder=0></iframe>
EXAMPLE:

Read More

Facebook Pop-up

Simple lil code for making a facebook pop-up using cookies
  Source from knigulper.blogspot.com


Go To blogger dashboard/Template/Edit HTML and paste the code below

BEFORE the ]]<>b:/skin>

/*=============== CSS Popup Like box by msdesignbd.com ======================*/ .mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none} .mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)} .mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff} .mspopup .mspopup-close:hover{color:#535353} .mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383} .mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial} .mspopup .mspopup-content{padding:10px 20px}

Now post the given code before </body>

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/> <script type='text/javascript'> $(&#39;#popup-box&#39;).mspopup({ &#39;autoOpen&#39;: true }); </script>

When you complete the above mentioned steps, click the Save button
Navigate to Layout >Add a gadget >HTML/Javascript and past below code.

<div id="popup-box" class="mspopup"> <div class="mspopup-container"> <div class="mspopup-header"> <div class="mspopup-close" data-dismiss="mspopup">x</div> Like us and Join with our community <p> Get our all latest update from our facebook page, Its free and speedy</p> </div> <div class="mspopup-content"> <div class="fb-page" data-href="https://www.facebook.com/LazsRealm/" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div> </div> </div> </div>

note: Replace LazsRealm with your facebook name 

Read More