3 Template Modifikasi Amburadul Banget

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='&quot;https://www.blogger.com/comment.g?blogID=4145715786152726201&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>

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.

Selamat mencoba semoga bermanfaat, dan selamat menjalankan ibadah puasa.

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

Johny Kenthir Banget

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/tabview.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/tabview.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
3. At last
   <script src='http://kauman.googlecode.com/files/contentslider.js' type='text/javascript'/>
   Replaces with this code :
   <script src='http://jagad.googlecode.com/files/contentslider.js' type='text/javascript'/>

Johny Light Banget

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/switch.display.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/switch.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

Johny Ember

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/switch.display.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/switch.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Replaced with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/07/3-template-modifikasi-amburadul-banget.html

Read More

Pengumuman Penting Bagi Pengguna Template

Kurang lebih pukul 9 malam lewat 15 menit saya baru sampai di rumah, sambil menunggu tukang nasi goreng lewat saya buka blog yang praktis selama bulan puasa dan menjelang Lebaran jarang sekali saya buka, paling sekedar approve komen yang masuk dan dijawab kalau memang perlu. Saya kaget ketika salah satu teman blogger Jeha komentar di salah satu artikel, memberitahukan kalau banyak javascript yang tidak berfungsi pada banyak template yang saya buat. Langsung saya menuju ke akun Google Code... dan ternyata akun Google Code saya kena banned ... nasib.

Ini untuk kedua kalinya akun Google Code saya kena banned, waktu saya cek di email hanya ada pemberitahuan bahwa saya menyalahi aturan yang sudah ditetapkan pihak developer. Selama ini saya merasa hanya menggunakan situs tersebut untuk menyimpan Javascript untuk membuat template dan tidak pernah disalahgunakan untuk hal lain yang merugikan. Tapi sudahlah, untung semua javascript yang saya simpan disana sudah saya backup di komputer, jadi tinggal bikin akun baru terus upload lagi semua Javascript yang dipakai.

Untuk itu pada kesempatan ini, saya sebagai pengelola blog Creating Website menyampaikan permintaan maaf yang sebesar-besarnya atas ketidaknyamanan ini. Bagi teman-teman blogger pengguna template hasil kreasi saya, silahkan untuk men-download ulang template yang dipakai. Semua template sudah saya renovasi, dan semua Javascript lama yang saya pakai sudah saya migrasikan ke akun Google Code yang baru. Jika Anda sudah terlanjur memodifikasi template tersebut dan keberatan jika harus upload ulang, silahkan dicari saja URL Javascript yang berawalan seperti dibawah ini :

http://kauman.googlecode.com/files/......................... js

Setelah ketemu Anda download template yang dipakai, kemudian ganti semua URL Javascript seperti diatas (ganti semua, jika ada 2 atau 3) dengan URL script yang sudah saya perbaharui, contohnya seperti ini :

http://kauman.googlecode.com/files/jcarousellite.js

Kemudian cari kode URL script dengan akhiran jcarousellite.js Anda ganti dengan URL script yang baru dengan akhiran yang sama, yaitu :

http://johny-template.googlecode.com/files/jcarousellite.js

Demikian juga dengan URL script yang lain. Jika Anda ingin lebih aman saya sarankan untuk menyimpan semua URL javascript yang ada pada template yang Anda pakai di tempat penyimpanan Google Code Anda sendiri, jika ada yang belum jelas bagaimana cara menyimpan script di Google Code Anda bisa baca tutorialnya disini tentang mengatasi masalah loading blog.

Yang kedua saya juga mohon maaf jika banyak pertanyaan yang masuk dan belum sempat terbalas, seperti yang sudah saya ceritakan di awal artikel ini, setiap hari saya seperti itu berangkat pagi pulang malam, jadi tidak sempat untuk mengurusi blog seperti bulan-bulan sebelumnya, maklum saya hanya pegawai rendahan di kantor jadi menjelang Lebaran ngejar setoran yang pasti. Insya Allah setelah kesibukan di dunia nyata sudah kembali normal, saya akan berikan semua yang terbaik untuk teman-teman blogger semua terutama pengunjung setia blog ini.

Demikian pengumuman untuk pengguna template Creating Website yang baik, semoga dapat dimengerti. Semua yang terjadi bukan karena kesengajaan, dan saya terus berupaya agar para pengguna nyaman dan tidak terjadi sesuatu yang fatal dalam penggunaan template. Jika di antara teman-teman ada yang menemukan Javascript yang mati atau tidak bisa dipakai silahkan lakukan pemberitahuan secepatnya  ke saya di kotak komentar, sekian selamat malam dan selamat menjalankan ibadah puasa.

Langsung saja menuju artikel template yang dipakai, perhatikan "update templates" yang telah saya tambahkan pada bagian bawah artikel.

ATTENTION :
There's an update in all of my templates, just re-download your template that you used if you have any problem in some features

 

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/08/pengumuman-penting-bagi-pengguna.html 

 

 

Read More

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

DEMO

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   Keterangan :
   var numfeed = 5; >> Jumlah Artikel terbaru yang

    ditampilkan pada widget
   var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
   var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

   Terakhir save dan lihat hasilnya.

Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/08/membuat-widget-artikel-terbaru-joss.html

Read More

Membuat Slider Image Otomatis Joss Banget

Tutorial ini menjawab pertanyaan dari teman debbie irlando manurung alias Zondim, meminta untuk dibuatkan tutorial slider yang ada di Johny Ganteng Banget. Template yang dipakai di blog itu nantinya juga akan saya share, cuma sekarang lagi massa sibuk nguli jadi nanti aja kalau sudah luang waktunya. Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

DEMO

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source : medienfreunde.com

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   Keterangan :
   

   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

   Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
   Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
   

   /feeds/posts/default?max-results

   Menjadi :
   

   /feeds/posts/default/-/your label?max-results

   Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
8. Terakhir, save templates dan lihat hasilnya. 

Itu tadi tutorial membuat Slider image otomatis joss banget yang ada pada Johny Ganteng Banget, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat sahur dan semoga bermanfaat. 

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/08/membuat-slider-image-otomatis-joss.html

Read More