wewillrock.wordpress.com

Add Skype Emoticons in blogger comments

January 14, 2011 Leave a comment

Now Friends you can use Skype Emoticons in blogger comments as well.today i’m give you cool emoticons for blogger comments.you can add this most wonderful emocation for your blog.Now I will tell you how to install Skype Emoticons in blogger comments.

first you have to backup your template before doing any changes in it.

STEP #1.

Go to Design >> edit HTML and check Expand Widget Templates box

Find this code

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

and paste this code before it

<div style=' width: 450px; text-align: left; border: 4px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/> :a
  
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b
  
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l
  
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m
  
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> 😮
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p
  
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/> :q
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/> :r
  
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/> :s
  
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/> :t 
</div>

STEP #2 .

After step 1 Find this code below

</body>

and paste this code before it.

<script type='text/javascript'>
//<![CDATA[ 
a = document.getElementById('comments'); 
if(a) { 
b = a.getElementsByTagName("DD"); 
for(i=0; i < b.length; i++) { 
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') { 
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:l/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:m/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:n/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:o/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:p/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:q/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:r/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:s/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:t/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:b/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:c/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:e/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:f/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:g/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:h/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:i/ig,"<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>") 
b.item(i).innerHTML = _str; 
} 
} 
}
//]]>
</script>

STEP #3 .

Now click on save template

Source:firebloggertools

Filed under Uncategorized

Blog template and compatibility with internet browsers (VERY IMPORTANT)

January 14, 2011 Leave a comment

We are in the first phase of the work of the blog design, we design the blog and make the codes work on a basis of our view of it that will be shown in a browser and a single browser, which we are use in our computer, and we design and put the code of the blog On this basis.

For the success of your blog, in order to succeed in the work or the selection of its design contributes to the success and must be true, that you check your blog on all browsers recognized and the blog should looks good in all of them.

Here are some tips that may be useful in making your blog compatible with all browsers :

1- Make your blog a simple code :
If the HTML and CSS code in your design are complex, this increases the complexity of the many mistakes and increase the chance of errors with too many browsers.
So try as much as possible to make your blog design simple and easy and make simplified codes.

2- Don’t forget using Code validation :
Before you save the code of your blog do not forget to scan these codes, either HTML or CSS using Code validation.
There are HTML Validators and CSS Validators and also some browser plug-ins like HTML Validator Firefox add-on to check your blog.

3- Use CSS reset by addin reset codes :
There are codes added to the CSS code in your blog to make CSS compatible with all browsers and this is the codes.

( chose only one code from the next codes )

Eric Meyer’s Reset Reloaded

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

YUI’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:

4- Test your blog in different browsers :

it is necessary to test your site in different browsers like Internet Explorer 6,7,8 and Firefox and Opera etc. then you can see the problems in all browser and fix it.

Source:firebloggertools

Filed under Uncategorized

swap post title and blog title in Blogger

January 14, 2011 Leave a comment

By switching your page title and your blog title, it helps improve your traffic thats being driven by search engines and it also helps search engines determine relevant information on your site.

You know what that means right?
It helps you acquire more readers > popularity > and even earnings from your ads.

This widget is composed of Blogger conditional tag to which it will only work when a condition is fulfilled. This widget is prepared so that the title of your post (item) will be displayed first and next to it is theblog title.

Alrighty! Lets get to work.

How to swap post title and blog title?

STEP #1 .

Go To Design>>edit HTML
And Find this code.

#code

STEP #2 .

Replace above code with this code given below

#code

<b:if cond=’data:blog.pageType == "item"’> <title><data:blog.pageName/> – <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

STEP #3 .

Click on save template and thats it…

Source:bloggertemplatewidget

Filed under Uncategorized

Add Dynamic Effects to images in blogger

January 10, 2011 Leave a comment

Effects are so much loved by visters on sites today. many types of effects in menu,widgets,toolbars,links….etc are very famous. Various effects makes your site so much pretty and cool .
So today we will learn how to show effects in images for your blog.This property gives the picture beauty and a wonderful format,
When you put the mouse pointer on the image will tend aside and when you keep the mouse pointer, the image will return to status as natural.

STEP #1 .

just go to Dashboard >> DESIGN >> Edit HTML .

& check Expand Widgets Templates

Find this code

]]></b:skin>

STEP #2 .
And Just Before it add this code below:

#code

.post img {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

CONTROLS
You can control the degree of deviation of the images as you want and its direction as well, both on the left or the right,
just Replace (+) with (-) ,

(+2deg) is the degree of deviation Before you put the mouse pointer
(-1deg) is the degree of deviation After you put the mouse pointer.

If you have any problem please leave it below in comments box.

Source:fireblogtools

Filed under blogger Tricks

Add Adsense Below Blogger Post Title

January 10, 2011 Leave a comment

By default, Blogger does not provide any gadget or page element to add adsense code below post title. A small modification is to be needed, if you want to place adsense ads below the post title. Why do you need to put below post title? Well, according to the heat map of Google, one of the profitable positions of placing Google Adsense ads is below the post title.

These are the following steps to do the above trick.

Note: Please back up your blogger template before you make any changes.

STEP #1 .

==>Get a parser to parse Adsense code

First of all, you need to parse the Adsense code to insert it in the blogger template. So type “parse adsense code” in google search and select a suitable tool to parse adsense code. Otherwise, my personal favorite is the Blogcrowds Parser. Use the tool to parse the adsense code. The steps for parsing are self-explanatory.

STEP #2 .

Find this code in HTML Editor : <p><data:post.body/></p>

and paste the parsed Adsense code above this code.

Note: If you have more than 1 Tag (<p><data:post.body/></p>) of the above kind, please paste the parsed Adsense code, just above the last Tag in sequence. If you still find a problem, just try copying and pasting the parsed code before the earlier Tag

(<p><data:post.body/></p>).

IMPORTANT

If your blogger template has summary of posts on the homepage,than don’t worry but If you dont have auto summary tool in your blogger template you have to add this Because the ads will display in your home page , if you have more than 3 post adsense ad will not display because it is against adsense rules.(adsense allows only 3 ads per page)

SEE My Post to add auto summary tool in your blog

STEP #3 .
==>Showing Adsense Ads in Post Pages Only!

this additional hack will display the ads below the post title in post pages only.

Now paste this code, above <p><data:post.body/></p>.

<b:if cond=’data:blog.pageType == "item"’>
Parsed Adsense code here
</b:if>

The above step is necessary as you can post only 3 Adsense units on any page. So if homepage contains more than 3 posts, there will be blank space after each summary post, in place of Adsense ads. In order to circumvent this problem, it is suggested to place Adsense ads in post pages only!

STEP #4 .
==>Floating Adsense Ads.
By default, adsense code will not allow any code to be displayed nearby it. In order to have Adsense display text adjacent to it or allow Adsense ads to float, you need to do the following modification.

You just need to add the <div> tag above the parsed adsense code.
You are just adding code and not changing any adsense code, so no problem with Adsense TOS.

Like this:

<div style=”float:left; padding: 5px;”>
parsed Adsense code here
</div>

You can change highlighted values by your necessory values.

If you have any problem or sujjestion please leave it below in comment box

Source:techlikes

Filed under blogger Tricks

Windows Live Writer 2011 – Keyboard Shortcuts

January 10, 2011 Leave a comment

Bloggers have many tools to writer their posts. One of the popular tools among Blogger, WordPress and other CMS users is Windows Live Writer. Lately in 2011, Microsoft released a new version of its frequently used tool. You can download Windows Live Writer 2011 from here.

Download Windows Live Writer 2011

Once you installed the software, you are ready to import your blogs and can write your posts with ease. This tool makes photo sharing and video sharing very easy and embedding is as easy as pressing some keystrokes. Windows Live Writer is part of Windows Live Essentials. But many people are used to using keyboard shortcuts while using this blogging tool. So I’ve gathered some shortcuts, which are useful while writing posts and easy to remember also.

Command	Keystroke	New for 2011
Text Center Alignment	Ctrl+E	X
Text Left Alignment	Ctrl+L	X
Text Right Alignment	Ctrl+R	X
Set text direction of paragraph Left to Right	Ctrl+Left Shift	X
Set text direction of paragraph Right to Left	Ctrl+Right Shift	X
Bold text	Ctrl+B
Italic	Ctrl+I
Strikethrough	Ctrl+H
Underline	Ctrl+U
Superscript	Ctrl+Shift+=	X
Subscript	Ctrl+=	X
Bulleted List	Ctrl+Shift+L	X
Check Spelling	F7
Clear	Del
Copy	Ctrl+C
Cut	Ctrl+X
Delete	Del
Select All	Ctrl+A
Paste	Ctrl+V
Paste Special	Ctrl+Left Alt+V
Paste without formatting	Ctrl+Shift+V
Remove Links and Clear Formatting	Ctrl+Space
Find	Ctrl+F
Redo	Ctrl+Y
Undo	Ctrl+Z
Apply Paragraph style	Ctrl+Shift+N	X
Apply Heading 1 style	Ctrl+Left Alt+1	X
Apply Heading 2 style	Ctrl+Left Alt+2	X
Apply Heading 3 style	Ctrl+Left Alt+3	X
Apply Heading 4 style	Ctrl+Left Alt+4	X
Apply Heading 5 style	Ctrl+Left Alt+5	X
Apply Heading 6 style	Ctrl+Left Alt+6	X
Insert Hyperlink	Ctrl+K
New Page	Ctrl+G
New Post	Ctrl+N
Open Post	Ctrl+O
Post and Publish	Ctrl+Shift+P
Post Draft to blog	Ctrl+Shift+D
Save	Ctrl+S
Print	Ctrl+P
Insert Picture from File	Ctrl+J	X
Insert Picture from Web	Ctrl+Shift+J	X
Switch to Source View	Shift+F11
Switch to Preview view	F12
Switch to Edit View	F11
Edit using Theme	Ctrl+F11
Post Properties Dialog	F2
Set focus in Post Properties field or Previous property field	Shift+F6
Set focus in Next Field of Post Properties	F6
Show Properties Pane dialog for selected field	Ctrl+Shift+C
Toggle sidebar for plug-ins	F9
Help	F1
Toggle ribbon visible state	Ctrl+F1	X

Enjoy!

Filed under blogger Help

Automatic Summary and Thumbnail Script for blogger and websites FIXED by us Working 100%

January 10, 2011 Leave a comment

If you’v Look carfully my template, it has a “Read More” link after every post on the main page with a nice icon. Well, the congrats goes to Blogsphera ( Translated version ), for the excellent tip. Previously many bloggers tried to create such scripts, but they were either laborious or untidy. Now the present script perfoms better than all the previous blogger “Read More” hacks for creating summary of posts on the main page. The earlier versions had some disadvantages like, it was needed to add the following tag in all post pages while writing new posts.

Type your summary here
<span id=”fullpost”>
Type rest of the post here
</span>

So if you already have some posts in your blogger say for e.g 100 posts, you need to edit all those posts again,very lot of work, So the restriction for this hack is that, this will work only for the future posts and you need to add the above code for every post. Also this script cannot create automatic thumbnails for the posts. This is a restriction of this script. Now there is a new script developed by Blogsphera, where you can have an automated thumbnail for every post and automatically size the content of a post into a summary with a nice “Read More” icon at the end of each summary.

The installation
Note: Before the installation please read instructions carefully.
1.you can install this only if you dont have read more / jumpbreak installed in your template.if you have readmore in your blogger template just remove it.

Follow these instructions carefully.

STEP #1 .

Add JavaScript to the Header

To add the javascript to the header, first you need to login to blogger and goto “Layout” and the “Edit HTML” sub tab. First backup your template, by downloading to your computer.

Then find code </head> .

Just before the </head>, insert the following code.

<SCRIPT type=’text/javascript’> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src=’http://www.mdn.fm/files/242605_zmabd/readmore%2Bsummry.js‘ type=’text/javascript’/>

NOTE: ‘http://www.mdn.fm/files/242605_zmabd/readmore%2Bsummry.js’ is the link where we upload javascript of auto readmore and post summary, for your safty please download it and upload to your file hosting. if you don’t have direct file hosting use our link without worry.

Then , save your template.

STEP #2 .

Adding the code in post Body

check “Expand Widget Templates” option in the “Edit HTML” page and search for this Code.

If you’r unable to find above code try to find this one below

<data:post.body/>

Replace, the <p><data:post.body/></p> or <data:post.body/> with the following code.

<b:if cond=’data:blog.pageType == "item"’>
<p><data:post.body/></p>
<b:else/><DIV expr:id=’"summary" + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style=’clear: both;’/> <div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’><img src=’http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png’/></a>
</span></div>
</b:if>

You should now see your homepage like this—-.

Customizing

CODES:

<SCRIPT type=’text/javascript’> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src=’http://www.mdn.fm/files/242605_zmabd/readmore%2Bsummry.js‘ type=’text/javascript’/>

We can also customize the above code to suit your needs.

var thumbnail_mode = “no-float”; By default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option ” float ” instead of “no-float”.
summary_noimg = 500 ; This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit your template.
summary_img = 400 ; If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.
img_thumb_height = 130; This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.
img_thumb_width = 281 ; This tag decides the width of the Thumbnail image to be shown.

Customizing “READ MORE” IMAGE

if you don’t like the image at the end of summary, you can define your own image icon and upload it to a host and replace the red <img> url link with your own link. Also if you don’t like the image or you feel it is un-necessary you can replace the <img> tag as in the following code.

<b:if cond=’data:blog.pageType == "item"’>
<p><data:post.body/></p>
<b:else/><DIV expr:id=’"summary" + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style=’clear: both;’/> <div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’><img src=’http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png‘/></a>
</span></div>
</b:if>

http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png

Change it with your own image link

If You dont want any image just replace below code with your text

<img src=’http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png‘/>

If you have any problem or request or sujjestion please leave it below

Filed under blogger Tricks

How to create Facebook Fan Page and Like box

January 9, 2011 Leave a comment

To create a Facebook Fan Page start by logging into your facebook account. Then go here. You’ll immediately see two options: Community Page and Official Page.

Choose one to fill out. Say, you chose Official Page.

Start by knowing what your service is, then click on the radio button. A drop-down list will show up beside it. Select a sub-category.

Fill the Page name form with any name you can think of. Keep it clean.

Tick the Terms check box.

Click “Create Official Page”.

Getting your Facebook Fan Page plugin

You’ll then be redirected to your Fan Page. Immediately get your fan page url including the numbers.

Option 1: My settings
After creating a fan page and if you want a fan page like box like mine,

just copy and paste this code then replace 117737240172158 with the number on your fan page url

<div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3a%2f%2fwww.facebook.com%2fpages%2fblogger-templates-and-widgets%2f117737240172158&amp;width=280&amp;colorscheme=light&amp;connections=10&amp;stream=false&amp;header=false&amp;height=125' style='border:none; background:#fff; overflow:hidden; width:280px; height:125px;'/></iframe></div><div class="misc-link"><a class="misc-btn" href="http://www.facebook.com/pages/create.php" rel="nofollow">Get Facebook plugin!</a></div>

You can adjust the width and height of the plugin by looking for these properties and changing their values.

width:280px height:125px
width=280 height=125

Option 2: Your settings
Furthermore, if you want to change the look of your plugin select this step. It is present on the main page of your fan page.

You’ll be redirected to the plugins page. Select “Like Box” from the pool of plugins.

Enter your fan page url into the “Facebook Page URL” form, customize the plugins with option below it.

Finally click “Get Code”, then copy-paste the code on your site.

If you have question(s) and suggestion(s), please leave it below

All credit goes to jacob of bloggertemplateswidgets.com

Filed under blogger Tricks

Increase ad space with Rotating Banner ad script

January 9, 2011 Leave a comment

With minimal ad space! This could be the least thing you want right now and you wish you could add some more space. Got 5, 10 or more banner ads to display? Well there is a way to do it and its not just adding spaces, it display everything in the same place! And that’s what this post is about.

Credits to Verminox of Invisionfree.com for this script.

This code will change the image and link to another set after every page view or page impression. These are random banner ads that will displays any banner and link that is in the script.

To install, just copy-paste the code below then replace http://www.domain.com/page1.html with your target url andhttp://www.domain.com/image1.gif with your target image.

First Methode (basic)

This is the basic code that can contain 10 banners and 10 links. Width and height can be set via CSS styles.

Second Methode

This code can also contain 10 banners and 10 links. You may define banner’s height and width altogether within the script.

Define image size
Change the width and height values of the banner to whatever you prefer or your could use these popular ad banner sizes which are 468×60 (Horizontal), 250×250 (Square) and 300×250 (Horizontal) for better exposure.

If you have question and suggestion, please leave it below.

Filed under blogger Tricks

← Older posts

wewillrock.wordpress.com

Add Skype Emoticons in blogger comments

Blog template and compatibility with internet browsers (VERY IMPORTANT)

swap post title and blog title in Blogger

Add Dynamic Effects to images in blogger

Add Adsense Below Blogger Post Title

Related Posts widget for Blogger from Google OFFICIAL

Windows Live Writer 2011 – Keyboard Shortcuts

Automatic Summary and Thumbnail Script for blogger and websites FIXED by us Working 100%

How to create Facebook Fan Page and Like box

Increase ad space with Rotating Banner ad script

Categories

Recent Posts

Archives

Blogroll

Meta