Check out the Latest Articles:

Friday, August 28, 2009

Links to this post







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


Mia Zoe .








Share/Save/Bookmark

Sunday, August 16, 2009

Links to this post



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


Mia Zoe









Share/Save/Bookmark