Placing a Recent Comments w/ Summaries | Blogger

Best Recent Comments w/ Summaries Script for Blogger

Have you wanted to display more than the usual limited 5 Comments offered by the Blogger widget on your page ? along with the Summaries of those Comments ? Well , here is the Ultimate Widget which will allow you to display more than 10 comments & their summaries ! ......

Yes, I understand your plight , all you Bloggers of the infinite Cyber-sphere who would like to display more than the usual alloted measly 5 comments with NO summaries which the Blogger Platform offers presently . Well, search no longer - because I will now give you the ultimate script for exactly this purpose ! Arent you happy ? yes.....I know you are - but I'm even happier to give it to you, because this script will allow you to display up to 25 Comments along with their summaries ! . Well, are you ready to get down to business ? Good ......

Let's get started then :)

Ok , I would like you to go to your Dashboard > Layout > Page Elements > Add a Gadget :

Are you with me so far ? Good - lets continue then :

* Please choose to add a Gadget & choose the HTML/JAVASCRIPT gadget . Once the window opens up , please copy the code below and add it in this box . Please also ADD THE TITLE : "RECENT COMMENTS or LATEST COMMENTS this way you will be able to identify the widget when you are in your Page Elements Editing section ok ? Good . Now , copy the entire code below please :


<ul style="font-style: italic;"><script style="text/javascript">

function showrecentcomments(json) {

for (var i = 0; i < 8; i++) {

var entry = json.feed.entry[i];

var ctlink;



if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

ctlink = entry.link[k].href;

break;

}

}

ctlink = ctlink.replace("#", "#comment-");

var ptlink = ctlink.split("#");

ptlink = ptlink[0];

var txtlink = ptlink.split("/");

txtlink = txtlink[5];

txtlink = txtlink.split(".html");

txtlink = txtlink[0];

var pttitle = txtlink.replace(/-/g," ");

pttitle = pttitle.link(ptlink);

if ("content" in entry) {

var comment = entry.content.$t;}

else

if ("summary" in entry) {

var comment = entry.summary.$t;}

else var comment = "";

var re = /<\S[^>]*>/g;

comment = comment.replace(re, "");



document.write('<li style="text-align:left">');

document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');

document.write(' on ' + pttitle);

document.write('<br>');

if (comment.length < 150) {

document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');

}

else

{

comment = comment.substring(0, 150);

var quoteEnd = comment.lastIndexOf(" ");

comment = comment.substring(0, quoteEnd);

document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');

}

}

document.write('</li>');

}

</script>

<script src="http://YOUR TITLE HERE.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">

</script></ul>


Please note : You can make further customizations by changing the value 20 (var i = 0; i <>higher or lower value, this value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Now please hit the SAVE feature , and your Recent Comments w/ Summaries will appear on your main page once you view your Blog page . I hope you have enjoyed this article and moreover your new Comment Widget. Enjoy , and keep smiling , Mootools & JQuery love ya & more is coming your way so stay tuned :)

Retweet Button

Implementing the Twitter Retweet Button

on your page in one simple step !

There is actually nothing to this , and I am quite aware that many users have been experiencing a great deal of difficulty when it came down to installing & applying this code to their Template . Many users did apply / implement it , however it showed up in the most undesirable place - for some users it even appeared at the bottom of their FOOTER ! Yikes !!!

That's a big No-No, and we will not tolerate a piece of javascript code to rule over our page & our lives now will we ?.......

No siree we will not . Therefore : We will put an end to all that strife right here and now !

This will be just about the simplest and the quickest code installation you will have to do - are you ready ? Ok, great , lets get to it then. Before we begin , if you have a Tweet or Retweet Button presently installed in your page source and it isnt situated where you would like it to be - dont fret over it , simply remove it , we will be placing an entirely new one right now- and yes, rest assured : It is the exact same Retweet Button , enabled with the same identical capabilities.

Ok, then , lets us go to our DASHBOARD > LAYOUT > EDIT HTML > EXPAND WIDGETS PLEASE :

Scroll down through your page source until you locate the following code :

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

OR : If you want the Retweet Button at the footer of your posts , please look for this next code then :

<data:post.body/>

Great , now if you have found either one of these two bits of code [ depending upon whether you want the button located at the top or bottom of your posts then we will move on to our next and final step :

Considering you have located your code , please copy the code given below of the Retweet Button and place it / Paste it EXACTLY UNDER either one of the ABOVE two codes . Remembering that one code is for the button to display on top of each post and one is for the button to dispaly at the bottom footer of each of your posts .

Now that you have placed the code below let me explain the Position in which the button will appear :

The code I have applied to the script is for the button to appear at the top RIGHT of your page . If you would like the button to appear the TOP LEFT of your page , simply change the the floating of the element to shift from its present state of Right to Left by simply erasing the word Right & Setting it to Left

<div style="float:right;padding:4px;"><script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script></div>

That's it , you are done installing your Retweet Button now. Please hit the Save Template Feature and you are done . Refresh your page , go to View Blog and your Retweet will be there . Should you run into any complications , please leave me a comment with a link back to your page so that I may respond to helping you. If you leave a comment as an anonymous user I will not be able to help you .

I hope this post has been helpful to your Blogging needs Enjoy your new Retweet Button & I will catch you in cyberspace :)

Enabling the "Read More " Option for Blogger

" Read More : & Keep your Reader "

Does your Blog run on forever....with no end in sight ? .If so , then it's no wonder you cannot keep your reader on your page for more than 2 minutes ! You need to implement the " Read More " option on your page immediately !

Yes, I am quite aware of the problem which many Bloggers have concerning their pages which tend to run on forever into next week ! Honestly Bloggers , it does not help your page , you nor your reader in any way , and chances are : Most of your readers will run as far as they can from your page once they see that your blog is longer than the Gettysburg Address ! and I am not exaggerating at this point .
So, what do you say we put an end to this problem and get you to implement a Read More so that you can save the life of your Blog and your reader ? ( and possibly your own :)

This procedure will be as painless and as easy as crossing the street - so , lets begin :

Please go to your Dashboard : go to EDIT HTML > EXPAND WIDGETS and apply the following code precisely above or anywhere above the </head> tag :

Please copy & paste the code below, above the </head> code as specified :

<style>

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

span.fullpost {display:inline;}

<b:else/>

span.fullpost {display:none;}

</b:if>

</style>

Now that you have done this , let us scroll further down within our template and find the following code : **[ Please note : Some templates have 2 <p><data:post.body></p> elements - make sure you apply the code below under the 2nd one ! , now look at the entire code below , and look for the Highlighted part of the code , that is exactly where you will place your own code , lets go :

<div class='post-body entry-content'>

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

<style>.fullpost{display:inline;}</style>

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

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

<a expr:href='data:post.url'/>

</b:if>

<b:else/>

<style>.fullpost{display:none;}</style>

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

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

<a expr:href='data:post.url'><img align='left' src='http://img87.imageshack.us/img87/9306/92702304.png' style='border:0px;'/></a>

</b:if>

</b:if>

The code above is only with an image ( which is a clear arrow , such as the one running on my page here ) Now the second code below is with the Arrow Image + text which says " Read More " if you would prefer to have the text as well . Copy which ever code you prefer , or you may choose to change the clear arrow for a different image of you dont like the clear arrow .

<div class='post-body entry-content'>

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

<style>.fullpost{display:inline;}</style>

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

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

<a expr:href='data:post.url'/>

</b:if>

<b:else/>

<style>.fullpost{display:none;}</style>

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

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

<a expr:href='data:post.url'><img align='left' src='http://img87.imageshack.us/img87/9306/92702304.png' style='border:0px;'/><br/><b>Read More</b></a>

</b:if>

</b:if>

Now if you have done this , please click Save Template and let us complete one more step before this can take effect and appear on your page ok ? Lets go onto the next & final step now :)

Please look up at your control panel and click on SETTINGS | then click on : FORMATTING from the sub panel below . *** While you are on this page now , you may wish to choose the number of posts which will appear on your page - as most of you have like 20 articles running on your page - and this is a big NO-NO . The best number of posts to have on your page are 3-4 . It makes your page nicer - shorter - and the load time is much better on your users browser and they wont be scared of their browser crashing while they wait for your long page to load , so now would be a good time to choose 4 posts to be displayed on your page :) ***

Ok, if you are finished choosing your number of posts , let us move further down on the same page and all the way at the very bottom , you will see : " Post Template ". Please copy and paste the code below into that box :

....Title....

<span class="fullpost">



The rest...





</span>


Now hit "Save" and go to your Posting ; You will now see this code within your posting box .
Where you see the " Title " , you will post exactly that - your sub-title to your post ( as your Main Title will go above into your Main Title ) . You will write your subtitle and a BRIEF outline of your post there . Now below where it says : " The rest " you will go on to write the rest of your article / post , and you will stop exactly above the </span> tag . Once you are done with your article , filling in your labels & such - just hit the Publish Post button and you are done ! Voila !!!
Now that wasn't so difficult was it ? . This function will appear every time you write a new post . Enjoy & happy blogging ! * If you should run into any trouble , drop me a comment and I will assist you .

Keep smiling , Mootools & JQuery love you :)

Great Photo Sliders Without a line of Script !

Two of the Best Image Sliders on the Web Requiring No Script !

The best two ( 2 ) Image Sliders I have recently stumbled upon requiring not a line of script nor any CSS - for your page !




I know that many of you would like an Image Slider for your site or page - but you're not that script savvy or you simply just dont want to bother adding more script on top of script . Ok, those days are now over . Now mind you , I am quite aware that there are several sites which offer embeddable slideshows for your page - such as Photobucket and of course there's Slide both sites offer various options for their slideshow's , such as different skins and Slide even offers the option of incorporating Media ( such as music ) into your slider as well .

However , there are some of you who might prefer something more professional looking on your page , possessing the capabilities of those so called Quiet Slide which run on JQuery script and are lightweight and dont seem to burden your page within loading time . These Jquery Sliders are sleek , and quite appealing as far as their presentation goes . However , as I mentioned above : some of you may not be Script Savvy and you dont want to go through all the fuss just to place a couple of pictures on your page ..I understand :)

Ok, here is image slider no.#1 - which is Fully customizable ! What does this mean ? well, ok it means this : It is customizable as far as its size ( width & height ) by setting the parameters . Secondly (#2 ) ,the size of the images is also customizable also and thirdly #3 : You can set the number for as many images you wish to display. Basically , this particular slider is a No Brainer and requires no effort , other than you locating the desired images you wish to display , customizing the size, number of images & finally generating the code , copying & pasting it unto your pages in the desired location . Now , this slider is for your Flickr albums / images / sets . However : here is a tiny little tip for all of you who may not be aware as to how to get this Flickr slideshow to work . I know that many of you may not have a Flickr account , or if you do have one - you may not have images uploaded , or you simply dont like your own images and want to use someone else's . This slider will work even if you do not have a Flickr account of your own , and the best part of this particular slider is : You don't have to sign up nor create an account to use it ! ( yes I know , you can thank me now ) .

I will tell you now how you can load someone elses' images unto this particular slider - and they can be any images you like . Take note however : You can only use a set of only One ( 1 ) user at a time - thus : if you want to display images pertaining to ex: Illustration , Digital Photography etc this week which belong to particular user - then you can do just that and the following week, you can choose to display images belonging to a different category and a different user . Ok, so we managed to get through that - now lets move on :)

Firstly , you will want to get to the Slideshow site , which is called Slideoo , once you do , please bookmark it so you will have it for future reference . Once you arrive at the said site , and have a look-over at this beautiful slider , you will open a new tab on your browser and go to Flickr ( and as mentioned previously : you dont need a flickr account ) .

Once you have taken the above two steps - you will now go through the Flickr process : finding images or a users images you wish to display . When you finally do find a set of images you would like to display , here is the next step you need to take : Look at the user's name . A users name is displayed at two places : either on the address ( browser address bar ) or by clicking their avatar and their user name will come up & also : if you choose a particular set of images , and of course it is always displayed right next to their user avatar . Now , you have found the images you like - and you've located the users name . You will now copy the users name from the address bar ( only the name - not the entire URL ),
and paste it into the the Slideoo box which says Enter your user name and click on either of the 2 options given : Use your sets |or | Your Photostream . Now if a user has many sets of images , what will happen is : all of their sets will come up on display on Slideoo . Choose the images from the set which you like , customize the settings ( width , height and image width as well : small , medium, large ) and click on Create your Slideoo. Your Slideoo slideshow will appear above-head where you will be able to see it's final outcome. If you are not happy with the size parameters you have set , you can easily change them again until you are satisfied with the results . Now once you are done and satisfied with what you see , you will see the embed code right there - all you need do is simply copy & paste . Go to your Edit , HTML , Page Elements , choose 'Add a Gadget ' HTML/Javascript and paste the embed code into that - hit save and your slideshow is now on your page ! Now wasnt that simple enough ?

Here is the Slideoo slider for you to sample , the size parameters of the slider are 400 width & 170 height ( height is automatically set by the generator once you choose the width of the slider and the image size - which in this demonstration is set at " medium" ) . What do you think ? Nice huh ?

Now , the slider is not automatic - a user must click on the + & the - button's which are located to the left and the right of the slider to view the images . Once you click on any of the images you will be taken to Flickr and the particular user's album .

Ok , now that we have gotten Image Slider #1 out of the way , time to move on to slideshow no# 2. This slideshow is pretty much like a Beta slideshow within its functionality & appearance and basically looks like a Video . For generating this particular slideshow , you will need to activate an account - which will also come in handy in the future should you wish to edit or reformat your images . Of course I dont have an account with this particular site , therefore I cannot display what the slider looks like - however , here is the site where you can go to and everything regarding it's usability & functionality is explained to you live ! You can sign up for an account if you feel this is more to your liking and start building your slideshow . You can also incorporate your own mp3's into this slider ! It also gives you the option of using your own computer images or using images you like on the web by simply copying and pasting the URL . The final step once you are done is to once again , copy the code and paste it into the Page Elements ' Add a Gadget ' section & voila ! youre done . Here is the site offering the slider which is called Roxio Slideshow . So, I hope you will find these sliders useful and handy for your page . Enjoy & catch you here next time . Till then , keep smiling , Mootools & JQuery love you :)