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/AVvXsEjHetrgfEvTUO7ErgfRm0LSyJnTdnf-mW0k78-YfePHANSN0KUGgVlTaaDp0XrCuJaz587wIbFI_6JnWuZtuVWfv9N-7c_w-kcSzpQqUpAc9EfXj22CJWcBTNSATY2twn9skaPR3REiaRY/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

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.

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

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.

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

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

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/AVvXsEgZe_CknTY__SARY0qYBR8CIzNsZ6TtMkfnI61AK-xscntXusUBgEhyphenhyphensYvR4fRnCi1vFwoxm2yFC6qnc_Ok8TaAYDdPTQdBP6nvc3VxgJ8yV9Dqauuga8-7oLJyPktOR0d6tqTMSOP8H64/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/AVvXsEhhfUeMYRmxdjInc-bXLJIKTxwKxQtFE_GMEcd05CU4hsY3s3DvtullJgZ4VdC7yW4ngEs3gP9ag_vPQ9hkIc3MdPSrUpb4yhq6LoqQCH9vDJn7gZ9EjrxO_NYw3scxQhGFeN0ezEUlQjw/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/AVvXsEjgaS6i5bLtHHJnoPzGarhY0LSnCOosoPVp4S0h6fnyvgmgruPy7ufDjOQQNOohZOotO_UUtXgep5D7w6H55jTYNeP-h8nnAlX-n5yiaOEWmwckHTPbXyyqjDHEkpglORy7kIST0X6EhHqz/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/AVvXsEifTO0ca3GIul8-HlbYse6o1L00oRUb9KvDH6FVm3B1S3VQvjFnF7XdWlObZmX-xVUhWgAMlX92ZoaO5oLrCmLsPaV55LCRHMFPytn0mhJVw_LaZGFK4-mcNIN6bA2vsENqbBmxWg0HOAU/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.

Free Download Startup Delayer 3.0 Build 327 Latest Version

Startup Delayer helps users avoid a slow system start by giving them control over programs that automatically load when Windows boots up.

Startup Delayer is an application that gives you permission to configure the time delays for each program that automatically runs at system startup.

This program provides a simple interface to work with. The screen is dominated by the list of programs your computer opens when starting Windows. Above this list is a short row of icons that allow you to add and remove programs and organize the time they are opened.

 

 

 

Adding a program is as simple as locating it in the file tree and then assigning it a specific time to open after Windows has begun. From there it is listed, along with the others, on the main screen. One interesting addition is spacing all program load times out evenly. This takes a lot of work from the user by simply timing every program to automatically open at staggered intervals.

Startup Delayer has isolated a problem that many computer users suffer from and provides an efficient, simple way to solve it. It's suitable for any user who wants more control over start-up programs.

When Windows loads it's Startup file, it attempts to load every program in there at the same time. Therefore if you have quite a lot of programs starting when Windows starts, each program will try and grab CPU time so that it can load.

If each program tries to do this at the same time, you soon notice the slow down that occurs, due to your CPU trying to help all the programs to load, and your hard disk accessing multiple files.

Startup Delayer will allow you to setup how many seconds after Windows has started, to load each application.

For Example, if you have your mail program and a special clock starting up, then you can make your mail start say 10 seconds after Windows has loaded, and then the special clock start 20 seconds after Windows Starts.  



Here are some key features of "Startup Delayer":
 

• Delay applications at startup at a specific time

• Configure Run type (normal, minimized, maximized)

• Pause the startup till an application has terminated

• Drag and Drop organization

• Automatically launches applications based on computer idleness

• Delay local user applications without administrator rights

• Modify any local user from the one user account

• Windows 7, UAC, 64bit and Digital Signature Aware

• Multi-select and manipulate applications

• Associate User Notes with any startup application

• View Performance Graph of last startup

• Quick Filter and built in filters to easily locate Applications

• Easily search the internet for more information on an application

• Advanced Wait options allowing for User confirmation, Application termination or Application initialization

• Ignore Launching an application if its already running

• Undelete previously deleted applications

• View and manipulate Running Tasks

• View and manipulate Services

• Configure an application to run with highest privileges

• Automatically remove duplicate entries added by applications

• Modify the Priority of an application at launch

• View the running status of a startup application

                Download Startup Delayer 3.0 Latest Version

 

Enjoy!!

Free Download Flash Builder and Flash Catalyst - The New Workflow Ebook

The Flash Platform is changing. Flash Builder and Flash Catalyst have brought a new separation of design and coding to web development that enables a much more efficient and streamlined workflow. For designers and developers used to the close confines of Flash, this is a hugely liberating, but at first alien concept. This book teaches the new workflow for the Flash platform. It gives an overview of the technologies involved and provides you with real-world project examples and best-practice guidelines to get from design to implementation with the tools at hand.

• Includes many examples
• Focuses on real-world situations
• Covers designer and developer workflow

 

What you’ll learn

 

• Use the new workflow from design to implementation.
• Learn best practices for Flex development.
• Determine the right tools for the job.
• Gain basic knowledge of Flash Catalyst.
• Gain basic knowledge of Flash Builder 4. 

Who this book is for

This book is intended for people that want to understand how design and development are brought closer together with Flash Catalyst and Flash Builder 4. Although it can be quite helpful to already have some basic knowledge of Flex, the book will provide you with an overview of the main features and lots of coding examples that are explained in detail.

 

Table of Contents

 

1. Flex and AIR: Taking RIAs to the Next Level 
2. Flex 4 SDK: Overview of the New Features 
3. Flash Builder 4: The programming environment
4. Flash Catalyst: bridging the gap 
5. Choosing the Best Workflow 
6. Case Study: An E-Commerce Site
7. Managing RIA Projects
8. Frameworks 
9. Best Practices 

 

 

 

                                   Click Here To Download 

 

Enjoy!!