Home > Archives for 2011-05-15

Page Peel Effect using jQuery & CSS

Tuesday, May 17, 2011

If no one ever wrote my first tutorial on style ads Page Peel huh? try opening the archive before ... never see you:) oh yes it turns out there are 2 different tutorials ever published, the first to use the style display Page Ear Javascript, then this is the same .. Sexy Curls jQuery Plugin. Well, for a foreign partner with the term rada Page Peel, please go back to previous records on the second link above yes.

Advanced Ok, well this time I found the latest Peel artificial Page Sohtanaka.com with coding that is of course very different from the above two Page Peel, Sohtanaka not use complicated coding setup, so just put it directly associates live page blog. Although there is little to be edited, and even then just change the look of the picture and link purpose only. When viewed at a glance, for it looks almost the same style, where when you point your mouse at this PagePeel area, it will show the page as you open the roll up a piece of paper and found another page dilembar vice versa. See demo here.

How To Install:

Put the following jQuery script code on code <b:skin><![CDATA[

Then put the CSS code below the above code]]> </b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Put this code under the tag <body>

Please be saved and see the results. Remember! Display the above only as an example, yes, peer can change the image and link any purpose as desired.

Displaying Images Transparent, mouseover Effect

This means what? ok, than my colleagues try jelasin lengthy preview samplenya in zoomtemplate.com, if already try now point to the picture page of posts there .. nah colleagues will see the effect where the original image will be dim light or it could be vice versa from dim to bright when it passed the mouse. Perhaps the meaning is clear enough, yes, immediately wrote to the next.

How it works transparently above the image effect is not so difficult, we need only use the CSS Image Opacity property. But before you should also know the CSS opacity property was not included in the standard CSS, which this property only works well on some modern web browsers only.

Code mouseover effect from dim to brighter (set directly in the picture)

Code mouseover effects from bright to dim (set directly in the picture)

Maybe a bit too complicated if each image must be set one by one the value of his property, now co-direct for each post having an effect this automatically, can simply add this CSS code:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

To my knowledge Firefox usually uses the property opacity: x for doing tranparancy, unlike IE which uses a filter: alpha (opacity = x). In Firefox opacity: x value of x can be filled with values between 0.0 -1.0, while the IE filter: alpha (opacity = x) the value of x between 000-100.

Increase Blog Traffic Through Twitter With Button Install tweetmeme / retweet

A lot of effort to increase traffic, one may share it through social networking twitter. But beyond just sharing articles via twitter alone is not enough you know, no problems at Twitter friend list if we have reached thousands of followers, but kalo cuman 50-100 does not seem too effective. Well, from the dizzy every day to follow people who do not clear, let alone the main purpose kesedar only reproduce a friend, would that we ask for help the reader himself to share our articles link on their twitter each. The easiest way one can by installing buttons from tweetmeme or Retweet.

To install tweetmeme button is very easy, first view the first entry EDIT HTML, then check the Expand Widget Templates. If so, look for the red color code and put that code right underneath the blue button.

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

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>'
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Similar to the way above, install Retweet button is also very easy, first view the first entry EDIT HTML, then check the Expand Widget Templates. If so, look for the red color code and put that code right underneath the blue button.

If you want small size:

Little information, tweetmeme or Retweet has its own counter value to assess how much of our links that have been distributed by the reader. we can see that value directly on button.

How to set homepage on Blogger Comments

Still in commemorating the anniversary of bloggers is the 10th, this time adding new features more bloggers that is in addition to visitor comments, can also directly display the comments along with their blogger profile photo. The facility is very similar to predictably tutorial I wrote some time lulu here and here. Unfortunately, to be able to display comments Avatar on Blogger, we need the login status.

Blogger also provides an easy to directly upload a profile picture when we want to leave a comment, the commentary select the Preview button, click the "Add Photo" to upload photos to Blogger profile. Next when we leave a comment diBlogger, profile picture will be instantly displayed on the comments field.

To enable or disable the profile images on comments, open the Settings page - Comments. Then put a check "Yes" in the "Show profile images on comments?"

Just info, some templates that have been modified may be problematic with Avatar fasititas this comment, but do not worry everything can be back to normal.

Recovering and Enabling feedback on Custom Template Blogger Avatar

By default avatar actually comment on fellow bloggers can directly activate without changing anything on that yet dimodifkasi tempate. But this would be problematic if the template in use today are already using custom templates. Now let me comment this avatar can look back is very easy, just follow the tutorial below:

Enable comments on Custom Template Blogger Avatar

First look for the code below.

Then replace the above code with the code below.

After changing the above code, then look for the line of code below.

Then put the following code after the code above.

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

To enable or disable the profile images on comments, open the Settings page - Comments. Then put a check "Yes" in the "Show profile images on comments?"

Returns the Avatar comment if you use the avatar of MyBloglog

Previously I've written a tutorial to install using mybloglog avatar comment, well when colleagues just want to use standard avatars bloggers, colleagues can easily restore it. follow the tutorial below.

To facilitate co-delete the code, first try searching the first code below

<b:loop values='data:post.comments' var='comment'>

Then look at the line of code like this below

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

If you've met, lived erase all the code above, then follow again how to turn on comment avatars as indicated above.

How to Display Blank Avatars / Default Avatar comment

One thing I do not like the comment avatars bloggers because it is not capable of displaying avatars avatars other than bloggers themselves. Which is more or less enjoyable, comments can only display the avatar photo profile if we are only in a state status log. So do not expect the avatar will appear if we simply enter the URL address of course, this would reduce the terms of neatness of appearance, because it will see an empty space without adorned avatar altogether.

Now for the avatar space is not empty, we try to add a new avatar in the form of default on the blank avatar images, follow the way below

Put the CSS code below the above code]]> </b:skin>

/* Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nW6d0Ii-1bXb_2vZQTAUbpgwC0D3yOt2GQH4kBctWEGrrRRw9GCtBPE51k4joPpac65JiRP6qqy9RfqxRtryClUwnrCyMZRSXoFgWMAVTKAjm_EAGc44aSrUx8Qo4Km0ScW_IzzoqVck/s320/AvatarBlogger.png);
width:35px;
height:35px;
}

Find the code below.

Then replace the above code with the code below.

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

</b:if>

Good luck

Featured Links or Text on the Next Title Sidebar

Due to the many colleagues who ask how do I add a Text Link or Text Title Sidebar on the right side (see sidebar of my blog), so I write down just how easy it is. This tutorial includes very simple, Hatsadz Lamp sure colleagues can try it in just 1 minute.

Here there are two ways to install it, the first can edit and add it directly in the Sidebar Gadgets that already exists or if still confused fellow could get used to the Layout tab -> page elements -> add the gadget -> HTML / JavaScript, then direct copy- paste one of the codes below. Remember, make sure the Title in Gadget HTML / JavaScript remain in keaadan empty, this is to avoid the duplicate title in the sidebar.

Example display Text Link with Small Icon:

Example display shows only Text Link:

Example display shows only the Text:

Oh yes, some templates on the sidebar of the possibility of using <h3> so it's just colleagues.

How To Add Below Header Element

Monday, May 16, 2011

Adding an element in a template may be done, IIA goal may be to add the gadget in the template. Way added element-rich pages so easy koq,,, Please follow the tutorial How to Add Header Elements Under the following to add the element below the header.

1.LOGIN to Blogger

2.Klick "Layout" then click "Edit HTML"

3. Find this code ]]></b:skin> Then copy the following code and paste the above code you.

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

4. Next look for the code that is similar to a rich code below.

5. Then copy and peste following code just below the above code.

6. Then click "Save Template" and after the stored click "Layout" Kemudain see the results. there is a new element under the header of your blog ...

Tutorial SEO Blogger

Sunday, May 15, 2011

Learn SEO bloggers together yuk! Smile, oh like this newly Hatsadz Lamp talking about SEO. Indeed bener hell but rarely posting became less focused and seemed less steady. As we all know that the key to the success of a blog or website it is because SEO is not steady and Shining. Then, why this post was given the title instead of SEO blogger SEO, Tutorial SEO or something else? Is there any difference between the SEO science blogger, wordpress, joomla, drupal or a website like that? Hmmm ... .. good question tuh.

Well, hell on his SEO knowledge base is the same, the goal is only one position for your website in place of the sequence number one in search engines with keywords in the target, that's all .. point. Winking smile. However, there is namunnya ya, because the engine blog or website was created with different coding, the application of various SEO techniques had to be different. Therefore need special knowledge to apply SEO techniques on certain flatform.

Take for example deh though more easily understood. URLs there were 3 young men who are dibandung have the same desire that is visited Monas in Jakarta. Although the same goal of Monas, but to achieve that goal does not have to use the same path or the same vehicle, may have some use, say a car or motorcycle. Although the car or motorcycle that both vehicles, but need different techniques in controlling the vehicle. If you control the car using a motorbike mengemudin technique then it's wrong, and vice versa if you climb motorcycle but the technique used is the technique of driving the car then that too is wrong. If you are wrong to adopt the technique, so rather than get to their destination, but be sure you are damned middle of the road .. not correct that?

Eith ... back to the main topic deh. Henceforth, Hatsadz Lamp try to discuss and focus the discussion to learn SEO Blogger for Blogger users are no longer poor poor visitor traffic alias or a little reader .. ouch far gini deh day blog is still empty of visitors.

Although the later Writings of much earnest Dejavu Hatsadz Lamp will repeat the old Writings, but it's probably more Because the goal is to make it more structured and targeted so That the techniques of SEO cans be easy to apply