Thursday, 28 June 2012

How to change post title background color with template designer

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer


So to change/control post title background color:
1. Sign into Dashboard
2. Click DESIGN tab to get to LAYOUT
3. Click TEMPLATE DESIGNER sub-tab
4, Click ADVANCED at the top-left corner
5. Scroll down to bottom of sub-menu and click ADD CSS (see screen shot below):

Blogger template designer Advanced Option Add CSS

and there I add this line of CSS:

.post-title {background-color:green;}

and immediately below the change is previewed (see screen shot below and noticed background color has been changed to green. 

Add Facebook Recommendations Bar To Blogger


Facebook Recommendations barFinally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors spend more time on your website Facebook has finally launched the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. Only those articles are displayed that are previously liked or shared on Facebook. The number of likes are displayed under each article along with page title and a thumbnail. It also contains a like button and previously contained anAdd to Timeline button that has been removed now. Unlike Facebook Recommendations boxwhich offered related stories but with lack of user friendly interface and engagement, Facebook bar will force readers to stay longer on your site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slideswidgets that we previously published.

See the demo live on our blog towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)

Can it increase your traffic?

Oh sure yes without any doubts! We often share widgets but we don't implement every plugin on our blog unless it provides some value to traffic or revenue. As you can see we have added the recommendations bar on all our posts and this will surely put a positive effect on pageviews because now visitors can see what their friends previously liked on your blog and due to a human curiosity they would surely check these extra posts along the way that appears under the Label "You Might Also Like". Google Plus button shows friends recommendations in search results and Facebook Bar will display the likes on your blog. Thus consumer of all such plugins is always in benefit.


Install it on Blogger

It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.
Follow these easy steps:
Step1: Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.
  1. Log into Facebook Apps
  2. Click on Create New App button towards Top-rightcreate new app
  3. In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.
app name
     4.   Enter the captcha security code. Click Submit
     5.  You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.
Site URL
         6.   You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.
App ID
Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search For this :
<html
Replace it with this code:
<html xmlns:fb='http://ogp.me/ns/fb#'
This will make the plugin compatible in older versions of  internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
     5.   Next search for <body>   and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.pianoandweb.blogspot.com
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3'read_time='10' side='right' site=' http://pianoandweb.blogspot.in/ ' trigger='40%'/></div>
</b:if></b:if>
You are almost done. Make these changes:
  • Replace *************** with your 15 digit App Id that you saved in step1.
  • Replace  http://pianoandweb.blogspot.in/  with your blog link
     6.   Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want
  • max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10  seconds, you can increase it to 30 or more as you wish.
  •  side:  You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
  • trigger:  On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisibleX%or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines  paste it just below data:post.body tag and use the value onvisible instead of 40%.
  • The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.

Your views?

I hope the installation was not very techy but still if you got into any trouble then just relax and let us know. This widget is extremely important and a must for every blog. We would be adding more updates on it as soon as we hear from Facebook documentation. Do not forget to like this page through the recommendation bar! :) Peace and blessings pals!

Wednesday, 27 June 2012

Replace Read more text to stylish

In this post we will look at the blogger 'Read More' feature and a trick to edit it's apperance on your blog by using a stylish image instead of the standerd text.The image will be clickable and will lead to the full post as the Read More text used to.If your thinking "Whats he talking about" dont worry i will explane fully and i have a link to the official blogger post on the subject.
I will provide you with 20 differant images to choose from and help you how to add them to your blog.This tip will really help the appearance of your blog.The read more is basically an option to show just the post title and the first few lines of your post on the home page, then viewer has the option to click Read More to see the full post,im sure you have seen it on a lot of blogs.Untill recently if you wanted to add the read more funtion to your blog you had to do a lot of code changes but now blogger have made it easy by having the feature built into all blogs.

More Info.
For more information on what it is and how it works see the offical Blogger Buzz post on the subject.
Using the read more funtion on your blog allows you to have more posts on your home page without slowing down the loading time and helps you blogs Google search rank as your blog is reciving more clicks.
So now you know what it is and how it works, heres how to spice it up with an image and also below the images i will show you how to use both an image and the text.

How to add it to your blog

The read more could be built into your template in a few ways lets find it.


1.Click 'Design' > 'Edit html' for your blog.

(Tick the 'Expand widget templates' box)


2.We will try to find it this way first :

In your blogs html find the following text :

(Click 'CTRL and F' for a search bar to help find the code)
   read more


If you dont find 'Read More' text in your template look for this code :

<data:post.jumpText/>

3.Now just choose the image you want to use below and Replace 'Read More' or ' <data:post.jumpText/> ' with the code provided for the image.

Images you can use for your read more.

Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post

Image Code:



Image Preview :

Read Full Post
Image Code:



Image Preview :

Read Full Post


Image Code:


Image Preview :
Read Full Post

Image Code:



Image Preview :

Read Full Post
Image Code:



Image Preview :


Read Full Post

Image Code:




More help?

Look at the samples below ...



With the 'Read More' text your code looks like this :




<span id='showlink'>

<a expr:href='data:post.url'>Read more...</a>

</span>

Once you add the image it should look like this :


<span id='showlink'>

<a expr:href='data:post.url'><img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/more_thumb1.png" border="0" alt="Read Full Post" /></a>

</span>





OK that's it as far as adding the image is concerned if your happy with that click save and your done.



Simply change the text 'Read More' to the text you want to show.

(I used 'Click here to view full post')


Now add <br> and then add the image see the sample below :


<span id='showlink'>

<a expr:href='data:post.url'>Click Here To View Full Post<br><img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/more_thumb1.png" border="0" alt="Read Full Post" /></a>

</span>



Now save and check out your new style homepage.

Tuesday, 26 June 2012

remove powered by blogger



1. Go to Template and click on customise 
2. Now click on Advanced
3. Scrolling down and click on Add CSS
4. Now paste CSS code
5. #Attribution1 {display: none;}
6. click on Apply to Blog
7. powered by blogger removed from your blogger blog

remove Navbar from Blogger blog

Navbar in Blogger blog has been one of the worst elements of blogging because of many reasons like it doesn't matches up with the blog template, it is not used much, it makes your blog look unprofessional.
But the Blogger navbar can be removed easily by just adding a bit of CSS code.

  1. Goto Template and click on Edit HTML and click proceed
  2. Now look for the following code 
  3. ]]></b:skin>
  4. If found, add the following CSS code just above it
  5. #navbar-iframe { display: none !important; }
  6. Then click on save template
  7. Navbar has been removed from your blogger blog



                      if you can not do it then u can also remove other way

1. Go to Template and click on customise 
2. Now click on Advanced
3. Scrolling down and click on Add CSS
4. Now paste CSS code
5. #navbar-iframe { display: none !important; }
6. click on Apply to Blog
7. Navbar has been removed from your blogger blog

Sunday, 24 June 2012

text scrolling


<MARQUEE ...>

Attributes:
  • WIDTH: how wide the marquee is
  • HEIGHT: how tall the marquee is
  • DIRECTION: which direction the marquee should scroll
  • BEHAVIOR: what type of scrolling
  • SCROLLDELAY: how long to delay between each jump
  • SCROLLAMOUNT: how far to scroll
  • LOOP: how many times to loop (default=infinite)
  • BGCOLOR: background color
  • HSPACE: horizontal space around the marquee
  • VSPACE: vertical space around the marquee
The Marquee tag creates a scrolling effect and can be tailored to include any HTML content. Like the much hated <blink> tag, the <marquee> tag is often regarded as one of the "evil" tags, so many people shy away from using it. There are some places where it can work well, such as in RSS scrollers, squeezing some products into a page for page monetization as per our tee shirt example (see the sidebar on the right), and for accents on a page.
The marquee tag has often been overused by beginning coders who like to show off their HTML prowess by overusing every kind of fancy tag they can conjure up and in the early days of the web, the marquee tag was overused almost as much as the <blink> tag to the irritation of many. Microsoft even stopped supporting the <blink> tag, so that the simple HTML for blinking text now does not work in IE! (There is a way to do it with javascript that works in all browsers if you really must!)
The basic use of <MARQUEE ...> is simple. Put almost any kind of markup between <MARQUEE> and </MARQUEE>.
A basic marquee is coded like this:
Code:<marquee>Scrolling text</marquee>
Display:Scrolling text















Enter Text Below:



Saturday, 23 June 2012

URL redirection java script


javascript redirect



You're moving to a new domain name. You have a time-delay placeholder on your download site. You have a list of external web servers that are helping to mirror your site. What will help you deal with and/or take advantage of these situations? JavaScript redirects will.

When your webpage is moved, you'd probably want to notify your visitors of the change. One good way is to place a "redirect page" at the old location which, after a timed delay, will forward visitors to the new location of your webpage. You can do just this with a JavaScript redirection.

javascript window.location

Control over what page is loaded into the browser rests in the JavaScript property window.location. By setting window.location equal to a new URL, you will in turn change the current webpage to the one that is specified. If you wanted to redirect all your visitors to www.google.com when they arrived at your site, you would just need the script below:

HTML & JavaScript Code:

<script type="text/javascript">
<!--
window.location = "http://
www.pianoandweb.blogspot.com/"
//-->
</script>

javascript time delay

Implementing a timed delay in JavaScript is useful in the following situations:
  • Showing an "Update your bookmark" page when you have to change URLs or page locations
  • For download sites that wish to have a timed delay before the download starts
  • To refresh a webpage once every specified number of seconds
The code for this timed delay is slightly involved and is beyond the scope of this tutorial. However, we have tested it and it seems to function properly.

HTML & JavaScript Code:

<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>

</body>
</html>
The most important part of getting the delay to work is being sure to use the JavaScript function setTimeout. We want the delayer() function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the setTimeout() two arguments.
  • 'delayer()' - The function we want setTimeout() to execute after the specified delay.
  • 5000 - the number of millisecods we want setTimeout() to wait before executing our function. 1000 miliseconds = 1 second.

web page redirection

Do use JavaScript for redirections when you change your website's URL or move a file to a new location. Don't use redirections when they can easily be replaced with a normal HTML hyperlink.

Transparent Background for Blogs


PICTURE BACKGROUND FOR BLOGS


The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.






TRANSPARENT BACKGROUND FOR BLOGS


To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper 

footer-wrapper

sections.
NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.



This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85); 
-moz-opacity: 0.85;

width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).

Sunday, 17 June 2012

Fighter game



Game Objective: 
Collect missiles, weapons and powerups, targetting enemy tanks, trucks, troops, fighter planes and ground troops

Game Controls: 
 Arrow keys to move |  Space to shoot