Premium Themes Blogger

Tampilkan postingan dengan label Template. Tampilkan semua postingan

Kamis, 19 Juli 2012

3 Template Modifikasi Amburadul Banget

Diposting oleh ayo Indonesia

Menjelang sahur (bagi yang sudah menunaikan puasa besok), dini hari ini saya akan bagi lagi tiga buah template sekaligus hasil modifikasi dari template saya sebelumnya. Template ini saya buat berdasarkan permintaan teman-teman blogger, dua template hasil modifikasi dari template Johny Joss Banget dan satu template hasil modifikasi dari Johny Kenthir.

Johny Kenthir Banget

Demo | Download

Pemasangan fitur yang ada pada template ini sama dengan Johny Kenthir template, bagi yang belum jelas silahkan tutorial Johny Kenthir template dibuka lagi. Yang perlu diperhatikan disini dalam pemasangan tab view widget per kategori yang ada di bawah video kategori, cara pemasangannya sebagai berikut :

Perhatikan gambar diatas, untuk merubah judul tab (diary, jazz dan sebagainya) cari kode berikut ini di Edit HTML :

Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"

Setelah ketemu ganti tulisan berwarna biru diatas dengan judul yang ingin Anda tampilkan pada tabber kategori.

Sedangkan untuk mengisi widget tersebut dengan label, masih pada Edit HTML cari kode berikut ini (jangan lupa untuk mencentang expand widget template) :

Tulisan warna merah diatas adalah kelima label yang saya masukkan pada widget tabber kategori ini, silahkan Anda ganti dengan label Anda dan sesuaikan dengan judul tabber yang sudah dibuat.

Johny Light Banget

Demo | Download

Karena template ini tampilannya sama cuma beda warna saja dengan Johny Joss Banget, maka cara pemasangannya pun juga sama. Jika masih kurang jelas silahkan buka lagi tutorial pemasangan template Johny Joss banget. Untuk mengaktifkan fungsi reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode di bawah ini :

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

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Johny Ember

Demo | Download

Blog ID untuk template ini : 7709675643058616170 cari pada Edit HTML, kemudian ganti dengan blog ID Anda untuk mengaktifkan fungsi reply. Bagi yang belum jelas mengenai cara pemasangan widget movie category pada kedua template diatas, saya akan ulangi lagi caranya disini.

Pada kedua template diatas terdapat 5 buah widget untuk category, Anda tinggal memasukkan atau ketik nama label yang ingin Anda tampilkan pada kelima widget tersebut, seperti tampak pada gambar di bawah ini :

Dari gambar diatas saya memasukkan label atau kategori "best seller" pada widget "Movie Categoy 1", silahkan Anda ganti dengan label Anda. Demikian juga untuk widget movie category lainnya, Anda tinggal ketik nama label pada kotak tersebut dan label anda akan tampil secara otomatis.

For Johny Ember and Johny Light Banget Template:
I set the slider in 12 posts, if your blog still under 12 posts the slider not working. Make some new post until you have at least 12 posts and the slider will work automatically

Selamat mencoba semoga bermanfaat, dan selamat menjalankan ibadah puasa.

Label: Template

Sabtu, 14 Juli 2012

Johny Joss Banget, Template Joss untuk Review Film

Diposting oleh ayo Indonesia

Saya sebagai salah seorang pembuat template yang bodoh dan baru pada tahap belajar hanya sekedar mencoba untuk menampung aspirasi pengunjung. Keinginan seorang blogger untuk memakai sebuah template tidak terlepas dari tema blog yang dia usung, sebuah blog dengan tema kumpulan puisi atau cerpen mungkin tidak begitu cocok jika dia memakai template untuk toko online atau template magazine untuk berita. Kali ini saya akan mencoba membagikan satu lagi sebuah template dengan tema khusus, yaitu tentang movie review. Template ini merupakan permintaan via email seorang teman blogger dari India yang menginginkan sebuah template untuk koleksi filmnya. Sebenarnya saya sudah menawarkan beberapa alternatif template untuk movie seperti Johny Darkmovie dan Johny Bingung, tapi kurang cocok katanya. Ya itulah, terkadang kita membuat template cocok untuk sebagian orang tapi tidak begitu bagus jika dilihat sebagian orang lagi.

Template ini hanya modifikasi dari template saya sebelumnya Johny Crottube, fitur slider yang saya pakai berbeda, disini saya menggunakan slider Carousel otomatis yang menampilkan postingan terbaru. Dengan warna dominan hitam dan sedikit sentuhan transparan dan bayangan pada beberapa fitur, template ini kelihatan lebih hidup, untuk lebih jelasnya silahkan Anda lihat screenshotnya di bawah ini :

Pada template ini terdapat 5 buah widget untuk category, Anda tinggal memasukkan atau ketik nama label yang ingin Anda tampilkan pada kelima widget tersebut, seperti tampak pada gambar di bawah ini :

Dari gambar diatas saya memasukkan label atau kategori "best seller" pada widget "Movie Categoy 1", silahkan Anda ganti dengan label Anda. Demikian juga untuk widget movie category lainnya, Anda tinggal ketik nama label pada kotak tersebut dan label anda akan tampil secara otomatis.

Untuk mengaktifkan fungsi reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

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

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Sepertinya hanya itu yang perlu dijelaskan pada template ini, silahkan Anda mencobanya. Oya saya menawarkan bagi teman-teman blogger yang ingin membuat dan mempublikasikan template hasil kreasinya sendiri, saya dengan senang hati akan membantu. Dan jika template itu bagus dan memenuhi standar kelayakan pakai saya akan publikasikan di blog ini dan di Mas Template. Membuat template itu banyak keuntungannya, salah satunya Anda akan mendapatkan backlink otomatis dari si pemakai template, seperti blog Download Disini ini yang awalnya dikelola adik saya, akhir tahun 2011 atau sebelum saya menjadi Admin backlink ke blog ini baru 43, sekarang sudah mendekati angka 3.000..... lumayan kan? Jika ada yang tertarik silahkan kirimkan xml template dan panduan atau tutorial instalasi template ke alamat email saya di ncmajid@gmail.com.

I set the slider in 12 posts, if your blog still under 12 posts the slider not working. Make some new post until you have at least 12 posts and the slider will work automatically

Demo | Download

Label: Template

Kamis, 05 Juli 2012

Johny Kenthir, Template Ramai Seperti Pasar Tradisional

Diposting oleh ayo Indonesia

Template ini ramai banget seperti pasar tradisional yang jualan bermacam-macam dagangan tiap pagi di pinggir jalan. Sebenarnya template ini sekedar memenuhi permintaan teman-teman blogger agar template yang dipakai di blog adik saya dibagi juga secara gratis, awalnya mau saya bagi langsung persis seperti blog adik saya. Tapi yang punya blog mencak-mencak, terpaksa saya mesti modifikasi lagi agar tampilannya sedikit berbeda. Dan template ini juga memenuhi permintaan sebagian blogger yang meminta agar list untuk postingan terbaru jangan hanya judul saja, tetapi juga dikasih thumbnail dan summary.

Seperti pada template blogger magazine umumnya, template ini termasuk berat di loading. Saya kasih tahu dulu sebelumnya biar nanti tidak ada yang tanya lagi di kotak komentar. Namanya juga template magazine, ya pastilah banyak fitur yang dipasang disitu, otomatis akan menambah beban loading. Oke, langsung saja pada tutorial pemasangan widget yang ada di template ini, sebelum itu perhatikan struktur layout yang ada pada template ini (sengaja saya gunakan old blogger interface layout karena di new blogger interface ada scrollnya jadi nggak bisa sampai ke bawah) :

Image Slider (Sidebar tengah atas)

Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript yang saya beri nama image slider seperti pada gambar diatas. Masukkan kode berikut ini ke dalamnya :

Keterangan :

Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.

Video Category

Anda tinggal masukkan atau ketik nama label pada widget Video Category seperti gambar di bawah ini :

Jazz adalah kategori atau label yang saya tampilkan pada widget video category, silahkan Anda ganti dengan label yang diinginkan. Nah, sekarang cara membuat postingan video (khusus dari Youtube) untuk menampilkan thumbnail di widget tersebut. Caranya sama seperti pada artikel saya Johny Crottube, saya akan ulang lagi disini :

Masuk ke Youtube dan pilih video favorit anda.
Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :
<iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :

Perhatikan kedua kode pada gambar dengan background biru diatas. Dan untuk video yang bukan dari Youtube sebaiknya Anda buat manual thumbnailnya, dengan membuat gambar dari video terlebih dahulu kemudian diupload ke dalam postingan.

Widget Label

Widget label disini adalah Label 3 s/d 15 (label 7 sama 8 hilang dimakan tikus) caranya sama seperti pada widget Video Category diatas, Anda tinggal masukkan/ketik label di kotak HTML/Javascript seperti gambar dibawah :

Ganti jazz dengan label yang ingin Anda tampilkan, ini berlaku untuk semua widget label pada template ini. Jika Anda memakai template ini dan mendapati pengaturan widgetnya mojok ke kiri dan bagian footer ikut menjorok keatas itu tandanya label yang Anda masukkan masih sedikit, usahakan tiap label (Label 3 s/d label 15) terisi dengan label yang sudah mempunyai post atau artikel minimal 5.

Bagi Anda yang ingin memakai template ini saya sarankan untuk menyimpan semua url script dan kode javascript yang ada pada template di tempat penyimpanan Google Code Anda sendiri, bagi yang belum tahu caranya menyimpan di Google Code silahkan baca tutorialnya disini. Disamping bisa untuk sedikit mempercepat proses loading bisa juga untuk mengantisipasi URL script yang rusak jika sewaktu-waktu Google Code saya kena banned seperti yang pernah terjadi kemarin.

Sekian dulu artikel kali ini, jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar di bawah, selamat mencoba dan semoga bermanfaat.

Demo | Download

Label: Template

Jumat, 22 Juni 2012

Johny Crottube, Template Iseng Sambil Nunggu Jerman Vs Yunani

Diposting oleh ayo Indonesia

Daripada bengong sambil nunggu pertandingan bola nanti malam dan mumpung besok libur, mending ini saya bagi lagi satu template gratis buat Anda yang suka mengkoleksi video dari Youtube. Template ini serial dari template Johny Crott, kali ini saya buat untuk versi konten video dan hanya dari Youtube. Template ini berbeda dengan template video Youtube saya sebelumnya Johny Jazzytube, karena disini saya hanya memanipulasi gambar dari iframe youtube untuk dijadikan thumbnail di homepage, dan masih menggunakan ytimg.com tapi untuk template ini diletakkan di dalam postingan bukan di Edit HTML template. Untuk lebih jelasnya perhatikan gambar untuk membuat postingan video di bawah ini :

Masuk ke Youtube dan pilih video favorit anda.
Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :
<iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :

Perhatikan kedua kode pada gambar dengan background biru diatas.

Pada template ini saya tambahkan fitur untuk tampilan Grid dan List style, dibawah ini adalah screenshot untuk tampilan grid dan list syle :

Sekarang untuk menampilkan widget Video Category yang ada pada template ini. Yang Anda harus lakukan hanya membuka widget Video Category 1 dan 2 kemudian masukkan/ketik label di dalam kotak HTML/Javascript seperti gambar di bawah ini :

Dari gambar diatas jazz adalah label yang saya tampilkan pada video category 1, Anda ganti dengan label yang diinginkan, demikian juga dengan widget Video Category 2.

Untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

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

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Template ini juga dilengkapi fitur related video di setiap postingan dan slider otomatis yang menampilkan postingan terbaru Anda. Template ini bisa digunakan juga untuk konten gallery gambar biasa, dan untuk video hanya khusus dari Youtube, tapi jika anda ingin menambahkan video selain Youtube harus membuat thumbnail manual dulu kemudian baru di upload saat buat postingan. Segitu dulu tutorial cara instalasi untuk template Johny Crottube kali ini. Jika ada yang mau ditanyakan silahkan tinggalkan pesan pada kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

Demo | Download

Label: Template

Minggu, 17 Juni 2012

Johny Crott, Template Store Online for Bike Lover

Diposting oleh ayo Indonesia

I dedicated this template to Omiyan, he likes bicycle very much. He want to make an online store basic on his hobby. I would like to give him this template to make his bussiness more succeed and I hope he enjoy it. This template names Johny Crott, because there's so many oil that spread everywhere when he change his gear and wheel... hahahahaha

I added this template with Shopping Cart feature from wojodesign.com. I made this template more easy to navigated, there's no specific method to make a new post, you write and upload an image just like you did it in ordinary template, all you have to do is just start with this code :

<span class="item_price">$3,000.00</span>

You must change $3,000.00 with your own price, after that you can upload your image and write your description as usual, for better result I suggest you to upload an image first before you write an articles.

To change paypal email with yours, find this code in Edit HTML :

<script type='text/javascript'>
simpleCart.email = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["Name", "thumb_image" ,
"Quantity_input" , "Total", "remove"
];
</script>

Change johnytemplate@gmail.com with your Paypal email, and in that codes above you can change how many tax rate and shipping flat rate that you want to provide to your customers.

I removed the order button in homepage, but you can find it in post page. You must make an order form in google docs or other site that similiar. Then you can copy into your static page, and then go to your edit HTML and change this URL page order http://johny-crott.blogspot.com/p/order.html in demo with yours :

<input class='order'
onclick='window.location='http://johny-crott.blogspot.com/p/order.html''
type='button' value='Order'/>

And if you have any question leave your message in comment box below, good luck and happy blogging.

Demo | Download

Wakakakakakakakaka.... somprettt, bener nggak sih Inggrisku

Label: Template

Selasa, 12 Juni 2012

2 Template Toko Online Semrawut (Tanpa Cart)

Diposting oleh ayo Indonesia

Kedua template ini memenuhi permintaan teman-teman blogger di kotak komentar, yang meminta agar membuat template Toko Online tanpa menggunakan fitur Shopping Cart. Template ini saya buat tadi malam sambil nonton bola dan baru jam 3 pagi tadi selesai. Harap maklum kalau hasilnya saya bilang semrawut karena buatnya sambil sakit gigi, hasilnya komposisi warna yang asal-asalan dan hanya modifikasi dari template saya sebelumnya. Yang penting sudah memenuhi permintaan dan mau dipakai syukur nggak dipakai ya nggak apa-apa.

Johny Ganteng Store

Demo | Download

Johny Joss Mobile Phone

Demo | Download

Tidak ada fitur khusus pada kedua template ini, slider yang saya pasang otomatis menampilkan postingan terbaru Anda. Untuk membuat sebuah postingan yang perlu Anda lakukan hanya menambahkan kode dibawah ini di awal setiap postingan pada posisi Edit HTML bukan compose:

<span class="item_price">Rp 1.000.000,00</span>

Ganti harga warna biru diatas dengan harga Anda tentunya dan setelah kode diatas, silahkan Anda menulis artikel atau deskripsi barang maupun upload gambar seperti biasanya. Kedua template ini juga saya tambahkan fitur tooltip image otomatis pada setiap gambar di homepage (arahkan mouse anda ke salah satu gambar). Dan untuk mengaktifkan fungsi reply pada kotak komentar cari ID blog masing-masing template ini dan ganti dengan ID blog Anda. Untuk Johny Ganteng Store ID blognya : 9133655087310583622 dan untuk Johny Joss Mobile Phone ID blognya : 6923142428765575685.

Jika Anda ingin mengupload gambar, disarankan untuk memilih gambar yang persegi panjang dengan ukuran pixel lebih besar lebih bagus, contoh seperti gambar dibawah ini :

Fitur shopping cart disini saya ganti dengan form order barang tombolnya sudah saya sediakan dibawah setiap post di homepage. Untuk membuat form order seperti pada demo kedua template ini, tentunya Anda harus membuatnya terlebih dahulu pada situs-situs layanan form online. Disini saya memakai Google Docs, karena layanan form ini buatan Google mungkin tidak terlalu menghambat dalam proses loading blog. Setelah Anda membuat form order, langkah selanjutnya adalah membuat halaman statis (pages), buka New Pages kemudian copy paste kode dari Docs Google (mana ya yang bener, Google Docs apa Docs Google...???) ke dalam postingan terserah mau dikasih judul apa. Untuk contohnya bisa diklik tombol order yang ada di bawah gambar.

Setelah halaman order Anda sudah jadi, arahkan link dari halaman statis order anda ke dalam link order yang ada di Edit HTML, caranya seperti dibawah ini :

Untuk Johny Ganteng Store, cari kode ini di Edit HTML jangan lupa untuk centang Expand Widget Templates :
<input class='order' onclick='window.location='http://johny-gantengstore.blogspot.com/p/sample-page-no-image.html'' type='button' value='Order'/>
Ganti URL warna kuning diatas dengan URL halaman order yang sudah Anda buat.
Untuk Johny Joss Mobile Phone, cari kode berikut di Edit HTML jangan lupa untuk centang Expand Widget Templates :
<a class='item_add' href='http://johnyjoss.blogspot.com/p/sample-page-no-image.html'>Order</a>
Ganti URL warna kuning dengan URL halaman order Anda.

Sepertinya hanya itu yang perlu diperhatikan jika Anda ingin memakai satu diantara kedua template ini. Sebelumnya jangan menanyakan bagaimana cara menambahkan fitur Shopping cart pada template ini ya, karena template ini dibuat memenuhi permintaan beberapa teman blogger agar fitur shopping cart pada template toko online sebelumnya dihilangkan. Jadi jika ada diantara Anda yang ingin memakai template Toko Online dengan menggunakan Shopping Cart bisa memakai Johny Blackstore dan Johny Magstore. Selamat mencoba dan semoga bermanfaat.

Label: Template

Rabu, 06 Juni 2012

3 Template Paling Sompret Sedunia

Diposting oleh ayo Indonesia

Artikel ini mungkin terlalu panjang, semoga teman-teman blogger tidak bosan membacanya. Tapi jika Anda memakai salah satu dari ketiga template ini mesti membacanya sampai selesai. Awalnya saya hanya mencoba untuk membuat readmore tanpa menggunakan Javascript, akhirnya jadilah dua template ini. Pada dua template awal di artikel ini saya menggunakan fitur Readmore dengan tidak meletakan kode Javascript di dalamnya, yang tentu saja karakternya jadi terbatas, yang pertama ukuran maksimum pixel untuk thumbnail hanya 72 x 72 px, Anda tentu saja bisa memperbesar ukuran ini dengan merubah width dan height kode CSS .post-thumbnail pada template ini tapi dengan konsekuensi gambarnya menjadi semakin kabur. Yang kedua adalah jumlah huruf untuk summary juga hanya dibatasi sampai 100 karakter dan ini fixed dari platform Blogger tidak bisa lagi untuk ditambah dan dikurangi. Jadi untuk kedua kasus diatas sengaja saya jelaskan dulu disini agar Anda tidak menanyakan lagi kedua hal tersebut.

Ketiga template ini sebenernya pengembangan dari template sebelumnya, Johny Classicsite. Karena terlalu sederhana dan minim sekali fitur yang saya pasang pada template itu, saya mencoba untuk memodifikasi kembali agar tampak lebih menarik. Untuk judul artikel ini jangan pernah menanyakan kenapa artikel ini saya kasih judul seperti itu, karena dari dulu memang saya tidak pernah perduli dengan judul yang penting isinya bung....!!

Johny Sompret

Demo | Download

Template ini adalah paling sompret sedunia, karena bikinnya waktu pusing dan saya sering bilang sompret waktu bikin jadi namanya Johny Sompret (nggak nyambung blasssss....). Fitur yang terdapat pada template ini apa ya..? Bisa dilihat sendiri pada demo, untuk slider yang saya pasang otomatis menampilkan artikel terbaru. Jika anda ingin mengganti dengan tampilan per label Anda bisa baca petunjuknya di artikel Johny Blackstore template, karena slider yang saya pasang sama, cuma beda kode CSS saja.

Untuk mengaktifkan fungsi reply pada kotak komentar sama dengan template Johny Classicsite, caranya masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

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

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Black Beauty Template

Demo | Download

Ini bukan template hitam, dan bukan juga mendekati hitam apalagi beauty. Fiturnya sama dengan template Johny Sompret cuma beda warna saja. Untuk fungsi reply yang harus Anda ganti blog ID warna merah pada template ini 5806754556786281613 (disimpan nomernya siapa tahu besok keluar angka ini), ganti dengan ID blog anda. Caranya sama seperti pada Johny Sompret

Johny Jazzytube (Only for Youtube)

Demo | Download

Nah, kalau template ini agak serius bikinnya, karena berbeda dengan kedua template diatas. Template ini khusus untuk blog dengan konten video, dan itupun harus video dari Youtube. Template ini permintaan Antonio Rios dari Meksiko pada artikel Dua Template Gratis Untuk Pecinta Music dan Game.

Untuk menampilkan video Youtube ke dalam postingan, tentunya cari dulu video kesayangan Anda di Youtube. Setelah ketemu copy URL nya yang terletak di browser seperti gambar di bawah :

Atau anda juga bisa memperoleh URL ini dengan klik share di bagian bawah video, kemudian centang kotak kecil long link disampingnya, lalu copy URL pada kotak diatasnya, seperti gambar dibawah ini :

Setelah Anda copy URL Youtube tersebut, masuk ke new post posisikan pada Edit HTML (jangan compose), paste kemudian akhiri URL dengan kode endofvid (tanpa spasi). Untuk menambahkan teks pada postingan tersebut, awali dengan menggunakan kode [starttext] dan akhiri dengan kode [endtext]. Contoh akhir postingan seperti ini :

http://www.youtube.com/watch?v=K4Di2rvigVkendofvid

[starttext]
Your description here..........
[endtext]

Untuk menampilkan widget video per kategori, masuk ke layout >> add gadget pilih HTML/Javascript kemudian masukkan kode di bawah ini kedalamnya :

<script style="text/javascript">
    var numposts = 3;
    var showpostthumbnails = true;
    var displaymore = true;
    var displayseparator = true;
    var showcommentnum = true;
    var showpostdate = true;
    var showpostsummary = true;
    var numchars = 70;
</script>
<script src="/feeds/posts/default/-/sting?orderby=published&alt=json-in-script&callback=showlabelpostswiththumbs"></script>

Ganti kode warna merah sting dengan label yang ingin anda tampilkan pada sidebar. Dan untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML (centang Expand Widget Templates) cari blog ID 3009056898743314712 ganti dengan blog ID anda.

Bingung mau nulis apa lagi, udah segitu aja dulu ya. Oya ketiga template diatas ringan loading semua apalagi yang Jazzytube nggak sampe 70kb cuma sekitar 67kb kalau nggak salah. Jika anda berminat silahkan download ketiga template diatas gratis tanpa dipungut biaya, paling cuma biaya koneksi internet aja, selamat mencoba dan semoga bermanfaat.

Label: Template

Minggu, 03 Juni 2012

Johny Classicsite, Template Sederhana dengan Style Klasik

Diposting oleh ayo Indonesia

Satu lagi template simple yang akan saya bagikan kepada teman-teman blogger semua, template ini saya beri nama Johny Classicsite sesuai dengan tampilannya seperti template-template blogger klasik jaman dahulu kala. 90% template ini hanya menggunakan warna, silahkan dilihat pada kode CSS, yang saya pasang hanya tiga gambar dengan ukuran pixel yang kecil yaitu pada background template, bullet pada footer dan search button pada kotak pencari lainnya semua memakai permainan gradasi warna.

Yang jelas template ini sangat ringan, masalah SEO friendly saya tidak berani bilang karena patokan baku sebuah template dikatakan SEO Friendly tiap master blogger juga beda-beda. Tapi paling tidak semua meta tag deskripsi untuk sebuah template bisa dibilang SEO Friendly sudah saya pasang disini. Tidak ada tutorial khusus dalam pemasangan template ini, yang harus Anda lakukan adalah mengganti blog ID untuk mengaktifkan reply pada kotak komentar, caranya masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

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

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Fitur lain tidak ada yang sulit, untuk navigasi kedua dalam template ini adalah navigasi page list jadi jika Anda membuat halaman statis akan otomatis muncul disitu. Itu aja dulu, saya sudah menyiapkan satu lagi template baru untuk teman-teman blogger tapi buat besok aja, nanti kalau jadi satu sama artikel ini postingannya jadi sedikit. Udah ya mau kembali bekerja dulu, selamat mencoba dan semoga bermanfaat.

Demo | Download

Label: Template

Senin, 28 Mei 2012

Johny Magstore, Template Magazine untuk Toko Online

Diposting oleh ayo Indonesia

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 :

Shopping Cart dari wojodesign.com
Grid and list view dari SSD Tutorial
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 = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</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 :

Cari URL script ini di Edit HTML :
http://kauman.googlecode.com/files/WojosimpleCart-USD.js
Setelah ketemu ganti dengan URL script berikut :
http://kauman.googlecode.com/files/WojosimpleCart-Rupiah.js
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

Label: Template

Selasa, 22 Mei 2012

Johny Blackstore, Template Toko Online Asal Jadi

Diposting oleh ayo Indonesia

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 = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>

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

Fitur Pendukung

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(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
Ganti dengan kode berikut :
<script>
document.write(" <script src=\"/feeds/posts/default/-/your label?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
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('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' 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.
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='"https://www.blogger.com/comment.g?blogID=2440873145683465163&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); 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 :
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 :

Baca tutorial pemasangan template ini sampai selesai.
I suggest to upload gambar produk dengan ukuran panjang dan lebar sama, misalnya 300 x 300 px.
Agar hasil akhir dalam penggunaan template ini maksimal dan tata letak post teratur, judul post jangan terlalu panjang, karena akan menggeser gambar ke bawah.
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 :

Cari URL script ini di Edit HTML :
http://kauman.googlecode.com/files/WojosimpleCart-IDR.js
Setelah ketemu ganti dengan URL script berikut :
http://kauman.googlecode.com/files/WojosimpleCart-Rupiah.js
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

Label: Template

Blog Archive