APRIL 2013 UPDATE!! Serveral readers have discovered that part of this tutorial does not work for domains other than the standard Blogspot.com domains. There is a fix here, however!! If you have a custom domain you will need to follow this tutorial – but also the section called ‘Addendum 1’ at the bottom of this post in order for the slider to work correctly.The main Javascript code for Menucool requires you to install some javascript code somewhere. Well, as you know Blogger doesn’t have a place to install a file. You could extract the script and embed it into your template. But, I like to add it to Google Sites as a file then reference it. Your first step is to go to theMenucool.com Javascript Slider page. From there scroll down a bit to download the image slider code. All we want right now is the main Javascript file – click on the Download button:
The file is going to be in zip format. So, depending on your system you may need to download an unzip utility. Once downloaded and unzipped you should see something like this:
Navigate to the folder called jsImgSlider\jsImgSlider\themes\1 – this is where you will find your code file entitled js-image-slider.js:
Now, you’ll need to install this file on a visit external site somewhere.
IMPORTANT UPDATE: If you have a custom domain name (not [blogname].blogspot.com) then don’t upload the .js file to Google Sites (please see the Addendum 1) and jump down a few paragraphs to Adding the Nav Button!! This next section only works for .blogspot.com domains.
As I noted I use Google Sites for this. I’m not going to repeat my tutorial on how to install a file in Google Sites. Just take a look at my MP3 posts on installing a file. You’ll want to upload the js-image-slider.js file to your Google Site exactly like an MP3 file. Follow the steps in Add an MP3 File to Blogger – Part 1 and Part 2 of how to upload a file to Sites.
Once your file is uploaded you’ll want to find the full link to it as I did in the MP3 tutorial by right-clicking the down arrow on the far right and choosing ‘Copy Link Location’:
Save your link location in a word processor or text editor somewhere. It should look something like this:
https://sites.google.com/a/bloggertipspro.com/myfiles/mp3/js-image-slider.js?attredirects=0&d=1 Be sure to remove the ‘?attredirects=0&d=a’ part. You can also change the https to just http.
Now you’re ready to install the scripts and layouts to your Blogger template. First step is to add this line you just saved to your template’s HTML with the script tags added – be sure to change my URL to yours:
http://sites.google.com/a/bloggertipspro.com/myfiles/mp3/js-image-slider.js
You can see how I pasted the code here:
Go ahead and save your gadget code and you should be good to go!
This part is a bit tricky and you’ll have to be sure to backup your template in case of errors. There was a question in the comments about how to limit your slider only to the home page. Now, if you have a Static Home Page like my tutorials before then what I’ll show you is the way to do it. However, if you want to show the slider only on the Blog Posting main page you’ll have to change a couple of things.
The key to doing this is to add code to your template that will only show the HTML widget above when a certain page type and page name loads. This isn’t a great idea because now you’ll have that page name embedded in your code –REMEMBER THIS – if you ever change the page name you’ll have to go back into the template and change the code!!!
You’ll need to find the HTML widget in your Template by expanding it and searching for it. Here is how I found my code in the Blogger Static Home Page template and example for this:
As you can see I found the widget and added these two lines:
These lines are checking to see if the page is first,a static page, then, trying to compare the page title. In this case, if the page is of type static_page and the title is ‘Blogger Static Home Page: Home Page’ then show the slider – otherwise, ignore it. Remember to add the two
statements at the end. Your page types (pageType variable which can have the values ‘item’, ‘archive’, ‘static_page’ or ‘index’) and Titles will vary – take care to work through this.
 |
| Source: DigitalRalph – Creative Commons |
I really would not pay much attention to rumors like this considering the number of Blogger users in the world. In fact, Blogger is an excellent means for Google to get more people directly connected to Google+ — not necessarily to be users of the social network, but to become more integrated into the Google ecosystem with profile information. This is extremely important since people with profiles utilize search giving Google a one-up on what people do online. Also, you may or may not have noticed that all of Google’s official blogs are running on Blogger.
What excites me more is my own speculation that the quietness surrounding the Blogger platform indicates to me that Google is working hard on upgrading it to become a richer HTML5 site with much more dynamic templates and usability that you find from sites built on responsive frameworks like Twitter’s Bootstrap, Boilerplate or HTML Kickstart. These frameworks are completely designed to be fluid on all devices (something Google cares about deeply) so that one template can satisfy any device from Android phones/tablets, iPhones and iPads to full high resolution desktop displays.
Nevertheless, blogging has changed considerably in the last three years by being overrun by social networking, which, in its own way has become a kind of micro-blogging pattern. People now look across a vast landscape of optionswhen they’re looking for information which is pushing blogs away from personal interactive journeys to something else. What that ‘something else’ is may be difficult to describe, but in my honest opinion it is informational articles that coexist with social networks that are clearly linked to search.
Audiences are no longer built up directly on the blogging platform as much asthey’re collected through other means of Facebook, Google+, Twitter, Instagram, Pinterest, Tumblr and other social sources. It’s a definition difference between a ‘personal interactive journey’ on social networks and ‘important information’ in blogs where that information is something that answers searchable questions.
What does this mean to you, the blogger? It means that you need to expand beyond the blog itself as the source of what you are online – a part of a bigger piece of the full network – especially more media and social awareness such aslive blogging. The interaction happens socially — whereas the information happens in your blog.
|
| Source: DigitalRalph – Creative Commons |
I really would not pay much attention to rumors like this considering the number of Blogger users in the world. In fact, Blogger is an excellent means for Google to get more people directly connected to Google+ — not necessarily to be users of the social network, but to become more integrated into the Google ecosystem with profile information. This is extremely important since people with profiles utilize search giving Google a one-up on what people do online. Also, you may or may not have noticed that all of Google’s official blogs are running on Blogger.
What excites me more is my own speculation that the quietness surrounding the Blogger platform indicates to me that Google is working hard on upgrading it to become a richer HTML5 site with much more dynamic templates and usability that you find from sites built on responsive frameworks like Twitter’s Bootstrap, Boilerplate or HTML Kickstart. These frameworks are completely designed to be fluid on all devices (something Google cares about deeply) so that one template can satisfy any device from Android phones/tablets, iPhones and iPads to full high resolution desktop displays.
Nevertheless, blogging has changed considerably in the last three years by being overrun by social networking, which, in its own way has become a kind of micro-blogging pattern. People now look across a vast landscape of optionswhen they’re looking for information which is pushing blogs away from personal interactive journeys to something else. What that ‘something else’ is may be difficult to describe, but in my honest opinion it is informational articles that coexist with social networks that are clearly linked to search.
Audiences are no longer built up directly on the blogging platform as much asthey’re collected through other means of Facebook, Google+, Twitter, Instagram, Pinterest, Tumblr and other social sources. It’s a definition difference between a ‘personal interactive journey’ on social networks and ‘important information’ in blogs where that information is something that answers searchable questions.
What does this mean to you, the blogger? It means that you need to expand beyond the blog itself as the source of what you are online – a part of a bigger piece of the full network – especially more media and social awareness such aslive blogging. The interaction happens socially — whereas the information happens in your blog.
A new online utility has appeared that can simply move your social postings around between sites called IFTTT.com (or, in other words, If This, Then That). It is so incredibly intuitive and easy to use that I had no issues setting it up.
I won’t lead you on how to setup an account – you’ll just need a user name and password – that’s very easy to do. As you start you’ll just need to activate and register your Blogger account and select your desired blog like this:
And then tie your Blogger blog to the IFTTT account:
Once registered your first step is to ‘Create a Recipe’ – and in our case it is going to be from Blogger to Facebook:
Simply click on the blue ‘this‘ text to select Blogger as you source choice:
You can see that there are many options for source – I’ve highligted the Blogger button. Next, just ‘Choose a Trigger‘ type. In this case we want new Posts to be published to Facebook. However, you might want the second label option:
Go ahead and select ‘Any new post’ for now. Now you will see the Trigger that will kick off the event.
Just select the ‘Create Trigger’ button to continue. You’re going to be directed now to the action that occurs when you trigger off a Blogger Post. Just select the ‘that‘ blue link to continue:
Now you’ll see the full list again of social media sites. There are some great options here – but, for our tutorial just click on the ‘Facebook‘ icon:
If this is your first time into IFTTT then you’ll need to register your Facebook account much like how you did your Blogger account. Be sure you’re logged into your desired Facebook account first.
Now you’ll have to make a selection if you want the Blogger post to be fully copied to Facebook, or, just a link back to the blog. I prefer the second option ‘Create a link post‘ – but you make your choice:
This is the tricky part – how you want the message formatted on your Facebook page. You can certainly experiment with this – but, you’ll want to Create an Action that has the URL in the link field and the subject with your own text mixed with your blog post:
Just press ‘Create Action’ when done and you should have something like this:
You can see I used the PostContent field – but, you certainly don’t have to fill your wall with the full Blogger post. Your connection is now ready!!
Now that your link is active you can test it by posting to Blogger, then jumping over to IFTTT.com and clicking on the Recipe you just created and selecting the ‘Check‘ button on the right side of the screen like so:
This normally runs every 15 minutes – but, by clicking on Check your post will appear on Facebook in seconds.
A Great tool in my mind! Enjoy!!
BIDDAKOSH 