Leet Blogger: Widgets

Showing posts with label Widgets. Show all posts

How to Make 125x125 Ad Box Blog

How to Make 4 Box Ad Size 125x125 - Well now I am going to share a tutorial "How to Make 125x125 Ad Box Blog'' yes someone asks me how to make the ad box. Refer to the following tutorial ..

1. Login to Blogger
2. Dashboard >> Layout >> Add Gadgets
3. Choose HTML/Javascript
4. Enter this code in the HTML/Javascript

<style type='text/css'>
.kotak-iklan { background : #ddd; text-align : center; border-radius : 4px; padding : 12px 0; }
.kotak-iklan img { background : #ebf5f9; margin : auto; padding : 5px; text-align : center; width : 125px; height : 125px; }
.kotak-iklan img:hover { background : #fff; }
</style>
<div class="kotak-iklan">
<a href="Link here" title="Leet Blogger"><img alt="Ad banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienQkYBfu33PfwnTUk_3n-omuY2vzaSqtFXIrdAiaH0L9n9S2QzhHBfwvGV3CevMgDEpysipPX3V7ZC4AE-8l-PfLU4y_L4p4nLXG4iVpWWlz5izoLXQimuTNS5J6flyjd7a-88bLPMu4/h120/125x125ad.jpg"/></a>
<a href="Link here" title="Leet Blogger"><img alt="Ad banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienQkYBfu33PfwnTUk_3n-omuY2vzaSqtFXIrdAiaH0L9n9S2QzhHBfwvGV3CevMgDEpysipPX3V7ZC4AE-8l-PfLU4y_L4p4nLXG4iVpWWlz5izoLXQimuTNS5J6flyjd7a-88bLPMu4/h120/125x125ad.jpg"/></a>
<a href="Link here" title="Leet Blogger"><img alt="Ad banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienQkYBfu33PfwnTUk_3n-omuY2vzaSqtFXIrdAiaH0L9n9S2QzhHBfwvGV3CevMgDEpysipPX3V7ZC4AE-8l-PfLU4y_L4p4nLXG4iVpWWlz5izoLXQimuTNS5J6flyjd7a-88bLPMu4/h120/125x125ad.jpg"/></a>
<a href="Link here" title="Leet Blogger"><img alt="Ad banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienQkYBfu33PfwnTUk_3n-omuY2vzaSqtFXIrdAiaH0L9n9S2QzhHBfwvGV3CevMgDEpysipPX3V7ZC4AE-8l-PfLU4y_L4p4nLXG4iVpWWlz5izoLXQimuTNS5J6flyjd7a-88bLPMu4/h120/125x125ad.jpg"/></a>
</div>

NOTE : Change the Text Color Red by advertising links and image links

Change Text colored blue with the ad description.

5. Click Save ...: D

Do not forget to Like and share this tutorial..

Blogger Tutorial , Widgets

How to Install the Latest Alexa Widget 2014

As we all know that Alexa now has changed its web interface. Alexa is now more present Pro features to its users. With each passing Alexa web interface, there are features that are hard to find by the site owner or the manager of the blog is the Alexa widget code to be stored in the blog.

From the first look at the new look Alexa, I tried to look for this one feature that I can find the old view Alexa. All the menus and page I try to explore but still did not find a page that describes how to install the Alexa widget or the page that displays the Alexa widget code to be installed on the blog. Until today I finally managed to find a way to install the Alexa widget on this new display.

Well for those of you who have made a blog and want to keep the Alexa widget on the blog, please follow the way below.

Have you entered the Alexa web or please access the following link: http://www.alexa.com/

Then click the Support as shown below.

Once open its Support page, just typing the keyword "Alexa widget" on the search box as shown below and then click enter.

Click on the link Can I display my Alexa rank on my site? for information leading to the page code.

Well widget code on the page of the will be listed Alexa widget code, Copy the code into notepad. From here we have found the link to the Alexa widget code to be stored in the blog had been sought as a link

In the picture above we presented the Alexa widget code to be stored in a blog like this.

<a href="http://www.alexa.com/siteinfo/yoursite.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=yoursite.com"></script></a>

Replace yoursite.com with the name of your blog. Do not forget the code above there are 2 pieces of code yoursite.com. Because the code above there is a link, then we should also insert title tags for the link, and because of these links go to external link should use the code to open the page in a new window and also rel nofollow to make it more secure. So that would complete as below.

<a href="http://www.alexa.com/siteinfo/yoursite.com" target="_blank" title="Alexa Site Stats Widget" rel="nofollow"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=yoursite.com"></script></a>

Hope this helps and good luck.

» DO NOT FORGET TO LIKE N Yeach comments ...

G+ Followers and Facebook Like Box Sliding Widgets

This post is a continuation of my previous post to add a widget on Google+ Followers Facebook Like Box Sliding widget we created yesterday. CSS code Google+ Followers and Facebook Like Box Sliding widgets is actually same just a little addition to the widget that is above.

Here we add the z-index code for our widget on the top shelf in his hover so that when the widget on-hover over it, the icon does not preclude the bottom widget. For more details Click on Demo button below.

See also: Sliding Facebook Like Box With CSS

Demo!

Placement of CSS code and HTML together with the placement of the codes for sliding Facebook Like Box in my previous post.

CSS code

I have this CSS code to combine Facebook Like Box code and Google+ Followers, so for those who have installed a sliding Facebook Like Box on my previous post, Replace the CSS code below.

.socialbox{
position:fixed;
top:100px;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.socialbox:hover{
right:0;
z-index:2;
}
.socialbox2{
position:fixed;
top:145px;
right:-279px;
height:230px;
width:258px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
padding:10px;
}
.gpicon-box{
width:30px;
height:32px;
position:absolute;
top:-1px;
left:-30px;
background:#DD4B39;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Georgia;
font-size:20px;
font-weight:700;
text-align:center;
padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
right:0;
}

HTML Code

For the HTML code is the same, if you have installed a sliding Facebook Like Box on my previous post, please replace with its HTML code with the HTML code below.

<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/leetblogger" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
<div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/116029778995810739772" data-source="blogger:blog:followers" data-width="260"></div>
</div>

Replace the Facebook profile URL and your Google+ profile above the Facebook profile URL and your Google+ profile.Then add facebook javascript SDK and javascript Google+ below.

Javascript Facebook

Save the below code <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Javascript Google+

Save the above code </body>

<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then please do not forget to make sure your blog is already using jquery library like this (any version).

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

» DO NOT FORGET TO LIKE N Yeach comments ...

CSS , Widgets

How to add a Google Friend Connect widget in blogger

Google Friend Connect is a widget that allows to connect people to the blog to get frequent updates of a particular blog. This increases the interaction between the people who like a particular blog updates and also enhances the look of the page. It is provided by google. when Google introduced Google+, Google+ automatically occupies the Google Friend Connect widget. So, Google Friend Connect widget go down the list of widgets, which are not removed or replaced.

You can also read its 7 Benefits of Google Friend Connect Widget