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

Putting Time & Date & Flikr Slideshow on your Page

Not your Usual Flickr : But a Flash Badge !

There are many of you Bloggers out there who want to place the time & date on your pages & the slideshow , but once again : you are given limited options as to both . Many of you either have to place a seperate calendar widget , then another widget displaying the time for your visitors . Ok, you can stop searching & placing 20 widgets on your page . Here is a little piece of script ( 2 lines ! ) which will take care of all that searching now .





As promised : 2 lines of code right here --->

<script type="text/javascript">

document.write(Date());

</script>

Yep, that's all folks ! and the time & date will be displayed as it is over my profile photo ( take a look on bottom of page ) ; and you're done . You can place the code anywhere within your page document , or you can place it as a " widget " from the "Page Elements " section within your layout & put it anywhere you want - thats it for time & date .

Also, I would like to share with all of you a simple online " de-coder " . What is this you may be asking - ok , I will explain : have you tried creating a post and have tried to place a piece of ' code ' and then tried to publish that post and were notified that your post could not be published ? Or when you did publish your post - the code did not show or was just scrambled and looked like "<" or "lt&" yeah , I know - but here is an online tool which will help you insert any type of code into your posts without you having to sit there and figure out what this "<" means in simple language terms . If you have any type of code you wish to interpret within any o your posts simply go here Simple Code , take any piece of code which you may have & want to insert into your post and place it within the first box titled : " Enter markup " and press the " Process " button . Below in the second box , titled ;" Cut and Paste " , you will be given the result markup of the code . Copy & paste this into your post . Now in your post ( prior to ' Publishing ' , the code will look as it does , without the "<" & the ">" tags . However ; once you click publish mode , your code will appear normally . Please bookmark and save this site as you will probably need it in the future for creating other posts which you will want to include code in . I hope this helps :)

Now, as you all may know , when you are creating your page within the " Page Elements ' section , you are given a choice to place a slideshow on your page . You are given a choice to choose either : Flicker , Picasa & Photobucket . Most usually end up choosing Flicker . However , the slideshow which you are given is just one tiny box with not a lot of choice in " customization " . Ok, I have a nifty little piece of info here which I will now share with you all :) Aside from the usual slideshow offered on here by Blogger and the usual slideshow offered by Flickr.com , there is also a Flickr "Badge " which you can create and have displayed on your page as well . Here is the link where you can go to and begin creating your ' Flckr Badge ' . Now once you get there , pay attention : you are given the choice of either an HTML badge or : a Flash Badge . Also , you are given a choice to display either your own photostream or another users photstream . However , if you dont have a Flickr account , or even your own album [ photo stream ] and you dont wantto go searching through limitless 'user albums ' - you can simply choose " Everyone " at first and once you do so , a new option will be given to you as to whether you want to display ' Everyone's public Uploads ' or , you can simply choose ' All Public photos tagged with ' such as : kittens, or flowers , or vector , illustration, web , etc ..you get it . Once you choose your tag word and click the " Next " button below , you will be taken to the next page where you will see a small badge and customization options for the background , border , and the font . Choose your colors from the color chart to your right , and you will see your badge being updated every time you choose a particular color ( you may keep changing the colors until you are satisfied with the results or continue going back to correct anything else you wish ) . Once you are satisfied with your customization , hit the next button again , and you will be given the code for your new badge :
[ *Please note : The Flsh version of the badge cannot be included in this post , however you will be able to post in within your page elements by choosing the HTML/Javascript in ' Add a Gadget ' ]
You may also like to create an HTML badge if you dont want the Flash version : In the HTML version ( if you again dont have a Flickr account and simply choose tag words , ) you will be taken to the next page ( by clicking the next button of course ) , and in the HTML version you are given 3 choices : #1 ) the size of the thumb nail images you want displayed , and #2 ) the number of images you wish to have displayed by clicking the drop down button above ( in the preview you are shown 3 thumbs , once you choose the number of images you will automatically be shown the preview images of that as well ) and # 3) Horizontal, Vertical and Customized version of the slide , so I will choose for demostrational purposes 5 images and the " Horizontal version of this badge and again you will be taken to the customization page where you will again be able to choose what colors you would like for your badge . Once you are done customizing , just click next and you will be given your Flickr badge code & voila ! Youre done - now you can insert it into any part of your page and I hope you will enjoy your new Flickr badge .

www.flickr.com More photos or video tagged with web design on Flickr

Hope you enjoyed this piece of info . Catch you in cyberspace & smile , Mootools & Jquery love you :)

Women of Web Design

Women of Web Design

Ok all of you big boys of Web Design & Development , hold on to your HD's - there's a ' New Kid in Town ...and the kid is a Girl ! . Not any ordinary girl that is either . This little young lady does not only possess beauty - but brains and killer skills at Web Development , coding & Designing !

If the attribute of Multi- Skilled & Multi- Talented can be attributed to one so young and ( did I mention beautiful yet ? ) of the Female gender - then I will go as far as to say that this young little lady packs a wallop of skills . She goes by the alias of "INSIC and as far as I can tell from her brief bio , she is based in Cebu City in the Philippines .

She is aptly skilled at :

* Ajax

* Code Igniter

* CSS

* XHTML

* PHP

* JQuery

PostGresql

* JSON

* Web Design

And God knows what else ( you will just have to get to her site and ask her ) . What I like about her is the statement she makes in the opener of her personal Blog : " Let's see what I can do for you and your business " . Now that statement speaks volumes about a Designer / Developer . It states that the primary focus is centered on you ( the client ) and your needs . This is what moves one ahead in the Design & Development business I believe . The fact that the Designer in charge is not egocentric and has the clients best intentions at heart . Yes , this young little lady's star is quickly rising and is already shinning as bright as her smile .

The irony is : I was looking over some WP galleries a few days ago in my quest for " Originality as far as template design goes - and I came across a WP template she had made ( only I wasn't aware that this was " Her " ! ) . The template is beautiful ( and I fell in love with it as soon as I spotted it amongst a multitude of others ) it stands out & apart from the rest . It is a " Gallery " Template ( one of the more difficult templates to design & code ) and this little lady has left nothing out of this template . It has a very professional look & looks as if it carries the cost of a Premium Theme ; ( I have seen other templates of lesser caliber which cost a fortune + an arm and your mommas leg ! ) which are not of equal quality as the one Ms. Insic has designed ! Now here's the best part for all of you WP users : she has made it FREELY available ! Yep - My only regret at this point is not knowing how to use PHP , so that I could use it myself ! :(

It would have been great if she could have coded it for the Blogger Platform as well - I know that thousands of Bloggers out there would be downloading it per second ! If you think I'm over exaggerating , have a look for yourself right here : Insic WP Template . This theme reminds me of a well designed Italian office ! ( with media ! ) Now what have you got to say about that ??? If you don't think this is a great Design , then I can't help you - sorry . However , maybe Insic Designs can :)

You may want to go over to her well oiled & smooth running website and have a look over at everything this young little beauty has to offer . I believe that you will walk away knowing something more than you don't already know , and more than a few freebies which she is presently giving away which you might find helpful . Do enjoy her site , but moreover : you may just want to hire her to do your next project , put up a website you've been considering ( ? ) ; I believe she will not leave you disappointed - with a face & a smile like that ? She'll surely put a smile on your face as well . Don't believe me ? well, just go have a look for yourself then , and let me know if I was wrong .

You can visit INSIC DeSIGN & Web Development Here InSiC DeSiGns

Catch you in cyberspace & dont forget to smile , Mootools & JQuery do love you :)