Posts

Showing posts with the label Widgets

How To Add Stylish Floating Facebook Like Box Widget In Blogger

Image
Today we will learn how to add facebook like box to blogger blog with  a distinctive view, wonderful and attractive format, where the  facebook like box  is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog,follow these two simple steps: STEP 1 1.   Go to  Blogger Dashboard   -->  Template 2.   Please! download  a copy of your template 3.   Now click on  Edit HTML 4.   Use  Ctrl+F  to find  </head> 5.   Then copy and paste just above/before it, this code: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> 6. Save your template. STEP 2 1.    Now go to Layout --> click on " Add a gadget ". 2.    Select " html/java script " and add the code given below and click save.    <script type="text/javascript"> /*<![C...

How to Add Smileys/Emoticons in Blogger Comments

Image
The Smileys/Emoticons way to give the visitors a lot of fun and confidence to your blog,It is known that these smileys used in social websites as Facebook. Demo To do this just follow the steps: 1.  Go to Blogger Dashboard   --> Template 2.  Please! download  a copy of your template 3.  Now click on Edit HTML 4.  Use Ctrl+F  to find  </body> 5.  Then copy and paste just  above/before it, this code: <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function () {emoticonx({ emoRange:"#comments p, div.emoWrap", putEmoAbove:"iframe#comment-editor", topText:"Click to see the code!", emoMessage:"To insert emoticon you must added at least one space before the code." }) }); //]]> </script> <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/> </b:if> Note:  You can change...

How to Create Scroll On Blog Archive

Image
Maybe my friend feel uncomfortable with the blog archives too long so it takes a lot of space on the sidebar of the blog and also felt that the display seem less neat ... Well on this occasion, I would like to explain how to spruce up the Blog Archive by making a scroll so that it takes up less space and seem neater .. OK, just follow these simple steps: 1.  Go to  Blogger Dashboard  >  Template 2.  Download  a copy of your template 3.  Now click on  Edit HTML 4.  Use  Ctrl +  F to find  ]]></b:skin>  and paste the following code above/before it. #BlogArchive1 .widget-content{height: 200 px; width:auto;overflow:auto;} Note:  Edit the " height: 200 px " parameter to fit your personal needs.   5.  Click on  Save  the  template. Enjoy and happy blogging!

How to Add Blogger`s Official Contact Form to Your Blog

Image
Blogger launches officially This is a wonderful very important gadget for any blogger,If your blog visitors need any help or suggestion regarding your posts or articles, they will try to contact with you. Demo How to Add Contact Form To Your Blog Step 1 1.  Login to your  blogger dashboard -->   Layout --> 'Add A Gadget' 2. Now click on  More Gadget -->  Select Contact Form 3. Click   save . Step 2 1.  Login to your  blogger dashboard -->   Pages 2.  Now click on  New Page -->  Select  Blank Page 3.   Now Click on HTML an Paste below code in it. <div class='form'>  <!-- Custom Contact Form By WG Starts --> <form name='contact-form'> <!-- Name Field --> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' ...

How to Add "Change Text Size And Font Face Gadget" For Blogger

Image
How to Add Text And Font Gadget To Your Blog 1.  Login to your  blogger dashboard -->   Layout --> 'Add A Gadget' -->  Choose   HTML/ JavaScript 2.   Copy and paste the code below into the  HTML/ JavaScript  gadget  : <script> function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } } function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } </script> <form id="forma" name="selecter2" method="POST"> <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="sele...

How to Add Cool Chat Box to Blogger

Image
Chatwee is a new chat service, unlike other Chatwee is added as a toolbar and chat deployed on the right side (you can switch to the left), showing the flag next to the user depending on the country where connect. Its design is attractive, however the functions are very limited because you can not choose a nickname unless you register, and so far I still do not know how to change the avatar once you're registered. But yes, it has the advantage of allowing users to share files such as PDF, music and photos. Once you register you'll have the code you can use on your blog, you can also customize the colors of it. It is recommended to have a script that prevents the redirection of countries, since the chat is only displayed in the URL you have registered, so if someone from another country comes in and adds another extension is not shown. How to Add Cool Chat Box to Blogger? Step 1 1- Go to the following link:   chatwee 2- And do like the image 3-   After creating your chatwee a...

How To Add a Clock To Your Blogger Blog

Image
How To Add a Clock To Your Blogger Blog 1.  Login to your  blogger dashboard -->   Layout --> 'Add A Gadget' 2.  Choose  Html/Javascript  Gadget and add the one of code given below :   <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"> <embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150"  wmode="transparent"> </embed></object> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"> <embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150"  wmode="transparent"> </embed></object> <object><param name="movie" value="http://flash-c...

How To Create "Scroll to Top" Button To Blogger

Image
How To Create "Scroll to Top" Button To Blogger? 1.  Go to  Blogger Dashboard  >  Template 2.  Download  a copy of your template 3.  Click on  Edit HTML 4.  Hit  Proceed  button 5.  Find below code in your template ]]></b:skin> 6. Now add below CSS code before ]]></b:skin>  tag . /* to top */ #toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; } 7. Now add below code before </body>  tag: <a href="#" id="toTop">^ Scroll to Top</a> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspo...

How To Add Popular Post Widget For Blogger

Image
How To  Add Popular Post Widget To Blogger 1.  Login to your  blogger dashboard -->   Layout --> 'Add A Gadget' 2.  Choose  Html/Javascript  Gadget and paste the following code into the area provided : <script type="text/javascript"> function pipeCallback(obj) { document.write('<ol style="text-transform: capitalize;">'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2F YOURBLOG .blogspot.com&num= 10 " type="text/javascript"></script> Note : Rememb...