Your Ad Here
Edit Bloggy Forum
Join with our NEW Edit Blogger Forum !
No need to Register to start Threads ! Free to Spam ! And many more Amazing things !

Singho 2, my android game

Singho 2 is a sri Lankan life style based platform game developed for android platform.



Singho travels though missions ( 12 missions ) collecting gems and defeating evil spirit using his spells (manthara) . Evil spirits (yakku) also will use bad spells against Singho. You can see manu sri Lankan landmarks along the way like sirigiya rock, sthupas, carts n stuff. You have to avoid them and spell good spells towards him (just like shooting games, difference is you use your mind instead of guns and spells instead of bullet). His target is to collect all the gems and meet with his wife.  Eating betel (bulath wita) will gain Singho’s health. There will be more surprises on the way.  Singho’s main mission is to collect all the gems, defeat the evil spirits and save his wife, ‘suduu’.

https://play.google.com/store/apps/details?id=me.dilshan.singho2







check it out and leave comments guys.thanks


CCS codes part 01

CCS codes are used at many occasions in the blogger template. If you don't know about these , you may be confused as you see a letter with binary codes. So skip it. For Other , I think these might be very useful at editing your blogger template.


Margin & Padding



#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}


or


#div {
margin:0 5px 10px 15px;
(top right bottom left)
}



Border


#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}



or


#div {
border:5px dotted blue;
}



Background


#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}



Font


#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}



List


#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}



* From www.leigeber.com

Adding 4 extra columns to footer

You can add more and more extra columns to your blog. Now here i am describing you to how to add 4 more columns to your blog's footer. You can add text gadgets and HTML widgets. How ever these gadgets boxes may not appear similar to your excisting gadgets.They may appear like this.





1. Edit your Template
2.Untick the "Expand widgets" tick box if you had ticked it.
3. Now find out


<b:section class='footer' id='footer'/> ( press 'Ctrl' + F to open your browser's search box)


Now paste following code lines by Replacing the line


<b:section class='footer' id='footer'/>





<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text100' locked='false' title='Your gadget's Caption here 1' type='Text'/>

</b:section>
</div>

<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='HTML100' locked='false' title='
Your gadget's Caption here 2' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text300' locked='false' title='
Your gadget's Caption here 3' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='HTML200' locked='false' title='
Your gadget's Caption here 4' type='HTML'/>
</b:section>
</div>


<div style='clear:both;'/>
</div>



CONFIGURATION :-

TEXT stands for Text gadgets
HTML stands for HTML gadgets


Now follow the Safety Saving Steps.

And



To be continued...................

Adding a Drop down Labels menu

Labels , they help the reader to find posts under specific category. But , if you are using a single column template or if you are having too many labels , it may be a big problem for you. So , that's why programmers had invented some thing called the Drop Down Menu. Lets add one of it to our blog too.



1. Edit your Template
2. Now find out


<b:loop values='data:labels' var='label'>



( press 'Ctr
l' + F to open your browser's search box)

Now you will find a set of code lines similar to following



<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>



Now replace above whole code set with the following codes


<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By Labels( Name you want to display as drop down menu's caption )</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>




Now follow the Safety Saving Steps.

And

Controlling number of posts in Label pages

As you know , if you click on a label , it will redirect you to a page with all the posts on that label. If there are lots of posts for a specific label , the label page will be so long. This will annoy the reader. Blogger do not give us a simple way to control this label page's posts. So we have to do it manually. Lets see how to ,


1. Edit your Template
2. Now find out


<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>


( press 'Ctrl' + F to open your browser's search box)


Now you will find out some code lines as


<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>




If you already have deleted the label number count ( learn how to remove label number count ) You may not see code


(<data:label.count/>) line.


Now replace


<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>



with


<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'>


5
stand for the number of posts per a label. Change it to any number ( number of posts that you are willing to show in the label page )


Now follow the Safety Saving Steps.

And


Contact Me

Do you have any problems on blogging , or do you want to propose me a new trick or ask me how to do a new trick ? Contact me. I am always here to help you.



Contact me on Skype


My status



Contact me on Yahoo Messenger


Send me a Email




Adding a RSS Email subscription form

Adding a Email subscription form may help you and the reader too. In your side , it will attract the readers and for readers , they can keep in touch with the blog. If you add a new content , an email will automatically send to their mail box and if not no email. This service is given to us by Feed Burner ( Part of the Google ) .As soon as your subscription is active, Feed Burner will send a daily email message if your blog has new content.

Now lest see how to do this. First you have to log in to Feed burner using your Gmail account.
Now you have to go on your own.

just give your blog address and complete the steps. After all , access to your account and select your blog address. Noe select tab Publicize , and select Email Subscriptions from the menu. Now under Subscription Form Code you may see bunch of code lines.


They may similar to these


<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggyEdit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="BloggyEdit" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>


You can just paste these but it is just classic , if you want to a form like mine , you have to edit these codes.

For that You have to create a Image. ( Or you can use a text , but if you want to attract more readers , use a Image. ). Here is the my image. I create this one using Power point 2007.


Now , look at these codes


<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggyEdit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc ;' target='popupwindow'>

<img alt='feedburner' src='http://sites.google.com/site/dragonzstore/_/rsrc/1243352697922/111/RSS1.PNG' style='border: 0pt none ; margin-top: 15px;'/>
<p>

<input name='email' style='width:300px' type='text' value='Enter your Email Address here'/>
</p>
<input name='uri' type='hidden' value='BloggyEdit'/>
<input name='loc' type='hidden' value='en_US'/>
<input type='submit' value='Subscribe Now'/>
</form>


Now edit your code by looking at these , just cut , paste , move and add the image.

Use this


<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggyEdit&apos ( your address ) ;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc ;' target='popupwindow'>

<img alt='feedburner' src='http://sites.google.com/site/dragonzstore/_/rsrc/1243352697922/111/RSS1.PNG ( Your Image's URL here ) ' style='border: 0pt none ; margin-top: 15px;'/>
<p>

<input name='email' style='width:300px ( length of your text box )' type='text' value='Enter your Email Address here ( Text inside the Text box )'/>
</p>
<input name='uri' type='hidden' value='BloggyEdit ( word at your feedbuner code )'/>
<input name='loc' type='hidden' value='en_US'/>
<input type='submit' value='Subscribe Now ( button's caption )'/>
</form>


Now ,

1. Edit your Template
2. Now find out


<data:post.body/>

( press 'Ctr
l' + F to open your browser's search box)


Paste the code that you edited.


Now follow the Safety Saving Steps.

And

Adding a set of Smilies to comment box

Here is a cool trick to try. You can embed a yahoo type smiley set to your comment box as i have done in mine. In the reader wants to add a smiley , he just have to look at it , choose the correct symbol for the appropriate smiley and type the symbol. This may also encourage user to leave a comment. Here is how to do it.

1. Edit your Template
2. Now find out


<p class='comment-footer'>


( press 'Ctrl' + F to open your browser's search box)

If you find two or more code lines , select the second one.
It must be look like this.


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<h3><a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>

</b:if>
</b:if>
</p>
</b:if>


Now replace this set of code lines with following codes. ( make sure you replace above whole set )


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>
</b:if>
</p>
</b:if>


Now find out


</body>


( press 'Ctr
l' + F to open your browser's search box)

and paste this code line just above it.


<script src='http://www.hotlinkfiles.com/files/2567928_jj914/smiley-EditBloggy.js]smiley-EditBloggy.js' type='text/javascript'/><noscript><a href="http://techknowl.com" target="_blank">Blogger



Now follow the Safety Saving Steps.

And



Customizing.....

border: 1px - Border width
solid #cccccc
- Border color
padding: 5px
- Distance between 2 smilies
background: #eeeddf
- Background color of smiles box

Adding Blogger sitemap to google web master

Submitting the Sitemaps of your blog to Google Webmaster helps the Google search engine to crawl your blog pages easily and more quickly! Now lest see how to do it.

First of all Sign-in to Google Webmaster Tools

Now add your blog address




Now , you have to verify whether site is yours ,



There are two methods to verify ,

1.To create a web page
2.Add a meta tag

we can't create a web page on blog as they say us to do. According to them we have to create a web page in a address of
http://yourblogname.blogspot.com/google60xxxx8a156480b.html

It's impossible for blogger , now the second method,

adding a meta tag. When you choose that option they will give you a code to paste.


<meta name="verify-v1" content="5O0v6H8LZLAE0sk4GFs0xxoYelvBidoEJxXxlTg6kQE=" />


You can't just paste this at any place of your template,

to paste this


1. Edit your Template
2. Now find out



<b:include data='blog' name='all-head-content'/>


( press 'Ctr
l' + F to open your browser's search box)

in some templates it says


<b:include data="blog" name="all-head-content"/>


now paste your meta tag , just above this code line.


Now follow the Safety Saving Steps.

And

Adding a Tag cloud

Tag cloud is a collection of labels which are beautifully categorized. Hope you may have seen it in many other blogs.Not only in blogger , wordpress but also in web sites too. Now lets see how to add this tag cloud.





1. Edit your Template
2. Now find out


<b:section class='sidebar


( press 'Ctr
l' + F to open your browser's search box)


Now you will find a code line similar to


<b:section class='sidebar' id='sidebar' preferred='yes'>


now just after it , paste these code lines






<b:widget id='Label88' locked='false' title='Labels' type='Label'>






<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='Labelcloud'>
</div>
</div>
<script language='javascript' type='text/javascript'>
function Magnifytxt() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;&quot;;
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:&quot; + size + &quot;%'><a expr:href='data:label.url + &quot;?max-results=100&quot;' style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>
obj = document.getElementById(&#39;Labelcloud&#39;);
obj.innerHTML = display;
}
Magnifytxt();
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>



Now follow the Safety Saving Steps.

And

Showing Gadgets in Specific pages

If you want to show a specific gadget in a Gadget in Specific pages , there is a way to do that. Now you may think , why should i hide my gadgets in some pages. Now here is the reason. if you are using tons of gadgets , it may slow down you blog's loading time. Specially if you are using Flash gadgets. So , hiding them in posts and showing them in the home page is a cool trick to boot up your blog's loading speed.

First of all , decide which gadget should you hide. It may be a Flash gadget or a Image gadget or any thing.Make your you have provided a name for it. I means, in the visitors gadget , you may have given a name as 'Visitors'.


Now, This trick will help you to show your gadget only in home page
Edit your Template and Search under ( press 'Ctrl' + F to open your browser's search box) that name.

And keep in mind , that if you have used any sign , marks like these , ' . < > " , you can't search them, just change them to another name without those marks temporary and search.

Now you will find some code lines as


<b:widget id='HTML13' locked='false' title=' Your Gadgets Name here ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Now paste these code lines


( <b:if cond='data:blog.pageType == "index" '> , </b:if> )


as shown below


<b:widget id='HTML13' locked='false' title=' Your Gadgets Name here ' type='HTML'>
<b:includable id='main'>


<b:if cond='data:blog.pageType == "index" '>


<b:if cond='data:blog.pageType == "index"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>


</b:if>


</b:if>
</b:includable>
</b:widget>


Now follow the Safety Saving Steps.

And



If you want to show your gadget in all post pages but not in the home page , use


<b:if cond='data:blog.pageType == "item" '>


code line instead of using


<b:if cond='data:blog.pageType == "index" '>


If you want to show your gadget in a specific page only , use code line


<b:if cond='data:blog.pageType == " Paste your Page's URL here " '>


instead of using


<b:if cond='data:blog.pageType == "index" '>


And also , remember that even though the gadget is hidden , you may see some thing like this...

Adding a floating “back to top” button

In long blogs ( such as mine ) , after scrolling down , you may take long time to scroll up again. For that , we have a little gadget to add. You can add a image to automatically scroll up words. Or you can use a text. ( I tried this trick under Microsoft Internet Explorer but it did not work , many graphic tricks sucks under Internet Explorer. Just try to use another web browser as Fire Fox or Chrome). Now lest see how to add this.


1. Edit your Template
2. Now find out


</body>


( press 'Ctr
l' + F to open your browser's search box)


Paste following lines just above it.



<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top">
<img style="border: none;" src=" Paste your Image's URL here "/>
</a&gt;


If you want a Text instead of the Image button, use this code


<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"> Go to Top </a>


Now follow the Safety Saving Steps.

And



bottom:5px; - stand for the position , pixels from bottom
left:5px;
- stand for the position , pixels from left


Here are some Icons for you,

Image URL - http://dryicons.com/images/icon_sets/stickers_icon_set/png/64x64/up_arrow.png


Image URL - http://dryicons.com/images/icon_sets/blossom/png/64x64/up_arrow.png


Icons by :- http://dryicons.com

Convert Ur blog in to a Magazine blog ( Adding 'Read More' styles)

Is there a big different between your and my template ? hmm ? oh , yes , in my home page I have a Magazine type template with a Read More buttons and you have a blog with a homepage of posts that show their whole body and take a long time to load. And also it makes your blog more longer. ( If you are posting more than 5 posts per a page ). So , do you want to know how to add 'Read More' buttons and make your blog more profeesional ? so here is the way !


Fisrt of all , go to the Settings tab , then select Formatting tab and go to the option Show. Now add a number more than 5. ( Here in my blog , I keep about 15-20 posts in homepage )



Now

1. Edit your Template
2. Now find out


<data:post.body/>


( press 'Ctr
l' + F to open your browser's search box)

Now Replace


<data:post.body/>


with
these codes. Make sure that you REPLACE this line. In some templates , I have seen a line as


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


instead of



<data:post.body/>.


If then replace the whole



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


line with follwing lines.



<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Now follow the Safety Saving Steps.

And

That's it , now your blog will too get converted to a Magazine type template as following photo.



Do you like to add a Image too ? like in this photo ?


Then change these two lines of codes


img_thumb_height = 0;
img_thumb_width = 0;


to


img_thumb_height = 80;
img_thumb_width = 100;


or any hieght and width that you like to have.


If you want to increase your post's height ,


summary_noimg = 400;
summary_img = 300;


change these to any amount you need !


summary_noimg = 400; stand for the post's hieght without a Image.
summary_img = 300; stand for the post's hieght with the Image.

Adding Social Bookmark buttons

Adding bookmark buttons may help you and the reader in many different ways. It will help you to make your blog more popular and also bring you more traffic. And the reader will be able to share your knowledge with his or her friends and others. And also , adding social bookmark buttons will make your blog ore beautiful and advanced.


Lets see how to add these social bookmarks.Here I have used only few social bookmark buttons. I have seen tons of social bookmarks in some blogs. But , many readers use only few famous sharing web sites such as Digg , Technorati , del.icio.us , Stumbleupon , Reddit and tweeter.So I decided to only to use them.


1. Edit your Template
2. Now find out


<data:post.body/>


( press 'Ctrl' + F to open your browser's search box)

Now paste these code just below it



<center>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' src='http://sites.google.com/site/dragonzstore/_/rsrc/1242814592015/bookmarks/digg_48x48.png'/></a>

<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://sites.google.com/site/dragonzstore/_/rsrc/1242814666922/bookmarks/technorati_48x48.png'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://sites.google.com/site/dragonzstore/_/rsrc/1242814638485/bookmarks/delicious_48x48.png'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://sites.google.com/site/dragonzstore/_/rsrc/1242814652738/bookmarks/stumbleupon_48x48.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://sites.google.com/site/dragonzstore/_/rsrc/1242814621583/bookmarks/reddit_48x48.png'/></a>

</center>





Now follow the Safety Saving Steps.

And




Don't like my Button ? Then use your own. Just replace your social bookmark button's image URL with the orange color ( given social bookmark button's image URL ) and you are done !


Here are some more Buttons for you to download

Social Bookmark Christmas Icons

http://fasticon.com/freeware/?p=72
Package includes 17 bookmark icons.

Social Bookmark Icon

http://www.freakgroup.com.ar/pack-de-iconos-sociales-v10/
Package includes 12 social bookmark icons in PNG format.

Social Bookmark Circle Icons

http://fasticon.com/freeware/?p=65
Package includes 10 social media icons.

Adding a background Image to the Title of post

If you like , you also can add a background image to your post title's background. The most amazing thing is the resolution. Though you use a short small Image as the background image to your post title's background , it will re sized and posted repeatedly. So better to use a Pattern as the background image.



To do this

1. Edit your Template
2. Now find out


post h3


( press 'Ctr
l' + F to open your browser's search box)

Now you will find out several post h3 code lines but use the first post h3

You will see bunch of code lines which are very similar to these

.post h3 {
color:#3E3533;
------------ Post title's color
font-size:20px;
------------ Post title's size
font-weight:bold; --------- Post title's font decoration
line-height:1.4em;
margin:0.25em 0 0;


Now paste this code line just after the code line .post h3 {



background: url( Paste URL of your Image here ) top repeat-x;


ex:-


.post h3 {
background: url( http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg ) top repeat-x;
color:#3E3533;
font-size:20px;


*keep in remember , above code lines will be in a different way according to the template you are using.


Now follow the Safety Saving Steps.

And




Some Header Images for you

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg

http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg
Your Ad Here
 
This blog sucks under Internet Explorer.

Buy me a Coffee


Powered By

Latest Site News


Animated 3D Dock removed in order to speed up loading time and to help IE users.

This site will be come up with a DOMAIN name soon.

Link and Win competition will start as soon as the Domain name added. Join with us. You could be the winner.

Site Info

since 2009 April

Vote

Vote to My site to be nominated for Best Geek Blog!

Submit a Lesson

Visitors

of Visitors read Pages.

Lessons by DragonD | Template by Simran | Logo by lahirulcd | Temaplate redesigned by DragonD| Icons by DryIcons.com | Licensed under CC license Creative Commons License