MENU

Showing posts with label Blogger Tutorials. Show all posts
Showing posts with label Blogger Tutorials. Show all posts


An iframe is used to display a web page within a web page.










Like This :



Syntax for adding an iframe:



<iframe src="URL"></iframe>

The URL points to the location of the separate page.



Iframe - Set Height and Width



The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").



<iframe src="demo_iframe.htm" width="200" height="200"></iframe>




Iframe - Remove the Border



The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>






























HTML Iframes | How to Add Iframes


First of all, go to CO.CC. Register under  http://www.co.cc/?id=142775 so i also can help you in tracking your domain name. Just click on the link and you will be forwarded to CO.CC homepage. Click on create an account now. You may skip this step if you already have one. Then, fill up all your details with email, password and all that.




Read More

How to register a CO.CC domain name Free


How To Add Count Down Redirect Script to Blogger


1.Login to your blogger dashboard and go Layout >> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.



View Topic

How To Add Count Down Redirect Script to Blogger


1.Log in to your Dashboard--> Design- ->Template

2.Click Edit HTML

3. Put checked marked in Expand Widget Templates

4. Find this tag by using Ctrl+F </head>  tag

5. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://bloggertrickandtoolz.googlecode.com/files/bloggertricksandtoolz.com-scrolltopcontrol.js' type='text/javascript'></script>                           




5.Now Click Save Template

Special Thanks : Sameera Chaturanga

Add Cool Scroll or Back to Top Button | Template Doctor



2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag

<style type='text/css'>                                 
#Bttoolz Author Box {                                  
background: none repeat scroll 0 0 #EDEDED;                                    
padding: 10px;                                     
margin-top:10px;}                                     
.authoravatar {float:left;margin-right:10px;padding:4px;background:#ccc;border:1px solid #222222;}                                 
.postauthor {float:left;}                                  
</style>

4.Now Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just After <data:post.body/> tag.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------<div style='clear:both'/> <div id='Bttoolz Author Box'><!-- Author Bio-->  
<!-- Code By templatedoctor.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.author == "NAME OF AUTHOR"'><img class='authoravatar' height='39' src='IMAGE URL OF AUTHOR' width='39'/><div class='postauthor'> <h3><a href='AUTHOR'URL Here'>NAME OF AUTHOR </a></h3><p> NOTES ABOUT Your Self </p></div><div style='clear:both'/> </b:if>-----------------------------------------------------------------------------------------------------------------------------------------------------------------

6. Now Save Template And You are done..

Add Author Bio Box to Your Blogger | Template Doctor


Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code
<data:post.body/>

4. Replace with this code below
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

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

5. Now, search for </head> and paste the following section of code immediately before it:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width



Automatic Thumbnail and Read More Function for Blogger | Template Doctor


Log in blogger / Dashboard --> Design --> Add Gadget - scroll down --> HTML/JavaScript --> copy the next code and past in in HTML/JavaScript text box area
<script language="JavaScript">
<!--  
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com  
var message="Function Disabled!";  

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}  
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){ alert(message); return false;
}
}
}  
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}  
document.oncontextmenu=new Function("alert(message);return false")  
// -->
</script>



How to stop visitors from stealing your blog content | Template Doctor


Blogger does not include the default option to install a widget or a code to generate a contact form through which visitors to your blog to send requests, suggestions, comments or just congratulate you for your work.
However, it is always the option to use external tools.

All these free services can help you to create and install a contact form in Blogger
FormSpring - Works to be included in a post in the HTML editing mode

123 Contact Form - A link to located on 123Contact Form or you can copy and paste your post in order to integrate them directly.

Kontactr - A JavaScript its deal for pasting into your Blogger post.

My Contact Form - The 14 steps to complete, click on "Get HTML" to get code and paste blogger post in HTML mode.

Pow Page Contact Us -Form is not as embedded in the page, but it appears a text link to click on and go to form, best option to insert on the sidebar.

EmailMe Form - You'll find a code to add a link that points to the contact form generated, or click on "Get the HTML Code" and get the code to insert directly into your site.



Contact Form for Blogger | Template Doctor


How to Edit Menu Links (ie: About, Contact)


lets Go:
1. Log in --> Dashboard --> Design --> Edit HTML

2. Now you have to go to menu links which are on template code. Search [CTRL + F] About
(I choose About because most of my templates has this TEXT link on Menu, you can enter Log In or etc, enough that this word must be on Menu Links)

3. Now you should SEE something like here [Check this IMAGE]

4. Now to add Pages on those Menu Links read post below:


5. If you want to delete, just delete only About text or all link


How to Edit Menu Links | Template Doctor

Html Color Codes Generator


Html Color Codes Generator | Template Doctor

1. Download the template and unzip the file (you can use a free unzipper software).



2. Go to your blog design section (Dashboard → Design → Edit HTML ).

3. Backup your previous template (Download full Template).


4. Find and upload the xml file.

5. If you see the following warning:

Click “keep widgets“.

6. Enjoy!


Sponsors:






How To Upload/Install a New Blogger Template to Blogger

Blogger news