Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

“Read More” Expandable Posts Link For Blogger

Cool! I got this “Read More” Expandable Posts Link from www.eblogtemplates.com. It is very simple to install in new blogger blog. I can say it 'as easy as ABC'.

With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post.

Ok, let's see how to do it.

Step #1 - Update Your Template Code

Add the following code below the <div class=’post-header-line-1'/> and <div class=’post-header-line’> tags if you’ve got both.

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


Step #2 - Add a Class Tag in Your Default Post Template

Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in.

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>


Lastly, you need to navigate in your Blogger account to “Settings” -> “Formatting” and scroll all the way down to the bottom. Paste the following code in the last option called “Post Template”.

<span class="fullpost">

</span>



Ok, we’ve got everything all setup and it is time to go and test it out!

When writing your new post, anything you put outside the <span class="fullpost"> tag will be the teaser text and appear on the screen by default. If you want to hide the rest of the post, you needs to go in between the <span class="fullpost"> and </span> tags in order for the “read more…” link to work properly. See the screenshot below.



Good luck!


Read more...

Parse HTML

HTML Parser is a Java library used to parse HTML in either a linear or nested fashion. Primarily used for transformation or extraction, it features filters, visitors, custom tags and easy to use JavaBeans.

Got headache to parse your HTML? Here we provide the solution. It is a fast, robust and well tested package.

  • Copy the code/script you want to parse
  • Go to http://www.blogcrowds.com/resources/parse_html.php
  • Parse the code as below
  • Click the parse button as available in the page
  • Get the results and copy & paste it onto your


Read more...

Get Meebo For Your Chatting Room

It's fun to have Meebo in your site. Just get the "embed code" and paste it onto your site for free!

Visitors to your Web page automatically appear in your room's buddylist, so they can chat in your room without any hassles like registering or installing some nasty software.

Here is What's Up Room


http://www.meebo.com/rooms
Get a personalized place on the Web to chat with your buddies now!


Read more...

Random Image Widget

Hey, this is cool! Random image shows whenever page refresh. Look at our random image above, and refresh this page (press F5 shortcut), you will get different image everytime you refresh this page. Continue refreshing..... more images will be shown.

Now we talk about the script here. Ready?

  • Login to blogger dashboard.
  • Go to Edit HTML under Layout.
Copy & paste CSS script below under <b:skin><![CDATA[/*
#randomimg {
background:#476 url("http://YOUR IMAGE URL HERE") no-repeat;
margin:0 0 0;
padding:0 0 0px;
}

Copy & paste script below under <body>
<script type='text/javascript'>

var banner= new Array()

banner[0]=&quot;http://YOUR IMAGE URL HERE&quot;
banner[1]=&quot;http://YOUR IMAGE URL HERE&quot;
banner[2]=&quot;http://YOUR IMAGE URL HERE&quot;
banner[3]=&quot;http://YOUR IMAGE URL HERE&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#randomimg {&quot;);
document.write(&#39; background:url(&quot;&#39; + banner[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>
Here how to set your images:
Look at this line:- banner[0] until banner[3], it means you have 4 images. How if I need to use 8 images? Just add the banner until banner[7].


Lastly, copy and paste below code wherever you want the images appear.
<div id='randomimg' style='height:340px;'/></div>


Tips how to apply this for you blog banner.
  • Check out for this script - randomimg replace with header
  • Skip the CSS script


Read more...

daulattuanku.blogspot.com Now Online!


Blogger semakin hari semakin mendapat sambutan ramai dan kini muncul sebuah laman blog daulattuanku.blogspot.com, demi mempertahankan kedaulatan raja-raja Melayu.

Berikutan dengan isu yang telah ditimbulkan oleh Karpal Singh dan usaha menandatangani memorandum generasi muda Malaysia yang khusus
dilaksanakan untuk menyatakan pendirian generasi muda, daulattuanku.blogspot.com akan mempertahankan kedaulatan raja-raja Melayu tanpa berasa takut untuk meluahkan pendapat serta pandangan demi kestabilan politik dan keharmonian kaum yang selama
ini dinikmati di negara bertuah ini.


Read more...

Simple Expandable/ Collapsible For Blogger

Write too long in one post and make your page messy? Here is the idea and probably useful for you.

This script is very simple and suitable for writer who writes a very very long article in one post. I have been using this script long time ago (I can't remember where I got it) and it's working fine.

Click here, copy and paste the script in your post section.


Read more...

Random Post Widget

This is another cool widget I found on the net. It pick any article/post which available in the blog randomly.

You can find this widget at the middle of this blog side bar, looks like the image below. Test it!


Here is the code for beta-blogger. Copy & paste the code into the HTML/JavaScript page element and it will work automatically. Easy right? Thanks to phydeaux3

<div id="myLuckyPost"></div><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = '<center><img border="0" src="http://www.imagehosting.com/out.php/i1742056_wassupbeb.gif"></center>'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

If you want to change the image or the alignment, here is the line you have to edit.

'<center><img border="0" src="http://www.imagehosting.com/out.php/i1742056_wassupbeb.gif"></center>'


Read more...

Popular Post Widget For Blogger

I found this widget at Blogger Buster and it's working as I really need.

Here is a Popular Posts widget for Blogger blogs which displays a list of the ten most commented posts. This works by parsing the last 5000 comments which have been made on your blog; the post titles and URL are extracted and displayed in descending order of popularity, followed by the comment count of this post.

<h3 style="color:#660000;">Most Popular Articles</h3>
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fwww.wassupbeb.com&num=10" type="text/javascript"></script>

Ops! Do not copy & paste the above code in your blog cause it will not work for you. If you really wanted the widget please visit Blogger Buster.


Read more...

Google Translate Mini-Flags Widget

This widget is cool. Don't border to think how it's work, you only need to copy & paste the code to your blog. You can see mine at the sidebar top right of this blog. There are many size available and you can choose one which fit to your blog.


Add a Google Translate Mini Flags widget to your blog. Powered by Google Translate, this widget lets your visitors view your pages translated in their own native languages with just a click.

This widget is tested on Blogger, Wordpress and Joomla. It might also work on other platforms.

Learn more here!


Read more...

Beautiful Blogger Templates

Are you tired of looking at the default 16 templates that Blogger provides? Mashable decided to search for some of the different-looking Blogger templates and found dozens of pretty creations, many inspired by themes from Wordpress and other blog hosts. You can find a list of some selected 2,3 and 4 column Blogger templates and themes sourced from across the blogosphere.

All the templates are premade and you only have to follow the instruction how to install on your blog. Some of the templates are not easy to install and you need to do modification. Read the instructions carefully and throughly before you do changes on your blogger template.

Enjoy.


Read more...

Copyright © 2008 - What's Up - is proudly powered by Blogger
Smashing Magazine - Design Disease - Blog and Web - Dilectio Blogger Template