Cari Blog Ini

Tampilkan postingan dengan label Embed. Tampilkan semua postingan
Tampilkan postingan dengan label Embed. Tampilkan semua postingan

Rabu, 17 Juli 2013

Add | Put Pop Up Ads For Banner | Adsense Or Chitika On Blogger Blogspot Easy Tricks

In this tutorial i will show you how to Add Google Adsense Ads, Chitika Ads, Banner Ads with Popup on Blogger Blog with simple and easy steps and using new Tricks. My tutorial is so easy any one understand easily how to embed these ads on blogspot to get more click to increase Google Adsense Earning and other Advertiser links. If you worried about to get small money then forget this and do as soon as possible for make more money. If you have a blog and not get more click and not too much visitors then don't worry i am going to give you best of best trick to how get more clicks on your blogger ads on your banner ads or chitika and Google Adsense for get more money. I also use this trick but it is not run to many days because some advertising company can not like this pop up ads. Like Google Adsense it is very harmful for your Adsense Account because this is against the Google Adsense Policy if you are ready then you can start using this trick with my below tutorial.

Add | Put Pop Up Ads For Banner | Adsense Or Chitika On Blogger Blogspot Easy Tricks
Add | Put Pop Up Ads For Banner | Adsense Or Chitika On Blogger Blogspot Easy Tricks

 

Best EasyTricks To Monetize Your Blogger Blog With Google Ads Increase CPC | CTR And Earning 
How To Easily Make Money With Affiliate Marketing Blogger

How To Put Ads On Popups Window:


Now i give you a HTML Coding and i tell you where you put the ads code to work with this trick.


<style>
#btftopbar {
height:2px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:center;
padding-top:2px;
}
#adsground {
height:50;
margin:0 auto;
width: 0px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:bottom;
padding:2px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:30px;
left:600px;
border-bottom:4px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="btftopbar">
<span style="color:#fff;font-size:10px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://trickofblogging.blogspot.com/"></a></span>
</div>
<div id="adsground">
<p align="left"><h3></h3></p>
<p>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
/* Larget Rectangle  */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<br/></p></div></div>


When you copy this code on your notepad then change the Orange Highlighted Color coding/Ads with your own Google Adsense Ads. If you want to add Banner ads then also replace this mine ad code with your own Banner Ads code. And if you also want to put Chitika ads then replace again with mine ads code which is highlighted with orange color. Some times chitika ads are not display due to blogger template problem then at this time you can comment me and also give your blog link and template copy with attach notepad file and mail me using contact us form and i will definitely help you and also give you best tricks.

How Optimize Blogger | Website To Increase Or Make Money With Blogging Tricks
Which Website | Blogger Name Give Best CPC | CTR To Make Money With Google Adsense

Customization In Pop-Ups Ads For Better Placement:


I highlighted two digits with Red or Pink color. It is for adjustment of ads where you want change the pixels of the ads for Top and Left and choose your best placement for ads to get more clicks. If you have done also this customization then follow below tutorial and add your ads.

Go to Blogger.com.
Go to Layout.
Click on Add A Gadget.
Go to HTML/JavaScript.
Click on it.
Paste your customize code in HTML Box.
Click on Save.
View your Blog and check your ads.

Now my tutorial is finished and visit my blog till get new tricks for your blogger blogspot to make best blogger and Good Looking Blog for get more visitors also. I also write many article on Blogger SEO, Blogger Widget/Gadget to make perfect blog.

Minggu, 09 Juni 2013

Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar

In this tutorial i will show you how you can easily Add Stylish Subscribe Us Box widget in blog sidebar or in footer. Subscribe Box is the best way also to increase the blog traffic. Because when people Subscribe your blog then they daily visit your site for getting updated Content or Post on your blog. The heading Subscribe to Get Latest Tutorial Via Email is the one of the best heading which convince to blog reader to get daily updated content. Imagine if your blog readers means subscribe are upto 500 then you can get average daily 100 visitors from this widget by adding in your site or blog. Now i have a good and easy tutorial to explain or embed this widget on your blog in just 5 minutes.

How I Can Boost Traffic With Targeted Country On Blogger
How I Can Make Internal Links In The Blog Post To Increase Rank
How I Can Use Webmaster Tools Properly For Blogger

How And Where I Put Or Add This Gadget:


Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar
Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar
This is your question may be and i have good answer for this question if you want to more subscriber then place this widget or gadget in blog sidebar in between or below where your want and if you also want to put it in the blog footer widget then you also do that its upto you. But my suggestion place this widget in blog sidebar to get better results.

Now we are going to start this easy tutorial.
If you want to add this widget then work according to below tutorial.

Go to Blogger.com.
Go to Layout.
Click on Add A Gadget link.
Go to HTML/JavaScript.
Click on HTML/JavaScript.
And Paste the below code in the HTML Box. But few customization is required which is give below.


<style type="text/css">
#subscribe-wrapper {
background: url(http://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent;
padding: 3px;
}
#subscribe-box {
background: url(http://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7;
border-radius: 15px;
padding:5px;
overflow: hidden;
}
a.linkopacity img {
filter:alpha(opacity=75);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
padding: 3px;
border: 1px solid #999;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
}
#subscribe-box:hover table {
    top: 0;
}
#subscribe-box h1{
margin-top: 5px;
color: black;
font-family: arial;
font-size: 15px;
margin-bottom: 5px;
line-height: 14px;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
}
#subscribe-box table {
position: relative;
top: 40px;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
margin-bottom: 0px;
}
#subscribe-box td {
padding: 2px;
}
#subscribe-box input{
background: white;
border: medium none;
font-size: 12px;
padding: 10px;
width: 150px;
color: #666;
font-family: arial;
margin-bottom: 3px;
width: 55%;
}
#subscribe-box input:focus{outline:none;}

#subscribe-box .submit{
background: #E73827;
color: #fff;
cursor: pointer;
font-weight: bold;
text-shadow: 0 1px 2px black;
width: 90px;
font-family: arial;
margin-left: -3px;
font-size: 14px;
}
</style>
<div id="subscribe-wrapper">
<div id="subscribe-box">
<h1>Subscribe to Get Latest Tutorial via email</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Put your feedburner link for verifyication', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<center>
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;enter your email address...&quot;;}" onfocus="if (this.value == &quot;enter your email address...&quot;) {this.value = &quot;&quot;}" size="20" type="text" value="enter your email address..." />
<input name="uri" type="hidden" value="Trick Of Blogging" />
<input name="loc" type="hidden" value="en_us" />
<input class="submit" type="submit" value="subscribe" /></center></form>
<center>
<table>
<tbody><tr><td><a href="http://feeds.feedburner.com/blogspot/LPkip" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/rss.png" /></a></td>
<td>
<a href="http://www.facebook.com/pages/Trick-Of-Blogging/447187668684161" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/facebook.png" /></a>
</td>
<td>
<a href="https://twitter.com/trickofblogging" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/twitter.png" /></a>
</td>
<td>
<a href="https://plus.google.com/u/0/113224303869289827964/posts" class="linkopacity" target="_blank"><img border="0" src="http://softglad.at.ua/images/Google.png" /></a>
</td>
</tr></tbody></table>
</center>
</div></div>
                      

Customization For Subscribe Box Widget:


Change Red Highlighted Color Text with your desire text. Subscribe to Get Latest Via Email.
Change Orange Highlighted  Color Text with your feed burner verification link. 
Change Sky Water Highlighted Color with your Google Feed Burner link http://feeds.feedburner.com/blogspot/LPkip
Change Pink Highlighted Color with your Blog Facebook Page link http://www.facebook.com/pages/Trick-Of-Blogging/447187668684161
Change Parrot Green Highlighted  Color with your Blog Twitter Page/Profile link https://twitter.com/trickofblogging
Change Purple Highlighted Color Text with your Google+ Profile or Post page link https://plus.google.com/u/0/113224303869289827964/posts

After Customization paste the code in HTML Box and save setting.
Now Select the desire place where you want to add this amazing widget in sidebar.
Again Save Setting.
Click on View Blog.
Now you have done correctly.

And if you want to add this widget in Footer Column then first add the Three Footer Column and this this in the Blog Footer it also looks beautiful.

Add Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

When you add this widget also then just pick your Subscribe Widget and drop the added widget in the Blogger Footer or Bottom. Now view your blog its look perfect now.


Related Articles:


Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot
Add | Put 50 Flag Translator Widget | Gadget On Your Blogger Blogspot
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add Manually CSS Jqeury Drop Down Menu On Blogger
Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks
How Easliy/Simple To Manage Page Layout In Blogger Blogspot

Selasa, 28 Mei 2013

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger

Add or make simple CSS Drop Down Menu like WordPress on Blogger Blogspot.If you want to put drop down menu on home page then this tutorial is very simple and easy to make drop down links which you want to show. Like if you have too much pages on home page like Blogger Widget, Blogger Tutorials, Boost Traffic or also you have embed some blogger tools like Adsense Converter, Color Code Generator/Picker then you can easily make pages behind this means make pages and hide it and make drop down menu manually to make your blogger beautiful and when visitors comes on your site or blog then they easily find which they want like if visitor comes on site and he/she find HTML Color Code Generator then he/she go to tools and simple find then Color Code Picker.


Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
       
How I Can Write 100% Original Content For Blogger
How I Can Use Webmaster Tools Properly For Blogger
How I Can Boost Traffic With Targeted Country On Blogger  

What Is The Advantages/Benefits To Add Drop Down Menu On Blogger:


By adding drop down menu on blogger your visitor is easily find which they want and which they want to do. It is a simple steps which is every one find first if they can not find then they also left the blog and go to another to find simple steps and not fell in complex means if you make the pages with beautiful heading and put good links then 100% visitor are stay on your site my suggestion is that every blogger should add this amazing working on your site or blog.

I have simple and easy tutorial to add Drop Down Menu by editing your self and it is also very easy and also this effect make your blog perfect. For adding this widget follow my below tutorial.


Adding Drop Down Menu With Best Simple Blog Tricks:


Now we are going to add the drop down menu on your blog by hide the pages and make drop down using this pages.

Go to Blogger.com
Go to Template.
First Download your Full Template on your computer. Because if you make wrong changes then you can easily upload your full template and your blog come to again their position.
When you download your template.
Click On Edit HTML. Keep in mind There is New HTML Interface if you not working before this features then click this link and learn how to handle it.

How I Can Handle New Interface Of Blogger HTML Editor

When your in position to work it then according to above link tutorial click Ctrl+F to find below tag.

]]></b:skin>


When you find this tag then above/before it paste the below code.


/*----- TOB Drop Down Menu ----*/

#mbtnavbar {
    background: #04B431;
    width: 1000px;
    color: #FE2E2E;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #FE2E2E;
        height:45px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:45px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #190714;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #190714;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
  
      
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 234px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 136px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #FE2E2E;
    width: 120px;
    color: #190714;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
  
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #00BFFF;
    color: #190714;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Now Save your Template.
You have done.

How I Make My Blogger Good Looking Best Tricks
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank
How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger

Adding Links Of Pages In HTML/Javascript:


Now it turn to add links in of pages of drop down menu its very simple and customizable any time and add new links any time it you choose only template embed links then it has big disadvantage. Disadvantage is when ever you want to make new link then you will go to template it also effect the template files that's why i choose this type of drop down menu when you want to add then just go to layout and then gadget and go to HTML and do that what you want.

Copy the below code and replace # this Hash tag with your page or post links and also change the heading. Like Get Social Bookmarking Button with your desire heading.

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
        <a href="http://trickofblogging.blogspot.com/">Home</a></li>
<li>
<a href=" ######### ">Blogger Widget</a>
<ul>
<li><a href="#">Get Social Bookmarking Button</a></li>
<li><a href="#">Recent Post Code</a></li>
<li><a href="#">Page Navigation Code</a></li>
<li><a href="#">Facebook Like Button Code</a></li>
</ul>
<li>
<a href="#">Blogger Tutorials</a>
<ul>
<li><a href="#">Google Page Ranking 2</a></li>
<li><a href="#">Improve SEO</a></li>
<li><a href="#">Blogger Analytics</a></li>
<li><a href="#">Social Bookmarking Blogger</a></li>
</ul>
<li>
<a href="#">Blogger SEO</a>
<ul>
<li><a href="#">Boost Traffic</a></li>
</ul>
<li>
<a href=" ######### ">Blogger Tools</a>
<ul>
<li><a href="#">Google Adsense Converter</a></li>
<li><a href="#">Color Code Generator </a></li>
</ul>
</div>

When you put or add links then paste it by doing according to below tutorial.

Go to Blogger.com.
Go to Layout.
Go to Gadget.
Click Add A Gadget.
Go to HTML/JavaScript.
Paste the code in HTML box.
Save this box.
You have done correctly.

Now if you want to add drop down menu for blog post or between the post then follow the below link to add the drop down link menu in blog post.

Add A Simple Drop Down Menu To Blogger Blog

Now according to second code where i highlighted the text how to replace easily.

To change the Background Color of Drop Down Menu simply add your desire color code  #04B431. 
To change the Color replace the code #FE2E2E.
To change the Color of Text replace the code #190714.
To change the Font of Drop Down Menu replace font:normal 12px Helvetica, sans-serif.
Now your work is complete if you face any problem then comment me without any hesitation.

To Generate The Color Code click go with this link.   Color Code Generator Tool


Related Articles:




 

Minggu, 26 Mei 2013

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks

In this tutorial i will show you how to Embed or Add HTML Color Editor to Blogspot using best blogging tricks. HTML Color Code Picker is one of the best tools to get desire color in Hexa decimal with # this sign. When we choose our desire color code and put where we want then it take the same color which we pick but it is work only with Esteric sign first.

This tool is very effective if you want to make your blog perfect with you color choice and if you have good experience about color picking and good selection matching then you are easily make your blog perfect and better also this tool is very useful when we choose the Google Adsense Ads mixing color and we easily put or change the desire color just click on color and grab the color code and paste it where you want.

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Color Code Generator Tool

How To Add Color Code Generator Tools In Your Blogger Blogspot:


If you want also to add this effective tools for easy use of you and your blog visitors then its very simple to add just you grab the code of color generator tools and paste and you tools is ready for working. I give you two code of different two Color Code Generator Tools which you like grab the code and paste according to my tutorial and you feel it so easy.

Hot And Latest Seo Tips For Blogger
How I Make My Blogger Good Looking Best Tricks
Simple | Easy Tutorial For Transfer Blogspot To Website 

Now Let's Start The Tutorial:


When you are ready to add the Widget/Gadget to Blogger Blogspot then copy the two give code below and paste according to follow my tutorial. To make these changes first you sign in your blogger.com account and then start the next tutorial.

Go to Blogger.com.
Go to Posts or Pages. Which you want to choose. There are two method for adding this HTML Encoder Color Code Generator. If you want to do so then see below two tutorial.


Add The HTML Color Code Generator/Picker To Blogger Blogspot:

 

Add HTML Color Code Tool With In Post:


To adding the Color Code Picker In Between Post use the below simple tutorial.

Go to Blogger.com.
Go to Posts.
Write new post which you want to publish.
If you want to add the Color Code Generator in between post then copy the below code First Color
Code Generator Tool or Second Color Code Generator Tool.
When you copy it then go to post page where you are writing you post.
Click HTML Button located on top left side of your post writing page.
Add Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks 3
Add Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks 2


Now Paste your copy code before <br> tag and your work is done.


You have two choice of Color Code Generator Tool grab the code which you want and paste where you want and feel easy its up to you.

Best Blogger Tips And Tricks For My Blog SEO Instantly
How Easliy/Simple To Manage Page Layout In Blogger Blogspot
Get Google Page Rank With In 1 Month By Simple And Easy Tricks 

Add HTML Color Code Tool In Pages:

For adding the HTML Color Code Generator to Pages then follow the below tutorial.

Go to Blogger.com.
Go to Pages.
Click to New Page Grey Button.
Click on Blank Page (Add text and media). Shown in picture/image below.

                           
Add Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks 3
Add Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks 3

Click HTML Button top left side of your writing page shown in Middle picture/image.
Paste your code and publish the page.
View blog and check your Color Code Generator is working.
For adding the these two type of widget or Gadget in blog copy your desire code and paste according to the above tutorial.

First Color Code Generator Tools Widget/Gadget Code For Blogger:


<center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center><p align="right"><a href="http://trickofblogging.blogspot.com/2013/05/add-put-embed-color-code-picker-tool-on-blogger-tricks.html"><small>Grab Widget</small></a></p>



Second Color Code Generator Tools Widget/Gadget Code For Blogger:


<center><object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480">            <param name="movie" value="http://www.2createawebsite.com/build/col.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/col.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object>
</center><p align="right"><a href="http://trickofblogging.blogspot.com/2013/05/add-put-embed-color-code-picker-tool-on-blogger-tricks.html"><small>Grab Widget</small></a></p> 

Related Articles:

 

Social Bookmarking Button Add To Blogger
Live Traffic Counter Put In Your Blogger Blogspot
Add A Simple Drop Down Menu To Blogger Blog
How To Add Facebook Page On Blog To Attract More Visitors
How I Can Add Recent Post Moving In Down And Upward Direction
How I Can Use Crawlers And Indexing Tool In Blogger
How I Can Handle New Interface Of Blogger HTML Editor
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika