You can now put the latest Digg news in your blog. Digg has launched a widget which you can add in your blog. You can customize it to fit the look of your blog and configure it to display whatever you want to show from Digg............
So what are widgets you ask? Widgets are portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. In Blogger they are called Page Elements when they make up parts of the web page and the code executing these is the widget. You can move these to rearrange the appearance of your web page or blog through the Page Elements subtab of the Template tab. To access them directly click on Layout of your blog after logging in to the Blogger Dashboard.
Blogger has it's own stable of widgets. You can also add third party widgets from other sites. Widgets like the Poll widget add interactivity to your blog. You can add pictures and other multimedia elements through the Picture and Video bar widgets. You can display the contents of another site in your blog by converting the site feed into Javascript code. The widget is published on your blog and pulls content from other sites to display on your blog.
To display the Digg Widget in your blog go to http://digg.com/add-digg. Here you can choose the styling of the widget and what content it will display. There is no need to register or even login. Just choose from the choices : See picture below :
After selecting your choices copy the entire code at the bottom. Login to your Blogger Dashboard and click on Layout. Then click Add Page Element link in sidebar and choose Html/Javascript option. Paste the code from the Digg site in the content window and save. See the Digg Widget at the bottom of the right hand column in this blog. This is a Javascript widget so the only disadvantage is that it will not work if Javascript is disabled in viewer's browser.
Put a Digg Widget in your Blog. |
Blog Redirection. |
Lots of blogs are being redirected to other sites to attract traffic. These blogs usually have a title designed to attract attention and when viewers click on the blog link they are redirected to other sites..... Technorati Tags:blog redirection, html, javascript, seo,
For example one blog was named "A Hot Girl's Page..." and was redirected to "Nancy Live on Cam". I was interested in this phenomenon and decided to investigate how it was done. I pasted the url for "A Hot Girl's Page..." in my browser and stopped the browser just before it redirected. I then looked at the page source for this blog by going to View----->Page Source in Firefox. This blog only had one post in it. I scrolled down the page source and came upon this code in the posts section :
<div class='post-body'>
<p><META HTTP-EQUIV="REFRESH" CONTENT="0; URL=LINK OF DESTINATION SITE"></p>
The single post in the blog had no content and this code was pasted within that post. Nothing showed up in the blog page because there was no other content. This code caused the browser to be redirected to the DESTINATION SITE without any delay.
Do not try to search for this blog since it has been deleted by Blogger.
The importance of redirection lies in the fact that your own blog may be hacked and all traffic redirected to other sites. To avoid this it is important to see the methods used for redirection.HTML REDIRECTION
This is the method used in the above example. The following code is used :
<meta http-equiv="Refresh" content="0; url=http://site.com/page.html">
This code is pasted in the blog post or in the <head> section of the template. This causes the blog to redirect to http://site.com/page.html even when the browser has Javascript disabled. To delay the redirection a number is put after the "content=" like this :
<meta http-equiv="Refresh" content="5; url=http://www.mysite.com/mypage.html">
The delayed redirect has the advantage that you can place an extra message, such as “The page you are looking for changed location… You will be redirected automatically to the new location”JAVASCRIPT REDIRECTION
This is the other method used. It does not work if Javascript is disabled in viewer's browser. The following code is pasted in the <head> section of the template.
<script>
window.location="http://www.mysite.com/mypage.html";
</script>
EXTERNAL JAVASCRIPT can also be used to redirect your blog. The way this works is that you may wish to incorporate a hack in your blog. You are then asked to paste this line above the </head> tag in your template :
<SCRIPT language="JavaScript" SRC="http://URL OF HACK SITE/jshack.js"></SCRIPT>
The jshack.js file is located at http://URL OF HACK SITE/ and contains the redirect code. You can see the full code when you type the whole address for the file in the address bar and press Enter.
To prevent this type of redirection do not add such codes in your template unless they come from a trusted site. You can also download the JS file and add the whole code instead of a link to the file.JAVASCRIPT ALERT REDIRECTION
You can alert your viewers that they are being redirected using this Javascript code :
<script>
alert("This page has been moved to a new location... click OK to be redirected?");
location = "http://www.mysite.com/mypage.html";
</script>
To use a confirm dialog use this code :
<script>
if(confirm("This page has been moved to a new location... would you like to be redirected?"))
{
location = "http://www.mysite.com/mypage.html";
}
else
{
history.back();
}
</script>FLASH REDIRECTION
Scripts embedded in Flash are also responsible for redirecting sites. Hence be careful when adding flash content to your sites. MySpace sites were redirected using Flash. Click here for more details.PHP REDIRECTS
Though PHP is not used in Blogger for the sake of completion PHP redirects are done using this code :
<?php
header( 'Location: URL OF DESTINATION' ) ;
?>SEARCH ENGINE OPTIMIZATION
All the above methods are used by hackers to redirect traffic from a blog with a high Page Rank to their site. These methods are recognized by search engines and can result in getting your site banned. Hence make sure to protect your blog by having strong passwords so that no one can hack into it and place these codes in your template. In case you do get complaints fro viewers that your blog is being redirected look for these codes and delete them from your template and change your passwords.301 REDIRECT
This is the best method to prevent you from being penalized by the search engines. Unfortunately it cannot be used on Blogger. However, you can use it to redirect on ftp blogs. To do this locate your .htaccess file in the root directory of where all your web pages are stored. If there is no .htaccess file there, you can create one with Notepad or a similar application. Add the following lines after leaving a space after all the code :
redirect 301 /folder/page1.htm http://www.newsite.com/folder/newpage.htm
where /folder/page1.htm represents the original page and http://www.newsite.com/folder/newpage.htm represents the destination page. Leave the spaces as they are after 301 and before destination site URL. The 301 redirect is the safest way to preserve your rankings. On the next indexing, the search engine robot will obey the rule indicated in your .htaccess file and index the new page name every time a link or its internal database tries to access the old page. If your site is hosted on a Microsoft IIS server then do this: In internet services manager, right click on the file or folder you wish to redirect. Select the radio titled “a redirection to a URL”. Enter the redirection page, check “The exact url entered above” and the “A permanent redirection for this resource”. Click “Apply”.
Add a Table of Contents to Main Blog Posts Column. |
A Table of Contents can be added to your main Blog Posts column. This Table of Contents will list all your posts titles as links. You can arrange this Table to appear before your Blog Posts or after.............. Technorati Tags:feed, javascript, page element, rss, table of contents
To do this you will first have to add extra Page Elements to your Blog Posts column. Login to Dashboard and click on Layouts of the blog you want to modify. Then click on Edit Html subtab. First Download your template by using Download Full Template link.
Then scroll down in Edit Template text box till you come to :
<div id='main-wrapper'>
<b:section class='main' id='main'>
Modify the second line in above code to :
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>
This will add a Add Page Element (showaddelement='yes') link to your Blog Posts section on the Page Elements tab and allow you to add a maximum of five widgets/Page Elements (maxwidgets='5') to your Blog Posts column. Save Template.
Go to Page Elements tab where you will see a Add Page Element link on top of your Blog posts column as in below picture.
Click on Image to see bigger view.
Now we will convert your blog RSS feed to javascript. For this go to http://www.rss-to-javascript.com/p/138.html. In the URL box at the top enter your blog feed which in case of the new blogger is :
http://yourblogname.blogspot.com/feeds/posts/default?alt=rss
Substitute actual blog name in place of yourblogname. Since we want to display only the title of our posts choose No to most of the options like : Show Channel, Show "Simplified" Channel, Show Item Descriptions and Show Item Posting Date. Enter zero for Number of items to show all available items and Yes to Use List Elements. Hit the Preview button to check that your titles are shown. If the Preview does not tally go to Settings------>Site Feed in your blog and turn on the site feed.
Click on Generate Javascript button to generate the code. Copy that Javascript code by selecting all.
Login to your Dashboard and click on Layouts beside your blog name. On the Page Elements tab click on add Page Element link in the Blog Posts section. In the new window which opens choose the Html/Javascript option and paste the Javascript code in the contents window. In the Titles window type Table of Contents. Save the Page Element. This is saved on top of your blog posts. If you want it to appear below click and drag that page element from the top to the bottom of your blog posts. Click on Save.
Add a Recent Posts List after Every Post. |
Add a Recent Posts List after every post in your blog so that any reader reading a single post can see at the end of the post this list and then if interested may go there.......... Technorati Tags:feed, javascript, recent posts, rssTo put a Recent Posts List in the sidebar see List Previous Posts.
To do this we will use your blog's feed to put a list of recent posts at the bottom of every post. First we will have to turn on the blog feed. For this go to Settings----->Site Feed---->Blog Posts Feed----->Set this to Short by clicking on the drop-down arrow then----->Save Settings. By setting this to short only a short section of your posts will be delivered to the reader who then hopefully will be intrigued enough to visit your blog to read the rest of the post. For our purpose we need only the titles of the posts so this also serves our interests. Then we need the URL of the feed. For beta blogs the RSS feed URL is :
http://yourblogname.blogspot.com/feeds/posts/default?alt=rss
Substitute actual name of your blog instead of 'yourblogname' above.
Now head over to an online RSS-to-Javascript converter. There is one located at :
http://itde.vccs.edu/rss2js/build.php
Type or paste your RSS blog feed url in the text box provided. See picture below. Click on image to enlarge it.
Fill in the other options. We do not want a title so set Show Channel as No. Enter the number of items to display. Set Show Item descriptions to 0 as we want only the titles to be displayed. Set Show item posting date to No. and Set Open links in a new window to Yes as we do not want the original post page to be closed or covered by new content. Click on Preview to check that the feed is being generated properly and then click Generate Javascript. Javascript code is generated along with code for browsers not supporting Javascript. Copy the whole code. This is Step 2.
Login to your dashboard of Beta Blogger and click on Layouts of the blog whose feed you had taken in the first step. The Page Elements window opens. Click on Edit Html tab and first backup your template as described in How to change Template.
Then scroll down in Edit Template text box till you come to :
<div class='column' id='main-wrapper'>
<b:section class='main' id='main'>
In the second line add : maxwidgets='4' showaddelement='yes' so that it reads like this :
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
Then Save Template. This change will enable you to add extra Page Elements/Widgets to the main column.
Now click on Page Elements tab and then click on the new Add Page Element link in the Blog Posts column. Choose Html/Javascript option in the new window which opens and paste the Javascript code from Step 2 here. Type 'RECENT POSTS' in the title field. Save changes. Back in Page Elements view you will see a new element added on top of your Blog Posts. Click and drag it to below your Blog Posts in the same column. This will place it below your Blog Posts and it will appear below each post in individual post view. See how I have added it below.
Where to Add Code in Beta Template. |
You can add code to the template in beta at these places.......... ADD Metatags here ADD FEEDBURNER METATAGS HERE ADD CODE FROM GOOGLE SITEMAP HERE ADD GOOGLE MAP/SEARCH AJAX API KEY CODE HERE JAVASCRIPT CODE ALSO GOES HERE <head> <META content='GOOGLE ADD SITEMAP CODEg=' name='verify-v1'/> <SCRIPT src='http://maps.google.com/maps?file=api&v=2&key=API KEY' type='text/javascript'/> CREDITS FOR THE TEMPLATE /* Starts with /* Add CSS code here including code for navbar Add variables to properties of css elements Add image urls to add pictures to background etc Starts with <b:skin><![CDATA[/* CSS PART OF TEMPLATE Ends with ]]></b:skin> Javascript Code Add a Javascript with a function here <SCRIPT type='text/javascript'> } If there is vacant space here you can add a table or divs here If you want to start a Javascript onloading the body add this code <body onload='load()' onunload='GUnload()'> here <body> BODY </body> <DIV Outer Wrapper </div></div> <DIV id='header-wrapper'> Header Wrapper </div> Change number of maximum widgets in the section here Add a Add Page Element link to this section in Page Elements tab under Template tab here <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> Header Section </b:section> To add to widget go to Page Elements tab under Template tab Change whether widget can be deleted or not by changing false to true There are at present twelve different types of widget data <b:widget id='Header1' locked='false' title='NAME OF WIDGET' type='Header'> Header1 Widget </b:widget> <DIV id='content-wrapper'> Content Wrapper </div> <DIV id='sidebar-wrapper'> Sidebar wrapper </div> <b:section class='sidebar' id='leftsidebar' preferred='yes' showaddelement='yes'> Sidebar Section </b:section> To add to widget go to Page Elements tab under Template tab Change whether widget can be deleted or not by changing false to true There are at present twelve different types of widget data <b:widget id='Label1' locked='false' title='Labels' type='Label'> Widget/s </b:widget> <DIV class='widget-content'> </div> <H1 class='title'> </H1> Starts with <b:includable id='main' var='thiswidget'> Main Includable Ends with </b:includable> <b:if cond='condition'> <b:loop var='identifier' values='set-of-data'> The include tag <b:include name='post' data='i'/> <DIV id='main-wrapper'> Main wrapper </DIV> <b:section class='main' id='main' showaddelement='no'> MainSection </b:section> To add to widget go to Page Elements tab under Template tab There are at present twelve different types of widget data <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'> Blog1 Widget Posts </b:widget> <DIV id='footer-wrapper'> Footer Wrapper </div> <b:section class='footer' maxwidgets="1" showaddelement="no" id='footer'/> Footer Section </b:section> To add to widget go to Page Elements tab under Template tab There are at present twelve different types of widget data <b:section class='footer' id='footer' maxwidgets='4' showaddelement='yes'/> Widget/s </b:section> Technorati Tags:code, javascript, template
If you cannot see the full table below please go here.CODE TO BE ADDED PARTS OF TEMPLATE LANGUAGE DECLARATIONS <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='DESCRIPTION HERE' name='Description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='index,follow' name='robots'/>
------------------------------------------------------
Blogger Template Style Sheet
Name: Name of Template
Designer: Name of Designer
URL: Home page of Designer
Date: Date designed
Updated by: Blogger Team
Name of Modifier with his homepage
------------------------------------------------------- */Add the Variable Definition here so it shows up in Fonts and Colors Tab under Template tab
Variable definitions
function load() {
</SCRIPT>Between CSS above and BODY below
id='outer-wrapper'><DIV id='wrap2'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>
[repeated content goes here]
</b:loop>If /Else conditional and Loop clauses AddGoogle Analytics /statcounter code here IMMEDIATELY BEFORE </body> You can add Javascript code after </HTML> </BODY>
</HTML>
WHERE TO ADD SOME COMMON CODES :
Technorati Code - in a Html/Javascript page element in the sidebar.
Sitemeters - in a Html/Javascript page element in the sidebar.
Google Analytics - Just before </body> tag in Template.
Metatags - Just after <head> tags in Template.
CSS codes - see table above.
Javascript code - in a Html/Javascript page element in the sidebar.
Links Code - in a Link List Page Element in the sidebar.
Feeds/Feedburner Code - in a Html/Javascript Page Element in the sidebar.
Feedburner autodiscovery code - in the Metatags section
Social Tags - At end of Blog Post code in Template.
Javascript loaded by a body load() - Just above </body> in Template.
Other Javascripts - Just above </head> in Template.
External CSS stylesheet URLs - Just after <b:skin>
Change Mouse Cursor to a PIC. - Add code in CSS eg. BODY {cursor:url(URL OF PIC);}
How To List Previous Posts by Title. |
To list All Previous Posts by Title............... Technorati Tags:feed, javascript, previous posts, rss
you will use your blog's RSS feed to put content into your sidebar. How to do this has already been described in the post : Add Content with RSS Feeds in a general way. This is a special case in which you can use this method to display the title of all your previous posts in the sidebar.
STEP 1. The feed for your beta blog is of the format :
http://yourblogname.blogspot.com/feeds/posts/full
where instead of 'yourblogname' type in the name of your blog. The feed for your old Blogger blog is :
http://yourblogname.blogspot.com/rss.xml or
http://yourblogname.blogspot.com/atom.xml
Step 2. You will have to convert this feed into Javascript code which you can then insert into your webpage so that it displays on your site. There are many RSS-to-Javascript convertors online which you can search out usinf Google. One of these convertors is located at :
http://itde.vccs.edu/rss2js/build.php
Copy and Paste the above link into your browser and press Enter. Copy and paste the link for your blog feed obtained in Step 1 into the "Enter the web address of the RSS Feed" under 'Build your feed'. In Select the options set 'Number of Items to display' as 0 - This will display all posts. In 'Show item descriptions? How much?' set it as 0 to show no descriptions. Set 'Show item posting date?' as No and click Preview to see whether your titles are coming through. If it displays correctly then click 'Generate Javascript'. The program generates Javascript code along with a noscript code for those browsers without Javascript. Copy the entire code.
Step 3. Go to Layout in your blog after logging in to Dashboard. The Page Elements page opens. Click on 'Add Page Element' in the sidebar section. A new popup window opens where choose HTML/Javascript option and paste the code obtained in Step 2 above in the Content box. Click Save Changes.
Refresh cache. View Blog.
You can see an example of this in my right sidebar at the top.
To do this in Classic Blogger just paste the Javascript code in your template in the sidebar section.
Add Content with RSS Feeds. |
To Add Content to your blog with RSS feeds......... Technorati Tags:adsense, content, javascript, rss
First find the RSS Feed Icon. On many sites it is shown as "RSS" or "About Feeds". The icons are shown alongside. ![]()
Right click any one of these and select 'Copy Link Location'. Now you have to convert the feed into Javascript code. There are many such convertors online which you can find simply by searching Google. One such convertor is located at : http://itde.vccs.edu/rss2js/build.php. Go there and paste your feed url into the text box under 'Enter the web address of the RSS Feed'. Choose among the various options for the feed. Whether you want the title to be displayed etc... Then click 'Preview' to see if the feed is being generated. If the feed url is correct it will show items and content from the web page where you took the feed url from. If you are satisfied click 'Generate Javascript'. Javascript code is generated along with non javascript code which displays the feed on browsers without Javascript. Go back to your beta blog. Login to the Dashboard and click on Layouts under the name of your blog you want to add the feed to. The Page Elements page opens. Click on Add Page Element in the sidebar and choose HTML/Javascript in the popup window which opens. Paste the Javascript code in the content box and Save Changes. You can also add this to a Page Element in the Main Column of postings but then your feed will appear on all your posts. If you add it in the sidebar it will only appear once on the page.
WARNING :
1) Before taking content from other websites be sure to resd their Terms of Use for feeds. 2)You can fill your webpage with feeds but the Adsense bots are not able to read the content generated by them, so it is ineffective with Adsense. 3) You can use the Feed widget already present in the choices in the popup window which opens when you click on 'Add Page Element' in Page Elements page. However it will deliver only a maximum of five posts and titles whereas you can configure the feed in the above process to deliver all the posts.
You can also add a feed of your blog to your sidebar so that it shows all the posts titles. The URL of your beta blog's feed is :
http://yourblogname.blogspot.com/feeds/posts/full
Instead of 'yourblogname' type the name of your blog.You can also add RECENT COMMENTS to the sidebar by using comment feeds URL which are
http://yourblogname.blogspot.com/feeds/comments/TYPE
Instead of 'yourblogname' type the name of your blog. Instead of TYPE use summary or full.












