In this tutorial you will learn how to add a simple jquery image slider to your blogger powered blog note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure whether yours is disabled or not check the demo you should see a working image slider also all the images must be the exact same size as each other.
I recommend you download a backup copy of your template or use a test blog I'm going to use a 3 column template from my previous tutorial but it should work with any template now we need to download two scripts named jquery.js and s3Slider.js you can read more and download the scripts from this link or just grab the embedded source code from the demo.
Continue reading »
How to create a fully widgetized tabbed content box on blogger
In this tutorial you will learn how to add a tabbed content box on your blogger blog using CSS, XHTML and Javascript in 4 simple steps it will also be fully widgetized so you can easy change colours and rearrange the widgets within your dashboard here's a simple screenshot of what we are going to create in this tutorial.
.
Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.
Continue reading »
.Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.
Continue reading »
How to create static pages on blogger
Update Static pages now available in Blogger
In this simple tutorial i will show you how to create static pages within your blog on blogger so you can easy link to them from navigation links within your blog these could be any page you like such as "about me" and "contact me" pages.
so the first thing would be to either use a test blog or download a backup copy of your template before doing this to your blog as i cannot be held responsible if you mess up your blog.
Once you are ready go to your blog and create a new post using whatever title you want for this tutorial i gave mine the title of "About" now add your post content when you have finished click the "Post Options" link found at the bottom of the post editor see screenshot below
Continue reading »
so the first thing would be to either use a test blog or download a backup copy of your template before doing this to your blog as i cannot be held responsible if you mess up your blog.
Once you are ready go to your blog and create a new post using whatever title you want for this tutorial i gave mine the title of "About" now add your post content when you have finished click the "Post Options" link found at the bottom of the post editor see screenshot below
Continue reading »
How to display total post and comment count on blogger
In this tutorial i will show you how we can print out the total post and comment count of your blog using our blogs feed so first we need to add these two lines of javascript code which asks blogger to return our feed in JSON format which is a set of javascript objects. Don't forget to replace the red code with the URL of your blog
in the code above we have asked blogger to return our JSON feed to two javascript functions named
Continue reading »
<script src="http://www.lawnydesigns.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script>
<script src="http://www.lawnydesigns.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script>in the code above we have asked blogger to return our JSON feed to two javascript functions named
numcomments and numposts so now we will create those two functions to print out the total post and comments countContinue reading »
How to adjust the size of images on blogger
Today I'm going to show you how to adjust the size of images posted on your blog since most of my friends are having problems with changing the size of images
first switch to "edit html" mode on your post editor and find the image you would like to adjust here's my sample image code
yours may look a bit different from mine but don't worry we are only interested in the code highlighted in red this controls the width and height of your image.
Continue reading »
first switch to "edit html" mode on your post editor and find the image you would like to adjust here's my sample image code
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXegrEZRUvQdwO82W3OC-Fq_YnR5gs110o43dsV2zvT1K_tuMhniTFE8FS2FW_GRky7shJ2Vir_0GJIdPZs7lYWCSzdCoeymNbmcdGo9RBXO-GOWNoeS-tFLECTFtNbMC5PgpwfGjtd4Y/s400/step-01.jpg"><img style="width:304px;height:400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXegrEZRUvQdwO82W3OC-Fq_YnR5gs110o43dsV2zvT1K_tuMhniTFE8FS2FW_GRky7shJ2Vir_0GJIdPZs7lYWCSzdCoeymNbmcdGo9RBXO-GOWNoeS-tFLECTFtNbMC5PgpwfGjtd4Y/s400/step-01.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5303081243051517074" /></a>
yours may look a bit different from mine but don't worry we are only interested in the code highlighted in red this controls the width and height of your image.
Continue reading »
Subscribe
