terça-feira, 2 de fevereiro de 2016

Testimonial Widget para Blogger

testimonial-widget-for-blogger



Hoje vamos compartilhar com você um Widget para colocar no seu blog com o intuito de mostrar maior credibilidade é também bastante utilizado em grandes portais como portifolio e outros se você deseja adicionar isso no seu blogger siga os passos abaixo:




Faça login no blogger 
então em modelo editar/HTML
com as teclas combinadas CTRL+F busque por
]]></b:skin> e acima disso copie e cole o seguinte código.

/* Testimonial page */
.testimonials {
height: 270px;
position: relative;
}
.ism-testimonial {
position: absolute;
width: 100%;
top: 0;
left: 0;
opacity: 0;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.ism-testimonial p {
font-size: 32px;
line-height: 51px;
font-weight: 300;
margin: 25px 0 20px;
text-align: center;
font-family: raleway,lato,arial,san-serif;
}
.testi-author {
font-size: 16px;
display: block;
color: #00ab6f;
}
.testimonials-authors {
float: left;
margin: 0 0 75px;
width: 100%;
}
.testimonials-authors li {
float: left;
transition-duration: .4s;
opacity: .7;
}
.active-testimonial {
opacity: 1!important;
transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
}
.active-testimonial img {
-webkit-filter: grayscale(0%)!important;
-moz-filter: grayscale(0%)!important;
filter: grayscale(0%)!important;
}
.testimonials-authors li img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
#testi_cli {
height: 500px;
width: 100%;
margin: auto;
}
#testi_cli h3 {
margin-bottom: 0px;
font-size: 35px;
text-align: center;
font-family: raleway,lato,arial,sans-serif;
font-weight: 600;
line-height: 40px;
color: #4e5563;
}
#testi_cli p {
text-align: center;
margin-top: 5px;
}
#test_wrap {
float: left;
width: 100%;
border-top: 1px solid #ebebeb;
}
.trigger {
float: left;
margin-top: 200px;
}
.client {
font-size: 17px;
}
.bubbleInfo {
position: relative;
}
.popup {
position: absolute;
display: none;
font-family: raleway,lato,arial,sans-serif;
font-size: 28px;
line-height: 40px;
font-weight: 300;
text-align: center;
margin-top: 20px;
}
#testi_cli {
    width: 100%;
}
.testimonials-authors li img {
    width: 79px;
    height: auto;
}
.ism-testimonial p {
    font-size: 17px;
    line-height: 32px;
}
li#testimonial-3 {
    display: none;
}
.active-testimonial {
    transform: translateY(-15px);    -ms-transform: translateY(-15px);  
    -webkit-transform: none;
}
.testimonials-authors li img {
  width: 92px;
}

Copie então o seguinte código abaixo e cole antes de </body>

script type='text/javascript'>/*<![CDATA[*/function showpageCount(json) {    var thisUrl = home_page_url;    var htmlMap = new Array();    var thisNum = 1;    var postNum = 1;    var itemCount = 0;    var fFlag = 0;    var eFlag = 0;    var html = '';    var upPageHtml = '';    var downPageHtml = '';    for (var i = 0, post; post = json.feed.entry[i]; i++) {        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);        timestamp = encodeURIComponent(timestamp1);        var title = post.title.$t;        if (title != '') {            if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {                if (thisUrl.indexOf(timestamp) != -1) {                    thisNum = postNum                }                if (title != '') postNum++;                htmlMap[htmlMap.length] = '/search?updated-max=' + timestamp + '&max-results=' + pageCount            }        }        itemCount++    }    for (var p = 0; p < htmlMap.length; p++) {        if (p >= (thisNum - displayPageNum - 1) && p < (thisNum + displayPageNum)) {            if (fFlag == 0 && p == thisNum - 2) {                if (thisNum == 2) {                    upPageHtml = '<span class="showpage"><a href="/">' + upPageWord + '</a></span>'                } else {                    upPageHtml = '<span class="showpage"><a href="' + htmlMap[p] + '">' + upPageWord + '</a></span>'                }                fFlag++            }            if (p == (thisNum - 1)) {                html += '<span class="showpagePoint">' + thisNum + '</span>'            } else {                if (p == 0) {                    html += '<span class="showpageNum"><a href="/">1</a></span>'                } else {                    html += '<span class="showpageNum"><a href="' + htmlMap[p] + '">' + (p + 1) + '</a></span>'                }            } if (eFlag == 0 && p == thisNum) {                downPageHtml = '<span class="showpage"> <a href="' + htmlMap[p] + '">' + downPageWord + '</a></span>';                eFlag++            }        }    }    if (thisNum > 1) {        html = '' + upPageHtml + ' ' + html + ' '    }    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (' + (postNum - 1) + ')</span>' + html;    if (thisNum < (postNum - 1)) {        html += downPageHtml    }    if (postNum == 1) postNum++;    html += '</div>';    var pageArea = document.getElementsByName("pageArea");    var blogPager = document.getElementById("blog-pager");    if (postNum <= 2) {        html = ''    }    for (var p = 0; p < pageArea.length; p++) {        pageArea[p].innerHTML = html    }    if (pageArea && pageArea.length > 0) {        html = ''    }    if (blogPager) {        blogPager.innerHTML = html    }}
function showpageCount2(json) {    var thisUrl = home_page_url;    var htmlMap = new Array();    var isLablePage = thisUrl.indexOf("/search/label/") != -1;    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") + 14, thisUrl.length) : "";    thisLable = thisLable.indexOf("?") != -1 ? thisLable.substr(0, thisLable.indexOf("?")) : thisLable;    var thisNum = 1;    var postNum = 1;    var itemCount = 0;    var fFlag = 0;    var eFlag = 0;    var html = '';    var upPageHtml = '';    var downPageHtml = '';    var labelHtml = '<span class="showpageNum"><a href="/search/label/' + thisLable + '?&max-results=' + pageCount + '">';    var thisUrl = home_page_url;    for (var i = 0, post; post = json.feed.entry[i]; i++) {        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);        timestamp = encodeURIComponent(timestamp1);        var title = post.title.$t;        if (title != '') {            if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {                if (thisUrl.indexOf(timestamp) != -1) {                    thisNum = postNum                }                if (title != '') postNum++;                htmlMap[htmlMap.length] = '/search/label/' + thisLable + '?updated-max=' + timestamp + '&max-results=' + pageCount            }        }        itemCount++    }    for (var p = 0; p < htmlMap.length; p++) {        if (p >= (thisNum - displayPageNum - 1) && p < (thisNum + displayPageNum)) {            if (fFlag == 0 && p == thisNum - 2) {                if (thisNum == 2) {                    upPageHtml = labelHtml + upPageWord + '</a></span>'                } else {                    upPageHtml = '<span class="showpage"><a href="' + htmlMap[p] + '">' + upPageWord + '</a></span>'                }                fFlag++            }            if (p == (thisNum - 1)) {                html += '<span class="showpagePoint">' + thisNum + '</span>'            } else {                if (p == 0) {                    html = labelHtml + '1</a></span>'                } else {                    html += '<span class="showpageNum"><a href="' + htmlMap[p] + '">' + (p + 1) + '</a></span>'                }            } if (eFlag == 0 && p == thisNum) {                downPageHtml = '<span class="showpage"> <a href="' + htmlMap[p] + '">' + downPageWord + '</a></span>';                eFlag++            }        }    }    if (thisNum > 1) {        if (!isLablePage) {            html = '' + upPageHtml + ' ' + html + ' '        } else {            html = '' + upPageHtml + ' ' + html + ' '        }    }    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (' + (postNum - 1) + ')</span>' + html;    if (thisNum < (postNum - 1)) {        html += downPageHtml    }    if (postNum == 1) postNum++;    html += '</div>';    var pageArea = document.getElementsByName("pageArea");    var blogPager = document.getElementById("blog-pager");    if (postNum <= 2) {        html = ''    }    for (var p = 0; p < pageArea.length; p++) {        pageArea[p].innerHTML = html    }    if (pageArea && pageArea.length > 0) {        html = ''    }    if (blogPager) {        blogPager.innerHTML = html    }}var home_page_url = location.href;var thisUrl = home_page_url;if (thisUrl.indexOf("/search/label/") != -1) {    if (thisUrl.indexOf("?updated-max") != -1) {        var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))    } else {        var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))    }}var home_page = "/";if (thisUrl.indexOf("?q=") == -1) {    if (thisUrl.indexOf("/search/label/") == -1) {        document.write('<script src="' + home_page + 'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')    } else {        document.write('<script src="' + home_page + 'feeds/posts/full/-/' + lblname1 + '?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')    }}

$(document).ready(function() {    var e = $(".ism-testimonial"),        t = $(".testimonials-authors li");    t.hover(function() {        var t = $(this),            n = "active-testimonial",            r = t.index(),            i = t.siblings("." + n).index();        if (t.hasClass(n)) return;        t.siblings("li").removeClass(n).end().addClass(n);        e.eq(i).stop(true, true).animate({            opacity: 0        }, 100, function() {            $(this).hide();            e.eq(r).css({                display: "block",                opacity: 0            }).animate({                opacity: 1            }, 100)        })    })});
/*]]>*/  </script>

Salve o código Html


Va em Layout > Add Widget > HTML/JavaScript > Cópie o código abaixo e cole isso de preferencia coloque esse widget no footer do blogger



<!--Testimonal-->
<div id='test_wrap'>
<div id='testi_cli'>
<h3>What our Customers are saying?</h3>
<p>Uncut veiws of our lovely clients, users and customers</p>
<div class='testimonials'>
<div class='ism-testimonial' id='testimonial-1' style='opacity: 1; display: block;'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA (SEO Researcher)</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-2'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-3'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-4'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-5'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-6'>
<p> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-7'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-8'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-9'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-10'>
<p>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span class='testi-author'>- NAMA KLIEN ANDA</span>
</p>
</div>
</div>
<ul class='testimonials-authors' id='testimonials-authors'>
<li class='active-testimonial' id='testimonial-1'>
<img height='100' src='URL DA IMAGEM' width='93'/>
</li>
<li id='testimonial-2'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-3'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-4'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-5'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-6'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-7'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-8'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-9'>
<img height='100' src='URL DA IMAGEM' width='94'/>
</li>
<li id='testimonial-10'>
<img height='100' src='URL GAMBAR ANDA' width='94'/>
</li>
</ul>
</div>
</div>

Salve e veja o resultado.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner