SELAMAT DATANG DI BLOG PERJALANANKU, MY LIFE MY BLOG adalah blog yang menceritakan semua yang saya suka, Inspirasi, dan Motivasi.Selamat bergabung di blog saya, semoga bisa jadi motivasi dan inspirasi bagi anda yang membacanya Semoga Bermanfaat.
Visit My Blog : =>tritunggaljayakudus.blogspot.com =>tritunggaljaya-kudus.blogspot.com =>tritunggal-jayakudus.blogspot.com =>mudjoko.kds@gmail.com
Sebelumnya saya ingin minta maaf dulu sama mas Andreas (Komud) dan Blogger Mobile (Wandhy) karena belum memenuhi permintaan untuk membuat tutorial navigasi menu dan membuat template gallery seperti Mas Template. Soalnya antri ya mas, hal ini juga karena template yang saya buat ini (Johny Darkmovie) juga atas permintaan seorang sahabat via email, dia meminta agar saya membuat sebuah template yang bisa dipakai untuk review atau download film. Nah, jadilah seperti template gambar di bawah ini (klik gambar untuk melihat demonya) :
Baiklah, langsung saja pada fitur-fitur yang ada pada template ini dan cara pemasangan widgetnya :
Memasang Slider Image Otomatis Untuk mengganti image pada slider, cari kode berikut :
numposts1 = 5; label1 = "best seller";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. best seller adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan (perhatikan besar kecil huruf yang ada pada label yang sudah Anda buat harus sama).
Kategory dengan thumbnail (Box office dan action movies)
Letaknya di sebelah kiri image slider dan di bawah widget random movies, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
Keterangan : Warna biru (action) adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Widget Random Movies (Sidebar kanan atas) cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=7;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
Keterangan : Perhatikan angka 7 diatas, itu adalah jumlah random post yang ditampilkan pada sidebar silahkan ganti sesuai dengan keinginan Anda.
Latest Movies (Di bawah navigasi menu atau news ticker)
Untuk menggantinya dashboard >> Design >> Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F. Kemudian cari URL http://johny-darkmovie.blogspot.com ganti dengan URL anda.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Untuk mengganti kotak pencari (search box) yang ada di pojok atas kanan, masuk lagi ke Edit HTML cari http://johny-darkmovie.blogspot.com dan ganti dengan URL blog Anda..
Untuk mengaktifkan fungsi reply pada kotak komentar, cari kode di bawah ini pada edit HTML template :
Perhatikan kode yang berwarna merah, itu adalah ID blog demo template Johny Darkmovie. Anda harus ganti dengan ID blog anda yang terletak pada browser.
Template ini juga sudah ada fitur halaman statis (static page) klik sample page yang ada pada navigasi paling atas dan jika Anda download template ini, script-script untuk widget sudah saya sertakan tinggal dipasang dan ganti dengan label atau URL blog anda, jangan lupa untuk membaca instruksinya ! Saya kira hanya itu yang harus diperhatikan dalam menggunakan template ini, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar di bawah. Dan bagi Anda yang tertarik untuk mencobanya silahkan langsung saja menuju link demo dan download template ini, Sekian, selamat mencoba dan semoga bermanfaat.... happy blogging (habis pulang kantor ne belum mandi.... hehehehehehe)
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
Template ini sebenarnya pesanan teman Jogang via email yang meminta untuk memodifikasi agar template Johny Darkmatter kolom postnya di homepage dibuat seperti tampilan template Johny Darkgamer. Template ini saya beri nama Johny Darkfire karena dengan dasar warna hitam dan sedikit tambahan warna kuning menyala seperti api untuk memperindah tampilan. Fitur yang terdapat pada template ini hampir sama dengan template Johny Darkgamer hanya slider carousel saya ganti dengan otomatis slider yang memudahkan Anda untuk menampilkan post pada slider.
Di atas adalah gambar screenshot dari template ini, tidak banyak perubahan memang sengaja saya minimalisir agar lodingnya tidak terlalu berat, kapasitas template ini hanya 76.0 kb. Berikut ini adalah hal-hal yang perlu diperhatikan untuk menggunakan template ini.
Mengganti Slider Untuk meletakkan postingan kategori tertentu pada slider, cari kode berikut :
numposts1 = 5; label1 = "sport";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
Category with thumbnail (Sidebar kanan atas)
Seperti pada template-template saya sebelumnya, saya selalu menyertakan fitur ini, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<a href="http://johny-darkfire.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Jika Anda ingin menambahkan halaman statis untuk template ini sangat mudah, baca tutorialnya disini.
Script yang perlu dipasang di sidebar dan instruksi lainnya sudah saya sertakan pada link download yang ada di bawah. Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Untuk mas Jogang semoga bisa Anda nikmati template ini walaupun ada sedikit perubahan pada header dan navigasi.
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
Ini sebenernya template pesenan temen saya, tapi karena dia lebih memilih pakai wordpress jadinya nganggur template ini. Yah daripada tidak kepakai mending saya share aja disini, silahkan bagi siapa saja yang suka boleh dipakai. Template ini hanya modifikasi dari template Johny Simple Magazine 2, pada bagian slidernya saya ganti memakai slider otomatis dan sidebar accordion saya ganti dengan tab view menu. Selebihnya sama paling cuma ada tambahan 3 kolom sidebar di bawah banner iklan baris yang pertama dan tambahan widget social bookmark dari Mashable.
Template ini saya share karena ada beberapa teman yang ingin memakai template Mas Paper ini. Daripada saya kirim scriptnya satu persatu lewat email mending dijadikan postingan aja biar semua bisa memakai. Saya bingung mau dikasih nama apa template ini, terserah anda lah mau dikasih nama apa, kalau saya kasih nama Mas Paper nggak boleh ada yang protes ya.
Fitur yang terdapat pada template ini antara lain :
Banner atas (diatas header)
Letaknya di bawah kode <head> pada template, silahkan diganti dengan banner anda atau hapus aja kalau tidak suka.
Headlines News
Untuk mengganti dengan headline berita dari blog Anda, Anda tinggal ganti URL nya, karena google API key sepertinya sekarang sudah ditutup, atau selengkapnya baca disini.
Slider Otomatis. Untuk mengganti slider anda cari kode ini :
numposts1 = 5; label1 = "misteri";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. misteri adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan selengkapnya bisa dibaca disini.
Sidebar tengah atas Cara memasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> <script type="text/javascript" src="/feeds/posts/default/-/misteri?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://crottt.blogspot.com/feeds/posts/summary/-/misteri?max-results=5&alt=json-in-script&callback=recentpostslist"></script> <a href="http://crottt.blogspot.com/search/label/misteri" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Banner iklan di bawah sidebar
Ada dua banner iklan yang pertama terdapat di bawah content, dan satunya lagi di bawah 3 deret sidebar pada baris kedua. Silahkan diisi dengan iklan anda, dan juga twitter image bisa diganti dengan twitter dari Anda sendiri.
Untuk 2 sidebar diatas footer cara pemasangannya seperti pada tutorial Widget Template Johny Magazine. Bagi yang lupa silahkan dibaca lagi
Untuk tab view menu yang ada di sidebar kanan, bagian atas anda tinggal membuat 4 widget dan otomatis akan menjadi tab view menu. Untuk lebih lengkapnya baca tutorial disini.
Jika Anda ingin menambahkan Mashable widget, letakkan kode berikut pada kotak HTML/javascript :
Apa lagi ini yang belum ya, sepertinya sudah semua, seperti juga pada template Johny Simple Magazine 2, template ini tidak ada fitur static page (halaman statis) karena script summary and thumb saya hilangkan agar tidak memperberat loading blog. Di bawah ini link untuk melihat demonya dan link download bagi anda yang berminat untuk mencoba memakai template ini. Selamat mencoba dan semoga bermanfaat.
Karena tempat penyimpanan google code sedang bermasalah tabber menu pada sidebar tidak jalan, untuk mengatasinya anda cari dan ganti kode berikut ini pada posisi edit HTML :
<script src='http://creatingwebsite.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='http://creatingwebsite.googlecode.com/files/tabber.js' type='text/javascript'/>
Ganti dengan kode di bawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/>
Dan jika headline news juga tidak bisa berjalan, untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :
Terakhir save templates, atau kalau Anda nggak mau repot-repot cari kode diatas untuk menggantinya satu persatu di download ulang aja, yang lama sudah saya updates, mohon maaf sebelumnya.
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
Template ini merupakan lanjutan dari versi pertama, Johny Portal. Seperti template terdahulu pada home page template ini dibagi menjadi 3 kolom dan 2 kolom pada post page. Template ini hanya berkapasitas 76.0 kb mungkin agak ringan menurut saya, karena tidak banyak fitur yang saya pasang kali ini. Di bawah ini screenshot dari template Johny Portal 2 :
Fitur-fitur yang ada pada template ini antara lain :
Slider Image Otomatis Untuk mengganti image pada slider, cari kode berikut :
numposts1 = 5; label1 = "sport";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
Kategory dengan thumbnail (Category with thumbnail)
Letaknya di sidebar kiri, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script> <a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Kotak feedburner di bawah postingan Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
<div class='subscribe'> <p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'> <b>click here</b></a>, or subscribe to receive more great content just like it.</p> <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='JohnyTemplate'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/> <input id='botsubbutton' type='submit' value='Submit'/><br/> <small>Your information will not be shared. Ever.</small> </form> </div>
Keterangan : Warna biru : ganti dengan alamat feed anda. Warna merah : ganti dengan URL anda.
Latest Post Untuk mengatur lates post yang ada di homepage caranya sebagai berikut :
Di dashboard blogger pilih setting, kemudian klik formatting. Pada bagian paling atas pilih berapa posts yang ingin ditampilkan pada homepage.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Untuk membuat widget yang ada di bawah latest post, Anda tinggal memasukkan script yang sudah saya sertakan jika anda sudah mendownloadnya.
Satu lagi hampir lupa, template ini tanpa disertai dengan fitur static page (halaman statis). Karena memang tidak ada script summary and thumb pada template ini. Jika diantara Anda ada yang bisa menambahkan fitur static page pada template ini saya akan sangat berterima kasih.
Satu lagi ada yang lupa, untuk mengaktifkan fungsi reply pada kotak komentar, cari kode ini pada edit HTML template :
Perhatikan kode yang berwarna merah, itu adalah ID blog demo template ini. Anda harus ganti dengan ID blog anda yang terletak pada browser.
Pada dasarnya semua script yang saya jelaskan sudah ada jika anda download template ini. Anda tinggal memasukkan ke dalam kotak HTML/javascript. Jika masih ada yang kurang paham bisa ditanyakan pada kotak komentar. Dan jika ada yang tertarik untuk mencobanya silahkan klik link download yang ada di bawah.
Template Creating Website 2 kolom seperti yang saya pakai ternyata banyak juga yang berminat. Buat Anda yang menginginkan template ini sudah saya sediakan, Anda tinggal download, terus habis itu di upload. Template ini saya peringkas sehingga tidak seberat punya saya sendiri, karena template yang saya pakai sekarang ini memakai syntax highlighter yang banyak menggunakan kode javascript, yang mungkin untuk blog yang isinya berita tidak perlu dipasang Tapi dari tampilan sama persis, nggak ada bedanya. Bedanya cuma mungkin fitur blockquote, sama kolom komentar yang sengaja tidak saya sembunyikan. Karena dari template Creating Website modifikasi yang terdahulu banyak juga yang meminta kotak komentarnya nggak usah di modifikasi memakai spoiler.
Gambar tampilannya ya seperti blog saya ini, sama kan?
Untuk menampilkan Artikel Terkait ini hanya tampil pada post page baca tutorialnya disini.
Mengganti URL Feedburner
Anda tinggal mencari kode blogspot/offH pada template, setelah ketemu ganti dengan feed anda. Atau kalau kurang jelas selengkapnya bisa dibaca disini.
Membuat Drop Cap atau tulisan huruf awal postingan menjadi besar.
Sengaja template ini tidak dimasukkan fitur Drop Cap, karena selera setiap orang pasti beda. Bagi Anda yang menginginkan setiap huruf awal pada postingan menjadi besar langsung saja baca tutorialnya disini.
Mengganti kotak pencarian (search) adsense
Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style='float:right;padding:1px 8px 0 0;'> )
Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu.
Untuk tampilan blockquote anda bisa modifikasi sendiri sesuai selera. Dan jika ada yang menginginkan kotak komentar disembunyikan menggunakan spoiler, langsung saja menuju pada tutorial Kang Damar disini.
Untuk mas Hanif bocah Tulungagung khususnya semoga terpenuhi keinginan Anda, dan buat temen-temen yang lain juga silahkan kalau mau mencoba memakai template ini. Di bawah ini sudah saya sediakan link untuk melihat demo dan downloadnya.
Saya persingkat saja ya, template ini saya beri nama Johny Simple Music, anda bisa kira-kira sendiri kenapa template ini saya beri nama demikian. Tapi kalau mau digunakan untuk konten yang lain juga silahkan saja. Fitur yang ada pada template ini adalah sebagai berikut :
Recent Post Slider Image
Image slider otomatis, kerja slider ini adalah setiap Anda membuat postingan baru akan muncul dalam slider. Jadi tidak perlu lagi susah-susah memasukkan satu persatu keterangan gambar dan URL nya. Klik Tambah Gadget >> pilih HTML/Javascript, masukkan kode berikut pada kolom di bawah header (ada dua kolom pilih yang atas) :
<div id="slider"> <script style="text/javascript" src="http://creatingwebsite.googlecode.com/files/slidergallery.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://johny-simplemusic.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
Ganti URL warna merah dengan URL anda, selanjutnya slider sudah bekerja secara otomatis memuat postingan terbaru Anda.
Karena tempat penyimpanan google code saya sedang bermasalah slider pada templates ini tidak berfungsi, untuk mengembalikan pada kondisi semula anda harus merubah kode yang berwarna biru di atas dengan kode di bawah ini :
Ganti tulisan warna biru dengan kategori atau label yang ingin anda tampilkan di sidebar.
Kategory tanpa thumbnail Contohnya seperti pada sidebar kanan di bawah top music. Masukkan kode ini pada kotak HTML/Javascript template anda :
<script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="http://johny-simplemusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-simplemusic.blogspot.com/search/label/jazz" style="float:right;font:normal 10px Arial;padding:5px 0;">More Post »</a>
Keterangan : Warna merah : URL blog Warna biru : kategori atau label
Di bawah ini link demo dan download bagi Anda yang ingin mencoba template ini, maaf kalau bahasanya kurang enak dibaca, maklum udah ngantuk, ini juga saking penginnya selalu berbagi hehehehe besok pasti dperbaiki. Selamat malam dan selamat mimpi indah.... hooaaahhhhmmmmmmmmmm.
Ucapan terima kasih yang sebesar-besar kepada teman saya seorang blogger maker handal Irengajah dari Dhetemplate.
Karena tempat penympanan google code saya kena banned sama google beberapa fungsi script dri template ini menjadi mati, untuk mengatasinya ikuti petunjuk di bawah ini (masuk ke edit HTML jangan lupa centang kotak expand widget templates) :
Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.
Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.
Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
Login ke blogger dengan akun anda
Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
.widget-tab ul { margin:0px; padding:0px 5px 0 5px; } .widget-tab ul li { list-style:none; border-bottom:1px dotted #a4bddf; padding-top:4px; padding-bottom:4px; font-size:12px; } .widget-tab ul li:last-child { border-bottom:none; } .widget-tab ul li a { text-decoration:none; color:#3e4346; } .widget-tab ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .tab-content ul li a:hover { color:#a59c83; } .tab-content ul li a:hover small { color:#baae8e; }
Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
<script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='http://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>
Keterangan : var starttab=0; var endtab=3; var sidebarname="sidebar";
Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).
Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....