"How to Upload Video to Blogger Blog" video tutorial.
Some times you want or need to put a video in to your blog post, it's not a hard task, just follow this video instruction.
How to Upload Video to Blogger Blog part 1
How to Upload Video to Blogger Blog part 2
There is another way to upload video to your blog, and I think that it is a better way: simply go to www.youtube.com , register and upload your video. After you are done, just copy the "Embed" code and past it in to your post (in "Edit html" mode)
Showing posts with label Blog Design Tips. Show all posts
Showing posts with label Blog Design Tips. Show all posts
Thursday, 20 November 2008
How to Upload Video to Blogger Blog
Friday, 2 May 2008
How to Backup your Blogger blog
How to Backup your Blogger blog:
That's a simple question, but people often ask about: "how to backup my Blogger blog?"
Answer:
1. Go to your Blogger account.
2. Choose your blog and click "Layout" and "Edit HTML".
3. Now you see the "Backup/Restore Template", click on "Download Full Template".
Your blog is saved on your computer. To restore it, just click on "Browse", choose your saved template and click "Upload"
Wednesday, 30 April 2008
How to add multiple administrators to Blogger blog
Some times you need to add multiple administrators for your blog (if you and your friends want to make posts on the same blog or if you want to move your blog to another account or if you want to change the owner of blog).
Adding multiple administrators to your blog is not hard but lot of people don't know how to do this.
Adding multiple administrators to your blog:
1. Go to your blog Dashboard --> Settings --> Permissions.
2. Click "Add Authors".
3. Enter the email address (-es) of your new administrator(-s).
4. They need to check their e-mails and click on the link to join the blog.
5. Go to Dashboard --> Settings --> Permissions and promote newcomers to administrators.
All done, Cheers
Monday, 10 March 2008
Swap Blog Title and Post Title on Blogger
Your template is invalid because the tag 'b:section' appears inside of the tag 'head'. This error appears because of Swap of your blog title and post title on Blogger hack. I think there was some changes on Blogger. To fix that error, you need to do the same hack: Swap of your blog title and post title, but with some changes.
Just follow the steps:
1. Go to dashboard ==> 'Layout'==> 'Edit HTML' and backup your template.
2. Find this line: <title><data:blog.pageTitle/><title> and delete it.
3. Find <head> code and put this code BEFORE <head> :
<!-- newtitle -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> | <data:blog.title/></title></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- end newtitle -->
4. Save your changes.
PS:
I'm not recommending you to do this hack, because, usually, Title code must be after <head>. So I don't know what kind of effect it will give to you. I think it is better do use simple basic <title><data:blog.pageTitle/><title> code.
Tuesday, 4 March 2008
How to Change Header Width in Blogger
Want to change header width in Blogger? Changing header width looks like changing blog width in blogger. Remember! Your Header Width must be the same or less width when the blog width. To change your blog header width you need to follow this steps:
1. Go to your Blogger Dashboard and click 'Layouts'.
2. After that click 'Edit HTML' and first of all - backup your template by clicking 'Download Full Template'.
3. Now you need to find CSS Style of your header, just find this line :
#header-wrapper {
(if you are using not default template, this parameter can have different name, for example : #header)
4. Now you must find or add width parameter under #header-wrapper line. For example it can look like this :
#header-wrapper {
width:660px; /* This parameter you must to change. */
margin:0 auto 10px;
border:1px solid $bordercolor;
}
5. After the changes, just save your template.
Also you can read:
How to Change Blog Width in Blogger
How to change sidebar width in blogger
Cheers.
How to Change Blog Width in Blogger
Change width of blog in Blogger, one of the question what my readers often ask me. Well, changing blog width is not so hard. Width is one of the main part of your blog design. You must to choose correct width for your blog first. Standard width of your blog in Blogger is - 660 px.
If you want to change it, just follow my small tutorial:
1. Go to your Blogger Dashboard and click 'Layout'.
2. Click 'Edit HTML'.
3. Now Backup your template by clicking 'Download full Template'.
4. Now you need to find CSS Style for your blog body. Just find this line :
#outer-wrapper {
5. There mast be Width: 660px parameter under that line. Just change it to your width. (#outer-wrapper is default CSS name of blog body parameters, but if you are using template what was designed by someone, this parameter can have different name. Usually its situated after #body parameter, the name can be: #page, #blog, #blogbody or something like that).
6. After changing , preview your blog by clicking 'Preview' button. If everything is OK - click 'Save Template'.
That's all! Is it so hard? I think - no. You can also read :
Thursday, 28 February 2008
Blogger Posts title Optimization for Search Engines
Blogger blogs not well optimized for search engines and you need to fix that. One of the things that is not optimized are Titles of your all posts in Blogger blogs.
Usually title looks like this : Title of your blog : Title of post
It is wrong! For better SEO you need to have: Title of post : Title of your blog
Lets fix that:
1. Go to blogger dashboard, click 'Layout' and 'Edit HTML'
2. Find this line: <title><data:blog.pageTitle/><title>
3. Replace that line to this one :
<!-- newtitle -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> | <data:blog.title/></title></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- end newtitle -->
4. Save your changes.
Done, now you have better optimized title of your blog posts. Cheers
PS:
This method is not workind anymore, read how to fix that: Swap blog title and post title on blogger
Monday, 25 February 2008
How to install xml Blogger Template
After you have found xml Blogger Template, you need to install it to your blog. Follow this steps to do it:
1. Go to your blog account
2. Click 'Layout' and 'Edit HTML'
3. Backup your Template !
4. Now you need to download the Template you like to your hard drive (the template must be in xml format)
5. Click 'Browse' , chouse your template and upload it .
Done, Cheers
Thursday, 21 February 2008
How to add bookmarks to Blogger
You know How to Integrate 'Digg this' button to blogger blog, but what to do with other bookmarks, Reddit, Del.icio.us, StumbleUpon, Propeller ...?
I will show you how to add them all by adding one button. This button calls AddThis.
1. Firs of all you need to register on AddThis
2. After registration you need to log in to AddThis and click 'GET THE ADDTHIS BUTTON'
3. To create your button, simply select the options that best fit your needs below.
All buttons are free for everyone (individuals, businesses, and organizations).
As we are talking about Blogger blogs, I will show you how to do it for Blogger:
Which kind of button? - Sharing and Bookmarking
Which look? - chouse your button look, I like this one:
Where? Where do you want to put the button? - on a Blog
Blogging Platform: - Blogger
It mast look like this:
4. Click: 'Get Your Free Button'
5. You will get a code. I like drop-down menu, so I chouse that one.
Integrating Button to Blogger post
1. Go to your Blogger account.
2. Click 'Layout' --> Edit 'HTML'
3. Backup your template!
4. Check Expand Widget Templates
5. Copy-and-paste the code of your AddThis Button into the contents of your template, right after the <div class='post-footer'> tag.
6. Save your template.
Cheers
How to Change favicon in blogger blog
Favicon is one small part of your blog design, usually blogger blogs have Blogger logotype as favicon, but you can easily change it to your favicon.
It can be your blog logotype or some funny small picture, for example 'smileicon'.
Ok, take your logotype (if you have it) or some picture or draw your own logo in Photoshop (or other graphic editing software).
Creating Favicon
After creating you logo you need to change size of it to 16x16 pixel. After that, save your logo in '.ico' format ( for example: my_favicon.ico ).
Installing Favicon
Now you need to install your favicon to Internet. You can use one of the free image hosting provider or Google Page Creator. Just upload your .ico file to your Google pages directory, like on the picture.
Installing Favicon to Blogger
Now you need to go to your Blogger account.
1. Click on 'Layout'.
2. Click on 'Edit HTML', Backup your template!.
3. Now, if you using google pages, you need to add the following codes right after the <head> code:
<link href='http://myname.googlepages.com/my_favicon.ico' rel='shortcut icon'/>
<link href='http://myname.googlepages.com/my_favicon.ico' rel='icon'/>
*Change 'myname.googlepages.com' to your account address, change 'my_favicon.ico' to your favicon name.
4. Save your changes.
* This changes will not appear immediately, just refresh it once and it should appear.
Cheers
Friday, 15 February 2008
How to Integrate "Digg this" button to blogger blog
In this tutorial I will show you "how to integrate "digg this" button to your blogger blog and how to wrap "digg this" button around and inline beside Blogger post content. This will be good part of your blog design.
I think you know Digg, Why you need to install Digg button to your blog? This is the quote from the Digg:
The Digg This button is for website and blog publishers that want to encourage their audience to submit or digg their content on Digg. Join thousands of sites that have already added Digg This and seen their content exposed to the Digg community.
We've given our latest Digg This button a brain - it's smart enough to:
- Encourage users to submit new content from your site to Digg. We'll detect if the content exists already and provide either a Submit or Digging interface
- Display the real-time Digg count for content already on Digg
- Support News, Video, or Podcast content.
- Be backward compatible with the last version of our Digg This button
So, you can get some (or , maybe, big) traffic from Digg.
This is how it will look like:
It is hard to install this button to your blog and make it wrap around and inline beside post content, so, I will tell you how to do it:
1. Go to Blogger Dashboard.
2. Go to Layouts and click on Edit Html subtab of Template tab.
3. Backup your template to PC.
4. Then put a check in Expand Widgets Template box at top of Edit Template text box and scroll down to the blog posts widget body to this line :
<p><data:post.body/></p> or <data:post.body/>
5. Append the following lines of code into the template BEFORE the line of <data:post.body/> located above:
<div id='digg'><script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title = '<data:post.title/>';
digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
6. Now you need to create CSS style for Digg this button. Find this line:
]]></b:skin>
7. If you want to have digg button on the left side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:
#digg {
float: left;
margin-right: 5px;
}
If you want to have digg button on the right side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:
#digg {
float: right;
margin-left: 5px;
}
8. Save your template.
That's all =) Cheers
Wednesday, 13 February 2008
How to change sidebar width in blogger
Your want to make your Sidebar bigger? Next tip is for you. This method looks like 'Changing color of sidebar' , it's not so hard.
It's really easy, follow this steps:
1. Go to Blogger Dashboard and choose your blog.
2. Go to 'Templates' (or 'Layouts') and click on 'Edit HTML'
Also save your template on your computer.
3. Next find sidebar CSS style, its look like this (if you are using standard templates) #sidebar-wrapper, but if you are using your own or one of the free templates from internet, CSS style can look different, but ( I think) it must contain word #sidebar.
4. Now you see that it have some parameters (width, float and bla bla bla), you need to change one parameter - width - it is easy, just change the number, for example: width: 300px;
5. Now you can save your changes.
You can also read:
How to Change Blog width in Blogger
How to Change Header Width in Blogger
Cheers
How to change sidebar color in blogger
Changing color of sidebar is one of the easiest thing in redesign of standard blogger template.
But if you don't know HTML it can be hard for you, so this is another web design tip for you.
It's really easy, follow this steps:
1. Go to Blogger Dashboard and choose your blog.
2. Go to 'Templates' (or 'Layouts') and click on 'Edit HTML'
Also save your template on your computer.
3. Next find sidebar CSS style, its look like this (if you are using standard templates) #sidebar-wrapper, but if you are using your own or one of the free templates from internet, CSS style can look different, but ( I think) it must contain word #sidebar.
4. Now you see that it have some parameters (width, float and bla bla bla), you need to add new parameter - background-color - it is easy, just add background-color: #CCCCCC; in new line, but before } . (#cccccc - it is the color number, you can change it to your own color)
5. Now you can save your changes.
Also read about 'How to change Sidebar width in blogger'
Cheers
Tuesday, 12 February 2008
How to Hide Navbar in Blogger
I think, when you are starting your blog, first thing you need to to is hide your Navbar. Why? Because I don't like it =).
It is possible just to hide Navbar, you can't delete it =(.
Follow this steps:
1. Go to Blogger dashboard.
2. Find your blog and click 'Layout' .
3. Go to 'Edit HTML'.
4. Find #header-wrapper line (you can click Ctrl+F on your keyboard and enter #header-wrapper, this is easy way to find this line=))
5. Now simply copy and paste the following piece of code directly above the #header-wrapper line:
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
height: 0px;
visibility: hidden;
display: none;
}
6. Click 'Save Template'.
Now you don't have this annoying Navbar in your blog =)
Cheers
Subscribe to:
Posts (Atom)
