Blogging Tips Tricks & Hacks: Blog Design

Showing posts with label Blog Design. Show all posts

How To Add Snow In The Background of Your Blog Using CSS

falling snow, snow, winter background, blogger

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your Blogger blog. It seems particularly attractive since it doesn't require scripts, only CSS and three small images.

An advantage of this method is that by not using scripts doesn't overload the blog, the disadvantage is that users with not so modern browsers, will not be able to see it (in Internet Explorer works for version 10 and up).

The snow will fall in the background of the blog, which, in addition, prevent interfering with links or content (because the flakes are images), also prevent blocking the visibility of the content of the blog.

You can see the demo in this test blog.

How To Add Falling Snow To Blogger Blogspot

Step 1. Go to Template and click on the Edit HTML button:

Step 2. Click the small arrow on the left of <b:skin>...</b:skin> to expand the style (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#falling-snow {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1KBIV0mOU8e9YUuObd2NbTKyy68uZmbiz3RJq10cMB8qRLH3LrkBMdnOYS45ynBG9vuMJT3OY_TV6D5fOMNb8TGazllvlYNDR9zMvP0UaJBsrp11DXU9bZwIn1ETnMOLh29sZOAs5WeQ/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0yXjsMy5I87SJgQEY-8QkHBNcMYi3Sb4_3UgBR8Dd29DNPnVqHGtkMB3ikpXgBQuQ9BaBMrBJbpKNbDuhA3mIWX3gQcpBWST4JwvRlFZc3FkC7slHMcq-wD31DrNYPCX0QtDAVcm0CTB/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0XxZfGylWMM4SNRsjtQDabQgTrszmioAzUplEQImvVoKEOtTBfav4oz4SYeyTccEiaKXXahfkFHyIt-OZgYGo0vstH9wholbDXVJ3lMWKYMxI5VYwVJjFmhSMhil_hRQRxWMBAAgNdZ-/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

Screenshot 1:

Screenshot 2:

Step 3. Now, search (CTRL + F) for the <body> tag or this line:

<body expr:class='"loading" + data:blog.mobileClass'>

Step 4. And just below, add this:

<div id='falling-snow'>

Step 5. Finally, find the </body> tag (CTRL + F) and add the following just above it:

</div>

Step 6. Save the changes and that's it. Enjoy!!! :)

As you can see this tricks is very simple and easy to install, does not block the visibility of blog's content and the best is that it has no scripts, only CSS and nothing else.

Scriptaculous image slider/carousel for Blogger

This is a very nice carousel slideshow made by Brian R. Miedlar which shows a gallery of images having a sliding effect that returns to the beginning once it gets to the last image.

If you need to see this carousel in action, please visit this demo blog.

To add this image carousel on your Blogger blog, follow the steps below:

Step 1. Login to your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Search using CTRL + F for the </head> tag.

Step 3. Just above the </head> tag, add this code:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/>

Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red.

Step 4. Now search for the following code:

]]></b:skin>

And just above it, add these styles:

.carousel {
position:relative;
clear:both;
left:20px; /* Distance from left */
margin-top:10px;
margin-bottom:20px;
border:2px solid #000; /* Carousel border */
background-color:#333333; /* Background color */
}
.carousel .navButton { cursor:pointer; display:block;
text-indent:-9999px;
background-repeat:none;
z-index:10;
}
.carousel .container {
position:absolute;
overflow:hidden;
}
.carousel .items {
position:absolute; }
#Carousel2 {
height:88px; /* height of the container */
width:685px; /* width of the container */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* width of the images container */
height:100px; /* height of the images container */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* overall width of all the thumbnails */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjuG0_7l0CDYforIgepuMmjdPI6gVW-XYk9KhVRvnGujFE7hcbBy_LLhqXDerafU0D8CGzLonleSJ3z52AuuM-NRaInV5x4fMbwmEq6uvuJIEozhKEIFtWJHe3ppiavmjhUG84mBkFSA/s1600/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrqNTpfBHziYR9Fu4KCfZ0lrnt23I6_KvyaGNd-Xy4zIGJ5qz8RDIx7lji-VRY1FYVUiJ7hJ4ASbcMMsSjcP6wa40SvCXX6LqFzO2nKK-AwKn4ayz2GskDwYw61ZKgelxRnKUL9-a7hEk/s1600/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

Here, I have put some styles in green that can be customized as you wish, such as the border color and the background color. The arrows are images, so if you want changing their color or use other, you have to change the two URLs in blue.

The width of the carousel is of 685px, so below the header might look good. If you want to change the length then you have to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that occupy all the thumbnails together.

Step 5. Save the Template.

Step 6. Go to Layout > click on Add a Gadget link > choose HTML/Javascript from the pop-up box and paste the structure of the carousel:

<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Back</div>
<div class="button navButton next" style="display:none;">Forward</div>
<div class="container">
<div class="items">

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

</div>
</div>
</div>

Add the URLs of the links and the URLs of the images. The link URL is optional if you want to link the images to some posts.

If you add more images or remove some, you also need to change the width of the thumbnails, otherwise some pictures will appear behind the others.

To add more pictures, just add before the </div> in red a piece of code like this:

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>

To align the gadget just change the distance from the left (in green) to another value.

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin that generates a circular carousel of images.

There is noting complicated about using this type of carousel, however when it's about customizing it, it's necessary to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

Obviously, we need to add the javascript jQuery library in our template:

Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button

Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>

We would lack the CSS styles that we need to add above the </head> tag as well:

<style>
#rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
}
#rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
#rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik1uwsEZVrZ_R20WqniFDaPT3Xniv5vOMRDID8SwLjhNL5GOfCGFZYA3IlnKqpGiLNTbGpC7IP92Fel44Tv3WH5e-NJI9IuyY6MJDsfYmTvNtjxqN-bQogb2AHdQ_vk9G6KEIu3MaRHSji/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CDWBUjpQGo1bg4oZEBmvTH6QFe3pTzx9p00F6h2LJCv5JhGgRlGqbXMSez024XuabbfYl6DEkU0FBx0InQauHPwre0EdfEUeZZqVQDpxAH9y-_SO6MAGINyDDfqSnnpp-uRoxy1U_25h/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
}
#rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5_IdHhyljHNTGfax6Wl0rJJ4hR_1J5spJnWmwB6h3LQkYzBX76BYGoZ41juiOqYJ_hqVhYfHAkJsD0LlzPo-jDWAGHEF7isA1w-3Kg-RmGkgIVTyFbb0HZLDxUFOfNiqtS678hDMBsY4/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
}
#rotatescroll .dot span { /* are hidden by default */
    display: none;
}
</style>

Screenshot

Step 3. Now here's the HTML that has to be added to where we want to display the carousel.
Create a New post and paste on the HTML section, the code below:

<div id="rotatescroll">
<div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>

Screenshot

Note: replace the imageURL text with the URL of your images

and here are other options that could be added, separated by commas:

snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)

Blogging Tips Tricks & Hacks

Pages

How To Add Snow In The Background of Your Blog Using CSS

How To Add Falling Snow To Blogger Blogspot

Scriptaculous image slider/carousel for Blogger

How to Add a Tiny jQuery Circleslider to Blogger