Collapsible Message Panels On Blogger

When I was browsing a design blog called "impressivewebs", I found a header that could collapse itself. Impressed by the effect, I sat down to work out the logic and it was pretty simple to achieve it on blogger. In this article, I'll illustrate the collapsible effect with simple message panels while you may apply the same logic to your header or post area or to any widget of your choice.

COLLAPSIBLE MESSAGE PANELS ON BLOGGER - LIVE DEMO

So, take a look at the live demo by hitting the link above. I guess you liked it... Interested to add this on your blog, as well? Then, follow the steps below.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Just paste the following piece of code above the line mentioned at step 1.

.message_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 383px;
}
.message_list li {
    padding: 0;
    margin: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSiLK7l2NazLVhKXgLHgeHNrHruSmDh04FLTY0sznAmCbw1kLblruqtP-JvZlixX0v9zXt_BaQz1pL39ydKI0q3KyftuGaOddPAGgv3p-EyrlHtBkZQAcBd6ZRG01mMPaFyyOkn963LWj/s800/message-bar.png) no-repeat;
}
.message_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
}
.message_head .timestamp {
    color: #666666;
    font-size: 95%;
    position: absolute;
    right: 10px;
    top: 5px;
}
.message_head cite {
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}
.message_body {
    padding: 5px 10px 15px;
}
.collapse_buttons {
    text-align: right;
    border-top: solid 1px #e4e4e4;
    padding: 5px 0;
    width: 383px;
}
.collapse_buttons a {
    margin-left: 15px;
    float: right;
}
.show_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJrd_F3LSpO_LY5FBT4B8va0UUl45rH5w6LIaEOw1HFGWeU09nWF33naWG7R2hSbIclXit1IutinwEtb4RqbGQ1RD8VfnjY3pb_s_dLee1FRyCwld3oh0oDIB0Psk7kT8yOaPgfSWhtf8q/s800/tall-down-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.show_recent_only {
    display: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZjQIx9NzlPrJg-bKSLjOhjZUfB2LF5DFaQDXTzZW890Qyzzl_WG1MOCEgRxvgCH4izFkrQ0l9ZYcdcp25deHgsDMLV21GzzjdF-zvf8WnonER5On90yOTEbMlqwb7XfIazp3ASJf2XIz/s800/tall-up-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.collpase_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SMPx00QZ67Vp89VuV1Vwxq0nmjYNW8H1KhPT3nAVkfiuYQ4OsGYVSj1OeTX8_FkM6jUv-bz0AepdlFT40BfKI1cqx6M6dy9oHRVzP7DqExM_Szvs9DoUYMK1vefnaHJPI-vV9avwlWei/s800/collapse-all.png) no-repeat right center;
    padding-right: 12px;
    color: #666666;
}

Note: I've used an image for the title part of the image. You may replace the same with gradient colors using CSS. Refer the following article to do the same - Cross-Browser Gradient Effect Using CSS.
3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();   
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
});
</script>

Note: Do not include the first line in the script mentioned above if you've already added the latest jquery file on your blog.
5. Now, paste the following piece of code in the document - HTML FOR COLLAPSIBLE EFFECT, anywhere inbetween your <body> and </body> tags - probably within the post editor (or) below <div class='main-wrapper'> (or) <div class='columns fauxcolumns'>.
6. That's it! Save your template or publish the article and view the same to enjoy the effect.

HTML CUSTOMIZATION - FOR CODE MENTIONED IN STEP 5
If you wish to generate the time for your messages (displayed at the top right) by default, then change the text that appears in between  <span class="timestamp"> and  </span> tags. Similarly, you can change the text from "NAME" and "CLIENT" with your names and clients respectively. I've added my name and a small message in the first few div tags for reference. Check the same (code mentioned in text document at step 5) for your reference.

I've tested the above effect on all the major browsers which includes, but not limited to, IE, FF, Chrome, Safari and Opera. Let me know if you find some bugs with the above coding. If you need assistance in extending this effect to other elements on your blog, then leave a comment below and I'll help you out when I'm free:) Do share your opinions about the article via comments!

Click4more... 18 Comments

Review on Techinline - Remote Desktop Software

Wondering why I posted an article something that is way off target (not related to blogging)? Definitely not! I wanted to share my experience with software called “Techinline” which made my job very simple in dealing my client’s bug. Over the past few weeks, I’ve been trying to find solutions to solve issues that pop up on installing the templates or widgets with my clients.

I’ll illustrate the same with a small example that I personally experienced. Few days before, I designed a widget for my friend and installed the same on his blog. When I started to explain how it works, it seemed to be Greek and Latin for him. So, I told him “you’ll never understand unless you sit next to me and view what I do”. He said “Why not possible! We can! Just try the technique of operating a PC with remote desktop software and he recommended me to use Techinline”. 

Well, I just loved the way it worked - very simple and easy to use (Please note that I’m not a techie guy). To get them working, I just had to install a Firefox add-on along with setup software to start my tutorial on his PC (pretty small in size). That’s it! Above all, I could do all this for free... However, the free sessions will be available only for 15 days – later expires...

To be frank, just because I’m operating with one or two clients at present, I’ve not yet purchased this software. I’ll definitely consider buying one if I get more clients because, being a webmaster and web designer, I feel comfortable in operating my client’s desktop (showing them how to do) rather than writing pages to explain a simple tutorial. Moreover, your clients need not buy the software. They can opt for the free session while you (posses the software) can solve the issues faster hoping that the issues solve within 15 days.

I’m not sure how many such types of software are available around the web but, I felt this one definitely needs a review on my blog. So, I’ll just list out some of the features that they offer – two way desktop sharing,  remote reboot and reconnect, browser based solution, multi monitor support, firewall/proxy transfer, auto scroll and auto scale, file transfer and instant chat. You may check out this page - Features, for a complete list of the features they offer in detail.

“To summarize, I recommend the above software for webmasters and wed designers to enhance their design services by providing unique and better customer experience.”

Click4more... 8 Comments

Shutter Effect Image Slider/Gallery On Blogger

I've been constantly trying to pull out unique articles for blogs run on blogger. I'm sure you would have noticed the same provided you are a constant follower of my blog. So, we've yet another interesting article based on jQuery, called the "Shutter Effect for the Images On Blogger", inspired from tutorialzine. Just take a look at the live demo of the effect by hitting the link below and we'll get started...

SHUTTER EFFECT ON BLOGGER - LIVE DEMO

Interesting effect... Isn't it? I would suggest the above effect for blogs based on photography. While, webmasters and web designers can use the above effect to showcase their portfolios. I'm sure there are lots more places wherein you can use the above effect. So, I'm open to your suggestions... Well, let's get started with the tutorial.

JAVASCRIPT/JQUERY

1. Navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. Once the back up is over, search for the following code in your template.

</head>

2. Paste the code present in the following text document - Jquery For Shutter Effect, just above the line mentioned in step 1.

3. That's it! Save your template temporarily.

HTML

1. Look out for any one of the following codes in your template.

<div id='content-wrapper'>
(or)
<div class='columns fauxcolumns'>
(or)
<div id='main-wrapper'>

2. Paste the following code just below the code, you searched for, in step 3.

<div id='container' style='position: relative;'>
<ul>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
</ul>
<div class='shutterAnimationHolder' style='width: 600px; height: 450px; display: none;'>
<div class='film' style='height: 15000px; width: 1000px; margin-left: -500px; top: -300px;'>
<canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/>
</div>
</div>
</div>

(Note: It is not necessary that you place the above code below those lines mentioned in step 3. You can place them anywhere in your template. If you end up with some layout issues or bugs, then leave a comment below.)

3. Replace "IMAGE URL" with the URL of your images - image dimensions shall be 600x450px. Save your template again.

4. If you wish to change the width and height of the images (600x450px), then you need to change the codes highlighted in blue mentioned at step 2.

CSS

1. Search for the following code in your template. 

]]></b:skin>

2. Add the following piece of code just above the line mentioned in step 1.

#container{
    width:600px;
    height:450px;
    margin:0 auto;
    border:5px solid #fff;
    overflow:hidden;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-bottom:5px;
}

#container ul{
    list-style:none;
    margin-top:0px;
}
.shutterAnimationHolder .film canvas{
    display: block;
    margin: 0 auto;
}
.shutterAnimationHolder .film{
    position:absolute;
    left:50%;
    top:0;
}
.shutterAnimationHolder{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    z-index:1000;
}

3. Save your template and we're done. 

Just in case you customized the image or in other words, followed the step 4 in HTML part, then change the codes highlighted in green mentioned at step 2. If not, just neglect this step and check out the stunning effect on your blog.

The above effect was tested to work perfectly fine on all the major browsers that include, not limited to, FF, Chrome, Opera and Safari. If you find the HTML part difficult to customize, then you may refer to the following text document for the coding that I used on the demo blog - Reference for Shutter Effect. Share your opinions via comments!

Click4more... 15 Comments

Cool Image Hover Effect On Blogger - Popout Details

I recently came across a cool image hover effect on a WordPress blog which made me to work out the codes for achieving a similar effect on blogger. The idea behind this effect is to display a short snippet/detail about the image on hover using only CSS. Many had already seen the demo on my test blog while those who did not, just take a look at the live demo by visiting the link below.

POPOUT DETAILS EFFECT ON BLOGGER - LIVE DEMO

Cool... Isn't it? Just follow the instructions given below to get a similar effect on your blog as well. Just create a back up in case something goes wrong. To do so, navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. That's it!

1. Once the back up is over, paste the following piece of code anywhere between the 'body' tags on your template - probably below <div id='content-wrapper'> (or) <div class='columns fauxcolumns'>.

<ul class="columns">
 <li>
  <a href="#"><img src="IMAGE URL" /></a>
    <div class="info">
      <h2>TITLE</h2>
      <p>DESCRIPTION</p>
    </div>
 </li>
</ul>

2. Replace '#' with the link you wish to point to and 'IMAGE URL' with the URL of your image, probably with the following dimensions - 220x200px. Similarly, replace 'TITLE' and "DESCRIPTION' with the title and description you wish to have on hover, respectively. Repeat the codes within 'ul' tags for adding multiple images.
You may download the reference code, which I used on the demo site, here - Reference.
3. Let's style the above HTML with some CSS. To do so, search for the following code on your template.

]]></b:skin>

4. Paste the following piece of code just above the line mentioned in step 3.

ul.columns {
width: 480px;
list-style: none;
padding:0px;
margin-left:10px;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin-top:15px;
margin-left:7px;
margin-right:7px;
margin-bottom:7px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}
ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Georgia,"Times New Roman",Times,serif;
text-align:justify;
}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
font-family:Georgia,"Times New Roman",Times,serif;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

5. You need not modify anything the codes above except for the margin positions to best fit your blog. That's it! Save your template and take a look at the cool effect on your blog.

The above effect worked successfully on the major browsers which includes, but not limited to, IE, Firefox, Chrome, Opera and Safari. So, give them a shot on your blog and let us know whether you enjoyed this cool effect via comments! See you soon with another interesting tutorial. You may check out the other image hover effect here - Shadow Effect.

Inspiration for the above article - Sohtanaka.

Click4more... 4 Comments

Link Proz – Your One Stop Solution for SEO

Yesterday night, I sat down before my pc to look out for SEO solutions. I googled a bit and I could find this excellent site called 'LinkProz.com'. I just browsed their website to check out the services they offer. Surprisingly, I found that they offer possibly all kinds of solution starting from simple SEO consultation to a complete website/template design.

Why choose LinkProz.com? Pretty simple! They provide all that you need as a webmaster – be an amateur or a professional. You get all the stuffs you need at one place. I like the sleek but simple design and the phrase which says “There isn’t a job we can’t handle or a keyword we can’t nail”. You can very well understand the level of confidence that they have on their solutions. Their testimonials speak well than what I do.

Moreover, you get immediate feedback for the queries you post via their contact form – better client support. This is very important as far as clients are concerned. I hit their contact form regarding a quick SEO consultation for my very own blog www.newbloggingtip.com. I received a reply in not more than 8 hours with a small snippet about where I go wrong as far as SEO is concerned – neither I nor you can expect a complete SEO solution for a free quote:)

I would like to enlist few features about the services that offer.

1. Link Building: This is rather aimed at people who wish to improve their Google PageRank. They do guarantee genuine links from sites related to your niche than just links from spam comments/sites.


2. SEO Consultation & SEO Site Analysis: SEO consultants from Link Proz basically concentrate more on keywords to generate better revenue from your blog. However, you'll get to know about your strength and weakness when you prefer a SEO site analysis for your website.


3. Keyword Research: As mentioned earlier, a complete analysis about the common keywords for your domain shall be listed and they'll start working on what you prefer and achieve. I guess they do guarantee an increase in your PR.


4. Web Design: Ah! You know what they'll offer here. Simple and sleek web designs to enhance your blog. I'm sure they'll design your thoughts into reality because I see good testimonials & portfolio up there.


5. Optimized Content Creation: By choosing this option, you'll simply hire an author who'll generate quality content for your blog/web site. I'm not sure how many would choose this. Anyway, I just listed the options available. 

To read about the complete list of services, in detail, visit this page - Link Proz Services.

Well, I just wanted to share this site for those who need assistance with SEO. To be frank, I'm not an expertise when it comes to SEO. So, you may refer to experts @ Link Proz for better guidance. The pricing shall be the only factor which one should consider as far as this site is concerned but their service is highly appreciated. Anyway, share your opinions about Link Proz via comments!

Click4more... 2 Comments

Changing Backgrounds Dynamically On Blogger Using Jquery

I've been quite busy over the past few weeks with my clients and articles on SML. Today, I found sometime to work out a simple trick based on Jquery - Changing Backgrounds Dynamically. Well, I hope you read the article about "Adaptable View On Blogger" wherein, I mentioned we can tweak the design of our blog dynamically. We'll be using the same concept in this article as well...

I don't want to take too much of your time. So, I'll just explain the basics about the working of the script. The script will add or remove classes to the body element based on what list item the user clicks on. That's it. So, take a look at the demo of this simple effect by visting the link below and we'll get started...

CHANGING BG COLOR DYNAMICALLY - LIVE DEMO

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

.bg1 { background: url(BG IMAGE URL) repeat-x; background-color: #6c0000; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

        $(&quot;li.one&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&#39;bg2 , bg3&#39;).addClass(&quot;bg1&quot;);
    });

    $(&quot;li.two&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg3&quot;).addClass(&quot;bg2&quot;);
    });

    $(&quot;li.three&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg2&quot;).addClass(&quot;bg3&quot;);
    });

});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.

5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper.

<ul>
<li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>

6. That's it! Save your template or publish the post. 

Just hit the text of your choice - Red or Brown or Blue and enjoy the changing environment on your blog. You may change from the default colors (Red, Brown, Blue) to the ones you like, by just altering the color codes (highlighted in blue) mentioned in step 2. In fact, you can alter between your background images. To do so, just replace "BG IMAGE URL" with the URL of your background image.

I hope, I kept the logic as well as the post simple. The above code was tested to work fine on all major browsers including, but not limited to, IE, FF, Opera, Chrome and Safari. If you find any difficulties in installing the above effect, then leave a comment or ping me on gtalk. I'll help you out! Do share your opinions about the article via comments:)

Click4more... 17 Comments