Cara Membuat Widget Testmonial Ala Templateism Pada Blog

Pernah berkunjung ke www.templateism.com, website yang menyediakan beberapa template blog gratis dan berbayar alias Premium. Jika belum pernah, silahkan kunjungi website tersebut dan scroll ke bagian bawah, disana anda dapat melihat sebuah halaman testimonial. Berminat membuatnya? Yah, anda berada ditempat yang tepat. Kali ini saya akan membagikan cara membuat widget testimonial ala Templateism pada blog anda.

Cara Membuat Widget Testmonial Ala Templateism Pada Blog

Apasih manfaat testimonial pada blog anda? terutama jika blog anda adalah toko online, baca Rahasia Desain Toko Online Untuk Meningkatkan Penjualan.

Cara Membuat Widget Testmonial Ala Templateism Pada Blog

1. Masuk akun blog anda, Dashbor > Template > Edit HTML

2. Copy kode dibawah ini tepat diatas/sebelum ]]></b:skin> 

/* 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;
}

3. Setelah itu, Copy kode dibawah ini lalu Paste diatas kode </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>

3. Langkah terakhir, keluar dari Edit HTML lalu menuju Layout > Add Widget > HTML/JavaScript > Copy kode dibawah ini lalu paste kan ke dalamnya. Catatan : untuk memaksimalkan widget testimonial ini, letakan pada kolom bagian bawah / footer.

Meletakan Testimonial dikolom widget bagian bawah/footer
Kolom Widget Bagian Bawah

<!--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>
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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-3'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-4'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-5'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-6'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-7'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-8'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-9'>
<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</span>
</p>
</div>
<div class='ism-testimonial' id='testimonial-10'>
<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</span>
</p>
</div>
</div>
<ul class='testimonials-authors' id='testimonials-authors'>
<li class='active-testimonial' id='testimonial-1'>
<img height='100' src='URL GAMBAR ANDA' width='93'/>
</li>
<li id='testimonial-2'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-3'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-4'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-5'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-6'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-7'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-8'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-9'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
<li id='testimonial-10'>
<img height='100' src='
URL GAMBAR ANDA' width='94'/>
</li>
</ul>
</div>
</div>

Keterangan :

1. Teks berwarna merah Testimonial-1 s/d Testimonial-10 mendandakan urutan kalimat testimonial dari sebelah kiri ke kanan, anda dapat menyesuaikannya.

2. Ganti setiap kalimat "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." dengan kalimat yang anda inginkan.

3. Silahkan ganti NAMA KLIEN ANDA dengan nama-nama klien anda yang memberikan testimonial, dari atas kebawah sama dengan dari kiri ke kanan.

4. Silahkan ganti URL GAMBAR ANDA dengan url gambar foto.

Demikian cara membuat widget testimonial ala Templateism pada blog, jika anda mengalami kesulitan dalam membuatnya, saya siap membantu. Silahkan bertanya lewat kolom komentar atau menghubungi saya lewat halaman contact. Semoga bermanfaat


Comments