Cara Buat Toko Online Modal Dengkul | Zocko
Tuesday, November 1, 2016
Ceritanya Sekarang lagi mau garap toko di Onlinekan, maka dibuatlah Warung Belanja Online agar Visitor yang datang diarahkan untuk berbelanja Online.
Modalnya cuma Buat Toko Online dari Blogger. Template Toko Online Blogger banyak berseliuran di dunia maya tinggal download dan extrak dan jadi deh sebuah Warung Belanja Online dari blogger. salah satunya ane gunakan Template Warung Belanja Online.
saat memposting banyak artikel produk rupanya ada masalah dengan tampilan halaman depannya tidak munculnya gambar Thumbnail sehingga terlihat kurang menarik sedikit dengan template ini.
Usut punya usut rupanya ane memposting artikel produk Warung Belanja Online tidak serta merta meng-upload gambar dari cumputer, hanya mengandalkan copas dan copas salinan produk yang pengen dijual, kebetulan produk yang dipajang di warung.alisyahbana.com merupakan produk dari penyedia produk dropshop. inilah kekuatan pemasaran sebuah Toko Online tidak musti harus punya produk dulu baru bikin mylapak, sekarang dah canggih dan serba multiguna, kita bisa berdagang langsung salah satunya dari dropshoping ini.
Tempat Mencari Keberuntungan Toko Online dari Zocko, di Zocko sudah disiapkan alat tool untuk monetize penghasilan yang tak terbatas, mulai dari produk yang berpariasi banyaknya, serta komisi yang berbeda-beda, bisa kecil komisi dan bisa pula besar komisinya tergantung saat pengunjung yang datang dari blog kita lalu mengklik produk yang disukainya disertai dengan pembelian produk.
Mudah khan caranya. saat share produk Zocko kita bisa langsung publikasikan link yang didapat ke social media seperti, twitter, fb-an, pinterest, tumblr, dan seperti ane langsung post kan ke blog Warung Belanja Online ini.
tidak direpotkan dengan cari-cari gambar disertai Upload, sudah tersedia semuanya, tinggal copas doang script URL Zocko dah bisa langsung promosi.
Cuma saat posting artikel ini rupanya terkendala pada templete-nya tidak responsive buat thumbnail yang ane copas dari Zocko, hasilnya gambar tidak tampak yang ada Judul Artikel dan halaman gambar Slide yang bergerak itu. akhirnya utak-atik template ane nemu sebuah script yang bisa Membuat Gambar Thumbnail muncul dihalaman depan produk toko Online.
Saat ini hasil tampilan Warung Belanja Online sudah mendekati sempurna dikit lah.
Inilah scriptnya yang ane pakai, diletakkan sesudah <head>
jika bermanfaat silahkan share artikel ini
NB:
Skript Menampilkan Halaman depan cuma Judul Artikel nya saja:
Cari di HTML Editor ini
tidak direpotkan dengan cari-cari gambar disertai Upload, sudah tersedia semuanya, tinggal copas doang script URL Zocko dah bisa langsung promosi.
Cuma saat posting artikel ini rupanya terkendala pada templete-nya tidak responsive buat thumbnail yang ane copas dari Zocko, hasilnya gambar tidak tampak yang ada Judul Artikel dan halaman gambar Slide yang bergerak itu. akhirnya utak-atik template ane nemu sebuah script yang bisa Membuat Gambar Thumbnail muncul dihalaman depan produk toko Online.
Saat ini hasil tampilan Warung Belanja Online sudah mendekati sempurna dikit lah.
 |
| Sebelum Sesudah |
Inilah scriptnya yang ane pakai, diletakkan sesudah <head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var width = 200;
var height = 170;
var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg58e48eY3jTrke1jlTjw9QBA2RENzqHB2UU4qpl-zSyCHAN6z-wgPMw-ftcIq9mnOFng4M-ap2nMnUGBsgFr3JDAW5N_cqe1tsRW_uMDYJkjlWUMOFOlHPrTx-qjpabv1KuzlQhySygmQ/s1600/no-thumb.png';
var margins = "0px 0px 10px 10px";
var fitThumb = 1;
var titleTopPadding = 5;
var titleBottomPadding = 8;
var titleLeftRightPadding = 5;
var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
$('.post-body').each(function(n, wrapper) {
var wrapper = $(wrapper);
var image = $(wrapper).find('img').first();
var link = wrapper.parent().find('h3 a');
var linkURL = link.attr('href');
var linkTitle = link.text();
$(link).remove();
wrapper.empty();
if (image.attr('src')) {
var thumbHeight = image.attr('height');
var thumbWidth = image.attr('width');
var thumbParent = $(image).parent();
wrapper.append(thumbParent);
if (fitThumb) {
image.attr({
src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
});
image.attr('width', width).attr('height', height);
} else {
image.attr({
src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
});
image.attr('width', width);
var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
image.attr('height', changeHeight);
}
} else {
var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
var thumbParent = $('<a>').append(image).appendTo(wrapper);
}
thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');
var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
var ptitleHeight = thumbTitle.height();
var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
thumbTitle.css('margin-top', '-' + summary + 'px');
wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
});
$('#blog-pager').css('clear', 'both');
});
function hideLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length;++i) {
images[i].onmouseover = function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
};
}
}
if (window.addEventListener) {
window.addEventListener('load', hideLightbox, undefined);
} else {
window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display: none;
}
a.postThumbnail div {
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='
#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=70)"
;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>
jika bermanfaat silahkan share artikel ini
NB:
Skript Menampilkan Halaman depan cuma Judul Artikel nya saja:
Cari di HTML Editor ini
<b:include data='post' name='post'/>Ganti dengan ini:
<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->
Atau Pakai ini juga bisa: asal diletakkan sesudah <head>
<style type='text/css'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</b:if>
</style>
