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.

Demo | Download

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 :

Demo | Download

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/AVvXsEjY0UINZKauTwXgVGKYJTiOCVGs2wnOfdOVjEEKZuIpUWP847Vw10I-fAVtqRxK4SBChTmemIjn349zbqmeluNriiAjqFdPlJf8o-9t8FLmJM19JJ-Nnv35xF4dCwz3jC9yHK_yGGFu5UY/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

Diposting oleh NEik.DI Senin, Februari 25, 2013 0 komentar

Google+ Jadi Perhatian Tersendiri di 2013, Benarkah ?

Written by : Guest Post (Muflich Kamil)

Di tahun 2013, kabarnya Google+ akan mendominasi seluruh situs social media di dunia. Google+ dilaunching untuk pertama kalinya tahun 2011 lalu, yakni sebelum panda dan penguin keluar dari kandangnya. Saat itu Google+ hanya sebatas social media yang tak begitu populer. Dibandingkan Facebook, Twitter, Google+ masih kalah jauh.

Picture by : http://www.moyeamedia.com

Nah, seiring perkembangan zaman, pada 21 September 2012, Google melalui Webmaster mengatakan mengenai pengeluaran Google Authorship. Sebenarnya sih tidak terlalu baru, mengingat sebelum itu sudah ada beberapa situs yang memilikinya. Namun inilah titik klimaks dimana Google+ mulai menjadi prioritas utama blogger.

Tampilan berbeda yang lebih eye-catching di SERP Google membuat blogger berlomba-lomba mendapatkan pengakuan Google Authorship. Tak hanya itu. Pada bulan berikutnya Google+ memperkenalkan fasilitas chat serta hangout video untuk berkomunikasi jarak jauh antar pengguna Google+.

Sementara itu, Google+ terus saja menembakkan fitur-fitur lainnya yang membuat para pengguna Google+ betah dengan situs yang satu ini.Hal ini jugalah yang membuat Google+ dalam beberapa tahun terakhir menjadi dominan diantara situs sosial media lainnya.

Lalu, apa alasan saya mengatakan Google+ menjadi perhatian tersendiri di 2013 ?

Di tahun 2012 kita semua tahu Google secara major mengeluarkan Update Algoritma Panda dan Pinguin. Algoritma-algoritma baru tersebut menebas semua situs sampah yang tidak berkualitas, serta yang menggunakan teknik nakal. Nah, di 2013, seorang petinggi Google+ yang dijuluki big G pada waktu lalu menyatakan,

If you want to play ball, try join our team

Intinya, jika anda seorang internet marketer, pebisnis online, atau sejenisnya.. Dan saat ini butuh sesuatu untuk promosi situs atau produk anda dalam menghadapi persaingan yang sebenarnya, berhubung wasit panda penguin sudah memberi kartu merah pada tim yang curang, Google+ lah solusinya.

Setiap perusahaan pasti menginginkan produknya laku, dan laba yang didapat juga besar. Bersama Google+, sebuah perusahaan bisa merambah semua para pelanggannya baik itu melalui post, chat, maupun hangout video. Ditambah lagi tampilan Google+ yang user-friendly.

Meski situs seperti Facebook juga menyediakan fitur-fitur seperti yang saya sebutkan diatas, Google+ tetap unggul pada posisinya mengingat pada 2013 Google akan member nilai tersendiri pada situs yang memiliki pangkat di Google Authorship.

Saya sendiri sampai saat ini masih menggunakan Google+ hanya sebagai sarana posting artikel blog. Tidak lebih. Fasilitas yang ada seperti chat, video hangout pun belum saya maksimalkan penggunaannya.

Bagaimana dengan Anda sendiri ? Apakah sudah mulai memaksimalkan penggunaan Google+ ?

Tentang penulis :
Muflich Kamil -bukan siapa-siapa. Bukan master, apalagi profesional. Sekedar part-time blogger pemilik blog kejarduit.com.

Diposting oleh NEik.DI Sabtu, Februari 23, 2013 0 komentar

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

Demo | Download

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%.

Demo | Download

Cek Responsive

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

CARA MEMBUAT BLOG YANG MENARIK

Diposting oleh NEik.DI Senin, Februari 18, 2013 0 komentar

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

Demo | Download

Cek Responsive

Johny Super Prett

Demo | Download

Cek 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.

KENAPA SAYA GAGAL BLOGGING?

Untuk hasil yang optimal silahkan baca di artikel ini.

Diposting oleh NEik.DI Jumat, Februari 15, 2013 0 komentar

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

Demo | Download

Cek Responsive

Template Non Responsif

Demo | Download

Pasang Slider

Ganti Feddburner

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/AVvXsEgqEnW_qOOoCEdRe30fZDYGbN6z8IiqQepfBjsrDLAwGh1ETmyLTRjuJM6B2f60HSn-PcKFcmZguUUKjv29KIyDkISwRGlKbIaKsFzl08oiHE4qRbZWfkuRyyIKLNoRl_CaNr75Cmqi1Ls/s1600/Johny+Darkmag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEnW_qOOoCEdRe30fZDYGbN6z8IiqQepfBjsrDLAwGh1ETmyLTRjuJM6B2f60HSn-PcKFcmZguUUKjv29KIyDkISwRGlKbIaKsFzl08oiHE4qRbZWfkuRyyIKLNoRl_CaNr75Cmqi1Ls/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

Diposting oleh NEik.DI Kamis, Februari 14, 2013 0 komentar

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 :

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

Demo | Download

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.

Demo | Download

Cek Responsive

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.

Diposting oleh NEik.DI Sabtu, Februari 09, 2013 0 komentar

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.

Demo | Download

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'/>

Diposting oleh NEik.DI Kamis, Februari 07, 2013 0 komentar

Membuat Simple Slider Otomatis Gambar Vertikal

Kali ini saya akan memberikan satu lagi tutorial membuat slider otomatis untuk image atau gambar vertikal. Sebelumnya saya minta maaf belum bisa menjawab semua pertanyaan yang masuk karena banyak sekali kegiatan di luar yang harus saya kerjakan. Dan tentu saja saya juga belum bisa memenuhi permintaan teman-teman yang menginginkan sebuah template khusus atau modifikasi template yang sudah ada menjadi sebuah template yang SEO friendly dan valid HTML.

DEMO

Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :

1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
   /* Slider */
   .sompret-wrapper {float:right; position: relative;}
   .sompret { overflow: hidden; position: relative; width:300px; height:400px;}
   .image_reel { position: absolute; top: 0; left: 0; }
   .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
   .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
   .paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIgvxXjJ0oEZ2aza39amHFygiGZMHatOQ6e2w5YYGQV-3aQdTYwxYSLF2pcQ1uzJxz7vjruVIsqGNrSvIg_6g-9dkBDpohO8UVZh72eMuWj0BmAAs0nv2n5Ay1p5BOT6EyXkcY_8XGz9I/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
   .paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDzVLRakUIw-MjCBkyoWXaqHxP07kxo8poVjkWGYXZdZU2Ri9SdiIf8_sAok4672a75FI3VIeRSCPB9R_77xvV1-gAWYs2xuPNCc626cqDNM2MJotKB7VDNeASl5oti-XnTAtsHcaOIk/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
   .paging a:hover {font-weight: bold; border:none; outline:none;}
   .crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWd5i_D1eG9Au9bYvswla2aQE6Q_4TaxYDxexYNOgdAjAViqDyUb9kFs0soKCzXhr5QJYwCE6ly1cIVOR9V9H1owZNHmeEKnqd5didxprEfgi_nGlO8sHPiLlxpyLWbmOldTg8BbqT8O9/s1600/uj-opacity-40.png);padding:5px 10px;  }
   .crott a{color: #fff;font: 16px Oswald }
   .crott p{color: #fff;font: 12px Arial;}
   Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
   <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   jQuery(document).ready(function() {
   
   //Set Default State of each portfolio piece
   $(".paging").show();
   $(".paging a:first").addClass("active");
   
   //Get size of images, how many there are, then determin the size of the image reel.
   var imageWidth = $(".sompret").width();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;
   
   //Adjust the image reel to its new size
   $(".image_reel").css({'width' : imageReelWidth});
   
   //Paging + Slider Function
   rotate = function(){
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
   
      $(".paging a").removeClass('active'); //Remove all active class
      $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    
   $(".crott").stop(true,true).slideUp('slow');
   
   $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
   
      //Slider Animation
      $(".image_reel").animate({
          left: -image_reelPosition
      }, 500 );
   
   
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){
   $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
          $active = $('.paging a.active').next();
          if ( $active.length === 0) { //If paging reaches the end...
              $active = $('.paging a:first'); //go back to first
          }
          rotate(); //Trigger the paging and slider function
      }, 10000); //Timer speed in milliseconds (3 seconds)
   
   };
   
   rotateSwitch(); //Run function on launch
   
    //On Click
       $(".paging a").click(function() {  
           $active = $(this); //Activate the clicked paging
           //Reset Timer
           clearInterval(play); //Stop the rotation
           rotate(); //Trigger rotation immediately
           rotateSwitch(); // Resume rotation
           return false; //Prevent browser jump to link anchor
       });  
   
   });
   
   //]]>
   </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;
   summaryPost1 = 80;
   summaryTitle = 20;
   numposts1 = 6;
   
   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 showrecentposts1(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img  = new Array();
      
     for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
   
   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 = m+ ' ' + day + ' ' + y ;
   
   var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
   document.write(trtd);    
   
    j++;
   }
   
   }
   
   function showrecentposts2(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img  = new Array();
    
     for (var i = 0; i < numposts1 ; 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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
   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, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider
6. Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='sompret-wrapper'>
   <div class='sompret'>
   <div class='image_reel'>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='description'>
   <script>    
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   </div>
   </div>
   <div class='paging'>
   <a href='#' rel='1'/>
   <a href='#' rel='2'/>
   <a href='#' rel='3'/>
   <a href='#' rel='4'/>
   <a href='#' rel='5'/>
   <a href='#' rel='6'/>
   </div>
   </div></b:if>
   Keterangan :
   
   
   Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
   
7. Terakhir save, selesai.

Slider diatas bisa Anda modifikasi sendiri, Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon misalnya seperti terlihat pada demo ini, sehingga tampilannya menjadi lebih menarik. Itu tadi tutorial membuat slider sederhana kali ini, jika ada yang kurang jelas silahkan tinggalkan peasan pada kolom komentar di bawah.

Dan untuk teman-teman yang sudah berpartisipasi dan meramaikan forum diskusi pada blog ini saya mengucapkan banyak terima kasih, silahkan berdiskusi dengan bebas dan sehat. Untuk sementara saya belum bisa ikutan nimbrung karena masih banyak pekerjaan yang mesti saya selesaikan. Semua pertanyaan di luar topik artikel ini silahkan masukkan pada forum diskusi, klik menu forum diskusi yang ada pada menu navigasi atas blog ini.

NB :
Jika Anda melihat gambar pada slider kadang terlihat kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo.

Diposting oleh NEik.DI Selasa, Februari 05, 2013 0 komentar

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.

Demo | Download

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.

Demo | Download

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

Diposting oleh NEik.DI Jumat, Februari 01, 2013 0 komentar