Sunday, October 1, 2017
Thursday, September 14, 2017
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>
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>
slider-1
EXAMPLE::
I used photos from my Flickr acct https://www.flickr.com/photos/lazsrealm/
Source: bloggerslider.shuvojitdas.com
CODE::
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> </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: <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>
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> </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: <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>
Wednesday, September 13, 2017
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
Tuesday, September 12, 2017
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] |
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: "trebuchet ms" , sans-serif;"><b><iframe src="https://wonderopolis.org/widget" width="360" height="730" frameborder="0"></iframe></b></span>
Monday, September 11, 2017
Daily HTML Quote
Example:
"This free script provided by JavaScript
Kit and yourlifeyourway.net for quotes"
HTML CODE:
<div align="center"><script>
<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>
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
<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 }
...
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>
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
Quote 2
Quote 3
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
http://www.dailymotion.com/widget/jukebox?list[]=%2Frated%2Fuser%2Flori-ann2%2F1&&autoplay=0&mute=1
Sunday, September 10, 2017
Saturday, September 9, 2017
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>
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'> $('#popup-box').mspopup({ 'autoOpen': 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
Began 2017 by LoriAnn. Powered by Blogger.