Fixed Side Menu For Blogger

10:16 AM

(0) Comments

Fixed side menu for blogger blogspot or some says it as fixed slide in menu for blogger as was seen only in wordpress but now can be used in bloggers also.As you could see it in my blog i have side menu that moves together with you scroll movement up and down on my blog.I am sharing this with you because many of my readers were asking how to make it as they liked it much and wanted to add it to there blogs so if you liked side menu in my blog you can go further to install it in your blog too.

For Demo Of Side Menu Visit for Here:-Blogger Widgets




First Download these two files to your computer.
ssm.js
ssmItems.js

Now open the ssmItems.js file in notepad
After opening it in notepad you will see the codes like written below.


<!--

/*
Configure menu styles below
NOTE: To edit the link
colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150;
// no quotes!!
XOffset=0;
staticYOffset=30; // no
quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this
sets the time the menu stays out for after the mouse goes off
it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu
should stay static on the screen
menuWidth=150; // Must be a multiple of 10!
no
quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20;
// no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put
exact html for an image to show.

///////////////////////////

//
ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target'
blank to make a header
ssmItems[0]=["MENU"] //create
header
ssmItems[1]=["Home",
"http://anshuldudeja.blogspot.com",
""]
ssmItems[2]=["Blogger
Widgets
", "http://anshuldudeja.blogspot.com/search/label/Blogger%20Widget",""]
ssmItems[3]=["Blogger Hacks", "http:///anshuldudeja.blogspot.com/search/label/Blogger%20Hack",
""]
ssmItems[4]=["Blogger
Tutorials
", "http://anshuldudeja.blogspot.com/search/label/Blogger%20Tutorial",
"_new"]
ssmItems[5]=["Blogger
Templates
", "http://anshuldudeja.blogspot.com/search/label/Blogger%20Templates",
""]
ssmItems[6]=["Contact",
"http://anshuldudeja.blogspot.com/2008/11/contact-us.html",
""]

ssmItems[7]=["FAQ",
"#nogo", "", 1, "no"] //create two
column row
ssmItems[8]=["Email",
"#nogo",
"",1]

ssmItems[9]=["External Links", "", ""] //create
header
ssmItems[10]=["Online
Jobs
", "http://earnwithbloggers.blogspot.com",
""]
ssmItems[11]=["Funny Blog",
"http://funny-concepts.blogspot.com",
""]
ssmItems[12]=["Earn Money",
"http://ezinfocenter.com/10142921/CB",
""]

buildMenu();

//-->


Now just edit the the links in red in codes to place your own link which you want to display and text in blue which you want to show up the title for that link.

After editing all these links just save the file.
Now upload both files ssm.js and ssmItems.js to your own server.

Now GO To LAYOUT > EDIT HTML
and find the </head> tag and place the below codes before it.


<style type="text/css">
<!--
A.ssmItems:link
{color:black;text-decoration:none;}
A.ssmItems:hover
{color:black;text-decoration:none;}
A.ssmItems:active
{color:black;text-decoration:none;}
A.ssmItems:visited
{color:black;text-decoration:none;}
//-->
</style>


<SCRIPT
SRC="http://bandofgirls.googlepages.com/ssm.js"
language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus,
http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype
bug
//For full source, and 100's more DHTML scripts, visit
http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT
SRC="http://bandofgirls.googlepages.com/ssmItems.js"
language="JavaScript1.2"></SCRIPT>


And don't forget to change the links in red above with the links of yours where ssm.js and ssmItems.js file is uploaded to your own server.

And now SAVE It.

Yup you have just Done now. View your blog. If you have any problem please write below in comments i will help you out.I think you will enjoy this widget for sure.

DOTMONSTER

Show Only Post Title In Blogger Label-Archive-Home Pages

10:02 AM

(0) Comments

How to Show Only Post Title In Blogger Label page,Archive Pages or even on home page of your blog.You sure would have seen many blogs using this trick to show only there post title in any page they want.Wordpress blogs easily do this using various plugins available but we bloggers also now can make it work in our blogs as its very simple tutorial to implement.

Here is an hack how to show post title in any desired page of an blog.

Please Read this tutorial very carefully as it is very easy but i am telling you two ways of doing which have different results.You can use one way at time or both ways at time but results will be different.I will try to make it very simple for you with what would be the result to the blog with each step, so read carefully.

1.Login to Blogger
2.Go To LAYOUT
3.Then Click On Edit HTML
4.Check Mark Expand Widgets
5.Press Ctrl+F

Now search For below code line in red :-

<b:include data='post' name='post'/>

And Replace it with Below Codes:-


<b:if cond='data:blog.homepageUrl
!=
data:blog.url'>

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

<h3 class='post-title'><a
expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include
data='post'
name='post'/>

</b:if>

<b:else/>

<b:include
data='post' name='post'/>

</b:if>


Now Preview Your template. If it accepts Your Html.Then Save It.

Now open your blog and click on the label or archive page of your blog it will show only post title . For demo check the category page of this Blog.

I hope you will be satisfied with it.This is one way.

Now there is another way of doing it but the results are different.

If you want to show only title of posts in your blog home page also,then only follow this way and implemet it.If you want only label page to show post title just get stoppd after reading first way only.

Now the second way to show only post title in blogger home page too.

1.Login to Blogger
2.Go To LAYOUT
3.Then Click On Edit HTML
4.Check Mark EXpand Widgets
5.Press Ctrl+F

Now search for this line in red :-

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

After finding this line replace it with below codes :-


<b:if cond='data:blog.pageType ==
"item"'>
<p><data:post.body/></p>
</b:if>



*Note-If you are using read more hack in your blogger you will get above red line twice.So replace only the line that appears first in your blog html code and leave second one as it is.

And then preview your template,if its ok. Save It.

The result would be like this in your blog.

Now i will explain difference in both hacks,so dont get confused.

1)Using only 1st way show post title in only label pages and archive pages.
2)Using only second way will show post title in your blog home page and label pages too but the result in label pages is not so beautiful as it shows Post footer links too like it shows in home page.
3)Install both ways in your blog together if you want to show post title in all of your blog pages and give it beautiful look, like have done it in my Earn Money Blog.

I hope now it have been clear how to use both, if still confused just implement 1st way and if you want post title in home page also implement 2nd way also. Thats' it.
If still any problem leave your comments.

Good Luck !!!!

DOTMONSTER

Man v Food S01E16 HDTV - TV Show

12:44 AM

(1) Comments

DOTMONSTER

Aligned - Wordpress Theme

12:10 AM

(0) Comments

Aligned WordPress Theme

Aligned
WordPress theme was based on a Habari Project theme of the same name by
Thomas Silkjaer - The Undersigned. The theme features a grid-based
layout with two columns.


Theme Information
Created by: 
WP Pro

DOTMONSTER

How to Add "Read More..." Expandable Posts link in Blogger

3:05 AM

(0) Comments

This tutorial is very easy if you just follow this step by step tutorial properly. With this hack, you can choose to display only a selected amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of your post, they can click a “Read more...” link to read your entire post. (Note that you’ll need to have post pages enabled in order to make this feature work.)


Update Your Template Code:

1. Login to your Blogger account and go to Layout > Edit HTML (click Expand Widget Template).

2. Find this line of code:

<data:post.body/>
3. Copy this code just before the code above:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


4. Now, copy this code just after the code above (<data:post.body/>):

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>

</b:if>

Change the Read more... text to whatever link text you want to appear. The result should look something like this now:


5.
Save your template.


Adding Class Tag in Your Default Post Template:

1. In your Blogger Dashboard, go to Settings > Formatting and scroll all the way down to the bottom. Copy this code and then save settings:

<span class="fullpost">

</span>

It should look something like this:



Creating a New Post:


When you click the Posting tab (HTML mode), you'll notice that your default post template now has <span class="fullpost"> and </span> tags. Anything you put above the tag <span class="fullpost"> will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span> tags in order for the “read more…” link to work properly. See image below:

Publish or preview your new post to see your newly created "Read More..." works on your blog.


Feel free to ask me if you have any problems regarding this tutorials. ENJOY!

If you cant find
<data:post.body/> :

Check the [ ] Just at the top of HTML Text Area

DOTMONSTER

Persona Mag - WordPress Theme

1:15 AM

(0) Comments

Persona Mag Wordpress Theme

3 columns & widget ready WordPress theme with a very minimalist design & layout.

Theme Information
Created by:
ChiQ Montes
License:
Free

DOTMONSTER

AcosminTYPO - WordPress Theme

1:07 AM

(0) Comments

AcosminTYPO Wordpress Theme

Acosmintypo is a quite simple and old school looking 3 columns Wordpress theme.

Theme Information
Created by: 
Alexandru Cosmin
License: 
Free



DOTMONSTER