Blog Tutorials

Hey, this page will help you with some blog secrets.

How to add a blog banner
How to add a thumbnail
How to add a moving banner
How to add a back to the top link

Thanks for reading my blog tutorial, check  back for more!

Blog Banner

1. Create a picture or take a picture that you would like to use. You can use picture editing softwares to make your banner looks professional and unique. I  use Photoshop but you can use any program! Also, make sure the picture will fit wherever you're putting it. I would say a maximum of 250x250 px for a banner.

My current banner is 200x200. have a look:

2. Upload the picture to a free image uploading site like Tinypic, Imgur,
Photobucket and copy to clipboard the "Direct Link for Layouts"

3. Go to your Dashboard on blogger and click "Layout". Now you will see
a rough draft of your blog. Click "Add a Gadget", a pop up will now show and
scroll down to the "HTML/Javascript" option.

4. Enter this code:

<a href="Your blog's link here"><img src="<b>Image Link Here</b>" /></a><br /> <br />  

5. Click save and tada! You banner has been saved onto your template.

Back to top.


Adding cute thumbnails
1. Create a picture or take a picture that you would like to use. You can search
on Google Images or edit it yourself on any software.

2. Upload the picture to a free image uploading site like Tinypic, Imgur,
Photobucket and when uploaded the  link under "Direct Link for Layouts".

3. Go to your Dasboard on blogger and click "Layout". Click "Add a Gadget"
and scroll down to the "HTML/Javascript" option.

4. Enter in this code:

<a href="<b>Link where the picture should redirect to</b>" target="_blank"><img src="<b>Picture link</b>" border="0" /></a><br />

Back to top.

Moving Banner

1. Create a picture or take a picture that you would like to use for your banner. I would advise you to create these on a picture editing software.
Tip: Remember to remove the pictures background and save it as a .png

2. Upload it to a free picture hosting website, I use imgur. When it is uploaded copy the link that's under "Direct Link for Layouts"

3. Go to your Dasboard on blogger and click "Layout". Click "Add a Gadget"
and scroll down to the "HTML/Javascript" option.

4. Enter in this code:

<marquee><a href="http://chogossipx.blogspot.co.uk" target="_blank"><img src="IMAGE LINK" /></a></marquee><br />

5. If you are having troubles creating one, here are some pre-made banners I made.

HTML for Angel Heart Banner

<marquee><a href="http://chogossipx.blogspot.co.uk" target="_blank"><img src="http://i.imgur.com/tCTiQXX.png" /></a></marquee><br />  

HTML for Music Note Banner

<marquee><a href="http://chogossipx.blogspot.co.uk" target="_blank"><img src="http://i.imgur.com/GgrOmpd.png" /></a></marquee>

HTML for UFO banner

<marquee><a href="http://chogossipx.blogspot.co.uk" target="_blank"><img src=" http://i.imgur.com/sxQqnu7.png" /></a></marquee><br />

Back to top.

Back to Top Button
1. Create a picture or take a picture that you would like to use as your back to top button. My current back to top button size is 130px by 130px.
Tip (Optional):  Remove the background as save it as a .png.

2. Upload the picture to a free image uploading site like Tinypic, Imgur, Photobucket and grab the "Direct Link for Layouts"

3. Go to your Dasboard and click "Layout". Click "Add a Gadget"
and scroll down to the "HTML/Javascript" option.

4. Go to your Dasboard on blogger and click "Layout". Click "Add a Gadget"
and scroll down to the "HTML/Javascript" option.

Then, enter this extremely long code xD

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br /> <script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.helperblogger.com * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="<b>IMAGE URL HERE</b>" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol"> '+mainobj.controlHTML+'</div> ') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script><br />

7. Click Save and Close and you're done!

Back to top.