ikmalSays | Technical News and Tips

Showing posts with label widget. Show all posts

ikmalThink : is Entrecard no longer useful?

Filed under : ikmalThink, my experience, widget

I heard numerous amounts of ramblings saying that Entrecard is giving empty traffic. People are arguing whether traffic for Entrecard really bring along a reader or merely a dropper. But then, there are still few advantages of collecting this so called 'EC point'.

For most of you don't know, Entrecard is a widget that let you drop business card to other site in exchange for a point. Visitors may also do the same to your site. Read my post on optimizing Entrecard banner.

Entrecard gets a big thumbs up for its ability to place banner on quality sites or you get to use the point to buy banner placement on other sites via EC Shop (currently under maintenance). Also:

sell it to other - earn extra bucks
create a competiting using EC point as the prize - attracts visitors

But now, they have changed the rule. Send credits to others are limited by 14 transfers a week up to maximum of 1,000EC. Whichever comes first. This is really devastating. For me at least. Because you are not able to sell it either. Then this will lower my spirit of actively dropping everyday. What else do you need that point for.

My real goals were to provide huge amount of credit for competition. But now.. *sad faces.
My site is really new and I really need extra boost as such to gain more traffic.

Should I remove my Entrecard widget? But then again..

► read more

ikmalTips : summarize blog post on blogspot ( III )

Filed under : blogger, ikmalTips, widget

Quite recently, I post guide for summarizing blog post on main page. The purpose of using this hack is you can display more post at your front page without clogging the layout with too many posts and texts. Thus, you will maintain a clean and easy to read page content.

There are actually two types of summarizing your post. The first hack, will provide you link at the bottom of summarize post and once clicked you will directed to the post page of the topic desired.
While, the second on will expand/collapse your post on the page itself. You can check out both hacks here :

In this post, I will write about the third option. I read about it at BloggerBuster by Amanda. Check out her blog for lots of easy to follow tutorial. These hack utilize the jQuery Expander Plugin by Karl Swedberg.

The advantage of using this hack is

You no longer need to edit your post with span command to divide between full and summarized
Expanding post are equipped with smooth transition (i recommend older hack if you are planning for this, they have fade effect too and proper alignment on collapse mode)
You can manually select the length of your post by characters.

Let's get on with it.

jQuery Expander Plugin

Step 1 - Back up your original template

Whenever your tries to customize your blog template ALWAYS save the original template into your computer. In case of anything goes wrong either with the code or the after-effect are worse, you can always revert back to the original template before you applied the editing.
To back-up your Blogger template, go to Layout > Edit HTML and click on the "Download Full Template" link near the top of the page. You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.
To restore to the original setting (before editing), simply upload the template using the upload form located on the same page.
Or, a quick method I always use. Check Expand Widget Template option and copy all the text (Ctrl + A) in the scroll bar box and save it onto any simple text application (Notepad, Wordpad, etc). In case of mishap, simply reverse the process. - useful when you are going to restore in between editing time.

Step 2 - Start adding the codes
- This are for the expand/collapse hack | i want post page method

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

});
</script>

Next, find the following codes (or similar) ;

And replace all with these following codes :

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

Preview your template and save upon success
Skip to Step 3

- This is for the post page hack | show me expand/collapse hack again

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

});
</script>

Next, find the following codes (or similar) ;

And replace all with the following codes :

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<a expr:href="data:post.url">Continue Reading</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

You can change this to desired text
Preview your template and save upon success

Step 3 - Settings available for hack

Take note on code your applied on </head> mentioned on Step 2. You will notice these codes :

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

This can be customizable to your liking. And also other few available options.

Hope you achieved the summarize layout you want so much. Thanks to both Amanda and Karl again.

That's all. Thank you and happy tweaking.

More topics on ikmalTips.

► read more

ikmalThink : bloglog from yahoo or google?

Filed under : ikmalThink, widget

I realized something today. There is new added widget for blogger. It's called 'Followers'. (How to? - Dashboard > Page Element > Add A Gadget). This is a Google version of Bloglog that are currently provided by Yahoo!.

This is a screenshot of Bloglog :

bloglog screenshot from readwriteweb

Maybe the requirement of loading the widget itself on the the blogger platform site makes the widget unacceptable by few users. But then again, it's not too large. There are pros and cons here.
Bloglog has more variety in receiving readers whilst the 'Followers' are restricted to blogger from blogspot only (correct me if i'm mistaken). But the requirements of loading external widget are higher on Bloglog. But not to forget, big thumbs up for recent readers on Bloglog. So, which is better? I will try test-run Followers over the weekend.

If you are interested in my blog. Follow me using Followers on the sidebar. In order to maximixe the Followers, I will promote the same campaign as U Comment | I Follow but with U Follow | I Follow U Back term. :-)

That's all. Thank you and happy following.

More topics on ikmalThink.

► read more

ikmalTips : custom search bar for blogger

Filed under : ikmalTips, widget

A simple search bar function. That`s all that you need (and me too). You don`t need option that can be check to search on major search engine. You just want a search bar that can find post on your blog using specific keywords. Many of widget providers gladly provide you with their creation and embed them with link to their promotional sites. This ruins everything.
You just want the simple look. But yet, you still want to tweak it yourself. Maybe just a bit, like the color or something. Maybe simplicity is the best policy are quite overrated for simple search bar and giving them dull looks.

Then this just might be the solution for you.
Credit to the creator of this widget is given to Amanda Fazani from BloggerBuster. Visit her site for informational tips on blogger and easy-to-follow tutorial. Show me BloggerBuster.

Let`s get on to it.
Simple Search Bar for Blogger

Step 1 : Add a new HTML/JavaScript Element

Navigate yourself to Layout > Page Element > Add A Gadget (to the place where you want the widget to be shown) > HTML/JavaScript

Step 2 : Add the following codes

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

When preview, it will look something like this

If this effect is what you want to achieved then discontinue reading. If you might change the border or search tab color, read on.

Step 3 : Styling the search bar
Let me preview to you which version can you achieved with this simple code.

- Changing the search tab colors and tag

By adding this code and change codes in purple for the length of the search bar form, change codes in red for form color and codes in blue for form border color. For search tab, change to codes in grey for tab color and codes in orange for tab border color and in green for text in search bar tab

You will get this

- Adding visible text within search bar form

By adding the text in green

You will get this
You can also insert onclick="this.focus();
this.value='';" within these area so the value will be empty/clear when the form is clicked.

- Changing the text in search bar tab

Change the text in purple

Experiment to suite your taste and your blog color scheme, leave a comment for how to change the tab into icon.

That`s all. Thank you and happy customizing.

More topics on ikmalTips.

► read more

ikmalTips : summarize blog post on blogspot ( II )

Filed under : blogger, ikmalTips, widget

Earlier I post a topic about how to summarize blog post on the main page. This is the extension for the post title summarize blog post on blogspot (I). In this version of post I`m going to post how to summarize post using expand/collapse method.
This are however NOT my creations, instead it`s a creation by a great developer named Ramani from Hackosphere. Visit his site for more hacks and iPhone application created by himself. Don`t have an iPhone ? Get one, it`s cool !

This version of post summarizing called Peekaboo View. One the code was correctly implemented on your template. Your blog post will no longer shows all your written post. Instead it provide link at the bottom of summarize post and will expand/collapse on the same page.
If you prefer the links direct you to the post page, check out my post mentioned earlier. Okay. Let`s get on with the editing.

Peekaboo View (expand/collapse post)

Step 1 - Back up your original template

Whenever your tries to customize your blog template ALWAYS save the original template into your computer. In case of anything goes wrong either with the code or the after-effect are worse, you can always revert back to the original template before you applied the editing.
To back-up your Blogger template, go to Layout > Edit HTML and click on the "Download Full Template" link near the top of the page. You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.
To restore to the original setting (before editing), simply upload the template using the upload form located on the same page.
Or, a quick method I always use. Check Expand Widget Template option and copy all the text (Ctrl + A) in the scroll bar box and save it onto any simple text application (Notepad, Wordpad, etc). In case of mishap, simply reverse the process. - useful when you are going to restore in between editing time.

Step 2 - Start adding the codes

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<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>

OR, If adding this code failed for some reason (incorrect line breaks, etc). I`m sorry and use the code from this site (- link from the original post on Hackosphere).

Step 3 - Find this section of code and add following

Find this particular div for post-body and add the codes in orange. Check Expand Widget Template to find the section mentioned. Please note that there may not be uncustomized-post-template word on your template. It will just work fine.

<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;'/> 
</div>

Change Read More... and Summary only... section for your desired text on link that expand/collapse the post.
Preview your template (nothing will happen but if error occur when editing the codes, you will unable to preview your page. If so, please repeat steps or comment below). Save upon completion.

Step 4 - Format the post template

Go to Setting > Formatting on your blogger Dashboard menu and look for post template form on the page. Copy and paste the following code below.

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

Save upon completion.
The next time you write a new post replace purple portion with summarize post and replace green portion for the rest.
You can also edit previous post using the same method.
Done !

Kindly leave comment below for any question/difficulty occur.

That`s all. Thank you and happy peeking.

More topics on ikmalTips.

► read more

ikmalTips : summarize blog post on blogspot ( I )

Filed under : blogger, ikmalTips, widget

As a daily-based internet user, I surf on more and more sites everyday. There`s one thing I hate upon stumbling (stumble upon?) a sites are the one that uses very confusing layout and hard-to-read font (am I one of them?) but post a very well written content. This annoys me that halt down my intention of reading the content.

The widget I`m about to introduce here solve none of the problem above. But. It does make a certain post easier to read by summarizing the header of the post and provide certain link either to expand/collapse the post or to be brought onto a new page featured only the post selected.
The overall layout would be neat and your long written post will not overshadowed the shorter one. Should I have this option on every sites I visit, I be well please because the mouse scroll are getting loose already. There are two option for this widget as stated earlier :

Selective Expandable Post (provide link to the post page - single post on page of selected topic)
Peekaboo View (expand/collapse post on the same page)

Credit are given to the creator of this amazing widget, Ramani from Hackosphere. Visit his sites for excellent tutorial on blogger and some iPhone applications he added on his site. Show me Hackosphere.

Well, let`s get along with it.

Selective Expandable Post (the ones I`m using).

Step 1 - Back up your original template

Whenever your tries to customize your blog template ALWAYS save the original template into your computer. In case of anything goes wrong either with the code or the after-effect are worse, you can always revert back to the original template before you applied the editing.
To back-up your Blogger template, go to Layout > Edit HTML and click on the "Download Full Template" link near the top of the page. You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.
To restore to the original setting (before editing), simply upload the template using the upload form located on the same page.
Or, a quick method I always use. Check Expand Widget Template option and copy all the text (Ctrl + A) in the scroll bar box and save it onto any simple text application (Notepad, Wordpad, etc). In case of mishap, simply reverse the process. - useful when you are going to restore in between editing time.

Step 2 - Start adding the codes

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<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>

OR, If adding this code failed for some reason (incorrect line breaks, etc). I`m sorry and use the code from this site (- link from the original post on Hackosphere).

Step 3 - Find this section of code and add following

Find this particular div for post-body and add the codes in orange. Check Expand Widget Template to find the section mentioned.

  <div class='post-body'  expr:id='"post-" + data:post.id' >

<b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

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

<span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

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

Change Read More...... section for your desired text on link that brings you to the post page.
Preview your template (nothing will happen but if error occur when editing the codes, you will unable to preview your page. If so, please repeat steps or comment below). Save upon completion.

Step 4 - Format the post template

Go to Setting > Formatting on your blogger Dashboard menu and look for post template form on the page. Copy and paste the following code below.

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

Save upon completion.
The next time you write a new post replace purple portion with summarize post and replace green portion for the rest.
You can also edit previous post using the same method.
Voila!

This hack provided will make you post summarize on your main page and will bring you to the post pages upon clicking the read more link. I chose this because it will make visitors to leave a comment easier.
Thanks again to Ramani from Hackosphere for this great hack. If you like to apply the another method of summarizing post mentioned earlier which make the post expand/collapse on the same page, use Peekaboo version. Show me this hack.

That`s all. Thank you and happy customizing.

More topics on ikmalTips.

► read more