Sponsor 1
custom
codes

Disable Right Click On Your Blog To Prevent Copy/Paste


Labels:

custom-codes - Bloggers always wanted to prevent users or other bloggers from copying the content from their blog or website. Few Bloggers do lots of efforts by researching and writing great articles for their blog, whereas some just copy and paste article and tutorials on their blog from others. So to prevent such bloggers from copying the content from your blog i will teach you to disable right click on your blog with just simple Javascript. So lets get started.



  1. Go to your blogger Dashboard and click on Layout.
  2. Then click on Add Gadget.
  3. Choose Html/Javascript From Popup Window
  4. Now Copy and Paste below code into it.
  5. now save it and refresh your blog, and TaDa...you are done disabling right click on your blog.

this javascript for disable right click :

<!--CS Code -->
<!--custom-codes.blogspot.com-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

custom
codes

Add Photo on Google Search Result


Labels:

custom-codes - One of the most important ways to generate viewership to your blog and increase its' click-through rate is to put up your picture beside your blog link in Google search results. This method develops trust in the eyes of the viewers and they are more compelled to open up your blog then they would have been without the picture there. Formally known as Google Authorization, this is among the major blogging tips that can increase the exposure to your blog content and can greatly increase your blog ranking from Google's point of view. Today, we'll take a look at how it's done.



The process basically is about telling Google you're the author of the blog. Google will then display your Google+ profile picture beside your blog link in search results. The complete procedure can take you about 5 minutes. However, its implementation from Google's side usually takes around 5-7 days but may even take months to complete. It mainly depends upon how often Google crawls your page. All you need to have for the procedure is a verified Google account along with a Google+ profile. The process becomes simpler if you have a verified email@yourDomain but is also possible without it. Let's take a look at both the cases.

NOTE: Make sure your Google+ profile picture is square i.e. length = width in pixels. Google will reject a rectangular picture for this purpose.

Case 1: If you DON'T have an email@yourDomain

If you don't have an email@yourDomain, some manual HTML editing needs to be performed on your blog to authorize it with your Google+ profile. The procedure is as under:

  • Step 1: Open up your blog's design code and add a 'rel=author' type link to your Google+ profile there. You can add up the link anywhere on the blog but the About pages are usually a good spot for such. The link is provided below, replace PROFILE_URL with your profile address and add it to your blog.
<a href="PROFILE_URL?rel=author">Google+ Profile</a>
An example of the complete link tag is shown below.

<a href="https://plus.google.com/u/0/123456789012345678900?rel=author">Google+ Profile</a>

custom
codes

Convert Video Youtube to Mp3 via Online


Labels:

custom-codesConvert Video Youtube to Mp3 via Online

never seen a video song on youtube? we want to change the format of youtube flv video into mp3 format in order to be heard continuously without having to open the website youtube.

here's how to convert youtube flv video formats into mp3 format:

1. access this url http://www.youtube-mp3.org/ 

2 after the copy paste youtube video url you want to change the format

3 Click the "convert video" then wait a few seconds until the video succeeded in converting

4. download the result file convert

custom
codes

Make Total Posts and Comments on Widget Blog


Labels: ,

custom-codes - This time I will be a tutorial on how to display the number of comments and posts on the blog. This article I wrote, when I visited a neighboring blog, I am very interested in this one tutorial blog, so there is no harm in it if I share the knowledge with you all.

How to display the number of blog posts and comments is easy, especially if you have a number of articles and comments that much. You can show or display them on your blog, or even create a blog visitor feel confident that he come to the correct place.

Installing Widget Total Posts and Comments Blog 

If you are interested in this widget, you can install it by following the steps below:


  1. Login with your blog account 
  2. Go to the menu LAYOUT 
  3. Click Add a Gadget, then select the HTML / Javascript 
  4. Copy and paste the script below :

<center><script style="text/javascript">
    function showpostcount(json) {
    document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
    + '</b><br>');}</script>
    <script src="http://your-url.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script><script style="text/javascript"></script>
    <script style="text/javascript">
    function numberOfComments(json) {
    document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +
    '</b><br>');}</script>
    <script src="http://your-url.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></center>

Demo, look my blogger side 

custom
codes

Enable gzip compression with Php


Labels:

custom-codesEnable gzip compression with Php

Enabling Gzip Compression

In many forums and on many webpages it has been widely proclaimed that to enable gzip compression using php is as easy as adding a single line of code at the beginning of each page. This is not false, however it is not the best way of doing it. Before continuing, here's the code. It takes advantage of Php's buffered output and buffers all output of the script until the Php engine has completed, and then runs all the output through a special function that gzip compresses it before sending it on to the browser.

Here is the code. Just place this at the very top of all your Php pages and it will send gzip-compressed output to the browsers.

<?php
    ob_start("ob_gzhandler");
?>

This method is dependant on the Apache server and in addition, the mod_gzip module must be installed and loaded.

Other Methods to Enable Gzip Compression

The method mentioned above is quick and easy, but the downfalls are that it only works on Apache with mod_gzip. Not only that, but according to the Php manual, that is not the preferred method for gzipping.

(From the Php manual at www.php.net)
note that using zlib.output_compression is preferred over ob_gzhandler().
Another method of gzipping is as follows:

<?php

// Include this function on your pages
function print_gzipped_page() {
    global $HTTP_ACCEPT_ENCODING;
    if( headers_sent() ){
        $encoding = false;
    }elseif( strpos($HTTP_ACCEPT_ENCODING, 'x-gzip') !== false ){
        $encoding = 'x-gzip';
    }elseif( strpos($HTTP_ACCEPT_ENCODING,'gzip') !== false ){
        $encoding = 'gzip';
    }else{
        $encoding = false;
    }
    if( $encoding ){
        $contents = ob_get_contents();
        ob_end_clean();
        header('Content-Encoding: '.$encoding);
        print("\x1f\x8b\x08\x00\x00\x00\x00\x00");
        $size = strlen($contents);
        $contents = gzcompress($contents, 9);
        $contents = substr($contents, 0, $size);
        print($contents);
        exit();
    }else{
        ob_end_flush();
        exit();
    }
}
// At the beginning of each page call these two functions
ob_start();
ob_implicit_flush(0);
// Then do everything you want to do on the page
echo 'Hello World';
// Call this function to output everything as gzipped content.
print_gzipped_page();

?>

custom
codes

Add Button Donation Paypal on Blogger


Labels:

custom-codes - want to add a Button Donation Paypal on Blogger? anyone who knows kindly provide us a little donation to the sustainability of blogs that we make.

here's how:

1. first click the link here https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside 

2 if you already have a paypal account, please log in first after that click on the link "Create Your Button Now"

3. please fill in the form available there (like form Organization name / service, Choose a button type, Customize button, and others.

4 if it is fill out the form to make a paypal donation button, please click the "Create Button"

5. after that you will get a code or script from paypal

6 Open your blogger account, then select the menu "layout" and then click "add a gadget" and search for "HTML / JavaScript" copy code from the paypal donation button earlier, and then paste it into the form "HTML / JavaScript" in your blogger.

7 click the "save settings" then refresh your blog page, and see the paypal donation button has appeared in your blog.


Demo, look my blogger side

custom
codes

How to Change Style Blockquote blogspot with CSS


Labels: ,

custom-codes - I never made ​​a previous post about making 'Box for Code in Blogger Posts' in my opinion a bit too difficult having to write or add this code in every post that is the programming code 

<div class = "code">
place code PHP, HTML, Javascript, jQuery, CSS, and others here
</ div> 

now I try a little modification of the automatic blockquote blogspot, so can be used to put the code or script in PHP, HTML, Javascript, jQuery, CSS, etc.

the following way:

1. first click on "Templates" and click "Edit HTML"

2 then look for the word "blockquote" (how quickly can simply press ctrl + f)

3 after the meet said "blockqoute" please replace the old code with the code below


blockquote {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}
blockquote blockquote {
background: #FAFAFA;
background-repeat:no-repeat;
        margin:5px 10px;
        padding:0 7px 10px 7px;
        font-size:12px;
        color:#336699;
        border-left:4px solid #40a9c9;
}

4 if it is saved template, and then refresh your page to see the results.

now you can add a text box area for the placement of the codes simply by clicking on the "Quote" on page "New Entry"

Demo, look this post :)

custom
codes

Disable Access Folder Website with .htaccess


Labels:

Usually hosting will allow people to access the folder via the browser even if the folder is missing its index file. Thus one can immediately see the contents of the folder. To overcome this we can put the index file in the folder. However, this method is not very effective when dealing with a lot of folders that have no index file. Unless you want to wait to enter the index files to any folder.

Another way is more compact (in my opinion) is to use just enough advantage htaccess file write only one file, all the folders will be protected. The disadvantage is not all hosting allow this file.

How to?

first, Create a file named .htaccess then fill like this :

Options All -Indexes

The above command will create the folder can not execute its index that does not exist, except to include a specific file name.

Options All +Indexes

If you want to let everyone be able to execute these folders, you can use the above command use

custom
codes

Create Viral Marketing on Blogspot (Share to Download)


Labels:

custom-codes - you never download anything (be it files, software etc.) on the internet, but when you want to download facebook Share you in order first before getting the link .. that's what I mean by viral marketing, wordpress that usually must use tools / plugins separately to make the button, but if it can be blogspot for free.

How to create Create Viral Marketing on Blogspot?

<a href="https://www.facebook.com/sharer/sharer.php?u=http://your-url.com&amp;next=http://your-link-download.com" rel="nofollow" target="_blank" title="Automatic Download, After Share"><img src="images/fb"></img></a>

Please edit this code :


  • http://your-url.com (please replace with url your website / blog)
  • http://your-link-download.com (please replace with your download url)
this button for "Share to Download"



custom
codes

Add Banner Ads on the float left and right


Labels: , ,

custom-codes - You must have seen the ads floating / pop-up on the right or left of the blog, in addition to advertising widely used by bloggers blog because it will save space on the blog.

follow the steps below:


  1. Please Log In your blogger account. 

2. add this code above the </ body>


<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(10);
});
});
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>


3. and add this code (Choose Layout ---> --- Add a Gadget > HTML / JavaScript.)


<div id="teaser2" style="width:autopx; height:autopx; text-align:left; display:scroll; position:absolute; top:60px;left:0px;">
<div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center>
<img src='images/close-l.png'/ style="margin-bottom:-75px; margin-left:-83px; position:relative; z-index:99999;"></center>
</a></div>
<span style="margin-left:10px; top:75px;">
Code Banner Ads / Adsense
</span>
</div>

<div id="teaser3" style="width:autopx; height:autopx; text-align:left; display:scroll; position:absolute; top:680px;left:0px;">
<div>
<a href="http://your-url.com" target="_blank" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center>
<img src='images/close-l.png'/ style="margin-bottom:-75px; margin-left:-83px; position:relative; z-index:99999;"></center>
</a></div>
<a href="http://your-url.com" target="_blank"><img src="images/banner-right.jpg" style="margin-left:10px; top:75px;"></img></a>
</div>

<div id="teaser4" style="width:autopx; height:autopx; text-align:right; display:scroll; position:absolute; top:60px; right:0px;">
<div>
<a href="http://your-url.com" target="_blank" id="close-teaser" onclick="document.getElementById('teaser4').style.display = 'none';" style="cursor:pointer;"><center>
<img src='images/close-r.png'/ style="margin-bottom:-75px; margin-right:-83px; position:relative; z-index:99999;"></center>
</a></div>
<a href="http://your-url.com" target="_blank" style="position:relative; z-index:1;"><img src="images/ads-right1.gif" style="margin-right:10px; top:75px;"></img></a>
</div>

<div id="teaser5" style="width:autopx; height:autopx; text-align:left; display:scroll; position:absolute; top:680px;right:0px;">
<div>
<a href="http://tokobanten.com/ads_banner-p33" target="_blank" id="close-teaser" onclick="document.getElementById('teaser5').style.display = 'none';" style="cursor:pointer;"><center>
<img src='images/close-r.png'/ style="margin-bottom:-75px; margin-right:-83px; position:relative; z-index:99999;"></center>
</a></div>
<a href="http://your-url.com" target="_blank"><img src="images/banner-right.jpg" style="margin-right:10px; top:75px;"></img></a>
</div>


this image for button closed :


this example banner (size 160px X 600px)




click This for Demo

custom
codes

Box for Code in Blogger Posts


Labels: ,

custom-codes - In this post I will give you a tutorial about adding Box using <textarea> for code in blogger posts, this example box without CSS



First, Edit your blog's HTML code. (Go to Blogger Dashboard > Design > Edit HTML)

Then Find (press CTRL+F) this: ]]></b:skin>

and Add this CSS code ABOVE ]]></b:skin>

/* Code Box
----------------------------------------------- */
.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}
.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}


and Click Save Template.

Then when you go to post your code, click the HTML tab, and just paste this code:

<div class="code">
YOUR CODE
</div>

demo look this post

custom
codes

Scroll to Top for Blogger


Labels: , ,

custom-codes - Scroll to Top for Blogger

In this post I will give you a tutorial about adding the simple scroll to top button for your blogger.Here I have used CSS and jQuery.When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.Now lets see how to add  this button to your blog.


Follow This Instructions :

1. Go to Blogger Dashboard > Design > Edit HTML.

2. Now find for tag </body> in your blog.

3. Add below code just above/before </body> tag.

copy this codes :

<style type="text/css">
#hb-gotop{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#hb-gotop").scrollToTop();
});
</script>
<a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>

Now, click "Save Template" and refresh your blog
you have successfully added this button to your blog.
for demo please check this blog (scroll down and look button "scroll to top")

custom
codes

Custom Style HR CSS


Labels:

custom-codes - This Script for Custom your style <hr/> css :


/* Gradient color1 - color2 - color1 */
hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc);
}

/* Gradient transparent - color - transparent */
hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

/* Double-color dashed line */
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;

/* Single-direction drop shadow */
hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

/* Cloud */
hr.style-five {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {  /* Not really supposed to work, but does */
    content: "\00a0";  /* Prevent margin collapse */
}

/* Inset, by Dan Eden */
hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Flaired edges, by Tomas Theunissen */
hr.style-seven {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/* Glyph, by Harry Roberts */
hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;

Demo Klik This! 

custom
codes

Script Share to Blogspot


Labels:

custom-codes - Is there anyway to add share links to blogger like Facebook,GooglePlus, ect.? I thought there would be some kind of custom link for users to "Blog this" or something but I can't find anything like that after a lot of googling.

I would think it'd be something like this: www.blogger.com/share?URL=x

Here is how to :

example code :

https://www.blogger.com/blog-this.g?u=http://blogname.blogspot.com/2014/03/watch-new-xmen-days-of-future-past.html&n=My%20Post%20Name&t=Hello%20This%20is%20my%20blg

search this code and edit

?u= for your blogpost URL.

n= for your blogpost Title.

t= for your blogpost content.


this code :

<a expr:href='&quot;https://www.blogger.com/blog-this.g?u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;t=&quot; + data:blog.metaDescription'>BLOG THIS</a>

or like this :

<a href="http://blogger.com/blog-this.g?t=[TEXT]&n=[Share Name Title/PHP ECHO Share Name Title]&u=[URL/PHP ECHO URL]" target="_blank">Blog This</a>

Demo like this :