HTML and CSS Previewer for Blogger

Please use our HTML and CSS Previer/Generator to view your applications instantly.
Step 1. Insert your CSS code between the <style>......</style> and HTML after it <style> </style>......... as shown in the table below.
Step 2. Finally, Click the Preview button to see your css/html application.
Step 3. Click the Clear button to add another set of  CSS and HTML, then repeat the steps/procedures above (this step is optional).

HTML Editor and CSS Generator




How To Add Responsive Slider Widget For Blogger Blog

Adding responsive slider widget for your Blogger blog is necesssary especially if you want to have a better user experience. They can use the silder button (next-previous) to select the image with a corresponding post that link on it. This slider is easy to use and to customize so that you can adjust it according to your likeness.
add responsive image slider for blogger

Also read:

Add Responsive Slider Widget For Blogger Blog


Step 1. Go to your Blogger Dashboard >> Layout >> Add A Gadget, then choose HTML/JavaScript
Step 2. Paste the code below inside it.

<style type='text/css'>
.btt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
.rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
ul.rslides:hover .rslides_nav {  display: block;  }
.prev {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
</style>
<script type='text/javascript'>
/*<![CDATA[*/
  $(function() {
    $(".rslides").responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 3000,
      nav: true,
      pause: true,
      prevText: "Previous",
      nextText: "Next",
      navContainer: "ul.rslides",
    });
  });
/*]]>*/</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'>
</script>
<div class="btt-slider">
<ul class="rslides">
<li><a href="http://bloggingtipsandtrix.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

Note: If your blog already have a jQuery Plugin then remove the highlighted code.
(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

Customization:


Replace http://bloggingtipsandtrix.blogspot.com/ with your  own link.
Then Replace http://img-url.com/ with the image link you want to show in the slider. Click here how to get the image link.
Step 3. Save the widget and you're done buddies. See now  your blog with its responsive image slider.( =D
Hope you learned something with this tutorial and Stay tuned with our coming posts!
Reference: btnt

Add Multi Menu Tabs Widget in Blogger Sidebar

Hello guys, I wanna share you a trick about adding Multi Menu Tabs Widget in  your Blogger sidebar. This widget looks similar to Wordpress blog and therefore it is more good looking. Some features here are:
  • You can add as many widgets as you want inside a single tab/line.

  • Beautiful and highly customizable CSS.

  • Jquery effects are added this time to the tab views.
add wordprees multitab widget in blogger

Without much word to say, let us now learn how to add this professional looking tab widget into your Blogger sidebar . Don't worry dear because we will make this tutorial easy and simple to install.

How To Add this Multi Tabbed Widget To Blogger?


We will divide tutorial  into   three easy parts which are:

  • Adding  JQuery and JavaScript to your Blogger templates

  • Adding the CSS

  • Adding the HTML

Adding the JQuery and JavaScript to your Blogger Templates


Step 1. Go To Blogger >> Design >> Edit HTML ( Backup your template for reference)
Step 2. Search for
]]></b:skin>
Step 3. Just below or after that code in (Step 2) paste this code
Step 4. Save your template and your halfway done!

Adding the CSS


Step 1.  Inside your template, again  search for  the code below
]]></b:skin>
Step 2. Just above it paste the code below,


/*---- Multi Tab Widget for Sidebar  by BTT ----*/

.BTT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.BTT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.BTT-tabs li:first-child{margin:0}
.BTT-tabs li a{color:#fff;background:#158aee;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;border-radius:5px;-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 2px 6px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;}
.BTT-tabs li a:hover,.BTT-tabs li a.BTT-tabs-current{background:#8168FD;color:#fff;text-decoration:none}
.BTT-tabs-content{border: 1px dotted #ddd}
.BTT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Adding the HTML


Step 1.  Search/look for  the code below
<div id='sidebar-wrapper'>

or
<div class='column-right-inner'>

Step 2. Just below that code in step 1. paste the code below,

<div class='BTT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                $(&quot;ul.BTT-tabs-widget-BTT-id li:first a&quot;).addClass(&quot;BTT-tabs-current&quot;).show();
                $(&quot;.BTT-tabs-content-widget-BTT-id:first&quot;).show();
                $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).click(function() {
                    $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).removeClass(&quot;BTT-tabs-current a&quot;);
                    $(this).addClass(&quot;BTT-tabs-current&quot;);
                    $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='BTT-tabs BTT-tabs-widget-BTT-id'>
<li><a href='#widget-BTT-id1'>About</a></li>
<li><a href='#widget-BTT-id2'>Blog Archive</a></li>
<li><a href='#widget-BTT-id3'>Follow by Email</a></li>
</ul>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                    
</div>
<div style='clear:both;'/>                      
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                      
</div>
                     
<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<div style='clear:both;'/>
You can replace About Me, Blog Archive and Follow by Email with your Widget Titles that you will be adding.

Step 3.  Now Go To Page Elements and you will see something like the screenshot below,
add multitab widget ti blogger sidebar


Let me know how you find it?

Hope this tutorial help you in some other ways. Peace and blessings buddies =D
Credits from: MBT


Basic Tips to Avoid Adsense Account Banned (Updated)

Google Adsense  is the king of  Contextual Ad Network around the web and the best in this online business because of its highest CPC Rates, quality of  ad servings, efficient support system, wired transfer of payment method and many other quality features.
Maintaining a good Adsense standing is easy if you had read its terms and conditions but if you ignore it or intentioanally not to read it because they are to lengthy then you are account is in danger, since they are  too strict in terms of  their publishers to oblige its Terms of Services which can cause anyone Adsense Account disabled.
tips to avoid adsense violation

In this tutorial, I will share to you how to make your Adsense Account in good standing always in order to avoid  mistakes and continue receiving blessing from them.

Also Read:
How to Protect Adsense Account Against Illegal Activities

Basic Tips (DON'Ts) to Avoid Adsense TOS Violation



1. Using Incorrect Labels


One way of  the tricks which is being practiced by lot of publishers is through showing labels  above Adsense ad like “click here to download”, “click below to show more”, click to see hotties”. All of these lines  were not approved  by the Adsense Team. It is very clear  in  TOS that Publishers are only allowed to use “Sponsored” and “Advertisement” as Labels. Any other Heading Lines for Adsense ad will be treated as a way to induce more (invalid) clicks from visitors, and this  is strictly not allowed by Adsense.

2. Invalid Click Activity


The most common practiced to get your account disabled/banned from Adsense. Many Newbie Publishers who can't wait to receive huge traffic to their blog tend to click their own  Ads from different computers like from an internet cafe or request somebody to do so from  different IP Address. But Google Adsense has a very advanced technology which can detect any invalid activity easily.

3. Alteration of the Ad Code


If your Adsense application will be approved by them, they will provide you as publisher a unique ad code with Pub-id and ad-slot. They will also instruct you not to alter the ad code in any case. Doing so will make your account banned.

4. Sudden Rise in CTR


A sudden Rise in CTR (click through rate) can cause Adsense Team to watch  your account  and this practiced will cause you to be suspended and worst if you will be banned of putting adsense ad to your blog.  Let us say, your CTR  for the last 3months is about 3% to 5% , but suddenly one day CTR Rises to 10% and if it  will  slow down suddenly for five to ten  days then there is something wrong with your traffic.

5. Showing Ads on Unsupported Languages Blogs


Adsense Support only  allows publishers to put Adsense ad  on their approved selective languages. Therefore if your blog contains any of the unsupportive languages, then, remove it (Adsense ad) or else, they will ban your Adsense Account.

6. Buying Traffic


Adsense never allows putting Ads on pages who  got a lot of paid traffic.

7. Linking your Blog to Bad Standing Sites


If your blog  is link to bad websites promoting any illegal material mentioned below then, Adsense will not serve Ads on your blog. Perhaps they will suspend your account  for such action. Always  do the right thing with Adsense in order not to be suspended or banned.

List of prohibited sites which are not allowed by Adsense to show their ads. All of the below listed is a BIG NO to Google Adsense:

1. Copyrighted or Illegal Material
2. Adult, Porn Content
3. Selling Alcohol, tobacco or any other related materials
4. Distribution of Illegal Drugs
5. Hacking or Cracking content
6. Hate speech Content
7. Selling of Weapons


8. Placing Ads too Close with Images


Inlining Adsense ad to your blog images is one way to increase clicks to the ads because  visitors can't distinguish between images and ads especially if they are just a mere web visitors. There were many Adsense  account being disabled due to this reason, and so  publishers started running away from this trick to avoid account cancellation.

9. Similar Contextual Advertisements


Always remember not to use any of advertisements that look similar to Adsense Ads. Only use those Ad networks, which complies with Adsense Policies like BuySellAds Infolinks, Technorati Media, etc.

10. Avoid Using Ads on Popups


Even now, some Adsense ad  publsihers still put ads that  show on Pop up or pop Under, hope they will not be banned because this trick is strickly not allowed in Adsense.

Read more on  Google Adsense Terms and Conditions for more Informations with their policies.
Once your account is banned no more other chance to gain back their confidence to you. If your site once violated their tos then try putting  Adsense alternatives to you site.

Final Words



I will  humbly advice every Adsense Publisher not  to wait for an Email from Adsense regarding your violation, just check your website or blog always  if it follows  their TOS.
Play Safe and Happy Blogging :-)

How to Add ZIP, RAR and Other Files to Blogger via Sites.Google.Com

Sharing files to  our users sometimes need other parties (sites) to host our files exclusively. Blogger doesn't support direct uploading of our files like rar, zip etc.. But don't worry because Google offers us  a tool called  Google Sites as part of their Google Apps productivity suite for anyone to be able to create a team-oriented site where multiple people can collaborate and share files. Here in this tutorial, I will share to you how to put zip,rar and other files to blogger through integrating sites.google.com. Please follow the simple steps below.
Click first the link to see a live demo.

Adding Files to Blogger and Make it Downloadable via Sites.Google.com



Assuming that this is your first time to visit site.google.com
Step 1. Go to sites.google.com >> Create
how to put rar and zip files to blogger

Step 2. Then put your site name as shown in the screenshot below (in yellow arrow) and type the captcha word  then hit the create site (in red arrow) or hit enter.
how to upload files to blogger
Step 3. You will be directed to your  site.google.com homepage. In your hompepage, click the new page icon and type your page name .Hit now the create button.  It is in this page where you are going to store your uploaded files.

store data to blogger through site.google.com

store files to blogger
Step 4. In that page start adding files by clicking the Add Files button.
upload files to site.google.com

Step 5. Now in order to make  this file downloadable to your Blogger site is you will get the link of it by putting your mouse cursor above the arrow pointing down and then right click and click the tab named Copy link address. See the screenshot below.

upload files to blogger
Step 6. Select a post in your blog where you want to put this URL. Adding this link is simply the same as you put  link in your Blogger post editor.
upload files to blogspot via site.google.com

Hope this tutorial answers your query buddies! If you have some questions and suggestions about how to upload files to Blogger  via site.google.com, simply leave it at our comment box.
Happy blogging and enjoy your day pal!

How to Add Hover Effect to Images in Posts

Hi guys!, Today, I will share you  a simple trick on how to add hover effect to all blog images by  adding/putting only a simple css to your template. I know images will add life to your posts and help your article to rank more in search engine result page. And to be more professional, we will add a soft touch on it.
Have your mouse cursor touch the image below for the live demo.
add hover effect on post images

Also Read:
How to Add Different Hover Effects on Blogger Images
How to Put Alt Tag In Blogger Images-Increase Traffic

Putting Hover Effect To All Post Images


Step 1. Go to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Look or find the code below
]]></b:skin>
Step 3. Just above or after the code above, paste the code below

.post-body img {
opacity:0.7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border:5px solid #ddd;
border-radius:10px;
background: #ffffff;
}
.post-body img:hover {
opacity:1.0;
}

Customization (Optional)


  • Change the opacity (0.7) of the image (in no hover effect state).  You can set it as "0" which is completely transparent and "1" is not tranparent.
  • Change the transition speed of the hover effect ( 0.2s). The bigger the value(.5, .6, .7, .8, .9, 1 and so on) the slower it will undergo the hover effect and the lower the value (.4, .3, .2, .1,) the fastest the hover effect is.
  • You can also edit the value of the border which are:
    5px- The bigger the value the bigger is the its border
    solid- There are different border styles  where you can choose here
    #ddd- This the color of your image border. You can select here other (hexadecimal) colors
  • And finally, change the opacity "opacity:1.0" of the opacity  of the post image when the mouse hover is applied on it.
Step 4. Save your template and Congratulations!

Your comments and suggestions are always welcome. Please drop it at our comment box below.
Peace! #: )