Feb 15, 2013

How to hide Left Sidebar and css Based Box or widgets to make Home page look different

Read all carefully and apply with cool mind. Before doing any thing on your HTML code ,

you must download the template for any accidental loss.

Go to template>expand widget>

Then Search this code

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

or

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

Sometimes first code in which we see "index" word works for few blog homepage, but sometimes the .homepagUrl work for homepage.It is to be choosen as where it is needed for working of the code.

The code will look like this.

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

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

<style>
.blog-pager, .footer, .post-footer, .feed-links, .ex,
#sidebar-left-1 { display:none !important;}.main-inner .columns
{width: 70%;padding-left:0 !important;padding-right:0 !important;}
</style>

You are done.

----- For hiding the widget or css style id or class on post page we do the following.

Go to template>expand widget>

Search this code by doing this Ctrl+F

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

or

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

The code will look like this. There may be more "item" code. Choose first one and do just like this.

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

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If you don't want to adjust the width of main container , then remove this code from the total yellow set code.

.main-inner .columns {width: 70%;padding-left:0 !important;padding-right:0 !important;}

And left the rest yellow code as it is. In the highlighted yellow code any id or class can be edited as per user choice. You are done.

----- Here I am giving most important trick. If any of the above hack is not working then add this set of code near the code for which you want to do the styling.

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

PUT THE YELLO HIGHLIGHTED CODE HERE

</b:if>

This is the very important one. Read all carefully and apply with cool mind. Before doing any thing on your HTML code , you must download the template for any accidental loss.

Feb 10, 2013

How to Insert conditional Element on a Particular page type | VERY IMPORTANT FOR BLOGGER

Must read the bottom part of this post. These are very important for a blogger.
First we have to find this code:  <b:if cond='data:blog.url == data:blog.homepageUrl'>

TEMPLATE>BACK UP TEMPLATE>HTML>CLICK EXPAND WIDGET
Then do this.
CTRL+F
 Paste this in find text box of the browser .
<b:if cond='data:blog.url == data:blog.homepageUrl'>

The total code is look like this.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
PUT THE CONDITION HERE
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>


THIS IS THE CONDITION. And add  <b:else/>  at the end of the condition.

<style>
.blog-pager, .footer, .post-footer, .feed-links, .ex, #Gadget1, #Stats1, #HTML8, #sidebar-left-1, #Followers1 { display:none !important;}.main-inner .columns {width: 60%;padding-left:0 !important;padding-right:0 !important;}
</style>
  <b:else/>
------------------
Different conditional code outer enclosures:
General enclosure for conditional style:
<b:if cond='PUT_CONDITION_HERE'>
</b:if>
--------------
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
---
<b:if cond='data:blog.pageType == "item"'>
</b:if>
----
TOTAL WIDGET NAME OF PAGE TYPE IN BLOGGER FOR CONDITIONAL CODING:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url == "PUT_URL_HERE"'>
<b:if cond='data:blog.url == data:post.url'>
<b:if cond='data:blog.searchLabel'>
<b:if cond='data:post.isFirstPost'>
WE HAVE TO ATTACH </b:if> AS ENCLOSURE FOR ALL ABOVE WIDGET ADDITION.
These code can be also added nearest to its sister location. 
-------

For details see these pages:
http://www.spiceupyourblog.com/2010/02/blogger-gadgets-home-page-only-post.html
http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html




Feb 8, 2013

How to Disable Selection and Copy Paste Only Blog Post

This is very important code for disabling selection and copy  of the blog post.
Put this code above </head> to deactivate copy paste of blog post only. 


.post-body {

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;         
}

This code can also be put in extenral css file eg mystyle.css. And this is to imported into head section of the source code ie above </head>. The imported code may be like this.

<link href='https://itg-js-and-css-akb.googlecode.com/svn/trunk/mystyle.css' rel='stylesheet' type='text/css'/>