marți, 1 mai 2012

Adaugati butoanele Social Media Sharing in partea de jos a pagini

Daca in articolul trecut v-am aratat cum sa adaugati Social Media Sharing in partea de sus
Acum am sa va arat o varianta mai usoara si care o sa mearga pe toate templetele care sunt instalate pe blogger, blogspot
Este cel mai simplu tutorial blogger, blogspot


Varianta 1 Instalarea Social Media Sharing


  • 1.Du-te la Blogger> Aspect
  • 2.Apasa Adaugati un obiect gadget alege HTML/JavaScript
  • 3.Adaugati codul de mai jos in interiorul casetei



<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fa01b6119568187"></script>
<script type='text/javascript'> 
document.doAT = function(cl)
{
        var myclass = new RegExp('hentry');
        var myTitleContainer = new RegExp('post-title');
        var myPostContent = new RegExp('post-footer');
        var elem = this.getElementsByTagName('div');
        for (var i = 0; i < elem.length; i++) 
        {
            var classes = elem[i].className;
            if (myclass.test(classes)) 
            {
                var container = elem[i];
                for (var b = 0; b < container.childNodes.length; b++)
                {
                    var item = container.childNodes[b].className;
                    if (myTitleContainer.test(item))
                    {
                        var link = container.childNodes[b].getElementsByTagName('a');
                        if (typeof(link[0]) != 'undefined')
                        {
                            var url = link[0].href;
                            var title = link[0].innerHTML;
                        }
                        else
                        {
                            var url = document.url;
                            var title =  container.childNodes[b].innerHTML;
                        }
                        if (typeof(url) == 'undefined'|| url == 'undefined' ){
                            url = window.location.href;
                        }
                    var singleq = new RegExp("'", 'g');
                    var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                          
                    title = title.replace(singleq, '&#39;', 'gi');
                    title = title.replace(doubleq, '&#34;', 'gi');
                    
                    }
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
                var n = document.createElement('div');
                var at = "<div class='addthis_toolbox addthis_default_style ' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_facebook_like' fb:like:layout='button_count'></a> <a class='addthis_button_tweet'></a> <a class='addthis_button_google_plusone' g:plusone:size='medium'></a> <a class='addthis_counter addthis_pill_style'></a> </div> ";
                n.innerHTML = at;
                container.insertBefore(n , footer);
            }
        }
    return true;
};


document.doAT('hentry');
</script>
  • 4. Salvati

DEMONSTRATIE LIVE
Varianta 2 Instalarea Social Media Sharing
  • 1. Du-te la Blogger> Aspect
  • 2. Apasa Adaugati un obiect gadget alege HTML/JavaScript
  • 3. Adaugati codul de mai jos in interiorul casetei

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fa01db96996b59c"></script>
<script type='text/javascript'> 
document.doAT = function(cl)
{
        var myclass = new RegExp('hentry');
        var myTitleContainer = new RegExp('post-title');
        var myPostContent = new RegExp('post-footer');
        var elem = this.getElementsByTagName('div');
        for (var i = 0; i < elem.length; i++) 
        {
            var classes = elem[i].className;
            if (myclass.test(classes)) 
            {
                var container = elem[i];
                for (var b = 0; b < container.childNodes.length; b++)
                {
                    var item = container.childNodes[b].className;
                    if (myTitleContainer.test(item))
                    {
                        var link = container.childNodes[b].getElementsByTagName('a');
                        if (typeof(link[0]) != 'undefined')
                        {
                            var url = link[0].href;
                            var title = link[0].innerHTML;
                        }
                        else
                        {
                            var url = document.url;
                            var title =  container.childNodes[b].innerHTML;
                        }
                        if (typeof(url) == 'undefined'|| url == 'undefined' ){
                            url = window.location.href;
                        }
                    var singleq = new RegExp("'", 'g');
                    var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                          
                    title = title.replace(singleq, '&#39;', 'gi');
                    title = title.replace(doubleq, '&#34;', 'gi');
                    
                    }
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
                var n = document.createElement('div');
                var at = "<div class='addthis_toolbox addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_preferred_1'></a> <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a> <a class='addthis_button_preferred_4'></a> <a class='addthis_button_compact'></a> <a class='addthis_counter addthis_bubble_style'></a> </div> ";
                n.innerHTML = at;
                container.insertBefore(n , footer);
            }
        }
    return true;
};


document.doAT('hentry');
</script>


Varianta 3 Instalarea Social Media Sharing
Aceasta varianta este exact cu cea de-a doua varianta numai ca sunt mai mici butoanele de Sharing
  • 1. Du-te la Blogger> Aspect
  • 2. Apasa Adaugati un obiect gadget alege HTML/JavaScript
  • 3. Adaugati codul de mai jos in interiorul casetei




<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fa021d6074c66e4"></script>
<script type='text/javascript'> 
document.doAT = function(cl)
{
        var myclass = new RegExp('hentry');
        var myTitleContainer = new RegExp('post-title');
        var myPostContent = new RegExp('post-footer');
        var elem = this.getElementsByTagName('div');
        for (var i = 0; i < elem.length; i++) 
        {
            var classes = elem[i].className;
            if (myclass.test(classes)) 
            {
                var container = elem[i];
                for (var b = 0; b < container.childNodes.length; b++)
                {
                    var item = container.childNodes[b].className;
                    if (myTitleContainer.test(item))
                    {
                        var link = container.childNodes[b].getElementsByTagName('a');
                        if (typeof(link[0]) != 'undefined')
                        {
                            var url = link[0].href;
                            var title = link[0].innerHTML;
                        }
                        else
                        {
                            var url = document.url;
                            var title =  container.childNodes[b].innerHTML;
                        }
                        if (typeof(url) == 'undefined'|| url == 'undefined' ){
                            url = window.location.href;
                        }
                    var singleq = new RegExp("'", 'g');
                    var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                          
                    title = title.replace(singleq, '&#39;', 'gi');
                    title = title.replace(doubleq, '&#34;', 'gi');
                    
                    }
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
                var n = document.createElement('div');
                var at = "<div class='addthis_toolbox addthis_default_style ' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_preferred_1'></a> <a class='addthis_button_preferred_2'></a> <a class='addthis_button_preferred_3'></a> <a class='addthis_button_preferred_4'></a> <a class='addthis_button_compact'></a> <a class='addthis_counter addthis_bubble_style'></a> </div> ";
                n.innerHTML = at;
                container.insertBefore(n , footer);
            }
        }
    return true;
};


document.doAT('hentry');
</script>

  • 4. Salvati
 DEMONSTRATIE LIVE

3 comentarii:

  1. Multumim pentru munca si efortul depus.

    RăspundețiȘtergere
  2. Mulțumesc ! Varianta 2 este ceea ce căutam. Cum se poate modifica oare,ca să afișeze butoanele și în varianta mobile ?

    RăspundețiȘtergere
  3. Pe această pagină,în versiunea mobile apare un buton "Distribuiți". Dar este prea mic,neobservabil.L-am găsit cu greu,după ce mi-a venit ideea să caut să văd dacă există vreun buton de media sharing. Cu siguranță majoritatea nu l-au observat. Mi-ar place ceva foarte asemănător cu varianta 2, care să fie afișat și în versiunea mobile.
    Am pe blog un grup floating, (plutitor),dar problema urâtă constă în faptul că dacă pun linkul cu ?m=0 în coadă, ca să se deschidă pe tabletă sau telefon direct versiune desktop,când cititorul vrea să mărească textul unui articol, grupul de butoane se poziționează pe mijlocul paginii, împiedecând citirea. Oare cum pot rezolva problema,să se mute în stânga sau să dispară la mărirea textului ?

    RăspundețiȘtergere