Featured Post Today
print this page
Latest Post

Forum Diskusi Pengguna Template Creating Website

Forum ini saya buat karena banyak sekali komentar yang masuk melampaui ambang batas, terlalu banyak sehingga kadang jawaban admin tidak terbaca oleh si komentator. Terkadang juga karena saking seringnya pertanyaan yang muncul dengan topik yang sama, sehingga saya harus menjawabnya berulang kali. Forum ini juga mengantisipasi pertanyaan-pertanyaan yang masuk ke email saya, yang terkadang juga jarang saya jawab karena saya jarang buka email atau bagi teman-teman yang sering minta chat di Facebook, karena terus terang saya tidak begitu tertarik dengan sosial media yang satu ini. 

Forum ini sebenarnya saya buat khusus untuk para pengunjung di blog ini, khususnya para pemakai template dari Creating Website. Tapi jika ada teman blogger lain yang mau ikut berpartisipasi silahkan saja. Silahkan promosi artikel atau blog Anda di Forum itu, bebas dan gratis tidak dipungut biaya.

So, jika Anda tertarik untuk ikut gabung dalam forum ini. caranya sangat mudah, Anda tinggal masuk ke link ini FORUM DISKUSI yang ada di menu navigasi atas atau klik screenshot gambar di bawah. Setelah terbuka halaman baru, Anda tidak perlu mendaftar karena bisa langsung Log In dengan akun Google, Facebook, Yahoo, Twitter dan lainnya. Silahkan pilih topik yang Anda inginkan, kemudian tulis apa saja yang berhubungan langsung dengan topik yang Anda pilih.

forum diskusi

Forum sederhana ini saya buat dari situs penyedia forum gratis tal.ki, silahkan Anda memanfaatkan forum ini untuk keperluan promosi blog atau artikel Anda, tanya jawab seputar template atau sekedar ngobrol dengan teman blogger yang lain sudah saya sediakan tempat ngobrol dengan fasilitas chat dari Chatroll. Saya tidak terlalu berharap banyak pada forum ini, disini saya hanya memberikan fasilitas baru bagi Anda, silahkan dimanfaatkan sebaik-baiknya. Tidak ada peraturan khusus, setiap blogger bebas berpartisipasi, selama dalam batas-batas yang masih bisa ditoleransi. Saya tidak perlu membuat sebuah peraturan-peraturan tertentu, saya yakin Anda semua sudah dewasa, pasti bisa memilah mana yang layak dan yang tidak layak untuk dijadikan sebagai konsumsi publik.

Saya juga menawarkan kepada teman-teman semua, bagi yang berminat untuk menjadi admin atau moderator pada forum ini silahkan tunjuk jari, tidak ada kriteria khusus untuk menjadi seorang moderator. Yang penting bisa menjembatani antar pengguna forum. Silahkan jika Anda mempunyai saran atau usul pada forum itu, misalnya menambahkan topik diskusi baru atau apa saja yang berhubungan dengan dunia blogger.

Demikian pemberitahuan ini, semoga bisa bermanfaat bagi teman-teman semua, satu pesan saya marilah kita ciptakan diskusi yang sehat dengan logika berpikir yang jernih sehingga menciptakan kesimpulan yang bisa diterima oleh setiap pihak.
0 komentar

Inilah 10 Blogger Pengguna Template Creating Website

Tepat 2 minggu setelah artikel saya sebelumnya yang berjudul Mau Backlink dari Maskolis? Saya akan memilih secara acak 10 pengguna template dari Creating Website, yang menurut saya layak diberikan nilai plus. Yang perlu diingat disini adalah ini bukanlah kontes atau turnamen yang memperebutkan sebuah hadiah, tidak ada yang menang dan kalah, tapi hanya sebagai ucapan terima kasih kepada teman-teman Blogger yang telah sudi menggunakan template dari Creating Website. Tidak ada kriteria tertentu dalam memilih, saya hanya melihat dari perspektif orang awam dalam melihat sebuah blog. Perpaduan atau komposisi warna yang enak dipandang mata dan pengaturan tata letak widget yang rapi, menjadi dasar saya untuk memilih ke 10 blog ini. Berikut ini ke-10 blog terbaik yang menggunakan template dari Creating Website :

MULTI PASTE

JiPer4ever

http://multipaste.blogspot.comhttp://www.jiper4ever.com

Siomponk

Yaa Akhi

http://www.siomponk.comwww.yaaakhi.com

adagamez.blogspot.com

Aceh Tourism And Culture

http://adagamez.blogspot.comhttp://acehtourismagency.blogspot.com

chanelsatu

anime999

http://www.chanelsatu.comhttp://anime999-store.blogspot.com

Menjamu Blog

BliBaju.com

http://menjamu.blogspot.comhttp://blibaju.com

Dan 4 blog di bawah ini untuk mengganti showcase yang sudah habis masa jabatannya, karena ganti URL atau ganti template lain bukan dari Creating Website :

Mainin Game

Tempat Wisata di Bandung

http://myarchivezone.blogspot.comhttp://www.tempatwisatadibandung.org/

Kompi Ajaib

Full blog Design

http://www.kompiajaib.comhttp://karinafotocollection.blogspot.com

Pemilihan ini saya lakukan berdasarkan pengamatan saya sendiri, jadi sifatnya sangatlah subyektif, karena semua blog yang sudah terdaftar layak diberikan apresiasi. Bagi blog teman-teman yang belum tercantum pada showcse diatas, saya mohon maaf yang sedalam-dalamnya, karena ini hanyalah sebuah penilaian pribadi, jangan terlalu dimasukkan ke hati.

Saya hanya bisa mengucapkan terima kasih yang sebesar-besarnya atas partipasi teman-teman semua  Hasil kerja keras Anda semua dalam memodifikasi sebuah template, sangat berguna bagi saya sebagai bahan inspirasi untuk men-design template di masa yang akan datang. Demikian tadi pidato Ibu Ketua PKK hari ini, jika ada kata-kata yang salah atau kurang berkenan mohon dimaafkan, maklum ibu-ibu jadi suka terpeleset kalau ngomong di depan orang banyak. Akhir kata... nggak boleh protes.

NB :
  1. Daftar ke 10 blog diatas, juga saya posting di Showcase 2 di Mas Template.
  2. Untuk 4 blog dibawah bisa dilihat pada showcase 1 di Mas Template dan Gallery Showcase Template Creating Website
  3. Semuanya nanti akan saya publish juga di Johny Template, nunggu yang punya blog dulu.
  4. Jika ada kesalahan dalam menempatkan link blog diatas, silahkan langsung protes pada kotak komentar di bawah.
  5. Saya mau nguli lagi.........
PENGUMUMAN PENTING 
Klik disini kalau mau tau
0 komentar

Terus Gua Mesti Bilang Prett Gitu?

Judulnya pakai Gua biar gaul, meskipun saya sendiri pasti medok kalau bilang gua, tapi nggak apa-apa toh ini kan hanya judul. Baru kali ini setelah hampir setahun lebih saya membuat template menemui sebuah keanehan. Asli saya sendiri saja kaget. Begini ceritanya, tadi saya iseng buka Alexa, itu tuh situs yang suka bikin ranking untuk web atau blog. Terus saya ketik URL Johny Wusss template, mata saya terbelalak seperti tidak percaya dengan apa yang barusan saya lihat. Johny Wusss template, hanyalah sebuah blog untuk demo dan yang pasti isinyapun juga cuma copas dari Lorem Ipsum sumsum dan sebagainya, tapi genap satu minggu template itu saya publish, peringkatnya sudah mencapai angka ratusan ribu, nongkrong pada rangking 595,531 secara keseluruhan, seperti terlihat pada gambar dibawah (klik untuk lebih jelas):


Menurut saya ini bukanlah hal yang wajar, apalagi untuk mencapai rangking segitu dalam 6-7 hari, sebuah blog harus ramai dikunjungi minimal sehari mencapai angka ribuan visitor. Jika saya bandingkan dengan template buatan saya yang lain, misalnya Johny Tampan yang sudah 2 minggu lebih saya publish dan termasuk template laris juga. Rangking Alexa Johny Tampan dua kali lipat, masih ada di bawah yaitu pada angka 1 jutaan. Padahal jumlah pageviews total Johny Wuss masih kalah jauh dibanding Johny Tampan, hampir tiga kali lipat lebih banyak Johny Tampan template.


Selain itu, dilihat dari traffic blog pada Dashboard, mayoritas trafik Johny Wuss berasal dari blog-blog lokal yang dengan tulus ikut membagikan template ini ke pengguna blogger lain. Berbeda dengan Johny Tampan atau template yang lain, trafik blog lebih banyak dari situs-situs penyedia template dari luar, misalnya Allblogtools.com (Maroko), CoolBthemes (India) dan lain-lain. Ya maklum saja, template seperti Johny Wusss tidak menarik untuk dipubish oleh situs penyedia template besar.

johny wusss

Terus terang, Johny Wusss template ini saya jadikan eksperimen untuk membuat sebuah template, yang disamping SEO friendly juga visitor friendly. Tapi tentu saja dengan dasar-dasar SEO yang layak dan terbukti ampuh dari Thesis Template buatan master SEO Blog Juragan. Dan ternyata eksperimen saya menunjukkan hasil yang positif, meskipun belum bisa dibilang sempurna paling tidak sudah ada indikasi yang memuaskan.

Meskipun template ini hanyalah template sederhana, tetapi posisi template ini di search engine selalu saya pantau, karena saya sudah terlanjur mengatakan kepada Anda bahwa template ini SEO friendly. Saya tidak mau para pemakai nantinya kecewa karena template ini ternyata tidak seperti yang diharapkan. Baru pada template Johny Wuss ini, saya berani bilang template ini SEO friendly, karena memang pada template-template lain sebelumnya masih banyak menggunakan javascript dan image pada Edit HTML, yang tentu saja jika semakin banyak dipasang pada sebuah template, maka semakin jauh dari kriteria SEO.

Nah itulah kenapa saya nulis ini, bukan bermaksud sombong atau gimana, saya hanya ingin membuktikan bahwa Template Johny Wuss memang SEO Friendly dan terbukti dengan data-data yang sudah saya tulis diatas. Saya hanya tidak mau, meskipun ini template gratis, banyak pengguna yang komplain, dan menuduh kalau saya hanya seorang pembual dengan mengatakan template ini SEO dengan dibumbui sejuta kata-kata hiperbolik yang membuat orang tertarik untuk menggunakan template. Lagipula apa sih untungnya kalau ada orang yang memakai template buatan saya? Paling cuma backlink doank..... makan tuh backlink.

Bagi Anda yang belum tahu tentang template ini dan ingin mencoba template ini, silahkan lihat dulu demonya di bawah kalau cocok ya dipakai, kalau nggak cocok ya buat dilihat-lihat aja, siapa tau nanti setelah dilihat bisa langsung keluar jin di dalamnya. Akhir kata..... preettttttt mau mandi dulu siap-siap mau berangkat kerja. Kalau ada pertanyaan nanti sore atau malam jawabnya. 

johny wusss


NB: 
Terima kasih untuk teman-teman blogger yang dengan tulus ikut membagikan template ini kepada yang lain. Saya doakan buat blogger cowok semoga dapet pacar cantik, buat cewek saya doakan dapat pacar yang ganteng seperti saya ini.
0 komentar

Template Blogger Jelek Untuk Komik

Di malam Minggu yang kembali kelabu ini saya akan membagikan satu buah template lagi untuk teman-teman blogger semua. Kemarin ada yang minta lewat email untuk dibuatkan template untuk komik Narto, terus terang saya bingung seperti apa bentuknya. Si Narto itu kok terkenal banget ya, sampai-sampai minta dibuatkan template, pangkatnya apa sih, anak jenderal ya? Yah namanya juga udah ABG tua jadi nggak tahu menahu soal hobby anak muda jaman sekarang. Okelah daripada jadi beban, nih saya buatkan template buat yang minta kemarin, tapi entah cocok apa enggak saya tidak perduli, yang penting sudah melaksanakan kewajiban dan tugas sebagai warga negara yang baik, yang selalu mengamalkan Pancasila dan UUD 1945...... opo hubungane.

Template ini namanya Johny Sakit Gigi, seperti usul teman saya kemarin yang pakai nama Arab. Sebenarnya mau saya kasih nama Johny Sudah Sembuh, karena sekarang sudah sembuh sakit giginya, tapi karena ide nama templatenya sangatlah brilian dengan sangat terpaksa template ini saya kasih nama Johny Sakit Gigi. Sakit gigi sangatlah menyiksa perasaan, mau makan nggak enak, mau nonton TV warnanya jadi hitam putih, jadi jangan sampai sakit gigi lagi. Lhah ini bagi-bagi templatenya kapan? Sabar... ini juga mau dibagi.

Template ini sebenarnya tidak harus untuk komik tapi bisa juga dipakai buat blog gallery atau blog konten biasa. Tampilannya tidak elegan, tidak menarik dan yang pasti jelek banget. Jadi bagi yang Anda yang tertarik dengan template ini mesti diperiksakan ke dokter kejiwaan atau psikiater. Ini malah ngomong mulu, templatenya mana? Ini ada di bawah :

maskolis template


Slider
Untuk slider anda tinggal masuk ke Layout kemudian pilih kolom dibawah header yang panjang, terus Add a gadget >> HTML/Javascript masukkan kode berikut ke dalamnya, hati-hati masukinnya, pelan-pelan penuh perasaan jangan kasar nanti bisa lecet :
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>                  
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>                  
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){  
    $('#slider').lofJSidernews({
        interval:6000,
        duration:800,
        mainWidth: 530,
        navigatorWidth: 100,
        maxItemDisplay:4,
        easing:'easeOutBounce',
        auto:true,
        isPreloaded: true
    });
});  
</script>
Jika Anda memasukkan kode diatas, slider bekerja menampilkan artikel terbaru blog Anda yang berjumlah 10 artikel. Anda bisa menampilkan slider per label atau kategori dengan menambahkan /-/your label setelah kode default diatas, nanti jadinya seperti ini default/-/your label?max-results. Untuk lebih jelasnya silahkan buka tutorial membuat slider ini pada artikel Modifikasi Slider Lofslidernews Makyus.

Dan untuk kotak feedburner di sebelah related post pada setiap postingan,cari kode ini di Edit HTML (jangan lupa centang Expand Widget Templates) :
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/blogspot/htbgh'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/htbgh?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a>
</form>
Ganti kode warna merah diatas dengan ID Feedburner blog Anda.

Template ini juga sudah tersedia Tag H1 dan H2 pada header blog dan di setiap judul postingan, Anda tidak perlu lagi merubah apapun agar template ini menjadi SEO friendly. So jika tertarik dengan template ini silahkan dipakai, tinggal klik tombol download diatas, anda sudah mendapatkan template ini dan bonus berupa doa dari pembuatnya agar yang makai template ini blognya jadi ramai pengunjung. Jika ada yang kurang jelas atau ada yang mau ditanyakan silahkan isi kotak komentar yang ada dibawah. Sekian dan semoga bermanfaat banget.
0 komentar

Inilah Tampang Maskolis yang Asli

Dari kemarin banyak dari teman-teman blogger yang nanya, ada yang melalui kolom komentar maupun lewat email, seperti apa sih tampang Maskolis? Ya saya jawab aja, ciri-cirinya saya ini ganteng. Coba ya nanti kalau di jalan ketemu sama orang ganteng, panggil aja "Mas... mass.... mass!!" Saya jamin dia pasti nengok. Selama ini saya memang sengaja menyembunyikan wajah saya di dunia maya, karena saya kawatir jika tampang saya banyak bertebaran dimana-mana, nanti banyak gadis-gadis yang terpesona dan jatuh hati ke saya. Tapi daripada ada yang penasaran, baiklah di kesempatan kali ini saya akan berterus terang kepada teman-teman blogger semua, seperti apa tampang Maskolis yang asli. Sekarang coba perhatikan gambar di bawah ini, pelan-pelan geser mouse-nya jangan langsung lihat gambar yang paling bawah ya...

maskolis

Gambar diatas jelas bukan saya, masa mukanya kartun? Tapi yang dua orang itu asli, teman saya dari Planet Kenthir namanya Herry FK dan Andreaneda Andrade. Gambar diatas saya pakai buat photo profil Blogger. Sekarang kita lihat gambar dibawah lagi.....

kompi ajaib
Sumber gambar  : https://plus.google.com/117950600521728942551/posts

Ah ini juga bukan, ini salah satu teman Maskolis yang selalu setia berkunjung di blog ini, dia admin dari blog Kompi Ajaib, orangnya baik dan ramah terlihat dari senyum manis yang selalu menghiasi bibirnya. Sekarang dia lagi sibuk bikin blog baru buat mini game online. Perhatikan lagi gambar di bawah, geser mouse sedikit demi sedikit jangan langsung menuju ke bawah......

panjz online
Sumber gambar : https://plus.google.com/102120736668843382412/posts

Ini juga bukan photo Maskolis, karena jauh dari kriteria ganteng..... hahahahahahahaha (nggak boleh marah). Photo diatas, di dunia blogger dikenal sebagai Panjz Online, dia juga salah satu pengunjung setia blog ini, di setiap postingan pasti ada dia. Teman yang baik dan humoris, suka memodifikasi template, salah satu templatenya udah nampang di Mas Template. Dilihat dari photonya, mungkin dia dulu punya cita-cita jadi masinis, karena nggak kesampaian akhirnya banting setir ke dunia blogger. Sekarang perhatikan baik-baik photo orang di bawah ini.... jreng.... jreng.

Nah ini baru bener, inilah tampang Maskolis yang asli, Anda harus percaya kalau photo dibawah adalah Maskolis, pilihannya hanya ada dua, percaya dan percaya banget. Semua ciri-ciri fisik pas banget, photo dibawah diambil waktu Maskolis lagi dinner bareng sama Angelina Jolie di sebuah kafe di kawasan Holywood.

maskolis
Sumber gambar : http://www.scenicreflections.com

Jangan percaya tulisan diatas, asli HOAXXXX...... validitas dan akurasinya 0%, karena ini hanya tulisan iseng sore hari sambil nungguin tukang nasi goreng lewat, dan untuk Google jangan diindeks tulisan ini dihalaman search engine-nya. Nanti kalau yang punya tampang ganteng diatas baca artikel ini, saya bisa dituntut ke pengadian karena pencemaran wajah tampan.

Tulisan diatas bisa juga menjadi sebuah contoh bagi teman-teman blogger semua, bagaimana membuat sebuah branding agar blog Anda mempunyai ciri khas tersendiri. Buatlah selingan-selingan artikel unik dari beberapa artikel unggulan yang Anda tawarkan kepada pembaca. Setelah itu, serahkan kepada pembaca sendiri untuk menilainya.

Buat yang punya photo diatas, mohon maaf kalau nggak minta ijin dulu pasang photo di artikel ini. Pokoknya harus boleh, boleh nggak boleh harus boleh..... hahahahahahahaha.
0 komentar

Modifikasi Slider Lofslidernews Otomatis Maknyus

Kali ini saya akan berikan satu lagi tutorial membuat slider otomatis dari Lofslidernews. Slider ini buatan landofcoder.com, demo aslinya bisa dilihat disini. Abu Farhan, seorang master blogger Indonesia juga pernah membuat slider ini yang bekerja berdasarkan popular post, tapi kekurangannya jika gambar yang dipakai ukurannya kecil atau ukuran tingginya lebih besar, gambar pada slider seperti kegenjet dan kurang enak dilihat. Disini saya hanya memodifikasi agar gambar terlihat simetris meskipun ukuran tinggi lebih besar, tapi tetap harus menggunakan gambar dengan ukuran besar jika ingin hasil yang lebih bagus. Slider ini juga saya buat agar bisa menampilkan artikel terbaru juga per kategori atau label.

Sekilas bentuk dari slider ini seperti slider yang ada pada template Sporty Magazine2 dari Borneo Templates. Banyak perbedaan mendasar dari kedua slider ini, disamping kode-kode pembentuk slider, Lofslidernews mampu menampilkan berapapun post yang ingin Anda tampilkan pada slider, karena gambar pagination kecil bergerak dinamis dari atas  kebawah kemudian kembali lagi keatas menggunakan efek Easing. Gerak dari gambar utama pada slider ini pun dari kanan ke kiri seperti pada Looped Slider yang akan saya bahas lain waktu.Untuk lebih jelasnya silahkan lihat demonya dibawah :

lofslidernews


Sebelum masuk ke tutorial membuat slider ini, saya mau kasih tau dulu kalau slider ini agak ribet dalam pengaturan panjang dan lebar image, baik yang besar maupun yang kecil (pagination). Juga slider ini lebih banyak menggunakan kode script, yang bagi blog prioritas SEO akan sangat merugikan. Tapi semua itu bisa diatasi dengan mengkompres dan meringkas kode-kode script pada slider di Google Code.

Oke, jika Anda berminat perhatikan baik-baik tutorial cara pemasangan slider ini sebagai berikut :
  1. Setelah masuk ke dashboard blogger, pilih blog yang akan dipasang slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
  4. Pertama yang harus Anda lakukan adalah membuat satu buah kolom kosong diatas blog post, seperti gambar di bawah ini (jika pada template yang Anda pakai sudah terdapat satu kolom kosong seperti gambar dibawah, langkah ini tidak perlu dilakukan) :
    lofslidernews

    Caranya, letakkan kode berikut di atas kode ]]></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;}

    Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
    </div>
    </b:if>
  5. Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke Edit HTML. Kemudian masukkan kode berikut di atas kode ]]></b:skin> :
    /* Lofslidernews */
    #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
    .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
    ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAJDnQmG7K6rX0YQodhNFc6t82YnD1Lf-rOADYdcrCFfiHdHD5fLa8oJ25tjhUeIZ5TXCQ8nFj-uuHvVEy6DRHN-eXAzXiv_oEfMCeo9PjhHAsY1OycRZHjJ6hrIrI-ARPtiR8DCPQmMn/s1600/transparant.png);padding:10px}
    ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
    ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
    ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}
    .slider-opacity li{position:absolute;top:0;left:0;float:inherit}
    ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}
    ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
    ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
    .slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
    .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
    .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
    .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
    .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
    .slider-navigator li.active img{border:#eee solid 1px}
    .slider-navigator li.active h5{color:#0178d3}
    Perhatikan kode warna merah diatas, itu dalah ukuran panjang dan lebar slider, silahkan disesuaikan dengan ukuran pada template Anda. Pada demo yang saya gunakan panjang main-wrapper 630px tapi karena ada padding slider sebesar 10px, ukuran yang saya gunakan untuk slider hanya 600px.

  6. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[

    (function($) {

    var types = ['DOMMouseScroll', 'mousewheel'];

    $.event.special.mousewheel = {
        setup: function() {
            if ( this.addEventListener )
                for ( var i=types.length; i; )
                    this.addEventListener( types[--i], handler, false );
            else
                this.onmousewheel = handler;
        },
       
        teardown: function() {
            if ( this.removeEventListener )
                for ( var i=types.length; i; )
                    this.removeEventListener( types[--i], handler, false );
            else
                this.onmousewheel = null;
        }
    };

    $.fn.extend({
        mousewheel: function(fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },
       
        unmousewheel: function(fn) {
            return this.unbind("mousewheel", fn);
        }
    });


    function handler(event) {
        var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
       
        event = $.event.fix(event || window.event);
        event.type = "mousewheel";
       
        if ( event.wheelDelta ) delta = event.wheelDelta/120;
        if ( event.detail     ) delta = -event.detail/3;
       
        // Add events and delta to the front of the arguments
        args.unshift(event, delta);

        return $.event.handle.apply(this, args);
    }

    })(jQuery);

    /**
     * @version        $Id:  $Revision
     * @package        jquery
     * @subpackage    lofslidernews
     * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
     * @website     http://landofcoder.com
     * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License
     */
    // JavaScript Document
    (function($) {
         $.fn.lofJSidernews = function( settings ) {
             return this.each(function() {
                // get instance of the lofSiderNew.
                new  $.lofSidernews( this, settings );
            });
          }
         $.lofSidernews = function( obj, settings ){
            this.settings = {
                direction            : '',
                mainItemSelector    : 'li',
                navInnerSelector    : 'ul',
                navSelector          : 'li' ,
                navigatorEvent        : 'click',
                wapperSelector:     '.slider-main-wapper',
                interval               : 4000,
                auto                : true, // whether to automatic play the slideshow
                maxItemDisplay         : 5,
                startItem            : 0,
                navPosition            : 'vertical',
                navigatorHeight        : 60,
                navigatorWidth        : 210,
                duration            : 600,
                navItemsSelector    : '.slider-navigator li',
                navOuterSelector    : '.slider-navigator-outer' ,
                isPreloaded            : true,
                easing                : 'easeInOutQuad'
            }   
            $.extend( this.settings, settings ||{} );   
            this.nextNo         = null;
            this.previousNo     = null;
            this.maxWidth  = this.settings.mainWidth || 600;
            this.wrapper = $( obj ).find( this.settings.wapperSelector );   
            this.slides = this.wrapper.find( this.settings.mainItemSelector );
            if( !this.wrapper.length || !this.slides.length ) return ;
            // set width of wapper
            if( this.settings.maxItemDisplay > this.slides.length ){
                this.settings.maxItemDisplay = this.slides.length;   
            }
            this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
            this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );   
            this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
            this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
           
            if( this.settings.navPosition == 'horizontal' ){
                this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
                this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
                this.navigatorOuter.height(    this.settings.navigatorHeight );
               
            } else {
                this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );   
               
                this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
                this.navigatorOuter.width(    this.settings.navigatorWidth );
            }       
            this.navigratorStep = this.__getPositionMode( this.settings.navPosition );       
            this.directionMode = this.__getDirectionMode(); 
           
           
            if( this.settings.direction == 'opacity') {
                this.wrapper.addClass( 'slider-opacity' );
                $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
            } else {
                this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
            }

           
            if( this.settings.isPreloaded ) {
                this.preLoadImage( this.onComplete );
            } else {
                this.onComplete();
            }
           
         }
         $.lofSidernews.fn =  $.lofSidernews.prototype;
         $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
       
         $.lofSidernews.fn.extend({
                                 
            startUp:function( obj, wrapper ) {
                seft = this;

                this.navigatorItems.each( function(index, item ){
                    $(item).click( function(){
                        seft.jumping( index, true );
                        seft.setNavActive( index, item );                   
                    } );
                    $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
                })
                this.registerWheelHandler( this.navigatorOuter, this );
                this.setNavActive(this.currentNo );
               
                if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                    this.registerButtonsControl( 'click', this.settings.buttons, this );

                }
                if( this.settings.auto )
                this.play( this.settings.interval,'next', true );
               
                return this;
            },
            onComplete:function(){
                setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
            },
            preLoadImage:function(  callback ){
                var self = this;
                var images = this.wrapper.find( 'img' );
       
                var count = 0;
                images.each( function(index,image){
                    if( !image.complete ){                 
                        image.onload =function(){
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }
                        }
                        image.onerror =function(){
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }   
                        }
                    }else {
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }   
                    }
                } );
            },
            navivationAnimate:function( currentIndex ) {
                if (currentIndex <= this.settings.startItem
                    || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                        this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                        if (this.settings.startItem < 0) this.settings.startItem = 0;
                        if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                            this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                        }
                }       
                this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
                                                    {duration:500, easing:'easeInOutQuad'} );   
            },
            setNavActive:function( index, item ){
                if( (this.navigatorItems) ){
                    this.navigatorItems.removeClass( 'active' );
                    $(this.navigatorItems.get(index)).addClass( 'active' );   
                    this.navivationAnimate( this.currentNo );   
                }
            },
            __getPositionMode:function( position ){
                if(    position  == 'horizontal' ){
                    return ['left', this.settings.navigatorWidth];
                }
                return ['top', this.settings.navigatorHeight];
            },
            __getDirectionMode:function(){
                switch( this.settings.direction ){
                    case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                    default: this.maxSize=this.maxWidth; return ['left','width'];
                }
            },
            registerWheelHandler:function( element, obj ){
                 element.bind('mousewheel', function(event, delta ) {
                    var dir = delta > 0 ? 'Up' : 'Down',
                        vel = Math.abs(delta);
                    if( delta > 0 ){
                        obj.previous( true );
                    } else {
                        obj.next( true );
                    }
                    return false;
                });
            },
            registerButtonsControl:function( eventHandler, objects, self ){
                for( var action in objects ){
                    switch (action.toString() ){
                        case 'next':
                            objects[action].click( function() { self.next( true) } );
                            break;
                        case 'previous':
                            objects[action].click( function() { self.previous( true) } );
                            break;
                    }
                }
                return this;   
            },
            onProcessing:function( manual, start, end ){            
                this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
                this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);               
                return this;
            },
            finishFx:function( manual ){
                if( manual ) this.stop();
                if( manual && this.settings.auto ){
                    this.play( this.settings.interval,'next', true );
                }       
                this.setNavActive( this.currentNo );   
            },
            getObjectDirection:function( start, end ){
                return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");   
            },
            fxStart:function( index, obj, currentObj ){
                    if( this.settings.direction == 'opacity' ) {
                        $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                        $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                    }else {
                        this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                    }
                return this;
            },
            jumping:function( no, manual ){
                this.stop();
                if( this.currentNo == no ) return;       
                 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
                this.onProcessing( null, manual, 0, this.maxSize )
                    .fxStart( no, obj, this )
                    .finishFx( manual );   
                    this.currentNo  = no;
            },
            next:function( manual , item){

                this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);   
                this.onProcessing( item, manual, 0, this.maxSize )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual );
            },
            previous:function( manual, item ){
                this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
                this.onProcessing( item, manual )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual    );           
            },
            play:function( delay, direction, wait ){   
                this.stop();
                if(!wait){ this[direction](false); }
                var self  = this;
                this.isRun = setTimeout(function() { self[direction](true); }, delay);
            },
            stop:function(){
                if (this.isRun == null) return;
                clearTimeout(this.isRun);
                this.isRun = null;
            }
        })
    })(jQuery)

     //]]>
    </script>
    <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 = 70;
    summaryTitle = 20;

    numposts = 10;

    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 showrecentposts(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts; 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 = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';                   
            document.write(trtd);      
                   
                  j++;
        }
       
    }


    function showrecentposts1(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();
       
          for (var i = 0; i < numposts; 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 = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                   
            document.write(trtd);      
                   
                  j++;
        }
       
    }

     //]]>
    </script>
    Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan. numposts:10; adalah jumlah post yang tampil pada slider
  7. Save templates lagi, pemasangan kode-kode di Edit HTML selesai. Sekarang Anda kembali ke Layout/Tata Letak. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik Add a Gadget >> HTML/Javascript :
    <div class='lof-main-wapper' id='slider'>
    <div class='slider-main-outer'>
    <ul class='slider-main-wapper'>
    <script>                   
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
    </script>
    </ul>
    </div>
    <div class='slider-navigator-outer'>
    <ul class='slider-navigator'>
    <script>                   
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script>
    </ul>
    </div>
    </div>
    <script type='text/javascript'>
    jQuery(document).ready(function($){   
        $('#slider').lofJSidernews({
            interval:6000,
            duration:800,
            mainWidth: 405,
            navigatorWidth: 200,
            maxItemDisplay:5,
            easing:'easeInOutQuad',
            auto:true,
            isPreloaded: false
        });
    });   
    </script>
    Keterangan :
    Tulisan warna merah (misteri) adalah label yang saya masukkan pada slider. Silahkan diganti dengan label yang ingin ditampilkan.
  8. Terakhir save, selesai.
Agak rumit ya? pelan-pelan nanti juga bisa. Baca tutorialnya dengan teliti jangan ada yang kelewatan karena menurut saya ini agak sedikit rumit dalam pengaturan panjang dan lebar. Jangan lupa kopinya diminum dulu, nanti keburu dingin. Jika masih ada yang kurang jelas, bisa ditanyakan pada kolom komentar dibawah. Itu tadi tutorial membuat slider Lofslidernews kali ini, silahkan dicoba dan semoga bermanfaat.

NB :
To Assal Ali, I will make tutorial slider in Johny Jogos template for you, next after this post
0 komentar

Artikel ini enaknya dikasih judul apa?

Tadi saya baru saja baca artikel dari salah satu blog teman, dari artikel yang saya baca ternyata ada juga orang yang suka kloning template blogger dari template berbayar atau tampilan blogger terkenal. Hmmm... ada-ada saja, kalau kloning template blogger dari platform lain, semisal Wordpress atau istilah kerennya convert template banyak saya temui, tapi kalau kloning template blogger, baru kali ini saya dengar. Yah perilaku blogger memang beda-beda, saya pribadi lebih menghargai sebuah template, meskipun banyak orang yang bilang itu template jelek tapi hasil dari ide dan gagasan sendiri daripada sebuah template yang wah tapi hasil kloning dari template lain.

Tapi di artikel ini saya bukan sedang menghakimi atau membuat penilaian subyektif tentang perilaku blogger tertentu. Itu urusan mereka apapun alasannya, mau kloning template atau mau copy paste tulisan orang lain saya pribadi nggak begitu perduli. Seperti kata salah satu master blogger Indonesia, Masdoyok sebaiknya kita berkonsentrasi membuat artikel yang bermanfaat bagi pembaca, ketimbang sibuk marah-marah atau menggerutu kelakuan blogger lain. Saya lebih cuka bercermin tiap pagi melihat kondisi diri, daripada melihat orang lain dengan segala kekurangannya. Mari kita lupakan semua itu, kita manusia pasti pernah punya salah, pasti ada kekurangan, semua ilmu yang kita punya semua berasal dari Dzat Yang Maha Agung. Otak yang kita gunakan untuk berpikir pun hasil serapan dari sana sini, bukan murni ciptaan atau hasil karya pribadi.

norah jones
Sumber gambar : http://garitodeblues.blogspot.com/

Kembali ke masalah template, sebuah blog menjadi besar dan terkenal, bukan karena tampilan atau template yang dipakai. Tapi lebih ke konten atau artikel yang ditawarkan kepada pembaca. Percuma jika Anda memakai template yang paling bagus sedunia tapi artikel yang ditulis hanya itu-itu saja, sudah banyak orang yang menulis topik yang sama. Karena mayoritas pengunjung pasti mencari informasi sesuai keinginannya, bukan untuk melihat tampilan blog seperti apa. Memang ada kepuasan tersendiri bagi pemilik blog jika mempunyai tampilan yang atraktif dan menarik, tapi itu relatif. Tidak semua blogger perpendapat demikian, tergantung motivasi awal orang membuat blog. Kesimpulannya pilihan template nomor sekian, konten yang utama.

Seperti yang pernah saya tulis sebelumnya, bagus atau tidaknya tampilan sebuah blog itu terlalu subyektif, anda bisa saja mengatakan blog Anda sudah paling bagus, paling cepat atau paling yang lain. Di lain pihak ada orang yang mengatakan blog Anda kurang menarik, kurang informatif, terus anda mau bilang apa? Mau marah-marah, ngamuk-ngamuk? Banyak sekali orang membuat blog karena tidak fokus pada tujuan awal, sehingga banyak dari mereka yang gagal. Gagal karena hanya fokus pada tampilan blog, memodifikasi sesuai keinginan sehingga lupa menulis artikel yang bermutu. Juga gagal menciptakan sebuah branding sehingga kalah bersaing dengan blog lain. 

Orang membuat blog seperti membuka sebuah toko, kenyamanan sebuah toko memang diperlukan. Tapi jika Anda hanya menawarkan kenyamanan tanpa dibarengi dengan dagangan bermutu yang banyak dicari konsumen, apa Anda yakin toko Anda akan bisa bertahan? Yang pasti meskipun fasilitas AC dan kamar kecil modern terpasang di setiap sudut ruangan, toko Anda akan semakin jarang dikunjungi pembeli, karena dagangan yang Anda tawarkan kurang variatif dan mutunya kurang bagus. Disinilah sebuah branding sangat diperlukan, anda dituntut mampu menciptakan sebuah ciri khas atau branding untuk toko yang Anda kelola.

Saya berikan contoh yang mudah, toko Rohis Facebook hanya berukuran 6 x 10 m persegi, tetangganya Kompi Ajaib, mempunyai sebuah toko yang luasnya 3 kali lipat, fasilitasnya lengkap dan sarana pendukung lainpun juga tersedia. Mereka berdua menawarkan barang dagangan yang hampir sama. Meskipun begitu toko Rohis Facebook terlihat lebih ramai dikunjungi pembeli. Usut punya usut ternyata Rohis Facebook lebih ramah dan supel dalam melayani pembeli, interaksi antara penjual dan pembeli lebih hidup. Siapapun yang menjadi pembeli mempunyai posisi tawar yang sama, entah itu orang kaya ataupun orang melarat semua diperlakukan dengan sama. Semakin hari, langganannya semakin bertambah banyak. Di lain pihak, meskipun dengan fasilitas mewah, toko Kompi Ajaib keliatan sepi pembeli. Kompi Ajaib terlalu kaku kepada pengunjung, dia memposisikan dirinya sebagai orang yang dibutuhkan, pelayanan kepada pengunjung terlihat diskriminatif. Cerita diatas hanya contoh belaka, nama dan pelaku sengaja memang dibuat demikian... biar yang punya nama memberikan reaksi... hahahahahaha

Dari analogi diatas, seorang blogger harus mampu menciptakan sebuah image atau opini publik yang positif. Memperlakukan setiap pengunjung sama, karena setiap pengunjung mempunyai latar belakang yang berbeda-beda. Membuat interaksi lebih hidup, sehingga pengujung betah dan kepingin lagi untuk kembali ke blog yang dikelolanya. Bayangkan jika Anda seorang konsumen di sebuah toko, dilayani dengan ketus oleh penjualnya, pasti anda akan berpikir dua kali untuk kembali membeli lagi barang di tokonya. Sebisa mungkin perlakukanlah mereka (pengunjung) pada posisi sama, jangan pernah ada stratifikasi blogger, pemula, senior, master atau lainnya. Saya paling benci jika menemui sebuah artikel yang judulnya ditamabahi dengan embel-embel "Pemula", misalnya tutorial blog untuk pemula, membuat blog bagi pemula dan lain-lain. Anjrittt... pengin muntah saya baca judulnya.

Itu tadi adalah salah satu contoh branding positif yang akan membuat pengunjung betah berlama-lama di blog Anda. Banyak sekali cara membuat branding yang lain, misalnya menawarkan artikel-artikel yang dibumbui dengan humor-humor segar, membuat judul artikel yang mengundang pembaca, atau menawarkan kepada pengunjung untuk berpartisipasi menulis di blog Anda. Silahkan cari sendiri branding yang ingin ditawarkan, jadilah Anda sebagai blogger yang berbeda dari yang lain. Ingat Norman K seorang polisi bisa terkenal karena dia berani tampil beda, akun twitter pseudeoanonym @triomacan2000 menjadi trending topic karena berani membuka kebobrokan para pejabat (meskipun kebenarannya diragukan) dan masih banyak lagi contoh orang-orang atau blogger yang banyak dicari karena perilakunya yang berbeda dari yang lain.

Kesimpulan dari artikel diatas adalah, daripada sibuk ngurusi kelakuan blogger lain lebih baik kita fokus ke diri sendiri. Ambil kaca dan bercermin, apakah kita sudah menjadi seorang blogger yang bermanfaat bagi orang lain, apakah kita sudah menjadi seorang blogger yang cukup sempurna sehingga kekurangan dan kelemahan kita tertutup oleh kelakuan negatif blogger lain. Tidak ada blogger yang sempurna, semua pasti punya kekurangan. Mari kita ciptakan sebuah ciri khas bagi blog yang kita kelola, jadikanlah blog kita berbeda, dan satu lagi jangan terlalu fokus hanya pada tampilan blog tapi perhatikan juga konten atau artikel-artikel yang Anda tawarkan kepada pembaca. 

Ini hanya tulisan iseng yang berisi pendapat subyektif saya, silahkan setuju atau sama sekali tidak setuju, karena setiap orang punya pendapat masing-masing, dan mohon maaf jika ada kata-kata yang menyinggung perasaan pembaca. Sekian dan semoga tidak bermanfaat......  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Paling banyak dibaca orang kenthir : 
  1. Cara Membuat Blog Yang Menarik 
  2. Bagaimana Cara Memilih Nama Blog Yang Baik? 
  3. Bagaimana Agar Template Anda SEO Friendly? 
  4. Mengapa Komentar Tidak Harus Dibalas
0 komentar

Inilah Template Johny SEO dan Cepat

Daripada jadi beban, karena kemarin banyak yang minta dibuatkan template yang sederhana, SEO friendly dan valid HTML. Sambil nunggu adzan Subuh, karena semalam tidur agak sore jadi bisa bangun pagi, langsung menyalakan komputer dan bikin template permintaan. Template ini termasuk template yang paling cepat loading diantara template-template lain yang pernah saya buat. Dan juga paling cepat proses pembuatannya, hanya 1 jam lebih dikit, meskipun hanya 1 jam tapi bikinnya nggak asal-asalan. Semua kondisi SEO dari template blogger paling SEO yang pernah ada di muka bumi, sudah saya pasang semua pada template ini.

Template ini namanya Johny Wusss, karena loadingnya menurut pengamatan saya sudah kriteria cepat, tanpa ada kode CSS atau javascript yang dikompres. Nanti silahkan dicek sendiri kecepatan template ini, menurut saya sih sudah cepat, tapi kalau menurut teman-teman belum cepat yang tidak usah dipakai, cari template yang lebih cepat lagi di Google banyak kok. Template ini juga termasuk SEO friendly dan visitor friendly, karena tag H1 dan H2 juga sudah terpasang, bisa di cek juga nanti. Validasi HTML5 cuma error 1 karena kode CSS yang saya letakkan pada widget komentar yang ada di sidebar. Tapi sayangnya ini template biasa, bukan template responsif karena saya belum bisa membuat template responsif, selama ini saya belum ada waktu buat belajar mendalami responsif layout.

johny wusss


Fitur :
  1. Simple template blogger with elegant look
  2. Auto readmore without javascript
  3. Fast loading
  4. Stylish threaded comment
  5. SEO friendly and visitor friendly
  6. Sidebar toggle hide and show
  7. Navigation menu dropdown
  8. Ads ready and many more
Untuk mengganti Feedburner yang ada di bawah setiap postingan, cari kode ini di Edit HTML (jangan lupa centang Expand Widget Templates) :
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a>
</form>
Tulisan warna merah diatas adalah ID feedburner dari demo template, silahkan Anda ganti dengan ID feeburner blog Anda.

Itu tadi artikel tentang template sederhana SEO dan visitor friendly yang saya bagikan Subuh ini, jika Anda berminat silahkan dipakai dan jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kolom komentar di bawah. Selamat beraktivitas dan semoga bermanfaat.

Bukti Template ini SEO

Perhatikan gambar di bawah ini, belum ada 2 jam template ini saya publish, ada salah satu blog yang menggunakan Johny Wusss template langsung nongkrong di halaman pertama dengan kata kunci Johny Wuss, nomer satu pula blog saya ini pun kalah.

template maskolis

0 komentar
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Belajar Blogspot - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger