Download Template Blogger Toko Online Gratis

Template Toko Online untuk Blogger yang yang Warung Gratis berikan ini terdapat JavaScript untuk menjumlah item pembelian dan biaya yang diakses oleh para pengunjung. Ini mempermudah pengunjung untuk langsung mengetahui berapa jumlah barang dan biaya yang harus dikeluarkan untuk membayar produk yang dibeli tanpa perlu menyulitkan pengunjung menghitungnya sendiri dengan kaltulator atau alat bantu hitung lainnya.

Berikut Download Template Toko Online untuk Blogger.

Blogger Store v.2 | by: javatemplates.com

DEMO | DOWNLOAD

Latar Belakang

Untuk meningkatkan jumlah pengunjung dan pembaca blog pribadi kita atau blog organisasi, maka blog tersebut harus kita buat senyaman mungkin bagi pembaca untuk mengeksplorasi isinya. Semakin baik sebuah website dalam mengarahkan pengunjung dengan sesuatu bacaan yang diminati atau dibutuhkannya, maka akan semakin senang mereka mengunjungi website tersebut berulang-kali.

Daftar Isi pada Blog?

Seperti halnya pada sebuah buku bacaan, komponen utama yang akan dijadikan acuan mengeksplorasi isi buku adalah Daftar Isi. Bagaimana dengan Blog? Rata-rata blog tidak memiliki fitur daftar isi sehingga akan membuat kesulitan bagi pengunjung menemukan informasi yang dicari atau dibutuhkan dari sebuah blog. Fitur umum yang ada di blog seperti Related Article, Arsip dan Artikel Populer sangat membantu pembaca namun itu masih belum cukup memudahkan atau menarik pembaca untuk mengeksplorasi isi blog lebih jauh! Disini blog butuh sekali yang namanya Daftar Isi atau juga dikenal dengan istilah TOCalias Table Of Contents.

Contoh Daftar Isi Blog

Berikut adalah salah satu gambar blog yang sudah mengimplementasikan fitur Daftar Isi pada blog organisasinya. Semua Judul Artikel beserta linknya ditampilkan dalam satu halaman dan dikelompokan sesuai dengan Label/Kategorinya. Disamping itu, fitur tambahan yang juga mempercantik Daftar Isi Blog ini adalah adanya fasilitas penanda artikel-artikel baru (New!!).

Bagaimana Cara Memasang Fitur Daftar Isi di Blog Saya?

Tertarik memiliki halaman TOC/Daftar Isi seperti contoh diatas? Yuk! Langsung saja ikuti langkahnya, tidak sampai satu menit selesai kok.

Buat halaman baru di blog
Beri Judul Daftar Isi dan pastekan kode yang ada dibawah pada isi halaman

Kode Widget TOC/Daftar Isi untuk Blogger:

 <p>  
 <script src="http://yourjavascript.com/81791141115/toc-pages.js" type="text/javascript"></script>    
 <script src="https://NAMABLOGKAMU.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
 </p>

Pastekan kode di atas ini pada isi halaman blog kamu, rubah NAMABLOGKAMU.blogspot.com sesuai dengan alamat blog kamu dan publish. Dia akan bekerja secara otomatis membuat daftar isi dari blog kamu dan menampilkannya seperti tampilan pada demo. Cukup mudah dan simple bukan? Jika masih kesulitan silakan posting komentar dibawah.

Demo Daftar Isi Blog:

Tags: Tips & Tricks

Hari ini kita akan melihat contoh hebat lain dari jam analog menggunakan kekuatan CSS3 dan jQuery perpustakaan paling canggih. Kami akan mulai dengan membuat jam dinding analog yang sangat keren dan realistis dengan properti CSS3 murni, dan menambahkan sedikit rotasi halus untuk memberikan efek putar pada jarum jam.

LIVE DEMO

HTML

<div id="clock"> <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/ hourhand.png"></div> <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/ minhand.png"></div> <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/ sechand.png"></div> </div>

CSS

Sekarang, saatnya bermain dengan beberapa properti css3 keren seperti transisi, transformasi dan pelonggaran css.

#clock {
   background-image: url ("http://demo.web3designs.com/images/clockBg.png");
   tinggi: 200px;
   posisi: relatif;
   width: 200px
}
#clock div {
   position: absolute;
   kiri: 50%
}
#clock img [src * = "second"] {
   transisi: transform 600000s linear 0s;
}
#clock: target img [src * = "second"] {
   transform: rotate (3600000deg);
}
#clock img [src * = "minute"] {
   transisi: transform 360000s linear 0s;
}
#clock: target img [src * = "minute"] {
   transform: rotate (36000deg);
}
#clock img [src * = "hour"] {
   transisi: mentransformasikan 216000an linear 0s;
}
#clock: target img [src * = "hour"] {
   transform: rotate (360deg);
}

jQuery atau Java-Script pertama - tama kita akan memasukkan pustaka jQuery paling canggih.Setelah menambahkan pustaka yang kuat ini kita akan menggunakan beberapa baris kode java-script khusus untuk memutar tiga tangan jam yaitu Jam, Menit dan Kedua. Itu dia.

fungsi Clock_dg (prop) {
var angle = 360/60,
date = Date baru ();
var h = date.getHours ();
if (h> 12) {
h = h - 12;
}
jam = h;
menit = date.getMinutes (),
kedua = date.getSeconds (),
hourAngle = (360/12) * jam + (360 / (12 * 60)) * menit;
$ ('# minute') [0] .style [prop] = 'rotate (' + angle * menit + 'deg)';
$ ('# second') [0] .style [prop] = 'rotate (' + angle * second + 'deg)';
$ ('# hour') [0] .style [prop] = 'rotate (' + hourAngle + 'deg)';
}
$ (function () {
var props = '
prop,
el = document.createElement ('div');
for (var i = 0, l = props.length; i <l; i ++) {
if (typeof el.style [props [i]]! == "undefined") {
prop = props [i];
istirahat;
}
}
setInterval (function () {
Clock_dg (prop)
}, 100);
});

KOMPATIBILITAS BROWSER: Seperti yang kami sebutkan sebelumnya, teknologi ini dikembangkan dengan jQuery sehingga didukung oleh hampir semua browser utama. ada kemungkinan bahwa sintaks dan perilaku dapat diubah di versi browser masa depan. Untuk hari ini, didukung oleh browser berikutnya:

Chrome 15+
Firefox 9+
Safari 4+
IE9 +
Opera 12+

Salah satu widget hemat ruang untuk blog, tentu saja adalah widget multi-tab, yang hampir merupakan keharusan bagi blog mana pun. Anda dapat menggunakannya untuk posting populer, komentator top, posting terbaru, posting terbaru atau widget apa pun yang Anda suka.
Meskipun Anda dapat menemukan beberapa metode lain di Internet, tetapi mereka semua cukup membingungkan, sehingga Anda dapat menggunakan metode ini, yang cukup mudah, tetapi tentu saja perlu mengubah template. Proses lengkap terutama memiliki dua langkah:

LANGKAH 1

Masuk ke Blogger. Sekarang pergi ke Layout dan kemudian klik tab " Edit HTML ".
Kemudian unduh templat yang ada sebagai cadangan.

Sekarang temukan [CTRL + F] kode ini:

</head>

Kemudian segera DI ATAS / SEBELUM, tempel kode ini:

<! - MUTITABBED-MULAI BARU -> <tautan href = 'http: //dsai.588.googlepages.com/tabcontent.css' rel = 'stylesheet' type = 'text / css' />
<script src = 'http: //dsai.588.googlepages.com/tabcontent.js' type = 'text / javascript'>
/ ************************* ************************
* Skrip Konten Tab v2.2- & # 169; Pustaka kode Dynamic Drive DHTML (www.dynamicdrive.com)
* Pemberitahuan ini HARUS tetap utuh untuk penggunaan yang sah
* Via http://BloggerStop.Net
* Kunjungi Dynamic Drive di http://www.dynamicdrive.com/ untuk kode sumber lengkap
* ******************************************** /
</ skrip > <! - NEW-MUTITABBED-STOPS ->

Sekarang klik Simpan Templat dan Klik tab "Elemen Halaman".
Kemudian klik "Tambahkan Gadget" dan pilih sebagai jenis "HTML / JavaScript".
Dalam widget baru, rekatkan salah satu dari 3 kode yang ditampilkan di bawah ini (tangkapan layar ditampilkan di atas kode, dan tautan demo telah diberikan di atas):

Kode di sini:

<span style="font-family: Courier New, Courier, monospace;"><h3>Demo 

<ul id="countrytabs" class="shadetabs">

<li><a href="#" rel="country1" class="selected">Tab 1</a></li>

<li><a href="#" rel="country2">Tab 2</a></li>

<li><a href="#" rel="country3">Tab 3</a></li>

<li><a href="#" rel="country4">Tab 4</a></li>

<li><a href="http://mix--er.blogspot.com/">Dynamic</a></li>

</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">

Tab content 1 here

Tab content 1 here

</div>

<div id="country2" class="tabcontent">

Tab content 2 here

Tab content 2 here

</div>

<div id="country3" class="tabcontent">

Tab content 3 here

Tab content 3 here

</div>

<div id="country4" class="tabcontent">

Tab content 4 here

Tab content 4 here

</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")

countries.setpersist(true)

countries.setselectedClassTarget("link") //"link" or "linkparent"

countries.init()

</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p></span>

Kode di sini:

<span style="font-family: Courier New, Courier, monospace;"><h3>Demo 

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">

Arbitrary DIV 1

</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">

Arbitrary DIV 2

</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">

Arbitrary DIV 3

</div>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">

Tab content 1 here

Tab content 1 here

</div>

<div id="tcontent2" class="tabcontent">

Tab content 2 here

Tab content 2 here

</div>

<div id="tcontent3" class="tabcontent">

Tab content 3 here

Tab content 3 here

</div>

<div id="tcontent4" class="tabcontent">

Tab content 4 here

Tab content 4 here

</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">

<ul>

<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>

<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>

<li><a href="#" rel="tcontent3">Tab 3</a></li>

<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>

<li><a href="http://mix--er.blogspot.com/">Tab Content</a></li>

</ul>

</div>

<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")

myflowers.setpersist(true)

myflowers.setselectedClassTarget("link") //"link" or "linkparent"

myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>

<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p></span>

Kode di sini:

<div style="text-align: left;">

<span style="font-family: Courier New, Courier, monospace;"><h3>Demo 

<div style="text-align: left;">

<span style="font-family: Courier New, Courier, monospace;"><div id="pettabs" class="indentmenu"></span></div>

<span style="font-family: Courier New, Courier, monospace;"><ul>

</span><div style="text-align: left;">

<span style="font-family: Courier New, Courier, monospace;">>Tab 1</a></li>

<li><a href="#" rel="dog2">Tab 2</a></li>

</span></div>

<span style="font-family: Courier New, Courier, monospace;"><li><a href="#" rel="dog1" class="selected

"<li><a href="

<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>

</span><div style="text-align: left;">

<span style="font-family: Courier New, Courier, monospace;">e="border:1px solid gray; width:550px; height: 150p</span></div>

<span style="font-family: Courier New, Courier, monospace;"><li><a href="http://www.google.com">Google</a></li>

</ul>

<br style="clear: left" />

</div>

<div sty

lx; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">

Tab content 1 here

Tab content 1 here

</span><div style="text-align: left;">

<span style="font-family: Courier New, Courier, monospace;"><div id="dog2" class="tabcontent">

Tab content 2 here

Tab content 2 here

</div>

<div id="dog3" class="t</span></div>

<span style="font-family: Courier New, Courier, monospace;"><p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>

</div

>abcontent">

Tab content 3 here

Tab content 3 here

</div>

<div id="dog4" class="tabcontent">

Tab content 4 here

Tab content 4 here

</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")

</span><div style="text-align: left;">

</div>

<span style="font-family: Courier New, Courier, monospace;">mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(2000)

</span><div style="text-align: left;">

</div>

<span style="font-family: Courier New, Courier, monospace;"></script>

</span>

SEKARANG KLIK HEMAT

Other News

Template Blogger Toko Online Gratis

Download Template Blogger Toko Online Gratis

Cara Membuat Halaman Daftar Isi di Blog (Sangat Mudah)

Artikel Serupa yang Direkomendasikan

Jam Analog Menggunakan Css3 dan Jquery

Widget Multi-Tab Baru Untuk Blog Blogger / BlogSpot

Daftar Isi

ABOUT AUTHORS

Other News

Template Blogger Toko Online Gratis

Download Template Blogger Toko Online Gratis

What's Related?

Cara Membuat Halaman Daftar Isi di Blog (Sangat Mudah)

Latar Belakang

Daftar Isi pada Blog?

Contoh Daftar Isi Blog

Bagaimana Cara Memasang Fitur Daftar Isi di Blog Saya?

Kode Widget TOC/Daftar Isi untuk Blogger:

Demo Daftar Isi Blog:

Artikel Serupa yang Direkomendasikan

Jam Analog Menggunakan Css3 dan Jquery

Widget Multi-Tab Baru Untuk Blog Blogger / BlogSpot

Daftar Isi

ABOUT AUTHORS