Mini Icon

Tutorial Gadget Seguidores Bajo el Navbar

Hi!! este es el primer tutorial que compartire con ustedes,espero les agrade y lo entiendan XD

empezemos:

Este tutorial solo sirve para los navegadores Chrome y especialmente Firefox

 Diseño -> Elementos de página -> Añadir un gadget -> HTML / JavaScript

Pegan esto:

 

<style type='text/css'>

a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;F

opacity: 0.5;

-khtml-opacity: 0.5;}

a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>

<div style='display:scroll; position:fixed; top:20px; left:20px;'>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="70" height="30"src="FOLLOW BUTTON URL" alt="PUSH" title="Follow"/></a>

</div>

<style type="text/css">

#at{

position:fixed;

right:450px;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:left;

border:2px solid #FFCCCC;

background:url(Background URL) #FFFFFF repeat-x bottom center scroll ;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideAT(){

var at = document.getElementById("at");

var w = at.offsetWidth;

at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);

at.opened = !at.opened;

}

function moveAT(x0, xf){

var at = document.getElementById("at");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

at.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}

}

</script>

<div id="at">

<div class="attab" onclick="showHideAT()"> </div>

<div class="atcontent">

<div align="center">

<div style="background:url() no-repeat;">

FOLLOWER GADGET CODE HERE

</div>

</div>

<br />

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://xiuwen53.blogspot.com/"><div style="color: #FFFFFF;">

<span ></span></div></a></a></div>

</div></div>

<script type="text/javascript">

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script>

*en el color violeta deben colocar lo que es el la url de la imagen del botón

Verde podrán modificar los colores que ustedes quieran

Rojo podrán colocar un background (url de la imagen de fondo) si quieren

Cian pegaran código del gadget de seguidores

para crear el código de las nuevas  insignias de google(cajita de seguidores) deberán ir aquí:

https://developers.google.com/+/plugins/badge/config#utm_source=as&utm_medium=blog&utm_campaign=pages

para que puedan pegarlo en el color cian

y si quieren usar el que ya tienen tendrán que buscar en edición HTML-> Expandir plantillas de artilugios->Ctrl –F ->y buscar allí Followers o como le tengan el titulo a ese gadget y copiar el link algo parecido a este (ejemplo):

</div><div class='widget Followers' id='Followers1'>

<h2 class='title'>Seguidores</h2>

<div class='widget-content'>

<div id='Followers1-wrapper'>

<div style='margin-right:2px;'>

<script type="text/javascript">

        if (!window.google || !google.friendconnect) {

          document.write('<script type="text/javascript"' +

              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +

              '</scr' + 'ipt>');

        }

      </script>

<script type="text/javascript">

      if (!window.registeredBloggerCallbacks) {

        window.registeredBloggerCallbacks = true;

        gadgets.rpc.register('requestReload', function() {

          document.location.reload();

        });

        gadgets.rpc.register('requestSignOut', function(siteId) {

         

          google.friendconnect.container.openSocialSiteId = siteId;

          google.friendconnect.requestSignOut();

        });

      }

    </script>

<script type="text/javascript">

   

    function registerGetBlogUrls() {

      gadgets.rpc.register('getBlogUrls', function() {

        var holder = {};

       

         

         

         

            holder.postFeed = "http://www.blogger.com/feeds/6893206802072030048/posts/default";

        

            holder.commentFeed = "http://www.blogger.com/feeds/6893206802072030048/comments/default";

         

          holder.currentBlogUrl = " http://sweet-and-cute-world.blogspot.com/";

          holder.currentBlogId = "6893206802072030048";

       

        return holder;

      });

    }

  </script>

<script type="text/javascript">

  if (!window.registeredCommonBloggerCallbacks) {

    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {

      var el = document.getElementById(this['f']);

      if (el) {

        el.style.height = height + 'px';

      }

    });

   

    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();

  }

  </script>

<div id="div-tlg2boz6evav" style="width: 100%; "></div>

<script type="text/javascript">

    var skin = {};

    skin['FACE_SIZE'] = '32';

    skin['HEIGHT'] = "260";

    skin['TITLE'] = "Seguidores";

    skin['BORDER_COLOR'] = "transparent";

    skin['ENDCAP_BG_COLOR'] = "transparent";

    skin['ENDCAP_TEXT_COLOR'] = "#650483";

    skin['ENDCAP_LINK_COLOR'] = "#ee0082";

    skin['ALTERNATE_BG_COLOR'] = "transparent";

   

    skin['CONTENT_BG_COLOR'] = "transparent";

    skin['CONTENT_LINK_COLOR'] = "#ee0082";

    skin['CONTENT_TEXT_COLOR'] = "#650483";

    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#ee0082";

    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#b166c5";

    skin['CONTENT_HEADLINE_COLOR'] = "#ee0082";

    skin['FONT_FACE'] = "italic normal 13px Georgia, Utopia, \x27Palatino Linotype\x27, Palatino, serif";

    google.friendconnect.container.setParentUrl("/");

    google.friendconnect.container["renderMembersGadget"](

    {id: "div-tlg2boz6evav",

     height: 260,

    

    

    

     site: "11346185315955968235",

    

     locale: 'es' },

     skin);

  </script>

</div>

</div>

<div class='clear'></div>

<span class='widget-item-control'>

<span class='item-control blog-admin'>

<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=6893206802072030048&widgetType=Followers&widgetId=Followers1&action=editWidget&sectionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("followers1"));' target='configFollowers1' title='Editar'>

<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>

</a>

</span>

</span>

<div class='clear'></div>

debera quedarles asi

Kawaii Gif (varios)

Y les dejo unos divisores ^^

Gif Varios