Cep Husni Seven - Find me on Bloggers.com
Showing posts with label template. Show all posts
Showing posts with label template. Show all posts

Thursday, 4 July 2013

2 Simple Template Blogger Responsive

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Awalnya template ini memenuhi permintaan Pakdhe saya, dia minta dibuatkan sebuah tampilan blog untuk perusahaan property. Tapi karena pertimbangan kelayakan, saya menyarankan untuk membuat blog dengan platform lain. Akhirnya dia memutuskan untuk memakai CMS website template untuk situs perusahaan propertynya. Di samping masalah kredibelitas (masa perusahaan yang notabene punya duit pakai blogspot?) juga karena banyaknya keterbatasan yang dimiliki blogspot, misalnya belum tersedianya form login dan register, fleksibelitas untuk merubah tampilan blog,  dan masih banyak lagi fitur lain dari blogger yang tidak bisa dirubah sesuai keinginan pemilik blog.

Namanya juga blogspot, mau dirubah seperti apapun tetap saja blogspot, dimana masih banyak kekurangan disana-sini dan masih jauh dari layak untuk disebut sebagai salah satu platform blog yang dinamis. Apalagi sekarang aturan penggunaan produk-produk dari Google lebih diperketat dan bagi pengguna blogspot sangat resistance atau rentan dengan amukan alogaritma Google Panda. Kenapa mesti namanya panda? Padahal panda adalah salah satu spesies binatang yang lucu dan nggak suka ngamuk-ngamuk. Harusnya diganti namanya jadi Google Kebo, karena binatang itu yang suka ngamuk kalau lagi lapar.

Kembali lagi ke template yang mau saya bagikan, karena templatenya sudah terlanjur dibuat, agar tidak mubadzir saya share disini saja, siapa tahu ada yang mau makai. Ini juga salah satu alasan kenapa saya tidak pernah melakukan komersialisasi template blogger. Disamping kualitas template buatan saya dibawah rata-rata, juga karena rasa pesimis yang berlebihan, bagaimana nanti kalau tidak laku coba? Yang akhirnya menjadi sebuah hasil karya yang sia-sia karena tidak bisa difungsikan secara maksimal oleh orang lain. Karena sebuah template atau apapun bila sudah dikasih tarif akan menjadi tidak etis jika akhirnya nanti dibagikan secara gratis, setidaknya itu menurut opini saya.

Pakdhe Johny

blogger template responsive


Karena template ini awalnya permintaan Pakdhe saya, namanya Pakdhe Johny. Fitur-fitur yang tersedia pada template ini :
  1. Camera Slideshow
  2. Floating Social Bookmark
  3. Responsive Layout (menurut saya)
  4. Banner iklan 728 x 90 di bawah header
  5. Artikel terkait dengan thumbnail
  6. Tag H1 dan H2 juga sudah dipasang
  7. Coba klik salah satu gambar di homepage, fitur apa itu namanya?
  8. Dan masih banyak lagi yang masih belum dipasang
Untuk mengaktifkan camera slideshow, cari kode ini di Edit HTML :
blogURL:'http://pakdhe-johny.blogspot.com/',
Ganti URL warna kuning diatas, dengan URL blog Anda. Dan untuk mengganti floating social bookmark dengan data-data Anda cari kode berikut di Edit HTML :
 <div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='https://www.facebook.com/your facebook' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHu0p_LpcRFPW9KU8lWXK3sq0Lz3igyw-hEE8HhvzX8Kb4dvi9Hnw0xTlV1qq4kxr_tVS2kU_KettQNYGqOjJ8efKjXnk7v3em36C1SVbi1oPnieI7ubl3OZc9lHPYgJbkDf9YGXWrWgT/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='https://twitter.com/maskolis' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAWfQcsKPtCPk8fRyh_dkOeqyd7rtBP__5EgbW4Yzti31LJjwy-y2uJBoFSTGIAJHRqeGBbHh2a4jt7p7f85BhZ4F_lJlpTi_QLhsjZGtZupSyYXdcfWvoM4DSTqOV-iZEyVsUUFgWIlG/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjc6IKQ2ZxD6d2nQFOk5Svo9WvHfo-CBQZ_9Z4H59msjw2giBaLQoOyI4KmMDLnT6kVHVRB_ZhRTuVidVpLPbfzxsk7XTAZxpoaoerHcb1bnsgGTKGnHZBRLu0qMfKUhVE41n2z76PRrc/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='sosmed-kananrss' onmouseout='this.className=&apos;sosmed-kananrss&apos;' onmouseover='this.className=&apos;sosmed-kananrssc&apos;'><div class='sosmed-isirss'><a href='http://feeds.feedburner.com/maskolis/iqBg' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>
</div></div>
Ganti semua tulisan warna merah di atas dengan ID Anda.

Johny Ribet

blogger template responsive


Meskipun namanya pakai Ribet, sebenarnya ini template paling simple di antara template-template yang pernah saya buat. Template ini side effect atau efek samping dari pembuatan template Pakdhe Johny. Karena setiap saya membuat template pasti tidak pernah lepas dengan yang namanya jurus coba-coba. Eksperimen dalam memadukan warna atau fitur terkadang memunculkan sebuah kombinasi yang enak dilihat, daripada merubah yang sudah jadi mending dibuat template baru, ya hasilnya seperti template Johny Ribet diatas.

Tidak ada penambahan fitur baru pada template ini, untuk mengganti floating social bookmark cara seperti pada template Pakdhe Johny diatas.

Saya akan ulangi lagi disini, masalah akurasi responsivitas kedua template diatas saya tidak jamin 100% karena teknologi dan kualitas mobile phone saya yang tidak menunjang untuk mengecek secara langsung. Jadi, harap maklum dan jika ada yang merasa tampilan responsif-nya kurang enak dilihat, silahkan protes pada kolom komentar dibawah. Berhubung hujan sudah reda sekarang waktunya pulang ke rumah masing-masing......

TAMBAHAN :
Mas Adhy (Kompi Ajaib) dan mas Panjz (Panjz Online) demo template yang mau dibagi mana ya?

Thursday, 4 April 2013

2 Template Blogger Responsive Gratis

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Karena template responsif sepertinya memang sedang menjadi komoditas unggulan bagi para Blogger, kali ini saya mengalah. Meskipun dari awal saya tidak perduli dengan tampilan responsif, mau tidak mau harus menyesuaikan dengan pasar agar bisa bertahan dalam persaingan dunia Blogger yang semakin kompetitif. Seperti saya tulis pada artikel terdahulu, bagi Anda yang tidak menggunakan tampilan responsif, janganlah terus minder atau buru-buru mau ganti template. Pertimbangkan terlebih dahulu masak-masak sebelum Anda ganti template. Terlalu sering Anda ganti template, tidak bagus bagi blog Anda di mata Google. Banyak artikel yang membahas hal itu, silahkan cari sendiri di Google.

Kali ini saya akan bagi lagi 2 buah template sederhana dengan tampilan responsif, setidaknya itu menurut saya. Karena saya membuat template ini hanya bermodalkan satu buah komputer jadul yang sering hang kalau panas dan koneksi internet tentunya, serta fasilitas responsive cheker online gratis yang banyak betebaran di internet. Saya disini tidak bisa mengecek secara langsung lewat mobile phone, karena teknologi dan kualitas HP saya tidak memungkinkan untuk itu. Jadi masalah akurasi responsivitasnya saya tidak jamin seratus persen, silahkan Anda cek sendiri melalui mobile phone Anda.

Johny Ajaib

responsive template


Memang cuma Kompi saja yang bisa ajaib? Johny juga bisa, ini buktinya template ini saya kasih nama Johny Ajaib. Template ini bisa juga dibilang sebagai bentuk apresiasi saya ke Kang Adhy pemilik blog Kompi Ajaib. Pada halaman muka template ini saya menggabungkan dua model tampilan, yang pertama adalah tampilan readmore blogger menggunakan javascript seperti biasa yang hanya menampilkan 1 buah post, dengan tampilan widget daftar isi dari Taufik Nurrohman seorang jagoan Blogger Indonesia pemilik situs http://www.dte.web.id.

Hal ini saya maksudkan agar fitur preview atau pratinjau pada blogger dapat berfungsi tanpa harus menyembunyikan post pada halaman muka, dan yang kedua untuk mengantisipasi mesin telusur dalam membaca struktur kode pada template. Karena jika Anda hanya meletakkan postingan berupa link yang dibangun dari javascript pada halaman muka, itu tidak akan terbaca atau diabaikan oleh mesin telusur, dan tentu saja hal itu tidak bagus untuk SEO. Kira-kira begitu yang saya tangkap dari salah satu komentar Kang Taufik pada salah satu artikelnya. (mohon dikoreksi kalau salah).

Untuk kustomisasi recent post paling atas, silahkan masuk ke setting >> posts and comments >> show at mosts, pilih angka/jumlah 1 (jika Anda ingin tampilan seperti pada demo), seperti pada gambar di bawah ini :

responsive template

Anda bisa merubah jumlah post itu sesuai keinginan. Tapi mesti diingat, Anda harus sesuaikan juga dengan jumlah tampilan post widget daftar isi yang ada di bawahnya agar tidak terjadi double post pada halaman muka. Caranya, perhatikan kode ini pada Edit HTML (centang expand widget templates) :
for(var o=1;o<postsperpage;o++)
Perhatikan angka warna kuning diatas, sesuaikan dengan jumlah show at most yang Anda pilih. Dan untuk setting widget daftar isi, cari kode berikut ini pada Edit HTML (centang expand widget templates):
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "",
    loadingText    = "Loading...",
    totalPostLabel = "Total Post :",
    jumpPageLabel  = "Page",
    commentsLabel  = "Comments",
    rmoreText      = "Read more &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://johny-ajaib.blogspot.com/",
    postsperpage   = 9,
    numchars       = 160,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGQhGf89M5Oxdz7aLxQOg_nJgWRmhNvE9Edstxsw344DEij_pd1qDs69hVeP_THoZsvsvjwVks7pEIkkdXY09fAa1cfh3gLGQrQ-SrwWe79qRLe1HUtdpvd7Ytx5AFOJhyf6o6eYHZHc/s1600/no+image.jpg";
Keterangan :
  1. Warna Merah : Ganti dengan URL blog Anda
  2. Warna Hijau : Jumlah postingan keseluruhan pada halaman muka.
  3. Warna Biru : Jumlah karakter huruf pada widget daftar isi.
Untuk keterangan yang lain saya kira mudah, silahkan Anda sesuaikan dengan kebutuhan atau keinginan

Johny Asal Responsive

responsive template

Note :
Beberapa artikel pada demo template ini berdosis tinggi, bagi Anda yang belum bisa menerima perbedaan pendapat, sebaiknya jangan dibaca

Seperti namanya, yang penting responsive, mau dipakai atau enggak yang penting template responsive. Mungkin kira-kira itu yang ada di pikiran saya waktu bikin template ini. Tidak ada yang baru, juga tidak ada tutorial khusus untuk template ini. Yang perlu diperhatikan, disarankan untuk memakai gambar pada setiap postingan yang Anda buat. Dan setiap gambar yang Anda sertakan pada postingan harus diupload di Blogger, jangan disimpan di situs lain apalagi copy URL image dari blog lain.

Itu tadi 2 template responsive yang saya bagi kali ini. Silahkan diunduh bagi Anda yang suka atau berminat, siapa tau setelah memakai template ini Anda mendapat hadiah liburan selama 2 minggu ke Hawaii atau ke Paris, ya siapa tau karena jika Tuhan berkehendak, apapun pasti terjadi. Diatas sudah saya sertakan semua tutorial cara pemasangan untuk kedua temlplate tersebut. Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kotak komentar di bawah. Selamat mencoba dan selamat tidur.......

Thursday, 28 March 2013

2 Template Blogger Hasil Kreasi Bapak-Bapak

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Template yang akan saya bagi kali ini, hasil kreasi dua orang bapak-bapak keren yang rambutnya sudah habis dimakan usia. Dengan tekun dan sabar mereka berdua memodifikasi template-template yang pernah dibagikan disini, sehingga menjadi sebuah template dengan tampilan yang lebih baru dan menarik. Oke langsung saja, karena saat ini saya pribadi lagi miskin ide menulis dan kurang intens ngeblog, berikut ini kedua template hasil modifikasi mereka :


Demo | Download

Modified by : Kompi Ajaib


Demo | Download

Modified by : Panjz Online

Semua petunjuk cara pemasangan fitur dan widget yang ada pada kedua template diatas sudah saya sertakan pada file download. Apapun penilaian Anda mengenai kedua template diatas, mereka berdua layak dikasih apresiasi. Dan bagi teman-teman lain yang ingin memodifikasi template dari sini (ingat hanya template dari Creating Website), dipersilahkan. Ambil salah satu atau beberapa template dari sini, silahkan dimodifikasi sesuai keinginan dan kreativitas Anda. Kemudian kirimkan ke email saya, setelah melalui tahap seleksi subyektif, jika template yang Anda modifikasi pantas dan layak untuk dikonsumsi, akan saya bantu publish di blog ini.

Note :
  1. Untuk Template Darla Ferdana, template Anda tidak jadi saya publish disini karena link kredit dari blog ini nggak ada.
  2. Mas Adhy dan Mas Panjz tolong dibantu ya kalau ada yang tanya seputar template hasil modifikasi kalian. Saya mau istirahat ngeblog sebentar.

Friday, 8 March 2013

Artikel Lanjutan yang Kemarin

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sebelum membaca artikel ini, Anda harus baca artikel sebelumnya disini. Kenapa saya bilang harus? Pertama, karena saya tidak akan mengulang lagi apapun yang sudah saya tulis kemarin. Kedua, karena tulisan kali ini ada kaitannya dengan yang kemarin dan hanya berisi tutorial atau cara customisasi kedua template yang sudah saya bagi pada artikel sebelumnya, dan ketiga bukan saya malas nulis lagi di artikel ini, tapi sekedar untuk menambah pageviews blog. Sekarang demo template dan link download sudah tersedia pada artikel sebelumnya, silahkan dibuka kembali.

Johny Tubeprett

blogger template video

Demo dan link download template ini ada pada artikel sebelumnya. Template ini saya buat khusus bagi Anda yang suka koleksi video dari Youtube. Jika Anda ingin gunakan untuk konten biasa, silahkan saja tapi usahakan menggunakan gambar dalam setiap postingannya, dan hapus juga kode CSS play-button dan play-dong agar gambar "play" pada thumbnail di halaman muka hilang.

Cara posting video pada template ini sama persis dengan template Johny Crottube, jadi silahkan dibuka lagi artikel Johny Crottube, Template Iseng Sambil Nunggu Jerman Vs Yunani. Untuk pemasangan fitur lain yang ada pada template ini, silahkan simak penjelasannya berikut ini :
  1. Slider atas yang saya pasang pada template ini bekerja menampilkan recent post, jika Anda ingin merubah menampilkan per label/kategori, silahkan dibuka tutorial cara membuat slider vertikal disini.
  2. Widget "Type Your Label Here" yang di samping slider, seperti biasa masuk ke Layout, pilih kolom Type Your Label Here yang ada diatas blog post >> klik Edit, kemudian ketikkan label pada kotak itu, terakhir Save. Lihat gambar di bawah untuk lebih jelas :

    maskolis

  3. Widget Tab View kategori
    Pertama, untuk merubah judul tab (Adventure, Action, Bike Game dan seterusnya) cari kode berikut ini di Edit HTML :
    Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game"
    Setelah ketemu ganti tulisan warna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori.
    Kedua, untuk mengisi widget tab view dengan label yang ingin Anda pasang disitu, cari kode berikut pada Edit HTML (jangan lupa centang expand widget templates) :
    <div class='tab-wrapper'>
    <div class='tabber' id='tab1'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab2'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab3'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab4'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab5'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab6'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='clear'/>
    </div></div>
    Ganti semua tulisan warna merah pada kode diatas, dengan label yang ingin Anda tampilkan.
  4. Widget Popular Post
    Masuk ke Layout >> pilih Popular Post >> centang hanya kotak thumbnail, biarkan kotak snippet kosong.
Johny Movie Prett

blogger template movie

Template ini hasil penggabungan dari Johny Tampan dan Johny Jijay, saya buat khusus bagi Anda yang suka mengkoleksi film. Demo dan link download template ini, silahkan buka lagi artikel sebelumnya. 

Cara pasang slider sama seperti pada Johny Jijay, silahkan buka lagi artikel ini Johny Jijay, Simple Template Blogger Gallery Movie. Dan untuk memasang widget tab kategori sama seperti pada template Johny Tubeprett diatas.

Itu tadi artikel tutorial untuk kedua template yang sudah saya bagikan kemarin. Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kotak komentar di bawah. Sekian dan semoga bermanfaat....

Thursday, 7 March 2013

2 Template Blogger Gallery Bukan Responsif

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Saya kembali lagi dengan tampilan template non responsif, sebenarnya saya pribadi tidak begitu perduli dengan tampilan sebuah template itu responsif atau bukan, karena saya punya prinsip kekuatan utama sebuah situs atau blog bukan terletak pada tampilan blog, tapi pada isi atau konten yang ditawarkan kepada pembaca. Sampai saat ini saya belum merasakan manfaat yang nyata dari pemakaian tampilan responsif, selain Blogger sendiri sudah menyediakan fitur bawaan untuk tampilan mobile, tampilan responsif ternyata bukan pula jaminan sebuah blog ramai dikunjungi orang, apalagi saya sendiri belum pernah memakai mobile gadget modern untuk mengakses internet. Saya hanya menyarankan, jangan sampai Anda sebagai seorang blogger hanya sekedar mengikuti trend ngeblog atau istilahnya janganlah mengikuti Euforia sesaat, seperti seorang ABG yang menggandrungi boyband/girlband Korea sehingga melupakan budaya leluhur bangsa yang kian hari semakin minim peminat.

Saya akan menikung dulu ke topik budaya bangsa ya. Bukannya sok nasionalis, saya hanya kadang miris jika melihat sebuah pertunjukan seni tradisional, seperti tari Jaipong, tari Piring, seni Reog dan lainnya (dangdut nggak termasuk, karena dangdut bukan murni seni budaya bangsa kita), yang jarang diminati oleh generasi muda. Jangan salahkan bangsa lain jika suatu saat ada yang meng-klaim sebagai seni budaya mereka, karena kita sebagai generasi muda malah bersikap apatis dan tidak mau melestarikan bahkan tidak perduli dengan budaya kita sendiri. Kita bersikap reaktif ketika ada negara lain mengklaim sebagian dari budaya bangsa ini. Namun sungguh ironis, dalam kondisi tidak ada klaim dari negara lain, generasi muda negeri ini malah justru tergila-gila dengan budaya bangsa lain. Seperti contoh diatas adalah idolisme (kalau menurut saya sih idiotisme) generasi muda pada budaya Korea dan cenderung memandang rendah atau menganaktirikan budaya bangsa sendiri.

Disini saya bukan benci atau anti dengan budaya Korea atau budaya bangsa lain, apapun bentuk budaya baru, dari bangsa manapun, jangan sampai Anda mau dimanfaatkan oleh produsen hiburan sehingga dijadikan sebagai obyek eksperimental untuk memasarkan "barang dagangan" mereka. Secara materi mereka sangat diuntungkan karena mereka menganggap generasi muda bangsa ini sebagai pasar potensial. Lha.. kita dapat apa? (Ini salah satu sebab kenapa saya sangat tidak suka dengan sistem kapitalis, lihat profile Blogger)

Terus terang, saya sendiripun juga suka dengan beberapa budaya asing yang ada, suka mendengarkan seni musik dari bangsa lain tapi tentunya melalui sebuah pertimbangan rasionalitas yang wajar dan proses filterisasi diri sehingga tidak sampai melupakan budaya bangsa sendiri apalagi sampai memandang rendah. Yang jelas saya lebih memilih acara TV yang mempertunjukan budaya tradisional bangsa yang lebih memiliki unsur seni, ketimbang acara boyband/girlband Indonesia yang melenggak-lenggok bak artis-artis dari Korea. Maaf sebelumnya saya menulis ini karena rasa muak saya sudah mencapai pada titik nadir yang tertinggi, harus diungkapkan lewat tulisan daripada perasaan ini membatu di otak malah bisa jadi tumor nantinya.

Kembali ke masalah tampilan responsif, menurut subyektivitas saya yang dilindungi Undang-Undang dalam berpendapat, tampilan responsif sama halnya dengan validasi HTML, antara penting dan tidak itu beda tipis, intinya tidak mutlak untuk sebuah blog. Jika teman-teman disini merasakan manfaat yang luar biasa dari kondisi blog yang responsif dan Valid HMTL, silahkan di-implementasikan pada blog yang Anda kelola. Jika Anda merasa nyaman dengan kondisi ideal sebuah blog seperti diatas silahkan diterapkan pada blog kesayangan Anda. Disini saya hanya mengingatkan saja, jangan sampai Anda hanya fokus untuk merubah tampilan blog Anda menjadi ideal, sehingga melupakan tujuan utama Anda ngeblog, yaitu memberikan artikel yang informatif bagi para pembaca. Karena manfaat sesungguhnya membuat blog akan Anda rasakan jika pengunjung merasa artikel yang Anda buat bermanfaat bagi orang banyak, bukan dari sanjungan dan pujian karena tampilan blog Anda bagus, hebat, atraktif, modern.. bla... bla... bla.
Mohon maaf jika ada yang kurang berkenan, ini hanya opini pribadi saya, Anda silahkan berbeda tentang hal-hal diatas, itu sah-sah saja.

Lha ini template yang mau dibagi mana?

Tet.. totttt karena jam istirahat kerja habis, bagi-bagi templatenya dilanjutkan nanti malam.... wakakakakaka. Untuk mengurangi rasa penasaran template mana yang mau dibagi, dibawah ini saya kasih demonya dulu :

blogger template movie


blogger template video


Screenshot dan demo template diatas bukannya saya mau pamer, tapi karena hanya menyesuaikan dengan judul dan keterbatasan waktu kali ini, saya memutuskan untuk dilanjut nanti malam. Tenang aja, link download dan tutorial cara pemasangan akan saya berikan semua gratis seperti biasanya. 

Oke saya mau lanjut nguli dulu, silahkan berdiskusi sementara tentang topik yang saya bahas diatas, berbeda pendapat boleh, tapi harus saling menghargai pendapat orang dan jangan pernah memaksakan pendapat pribadi ke orang lain.

Tutorial Pemasangan Kedua Template Diatas

Monday, 25 February 2013

Template Blogger Super Genit

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Menurut kamus besar Bahasa Indonesia istilah genit diartikan sebagai bergaya-gaya (tingkah lakunya), banyak tingkahnya. Secara umum kita mengenal genit sebagai sesuatu yang menggoda, biasanya memiliki sifat feminim dan identik dengan kaum Hawa. Tidak ada definisi yang baku untuk genit, itu hanya definisi ngawur dari saya. Sebuah template blogger juga bisa dibilang genit jika banyak memiliki gaya dan menggoda orang untuk memakainya, seperti salah satu template yang akan saya bagikan dibawah, setidaknya itu menurut saya.

Johny Prett

Template ini mempunyai tampilan post di halaman muka yang hampir sama dengan Johny Jijay, bisa dibilang template ini adalah versi light dari Johny Jijay. Bedanya hanya pada slider dan sidebar yang saya munculkan di homepage. Template ini saya buat khusus untuk blog yang mempunyai konten gallery, tapi terserah Anda mau pakai untuk apa.

template blogger


SLIDER
Seperti juga Johny Jijay template, Johny Prett juga mempunyai dua buah slider. Untuk memasang slider yang ada di Homepage, cari kode berikut di Edit HTML (jangan lupa centang expand widget templates) :
<div id='sliderTimer-wrapper'>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Box Office' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/box office?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Best Seller' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/best seller?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Watch Online' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/watch?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Horror Movie' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/horror?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Cartoon Kids' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/cartoon?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Comedy' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
</ul>
</div>

Kode warna biru adalah judul bar pada slider timer, dan warna merah adalah label atau kategori yang ditampilkan pada slider. Silahkan ganti dengan judul dan label yang Anda inginkan.

Johny Genit

Template responsif ini saya buat khusus untuk blogger cewek karena tampilannya yang terkesan feminim, tapi kalau ada blogger cowok mau pakai ini template, ya silahkan aja. Template ini hanya modifikasi dari template saya sebelumnya yaitu Johny Prett, bedanya pada Johny Genit di post page hanya terdapat 2 kolom, yaitu kolom postingan dan sidebar kanan, untuk lebih jelasnya silahkan lihat screenshot di bawah :

responsive template


SLIDER
Slider yang saya pasang pada template ini adalah Camera Slider (klik untuk melihat slider asli) buatan Manuel Masia dari www.pixedelic.com. Sebenarnya banyak pilihan warna pagination pada slider ini, karena jika dipasang semua akan memberatkan loading, saya hanya memilih warna hijau saja dan menghilangkan pilihan untuk warna yang lain. Cara pasang slider ini sangat mudah, cari kode ini di Edit HTML :
blogURL:'http://johny-genit.blogspot.com/',
Ganti URL warna kuning diatas, dengan URL blog Anda.

Author Box
Template ini saya lengkapi dengan Author Box yang terdapat di bawah setiap postingan, untuk mengganti dengan data-data Anda, silahkan cari kode ini di Edit HTML (jangan lupa centang expand widget templates) :
<div class='masadmin'>
<h3>Written by : <a href='http://www.maskolis.com/'>Your Name</a> - Describe about you </h3>
<div class='isi'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmJACpHxll8J2sgLiI-kvh_5vDT8xm8ec9-J8On0eboF2XRAmOXZu-4UyY2UalLX0mDR075uY0r0MhPQFMVtHh6Dfr2FKl7fTNcItZOdYK9sfJNlHKVCOBB-nhixsWSUhJMGiEKL2_hA/s220/maskolis.jpg'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus.
<p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/you facebook' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/your twitter' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/your G+/' rel='nofollow'>Google Plus</a></span>
<span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.maskolis.com/' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>

Keterangan :
Warna Hijau : URL photo profile blogger, silahkan menuju profile blogger Anda, dan ganti dengan URL image profile blogger Anda.
Warna Pink : Silahkan isi ID Facebook, twitter dan G+ Anda
Warna yang lain saya kira mudah untuk dimengerti, jadi silahkan isi dengan data-data Anda sendiri.

Widget Comment :
Masuk ke Layout >> add a gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0;padding:5px 0 2px!important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #eee;display: block;font:11px Arial;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 40,
characters  = 50,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://www.maskolis.com/feeds/comments/default?alt=json&amp;callback=tb_recent_comments&amp;max-results=5"></script>
Ganti URL warna biru diatas dengan URL blog Anda

Itu tadi dua template yang saya bagikan siang ini, yang perlu diperhatikan adalah, Anda harus menyimpan semua gambar postingan pada hosting blogger atau upload gambar waktu bikin postingan. Jika Anda menyimpan gambar selain di blogger, gambar thumbnail di halaman muka tidak akan muncul. Bagi yang tertarik silahkan dipakai dan jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar yang ada di bawah, selamat mencoba dan semoga bermanfaat.

Buat Panjz Online : 
Templatenya kalau udah jadi kirim ke email saya, nanti saya aja yang perbaiki, jgn lupa credit link Panjz Online dipasang

Monday, 18 February 2013

Cara Gampang Modifikasi Template Maskolis

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Di artikel ini saya bukan mau memberikan tutorial cara modifikasi template, tapi saya mau bagi-bagi template gratis. Judul diatas memiliki artikulasi yang berbeda, karena cara gampang disini bukan diartikan sebagai suatu metode yang mudah atau gampang, tapi sebuah situs punya teman saya AA Sholah yaitu caragampang.com yang memodifikasi template dari Creating Website. Buat pembaca yang sering kesini pasti sudah tidak heran dengan judul-judul artikel yang saya buat, selalu ambigu dan yang pasti menikung jauh dari topik yang dibahas... bodo amat.

Template yang dimodifikasi kali ini dasarnya dari Johny Wuss, ini kali kedua AA Sholah memberikan kontribusinya ke blog ini, setelah sebelumnya dia juga memodifikasi sebuah template dari creating website menjadi template cara gampang yang versi lama. Bagi teman-teman lain, yang ingin mengikuti jejak caragampang.com silahkan, ambil salah satu atau beberapa template dari sini, silahkan dimodifikasi sesuai daya imajinasi dan kreasi Anda. Syaratnya hanya satu template dasar harus dari Creating Website, karena jika Anda mengambil dasar template dari orang lain belum tentu si pembuat kasih ijin templatenya dimodifikasi dan dipublikasikan disini.

Tambahkan fitur-fitur baru yang menurut Anda menarik, setelah Anda merasa template hasil modifikasi itu sudah bagus, beri tahu ke saya di kotak komentar atau di forum blog ini. Jika saya bilang oke, kirimkan xml template beserta tutorial cara pemasangannya ke email saya disini ncmajid@gmail.com, jangan lupa tambahkan kredit link blog Anda di bagian footer. Saya sangat mengapresiasi semua hasil modifikasi template yang Anda buat, tapi semua harus diseleksi, jangan sampai pengguna nantinya kecewa karena gambaran template yang dilihat tidak sesuai dengan keinginannya. Dan terus terang saya sangat berharap banyak dari teman-teman blogger disini agar mau berpartisipasi seperti mas AA Sholah, karena kalau saya terus yang buat, saya yakin lama-lama juga banyak orang yang bosan dengan tampilan yang melulu itu-itu saja dari dulu tidak ada perubahan.

Ini dia template hasil modifikasi dari caragampang.com

maskolis


Pasang Slider
Pasang Wigdet Kategori

Untuk memaasang Slider Carousel tinggal cari kode
label1 = "news";
Ganti news dengan kategori atau label yg ingin ditampilkan

Nih saya bagi satu lagi template gratis, kemarin ada yang minta tampilan seperti Johny Wuss tapi yang responsif. Dasar template ini juga dari Johny Wuss, tampilannya sama, cuma bedanya  template ini mempunyai kolom postingan yang lebih lebar. Skor SEO nya juga tidak beda jauh dengan Johny Wuss, menurut http://chkme.com/ cuma beda 2%. Jika Johny Wuss 93% template ini mempunyai skor SEO 91%.

responsive template

responsive template




NB :  
  1. Buat Mas Sholah, tolong dibantu ya kalau ada pertanyaan sekitar template hasil modifikasinya
  2. Ini kode claim dari Technorati jangan di copas: 24SNNFUJA7RP

Friday, 15 February 2013

Template Seperti Ini Belum Pernah Saya Bikin

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Seperti judul diatas, model template 3 kolom dengan 2 sidebar di kanan dan kiri memang belum pernah saya buat sebelumnya. Template ini hanya memenuhi permintaan mbak-mbak dan mas-mas yang komentar kemarin, katanya sih minta dibuatkan template 3 kolom, dia bilang sudah 1 tahun permintaannya tapi belum dikabulkan juga. Lain kali jangan minta sama saya, gosok panci di rumah, kalau nanti keluar jin minta aja ke dia ya. Terus kemarin ada lagi yang minta dibuatkan template 3 kolom yang keren dan simple, nih sudah yang buatkan tapi nggak tau cocok apa enggak.

Kalau menurut saya sih template ini simple, kalau masalah keren itu relatif. Kalau teman-teman saya di rumah, banyak yang bilang saya itu pria keren, tapi jika diperhatikan lebih dekat lagi, saya ini bukan cuma keren tapi juga tampan. Sudah banyak tawaran sinetron berdatangan, mulai dari Tom and Jerry, Doraeman, bahkan produser Dragon Ball menawari saya untuk menjadi pemeran utama, Tapi semua saya tolak karena saya lebih memilih menjadi orang biasa, resiko jadi orang terkenal pasti kemana-mana nggak bisa bebas, selalu dikejar-kejar penggemar. Ini malah ngomong apa sih....??

Ini lagi ngomong soal keren, nah sekarang waktunya bagi-bagi template.

Johny Super Crott

template responsive



Johny Super Prett

template responsive



Nah itu sudah saya buatkan template yang tiga kolom, kalau cocok silahkan dipakai, kalau nggak cocok ya silahkan dipakai juga, mungkin buat bungkus kacang atau bungkus nasi goreng juga bisa, caranya di print dulu habis itu kertasnya buat bungkus kacang. 

Kok nggak ada penghargaan dari Google sebagai pembuat template blogger abal-abal terbanyak ya? Harusnya Google kasih penghargaan ke saya (dikasih permen kek), kalau gini kan pengguna blogger jadi banyak, semula yang pakai platform lain jadi pindah ke Blogger karena alternatif pilihan template semakin banyak. Boro-boro dikasih penghargan imbalannya malah dibanned akun Adsense sama Google Code... dasar nggak tau terima kasih.


Thursday, 14 February 2013

Template Responsif dan Bukan Responsif

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Disini saya berasumsi bahwa Anda semua yang baca artikel ini sudah mengetahui apa itu responsif design pada sebuah template blogger. Saya akan berikan penjelasan singkat mengenai responsif design, sebuah blog atau situs dikatakan responsif apabila support atau bisa diakses untuk semua ukuran mobile device, setiap fitur yang terdapat pada blog itu otomatis akan menyesuaikan dengan ukuran lebar device. Sekarang pertanyaanya adalah, apakah keuntungannya jika kita mempunyai blog dengan tampilan responsif? Ya jelas, seorang pengunjung yang mengakses blog kita melalui mobile phone atau gadget tidak perlu lagi susah-susah untuk scroll mobile gadgetnya ke kanan dan ke kiri hanya untuk membaca tulisan atau artikel yang kita tulis. Keuntungan lainnya tidak ada, mungkin tampilan mobilenya lebih keliatan dinamis dan rapi.

Di samping keuntungan yang kita peroleh dengan memakai design responsif, tentu ada juga kerugiannya, yaitu berupa penambahan kode-kode tertentu pada template yang Anda pakai. Jika Anda menggunakan template responsif sederhana dua kolom, mungkin penambahan kodenya tidak terlalu banyak dan pengaruh buat loading juga tidak begitu berarti. Lain halnya jika anda menggunakan template tipe magazine, dimana banyak sekali fitur yang dipasang, tentu saja penambahan kodenya juga menyesuaikan setiap fitur yang ada sehingga bisa support untuk diakses melalui semua mobile device sampai ukuran terkecil. Dengan penambahan kode tersebut merupakan beban tersendiri sehingga akan berpengaruh pada loading sebuah blog.

Jika penambahan itu hanya berupa kode-kode CSS mungkin tidak terlalu signifikan dan pengaruh bagi loading juga kecil, terkadang sebuah fitur tidak hanya cukup ditambahkan kode CSS agar support untuk semua ukuran mobile device, tetapi juga penambahan javascript dan HTML sebagai penunjang. Tentu saja hal itu akan semakin memperbesar kapasitas template dan menambah beban loading blog itu sendiri. Memang semuanya bisa diringkas, baik CSS maupun kode-kode scriptnya, tapi tidak bisa disangkal bahwa Google sendiri tidak begitu menyukai setiap kode script yang ada pada template blogger, sehingga dengan semakin banyak penggunaan script pada sebuah template akan semakin jauh pula template itu dari kriteria SEO friendly.

Tapi apakah dengan begitu jumlah pengunjung akan semakin banyak jika kita mempunyai tampilan blog yang responsif? Pertanyaan yang sering kali muncul di benak saya. Kadang saya berpikir dengan menggunakan tampilan responsif kita hanya memanjakan seorang pengunjung yang mengakses blog dengan menggunakan mobile. Seorang pengguna mobile akan dengan nyaman membaca semua artikel tanpa harus tangannya pegel. Mungkin jawabannya iya, karena merasa nyaman suatu saat dia akan berkunjung lagi ke blog kita. Tapi bisa saja jawabannya tidak, karena dengan banyaknya penambahan kode-kode pada template yang Anda pakai, justru membuat loading blog menjadi lamban sehingga banyak pengguna lama yang mengakses dari desktop lari dan tidak mau lagi berkunjung ke blog yang kita kelola.

Tapi di luar semua itu konten atau artikel sebuah blog adalah segalanya atau istilah kerennya Content is the king, Anda bisa saja memakai template paling responsif atau paling cepat loadingnya di muka bumi ini. Tapi jika artikel yang Anda tawarkan isinya itu-situ saja, tidak ada informasi baru atau unik yang bisa pembaca peroleh dari artikel yang Anda tawarkan, tetap saja blog Anda susah untuk berkembang. Seperti pernah saya tulis sebelumnya, selain membuat artikel yang unik, Anda harus mampu menciptakan branding agar blog yang Anda kelola bisa berkembang, salah satunya dengan memberikan pelayanan yang baik kepada semua pengunjung tanpa adanya diskriminasi. Ciptakan suasana yang kondusif, membuat interaksi lebih hidup, sehingga pengujung betah dan kepingin lagi untuk kembali ke blog yang Anda kelola.

Nah, sekarang waktunya saya akan bagikan dua template gratis, satu responsif dan satu lagi bukan responsif. Silahkan Anda temukan sendiri dimana letak perbedaannya. Tampilannya sama, hanya ada penambahan slider pada template yang bukan responsif.

Template Responsif

maskolis template

maskolis template



Template Non Responsif

maskolis template



Yang perlu saya tekankan disini adalah, saya membuat template bukan karena lagi ngejar setoran, tapi hanya sebatas untuk mengisi postingan di blog ini. Silahkan dipakai bagi yang berminat, kesimpulan saya dari artikel di atas hanya satu, tampilan responsif pada template yang Anda pakai tidak mutlak menjamin blog Anda semakin ramai dikunjungi orang. Bagi Anda yang mempunyai blog dengan tampilan biasa bukan responsif, jangan terlalu berkecil hati, saya yakin suatu saat dengan semakin berkembangnya teknologi gadget, di masa yang akan datang semua moble device mampu mengakses blog meskipun tidak menggunakan responsif design.

Penting untuk diperhatikan :
Bagi pengguna template responsif, jika ingin tampil maksimal perhatikan point-pont berikut ini :
  1. Upload sendiri gambar waktu buat postingan, jangan disimpan di host selain blogger apalagi copy URL gambar dari blog lain.
  2. Hapus kode merah di gambar pada posisi HTML (bukan compose), contohnya seperti ini :
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUu5DPfn78OgKBLrrlQ2BnfwQ7kZcVlwrZDEetYwmU4xLMwx9WfvJtHylTRhwwLcCQX468JMESH_SaYTO5F1aigCGVrlAAJyXVzn1dkK3WMUlqcLU4rKLdWlkWaAi774YFwBZBDQDTSaw/s1600/Johny+Darkmag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUu5DPfn78OgKBLrrlQ2BnfwQ7kZcVlwrZDEetYwmU4xLMwx9WfvJtHylTRhwwLcCQX468JMESH_SaYTO5F1aigCGVrlAAJyXVzn1dkK3WMUlqcLU4rKLdWlkWaAi774YFwBZBDQDTSaw/s1600/Johny+Darkmag.jpg" /></a>
Silahkan panggil saya apa aja Pak, mas, om, cuk, nyet, dan lain-lain asal jangan dipanggil MASTER atau Mastah (kemampuan nggak seberapa dipanggil master). Risih saya, beneran. Hanya Tuhan Yang Maha Esa yang layak dipanggil MASTER

Saturday, 9 February 2013

Template Ini Responsif Bukan ya?

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Mumpung pulang agak siang kali ini saya mau bagi satu lagi template sederhana dua kolom, tapi sebelum menuju ke inti artikel, saya mau cerita dulu sebuah kisah yang sangat menggelikan. Begini ceritanya, setelah kemarin saya dibuat kaget dengan ranking Alexa template Johny Wuss, kali ini lebih menggelikan lagi, yah antara geli dan nggak percaya. Gimana nggak geli coba, barusan saya baca artikel di blog Mas Adhy pemilik Kompi Ajaib tentang hadiah pagerank 4 dari Google, terus iseng-iseng saya cek juga blog saya satu persatu, tidak ketinggalan saya cek template kesayangan saya Johny Wuss, dan seperti tak percaya dengan apa yang saya lihat, saya langsung tertawa ngakak sambil ngangkang sampai tetangga marah-marah sampai  mau nimpuk pakai sendal. Berita ini lebih heboh dari berita petinggi PKS yang ketangkap basah lagi indehoi sama ABG, coba Anda perhatikan baik-baik gambar dibawah ini :

johny wuss pagerank
Jujur sejak awal ngeblog sampai sekarang saya tidak begitu peduli dengan statistik blog, entah itu pagerank ataupun rangking Alexa. Mau nggak mau kali ini saya mesti mikir dan bertanya-tanya apa sebenarnya pertimbangan Google dalam memberikan hadiah pagerank sebuah blog. Seperti teman-teman disini semua ketahui. Johny Wuss hanyalah sebuah blog demo untuk template yang saya bagikan gratis ke pengguna blogger disini. Umur blog baru 3 minggu, artikelnya jumlahnya hanya 12 biji kalau nggak salah, dan itu semua copy paste dari lorem ipsum, terus prestasi apalagi yang dibuat si Johny Wuss sehingga dia layak dihadiahi pagerank yang begitu tinggi?

Sudah banyak saya baca artikel yang membahas tentang pagerank, tapi tak satupun mampu memberikan jawaban yang akurat untuk kasus blog saya yang satu ini. Seperti seorang taruna yang baru masuk akademi kemiliteran langsung mendapat pangkat bintang 4. Memang pagerank sifatnya fluktuatif, bisa naik dan suatu saat juga bisa turun, tapi ini sungguh fantastis baru nongol langsung diberikan jabatan yang strategis sama Google.

Sudah banyak template yang saya buat, tapi satu template ini yang paling saya sayangi. Meskipun ini hanyalah sebuah template sederhana, tak ayal Google pun sampai bertekuk lutut memberikan hadiah yang indah. Template ini yang membuat saya sampai sekarang tidak habis pikir, kemarin baru satu minggu rangking Alexanya udah 500 ribuan sekarang umurnya 3 minggu dikasih hadiah pagerank 4 dari Google... alamak

johny wusss


Tapi bukan template diatas yang mau saya bagikan kali ini, yang mau saya bagikan ini template yang ada dibawah, gambarnya sih responsif tapi nggak tau ini template responsif apa bukan. Soalnya baru kali ini saya mencoba membuat template blogger responsif. Ternyata memang susah juga, pantas saja banyak designer template handal yang menjual template-template blogger responsif.

johny see book



johny see book

Template sederhana dua kolom, iya karena saya belum bisa membuat yang lebih bagus lagi karena memang kemampuan saya baru segitu. Tidak ada fitur khusus yang saya pasang, slider juga nggak ada. Tadi saya coba pasang slider, tapi nggak jadi responsif ya saya copot lagi. Dasar template ini dari Johny Wuss, cuma kok skore SEO nya kecil, saya ngak tahu kenapa. 

Silahkan dipakai bagi yang suka dan berminat, dimodifikasi warnanya atau ditambahkan fitur baru biar lebih menarik. Nanti kalau ada diantara teman-teman disini blognya tambah ramai pengunjung gara-gara pakai template responsif, kasih tau saya ya? Saya juga akan rubah template creating website ini biar responsif juga. Oke, itu dulu artikel kali ini, silahkan dicoba dan selamat berakhir pekan bersama keluarga.

NB :
Keliatannya lucu juga, kalau saya bagikan template responsif tapi blog yang saya pakai ini belum responsif ya.

Thursday, 7 February 2013

Johny Jijay, Simple Template Blogger Gallery Movie

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sebenarnya template ini bukan murni buatan saya, saya hanya membuat dasarnya saja, yaitu pada Johny Prett template. Kemudian saya serahkan ke teman saya untuk memodifikasi agar lebih menarik, sebenarnya template ini saya suruh dibuat responsif sekalian, tapi karena seperti juga saya dia belum paham betul struktur layout template responsif, yah jadinya seperti screenshot di bawah ini. Pada template-template gallery untuk movie sebelumnya, saya banyak sekali melihat penggunaan template dengan judul yang panjang sehingga dengan panjang post di homepage yang terlalu kecil, membuat judulnya meluber ke bawah.

johny jijay


Untuk mengantisipasi hal itu, saya menyembunyikan judul post di homepage di belakang gambar, Anda hanya akan melihat judul dan snippet atau summary pendek bawaan dari popular post, jika cursor diarahkan ke gambar. Pada template ini terdapat 2 slider, yaitu lofslidernews modifikasi di halaman utama dan simpel slider untuk recent post pada halaman postingan.

Template untuk gallery movie kali ini lebih sederhana karena sudah terlau banyak javascript yang saya pasang, jika ada penambahan fitur di halaman utama hanya akan memperberat loading. Di homepage Anda hanya akan melihat tampilan slider dan gallery tanpa sidebar, sidebar hanya tampil di halaman postingan saja. Slider yang saya pasang pada template ini, sama persis dengan yang ada pada template Bukan Johny. Saya akan ulangi lagi disini cara memasang slider pada template ini :


Untuk mengaktifkan slider yang ada di homepage pada template ini, masukkan kode berikut pada kolom kosong paanjang di bawah header. Masuk ke Layout/Tata Letak >> Add a Gadget pilih 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?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=showrecentposts0\"><\/script>");
</script>
</ul>
</div>
</div>
Jika Anda memsukkan kode script diatas maka slider akan bekerja berdasarkan artikel terbaru, jika Anda ingin menampilkan label atau kategori tertentu baca postingan saya tentang Modifikasi Slider Lofslidernews Maknyus.

Untuk slider yang ada di halaman postingan menampilkan artikel terbaru Anda, tutorial slider ini sudah saya bahas sebelumnya pada artikel simple slider untuk image vertikal. Mungkin hanya itu yang harus diperhatikan jika Anda ingin menggunakan template ini. Bagi yang tertarik silahkan dicoba dan jika masih kurang jelas silahkan tinggalkan pesan di kolom komentar di bawah. Selamat malama dan selamat beristirahat.

Javascript yang harus Anda dimpan sendiri di Google Code :
<script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
<script src='http://yourjavascript.com/218437119/halamanav.js' type='text/javascript'/>

Friday, 1 February 2013

Inilah Template Blogger Super Jelek Sekali

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sebelum besok libur karena ada keperluan penting selama dua hari, kali ini saya bagi lagi dua template yang super jelek dari Johny. Saya sampai sekarang masih mikir kok ya bisa-bisanya pakai nama Johny di setiap template yang saya buat. Padahal tidak ada satupun keluarga atau kerabat dekat yang punya nama Johny, mungkin dulu saya pengin punya nama Johny, tapi nggak kesampaian. Okeehhh... karena dari tadi sudah ada panggilan melulu dari HP, langsung saja nikmati kedua template super jelek kali ini, yang satu pake slider yang lain saya buat biasa dengan dua kolom seperti yang banyak diminta sama teman-teman blogger di kolom komentar.

template maskolis


Slider 
Masukkan kode berikut pada kolom kosong di bawah header. Masuk ke Layout/Tata Letak >> Add a Gadget pilih 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?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>
Kode diatas bekerja berdasarkan artikel terbaru, jika Anda ingin menampilkan label atau kategori tertentu baca postingan saya tentang Modifikasi Slider Lofslidernews Maknyus.

Widget Komentar 
Masukkan kode di bawah ini pada widget sidebar :
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://www.maskolis.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
Ganti URL warna merah http://www.maskolis.com dengan URL blog Anda.

Widget random post
<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>
Angka 7 pada kode diatas adalah jumlah random post yang ditampilkan, silahkan ganti sesuai keinginan.

Search Box
Search box atau kotak pencarian yang saya gunakan pada template ini saya ambil dri Google CSE, silahkan And langsung ketik Google CSE di halaman Google kemudian membuat kotak search. Gampang caranya, tinggal ikuti petunjuk yang ada. Atau Anda bisa ganti dengan kotak search dari tutorial yang banyak beredar di internet.

template maskolis


Template ini sama dengan Bukan Johny, bedanya template ini tidak ada slidernya, lebih sederhana dan gampang sekali cara pemakaiannya. Nama template ini.... bingung mau dikasih nama apa, ahh lagian juga ngapain dikasih nama yang penting isinya bung. Demonya pakai blog seadanya, yang penting templatenya jalan.

Kedua template ini dasarnya dari Johny Wuss, jadi semua tag H1 dan H2 sudah terpasang, tapi belum saya validasi HTML nya. Jangan terlalu fokus mengatasi masalah error validasi HTML, sangat wajar jika sebuah blog mempunyai error pada struktur HTMLnya. Santai saja, yang penting berbagi, membuat artikel yang bermanfaat bagi pembaca, bukankah setelah kita mati hanya tiga hal yang bisa terus memberikan manfaat salah satunya yaitu ilmu dan informasi yang kita berikan kepada orang lain? Hahaha... malah seperti pak Ustadz, ya itu tadi dua template yang saya bagikan gratis kepada teman-teman semua disini.

Dan satu lagi template ini bukan template responsif, karena saya tidak punya HP canggih untuk mengakses Internet dan belum pernah sekalipun browsing lewat HP. Untuk saat ini mungkin saya masih belum butuh responsif, suatu saat nanti jika HP saya sudah pakai merek terkenal seperti beri-beri mungkin baru mendalami responsif template. Oke.. jika tertarik silahkan dipakai, jika ada yang kurang jelas kebangeten banget, ini template sangat sederhana dan semua fitur yang saya pasang sudah saya berikan dalam bentuk tutorial sebelumnya. Tapi kalau mau tanya ya silahkan saja isi kotak komentar di bawah, sekian dulu dan selamat malam mau istirahat dulu, besok mesti berangkat pagi-pagi.

PENGUMUMAN PENTING
Silahkan baca sendiri disini

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes
Kembali