Embedding PowerPoint Slides

Have you noticed that the Blogger/Blogspot post editor only offers photo and video upload? The illustration below shows the icons that you should click if you want to upload photos or videos from your hard desk. However, what if you want to upload PowerPoint or PDF files? There are no straightforward options that you can choose. Hence, the best option would be to first convert the files into some sort of codes and copy-paste or embed them onto your blog in similar manner that YouTube videos are embedded on blog posts.



To embed a PowerPoint file onto Blogger, you must first create an account in Slide Share. After creating an account, you can then upload the PowerPoint files that you created. However, the maximum file size that is allowed is 30 Megabytes. Well, this is enough for general purposes. Uploading may take some time, depending on the file size. On the other hand, the process of converting the file into Slide Share format may take longer time. Hence, you should be patient.



After your file has been converted into codes, you can now embed the codes from the corresponding code box as shown in the illustration below. To do this, copy the corresponding codes; then, open the text editor of your blog and choose the "Edit Html" tab. Paste the codes that you copied. Publish your post or save it as draft.



Now you are done. After publishing your post, you can now view your blog. Remember, there are separate codes for Wordpress and Blogger. Simply choose the appropriate codes that you are going to embed. Here is an example of an embedded PowerPoint file. This file was created by my friend, Joseph Benedict:

| View | Upload your own

Please continue reading...

First paragraph only...

Editing Templates

(Related Topic: Template Downloads)
The great thing about Blogger/Blogspot templates is their flexibility. Depending on your skills and creativity, there is virtually limitless range of design variations that you can implement. Unlike other blog hosting services, such as Wordpress, Blogger does not require you to pay fees to modify the templates. However, there is a downside to this. Blogger does not provide readily available professional looking templates, such as three-column layouts or templates with built-in navigation bars. Consequently, if you want to modify the Blogger template and extend its functionality, you either need to download templates from other site or directly edit your own template. The second option is preferable, especially if you want to have a unique blogsite design.

There are web sites and blogsites (such as this one) that offer HTML and CSS tutorials. However, the main problem when it comes to editing Blogger template codes is finding the specific sections that need to be edited. Although the Blogger template codes are arranged in logical manner, they are especially meant to be read by web browsers and not by human eyes. For most people, HTML and CSS codes are confusing if not downright intimidating.

To conveniently edit your Blogger/Blogspot template, here are the steps that you should follow:

Step1: Open the HTML template editor of your blog and backup or download the template.



The XML editor will open as shown below:



Step2: Save this XML file into the hard desk of your computer.

Step3: Open the XML template file using Notepad. It is not advisable to use MS-Word because it may introduce hidden codes that may not be parsed by the template editor.

Step4: Simply use the Ctrl+F command to find the specific sections that you need to edit.

Step5: After editing the template, save it and upload it to Blogger.

NOTE: Another method of editing the template is to directly edit it in the Blogger HTML template editor. To do this, you must first, check the "expand widget" box found at the upper-right corner of the HTML editor frame. You may also copy-paste the whole codes onto Notepad and do the editing there.

Please continue reading...

First paragraph only...

The Importance of RSS Feeds

Have you noticed the orange icon above? You might already have seen this icon in many other sites. This icon is the universally recognized standard symbol of RSS feeds. The acronym, RSS, stands for "really simple syndication." RSS feeds allow the contents of sites or blogs to be automatically published in other sites or feed readers without the need for manually posting the contents.



For instance, if your blog is subscribed to MyBlogLog, the contents of your blog are partially displayed on this site. This is made possible by the RSS feeds of your blog site. The RSS feeds are also responsible for allowing your site to be easily indexed by search engines such as Google.



If you are using Blogger/Blogspot services, the default RSS feed of your blog is called "Atom." Try clicking the "Atom" link found at the bottom-most part of the post body of your blog. Clicking the said link will open a new page that displays the contents of your blog, minus the widgets and layout design. This page is known as the RSS feed page. This page is used by other sites and RSS readers to dispaly the contents of your blog. Feed aggregators such as Technorati will not be able to index and display the contents of your blogsite without the RSS feeds.

One way of increasing the web visibiltiy and web traffic of you site is to register your blogsite to different RSS readers. However, this is very inconvenient and time-consuming. The best option would be to simply redirect your feeds to Feed Burner. This site consolidates all other RSS feeds and readers into one convenient feed. To redirect all the feeds of your blog to Feed Burner, you must first register and follow the instructions therein.

After, registering your site, you will get a new RSS feed URL. You have to paste this URL address onto the "site feed box" of your Blogger/Blogspot template. To do this, go to Settings-Site Feed tab and paste the new RSS feed URL of your site to the corresponding box as shown below.



Now you are done. All your feeds will now be redirected to Feed Burner. Try exploring your Feed Burner account to customize the settings and optimize your blog.

Please continue reading...

First paragraph only...

Collapsible Posts (Dropdown Posts)

If you like your blog posts to be truncated without actually eliminating a single word, then the "collapsible post" option is the best option for you. This option allows your blog post to be partially displayed on the main page of your blogsite. In this manner, only the first paragraph or selected paragraphs will be displayed. Some blog readers do not have the patience to scroll down on your blog posts to find the articles that are interesting to them. The collapsible option allows your readers to conveniently scan your main blog posts. Your readers will be able to read the rest of the post by simply clicking the "Read More..." link at the bottom of each article post. In my Much Ado About Nothing blogsite, I have used the "More Blasphemy..." link. You can actually customize this link by editing the corresponding texts in the HTML codes.

However, the collapsible option is not readily available in Blogger/Blogspot. You first need to implement some CSS and HTML codes in the template of your blogsite. Here are the steps that you should follow to include the collapsible option in your Blogger/Blogspot template:

Step1: Backup your template. Just in case something goes wrong, you can always go back to your original template.

Step2: Open the HTML editor of your template and locate the closing </head> tag. Just before this tag, add these codes:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

If the codes above do not work, go to this link and copy all the codes: Codes.

Step3: Save your template and locate this section in the HTML document:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

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

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Add the red-highlighted codes as shown above. If the codes above do not work properly, visit this link: Codes2.


Step4: Save your template and go to the Settings-Formatting tab.



Step5: Locate the Post Template box and paste these codes as shown in the illustration:

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>



Now you are done. Save your template and view your blog. You will notice that there are actually no changes in your blog posts. You must first edit the old blog posts and include the post template codes to implement the "collapsible post" option. However, every time you make a new post, the template codes that you have added will appear in the "Edit HTML" tab of the post editor. Hence, it is better to first type your blog post using the Edit HTML tab of the post editor to assure that the texts are properly coded. Simply inlcude the texts or portion of your post that you want to be hidden within the <span> codes.

NOTE: If you find it difficult to directly edit your HTML template, refer to this post: Editing Templates.

Please continue reading...

First paragraph only...