Johny Magstore, Template Magazine untuk Toko Online

Template ini memenuhi permintaan dari beberapa teman blogger pada kotak komentar yang menginginkan ada tambahan untuk tampilan grid dan list style pada postingan di homepage. Saya membuat template toko online ini bukan karena banyak peminatnya tapi lebih karena memenuhi permintaan dari teman. Tanpa mereka juga blog saya ini tidak akan berkembang, untuk itu pada kesempatan ini saya pribadi mengucapkan terima kasih yang sebesar-besarnya kepada teman-teman blogger semua yang telah sudi mampir dan berkunjung ke blog saya ini, dan tak lupa juga untuk para pengguna template buatan saya, terima kasih sudah memberikan apresiasi yang begitu tinggi kepada saya. Kalau disuruh memilih, saya lebih suka membuat template biasa, karena disamping lebih mudah, tampilan bisa lebih variatif, beda sama template toko online yang tampilannya melulu berbentuk gallery produk. Terus terang untuk membuat template toko online diperlukan waktu yang lebih lama. Tapi saya jangan disuruh membuat atau convert template yang persis seperti situs-situs yang sudah jadi, maksudnya kemarin ada yang minta dibuatkan template yang seperti Mashable, kompas, dan lain-lain... ogah saya, serius

Sebenarnya template ini hanya modifikasi dari template toko online saya sebelumnya Johny Blackstore, tambahan fitur grid dan list disini saya memakai jQuery Cookies buatan Sebastian Sulinski dari SSD Tutorial (klik link untuk tutorial membuat grid and list view). Slider yang saya pakai disini juga masih sama hanya ukurannya lebih besar dan ada tambahan thumbnail untuk fungsi pagination.

Fitur yang terdapat dalam template Johny Magstore :

1. Shopping Cart dari wojodesign.com
2. Grid and list view dari SSD Tutorial
3. Simple Image Panner and Zoomer v1.1 dari Dynamicdrive

Posting Artikel

Dalam membuat postingan, perhatikan struktur kode di bawah ini :

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kode warna merah diatas. Pilih gambar yang ukuran pixel nya sedang, antara 200 - 300 px.
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Shopping Cart

Fitur Shopping Cart masih menggunakan simplecart dari wojodesign.com. Dan hanya support untuk top currency, antara lain : Dollar, Poundsterling dan Euro. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal).

Fitur Pendukung

Slider yang saya pasang pada template ini bekerja otomatis berdasarkan label yang Anda masukkan pada kotak HTML/Javascript. Perhatikan gambar di bawah ini :

Dari gambar diatas lihat kolom kotak merah, klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :

Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan. Untuk lebih jelasnya silahkan baca tutorial dalam membuat slider ini disini.

Dua navigasi pada template ini semuanya harus memasukkan manual, tidak seperti pada template sebelumnya terdapat satu navigasi khusus untuk halaman statis, meskipun begitu template ini sudah support dengan static page (halaman statis).

Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada widget shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://kauman.googlecode.com/files/WojosimpleCart-USD.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/magstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Disini sudah saya siapkan dua tombol dibawah gambar produk di homepage yaitu add to cart dan view detail, jika tidak ingin memakai shopping cart sebagai alat transaksi. Anda tinggal rubah tombol add to cart menjadi order dan arahkan ke direct link halaman formulir order yang sudah anda buat, misalnya seperti ini (contoh form ini dibuat menggunakan docs google). Jika anda menggunakan form order untuk transaksi penjualan,  fitur shopping cart tidak terpakai, jadi hapus semua script CSS dan javascript untuk shopping cart pada template ini. Selamat mencoba dan semoga bermanfaat

Updates :

Dari beberapa komentar yang masuk, ada yang menginginkan untuk menampilkan nama barang yang ada di shopping cart, untuk itu silahkan di download ulang template ini sudah saya updates dengan menampilkan nama barang (lihat demo)

Template toko online Johny Blackstore
Dua template Toko Online tanpa shopping cart

Demo | Download

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Diposting oleh NEik.DI Senin, Mei 28, 2012 0 komentar

Johny Blackstore, Template Toko Online Asal Jadi

Template ini adalah permintaan teman blogger via email, Abu Dzaky atau siapa ya? lupa saya namanya. Intinya dia meminta untuk dibuatkan sebuah template untuk jualan online. Sebenarnya saya tidak begitu bisa untuk membuat template toko online, disamping kesibukan saya di dunia nyata yang belakangan ini banyak menyita waktu juga karena keterbatasan kemampuan saya dalam membuat shopping cart untuk memudahkan transaksi online via Paypal. Template ini namanya Johny Blackstore, nggak cocok ya...? hehehehe. Bodo amat... yang penting ada store nya

Shopping cart yang saya gunakan disini adalah simplecart made in wojodesign.com. Sudah saya masukkan currency IDR atau rupiah pada script tersebut tapi tetap saja tidak bisa digunakan untuk transaksi langsung via paypal, karena Paypal belum menerima rupiah sebagai alat pembayaran. Jadi jika Anda ingin memakai template ini untuk jualan online, barangnya dinilai pakai dollar aja ya...??. Sekarang saya akan menjelaskan instalasi template dan beberapa fitur yang terdapat pada template ini :

Posting Artikel

Dalam membuat artikel baru, perhatikan struktur kode di bawah ini :

<div class="product_image">

<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>

<span class="item_price">$00.00</span></div>

<div class="product_describe">

Description your product.............
</div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kedua kode warna merah diatas. Usahakan gambar yang Anda upload ukuran panjang dan lebar sama, misalnya 300 x 300 px
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Shopping Cart

Fitur Shopping Cart disini digunakan untuk memudahkan pengelola toko online dalam transaksi via Paypal. Tapi karena Paypal belum menerima pembayaran Rupiah, jadi setting untuk currency masih dalam dollar. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal)

Fitur Pendukung

1. Slider yang saya pasang disini bekerja otomatis, menampilkan artikel terbaru anda dengan jumlah 8 postingan. Jika Anda ingin menampilkan per kategori atau label, cari kode ini pada Edit HTML (jangan lupa centang expand widget templates) :
   

   <script>

   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>

   Ganti dengan kode berikut :
   

   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/your label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>

   Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
   
2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   
3. Widget Contact Online
   Masukan kode berikut pada kotak HTML/Javascript
   
   <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
   <tbody>
   <tr>
   <td height='1'>Customer Service A</td>
   
   <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername1'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername1&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
   </tr>
   </tbody>
   </table>
   
   <div style='display: block;'>
   <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
   <tbody>
   <tr>
   <td align='left' height='1'>Custumer Service B</td>
   <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername2'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername2&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
   </tr>
   </tbody>
   </table></div>
   
   <p align="center"><a href="http://mas-template.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjcIBbms_v-WLanC1A0WIw6WEvNX4ju77BWQdC4hPYdofMosBhkIRbpSBJXsF0KVRdwkzVdaGQ6gptQt6Pry3owaWlPmQ3rLKaf_rTs3gomd2DtdyhS6sm0s-p8wPO_1HtI0reQzfyik/s1600/donate.png" alt="twitter maskolis" /></a></p>
   Ganti youryahoousername1 dan youryahoousername2 dengan ID yahoo Anda.
4. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
   

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
5. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelasnya silahkan baca tutorialnya disini.

Fitur yang lain saya kira mudah, seperti memasang Yahoo Messenger dan lain-lain. Template ini juga dilengkapi dengan efek zooming pada gambar jika Anda mengarahkan cursor pada gambar, gambar itu akan otomatis membesar sesuai dengan letak cursor. Mungkin hanya itu yang perlu saya jelaskan mengenai template ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Showcase
Jika Anda ingin melihat blog yang sudah memakai template ini. bisa dilihat disini :
Toko Madu Mulia Alam Nusantara
Johny Online Store

Sangat disarankan :

1. Baca tutorial pemasangan template ini sampai selesai.
2. I suggest to upload gambar produk dengan ukuran panjang dan lebar sama, misalnya 300 x 300 px.
3. Agar hasil akhir dalam penggunaan template ini maksimal dan tata letak post teratur, judul post jangan terlalu panjang, karena akan menggeser gambar ke bawah.
4. Untuk mempercepat loading, simpan javascript yang ada pada template ini di tempat penyimpanan Google Code Anda. Bagi yang belum bisa cara menyimpan di Google Code bisa dibaca disini tutorialnya.

Update
Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://jagad.googlecode.com/files/WojosimpleCart-IDR.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/blackstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Updates :

Dari beberapa komentar yang masuk, ada yang menginginkan untuk menampilkan nama barang yang ada di shopping cart, untuk itu silahkan di download ulang template ini sudah saya updates dengan menampilkan nama barang (lihat demo)

Template toko online terbaru Johny Magstore
Dua template Toko Online tanpa shopping cart

Demo | Download

Update Templates

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Diposting oleh NEik.DI Rabu, Mei 23, 2012 0 komentar

Serial Petualangan Tiga Pendekar Kenthir

Tulisan ini hanya iseng nggak ada hubungannya dengan blogging, maksudnya biar kita refreshing dikit lah. Masa mau ngutak-atik blog mulu tiap hari. Lagian saya juga lagi tumpul nggak ada ide mau bikin apa. Tulisan ini juga saya tulis di blog planetkenthir.com blog komunitas saya bersama teman-teman yang tiap hari selalu dipenuhi dengan tawa dan canda, mentertawakan jaman yang sepertinya sudah diatur oleh orang-orang yang mempunyai wewenang, mengekang kita dalam berekspresi membuat manusia yang pada dasarnya lahir sebagai makluk Tuhan yang bebas menjadi dibatasi daya kreativitasnya.

Sudah lama saya sudah meninggalkan mereka untuk kegiatan blogging, mereka adalah keluarga saya di dunia maya. Kenapa mesti dinamakan kenthir? Kenthir lebih banyak untuk menekankan kegilaan daripada kengawuran. Kenapa kita mau dibilang kenthir?? Hemmm, jawabannya sangat sederhana karena hari-hari kita selalu penuh tawa, ditertawakan, mentertawakan, dan membuat ketawa, kadang ada sebagian yang ketawa sendirian……….. hahahahahahaha bukankah itu edan?? Kalau edan dan gendheng yang artinya juga gila, masih bisa diasosiasikan dengan kenekatan atau keberanian, tapi kenthir enggak. Kenthir merupakan perilaku antisosial, atau setidaknya menabrak pakem atau aturan umum yang berlaku. Tapi benarkah kita ini sepenuhnya sehat, “sane” atau waras?

Saya akan buat satu contoh cerita kenthir, cerita ini sangat panjang dan bersambung pula. Bagi yang belum baca seri sebelumnya bisa dibaca disini. Berikut cerita selengkapnya semoga dibaca sampai selesai, jangan seperti anak muda jaman sekarang yang lebih senang melihat gambar atau video daripada membaca. Kalau saya bisa, pasti sudah saya visualisasikan cerita ini lewat gambar atau video.

Setelah sekian lama tertunda, akhirnya sekuel petualangan 3 pendekar kenthir akan saya lanjutkan lagi. Sebenarnya ini karena banyak sekali permintaan dari penggemar yang dikirim lewat surat kaleng krupuk maupun ke PO BOX 012345678910. Pada cerita sebelumnya, pendekar Spiderte sedang bertarung melawan pendekar Andreaneda untuk memperebutkan Princess, terpaksa dihentikan karena princess ngantuk dan penulisnya capek setelah seharian menjadi kuli panggul di pasar. Pertarungan yang sangat sengit dan belum pernah terjadi di dunia persilatan. Selama dua hari dua malam belum ada tanda-tanda siapa yang bakal menjadi pemenang. Kedua pendekar kenthir itu mengerahkan semua jurus andalannya, spiderte dengan jurus andalannya bernafas dalam lendir dan pendekar Andreaneda dengan jurus joroknya menerobos semak-semak.

Pagi-pagi sekali kedua pendekar kenthir sudah berada di halaman kerajaan, mereka telah siap untuk bertarung kembali demi memperebutkan sang putri. Terlihat pendekar Spiderte sedang giat melatih jurus andalannya, sedangkan pendekar Andreaneda hanya duduk-duduk dan sesekali buang air kecil dan kentut. Tiba-tiba pendekar Andreaneda mendatangi spiderte, “Eh… pendekar bau, elu kagak bakal menang dah lawan gua. Mending nyerah aja, balik lagi ke kandang ngurusin kambing tuh udah pada mau beranak.”

Pendekar spiderte menghentikan latihannya, “Mana bisa, jurus jorok nggak mungkin bisa menang lawan jurus lendir gua. Elu yang mesti pulang tuh urusin onta udah pada minta kawin.”

Terjadi adu mulut antara kedua pendekar kenthir, karena merasa tidak bisa mengintimidasi, akhirnya pendekar Andreaneda berjalan kembali ke arah tempat duduknya. Setelah itu dia mengambil handphone beri-berinya, handphone kesayangannya hadiah waktu menang lomba balap kambing (lomba balapan sama kambing). Kemudian dia memencet tombol tett… toottt, tak berapa lama terdengar suara di HP nya, “Halo… ada apa ya, saya lagi sibuk nulis cerita nih.” Ternyata pendekar Andreaneda menghubungi penulis cerita ini.

“Wooii… bro, ini nanti siapa yang menang sih?” tanya pendekar Andreaneda.

“Yee… rahasia dunk. Masa gua kasih tau, ketahuan lu ya kalo ujian suka nyogok sama guru.” Kata penulis.

“Yah bro masa gitu aja kagak mau kasih tau sih? Gua buru-buru nih soalnya onta di rumah udah pada minta kawin. Udah gini aja, menangin gua deh, ntar lu gua kasih satu ekor anak onta.” Pendekar Andreaneda sedikit agak kesal.

“Wah sorry ya gua nggak terima sogokan, tapi kalo elu punya adik, kakak atau tetangga cewek yang cakep, gua pertimbangin dah.” penulis memberikan penawaran.

Pendekar Andreaneda berpikir sejenak, “Wah nggak ada bro, ada juga janda sama nenek-nenek langganan gua tiap malem, Itu juga udah 3 bulan gua belum bayar.”

“Ya udah kalau gitu, mendingan elu berlatih yang tekun dan rajin deh biar menang. Udah ya, gua mau nerusin cerita lagi.” Kata penulis sambil menutup telpon. Sedangkan pendekar Andreneda kesel bukan main,”Somprett…. dasar penulis mata keranjang, kagak mau diajak kerja sama. Awas lu ya kalo gua menang jadi mantu raja, gua blokir akunnya biar nggak bisa nulis lagi disini.”

Tak lama kemudian sang raja Ajinatha bersama princess dan rombongan tiba di pelataran kerajaan. Tak ketinggalan pula hulubalang dongo Mas Mus dan pengawal Andee. Mereka semua bersiap untuk menyaksikan pertarungan terakhir hingga titik lendir penghabisan kedua pendekar sakti memperebutkan princess, putri raja Ajinatha. Penonton juga sudah mulai berdatangan dari seluruh pelosok kerajaan menyaksikan siapa yang bakal jadi mantu kerajaan. Mulai dari bapak-bapak, ibu-ibu, anak-anak, nenek-nenek bahkan kambing dan onta kedua pendekar pun juga datang untuk memberikan support kepada kedua pendekar ini.

Raja Ajinatha kemudian menyuruh kedua pendekar itu untuk segera melanjutkan pertandingan. Kedua pendekar sudah bersiap, pertandingan kali ini dipimpin oleh seorang wasit, kebetulan yang terpilih menjadi wasit adalah dayang Minche. Hal ini dilakukan karena banyak sekali terjadi kecurangan pada pertandingan sebelumnya dan dayang Minche sudah terbiasa memimpin pertandingan catur antar dayang di kerajaan. Genderang pun ditabuh, kedua pendekar tersebut masuk ke dalam arena. Mereka beradu pandang kemudian saling cium.. eh saling meledek. Pertandinganun dimulai, pendekar Spiderte sangat bernafsu memenangkan pertandingan ini, belum apa-apa dia sudah berjongkok sambil nungging mengeluarkan jurus andalannya bernafas dalam lendir.

“Pendekar jorok rasakan jurus andalanku ini…” Sambill nungging pendekar Spiderte maju ke depan menyerang pendekar Andreaneda dengan pedang. Untung pendekar Andreaneda segera menghindar. Dia kemudian membalas dengan menusukkan pedangnya kearah lawan, dan berhasil masuk kedalam selangkangan pendekar Spiderte. Kemudian berusaha menusukan pedangnya ke arah biji Spiderte (kelemahan Spiderte terletak pada bijinya). Terdengar suara “Tiingg…” ternyata pendekar Spiderte memakai sempak baja, gagal usaha pertama pendekar Andreaneda kali ini.

Pertarungan berlangsung cukup alot dan seimbang. Sorak sorai penonton semakin menambah seru pertarungan. Tanpa terasa sudah 10 jam pertarungan itu berlangsung, Princess bosan juga melihatnya tanpa ada kepastian siapa yang bakal menang, kemudian dia berkata kepada ayahnya, “Ayahanda, saya bosan ingin jalan-jalan dulu cari angin, siapa tau nanti setelah saya pulang pemenangnya sudah ada.” Raja lalu memanggil hulubalang Mas Mus memerintahkan untuk menjaga princess. “Nggak usah dikawal ayahanda, saya mau jalan-jalan sendiri, saya hanya mau ke taman istana.“ Princess menjelaskan kepada ayahnya.

Singkat cerita princess sudah berada di taman istana melihat keindahan bunga-bunga sambil sesekali berdendang. Tidak ada satu orangpun di taman selain Princess, karena semua abdi kerajaan sedang menyaksikan sayembara pertarungan final dua pendekar sakti. Tanpa disadari, sejak keluar dari arena pertarungan, princess sudah diikuti oleh pendekar kolor ijo alias Geboy. Kali ini dia tidak sendiri, pendekar kolor ijo membawa kedua temannya yaitu pendekar sarap Wepe dan satu lagi bekas hulubalang istana Herry. Herry dulunya adalah seorang hulubalang raja, tetapi karena dia membocorkan rahasia raja akhirnya dia dipecat sebagai hulubalang. Kesalahan hulubalang Herry waktu itu adalah dia mengatakan ke seluruh pejabat istana bahwa raja Ajinatha memakai rambut palsu (Pak Aji nggak boleh marah, kalo marah gede sebelah… hahahaha), padahal itu sangat rahasia buat raja dan akhirnya diapun dipecat. Hulubalang Herry merasa sakit hati kemudian dia bergabung dengan pendekar kolor ijo untuk menculik princess.

Princess kaget melihat disitu ternyata sudah ada tiga orang, satu diantaranya adalah pendekar kolor ijo yang dulu pernah menculiknya. “Hahahahahaha…. mau lari kemana kau, manis? Sekarang nggak ada yang bisa menolongmu,” pendekar kolor ijo berkata sambil menyeringai. Mereka berdua akhirnya menangkap Princess dan membawa lari keluar istana dengan menunggang kuda. Belom jauh mereka membawa Princess, di tengah jalan dihadang seorang pendekar yang sangat rupawan, ya pendekar itu adalah pendekar Maskolis menghadang ketiga orang yang membawa princess dengan pedang di tangan. Pendekar Maskolis adalah satu diantara 3 pendekar kenthir, seorang pendekar yang tampan, manis, berwibawa, baik hati, gagah perkasa, suka menolong… apa lagi ya? Pokoknya yang baik-baik semua ada di dia.

“Dasar pendekar sesat, belom kapok juga menculik princess he?” Pendekar Maskolis langsung menyerang ketiga penculik Princess. Terjadilah pertarungan 3 lawan satu, pertarungan yang tidak seimbang, biasanya yang satu orang pasti kalah, tapi karena pendekar Maskolis sangat sakti banget ketiga penculik princess dapat dikalahkan. Ketiga penculik princess kabur lari tunggang langgang, akhirnya Princess dibawa kembali ke istana. Begitu sampai di istana princess menceritakan kejadian tentang penculikan yang baru saja menimpa dirinya kepada raja. Princess meminta raja menghentikan sayembara, dia lebih memilih pendekar Maskolis untuk mendampingi hidupnya daripada kedua pendekar yang sedang bertarung tak kunjung selesai itu. Raja kemudian memerintahkan hulubalang Mas Mus untuk menghentikan sayembara. Hulubalang Mas Mus segera melaksanakan perintah raja, belum jauh keluar istana hulubalang Mas Mus yang terkenal dengan penyakit pelupa akutnya, bukannya menghentikan sayembara tapi malah langsung menuju ke kamar terus tidur mendengkur sampai pagi.

Walaupun princess sudah mendapatkan jodoh, tapi bertarungan antara pendekar spiderte melawan pendekar Andreaneda masih berlangsung. Saking asyiknya bertarung mereka berdua tidak sadar bahwa sudah tidak ada lagi penonton dan aparat kerajaan yang menyaksikan pertarungan mereka. Yang ada hanya mereka berdua dan dayang Minche yang dari tadi masih setia menjadi wasit. Karena kesal dengan kedongoan kedua pendekar ini, penulis turun tangan, “Wooii… kalian berdua ngapain sih, tuh princess udah dapet jodoh kenapa masih bertarung juga?” tanya penulis. Mereka berdua menghentikan pertarungan, baru sadar kalau arena pertandingan kosong tidak ada siapapun. Kemudian pendekar Spiderte berkata, “Lah… pada kemane nih orang-orang, kita kan belom selesai berantemnya koq udah bubar semua?”

“Orang-orang udah pada pergi, princess udah dapet jodoh. Udah kalian berdua pulang aja ditungguin emak tuh.” Jawab penulis.

“Lha trus sayembaranya gimana, katanya yang menang jadi mantu raja?” pendekar Andreaneda juga bingung.

“Makanya kalo mau berantem jangan lama-lama hadiahnya keburu diambil sama orang lain, lagian kalian nggak ada yang mau ngalah. Mestinya yang tua ngalah kasih kesempatan yang muda, jadinya kan nggak kek gini.” Jawab penulis lagi.

“ Terus ini gimana, mau dilanjut kagak ne..??” mereka berdua serempak bertanya.

“Meneketehe, tuh kalo mau lanjut hadiahnya dayang Minche aja, mauuu…??” sambil jawab begitu penulis langsung ngacir lari secepat kuda Arab.

“Somprett….. dasar penulis stresss. Kalo bikin cerita yang bener dunk..!!!” pendekar Andreaneda menjawab kesal.

Itu tadi cerita hiburan dari planet kenthir lebih asyik kalau baca cerita sebelumnya, semoga terhibur dan mohon maaf kalau pertanyaan yang masuk ke kotak komentar belum bisa saya balas, mau libur dulu sampai hari minggu.

Diposting oleh NEik.DI Kamis, Mei 17, 2012 0 komentar

Modifikasi Popular Post untuk Template Gallery

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Setelah ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

Diposting oleh NEik.DI Senin, Mei 14, 2012 0 komentar

Slider Otomatis Untuk Template Toko Online

Kemarin ada teman yang meminta via email untuk dibuatkan sebuah slider otomatis untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan permintaan untuk membuat sebuah template toko online pun juga banyak, tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.

DEMO

Baiklah langsung saja pada cara pembuatannya :

Langkah pertama

1. Kita harus membuat satu widget di bawah header untuk meletakkan slider nantinya. Login ke blogger dengan akun Anda
2. Setelah masuk ke dashboard, pilih blog yang mau dipasang slider.
3. Kemudian pilih template >> Edit HTM, jangan lupa centang dulu kotak expand widget template.
4. Backup dulu template untuk berjaga-jaga jika nanti terjadi kesalahan dalam pengeditan. Kemudian masukkan kode berikut ini diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

5. Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>
   

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

6. Lalu save template, sekarang anda masuk ke layout dulu, lihat dibagian bawah header apa sudah ada satu widget kosong seperti pada gambar di bawah?

Jika pada template Anda sudah terdapat satu kolom kosong yang ada di bawah header seperti gambar diatas, untuk langkah pertama tinggalkan saja, langsung pada langkah kedua

Langkah kedua

1. Masih pada posisi Edit HTML masukan kode dibawah ini diatas ]]></b:skin>
   
   .shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2HDMgeCwAvMqmFvKPAP3cP31jNizqIH7Z2dV79AHmzUQF42rVm4UAcEytso6g2Z1v8F0ey_PsaAKANfV4WUPskrysr6RhXYNXSXO4enHaQ6zZMKPQXytbenoxryiTKnlxD0vssw2qpY-/s1600/shadow1.png) no-repeat center;margin:0 auto}
   #featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rLMkkztBHUmufHBTbh-vYMpOMmUFxjq7HhK4aL3bDEoFCaZ9QkETKmOnUD74HPMPAVwutoBgZooWrXEQDJJOBlHLBTJl62LsWoimBVc7r3dsNQBCYawav2MYgRspW3f5hQwVcmg4tbm8/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
   #featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
   #featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
   #featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
   #featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
   #featured-slider .featuredPostMeta a{color:#a1a1a1}
   #featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMuAxdR3CWhUEkloEBuRTOsXoofIWYt3U5gYvtWaU-6kD4IguT5fDO2144GT-Uad5R3uLLTZGlkv2w36HgHxr3OIJD0xvRQm_g2_WXmHaLCoM5QLEoNiNkV6ZGqmU5EkRXI_mm_hj-f8ca/s1600/order.png) no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
   #featured-slider .order a:hover{ color:#515151;}
   .featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
   .featuredTitle a{color:#719429}
   .featuredTitle a:hover{color:#0a0a0a}
   #paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
   #paginate-featured-slider ul{width:595px;list-style:none}
   #paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
   #paginate-featured-slider .featured_thumb:hover{opacity:0.7}
   Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda.
2. Setelah langkah diatas, masukkan kode berikut diatas kode </head>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/112241212156/slider.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5Km_i0P1OBDmKRvFwnuQaDXE9QhHS-qT1WdSS2HpJvI77qrz8O4yQDGGPAcOM1C4g8aU8hBbQRZAbqn8rJVONRNpWCWiMgjFC52PGTd6XyRJ0E1lK6U5sY3WB6EZHWWIAujKQ7PsYYQ/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 400;
   summaryTitle = 25;
   
   numposts2 = 7;
   
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   
   function showrecentposts1(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img  = new Array();
    
     for (var i = 0; i < numposts2 ; i++) {
       var entry = json.feed.entry[i];
       var posttitle = entry.title.$t;
   var pcm;
       var posturl;
       if (i == json.feed.entry.length) break;
       for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           posturl = entry.link[k].href;
           break;
         }
       }
   
   for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
           pcm = entry.link[k].title.split(" ")[0];
           break;
         }
       }
   
       if ("content" in entry) {
         var postcontent = entry.content.$t;}
       else
       if ("summary" in entry) {
         var postcontent = entry.summary.$t;}
       else var postcontent = "";
      
       postdate = entry.published.$t;
   
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   
   var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
   document.write(trtd);    
   
    j++;
   }
   
   }
   
   function showrecentposts2(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img  = new Array();
    
     for (var i = 0; i < numposts2 ; i++) {
       var entry = json.feed.entry[i];
       var posttitle = entry.title.$t;
   var pcm;
       var posturl;
       if (i == json.feed.entry.length) break;
       for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           posturl = entry.link[k].href;
           break;
         }
       }
   
   for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
           pcm = entry.link[k].title.split(" ")[0];
           break;
         }
       }
   
       if ("content" in entry) {
         var postcontent = entry.content.$t;}
       else
       if ("summary" in entry) {
         var postcontent = entry.summary.$t;}
       else var postcontent = "";
      
       postdate = entry.published.$t;
   
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   
   var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
   document.write(trtd);    
   
    j++;
   }
   
   }
   //]]>
   </script>
   Perhatikan kode warna merah diatas jika pada template anda sudah terdapat jQuery.min.js meskipun serinya berbeda, Anda tidak perlu memasukkan script warna merah itu lagi. Cukup satu jQuery.min untuk satu template jika ada dua, kemungkinan akan bentrok dan slidernya tidak jalan.
3. Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 5 diatas, ganti semua dengan kode dibawah ini :
   
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'>
   <b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
   <b:includable id='main'>
   <div id='featured-slider'>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   </ul>
   </div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: &quot;featured-slider&quot;, //id of main slider DIV
   contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
   toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
   nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
   revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[true/false, pausetime]
   onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
   //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
   //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
   }
   })
   </script>
   </b:includable>
   </b:widget>
   </b:section>
         </div>
   </b:if>
   <div class='shadow'/>
4. Setelah itu save template dan masuk ke layout akan nampak seperti pada gambar dibawah ini :
   
   
   
   
   
5. Kemudian klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :
   
   
   
   
   Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan.
   
6. Terakhir save, dan lihat pada blog Anda sudah terpasang slider menarik.

Segitu dulu ya tutorial membuat featured slider sederhana untuk toko online, maaf kalau tulisan saya acak-acakan karena lagi sedih, pasti diantara teman-teman banyak yang mengikuti berita di media banyak korban yang belum ditemukan akibat jatuhnya pesawat Sukhoi meskipun tidak ada keluarga saya yang ikut dalam penerbangan tersebut, tapi saya prihatin dengan banyaknya kejadian pesawat jatuh di negeri ini, kenapa ya? Disamping itu saya juga sedih Adsense saya hari ini kena banned... duuhhh lebay banget somprettt. Jika masih ada yang kurang jelas dalam penjelasan diatas tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat

Diposting oleh NEik.DI Minggu, Mei 13, 2012 0 komentar

Mengatasi Loading Blog dengan Google Code

Kali ini saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang memiliki masalah dengan loading blog yang cukup berat. Loading atau proses membuka pada sebuah program menjadi salah satu faktor penting bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog, jika terlalu berat maka akan membuat kinerja blog yang kita kelola menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar koneksi internet.

Blog yang saya bahas disini adalah blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung pada seberapa banyak kode script yang kita masukkan ke dalam template tapi dengan asumsi kecepatan koneksi internet yang digunakan sama.  Beda dengan Wordpress atau platform blog lain yang menggunakan hosting sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya memakai template jenis magazine seperti yang sering saya buat, karena banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google sendiri juga menyarankan agar loading blog lebih cepat, paling tidak hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga menyerupai bentuk blog-blog profesional seperti platform lainnya dengan konsekuensi loading blog yang semakin lambat.

Bagi Anda pengguna blogger, saya akan memberikan solusi logis untuk meningkatkan performa kecepatan loading blog, khususnya bagi anda pemakai template style magazine. Jika anda memakai sebuah template dengan menggunakan banyak fitur, seperti slider, label per categori atau lainnya. Pasti pernah menemukan sebuah script yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template. 

Javascript yang belum disimpan di Google Code

Saya akan berikan contoh sebuah script dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh script di bawah ini saya ambil yang sederhana :

<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya : contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :

Setelah proses penyimpanan file di komputer sekarang kita simpan di Google Code agar bisa dipasang pada template. Buka Google Code Anda, kalau belum pernah menggunakan Google Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :

1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
   
   
   
2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.
   
   
   
   
   
   Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
   
   
   
   
   
4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.
   
   
   
   
   
5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
   
   
   
   Sebelum disimpan di Google code
   
   
   
   Sesudah disimpan di Google code
   
   
   Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :

   <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>

   Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
   

Javascript yang sudah disimpan di Google Code

Nah sekarang bagaimana jika file javascript itu sudah disimpan di Google Code milik akun lain? Saya akan berikan contohnya dibawah :

<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>

URL Javascript warna merah diatas yang harus diganti dengan URL script dari Google Code anda. Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :

Kemudian tekan Enter pada keyboard. Jika muncul pilihan save, Anda tinggal save file tersebut kemudian upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika setelah tekan enter muncul kode javascript yang berderet-deret banyak sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.

Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog? Penjelasannya seperti ini, jika Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu terasa kalau yang memakai template itu banyak apa tidak semakin berat loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script si pembuat template rusak atau overload.

Itu tadi satu tips untuk mempercepat loading blog Anda dengan menyimpan file Javascript di Google Code Anda sendiri, silahkan dipahami dan semoga bermanfaat.

Diposting oleh NEik.DI Senin, Mei 07, 2012 0 komentar