Show Mobile Navigation
Hacks
Showing posts with label Hacks. Show all posts
Showing posts with label Hacks. Show all posts

Show HTML and Other Codes With Code Language Name

Hemant Verma - 11:18 AM

Show HTML and Other Codes in blogger, Now this is new and updated widget with tutorials of blogger where you can show your codes in blogger with coding language name like jQuery, HTML, CSS, JavaScript etc, this tutorial is very simple and very highly customize with CSS Codes. It's a very Pro widget be'coz it include the orange bar where you can mention the code name with your site name. This widget is highly customize with many kinds of sensitive codes and made by the CSS only no javascript  is used in it, so you can easily install it and it works very awesome.






Installation of Widget

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

]]></b:skin>

  • Paste  below before ]]></b:skin> 
 
/*------Codes By www.widgetgenerators.blogspot.com------*/
pre{
position:relative;
background:#333;
color:white;
font-family:Monaco, Courier, MonoSpace;line-height:1.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:12px;padding:10px;margin:0 0 25px 0;overflow:auto}pre code{padding:0;color:white;background:#333;white-space:pre
}
pre[rel]{padding-top:40px}pre[rel]:after{content:attr(rel);position:absolute;top:0;background:#F3A01E;padding:4px;left:0;right:0;font-size:36px;line-height:0;color:white;font:bold 20px "myriad-pro-1",Verdana;
/*------Codes By www.widgetgenerators.blogspot.com------*/
 

  • Now Save Your Template.




How to Add it in post?

  • After adding the CSS part 
  • Go to Posting > Edit HTML
  • Paste below code where you want to show the HTML CSS and others codes.
<pre class="lang-js" rel="HTML Codes By www.widgetgenerators.blogspot.com"><code><p>Write Your Codes Here
</code></pre>


Make Changes....!

  • Replace it HTML Codes By www.widgetgenerators.blogspot.com with coding language and with your site URL.
  • Replace Write Your Codes Here it with your codes.
     


If Any Problem Comes, Ask in Comments



Add Pro Social Sharing Buttons in the Comment Form

Hemant Verma - 3:05 PM

Social Sharing Button is very popular in websites and blogger world, every one is making their own site and blog with sharing button and when we use it in our blog, we want to add these buttons to every post OR everywhere we want but here you will get how to add social sharing buttons on comment box in blogger.







Add Social Sharing Buttons in Comment Box

  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and Search the code shown below.

</head>

  • Paste below code just above </head>
  • Now find below code
<h4 id='comment-post-message'><data:postCommentMsg/>

  •  Paste below code after above codes.

<br/>
<span class='st_plusone_hcount' displayText='Google +1'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_sharethis_hcount' displayText='ShareThis'></span>

  • Save Your Template.



If Any Problem Comes, Ask in Comments


How to Post Images in Comment Box

Hemant Verma - 7:33 PM

As we last we give you that how to post youtube videos in the blogger comment box and similarly today you will get to know that HOW TO POST IMAGES IN BLOGGER COMMENT BOX and also with full access on comment box means you can post any kind of html tag like bold, underline and everything which you want to post, Now you get full access on blogger comment box, post anything which you want like a html page.







Installation Part

  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and Search the code shown below.

</body>

  • Paste below  code just before </body>
<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/>

  • Save Your Template.


How to Post Images and Other HTML Stuff in Comment Box

  • You can't enter the html codes directly in the comment box be'coz it will not recognize it. So you you have to convert it in the CB Codes Converter , CB means Comment Box Code Converter.




  • Write Your HTML Codes in it and Click Convert Button.
  • Copy that Converted code and Paste in the Blogger Comment box.


Some Examples that How to Post HTML Codes

  • If you want to post a Image in  the comment box.
  • Write a simple html code for Image posting like below


<img src="http://i28.tinypic.com/63yhk9.jpg">

  • Now Convert this code in CB Code Generator and it will look like this.

&#12296;img src="http://i28.tinypic.com/63yhk9.jpg"&#12297;

  • Now you are done, try this tutorial and have fun with blogger comment box hack.





If Any Problem Comes, Ask in Comments


Add Adsense in the Middle of the Post

Hemant Verma - 9:53 PM

Yesterday we give you a tutorial that how to add adsense codes in the left side, right side, or in center of the post which could increase your adsense CTR and but as from the many times some websites OR some blogs put their adsense in the middle of the posts, that is also increase the CTR of your adsense earning.


Read Also-   Adsense Unit Placing Pack

3. Add Adsense in the Middle of the Post



Add Adsense in the Middle of the Post

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

<data:post.body/> 

You will find two times <data:post.body/> code and You have to Replace it With the Second One

  • Now replace that code with below code.

<div expr:id='&quot;aim1&quot; + data:post.id'/>
<div style='clear:both; margin:10px 0'>

Your Adsense Code Here

</div>
<div expr:id='&quot;aim2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&quot;);if(r&gt;0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>


You Have to first Convert the Adsense Code into the Compartible Form



  • Now just replace Your Adsense Code Here with your Own Asense Codes.
  • Now Save Your template.




If Any Problem Comes, Ask in Comments





Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE

Hemant Verma - 10:39 PM

Placing the Google Adsense is very important for better CTR and it's very helpful to increase the rate of earning when you put your ads in the right places the then you have more change to earn more money from Google Adsense Program and not only from the Google Adsense but also from the alternatives of Adsense program.

They also give the same result like Google Adsense Program.



Read Also- Adsense Unit Placing Pack

2. Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE



Put Adsense Below Post Tile

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML
  • Press Ctrl + F and search the code shown below.

<data:post.body/>


  • Now Paste the Code Shown Below just above/before it


Show Adsense in Left Side

If you want to show your Google Adsense ad below post tile in blogger in the left side then copy the code shown below


<div style="float: left; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div>



Show Adsense in Right Side

If you want to show your Google Adsense ad below post tile in blogger in the right side then copy the code shown below

<div style="float: right; margin: 10px 0px 10px 10px;">
YOUR ADSENSE CODE HERE
</div>



Show Adsense in Center

If you want to show your Google Adsense ad below post tile in blogger in the center then copy the below code

<div style="text-align: center; margin: 10px 0 10px 0;">
YOUR ADSENSE CODE HERE
</div>


You Have to first Convert the Adsense Code into the Compartible Form




Make Changes....!


  • Replace YOUR ADSENSE CODE HERE with your converted code.



If Any Problem Comes, Ask in Comments


Social Bookmarking Buttons Beside Adsense Ad

Hemant Verma - 10:44 PM

As many times you probability see in pro websites OR in pro blogs that Adsense always look below the header and beside the adsense unit you will see some social bookmarking buttons.



This tutorial will allow to do this without any cost be'coz i have saw that some kinds people charge money for it but you can do this without any cost.



Read Also- Adsense Unit Placing Pack

1. Social Bookmarking Buttons Beside Adsense Ad



It includes two parts.

      1. Generate Code from Generator.
      2. Paste that Code in Template.



Installation 1st Part (Generate Codes)

  • Copy your 336 x 228 OR 300 x 250 adsense code.
  • Paste in below Generator.
  • Click on Generate button.




Installation 2nd Part (Paste Code in Templates)

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.  

 ]]></b:skin>

  • Copy that CSS codes from generators and Paste just above ]]></b:skin>
  • Now again Press Ctrl + F and search the code shown below. 
<data:post.body/>

  •  and, Copy that HTML codes from generators and Paste just above <data:post.body/>
  • Save Your Template say bingo and You are done.



If Any Problem Comes, Ask in Comments


How to Post YouTube Videos in Comments

Hemant Verma - 1:08 AM

We always post comments in blogs like u could say anything OR could post any link, images etc but you will wonder if i say you can easily post Youtube videos in blogger comments, I know this will be some where a kind of imagination but now this possible because of some tricks and hacks with google, youtube and blogger. This is very useful for those who ask queries and admins gives reply them but many times we have to give some video tutorial about that reply so admins OR visitors can send any video in the comments of blogger, so every can understand the major things related with query and answer.



Follow the Steps:

  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and Search the code shown below. 

    </head>

    • Paste Below Code Just Above </head>

      <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
      <script type='text/javascript'>
      //<![CDATA[
      // Embed youtube videos in Blogspot comments by MS-potilas 2012 and YABTB
      // See http://widgetgenerators.blogspot.com
      //
      // if oetag=0, just use video urls like:
      //           http://www.youtube.com/watch?v=12345678901
      //           surrounded by white space (video tag can be used, too)
      // if oetag=1 (for nerdy blogs?), use syntax:
      //           [video=http://www.youtube.com/watch?v=12345678901]
      // config:
      var oetag = 0;           // see above
      var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
      var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
      //
      function oe_loadscript(filename) {
        var scr=document.createElement('script');
        scr.setAttribute("type","text/javascript");
        scr.setAttribute("src",filename);
        document.getElementsByTagName("head")[0].appendChild(scr);
      }
      function oe_jumptohash() { // reposition to anchor
        window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
      }
      var oe_tid;
      var oe_elems = {};
      //
      function oembed_callback(response) {
        var resp = response;
        revurl = resp.url.split("").reverse().join("");
        html = oe_elems[response.callID].html();
        ee = $(resp.html);
        w = parseInt(ee.attr("width"));
        h = parseInt(ee.attr("height"));
        if(oelazy==1) { // convert to lazy load
          src = ee.attr("src");
          src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
          ee.attr("src", src);
          ee.attr("style", "vertical-align:top;");
          htm = $("<div/>").append(ee).html();
          htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
          resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
        }
        htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
        htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
        htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"');  // trick to preserve href="url"
        htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
        htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"');  // trick to preserve href="url"
        if(html != htmlx) {
          oe_elems[response.callID].html(htmlx);
          if(window.location.hash.replace(/^#/, "").length > 0) {
            if(oe_tid) window.clearTimeout(oe_tid);
            oe_tid = window.setTimeout("oe_jumptohash()", 1000);
          }
        }
      }
      function oembed_yt(url, width, callID) {
        src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
        if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
        oe_loadscript(src);
      }
      $(document).ready(function() {
       det=$('<div class="youtube-lazy-link-div" />');
       $("body").append(det);
       if(det.css("position")=="absolute") {
        if(oelazy != 0) oelazy=1;
       }
       else oelazy = 0;
       det.remove();
       window.setTimeout(function() {
        var callID=0;
        $(".comment-content,.comment-body,.comment-body-author").each(function() {
          html = " " + $(this).html() + " ";
          if(oetag)
            matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
          else
            matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
          if(matches && matches.length) {
            for(var i=0;i<matches.length;i++) {
              url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
              oe_elems[callID] = $(this);
              oembed_yt(url, $(this).width(), callID++);
            }
          }
        });
       }, 500);
      });
      //]]>
      </script>

    • Now Save Your Template.

    How to Post Videos in Comment....?

    • Go to Youtube 
    • Copy the link of Video and Paste in comment
    • Finally, Post Your Comment.
    • Say Bingo and Your Done.

    Google Hacked Doodles 2012 for Blogger

    Hemant Verma - 4:33 PM

    Google world's most popular search engine supports to the London Olympics 2012 with making doodles and show them on the home page of Google and also we can play the events like today is basket ball event in the Olympics then Google sets the basket ball doodle on their home page.


    Add Huddle Olympic Doodle




    • Copy below code and paste in our HTML Editor
    • Click on Preview Button.
    <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/hurdles-2012-hp.html" width="550px"></iframe></div>


    Add Basket Ball Olympic Doodle


    • Copy below code and paste in our HTML Editor
    • Click on Preview Button.
     <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/basketball-2012-hp.html" width="550px"></iframe></div>


    Add Slalom Canoe Olympic Doodle


    • Copy below code and paste in our HTML Editor
    • Click on Preview Button.
      <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/slalom_canoe-2012-hp.html" width="550px"></iframe>



    Live Demo of Doodles....! Play Here




    • Double Click on Play button for start Huddle game.
    • Press Space Bar for Jump.




    • Click on Play button for start Basket Ball game.
    • Press two times Space Bar to drop ball into the net OR press double click for the same action. 




    • Click on Play button for start Slalom Canoe game.
    • Use arrow buttons OR move mouse with click to move the direction of boat.




    Enjoy With Google Hacked Content....! 




    Rose 91481 AmoTe Navigation Menu

    Hemant Verma - 9:10 PM

    After a long time, we have hacked a new Navigation Menu from (adsenseg.com) and make compatible it for blogger and we give a new name to it "ROSE 91481 AMOTE NAVIGATION MENU" this will give a new look to your website OR blog.



    Add Rose 91481 AmoTe Navigation Menu

    • Go to Blogger Dashboard 
    • Click on DropDown Menu and select Layout
    • Choose a HTML/JavaScript Widget
    • Paste Below code in it

    <style>
    /*------ Nav Menu Hacked by Rose 91481 -------*/

    #rosenav-list{
    position:absolute;
    width:921px;
    margin:0auto;
    height:69px;
    top:68px;
    left:40px;
    }

    ul.nav{
    margin:0;
    padding:0;
    }

    ul.nav li{
    width:auto;
    margin:0 24px 0 0;
    padding:0 0 0 10px;
    list-style:none;
    float:left;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kSdklQuc9-EbMLvNEfgUktSPGXvvFTduPMEpCC9_KWPWaFHhbNXk0w3AkZKUgy4PIJ0Ei4EYyDcHeoMRutVLGLK6FiDFAk_ICN-ooh8qt2jTl3xvMXSOKeXcRDyhGng5Dcmj-xyvlRU/s1600/rose91481nav-list.png) left repeat;
    font:bold 160%/140%"navigasi";
    }

    ul.nav li a{
    padding:0 24px;
    }

    ul.nav>li>a{
    text-shadow:-1px -1px 1px #333;color:#7b7878;
    }

    ul.nav li a:hover{
    text-decoration:none;
    }
    ul.nav>li.current_page_item>a,ul.nav>li.current-cat>a,ul.nav>li>a:hover{
    text-shadow:-1px -2px 1px #000;
    }
    #text-list{
    margin:0;
    padding:0;
    height:31px;
    float:left;
    }

    ul.nav li img{
    float:left;
    }


    /*------- www.widgetgenerators.blogspot.com -------*/


    </style>


     
    <div id="rosenav-list">
    <ul class="superfish nav clearfix">
    <li class="page_item page-item-2 current_page_item">

    <a href="#">Home</a></li>

    <li class="page_item page-item-8"><a href="#">Blogger Templates</a></li>

    <li class="page_item page-item-8"><a href="#">About Us</a></li>


    <li class="page_item page-item-27"><a href="#">Contact Us</a></li></ul></div>
    </div>



    • Now Save Your Widget

    Make Changes....!

    • Replace it # with your link.
    • Replace it          with your list name.




    Next Previous
    Editor's Choice

     



    Make Your Blog Like a Pro
    About | Contact | Affiliates | Privacy Policy | TOS