My TutSpot BlogSpot

Showing posts with label Blogspot Tricks. Show all posts

Showing posts with label Blogspot Tricks. Show all posts

How To Add Music to Blog And Website

Background music has a cool effect on the visitors of your blog or websites. It may help you in catching the attention of your visitors, that is what needed by every blogger or web designer or developer. We will describe here different methods of embedding background music but before them there are some important points that should be remembered.

Background music not only enhances the reading pleasure but may also annoy the reader, if the music played is opposite or irrelevant to the matter of blog or website. It may also increase the page loading time if too big music file is used, so kindly avoid too much heavy file and please also provide play stop option for the visitor, helping him to stay on the page.

Background Music

The first thing you need to start this is a music file uploaded onto a server. For bloggers the best free server are Google Sites or Google Drive. Once Uploaded, copy the url of music file and use it in any one of the following codes (whatever you use).

There are two main methods of embedding or using background music in your blog or website, based on the type of browser compatibility. For browsers having HTML5 compatibility audio tags are used while for older browsers embed tag is used.

For using audio tags copy the following code anywhere in your website or blog, inside the body tags. Replace the music url with your music file URL. The text in between audio tags “your browser doesn’t support HTML5” is shown in the browsers that doesn’t support HTML5, if you want to remove it you can.

Code

<audio src="music url" controls>
<p>Your Browser Doesn’t Support HTML5</p>
</audio>

For older browsers or for browsers that don’t have HTML5 compatibility use the following code.

Code

<embed name="bgmusic" src="music url" width="300" height="90" autostart="false" control="smallconsole" />

You can change the width, height, autostart and name attributes as you wish. For cross browser support and to avoid any problem it is better to use both these code, i.e. using embed tag in between audio tags as shown below.

Code

<audio src="music url" controls> <embed src="music url" width="300" height="90" loop="false" autostart="false" control="smallconsole" />
</audio>

For any queries and troubleshooting problems feel free to ask.

How To Embed "SWF,FLV" Files Into Your Blog And Website

Nowadays flash files are widely used in web and blog developing and designing, they not only give a gorgeous look to them but also provide a handy user interference.

Embedding a flash file in HTML pages is as easy as 123. All you need is a flash file uploaded at FTP (File Transfer Protocol) server. The best and free way for uploading flash file is to upload them on Google Sites.

Make a site on sites.google.com
Change page template to file cabinet.
Add .swf file.
Right-click and copy the download url of .swf file.
Type this code in your site or blog.
Replace the green code with the url of .swf file.
Save and enjoy.

Code

<embed src="https://sites.google.com/site/exeideashassan/exe-ideas-hare-drive/EXEIdeasUnderConstruction.swf?attredirects=0" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="600px" width="800px"></embed>

Change quality, align, height and width attributes to your need and mood.
Feel free to ask any queries.

How To Add Stylish Borders Around All Blog's Gadget/Widget?

Some time your template is so simple that it can not attract visitors, so you have to spices up your blog, but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding.If you want to add borders you can also use this code, There are many different type of codes given below.

Before

After

Expand Your Widget

For All Of These Code, You Have To Do Some Thing Like This.
Go To Blogger.
Open Edit HTML
Find ]]></b:skin>
And Paste The Below Code Just Before It.

For Simple Square Color Border:-

.widget {
padding: 5px;
border: 1px solid  #ff0000;
}

For Simple  Square  Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
}

For Simple  Square  Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}

For Simple Rounded Color Border:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
}

For Simple Rounded Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
}

For Simple Rounded Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}

How To Create HTML-CSS-Javascript Website In Blogger?

This is another a great article after the shoot up of How To Use .Blogspot.com As A Domain Name For Your Website?
Here i am not going to bind any preface just coming to the real point i want to mind a thing that you can only creaet a ONE PAGE website in blogspot but don't worry J-Query/JavaScript has solve this problem for you. Now you can create unlimited pages in blogspot.
If you know the basic setting then it's Ok otherwise you have to learn basic first. You can learn it here.

How To Use .Blogspot.com As A Domain Name For Your Website?

Now Follow The Below Step To Create A Website In Blogger.

1.) Go To Your Classic Tmeplate Editor.

2.) Copy The Below Code And Paste It There.

<html>
<head>

<title>***YOUR WEBSITE NAME HERE***</title>
<link rel="shortcut icon" href="***YOUR FAVICON URL HERE***">
<meta name="description" content="***YOUR DESCRIPTION HERE***">
<meta name="keywords" content="***YOUR KEYWORD HERE***">

<meta name="author" content="***YOUR NAME HERE***">

<link href="***YOUR CSS URL HERE***" rel="stylesheet" type="text/css" />
<style type='text/css'>

#navbar-ifisplay:nrame {done;}
***YOUR CSS CODE***
</style>

<script type="text/javascript" src="***YOUR JAVASCRIPT URL HERE***" ></script>
<script type='text/javascript'>
***YOUR JAVASCRITP CODE***
</script>
</head>
<body>
***YOUR BODY CODE***
</body>
</html>

3.) Change The Colored Text With Your Data.

4.) Save Your Template.

5.) Now You Are Done.

If you want to speed up loading time then you should have to embed the CSS, J-Query/JavaScript in the template but if you have a large file you can also linked it here.

If You Have Any Queries, Please Feel Free To Ask.

The Best Way To Say Thanks Is To Share This Article To Your Social Profiles, E-Mail To Friend And Copy This Article To Your Blog With The Given Link.

<a href="http://www.exeideas.com" target="_blank"><img src="http://2.bp.blogspot.com/-cFrcdV2SrrE/T0XVCGTkazI/AAAAAAAABWQ/cIfTljlOwbw/s1600/OriginalArticleAt.png" alt="EXE Ideas"></a>

Don't Forget To Say Thanks

How To Use Blogger As A Domain Name For Your Website?

I was working on this project since one month. After a long search over internet finally on morning i wake up with a light brighten to the way of my target and finally i rushed over her to share it with you.
Now i am going to tell you How To Use Blogger Blogspot.com As A Domain For You Pre-Built Website?
Because Google does not listed up free domain name to its search engine so it is difficult to get swim a free user in the ocean of internet But as a project of Google the Blogger will be automatically listed up in search engine with out any post in few days.

So Finally The Golden Trick Is Given Below In Easy Steps:-

1.) Create A New Blog With yourdesirename.blogspot.com And Enter Any Title.
2.) Then Go To Template Editor And Schroll Down As Shown In Fig.

3.) Here You Will See A Button "Revert To Classic Template".

4.) Click On That Button And Again Click On "Revert To Classic Template" In Blue Color As Shown In Fig.

5.) Now You Will See The Template Code In Template Editor, Highlight That All And Removed Them.

6.) Now Copy The Below Code And Paste It There.

<html>
<head>
<meta charset="UTF-8" />
<title>Your Website Name Here</title>
<link rel="shortcut icon" href="You Favicon URL Here">
<meta name="description" content="Your Description Here">
<meta name="keywords" content="Your Keywords Here">

<meta name="author" content="Your Name Here">
<style type="text/css">
#frame {width:100%; height:100%;}
#navbar-iframe {display:none;}
</style>
</head>
<body>
<div id="frame"><iframe src="Your Website URL Here" name="Your Website Name Here" frameborder="0" height="100%" width="100%"></iframe></div>
</body>
</html>

7.) Change All The Red Text With Your Desire One.

8.)Now Save Your Template.

9.) Now You Are Done.

10.) Here You Got Your Free .blogspot.com Domain Name For Your Website.

If You Have Any Queries, Please Feel Free To Ask.

The Best Way To Say Thanks Is To Share This Article To Your Social Profiles, E-Mail To Friend And Copy This Article To Your Blog With The Given Link.

<a href="http://www.exeideas.com" target="_blank"><img src="http://2.bp.blogspot.com/-cFrcdV2SrrE/T0XVCGTkazI/AAAAAAAABWQ/cIfTljlOwbw/s1600/OriginalArticleAt.png" alt="EXE Ideas"></a>

Don't Forget To Say Thanks

How To Remove “SUBSCRIBE TO: POSTS(ATOM)” Link From Blogger

Hi Friends! Remove “Subscribe to: Posts(Atom)” Link From Blogger. You can locate this links bellow every post or page, near to page navigation.
In every post page there is a link like “Subscribe to: Post Comments(Atom)”
In every page other then post page it may be like “Subscribe to: Post (Atom)”

Here is a Screen-shot for You

HOW TO REMOVE THIS LINKS?
Go to Blogger Dashboard > Design tab > Edit HTML tab
Check Expand Widget Templates checkbox
Then serach for the following line of code and remove it.

<b:include name='feedLinks'/>
Finally Save Your template.

HOW TO HIDE THIS LINKS ?
You just copy the below code and paste it before ]]></b:skin> tag

.blog-feeds{display:none !important;}

Where To Link JavaScript File In Blogger?

First Open Your Account.
Then Go To Edit HTML.
Find The Code.
<head>
<b:include data='blog' name='all-head-content'/>
And Past Your JavaScript Code Just Below It And Example Are Given Below.

<head>
<b:include data='blog' name='all-head-content'/>
<script src='http://www.blogger.com/javascriptfilename .js' type='text/javascript' >

http://www.blogger.com/javascriptfilename .js
Change This With Your URL.

Where To Link CSS File In Blogger?

First Open Your Account.
Then Go To Edit HTML.
Find The Code.
<head>
<b:include data='blog' name='all-head-content'/>
And Past Your JavaScript Code Just Below It And Example Are Given Below.

<head>
<b:include data='blog' name='all-head-content'/>
<link href="http://www.blogger.com/cssfilename .css " rel="stylesheet" type="text/css" media="all">

http://www.blogger.com/cssfilename .css
Change This With Your URL.

How To Make Blogger Navbar Scroll Along With You Page.

This trick is for those who want it to be there even while you scroll down with a transparent effect as you scroll. Cool??

Let's do it now.

This tutorial is very simple and easy to implement. Here are the steps:

1. Go to Dashboard > Select the Blog > Template > Edit HTML

2. Search for ]]></b:skin> in your HTML.
3. Just before the code paste the following:

#navbar-iframe {
position: fixed;
}
4. Save the template and enjoy. You should see the navbar scrolling along with you :-)

How to Bring Blogger Navbar To Bottom.

Have you ever thought of bringing the Blogger navbar to the bottom of the page?

This post is focused on the same fact. We will tweak the Blogger navbar to get down and listen to us so that it comes down to the bottom of the page.

Here is the trick to bring the Blogger Navbar to the bottom of the HTML page/Site.

1. Go to Dashboard > Select the Blog > Template > Edit HTML
2. Search for ]]></b:skin> in your HTML.
3. Just before the code paste the following:

#navbar-iframe {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
}

4. Save the template and enjoy. You can preview the template in advance to look at this beautiful effect to the bottom of the website.

How to Change Home, Newer Post and Older Post Link Into Button In Blogger

Someone had asked me about "How to Change Home, Newer Post and Older Post Link Into Button" and this tutorial is my answer to his question.

The word "Newer Post", "Older Post", and "Home" can be changed into text or button/icon depends on what you want.

For Example, you want to change the "Newer Post" and "Older Post" to "Next Page" and "Previous Page".

It can be. Also, you can change it into button as you can see on this blog.

So Let's Get Started.

Follow this Steps:
1. Go to Blogger > Layout > Edit HTML
2. Check the small box beside Expand Widget Templates
3. Before Editing, Please Backup your Template first (Download Full Template) Important!
4. Find the following code on your template: (Use Ctrl+F)

<data:newerPageTitle/>
Replace it with this code,
<img src="URL-OF-YOUR-PREVIOUS-BUTTON"/>
Or simply YOUR-TEXT
(Ex: Previous Page)

<data:olderPageTitle/>
And replace it with this,
<img src="URL-OF-YOUR-NEXT-BUTTON"/>
Or simply YOUR-TEXT
(Ex: Next Page)

<data:homeMsg/>
Note: Have you seen the above code appeared twice? Replace both with this:
<img src="URL-OF-HOME-BUTTON"/>
Or simply YOUR-TEXT
(Ex: House)

5. Finally click the Save Template button and Enjoy the New Look.

Some Buttons URL Here

Next Page: http://i1190.photobucket.com/albums/z444/imManuelGarcia/SmallNext.png
Previous Page: http://i1190.photobucket.com/albums/z444/imManuelGarcia/Smallprevious.png
Home: http://i1190.photobucket.com/albums/z444/imManuelGarcia/Smallhome1.png

Next Page: http://i1190.photobucket.com/albums/z444/imManuelGarcia/NextBlue.png
Previous Page: http://i1190.photobucket.com/albums/z444/imManuelGarcia/PreviousBlue.png
Home: http://i1190.photobucket.com/albums/z444/imManuelGarcia/HomeBLue.png

How To ReSize All Image On Blogger

Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.

Resize Single Image:

<img src=”http://yourblogname.com/thumbnail.png”style=”height:260px;width:560px;“/>
or
<img src=”http://www.yourblogname.com/thumbnail.png” width=”560″ height=”260″/>

Resize All Images:

But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.

In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.

First go to layout section of your blogger blog. Then navigate to EDIT HTML section. Now search for this tag there.

]]></b:skin>

Now add the following code above that code line.

.post img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;
padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

In that above code , edit the max-height and min-width tags and float to suit your main container width and height and float.

How To Create And Publish Your Blog Feed With FeedBurner

Feedburner is a free service provided by Google that enables a more smart control over our blogs Rss feed. Some of the main options on feedburner are in dept stats, Subscribe By Email option and you can even publish AdSense ads within the feed. In this Tutorial i show you step by step instructions with Screenshots exactly How to Create a Feedburner feed using your Blogs default Feed and then Redirecting your Default feed to Feedburner Feed.

Initially every blogger blog has a feed address like this.

http://way2blogging.blogspot.com/feeds/posts/default?alt=rss

http://www.way2blogging.org/feeds/posts/default?alt=rss

You may have noticed the above feed for Way2Blogging redirects to a Feedburner URL.
my Feed Burner Url is

http://feeds.feedburner.com/Way2blogging

How To Create Your Blog Feed With Feedburner?

Go to Feedburner Site.
Login with your Google account Username and Password.
In Feedburner Dashboard, put your blog default feed address in "Type your Blog or Feed Address here" field

http://yourblogname.blogspot.com/feeds/posts/default?alt=rss

After adding the feed address click Next button like below.

it Grabs the Blog Title and Feedburner Address like below.

Titile will be the same as your Blogs title.
Feedburner Address grabs from the Domain name and adds a random letters at the end.
if you using the Blogspot domain name then it will grabs like this
http://feeds.feedburner.com/blogspot/XTzZp (this is E Style Demo Template blog feed)

For this tutorial i am using the my blog domain name (http://www.way2blogging.org)
so take a look this screen shot, how it grabs the Usernaame!

Change the Title and Feedaddress.com Url What exactly you want.
if you choose an existing username, then you will get the Error!

so Change the similar feed address that you like, and click Next

a message will appear that show's the feed is created. click Next to Set some Options.

Click the Check boxes as below and click Next button.

another message will appear that show's your Feed is Updated.

Redirecting Your Blog Default Feed To Feedburner Feed
Go to Blogger Dashboard -> click Settings.

Click the Site Feed tab -> Post Feed Redirect Url
Enter the Feedburner Feed Url in the Input Box and click Save Button to save the settings

Now your Default Blog feed is Redirected to Feedburner Feed URL.

How To Change Read More Text With Your Image In Blogspot

1.Click 'Design' > 'Edit html' for your blog.
(Tick the 'Expand widget templates' box)

2.Find this Code :
<data:post.jumpText/>

3.Now just choose the image you want to use below and Replace Read More with the code provided for the image.And replace it <data:post.jumpText/> to image code.

Images you can use for your read more:-

Image Preview :

Read Full Post

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9I_vNsGkYpjcwJdVuHHp0ioiUDKOfMhlzercGui69upj76nttpKmFnlrA-7sI0rAOHuLVwyOx83kTY7H8MjPfAwScZwR5Erc0MQ7voCrOuz5CkCB1jn9Pu3R1_emoX2HmwBKK24XyhCP2/s1600/read-more-4.png" border="0" alt="Read Full Post" />

You Can Change Your Picture By Changing Yellow URL.
Some Gif,Png,Animated Button Are Also Available Here
http://exeideas.blogspot.com/2011/07/new-collection-of-read-more-button-with.html

How To Replace Newer, Older & Home Navigation Links With Image Buttons

Important!!! Back Up your Template before Making any changes in Template.

1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
2. Click on Expand Template Widgets checkbox

Replacing The Older Link
Search for <data:olderPageTitle/> and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrE0hpzzdeiuhuXo88DNSykX2I2MJvtbjtysJZkdgBs_jDnibjfPQyLROo886pW-t1k8W7d2avi0n4oY_54b9z0iU-G7fFf4q8FnsYZREH3gnuGDAiCmaM5qVbWuaycV5Md6j0lhPI4dZR/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

Replacing The Newer Link
Search for <data:newerPageTitle/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlNRSiUi397yRKxGn-TOFmaTwTvr3rhoUvPxVsxu6BvjrlWUSX2kTZulaz13UNN4wGGFqEorAghfYxIHJSaiW00mTVGN1AihC2ejtbztSmXzHil5y3u-ZhnZ-qynT3wC0jKZuZDMoFcDq1/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

Replacing The Home Link
Search for <data:homeMsg/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCARSK9Gc5EtqIaUMkwuM2BwtUOlZRVnv9-YPnkGVxvZCFYp2TonIaqeU11xDOCbocsO4AeE2bUYXvxFwWno28GgjEEPX_K2G3mqJeMxshM9PsrZleIkXtHlvshtqJVHKX70IGCd1avxb/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

You can change your own icons by replacing the image Url in the above three codes.

How To Secure Add Automatically Copyright When Someone Copy Your Text In Blogspot

In this post we going to show you, how to show copyright when someone hack your article. This mean by when someone copy paste your blog article, then it will automatically show copyright and link source of that article. So you can prevent those who are copying your article. Some idiots are simply copy paste on their blog even they are not reading article, also hacker will be irritating to copy paste your blog article. This trick work only on blogger.

How To Add This Trick To Your Blog?

1. Log in to your blogger dashboard by clicking here.
2. Go to Design > Edit HTML.
3. Copy the below code and paste before </head>.

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Original from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright EXEIdeas - All Rights Reserved"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>

Change The Words According To You

Original from:

Copyright EXEIdeas - All Rights Reserved

Now When Anybody Copy The Article From Your Site And Past It Where He Want, An Extra Line Will Be Included Like This

Original from: http://exeideas.blogspot.com/#########################.html

© 2010-2011 EXEIdeas - All Rights Reserved

How to Make your Blogger Blog ready for Mobile Phones

making your blogger blog mobile friendly

As you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

This Is An Old Process............

So, here is how to make your Blogger (blogspot) blog mobile internet 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!

In New Process Google Automatically Set Your Blog According To Mobile

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

Subscribe to: Posts (Atom)