Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Adding Customized Widgets to Blogger

| 0 comments
Blogger Widgets are really important to make the good-looking weblog. We have got shared several custom Blogger Widgets prior to this this also post is among st the sequel regarding widgets. Using Custom widgets can attract visitors to your blog thereby your weblog could recognition. This custom made widget incorporate social icons and will also be able to obtain connect upon social sites with your viewers. Myspace, Twitter as well as your RSS nourish are awesomely customized for your Blogger weblog. While Facebook Like Box had been shared prior to.

Adding this Widget To Blogger


  • Copy the following code.

<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="Your Facebook Page URL Here" target="blank"> <abbr title="Follow us at Facebook"><img src="http://3.bp.blogspot.com/-EilPD5HKCxA/UfQTefP7MAI/AAAAAAAAI-U/wnZNYbtV2p0/s1600/fb.png" width="118px" height="101px"/> </abbr> </a> <a href="Your RSS Feed URL Here" target="blank"> <abbr title="Subscribe Our Feeds"><img src="http://3.bp.blogspot.com/-MUrgLlCZ948/UfQTeTmuiLI/AAAAAAAAI-Y/lM2GtitnRbM/s1600/Rss.png" width="118px" height="101px"/> </abbr> </a><a href="Your Twitter Profile URL Here" target="blank"> <abbr title="Follow Us on Twitter"><img src="http://4.bp.blogspot.com/-upgOlPiiwsU/UfQTe6nUIbI/AAAAAAAAI-g/lx-ld1uL_7A/s1600/twittor.png" width="118px" height="101px"/> </abbr> </a> </marquee></div>

  • Go to Dashboard>Blog Layout
  • Add an HTML/JAVA Script Gadget
  • Paste the copied code and add your profile URLs.

You have done it successfully.

Stylish Popular Post Widget With Round Thumbnail For the Blogger.

| 35 comments
Buddy, this post about how to customize your popular post widget more attractive with round thumbnail. That popular post widget is usually more beautiful as compared to different. while computer mouse button are positioned, it shows a thin solid blue border. The popular post widget fully customized with CSS code. If you want this kind of widget, and you can add the item inside your blogger. Simply comply with underneath instruction, along with add the item.

How to add Popular Post Widget in Blogger Blogs:

Now Go to Blogger Dashboard
  • Go to >> Layout option
  • Click on  >> Add a Gadget
  • Add Popular Posts Widget from given list.
  • Select "display up to 5 posts" and check image thumbnail and snippet. 
  • Now Save the widget 
  • Then Go to Template Option. 
  • Click on Edit HTML . 
  • Find (CTRL+F) ]]></b:skin> tag. 
  • Copy and paste below CSS code above ]]></b:skin> tag. 
/*--- Customize Popular Posts Widget Design By Malik Asif Ali --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif) no-repeat scroll 5px 10px;list-style-type: none;margin:0 0 5px 0px;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px; }
.popular-posts ul li:hover { border:1px solid #6BB5FF; }
.popular-posts ul li a:hover { text-decoration:none; }
.popular-posts .item-thumbnail img { webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } 
  • Save your Template. Click on Preview.

ADD SOCIAL BOOKMARKING MOVING TRUCKS IN BLOGGER

| 122 comments
ADD SOCIAL BOOKMARKING MOVING TRUCKS IN BLOGGER

  • Login to Blogger > Dashborad 
  • Click on Drop Down Menu and select Layout 
  • Add a HTML/JavaScript Gadget 
  • Paste below code in it. 
<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="www.facebook.com/pages/Username" target="blank"> <abbr title="Follow us at Facebook"><img src="http://3.bp.blogspot.com/-5QIHreJnNjs/UVfcvUGusHI/AAAAAAAAFJY/hU52X7HJMnw/s1600/Social-Truck_fb2.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/Username" target="blank"> <abbr title="Subscribe Our Feeds"><img src="http://4.bp.blogspot.com/-RLtBIrJOZII/UVfcwigIc2I/AAAAAAAAFJg/uKKtDZGlwOk/s1600/Social-Truck_rss.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/Username" target="blank"> <abbr title="Follow Us on Twitter"><img src="http://3.bp.blogspot.com/-HZV2Agt3tLI/UVfcxJitLuI/AAAAAAAAFJo/yuuhQf1IQ_8/s1600/Social-Truck_twi.png" width="120px" height="100px"/> </abbr> </a> </marquee></div>
  • Save your Widget. 
Replace it Username with your Facebook Username.
Replace it Username with your Feed Burner Username.
Replace it Username with your Twitter Username.

How To Add Meta Tags For Better SEO For Blogger

| 7 comments

Meta Tags For Blogger For SEO:

Meta tags have prime cooperativeness in indexing your site/blog to search engines. Blogger furnishes statics pages that are bad for SEO. To get more traffic we need to make pages Search Engines friendly.
Your website/blog can never be solid if your website links are not demonstrating in Search Engines. Meta tags are HTML based  They reflect the Description, keywords and other terms to Search engines. It is critical for bloggers to include meta tags for better performance.

Adding Meta Tags In Blogger:

  • AGo To Blogger.com >> Your Blog >> Template Now Backup your template. 
  • Then select Edit HTML >> Proceed Search for <head> and just after it paste the following code 
<!--------------------- SEO SECTION STARTS ---------------------> <b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title></b:if> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <meta content='noindex,noarchive' name='robots'/> </b:if>
All Done: Now everything is finished just go a head and Save your Template by pressing Save template button.

ADD FACEBOOK COMMENT BOX UNDER ALL BLOGGER POSTS

| 4 comments
Today I will Show You How Add Facebook Comment Box Under All Post In 1 Minute No Long Method Its Very Simple Stay Tune And Subscribe Us By Email
                                         
Always Back Up Your Template Before Doing Any thing With Template

  • Go to your Blogger Dashboard>>Template>>Edit Html
  • Find following code in your template.

<body>

  • Paste Following Code After <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

  • Then Find 

<data:post.body/>

  • Paste Following Code After it

<div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml'/> <fb:comments expr:href='data:post.url' num_posts='5' width='500'/> <script/> <div/>

  • Save Your Template And You Are Done Now You Can See Facebook Comment Box Under Your Blogger Posts.

How To Change Title Of 404 Error Page in Blogger

| 0 comments

How To Change Title Of 404 Error Page in Blogger

Title of blog is most important for SEO, so we must chose best titles and heading. 404 Error page is a part of blogs and you also see there. Most of new blogger have not any proper title in 404 error page.
Don’t worry about this because we have move toward with solution. I've arranged the image and also add it below which you can see to resolve this issue by using easy steps.

  • Go To Blogger >> Template >> Edit HTML
  • Find  Below code in blogger template.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

  • Replace full Code with below 404 Title Customized Code.

<title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <data:blog.pageName/> | <data:blog.title/>
          <b:else/>
          404 page error | <data:blog.title/>
        </b:if>
      </b:if>
</title>

  • Changes "404 page error" with your 404 page title.
  • Save Your templates.
  • That's it.

Final Words:
So friends, that it all how we can change title of “404 error page” in blogger and every person can modify it for more professional blog. If you have any difficulty about this or you may best information related this post, please tell me in comments. Also share this post with your friends. Happy Blogging.

How to Display Author Image in Google Search Results

| 0 comments
Correct away time all the bloggers have an attention to make their profile picture in Google search results. Because it will increase huge traffic to their blogs / website and make the readers or visitors to search your Blog or Website easy.
Suggest Posts: How To Impress Your Blog Readers?
                        How to Optimize Your Posts for Optimization Search Engine


How to Display Author Image in Google Search Results

It’s very easy to Display Author Image in Google Search Results; you can only verify authorship by following below steps and other work Google for you.

Create Create Google plus profile (if you haven’t already)

  • First add underneath Google+ Profile link as HTML code any were on website or blog.
For code: Clicks here
  • Modify https://plus.google.com/GooglePlusID Google+ Profile with your Google+ Profile link.
  • Save it your work whole on website / blog.
  • Now walk off to your Google+ Profile and click the About page scroll downward here you will see Links click Edit and add your website / blog homepage url, same as underneath.

  • Add your homepage url on Contributor to as above Blogger Learned present only.
Now go to Google Rich Snippet Testing Tool. and suggest your homepage link in the search box and hit preview as shown lower.

You will see Verified: Authorship markup is confirmed for this page and that reveal to you have sufficiently actualized this feature for your web diary.
Final words:
It will take almost 48 hours for this selection to work, so please embrace up. It would be perfect if you use comment box to ask for as to your technique and inform your considerable thought.

How To Add Contact Form With Style & Install In A Static Page

| 0 comments
Contact forms are one of the most important widget of all website. They are what provide it a humanitarian touch. Approximately every blogs or website has one. But you'd be amazed at how only a few people really know how to build a contact form. Because they're so central, we figured it'd be a pleasant idea to educate beginners how to make them, in its place of relying on any third-part to do the work for them.
So if you recognize how to write the gain for a contact form, you're ready to go on!

HOW TO ADD CONTACT FORM TO BLOGGER

To insert it to your blog, now select the Layout tab and then click on Add a gadget in the section in the sidebar. Then, select the More Gadgets tab and add the Contact Form gadget.

Style Contact Form

As the background is see-through, the form will add well, aesthetically speaking, but all the same it is easy to adjust using Style Sheets (CSS) to the suitable selectors. Here's an example:
 /* Contact Form Style */
.contact-form-widget {
width: 450px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 21%;
max-width: 21%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

  • Go to Template > Edit HTML, 
  • Find <b:skin>...</b:skin> and paste the code just over ]]></b:skin>

How To Add Contact Form In A Static Page

Go to Pages and paste the below code into a new blank page with the title you want:
 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form></div></div></div></b:includable></b:widget>
That's it all! If you have any questions or comments please post below.

How to Create Navigation Menu In Blogspot or Wordpress

| 1 comments
Nowadays I will give details how to make the "Navigation Menu" extremely cool with transition special effects. Transition effect is an upshot where we set the time changes in the css tersebut.Berikut demo of “Navigation Menu “is.

How to Create Navigation Menu In Blogspot or Wordpress

  • Go To Blogger > Design > Edit HTML
  • Back up save template
  • Search (Ctrl+F) for ]]></b:skin>
You just add the following code over the code]]> </ b: skin>

/*URL:http://bloggerlearned.blogspot.com/ */
@import url(http://fonts.googleapis.com/css?family=Dosis:400,700);
.navbar {
font-family: 'Dosis', sans-serif;
position:relative;
display:table;
float:none;
list-style-type:none;
padding:0;
margin:20px auto 250px auto;
}
.navbar:before {
position:absolute;
display:block;
content: "";
z-index:-1;
width:100%;
height:18px;
bottom:-9px;
left:2px;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
opacity:.4;
}
.navbar:after {
position:absolute;
display:block;
content: "";
z-index:-1;
width:100%;
height:100%;
top:0;
left:0;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.navbar > li {
position:relative;
float:left;
display:inline-block;
list-style-type:none;
text-align:center;
margin:0;
border-left:0;
border:1px solid rgba(0,0,0,0.5);
line-height:35px;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.navbar.color1 > li {
background:#ea7900;
}
.navbar.color2 > li {
background:#336277;
}
.navbar.color3 > li {
background:#3e781b;
}
.navbar.color4 > li {
background:#ad2259;
}
.navbar.color5 > li {
background:#b20a22;
}
.navbar > li:before {
position:absolute;
display:block;
content: "";
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
background: -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
background: linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );
}
.navbar > li:after {
position:absolute;
display:block;
content:"";
width:100%;
height:100%;
top:0;
left:0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");
}
.navbar > li.drpdown a > span{
margin-right:30px;
}
.navbar > li.drpdown > a:after {
position:absolute;
content: "\0025bc";
z-index:1;
font-size:8px;
top:0;
right:10px;
color:#fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
filter: dropshadow(color=#000, offx=0, offy=-1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.navbar > li.drpdown a:hover:after,.navbar > li a:hover {
color:#ccc;
}
.navbar > li.drpdown:hover .drpcontent {
display:block;
}
.navbar > li:first-child {
border-left:1px solid #1a1a1a;
}
.navbar > li:last-child {
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.navbar > li > a {
position:relative;
display:block;
width:100%;
text-decoration:none;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
filter: dropshadow(color=#000, offx=0, offy=-1);
z-index:4;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.navbar > li:hover {
-webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
}
.navbar > li > a > span {
position:relative;
font-weight:bold;
margin:0 15px 0 0;
}
.navbar > li .drpcontent {
position:absolute;
display:none;
margin:0;
padding:20px 0 0 0;
z-index:5;
top:36px;
min-width:200%;
float:none;
list-style-type:none;
border:1px solid #737373;
border-top:0;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background: rgb(249,249,249);
background: -moz-linear-gradient(-45deg, rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));
background: -webkit-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
background: -o-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
background: linear-gradient(135deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-ms-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
.navbar > li:not(:last-of-type) .drpcontent {
left:-1px;
}
.navbar > li:last-child .drpcontent {
right: -1px;
}
.drpcontent li {
position:relative;
text-align:left;
border-bottom:1px solid rgba(0, 0, 0, 0.2);
font-size:12px;
line-height:35px;
height:35px;
font-weight:bold;
-webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
overflow:hidden;
}
.drpcontent li:before {
position:absolute;
display:block;
content: "";
width:100%;
height:100%;
top:-100%;
left:0;
background: #cecece;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
opacity:0;
}
.drpcontent li:after {
position:absolute;
display:block;
content: "\0025b6";
height:20px;
width:20px;
top:0;
left:6px;
font-size:8px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.drpcontent li:hover:before {
top:0;
opacity:0.8;
}
.drpcontent li:hover:after {
color:#fff;
left:12px;
}
.drpcontent li:last-child:hover:before {
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
}
.drpcontent li a {
display:block;
height:100%;
width:100%;
position:relative;
color:#000;
text-decoration:none;
width:100%;
padding-left:20px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.drpcontent li:hover a{
color:#fff;
padding-left:26px;
}
.drpcontent li:first-child {
border-top:1px solid #a6a6a6;
}
.drpcontent li:last-child {
border:0;
-webkit-box-shadow:none;
box-shadow:none;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
}
.icon20{
position:relative;
float:left;
display:block;
width:20px;
height:20px;
margin:6px 8px 0 8px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.icon20.home {background-position:0 0;}
.icon20.upload {background-position:-20px 0;}
.icon20.download {background-position:-40px 0;}
.icon20.comments {background-position:-60px 0;}
.icon20.theme {background-position:-80px 0;}
.icon20.login {background-position:-100px 0;}
.navbar > li:hover .icon20.home {background-position:0 -20px;}
.navbar > li:hover .icon20.upload {background-position:-20px -20px;}
.navbar > li:hover .icon20.download {background-position:-40px -20px;}
.navbar > li:hover .icon20.comments {background-position:-60px -20px;}
.navbar > li:hover .icon20.theme {background-position:-80px -20px;}
.navbar > li:hover .icon20.login {background-position:-100px -20px;}

  • Save templates
You can add this code to widget HTML / Javascript.

<ul class="navbar color1">
<li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li>
<li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li>
<li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li>
<li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
<ul class="drpcontent">
<li><a href="#">Latest Posts</a></li>
<li><a href="#">Popular Posts</a></li>
<li><a href="#">Private Posts</a></li>
</ul></li>
<li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li>
<li class="drpdown"><a href="http://bloggerlearned.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a>
<ul class="drpcontent" id="themeselect">
<li><a href="#" data-color="color1">Orange</a></li>
<li><a href="#" data-color="color2">Marine</a></li>
<li><a href="#" data-color="color3">Green</a></li>
<li><a href="#" data-color="color4">Purple</a></li>
<li><a href="#" data-color="color5">Red</a></li>
</ul></li></ul>

Change # with the URL and change the blue text with the name you want the navigation menu.
Final Words: 
If at this point is a fault on your blog in the navbar. Please change the text that read navbar on CSS3 code on top of. 

Character Count inside a TEXTAREA

| 0 comments
Calculate and show the number of characters inside a TEXTAREA with this script. helpful, for example, in helping your visitors manually stay their input distance end to end in check!
Count your characters:
Copy and paste your words below to find out your correct character count. (Blank places are count as characters).


Number of Characters:

Sign up to our newsletter!

Love to read our articles? Sign up now to get fresh content about blogger, SEO, make money, templates directly to your inbox.