| Blogger Tips And Tricks|Latest Tips For Bloggers

Mootools Featured Posts Auto Slider to Blogger

Lasantha Bandara — Sun, 11 May 2014 07:41:00 +0000

This tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site.You can look at the DEMO page of this Mootools Featured Posts Slider.Now if you like to add this slider to your site then follow the steps given below.

Note: This tutorial has been updated. If it didn't work for you before, try again. It will work fine.

1.Login to your Blogger account and go to "Edit HTML" of your blog.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE : You can DOWNLOAD and HOST mootool-slider-custom.js yourself. It is currently hosted in yourjavascript.com. Also you can change width and height of this slider easily (Default width:515px and height:250px;).

4.Now save your template.

5.Go to "Layout" of your blogger blog.

6.Click on "Add a Gadget".

7.Select 'HTML/Javascript' and add the code given below and click save.





ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE
FEATURED-POST-1-DESCRIPTION
FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />

ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE
FEATURED-POST-2-DESCRIPTION
FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />

ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE
FEATURED-POST-3-DESCRIPTION
FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />

ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE
FEATURED-POST-4-DESCRIPTION
FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />

ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE
FEATURED-POST-5-DESCRIPTION
FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />

Change 5000 to change your slider speed.

NOTE : Remember to replace ,

ENTER-YOUR-POST-X-LINK-HEREs with your real post links.

THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.

FEATURED-POST-X-DESCRIPTIONs with your post descriptions.

FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.

Look at the example below.





This is featured post 1 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...


This is featured post 2 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...


This is featured post 3 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...


This is featured post 4 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...


This is featured post 5 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...

You are done.

The post Mootools Featured Posts Auto Slider to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How to Fix "Google Friend Connect is not displayed" Problem

Lasantha Bandara — Thu, 14 Oct 2010 07:05:00 +0000

Update: Google Friend Connect has been officially discontinued by Google since January 11, 2016, and no longer works on Blogger or any other platform. The content below is kept for reference only.

If you use MooTools(http://mootools.net/) script inside your blogger template, mostly your Google Friend Connect widget will disappear from your blogger blog and only shows a white space.This is a serious problem to more bloggers.I also have faced to this problem and finally find the solution for this problem.I thinks this little trick will also helpful to others and decide to explain how to solve this problem.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MooTools can be included in your template in 2 ways.

First way:

Second way:

You can do this with in few seconds.Now follow the steps given below.

You don't need to click on "Expand Widget Templates".

Scroll down to where you see the tag of your template.

Now copy below code and paste it just after the tag.

Save your template and you are done.

When your problem is fixed, please don't forget to leave a comment.

The post How to Fix "Google Friend Connect is not displayed" Problem appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add MooTools Featured Content Slider to blogger

Lasantha Bandara — Thu, 26 Nov 2009 02:05:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag.

4.Now again scroll down to where you see below code:

5.Copy below code and paste it just before

















<script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
<script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>



<script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
<script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>



<script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
<script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>



<script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
<script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>



<script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
<script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>

Replace "http://bloggertipandtrick.blogspot.com" with your blog address.
Replace images addresses with your images addresses.

Note: You can place above code as your choice.For explanation I place it just before

6.Now save your template and you are done.It will look like this:

Demo

The post How To Add Mootools Recent Post Slider to blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add MooTools Tooltip to blogger

Lasantha Bandara — Sun, 15 Nov 2009 09:38:13 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now when you add alink use below html structure:

YOUR-LINK" title="YOUR-TOOLTIP-TEXT">LINK-NAME

Look at the example below.

http://bloggertipandtrick.blogspot.com" title="Blogger Hacks">Latest Blogger Tips

It will look like this:

MooTools Tooltip to blogger

You are done.

The post How To Add MooTools Tooltip to blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add jQuery’s hover() Method To Blogger

Lasantha Bandara — Fri, 30 Oct 2009 04:44:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Whenever you have to write some codes or text,write it between the following tags :

hover-me">

Your Text/Code

View Demo

The post How To Add jQuery’s hover() Method To Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add MooTools Link Fading To Blogger

Lasantha Bandara — Fri, 30 Oct 2009 03:46:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Click on "save Template".

5.Now when you add Links add it as below example

id="link1" href="javascript:;" class="fade">Link Fade 1

id="link2" href="javascript:;" class="fade">Link Fade 2

id="link3" href="javascript:;" class="fade">Link Fade 3

View Demo

The post How To Add MooTools Link Fading To Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Slide Show to Blogger Using Mootools

Lasantha Bandara — Sat, 22 Aug 2009 10:51:00 +0000

In this tutorial I am going to explain, how to create a simple slideshow using Mootools.If you like to add this slideshow to your website or blogger blog then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]> tag:

4.Copy below code and paste it just before the ]]> tag.

/* slideshow */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

5.Scroll down to where you see tag:

6.Copy below code and paste it just before the tag.

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

SlideShow



YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>
YOUR-IMAGE-ADDRESS"/>



<< Previous
Next >>

Note : Replace 'YOUR-IMAGE-ADDRESS' with your images addresses.

It will look like this :

View Demo

The post How To Add Slide Show to Blogger Using Mootools appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

| Blogger Tips And Tricks|Latest Tips For Bloggers

Mootools Featured Posts Auto Slider to Blogger

How to Fix "Google Friend Connect is not displayed" Problem

How To Add MooTools Featured Content Slider to blogger

<script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

<script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

<script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

<script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

<script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bloggertipandtrick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

How To Add MooTools Tooltip to blogger

How To Add jQuery’s hover() Method To Blogger

How To Add MooTools Link Fading To Blogger

How To Add Slide Show to Blogger Using Mootools

SlideShow