09 August 2010

HTML and JavaScript inside blogger posts using custom display boxes

1 comments
If you are a blogger blogspot platform and want to see HTML code of your blog posts has been difficult, how. You can see that I created them in special boxes for HTML tags and code to remain in one piece inside the post. It is a nice trick blogger platform if you are willing to send signals and tutorials for your readers.

To do this, you have to do two simple steps


Step 1

You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+D on your keyboard and search this tag,

 ]]></b:skin> 


Now you have to add this code above that code,


pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}


Now it will look something like this,



After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template“


Step 2


Now each time you create a post and you need to add some HTML codes inside your post, you have to convert it into escapable characters. For this go to this tool called Quick escape and insert your code. Click, “Convert to escaped character” the converted code will be different than the original.

Now create a new blog post and add the converted code. You have to enclosed the code with a “pre” tag(marked as blue) For this I’ve added the same code twice. One normally and the other one with the hack.
Publish your post and see the magic! The normal code showed up with the effect but the hacked on remained intact inside the table.


Make your Blogger Blog ready for Mobile Phones

0 comments
As you know, millions of people use their mobile rings to access net. The mobile net speed is also speedy these days with 3G's , mobile apps,etc.
From this, they can say lots of of your readers are coming to your weblog through mobile rings..But, in the event you don't make your weblog mobile friendly, .you may lose all of your mobile readers because in a mobile phone, a traditional weblog takes lot of time to load & there's other issues that your site not fitting properly in the mobile screen.
So, here is how to make your Blogger (blogspot) weblog mobile net friendly..

Sign into your Blogger account > Design > Edit html

Find this line..

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

Paste this code below that line...

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>


Save the Changes!
That is it! Now, your visitors can access your blogger weblog through mobile rings with blazing speed...
Related Posts Plugin for WordPress, Blogger...

HeadLines

Recent Posts Widget | Webaholic