CSS3 Image Slider for Blogspot (Cycle Style)

CSS3 Image Slider for Blogspot (Cycle Style) Code

<style type="text/css" media="screen"> .container { margin: 0 auto; overflow: hidden; width: 730px; } #content-slider { height: 300px; width: 60%; } #slider { background: none repeat scroll 0 0 #000000; border: 5px solid #FFFFFF; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); height: 320px; margin: 10px auto; overflow: visible; position: relative; width: 580px; } #mask { height: 320px; overflow: hidden; } #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 580px; height: 320px; position: absolute; top: -325px; list-style: none; } #slider li.firstanimation { -moz-animation: cycle 25s linear infinite; -webkit-animation: cycle 25s linear infinite; } #slider li.secondanimation { -moz-animation: cycletwo 25s linear infinite; -webkit-animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { -moz-animation: cyclethree 25s linear infinite; -webkit-animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { -moz-animation: cyclefour 25s linear infinite; -webkit-animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { -moz-animation: cyclefive 25s linear infinite; -webkit-animation: cyclefive 25s linear infinite; } #slider .tooltip { background: rgba(0, 0, 0, 0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 20px; } #slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip { left: 0px; } /* PROGRESS BAR */ .progress-bar { position: relative; top: -5px; width: 500px; height: 5px; background: #000; -moz-animation: fullexpand 25s ease-out infinite; -webkit-animation: fullexpand 25s ease-out infinite; } /* ANIMATION */ @-moz-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; } } @-moz-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-moz-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; } } @-webkit-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 50% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; } } @-webkit-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; z-index: 0; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; } } @-webkit-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; } } /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } } </style> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://dimpost.com"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" /> </a> <div class="tooltip"> <h1> Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" /> </a> <div class="tooltip"> <h1> Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" /> </a> <div class="tooltip"> <h1> Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" /> </a> <div class="tooltip"> <h1> Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" /> </a> <div class="tooltip"> <h1> Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"> </div> </div> </div> </div>

Read More

Your Blogger blog from, "Powered by Blogger" remove the Widget

Your Blogger blog from "Powered by Blogger" to remove the Widget

Step-1

• Go to Blogger.com  and login to your Blogger Profile
• Select your blog that you wish to remove this attribute
• Now go to template click edit HTML

Step-2

Here drop-down "jump to widget"option and from that list select Attribution1 as highlighted below

Step-3

Now in te editor press ctrl+F and find for this line <b:widget id='Attributon1' looked='true' title="type=Attribution'>

Step-4

Now replace the loced='true' in locked='false' as you see highlighted below

• Once done click save template
• Now go to layout option and at the blow you can see attibution click edit.
• In that popup window click remove and are done

Please visit blog now "powered by Blogger" There is no Widget

Thank you visiting my site.

Please comment if you get stuck.

Read More

A beautiful and fitting for your blog Social Sharing Widget

Widget view this: 

Widget if you like to take a look at how to add it to your blog

Go to the Blogger Dashboard>>Templated>> Edit HTML

Ctrl+F to Search for </body> tag

Copy and paste the above.

<!--sharethis official floating social sharing widget....-->
<script type='text/javascript'>var switchT05x=true;</script>
<script src='http://w.sharethis.com/button/button.js' type='text/javascript'/>
<script src='http://s.sharethis.com/loader.js' type='text/javascript'/>
<script>
var options={ &quot;publisher&quot;: &quot;074821ed-063e-4ae5-bad9-3e26ecf249f3&quot;, &quot;position&quot;: &quot;left&quot;, &quot;ad&quot;:{ &quot;visible&quot;: true, &quot;openDelay&quot;: 5, &quot;closeDelay&quot;: 0}, &quot;chicklets&quot;: { &quot;items&quot;: [&quot;facebook&quot;, &quot;googleplus&quot;, &quot;twitter&quot;, &quot;linkedin&quot;, &quot;email&quot;, &quot;pinterest&quot;]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>


Then choose your Template save

Stay well
Now finish your work.

Read More

Easily Add your blog Facebook Like Box

Add your blog Facebook Like box Easily.

Facebook Like box is very useful widget to show visitors the authority and love of the people for his blog site. Facebook offers a simple Like Box Plugin that you can easily integrate into your website and blog site But the default Facebook like Box is not having good look at ugly all. 

How to add was down:-


Step-1.

Blogger Dashboard, Click the Layout

Step-2.

Click the Add a Gaddet

Step-3.

Now, HTML/javaScript, Click on

copy the code below and paste the content of the house

Copy the code below and paste the content of the house


<iframe src="//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/yourpagelink&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&"style="border:none;overflow:hidden;
width:292px; height:258px;">

Note:- Replace href=http://www.facebook.com/yurpagelink



Step-5.

Now Click on save 'javaScript'you are done.
All right
Should look like tge following

Now finish your work.


Stay well.

Read More

how to add Google Maps to your blogspot and blog

The Use of Technology, and it is a unique technology to keep pace with the world

"how to add google maps Blogspot"

Step-1.
First, go to this link https://maps.google.com/, then the place where  you want to display your blog's last search, see Figure:

Step-2.
Now you can get your location down bit more, click the setting button and the "share or embed map" Click on the image below to see.

Step-3.
There will be a page, see " Share link" and "Embed map" There are two option from among you" Embed map" and click after click box, the box rose to copy code requirements before you choose the right size. Then Copy the code. See figure below.

Step-4.
Login to your Blogger blog from the dashboard and Layout>>Add a gadget>>HTML/Javascript, Click and copy and paste above code that has been put into the house of the content Save now.

finish your work.

Read More