tag:blogger.com,1999:blog-54551008262816853202024-03-21T19:10:05.630-07:00Dunia Berbagi Info TerbaruBerita terbaru dan info terbaru.Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.comBlogger1241125tag:blogger.com,1999:blog-5455100826281685320.post-52636288272561762962014-05-03T23:52:00.001-07:002014-05-03T23:52:43.436-07:00DESAIN PAGAR RUMAH MINIMALIS TERBARU 2014<a href="http://www.rumahantiq.com/" rel="nofollow">Rumah Antiq</a> - merupakan sebuah situs yang memberikan informasi mengenai dunia properti rumah terbaru yang kini telah menjadi trending topik di bab properti dan era perumahan terkini. Kali ini akan membahas mengenai desain pagar rumah minimalis. Pagar rumah minimalis ini merupakan sebuah keinginan para arsitek rumah untuk menciptkan sebuah bentuk rumah di sertai dengan pagar yang cukup minimalis saja. Karena rumah dengan disertai pagar itu bisa membuat kesan rumah agar terhindar dari perbuatan kejahatan yang kemungkinan terjadi.<br /><br />
<br /><br />
Kebanyak pagar rumah yang kita ketahui adalah hanya itu-itu saja bentuknya dan terkesan tidak bisa rapi dan membuat penampilan rumah bagus, melainkan sebaliknya malahan rumah menjadi jelek dan tidak bisa rapi. Karena itu, era perumahan sekarang yang sedang laris adalah rumah dengan desain pagar rumah minimalis. Karena rumah minimalis ini nanti memanfaatkan ruang tanah rumah yang minim namun di buat dengan desain yang tidak mengecewakan dan menghasilkan rumah yang bagus dan modern walaupun minimalis.<br /><br />
<br /><br />
Pagar rumah minimalis ini nanti akan membuat tampilan rumah minimalis anda akan terlihat nyaman tidak terlalu khawatir dengan keamanan rumah minimalis anda. Dengan adanya pagar minimalis terbaru ini akan membuat lengkap kebutuhan rumah anda. Model pagar minimalis ini sangat beraneka ragam, tidak hanya satu. Contoh pagar minimalis itu ada banyak, diantaranya dengan model pagar menggunakan bambu, pagar menggunakan kayu dengan model clasik dan masih banyak lainnya.<br /><br />
<br /><br />
Nah mau tahu tips <b><a href="http://www.rumahantiq.com/2014/05/desain-pagar-rumah-minimalis-terbaru.html" rel="nofollow">desain pagar rumah minimalis</a></b> bisa di simak di sini : <a href="http://www.rumahantiq.com/2014/05/desain-pagar-rumah-minimalis-terbaru.htm">http://www.rumahantiq.com/2014/05/desain-pagar-rumah-minimalis-terbaru.htm</a>l<br /><br />
<br />Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-65771163090671811232013-02-15T04:36:00.000-08:002013-02-17T16:36:35.169-08:00Template Seperti Ini Belum Pernah Saya Bikin<div style="text-align: justify;"><span class="awal">S</span>eperti 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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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....??</div><br />Ini lagi ngomong soal keren, nah sekarang waktunya bagi-bagi template.<br /><br /><b>Johny Super Crott</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAIGIh861TKADSLNk_6T3DGCdVWhcMsq-T8gCHgHO1vznsB-41MnII3skJWheVrURW367i69mlkIpL8Z59AArgtc_RskBJpuInXT4ewJndgqAh6NuLtj2lCq3NzhiTR2pyoPl25TNY00/s1600/super+crott.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAIGIh861TKADSLNk_6T3DGCdVWhcMsq-T8gCHgHO1vznsB-41MnII3skJWheVrURW367i69mlkIpL8Z59AArgtc_RskBJpuInXT4ewJndgqAh6NuLtj2lCq3NzhiTR2pyoPl25TNY00/s1600/super+crott.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://jonhy-supercrott.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-super-prett.html" target="_blank">Download</a></span></b></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://responsivetest.net/#u=p%7C240%7C320%7Chttp://johny-superprett.blogspot.com/" target="_blank">Cek Responsive</a></span></b></div><br /><b>Johny Super Prett </b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeJwS3iTnIb5atblRmNzg9cdmEb76hyphenhyphen3I3FcIdSwgG5kYY1hH6Yk2kXtLsrhRslQ-SLfqw4ohEMuhPW5vFryvj5IRyawERv2KlwFBw-WR87RnAfXTSgeBXPH-VRsE7aazD1K5ZTjfZQ8/s1600/super+prett.jpg"><img alt="template responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeJwS3iTnIb5atblRmNzg9cdmEb76hyphenhyphen3I3FcIdSwgG5kYY1hH6Yk2kXtLsrhRslQ-SLfqw4ohEMuhPW5vFryvj5IRyawERv2KlwFBw-WR87RnAfXTSgeBXPH-VRsE7aazD1K5ZTjfZQ8/s1600/super+prett.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-superprett.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-super-prett.html" target="_blank">Download</a></span></b></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://responsivetest.net/#u=p%7C240%7C320%7Chttp://johny-superprett.blogspot.com/" target="_blank">Cek Responsive</a></span></b></div><br /><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.<br /><br /><div style="text-align: center;"><a href="http://www.maskolis.com/2011/03/kenapa-saya-gagal-blogging.html" target="_blank"><b>KENAPA SAYA GAGAL BLOGGING? </b></a></div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b><a href="http://www.maskolis.com/2013/02/template-responsif-dan-bukan-responsif.html" target="_blank">Untuk hasil yang optimal silahkan baca di artikel ini.</a></b></div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-89132068585575387472013-02-13T10:38:00.000-08:002013-02-17T16:36:35.181-08:00Template Responsif dan Bukan Responsif<div style="text-align: justify;"><span class="awal">D</span>isini 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.</div><br /><div style="text-align: justify;">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. </div><br /><div style="text-align: justify;">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.</div><br /><div style="text-align: justify;">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.</div><br /><div style="text-align: justify;">Tapi di luar semua itu konten atau artikel sebuah blog adalah segalanya atau istilah kerennya <b>Content is the king</b>, 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. <a href="http://www.maskolis.com/2013/01/artikel-ini-enaknya-dikasih-judul-apa.html" target="_blank">Seperti pernah saya tulis sebelumnya</a>, 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.</div><br /><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Template Responsif</b></div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhi8g6Le1VoE_nNUZkv_F9OfrfsEndImp0gbh7K3BSj3GGJm40UPnf4mHCrMAJZHGyOlX6AJMi52Xv7ggNg5xPGm-3wR8UcxuPYrVT0csOXrYSlO6IWFZdQHY9VXmFDyTxIB9t0zmLqFM/s1600/demosite+mobile.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhi8g6Le1VoE_nNUZkv_F9OfrfsEndImp0gbh7K3BSj3GGJm40UPnf4mHCrMAJZHGyOlX6AJMi52Xv7ggNg5xPGm-3wR8UcxuPYrVT0csOXrYSlO6IWFZdQHY9VXmFDyTxIB9t0zmLqFM/s1600/demosite+mobile.jpg" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5WkOxkl9G-38gJ-4ysA1p1yNoyaH7f82LzYCWPjJVv37E4LHk4XR0oMU-622WU-mf1gqlNDAAHXcPuSSYL1i_5AahdXJpvioN3rHYqZ8uc5mBc5Aau3DkhXL4y82Y4PSEvFwaqdWI24/s1600/Johny+Demosite.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5WkOxkl9G-38gJ-4ysA1p1yNoyaH7f82LzYCWPjJVv37E4LHk4XR0oMU-622WU-mf1gqlNDAAHXcPuSSYL1i_5AahdXJpvioN3rHYqZ8uc5mBc5Aau3DkhXL4y82Y4PSEvFwaqdWI24/s1600/Johny+Demosite.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnydemosite.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-demosite.html" target="_blank">Download</a></span></b></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://responsivetest.net/#u=p%7C320%7C480%7Chttp://johnydemosite.blogspot.com/" target="_blank">Cek Responsive</a></span></b></div><br /><div style="text-align: justify;"><b>Template Non Responsif</b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4BaVupcR8R1B4z09FxrNnCLfmEjb46EXvlqixzvwuCdVjJm78eYkJU17AIoy6i1jNK3w5Qb4UKTNY2FpBnXgWisc2rqXTnMQSy0BWrbuWOl8GObzug2n9gScBAt7-rk98OMy5UUgQnM/s1600/Johny+Darkmag.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4BaVupcR8R1B4z09FxrNnCLfmEjb46EXvlqixzvwuCdVjJm78eYkJU17AIoy6i1jNK3w5Qb4UKTNY2FpBnXgWisc2rqXTnMQSy0BWrbuWOl8GObzug2n9gScBAt7-rk98OMy5UUgQnM/s1600/Johny+Darkmag.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnydarkmag.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-demosite.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: center;"><b><a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank">Pasang Slider</a></b></div><div style="text-align: center;"><a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank"><b>Ganti Feddburner</b></a></div><br /><div style="text-align: justify;">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.</div><br /><b>Penting untuk diperhatikan :</b><br /><div style="text-align: justify;">Bagi pengguna template responsif, jika ingin tampil maksimal perhatikan point-pont berikut ini :<br /><ol><li>Upload sendiri gambar waktu buat postingan, jangan disimpan di host selain blogger apalagi copy URL gambar dari blog lain.</li><li>Hapus kode merah di gambar pada posisi HTML (bukan compose), contohnya seperti ini :<br /><div style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4BaVupcR8R1B4z09FxrNnCLfmEjb46EXvlqixzvwuCdVjJm78eYkJU17AIoy6i1jNK3w5Qb4UKTNY2FpBnXgWisc2rqXTnMQSy0BWrbuWOl8GObzug2n9gScBAt7-rk98OMy5UUgQnM/s1600/Johny+Darkmag.jpg" <span style="background-color: red;">imageanchor="1" style="margin-left: 1em; margin-right: 1em;"</span>><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4BaVupcR8R1B4z09FxrNnCLfmEjb46EXvlqixzvwuCdVjJm78eYkJU17AIoy6i1jNK3w5Qb4UKTNY2FpBnXgWisc2rqXTnMQSy0BWrbuWOl8GObzug2n9gScBAt7-rk98OMy5UUgQnM/s1600/Johny+Darkmag.jpg" /></a></div></li></ol>Silahkan panggil saya apa aja Pak, mas, om, cuk, nyet, dan lain-lain asal jangan dipanggil <b>MASTER</b> atau Mastah (kemampuan nggak seberapa dipanggil master). Risih saya, beneran. Hanya <b>Tuhan Yang Maha Esa</b> yang layak dipanggil MASTER</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-62646546768056533522013-02-09T00:02:00.000-08:002013-02-17T16:36:35.191-08:00Template Ini Responsif Bukan ya?<div style="text-align: justify;"><span class="awal">M</span>umpung 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 <a href="http://www.maskolis.com/2013/01/terus-gua-mesti-bilang-prett-gitu.html" target="_blank">ranking Alexa template Johny Wuss</a>, kali ini lebih menggelikan lagi, yah antara geli dan nggak percaya. Gimana nggak geli coba, barusan saya baca artikel di blog Mas Adhy pemilik <b>Kompi Ajaib</b> tentang hadiah pagerank 4 dari Google, terus iseng-iseng saya cek juga blog saya satu persatu, tidak ketinggalan saya cek template kesayangan saya <a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank">Johny Wuss</a>, 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 :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xh-CcH8-rZh-6QbIuM15C7wdjRHVzBMPimPdThk1XdOB6QkJLHQcNEOwbFbGvD75P9keWU_AJ9hWWOO1pOPNSp-Rh9ugNTFyuyFLq88Nmue2zylrByN5u_gwWx-Ik8ypShZf83m06mQ/s1600/johny+wuss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny wuss pagerank" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xh-CcH8-rZh-6QbIuM15C7wdjRHVzBMPimPdThk1XdOB6QkJLHQcNEOwbFbGvD75P9keWU_AJ9hWWOO1pOPNSp-Rh9ugNTFyuyFLq88Nmue2zylrByN5u_gwWx-Ik8ypShZf83m06mQ/s1600/johny+wuss.jpg" /></a></div><div style="text-align: justify;">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. <a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank">Johny Wuss hanyalah sebuah blog demo</a> 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?</div><br /><div style="text-align: justify;">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.</div><br /><div style="text-align: justify;">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</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny wusss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-wusss.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-wuss.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6Pmg48u4QWXzWeZDVtnDLIegebD7WNcDph0ByAX-zn6fcNpmu4WkspoVzZLV5v7m_cw4B-bkuRyKghsoLP_KKhmb_i3zO50YIma98UEWXqt9rJghVtQA5uJ3EGOHkWYIxzn-RODToq4/s1600/Testing+responsive+Johny+See+Book.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny see book" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6Pmg48u4QWXzWeZDVtnDLIegebD7WNcDph0ByAX-zn6fcNpmu4WkspoVzZLV5v7m_cw4B-bkuRyKghsoLP_KKhmb_i3zO50YIma98UEWXqt9rJghVtQA5uJ3EGOHkWYIxzn-RODToq4/s1600/Testing+responsive+Johny+See+Book.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnysee-book.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-see-book-sekali.html" target="_blank">Download</a></span></b></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://mattkersley.com/responsive/" target="_blank">Cek Responsive</a></span></b></div><br /><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcezV8T2hrvOmgsm3o4ZrLhOhL5_8fqq5z65E0E4Xa9EY3jPc6sU1Lfo9Sc8Bhg9lESN8DNbFeetOpBLb9eS2zjG_-PHhhy05fGtnNATsOObqD2mDziyvpPqb6-06_OOvuxa5u8CcWGTA/s1600/Johny+See+Book+Sekali_Your+Blog+Description_20130209_133305.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny see book" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcezV8T2hrvOmgsm3o4ZrLhOhL5_8fqq5z65E0E4Xa9EY3jPc6sU1Lfo9Sc8Bhg9lESN8DNbFeetOpBLb9eS2zjG_-PHhhy05fGtnNATsOObqD2mDziyvpPqb6-06_OOvuxa5u8CcWGTA/s1600/Johny+See+Book+Sekali_Your+Blog+Description_20130209_133305.jpg" /></a></div><br />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 <a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank">Johny Wuss</a>, cuma kok skore SEO nya kecil, saya ngak tahu kenapa. </div><br /><div style="text-align: justify;">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 <b>creating website</b> ini biar responsif juga. Oke, itu dulu artikel kali ini, silahkan dicoba dan selamat berakhir pekan bersama keluarga.</div><br /><b>NB : </b><br />Keliatannya lucu juga, kalau saya bagikan template responsif tapi blog yang saya pakai ini belum responsif ya.Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-54598849447611715622013-02-07T08:09:00.000-08:002013-02-17T16:36:35.201-08:00Johny Jijay, Simple Template Blogger Gallery Movie<div style="text-align: justify;"><span class="awal">S</span>ebenarnya template ini bukan murni buatan saya, saya hanya membuat dasarnya saja, yaitu pada <a href="http://johnyprett.blogspot.com/" target="_blank">Johny Prett template</a>. 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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNz8T9EqKL5GCbm1tNgvHT7R-X_l6m0OfnYOppzbO7y7c2SNrPlLDfOWM3R20grliUyWLKMfx1-_05KLFTdQ6H-Jsxc_4tFZhHwnLpZ7EUUiRK_9xeIPkTEntcXnhl6JzfeKoE7xFveI/s1600/Johny+Jijay.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny jijay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNz8T9EqKL5GCbm1tNgvHT7R-X_l6m0OfnYOppzbO7y7c2SNrPlLDfOWM3R20grliUyWLKMfx1-_05KLFTdQ6H-Jsxc_4tFZhHwnLpZ7EUUiRK_9xeIPkTEntcXnhl6JzfeKoE7xFveI/s1600/Johny+Jijay.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnyjijay.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/johny-jijay.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">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 <a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank">lofslidernews modifikasi</a> di halaman utama dan simpel slider untuk recent post pada halaman postingan.</div><br /><div style="text-align: justify;">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 <a href="http://www.maskolis.com/2013/02/inilah-template-blogger-super-jelek.html" target="_blank">template Bukan Johny</a>. Saya akan ulangi lagi disini cara memasang slider pada template ini :</div><br /><b></b><br />Untuk mengaktifkan slider yang ada di homepage pada template ini, masukkan kode berikut pada kolom kosong paanjang di bawah header. Masuk ke <b>Layout/Tata Letak</b> >> <b>Add a Gadget</b> pilih <b>HTML/Javascript</b> :<br /><div style="text-align: left;"><blockquote class="tr_bq"><div class='lof-main-wapper' id='slider'><br /><div class='slider-main-outer'><br /><ul class='slider-main-wapper'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br /></script><br /></ul><br /></div><br /><div class='slider-navigator-outer'><br /><ul class='slider-navigator'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");<br /></script><br /></ul><br /></div><br /></div></blockquote></div><div style="text-align: justify;">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 <a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank">Modifikasi Slider Lofslidernews Maknyus</a>.</div><br /><div style="text-align: justify;">Untuk slider yang ada di halaman postingan menampilkan artikel terbaru Anda, tutorial slider ini sudah saya bahas sebelumnya pada artikel <a href="http://www.maskolis.com/2013/02/membuat-simple-slider-otomatis-gambar.html" target="_blank">simple slider untuk image vertikal</a>. 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.<br /><br /><b>Javascript yang harus Anda dimpan sendiri di Google Code :</b><br /><script src='<a href="http://yourjavascript.com/24211643151/jquery.easing.js">http://yourjavascript.com/24211643151/jquery.easing.js</a>' type='text/javascript'/><br /><script src='<a href="http://yourjavascript.com/218437119/halamanav.js">http://yourjavascript.com/218437119/halamanav.js</a>' type='text/javascript'/> </div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-82993832399450058252013-02-04T16:39:00.000-08:002013-02-17T16:36:35.210-08:00Membuat Simple Slider Otomatis Gambar Vertikal <div style="text-align: justify;"><span class="awal">K</span>ali 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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQnXOEIgINZNOlrFKudcP9Z7ImyrUmKuFGjSTdB_qN0sr4F8V0540CzP1b9FmlkJE9YQ7rcnCwLdRWutvcWIdMMb6UDIA4_ESNSvqJkR6L7oFByu2NpF7yDj9J0-PNOxfbnLGEMHeE-SM/s1600/slider+vertikal.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="slider otomatis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQnXOEIgINZNOlrFKudcP9Z7ImyrUmKuFGjSTdB_qN0sr4F8V0540CzP1b9FmlkJE9YQ7rcnCwLdRWutvcWIdMMb6UDIA4_ESNSvqJkR6L7oFByu2NpF7yDj9J0-PNOxfbnLGEMHeE-SM/s1600/slider+vertikal.jpg" /></a></div><br /><div style="text-align: center;"><a href="http://johnyprett.blogspot.com/2013/01/another-sample-post-with-image-beautiful.html" target="_blank"><span style="font-size: large;"><b>DEMO</b></span></a></div><br /><div style="text-align: justify;">Slider ini sangat sederhana, seperti juga <a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank"><b>slider-slider sebelumnya</b></a>, 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 <b>300px</b>. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti <b>Lasantha Bandara</b>, <b>Lansindu</b>, <b>Sameera</b> 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 :</div><ol><li>Setelah login ke <b>Blogger</b>, pilih blog yang ingin ditambahkan slider ini.</li><li>Kemudian masuk ke <b>Template</b> >> <b>Edit HTML</b> (centang kotak <i>expand widget templates</i>)</li><li>Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.</li><li><div style="text-align: justify;">Klik "Buka" dan masukkan kode berikut di atas kode <b style="color: #cc0000;">]]></b:skin> </b>: </div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">/* Slider */<br />.sompret-wrapper {float:right; position: relative;}<br />.sompret { overflow: hidden; position: relative; width:<b><span style="color: red;">300px</span></b>; height:<b><span style="color: red;">400px</span></b>;}<br />.image_reel { position: absolute; top: 0; left: 0; }<br />.image_reel img {overflow: hidden;float: left;width:<b><span style="color: red;">300px</span></b>; height:auto;}<br />.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }<br />.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinpKUtP6dkbWwrJAaw2ZxQIXjCt8IHzLoD6yiJdV1iN4fid-MQdkqseHh8PPBl_nrDIGegaMJ5IOQ33vpQEXDFKgsDEP8tpQtXKNTXUrQK3M9grV3kdyFyJ4aijfrFxUREazfIVOeB01I/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }<br />.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpyPYePqE_dLwG4A7tMTewfAEaa93cV5HAl6zkQjMNGAv4SM3Ff0gJre97uf3GONzHOLeM8nreQRY87rFd2OOWNyac_AixezybfHeYekXk0sfO8R3J6OmOurebKwUmfMbjeWgGZ4m9Nc/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}<br />.paging a:hover {font-weight: bold; border:none; outline:none;}<br />.crott { width:<b><span style="color: red;">280px</span></b>; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiye-asOoAYet-4NN7Uyptlno_I4rlGy7E9wI1VJqOkf8D0cjHR1u7BYUQPNtLmY6hmXI8TDiMj1E5m9DyshfsK_gI3NzdYY7BOFBabbGeuZ7iuGsovNCScaTo6sBkPvS6HehP4rdZFQeI-/s1600/uj-opacity-40.png);padding:5px 10px; }<br />.crott a{color: #fff;font: 16px Oswald }<br />.crott p{color: #fff;font: 12px Arial;}</div></div></div><div style="text-align: justify;">Kode <b style="color: red;">warna merah</b> diatas adalah ukuran slider, untuk lebar <b style="color: red;">300px</b> dan tinggi <b style="color: red;">400px</b>. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.</div></li><li>Masih di <b>Edit HTML</b>, masukkan kode script berikut ini diatas <b style="color: #cc0000;"></head</b><b style="color: #cc0000;">></b> : <div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><span style="color: red;"><script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/></span><br /><script type='text/javascript'><br />//<![CDATA[<br />jQuery(document).ready(function() {<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//Set Default State of each portfolio piece<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".paging").show();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".paging a:first").addClass("active");<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//Get size of images, how many there are, then determin the size of the image reel.<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var imageWidth = $(".sompret").width();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var imageSum = $(".image_reel img").size();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var imageReelWidth = imageWidth * imageSum;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//Adjust the image reel to its new size<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".image_reel").css({'width' : imageReelWidth});<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//Paging + Slider Function<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>rotate = function(){<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> var triggerID = $active.attr("rel") - 1; //Get number of times to slide<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> $(".paging a").removeClass('active'); //Remove all active class<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> <br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".crott").stop(true,true).slideUp('slow');<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> //Slider Animation<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> $(".image_reel").animate({<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> left: -image_reelPosition<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> }, 500 );<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>};<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//Rotation + Timing Event<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>rotateSwitch = function(){<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> $active = $('.paging a.active').next();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> if ( $active.length === 0) { //If paging reaches the end...<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> $active = $('.paging a:first'); //go back to first<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> }<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> rotate(); //Trigger the paging and slider function<br /><span class="Apple-tab-span" style="white-space: pre;"> </span> }, 10000); //Timer speed in milliseconds (3 seconds)<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>};<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>rotateSwitch(); //Run function on launch<br /><br /> //On Click<br /> $(".paging a").click(function() { <br /> $active = $(this); //Activate the clicked paging<br /> //Reset Timer<br /> clearInterval(play); //Stop the rotation<br /> rotate(); //Trigger rotation immediately<br /> rotateSwitch(); // Resume rotation<br /> return false; //Prevent browser jump to link anchor<br /> }); <br /><br />});<br /><br />//]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TdFK5sJ1iuU_ZccTKvmeuVLLMpgbsgJfrmr-L3BkdYz7egC08lkEEsgTuleHYMLsNKBrWUeIOgpLxgwD3asg2SF7cFo6r8kkiLn6eQddVDOKzVkqHwMCipwccQdp4ZjxYMEJkBJkUP4/s1600/no+image.jpg";<br />showRandomImg = true;<br />aBold = true;<br />summaryPost1 = 80;<br />summaryTitle = 20;<br />numposts1 = <span style="color: red;">6</span>;<br /><br />function removeHtmlTag(strx,chop){<br /> var s = strx.split("<");<br /> for(var i=0;i<s.length;i++){<br /> if(s[i].indexOf(">")!=-1){<br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br /> }<br /> }<br /> s = s.join("");<br /> s = s.substring(0,chop-1);<br /> return s;<br />}<br /><br />function showrecentposts1(json) {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>img = new Array();<br /> <br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>for (var i = 0; i < numposts1; i++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var entry = json.feed.entry[i];<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var posttitle = entry.title.$t;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var pcm;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var posturl;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (i == json.feed.entry.length) break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>for (var k = 0; k < entry.link.length; k++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (entry.link[k].rel == 'alternate') {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>posturl = entry.link[k].href;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>for (var k = 0; k < entry.link.length; k++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>pcm = entry.link[k].title.split(" ")[0];<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if ("content" in entry) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var postcontent = entry.content.$t;}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>else<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if ("summary" in entry) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var postcontent = entry.summary.$t;}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>else var postcontent = "";<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span><br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>postdate = entry.published.$t;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if(j>imgr.length-1) j=0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>img[i] = imgr[j];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>s = postcontent<span class="Apple-tab-span" style="white-space: pre;"> </span>; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var day = postdate.split("-")[2].substring(0,2);<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var m = postdate.split("-")[1];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var y = postdate.split("-")[0];<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>for(var u2=0;u2<month.length;u2++){<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt(m)==month[u2]) {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>m = month2[u2] ; break;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var daystr = m+ ' ' + day + ' ' + y ;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';<span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>document.write(trtd); <br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> j++;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br />}<br /><br />function showrecentposts2(json) {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>img = new Array();<br /> <br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>for (var i = 0; i < numposts1 ; i++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var entry = json.feed.entry[i];<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var posttitle = entry.title.$t;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var pcm;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var posturl;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (i == json.feed.entry.length) break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>for (var k = 0; k < entry.link.length; k++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (entry.link[k].rel == 'alternate') {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>posturl = entry.link[k].href;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>for (var k = 0; k < entry.link.length; k++) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>pcm = entry.link[k].title.split(" ")[0];<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if ("content" in entry) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var postcontent = entry.content.$t;}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>else<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>if ("summary" in entry) {<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>var postcontent = entry.summary.$t;}<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>else var postcontent = "";<br /> <span class="Apple-tab-span" style="white-space: pre;"> </span><br /> <span class="Apple-tab-span" style="white-space: pre;"> </span>postdate = entry.published.$t;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if(j>imgr.length-1) j=0;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>img[i] = imgr[j];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>s = postcontent<span class="Apple-tab-span" style="white-space: pre;"> </span>; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var day = postdate.split("-")[2].substring(0,2);<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var m = postdate.split("-")[1];<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var y = postdate.split("-")[0];<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>for(var u2=0;u2<month.length;u2++){<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt(m)==month[u2]) {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>m = month2[u2] ; break;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var daystr = day+ ' ' + m + ' ' + y ;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>document.write(trtd); <br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br /><span class="Apple-tab-span" style="white-space: pre;"> </span> j++;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>}<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br />}<br /> //]]><br /></script></div></div></div><div style="text-align: justify;">Perhatikan kode script <span style="color: #cc0000;">warna merah</span> 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.. <b>numposts:6;</b> adalah jumlah post yang tampil pada slider</div></li><li><div style="text-align: justify;">Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <b><div id='sidebar-wrapper'></b> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <b><div id='sidebar-wrapper'></b> : </div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><b><span style="color: cyan;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></b><br /><div class='sompret-wrapper'><br /><div class='sompret'><br /><div class='image_reel'><br /><script><br />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;);<br /></script></div><br /><div class='description'><br /><script> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />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;);<br /></script><br /></div><br /></div><br /><div class='paging'><br /><a href='#' rel='1'/><br /><a href='#' rel='2'/><br /><a href='#' rel='3'/><br /><a href='#' rel='4'/><br /><a href='#' rel='5'/><br /><a href='#' rel='6'/><br /></div><br /></div><b><span style="color: cyan;"></b:if></span></b></div></div></div><i>Keterangan :</i><br /><br /><div style="text-align: justify;">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 <b style="color: #cc0000;">/-/your label</b> antara kode <b>default</b> dan <b>?</b>, jadinya seperti ini <b>default/-/your label?max-results</b> karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.<br /></div></li><li>Terakhir <b>save</b>, selesai.</li></ol><div style="text-align: justify;">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 <a href="http://johnyjijay.blogspot.com/2013/02/praesent-metus-eget-augue-lacinia.html" target="_blank"><b>demo ini</b></a>, 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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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. <b>Untuk sementara saya belum bisa ikutan nimbrung karena masih banyak pekerjaan yang mesti saya selesaikan</b>. Semua pertanyaan di luar topik artikel ini silahkan masukkan pada forum diskusi, klik menu <a href="http://www.maskolis.com/p/forum-diskusi.html#/" target="_blank">forum diskusi</a> yang ada pada menu navigasi atas blog ini.<br /><br /><i><b>NB :</b></i><br />Jika Anda melihat gambar pada slider kadang terlihat kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo. </div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-44627598837857889762013-02-01T06:57:00.000-08:002013-02-17T16:36:35.220-08:00Inilah Template Blogger Super Jelek Sekali<div style="text-align: justify;"><span class="awal">S</span>ebelum 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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3qakCiKPtk3R4NU3ITYP1NYCSYdUnI94SO__1v5nHTdfEPn6B7lE1VcwDFSYqm8RDLpzmssiz9fO0Nnr5fGNSoA2fvd_fL2sDhFh0AvlbDdlBQ7AsPKlDQHkoh7hxdkOBB8n8me4d2Y/s1600/Bukan+Johny.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template maskolis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3qakCiKPtk3R4NU3ITYP1NYCSYdUnI94SO__1v5nHTdfEPn6B7lE1VcwDFSYqm8RDLpzmssiz9fO0Nnr5fGNSoA2fvd_fL2sDhFh0AvlbDdlBQ7AsPKlDQHkoh7hxdkOBB8n8me4d2Y/s1600/Bukan+Johny.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://bukanjohny.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/bukan-johny.html" target="_blank">Download</a></span></b></div><br /><b>Slider </b><br />Masukkan kode berikut pada kolom kosong di bawah header. Masuk ke <b>Layout/Tata Letak</b> >> <b>Add a Gadget</b> pilih <b>HTML/Javascript</b> :<br /><div style="text-align: left;"><blockquote class="tr_bq"><div class='lof-main-wapper' id='slider'><br /><div class='slider-main-outer'><br /><ul class='slider-main-wapper'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br /></script><br /></ul><br /></div><br /><div class='slider-navigator-outer'><br /><ul class='slider-navigator'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");<br /></script><br /></ul><br /></div><br /></div></blockquote></div><div style="text-align: justify;">Kode diatas bekerja berdasarkan artikel terbaru, jika Anda ingin menampilkan label atau kategori tertentu baca postingan saya tentang <a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank">Modifikasi Slider Lofslidernews Maknyus</a>.</div><br /><b>Widget Komentar </b><br />Masukkan kode di bawah ini pada widget sidebar :<br /><div style="text-align: left;"><blockquote class="tr_bq"><style type="text/css"><br />ul.tb_recent_comments{list-style:none;margin:0;padding:0;}<br />.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;}<br />.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}<br />.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}<br />.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}<br /></style><br /><script type="text/javascript"><br />//<![CDATA[<br /> // Recent Comments Settings<br /> var<br />numComments = 5,<br />showAvatar = true,<br />avatarSize = 30,<br />characters = 60,<br />defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",<br />hideCredits = true;<br />//]]><br /></script><br /><script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script><br /><script type="text/javascript" src="<b style="color: #cc0000;">http://www.maskolis.com</b>/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script> </blockquote></div>Ganti URL warna merah <b style="color: red;">http://www.maskolis.com</b> dengan URL blog Anda.<br /><br /><b>Widget random post</b><br /><div style="text-align: left;"><blockquote class="tr_bq"><script type="text/javascript"><br /> var randarray = new Array();var l=0;var flag;<br /> var numofpost=<b style="color: red;">7</b>;function randomposts(json){<br /> var total = parseInt(json.feed.openSearch$totalResults.$t,10);<br /> 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;}}<br /> if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');<br /> for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];<br /> 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>";<br /> document.write(item);}}<br /> }document.write('</ul>');}<br /> </script><br /> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></blockquote></div>Angka <b style="color: red;">7</b> pada kode diatas adalah jumlah random post yang ditampilkan, silahkan ganti sesuai keinginan.<br /><br /><b>Search Box</b><br /><div style="text-align: justify;">Search box atau kotak pencarian yang saya gunakan pada template ini saya ambil dri <b>Google CSE</b>, 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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidluWuVT9MpDVQUtr2A1_n3SlasjwPTPN3V32cr9mPvk5A2C5kFih6tdIm5rMrmIn4Big0W0WR5JqnjYGuQtNiWFW8mePj9WICq8HGFdsCNdgFe4IDrv7rfqZ-oLRiCpjUKeC9Kkr-BGg/s1600/Kehidupan+Manusia.png" style="margin-left: 1em; margin-right: 1em;"><img alt="template maskolis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidluWuVT9MpDVQUtr2A1_n3SlasjwPTPN3V32cr9mPvk5A2C5kFih6tdIm5rMrmIn4Big0W0WR5JqnjYGuQtNiWFW8mePj9WICq8HGFdsCNdgFe4IDrv7rfqZ-oLRiCpjUKeC9Kkr-BGg/s1600/Kehidupan+Manusia.png" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://martin-big.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/02/bukan-johny.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Template ini sama dengan <b>Bukan Johny</b>, 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.<br /><br />Kedua template ini dasarnya dari <a href="http://www.maskolis.com/2013/01/terus-gua-mesti-bilang-prett-gitu.html" target="_blank"><b>Johny Wuss</b></a>, 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.</div><br /><div style="text-align: justify;">Dan satu lagi template ini <b>bukan template responsif</b>, 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.</div><br /><b>PENGUMUMAN PENTING</b><br /><a href="http://www.maskolis.com/2013/01/forum-diskusi-pengguna-template.html" target="_blank"><b>Silahkan baca sendiri disini</b></a>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-82675079976288730462013-01-31T06:36:00.000-08:002013-02-17T16:36:35.229-08:00Forum Diskusi Pengguna Template Creating Website<div style="text-align: justify;"><span class="awal">F</span>orum ini saya buat karena banyak sekali komentar yang masuk melampaui ambang batas, terlalu banyak sehingga kadang jawaban admin tidak terbaca oleh si komentator. Terkadang juga karena saking seringnya pertanyaan yang muncul dengan topik yang sama, sehingga saya harus menjawabnya berulang kali. Forum ini juga mengantisipasi pertanyaan-pertanyaan yang masuk ke email saya, yang terkadang juga jarang saya jawab karena saya jarang buka email atau bagi teman-teman yang sering minta chat di Facebook, karena terus terang saya tidak begitu tertarik dengan sosial media yang satu ini. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Forum ini sebenarnya saya buat khusus untuk para pengunjung di blog ini, khususnya para pemakai template dari Creating Website. Tapi jika ada teman blogger lain yang mau ikut berpartisipasi silahkan saja. Silahkan promosi artikel atau blog Anda di Forum itu, bebas dan gratis tidak dipungut biaya.</div><br /><div style="text-align: justify;">So, jika Anda tertarik untuk ikut gabung dalam forum ini. caranya sangat mudah, Anda tinggal masuk ke link ini <b><a href="http://www.maskolis.com/p/forum-diskusi.html#/" target="_blank">FORUM DISKUSI</a></b> yang ada di menu navigasi atas atau klik screenshot gambar di bawah. Setelah terbuka halaman baru, Anda tidak perlu mendaftar karena bisa langsung <b>Log In</b> dengan akun <b>Google, Facebook, Yahoo, Twitter</b> dan lainnya. Silahkan pilih topik yang Anda inginkan, kemudian tulis apa saja yang berhubungan langsung dengan topik yang Anda pilih.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://www.maskolis.com/p/forum-diskusi.html#/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="forum diskusi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVU8YwfolcChfjJJoRq-9LWgDd9iHtkxDauCU8bKuFQC3aMV9auHJZv1QWuRLSaNsuZc1wNfEzZOKjbWRuWv47DfyITdj3I70VDLlCZox_CBbpuTETa6VOk32LmG_kIH8QPvzeYUj02A/s1600/forum+diskusi.jpg" /></a></div><br /><div style="text-align: justify;">Forum sederhana ini saya buat dari situs penyedia forum gratis <a href="http://tal.ki/" target="_blank">tal.ki</a>, silahkan Anda memanfaatkan forum ini untuk keperluan promosi blog atau artikel Anda, tanya jawab seputar template atau sekedar ngobrol dengan teman blogger yang lain sudah saya sediakan tempat ngobrol dengan fasilitas chat dari <b>Chatroll</b>. Saya tidak terlalu berharap banyak pada forum ini, disini saya hanya memberikan fasilitas baru bagi Anda, silahkan dimanfaatkan sebaik-baiknya. Tidak ada peraturan khusus, setiap blogger bebas berpartisipasi, selama dalam batas-batas yang masih bisa ditoleransi. Saya tidak perlu membuat sebuah peraturan-peraturan tertentu, saya yakin Anda semua sudah dewasa, pasti bisa memilah mana yang layak dan yang tidak layak untuk dijadikan sebagai konsumsi publik.</div><br /><div style="text-align: justify;">Saya juga menawarkan kepada teman-teman semua, bagi yang berminat untuk menjadi admin atau moderator pada forum ini silahkan tunjuk jari, tidak ada kriteria khusus untuk menjadi seorang moderator. Yang penting bisa menjembatani antar pengguna forum. Silahkan jika Anda mempunyai saran atau usul pada forum itu, misalnya menambahkan topik diskusi baru atau apa saja yang berhubungan dengan dunia blogger.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Demikian pemberitahuan ini, semoga bisa bermanfaat bagi teman-teman semua, satu pesan saya marilah kita ciptakan diskusi yang sehat dengan logika berpikir yang jernih sehingga menciptakan kesimpulan yang bisa diterima oleh setiap pihak.</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-63838801451787170892013-01-29T22:34:00.000-08:002013-02-17T16:36:35.237-08:00Inilah 10 Blogger Pengguna Template Creating Website<div style="text-align: justify;"><span class="awal">T</span>epat 2 minggu setelah artikel saya sebelumnya yang berjudul <a href="http://www.maskolis.com/2013/01/mau-backlink-dari-maskolis.html" target="_blank">Mau Backlink dari Maskolis?</a> Saya akan memilih secara acak 10 pengguna template dari <a href="http://www.maskolis.com/" target="_blank"><b>Creating Website</b></a>, yang menurut saya layak diberikan nilai plus. Yang perlu diingat disini adalah ini bukanlah kontes atau turnamen yang memperebutkan sebuah hadiah, tidak ada yang menang dan kalah, tapi hanya sebagai ucapan terima kasih kepada teman-teman Blogger yang telah sudi menggunakan template dari <a href="http://www.maskolis.com/" target="_blank"><b>Creating Website</b></a>. Tidak ada kriteria tertentu dalam memilih, saya hanya melihat dari perspektif orang awam dalam melihat sebuah blog. Perpaduan atau komposisi warna yang enak dipandang mata dan pengaturan tata letak widget yang rapi, menjadi dasar saya untuk memilih ke 10 blog ini. Berikut ini ke-10 blog terbaik yang menggunakan template dari Creating Website :</div><br /><table cellpadding="5" style="text-align: center;"><tbody><tr><td><h3><a href="http://multipaste.blogspot.com/" target="_blank">MULTI PASTE</a></h3></td><td><h3><a href="http://www.jiper4ever.com/" target="_blank">JiPer4ever</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgjxUmYz4EaJRj6Dxz0e19HZ6HH7PwkNU2PI9CO0E8pDDkYjvctWNm4f3dihVLn6N3ez9JTRMQ8-MkatJ8OBSD_9BbhzWNQ0u8JhdezT0LqIg5VaXMkD8fGJUbS6u_7NHea5PvJ1Df9A/s1600/MULTI+PASTE.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzcjVPxVkCRVx_A_0sJ8TtQxVobah1eN2DNhY5IJrcFgkuQcIwlEtg7adqNNdDcePY8tuJgWrL7WF-nI_yQl7bDZq2bAFpbhM26X6-N_7-rcIY3hj6wY3GAymH_Qa_vmqu_WF4YDaksg/s1600/JiPer4ever.com.jpg" width="280" /></td></tr><tr><td><a href="http://multipaste.blogspot.com/" target="_blank">http://multipaste.blogspot.com</a></td><td><a href="http://www.jiper4ever.com/" target="_blank">http://www.jiper4ever.com</a></td></tr><tr><td><h3><a href="http://www.siomponk.com/" target="_blank">Siomponk</a></h3></td><td><h3><a href="http://www.yaaakhi.com/" target="_blank">Yaa Akhi</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GRF0wkLe45L_bTPiJ31G6og1cShr0wLUwUzBZoC3QtO77IGdzLy5ePMmvatXdeBgbtdJ_HpaO19_lufYQezkO1yc-fuSV1LCDoPHDbs36T5rOcaZEykd1jfjXK38nJczZeYcR5nW0HU/s1600/siomponk.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKVSJIDmLe-Egs-e8J-8HxhrVhyphenhyphenZ50Xzjn8PL9o3ftr7bXbR3IjfMalU7ANE2jpngQDQ4OI26izWjWuVj06AznF49WC_WFQ5IQmd-GdqDqhbsUQ7XkkA_rcra_1u36pJbn11j6tv0Gv4/s1600/Yaa+Akhi+Moslem+Store.jpg" width="280" /></td></tr><tr><td><a href="http://www.siomponk.com/" target="_blank">http://www.siomponk.com</a></td><td><a href="http://www.yaaakhi.com/" target="_blank">www.yaaakhi.com</a></td></tr><tr><td><h3><a href="http://adagamez.blogspot.com/" target="_blank">adagamez.blogspot.com</a></h3></td><td><h3><a href="http://acehtourismagency.blogspot.com/" target="_blank">Aceh Tourism And Culture</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTOZaciHljkrPyLhBSurAp3tVc_r8sHWnoVNjx5hTj8jJmDXXTVDSedBO_-JukIQpzqfbFkPgIfDY8bv67vYXpecjIdyN05pLVwIg4w8xQEKvLHl_N7GgUZVyEbCXVmTT2XGhwF3g5FE/s1600/AdaGamez.blogspot.com.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUT6OZOmUwBuaSTs7lxHuJ8dkNw69HLER6BtiPZe4mXmJXLIqjhfaACG3zr3LPBdbEex-W9tN-MElSO79R0hU-Lx9Jrz-DKEuq3sX_Cl1jEpiKyi4DrbXUP0Qe3pE-TSSXFIDzMAh5-KA/s1600/Aceh+Tourism+And+Culture.jpg" width="280" /></td></tr><tr><td><a href="http://adagamez.blogspot.com/" target="_blank">http://adagamez.blogspot.com</a></td><td><a href="http://acehtourismagency.blogspot.com/" target="_blank">http://acehtourismagency.blogspot.com</a></td></tr><tr><td><h3><a href="http://www.chanelsatu.com/" target="_blank">chanelsatu</a></h3></td><td><h3><a href="http://anime999-store.blogspot.com/" target="_blank">anime999</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEewHqKMrVQTjSqVST82qAogmELFdAg4PUBQAfUoAOOQXlYdxRTAQFojIRv4clZ4wTTQ9oybYGGN1K9OzT_qX3bARgfwGO2GrGa9ljSG_2DXj75R_3ukT3blNOQGolrSBbXSL0mDEyml4/s1600/Chanelsatu.com.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6OYEF6ocK_EixbNlsXlihiKRJh3CUYmi3a7CcmNYM_UYW55yX5-NI0XCYhLwK9j2LAwBLelLtWmXExz5lF9c-qxCQI-q1iG7J1SeSlrzAvU3Enag3sXLYwlMf5Nl8dGL_17ard-fNJs/s1600/Welcome+to+Diana-Store.jpg" width="280" /></td></tr><tr><td><a href="http://www.chanelsatu.com/" target="_blank">http://www.chanelsatu.com</a></td><td><a href="http://anime999-store.blogspot.com/" target="_blank">http://anime999-store.blogspot.com</a></td></tr><tr><td><h3><a href="http://menjamu.blogspot.com/" target="_blank">Menjamu Blog</a></h3></td><td><h3><a href="http://blibaju.com/" target="_blank">BliBaju.com</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BaNCCKKt_pZvzTF4IVFaaaM2RCAzDqqCEoA0fYV-vAU_paDbLChsa0tpbPw34vwCcP2NG1e78hOjbW6NE-rRMK1lCI63IUycg0-cYKWPWxR4B9inkpelGSBb9ivoMqukRd4qi7V9rjc/s1600/Menjamu.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9xfCF5Ms26ibb5vUZfr6UFUW4rUzjQf2RV_D5FFl1O0Da9-refzRDNx_0OWzydcUVd90XP6V4ycomtKyBK2CCHIKy5a6N9uM8jVuUGNaLMxMf9Kuk6TSoqt_gwZWNR-UDnXoAg1zw_E/s1600/Blibaju.jpg" width="280" /></td></tr><tr><td><a href="http://menjamu.blogspot.com/" target="_blank">http://menjamu.blogspot.com</a></td><td><a href="http://blibaju.com/" target="_blank">http://blibaju.com</a></td></tr></tbody></table><br /><div style="text-align: justify;">Dan 4 blog di bawah ini untuk mengganti showcase yang sudah habis masa jabatannya, karena ganti URL atau ganti template lain bukan dari Creating Website : </div><table cellpadding="5" style="text-align: center;"><tbody><tr><td><h3><a href="http://myarchivezone.blogspot.com/" target="_blank">Mainin Game</a></h3></td><td><h3><a href="http://www.tempatwisatadibandung.org/" target="_blank">Tempat Wisata di Bandung</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3n-7xQ4fBwUodH9Ww5FE1aMCnXy0IdHIE6tGDJc1GbUTJY0yJR4kr2qYE-MgJy60hjrh_Eww-VvbxQYDnv3Mf76ribDeRQhQ92-c5dLYn47rTXZPtys9FHC9g37xSpkz8QCo9cYR8Ic/s1600/Mainin+Game+Online.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdIvkwbk82HmWziui5RzSTQKZOYzF_imzIZgF63TPTfCGybJkta87k3L5qLYUEm2JX-xQuxdpI9gL4pH7FEFt1zkE7FYStWNNZxp-ZQ34UUa_RNBvD90o8M-_FubaIIjHFVJIsUktDz8/s1600/Tempat+Wisata+di+Bandung.jpg" width="280" /></td></tr><tr><td><a href="http://myarchivezone.blogspot.com/" target="_blank">http://myarchivezone.blogspot.com</a></td><td><a href="http://www.tempatwisatadibandung.org/" target="_blank">http://www.tempatwisatadibandung.org/</a></td></tr><tr><td><h3><a href="http://www.kompiajaib.com/" target="_blank">Kompi Ajaib</a></h3></td><td><h3><a href="http://karinafotocollection.blogspot.com/" target="_blank">Full blog Design</a></h3></td></tr><tr><td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihw01obd9lc9CeXTwRwkdUF-e_N0vnAymGBWS6rlwWhhVArY-tpkRB9KZsAO2FVlvF5ecR7aTAb6PZyOPMn9Ql5E1jwF7SssYg8aAC0jYGUPl0qsiaro4hL8fYEAFOlgCHj2JPW7dYQNw/s1600/KOMPI+AJAIB.jpg" width="280" /></td> <td><img height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRNE4ZOkjCSLd4nXK2ZvqUg-4nuBdtTAVtmr0FBrbAtA3NyO4DoTbMUxfuIA2EVZYGDzRRpbnCI-nnTvWlyzTR0kqHqG89BsFXIZevDpwFY0CaqDNUJh76WtNgVdXbHnmLqSQ8GvXm5c/s1600/full+blog+design.jpg" width="280" /></td></tr><tr><td><a href="http://www.kompiajaib.com/" target="_blank">http://www.kompiajaib.com</a></td><td><a href="http://karinafotocollection.blogspot.com/" target="_blank">http://karinafotocollection.blogspot.com</a></td></tr></tbody></table><br /><div style="text-align: justify;">Pemilihan ini saya lakukan berdasarkan pengamatan saya sendiri, jadi sifatnya sangatlah subyektif, karena semua blog yang sudah terdaftar layak diberikan apresiasi. Bagi blog teman-teman yang belum tercantum pada showcse diatas, saya mohon maaf yang sedalam-dalamnya, karena ini hanyalah sebuah penilaian pribadi, jangan terlalu dimasukkan ke hati. </div><br /><div style="text-align: justify;">Saya hanya bisa mengucapkan terima kasih yang sebesar-besarnya atas partipasi teman-teman semua Hasil kerja keras Anda semua dalam memodifikasi sebuah template, sangat berguna bagi saya sebagai bahan inspirasi untuk men-design template di masa yang akan datang. Demikian tadi pidato Ibu Ketua PKK hari ini, jika ada kata-kata yang salah atau kurang berkenan mohon dimaafkan, maklum ibu-ibu jadi suka terpeleset kalau ngomong di depan orang banyak. Akhir kata... nggak boleh protes.<br /><br /><b>NB :</b><br /><ol><li>Daftar ke 10 blog diatas, juga saya posting di <a href="http://www.mastemplate.com/p/showcase-2.html" target="_blank">Showcase 2</a><a href="http://www.mastemplate.com/p/showcase-2.html" target="_blank"> di Mas Template</a>.</li><li>Untuk 4 blog dibawah bisa dilihat pada <a href="http://www.mastemplate.com/p/showcase.html" target="_blank">showcase 1</a> di Mas Template dan <a href="http://www.maskolis.com/2012/06/gallery-showcase-template-creating.html" target="_blank">Gallery Showcase Template Creating Website</a></li><li>Semuanya nanti akan saya publish juga di <a href="http://johnytemplate.blogspot.com/" target="_blank">Johny Template</a>, nunggu yang punya blog dulu.</li><li>Jika ada kesalahan dalam menempatkan link blog diatas, silahkan langsung protes pada kotak komentar di bawah.</li><li>Saya mau nguli lagi......... </li></ol></div><span style="font-size: large;"><b>PENGUMUMAN PENTING </b></span><br /><a href="http://www.maskolis.com/2013/01/forum-diskusi-pengguna-template.html" target="_blank"><b>Klik disini kalau mau tau </b></a>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-38975433331213269712013-01-27T15:50:00.000-08:002013-02-17T16:36:35.246-08:00Terus Gua Mesti Bilang Prett Gitu?<div style="text-align: justify;"><span class="awal">J</span>udulnya pakai Gua biar gaul, meskipun saya sendiri pasti medok kalau bilang gua, tapi nggak apa-apa toh ini kan hanya judul. Baru kali ini setelah hampir setahun lebih saya membuat template menemui sebuah keanehan. Asli saya sendiri saja kaget. Begini ceritanya, tadi saya iseng buka Alexa, itu tuh situs yang suka bikin ranking untuk web atau blog. Terus saya ketik URL <a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank">Johny Wusss template</a>, mata saya terbelalak seperti tidak percaya dengan apa yang barusan saya lihat. <a href="http://www.maskolis.com/2013/01/inilah-template-johny-seo-dan-cepat.html" target="_blank">Johny Wusss template</a>, hanyalah sebuah blog untuk demo dan yang pasti isinyapun juga cuma copas dari <i>Lorem Ipsum sumsum</i> dan sebagainya, tapi genap satu minggu template itu saya publish, peringkatnya sudah mencapai angka ratusan ribu, nongkrong pada rangking 595,531 secara keseluruhan, seperti terlihat pada gambar dibawah (klik untuk lebih jelas):</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://www.alexa.com/siteinfo/johny-wusss.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=johny-wusss.blogspot.com" type="text/javascript"></script></a></div><br /><div style="text-align: justify;">Menurut saya ini bukanlah hal yang wajar, apalagi untuk mencapai rangking segitu dalam 6-7 hari, sebuah blog harus ramai dikunjungi minimal sehari mencapai angka ribuan visitor. Jika saya bandingkan dengan template buatan saya yang lain, misalnya <a href="http://www.maskolis.com/2013/01/orang-tampan-pakai-template-ini.html" target="_blank">Johny Tampan</a> yang sudah 2 minggu lebih saya publish dan termasuk template laris juga. Rangking Alexa <i>Johny Tampan</i> dua kali lipat, masih ada di bawah yaitu pada angka 1 jutaan. Padahal jumlah pageviews total <b>Johny Wuss</b> masih kalah jauh dibanding <b>Johny Tampan</b>, hampir tiga kali lipat lebih banyak <a href="http://www.maskolis.com/2013/01/orang-tampan-pakai-template-ini.html" target="_blank">Johny Tampan template</a>. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://www.alexa.com/siteinfo/johnytampan.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=johnytampan.blogspot.com" type="text/javascript"></script></a></div><br /><div style="text-align: justify;">Selain itu, dilihat dari traffic blog pada Dashboard, mayoritas trafik Johny Wuss berasal dari blog-blog lokal yang dengan tulus ikut membagikan template ini ke pengguna blogger lain. Berbeda dengan Johny Tampan atau template yang lain, trafik blog lebih banyak dari situs-situs penyedia template dari luar, misalnya <b>Allblogtools.com</b> (Maroko), <b>CoolBthemes</b> (India) dan lain-lain. Ya maklum saja, template seperti Johny Wusss tidak menarik untuk dipubish oleh situs penyedia template besar.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSF3Tlo2GBATJ9bHvjUjN4YSS4k3IrFR3_sLCoz_CPpS1VsCErqJaX8uEEQf5D-GQ6N6nCUW9GLOUpM0Aep_bQA3epRyMR35Ds92D7_IU9OfGFW4Z3RskKzh9VYnmlFEHAKuY_0nVyI30/s1600/Pageviews+johny+wuss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny wusss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSF3Tlo2GBATJ9bHvjUjN4YSS4k3IrFR3_sLCoz_CPpS1VsCErqJaX8uEEQf5D-GQ6N6nCUW9GLOUpM0Aep_bQA3epRyMR35Ds92D7_IU9OfGFW4Z3RskKzh9VYnmlFEHAKuY_0nVyI30/s1600/Pageviews+johny+wuss.jpg" /></a></div><br /><div style="text-align: justify;">Terus terang, <b>Johny Wusss</b> template ini saya jadikan eksperimen untuk membuat sebuah template, yang disamping SEO friendly juga visitor friendly. Tapi tentu saja dengan dasar-dasar SEO yang layak dan terbukti ampuh dari <b>Thesis Template buatan master SEO Blog Juragan</b>. Dan ternyata eksperimen saya menunjukkan hasil yang positif, meskipun belum bisa dibilang sempurna paling tidak sudah ada indikasi yang memuaskan.</div><br /><div style="text-align: justify;">Meskipun template ini hanyalah template sederhana, tetapi posisi template ini di search engine selalu saya pantau, karena saya sudah terlanjur mengatakan kepada Anda bahwa template ini <a href="http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html" target="_blank">SEO friendly</a>. Saya tidak mau para pemakai nantinya kecewa karena template ini ternyata tidak seperti yang diharapkan. Baru pada template <b>Johny Wuss</b> ini, saya berani bilang <a href="http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html" target="_blank">template ini SEO friendly</a>, karena memang pada template-template lain sebelumnya masih banyak menggunakan javascript dan image pada <b>Edit HTML</b>, yang tentu saja jika semakin banyak dipasang pada sebuah template, maka semakin jauh dari kriteria SEO.</div><br /><div style="text-align: justify;">Nah itulah kenapa saya nulis ini, bukan bermaksud sombong atau gimana, saya hanya ingin membuktikan bahwa <b>Template Johny Wuss</b> memang SEO Friendly dan terbukti dengan data-data yang sudah saya tulis diatas. Saya hanya tidak mau, meskipun ini template gratis, banyak pengguna yang komplain, dan menuduh kalau saya hanya seorang pembual dengan mengatakan template ini SEO dengan dibumbui sejuta kata-kata hiperbolik yang membuat orang tertarik untuk menggunakan template. Lagipula apa sih untungnya kalau ada orang yang memakai template buatan saya? Paling cuma backlink doank..... makan tuh backlink.</div><br /><div style="text-align: justify;">Bagi Anda yang belum tahu tentang template ini dan ingin mencoba template ini, silahkan lihat dulu demonya di bawah kalau cocok ya dipakai, kalau nggak cocok ya buat dilihat-lihat aja, siapa tau nanti setelah dilihat bisa langsung keluar jin di dalamnya. Akhir kata..... preettttttt mau mandi dulu siap-siap mau berangkat kerja. Kalau ada pertanyaan nanti sore atau malam jawabnya. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny wusss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-wusss.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-wuss.html" target="_blank">Download</a></span></b></div><br /><b><i>NB: </i></b><br />Terima kasih untuk teman-teman blogger yang dengan tulus ikut membagikan template ini kepada yang lain. Saya doakan buat blogger cowok semoga dapet pacar cantik, buat cewek saya doakan dapat pacar yang ganteng seperti saya ini.Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-73981744620873560112013-01-26T06:58:00.000-08:002013-02-17T16:36:35.255-08:00Template Blogger Jelek Untuk Komik<div style="text-align: justify;"><span class="awal">D</span>i malam Minggu yang kembali kelabu ini saya akan membagikan satu buah template lagi untuk teman-teman blogger semua. Kemarin ada yang minta lewat email untuk dibuatkan template untuk komik Narto, terus terang saya bingung seperti apa bentuknya. Si Narto itu kok terkenal banget ya, sampai-sampai minta dibuatkan template, pangkatnya apa sih, anak jenderal ya? Yah namanya juga udah ABG tua jadi nggak tahu menahu soal hobby anak muda jaman sekarang. Okelah daripada jadi beban, nih saya buatkan template buat yang minta kemarin, tapi entah cocok apa enggak saya tidak perduli, yang penting sudah melaksanakan kewajiban dan tugas sebagai warga negara yang baik, yang selalu mengamalkan Pancasila dan UUD 1945...... opo hubungane.</div><br /><div style="text-align: justify;">Template ini namanya <b>Johny Sakit Gigi</b>, seperti usul teman saya kemarin yang pakai nama Arab. Sebenarnya mau saya kasih nama <b>Johny Sudah Sembuh</b>, karena sekarang sudah sembuh sakit giginya, tapi karena ide nama templatenya sangatlah brilian dengan sangat terpaksa template ini saya kasih nama <b>Johny Sakit Gigi</b>. Sakit gigi sangatlah menyiksa perasaan, mau makan nggak enak, mau nonton TV warnanya jadi hitam putih, jadi jangan sampai sakit gigi lagi. Lhah ini bagi-bagi templatenya kapan? Sabar... ini juga mau dibagi.</div><br /><div style="text-align: justify;">Template ini sebenarnya tidak harus untuk komik tapi bisa juga dipakai buat blog gallery atau blog konten biasa. Tampilannya tidak elegan, tidak menarik dan yang pasti jelek banget. Jadi bagi yang Anda yang tertarik dengan template ini mesti diperiksakan ke dokter kejiwaan atau psikiater. Ini malah ngomong mulu, templatenya mana? Ini ada di bawah :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRtkvd9jbxfJX2HuKvAKksVkwLU0NUUpoIwrDiILR2XiB7G0fQkGNPJQrm9vk1cpGXwek_VaEfqXLDGd5srRALyIuF2xxoQYbiDkLoLX8R_e3BuQfOfAcufJDhLUAT1WcAi_X7XeTtck/s1600/Johny+Sakit+Gigi.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRtkvd9jbxfJX2HuKvAKksVkwLU0NUUpoIwrDiILR2XiB7G0fQkGNPJQrm9vk1cpGXwek_VaEfqXLDGd5srRALyIuF2xxoQYbiDkLoLX8R_e3BuQfOfAcufJDhLUAT1WcAi_X7XeTtck/s1600/Johny+Sakit+Gigi.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-sakitgigi.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-sakit-gigi.html" target="_blank">Download</a></span></b></div><br /><b>Slider</b><br /><div style="text-align: justify;">Untuk slider anda tinggal masuk ke <b>Layout</b> kemudian pilih kolom dibawah header yang panjang, terus <b>Add a gadget</b> >> <b>HTML/Javascript</b> masukkan kode berikut ke dalamnya, hati-hati masukinnya, pelan-pelan penuh perasaan jangan kasar nanti bisa lecet :</div><div style="text-align: left;"><blockquote class="tr_bq"><div class='lof-main-wapper' id='slider'><br /><div class='slider-main-outer'><br /><ul class='slider-main-wapper'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br /></script><br /></ul><br /></div><br /><div class='slider-navigator-outer'><br /><ul class='slider-navigator'><br /><script> <br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");<br /></script><br /></ul><br /></div><br /></div><br /><script type='text/javascript'><br />jQuery(document).ready(function($){ <br /> $('#slider').lofJSidernews({<br /> interval:6000,<br /> duration:800,<br /> mainWidth: 530,<br /> navigatorWidth: 100,<br /> maxItemDisplay:4,<br /> easing:'easeOutBounce',<br /> auto:true,<br /> isPreloaded: true<br /> });<br />}); <br /></script></blockquote></div><div style="text-align: justify;">Jika Anda memasukkan kode diatas, slider bekerja menampilkan artikel terbaru blog Anda yang berjumlah 10 artikel. Anda bisa menampilkan slider per label atau kategori dengan menambahkan<b> /-/your label</b> setelah kode <b>default </b>diatas, nanti jadinya seperti ini <b>default/-/your label?max-results</b>. Untuk lebih jelasnya silahkan buka tutorial membuat slider ini pada artikel <a href="http://www.maskolis.com/2013/01/modifikasi-slider-lofslidernews.html" target="_blank"><b>Modifikasi Slider Lofslidernews Makyus</b></a>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Dan untuk kotak feedburner di sebelah related post pada setiap postingan,cari kode ini di <b>Edit HTML</b> (jangan lupa centang <i>Expand Widget Templates</i>) :</div><div style="text-align: left;"><blockquote class="tr_bq"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<b style="color: red;">JohnyTemplate</b>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='<b style="color: red;">JohnyTemplate</b>'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/><br /><input id='botsubbutton' type='submit' value='Submit'/><br/><br /><small>Your information will not be shared. Ever.</small><br/><br /><a href='http://feeds.feedburner.com/<b style="color: red;">blogspot/htbgh</b>'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/<b style="color: red;">blogspot/htbgh</b>?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a><br /></form></blockquote></div>Ganti kode <b style="color: red;">warna merah</b> diatas dengan ID Feedburner blog Anda.<br /><br /><div style="text-align: justify;">Template ini juga sudah tersedia Tag H1 dan H2 pada header blog dan di setiap judul postingan, Anda tidak perlu lagi merubah apapun agar template ini menjadi SEO friendly. So jika tertarik dengan template ini silahkan dipakai, tinggal klik tombol download diatas, anda sudah mendapatkan template ini dan <b>bonus berupa doa dari pembuatnya agar yang makai template ini blognya jadi ramai pengunjung</b>. Jika ada yang kurang jelas atau ada yang mau ditanyakan silahkan isi kotak komentar yang ada dibawah. Sekian dan semoga bermanfaat banget.</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-23811184739750338492013-01-25T04:43:00.000-08:002013-02-17T16:36:35.263-08:00Inilah Tampang Maskolis yang Asli<div style="text-align: justify;"><span class="awal">D</span>ari kemarin banyak dari teman-teman blogger yang nanya, ada yang melalui kolom komentar maupun lewat email, seperti apa sih tampang Maskolis? Ya saya jawab aja, ciri-cirinya saya ini ganteng. Coba ya nanti kalau di jalan ketemu sama orang ganteng, panggil aja "Mas... mass.... mass!!" Saya jamin dia pasti nengok. Selama ini saya memang sengaja menyembunyikan wajah saya di dunia maya, karena saya kawatir jika tampang saya banyak bertebaran dimana-mana, nanti banyak gadis-gadis yang terpesona dan jatuh hati ke saya. Tapi daripada ada yang penasaran, baiklah di kesempatan kali ini saya akan berterus terang kepada teman-teman blogger semua, seperti apa tampang Maskolis yang asli. Sekarang coba perhatikan gambar di bawah ini, pelan-pelan geser mouse-nya jangan langsung lihat gambar yang paling bawah ya...</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64C27hTewq0AErsfo5fmOYLsKTWAFuZ7TYXUxcTR3hlC-VuUxvOGD2tC4AA2gc9A7QpEIkJv-yYEiKvAMGNdX4S-IU0Mow6Kd8joNTwS4_JI3lZO3dxH1Xl77RIaKpLYnB_a9MV7FHVI/s1600/maskolis1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64C27hTewq0AErsfo5fmOYLsKTWAFuZ7TYXUxcTR3hlC-VuUxvOGD2tC4AA2gc9A7QpEIkJv-yYEiKvAMGNdX4S-IU0Mow6Kd8joNTwS4_JI3lZO3dxH1Xl77RIaKpLYnB_a9MV7FHVI/s1600/maskolis1.jpg" /></a></div><br /><div style="text-align: justify;">Gambar diatas jelas bukan saya, masa mukanya kartun? Tapi yang dua orang itu asli, teman saya dari <b>Planet Kenthir</b> namanya <b>Herry FK</b> dan <b>Andreaneda Andrade</b>. Gambar diatas saya pakai buat photo profil Blogger. Sekarang kita lihat gambar dibawah lagi.....</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloFzX7OUqARWUXShzNQsVS8W22GMhj_F8UDKXsIU9VE2nmgzumcwVvap7EHocsPXAkkZybeUJTDHQnBcybZuxKcgJsLVi_WV_k0i0YZL1N2rXjcTnKHimymoWgn0vym0wQMoc07NNAwI/s1600/kompi+ajaib.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="kompi ajaib" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloFzX7OUqARWUXShzNQsVS8W22GMhj_F8UDKXsIU9VE2nmgzumcwVvap7EHocsPXAkkZybeUJTDHQnBcybZuxKcgJsLVi_WV_k0i0YZL1N2rXjcTnKHimymoWgn0vym0wQMoc07NNAwI/s1600/kompi+ajaib.jpg" /></a></div><div style="text-align: center;"><span style="font-size: x-small;">Sumber gambar : https://plus.google.com/117950600521728942551/posts</span></div><br /><div style="text-align: justify;">Ah ini juga bukan, ini salah satu teman Maskolis yang selalu setia berkunjung di blog ini, dia admin dari blog <a href="http://www.kompiajaib.com/" target="_blank">Kompi Ajaib</a>, orangnya baik dan ramah terlihat dari senyum manis yang selalu menghiasi bibirnya. Sekarang dia lagi sibuk bikin blog baru buat mini game online. Perhatikan lagi gambar di bawah, geser mouse sedikit demi sedikit jangan langsung menuju ke bawah......</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlYKxspUsbzBldv2rQPHI1YZDW-dkQG8S5J8EBqdXjPfWY9k2Xvqcfq6fjIJ8k2pvTtz1-Z10ugKpEOhEtgt5d_r8czgFRlzmo8nJNEi2ARM5pJe2SJXMU_USNacN54odty2OEcnmN8s/s1600/panjz.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="panjz online" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlYKxspUsbzBldv2rQPHI1YZDW-dkQG8S5J8EBqdXjPfWY9k2Xvqcfq6fjIJ8k2pvTtz1-Z10ugKpEOhEtgt5d_r8czgFRlzmo8nJNEi2ARM5pJe2SJXMU_USNacN54odty2OEcnmN8s/s1600/panjz.jpg" /></a></div><div style="text-align: center;"><span style="font-size: x-small;">Sumber gambar : https://plus.google.com/102120736668843382412/posts</span></div><br /><div style="text-align: justify;">Ini juga bukan photo Maskolis, karena jauh dari kriteria ganteng..... hahahahahahahaha (nggak boleh marah). Photo diatas, di dunia blogger dikenal sebagai <a href="http://panjz-online.blogspot.com/" target="_blank">Panjz Online</a>, dia juga salah satu pengunjung setia blog ini, di setiap postingan pasti ada dia. Teman yang baik dan humoris, suka memodifikasi template, salah satu templatenya udah nampang di Mas Template. Dilihat dari photonya, mungkin dia dulu punya cita-cita jadi masinis, karena nggak kesampaian akhirnya banting setir ke dunia blogger. Sekarang perhatikan baik-baik photo orang di bawah ini.... jreng.... jreng.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Nah ini baru bener, inilah tampang Maskolis yang asli, Anda harus percaya kalau photo dibawah adalah Maskolis, pilihannya hanya ada dua, percaya dan percaya banget. Semua ciri-ciri fisik pas banget, photo dibawah diambil waktu Maskolis lagi dinner bareng sama Angelina Jolie di sebuah kafe di kawasan Holywood. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudPZFK0Q8_Em25S0Em1cTDYTCEiKdV4DWuTDUo3KDLNdZBikw_40ZH1vUYh-uVhYZpbbP8P1MC62t7XTHlfFCFTG8PdoOJPJamql_4ijSHzhA0kdd3f9lNEWNPCTXWIUAo9JFQlN_Tgk/s1600/maskolis.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudPZFK0Q8_Em25S0Em1cTDYTCEiKdV4DWuTDUo3KDLNdZBikw_40ZH1vUYh-uVhYZpbbP8P1MC62t7XTHlfFCFTG8PdoOJPJamql_4ijSHzhA0kdd3f9lNEWNPCTXWIUAo9JFQlN_Tgk/s320/maskolis.jpg" width="320" /></a></div><div style="text-align: center;"><span style="font-size: x-small;">Sumber gambar : http://www.scenicreflections.com</span></div><br /><div style="text-align: justify;">Jangan percaya tulisan diatas, asli HOAXXXX...... validitas dan akurasinya 0%, karena ini hanya tulisan iseng sore hari sambil nungguin tukang nasi goreng lewat, dan untuk Google jangan diindeks tulisan ini dihalaman search engine-nya. Nanti kalau yang punya tampang ganteng diatas baca artikel ini, saya bisa dituntut ke pengadian karena pencemaran wajah tampan.</div><br /><div style="text-align: justify;">Tulisan diatas bisa juga menjadi sebuah contoh bagi teman-teman blogger semua, bagaimana membuat sebuah branding agar blog Anda mempunyai ciri khas tersendiri. Buatlah selingan-selingan artikel unik dari beberapa artikel unggulan yang Anda tawarkan kepada pembaca. Setelah itu, serahkan kepada pembaca sendiri untuk menilainya.</div><br />Buat yang punya photo diatas, mohon maaf kalau nggak minta ijin dulu pasang photo di artikel ini. Pokoknya harus boleh, boleh nggak boleh harus boleh..... hahahahahahahaha. Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-33159769770761903622013-01-24T03:16:00.000-08:002013-02-17T16:36:35.349-08:00Modifikasi Slider Lofslidernews Otomatis Maknyus<div style="text-align: justify;"><span class="awal">K</span>ali ini saya akan berikan satu lagi tutorial membuat slider otomatis dari Lofslidernews. Slider ini buatan <b>landofcoder.com</b>, demo aslinya bisa dilihat <b><a href="http://www.landofcoder.com/demo/jquery/lofslidernews/index2.html" target="_blank">disini</a></b>. <b>Abu Farhan</b>, seorang master blogger Indonesia juga pernah membuat slider ini yang bekerja berdasarkan popular post, tapi kekurangannya jika gambar yang dipakai ukurannya kecil atau ukuran tingginya lebih besar, gambar pada slider seperti kegenjet dan kurang enak dilihat. Disini saya hanya memodifikasi agar gambar terlihat simetris meskipun ukuran tinggi lebih besar, tapi tetap harus menggunakan gambar dengan ukuran besar jika ingin hasil yang lebih bagus. Slider ini juga saya buat agar bisa menampilkan artikel terbaru juga per kategori atau label.</div><br /><div style="text-align: justify;">Sekilas bentuk dari slider ini seperti <a href="http://www.maskolis.com/2012/04/membuat-slider-otomatis-sporty-magazine.html" target="_blank">slider yang ada pada template Sporty Magazine2</a> dari <b>Borneo Templates</b>. Banyak perbedaan mendasar dari kedua slider ini, disamping kode-kode pembentuk slider, Lofslidernews mampu menampilkan berapapun post yang ingin Anda tampilkan pada slider, karena gambar pagination kecil bergerak dinamis dari atas kebawah kemudian kembali lagi keatas menggunakan efek Easing. Gerak dari gambar utama pada slider ini pun dari kanan ke kiri seperti pada Looped Slider yang akan saya bahas lain waktu.Untuk lebih jelasnya silahkan lihat demonya dibawah :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgmsAKweCw7De6__R0Gl3uEp6iVIT_wy7jbYgXguG-98v8yfPnqBeWVJKjg4QTeo03axxhbW7aIjPqYyDnG-p-3OjWXlq1EQ-p9u3O22zwMObVfzjQ13LnigHsoE3tHn8No8lLE7gPOI/s1600/Lofslidernews.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="lofslidernews" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgmsAKweCw7De6__R0Gl3uEp6iVIT_wy7jbYgXguG-98v8yfPnqBeWVJKjg4QTeo03axxhbW7aIjPqYyDnG-p-3OjWXlq1EQ-p9u3O22zwMObVfzjQ13LnigHsoE3tHn8No8lLE7gPOI/s400/Lofslidernews.jpg" width="400" /></a></div><br /><div style="text-align: center;"><a href="http://johnydarkmag.blogspot.com/" target="_blank"><span style="font-size: large;"><b>DEMO</b></span></a></div><br /><div style="text-align: justify;">Sebelum masuk ke tutorial membuat slider ini, saya mau kasih tau dulu kalau slider ini agak ribet dalam pengaturan panjang dan lebar image, baik yang besar maupun yang kecil (pagination). Juga slider ini lebih banyak menggunakan kode script, yang bagi blog prioritas SEO akan sangat merugikan. Tapi semua itu bisa diatasi dengan mengkompres dan meringkas kode-kode script pada slider di Google Code.</div><br /><div style="text-align: justify;">Oke, jika Anda berminat perhatikan baik-baik tutorial cara pemasangan slider ini sebagai berikut :</div><ol><li>Setelah masuk ke dashboard blogger, pilih blog yang akan dipasang slider ini.</li><li>Kemudian masuk ke <b>Template</b> >> <b>Edit HTML</b> (centang kotak <i>expand widget templates</i>)</li><li>Di back up dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.</li><li><div style="text-align: justify;">Pertama yang harus Anda lakukan adalah membuat satu buah kolom kosong diatas blog post, seperti gambar di bawah ini (jika pada template yang Anda pakai sudah terdapat satu kolom kosong seperti gambar dibawah, langkah ini tidak perlu dilakukan) : </div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-44xeanU16uE/TvhD31IBm4I/AAAAAAAAEU8/vus9gZq5AkA/s1600/top+colomn.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="lofslidernews" border="0" src="http://3.bp.blogspot.com/-44xeanU16uE/TvhD31IBm4I/AAAAAAAAEU8/vus9gZq5AkA/s1600/top+colomn.jpg" /></a></div><br />Caranya, letakkan kode berikut di atas kode <b style="color: #cc0000;">]]></b:skin></b><br /><pre class="Css" name="code">/* Slide Content<br />----------------------------------------------- */<br />.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;<br />word-wrap: break-word; overflow: hidden;} <br />.slide {color: #666666;line-height: 1.3em;}<br />.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}<br />.slide li {margin:0;padding-top:0;<br />padding-right:0;padding-bottom:.25em;<br />padding-left:0px;text-indent:0px;line-height:1.3em;}<br />.slide .widget {margin:0px 0px 6px 0px;}</pre><br /><div style="text-align: justify;">Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <b style="color: red;"><div id='main-wrapper'></b> kemudian letakkan kode berikut dibawahnya :</div><pre class="Css" name="code"><b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <div id='slide-wrapper'><br /><b:section class='slide' id='slide' preferred='yes'/><br /> </div><br /></b:if> </pre></li><li><div style="text-align: justify;">Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke <b>Edit HTML</b>. Kemudian masukkan kode berikut di atas kode <b style="color: #cc0000;">]]></b:skin> </b>: </div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">/* Lofslidernews */<br />#slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);<br />border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;<b style="color: #cc0000;">width:600px;height:298px;</b>}<br />.slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}<br />ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-MJXqkyVfSWhzKIDNfNmkjRtfxWZXfTj4vmeHpJRoa50pNdzW1tlQrqv7upRwdqzshocWt5EYTXnQSJuMPyMbbH1aawsrxnO_z98uEREJMn6ZF0xJK7gN43KNW0LBrP2fbqAnlCkikA5/s1600/transparant.png);padding:10px}<br />ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}<br />ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}<br />ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}<br />ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}<br />ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}<br />.slider-opacity li{position:absolute;top:0;left:0;float:inherit}<br />ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}<br />ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}<br />ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}<br />.slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}<br />.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}<br />.slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}<br />.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}<br />.slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}<br />.slider-navigator li.active img{border:#eee solid 1px}<br />.slider-navigator li.active h5{color:#0178d3}</div></div></div><div style="text-align: justify;">Perhatikan kode <b style="color: red;">warna merah</b> diatas, itu dalah ukuran panjang dan lebar slider, silahkan disesuaikan dengan ukuran pada template Anda. Pada demo yang saya gunakan panjang main-wrapper <b>630px</b> tapi karena ada padding slider sebesar <b>10px</b>, ukuran yang saya gunakan untuk slider hanya <b>600px</b>.</div><br /></li><li>Masih di <b>Edit HTML</b>, masukkan kode script berikut ini diatas <b style="color: #cc0000;"></head</b><b style="color: #cc0000;">></b> : <div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></span><br /><script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br /><br />(function($) {<br /><br />var types = ['DOMMouseScroll', 'mousewheel'];<br /><br />$.event.special.mousewheel = {<br /> setup: function() {<br /> if ( this.addEventListener )<br /> for ( var i=types.length; i; )<br /> this.addEventListener( types[--i], handler, false );<br /> else<br /> this.onmousewheel = handler;<br /> },<br /> <br /> teardown: function() {<br /> if ( this.removeEventListener )<br /> for ( var i=types.length; i; )<br /> this.removeEventListener( types[--i], handler, false );<br /> else<br /> this.onmousewheel = null;<br /> }<br />};<br /><br />$.fn.extend({<br /> mousewheel: function(fn) {<br /> return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");<br /> },<br /> <br /> unmousewheel: function(fn) {<br /> return this.unbind("mousewheel", fn);<br /> }<br />});<br /><br /><br />function handler(event) {<br /> var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;<br /> <br /> event = $.event.fix(event || window.event);<br /> event.type = "mousewheel";<br /> <br /> if ( event.wheelDelta ) delta = event.wheelDelta/120;<br /> if ( event.detail ) delta = -event.detail/3;<br /> <br /> // Add events and delta to the front of the arguments<br /> args.unshift(event, delta);<br /><br /> return $.event.handle.apply(this, args);<br />}<br /><br />})(jQuery);<br /><br />/**<br /> * @version $Id: $Revision<br /> * @package jquery<br /> * @subpackage lofslidernews<br /> * @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.<br /> * @website http://landofcoder.com<br /> * @license This plugin is dual-licensed under the GNU General Public License and the MIT License <br /> */<br />// JavaScript Document<br />(function($) {<br /> $.fn.lofJSidernews = function( settings ) {<br /> return this.each(function() {<br /> // get instance of the lofSiderNew.<br /> new $.lofSidernews( this, settings ); <br /> });<br /> }<br /> $.lofSidernews = function( obj, settings ){<br /> this.settings = {<br /> direction : '',<br /> mainItemSelector : 'li',<br /> navInnerSelector : 'ul',<br /> navSelector : 'li' ,<br /> navigatorEvent : 'click',<br /> wapperSelector: '.slider-main-wapper',<br /> interval : 4000,<br /> auto : true, // whether to automatic play the slideshow<br /> maxItemDisplay : 5,<br /> startItem : 0,<br /> navPosition : 'vertical', <br /> navigatorHeight : 60,<br /> navigatorWidth : 210,<br /> duration : 600,<br /> navItemsSelector : '.slider-navigator li',<br /> navOuterSelector : '.slider-navigator-outer' ,<br /> isPreloaded : true,<br /> easing : 'easeInOutQuad'<br /> } <br /> $.extend( this.settings, settings ||{} ); <br /> this.nextNo = null;<br /> this.previousNo = null;<br /> this.maxWidth = this.settings.mainWidth || 600;<br /> this.wrapper = $( obj ).find( this.settings.wapperSelector ); <br /> this.slides = this.wrapper.find( this.settings.mainItemSelector );<br /> if( !this.wrapper.length || !this.slides.length ) return ;<br /> // set width of wapper<br /> if( this.settings.maxItemDisplay > this.slides.length ){<br /> this.settings.maxItemDisplay = this.slides.length; <br /> }<br /> this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;<br /> this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector ); <br /> this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;<br /> this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );<br /> <br /> if( this.settings.navPosition == 'horizontal' ){ <br /> this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );<br /> this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );<br /> this.navigatorOuter.height( this.settings.navigatorHeight );<br /> <br /> } else {<br /> this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight ); <br /> <br /> this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );<br /> this.navigatorOuter.width( this.settings.navigatorWidth );<br /> } <br /> this.navigratorStep = this.__getPositionMode( this.settings.navPosition ); <br /> this.directionMode = this.__getDirectionMode(); <br /> <br /> <br /> if( this.settings.direction == 'opacity') {<br /> this.wrapper.addClass( 'slider-opacity' );<br /> $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);<br /> } else { <br /> this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );<br /> }<br /><br /> <br /> if( this.settings.isPreloaded ) {<br /> this.preLoadImage( this.onComplete );<br /> } else {<br /> this.onComplete();<br /> }<br /> <br /> }<br /> $.lofSidernews.fn = $.lofSidernews.prototype;<br /> $.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;<br /> <br /> $.lofSidernews.fn.extend({<br /> <br /> startUp:function( obj, wrapper ) {<br /> seft = this;<br /><br /> this.navigatorItems.each( function(index, item ){<br /> $(item).click( function(){<br /> seft.jumping( index, true );<br /> seft.setNavActive( index, item ); <br /> } );<br /> $(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );<br /> })<br /> this.registerWheelHandler( this.navigatorOuter, this );<br /> this.setNavActive(this.currentNo );<br /> <br /> if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){<br /> this.registerButtonsControl( 'click', this.settings.buttons, this );<br /><br /> }<br /> if( this.settings.auto ) <br /> this.play( this.settings.interval,'next', true );<br /> <br /> return this;<br /> },<br /> onComplete:function(){<br /> setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );<br /> },<br /> preLoadImage:function( callback ){<br /> var self = this;<br /> var images = this.wrapper.find( 'img' );<br /> <br /> var count = 0;<br /> images.each( function(index,image){ <br /> if( !image.complete ){ <br /> image.onload =function(){<br /> count++;<br /> if( count >= images.length ){<br /> self.onComplete();<br /> }<br /> }<br /> image.onerror =function(){ <br /> count++;<br /> if( count >= images.length ){<br /> self.onComplete();<br /> } <br /> }<br /> }else {<br /> count++;<br /> if( count >= images.length ){<br /> self.onComplete();<br /> } <br /> }<br /> } );<br /> },<br /> navivationAnimate:function( currentIndex ) { <br /> if (currentIndex <= this.settings.startItem <br /> || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {<br /> this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;<br /> if (this.settings.startItem < 0) this.settings.startItem = 0;<br /> if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {<br /> this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;<br /> }<br /> } <br /> this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), <br /> {duration:500, easing:'easeInOutQuad'} ); <br /> },<br /> setNavActive:function( index, item ){<br /> if( (this.navigatorItems) ){ <br /> this.navigatorItems.removeClass( 'active' );<br /> $(this.navigatorItems.get(index)).addClass( 'active' ); <br /> this.navivationAnimate( this.currentNo ); <br /> }<br /> },<br /> __getPositionMode:function( position ){<br /> if( position == 'horizontal' ){<br /> return ['left', this.settings.navigatorWidth];<br /> }<br /> return ['top', this.settings.navigatorHeight];<br /> },<br /> __getDirectionMode:function(){<br /> switch( this.settings.direction ){<br /> case 'opacity': this.maxSize=0; return ['opacity','opacity'];<br /> default: this.maxSize=this.maxWidth; return ['left','width'];<br /> }<br /> },<br /> registerWheelHandler:function( element, obj ){ <br /> element.bind('mousewheel', function(event, delta ) {<br /> var dir = delta > 0 ? 'Up' : 'Down',<br /> vel = Math.abs(delta);<br /> if( delta > 0 ){<br /> obj.previous( true );<br /> } else {<br /> obj.next( true );<br /> }<br /> return false;<br /> });<br /> },<br /> registerButtonsControl:function( eventHandler, objects, self ){ <br /> for( var action in objects ){ <br /> switch (action.toString() ){<br /> case 'next':<br /> objects[action].click( function() { self.next( true) } );<br /> break;<br /> case 'previous':<br /> objects[action].click( function() { self.previous( true) } );<br /> break;<br /> }<br /> }<br /> return this; <br /> },<br /> onProcessing:function( manual, start, end ){ <br /> this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);<br /> this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length); <br /> return this;<br /> },<br /> finishFx:function( manual ){<br /> if( manual ) this.stop();<br /> if( manual && this.settings.auto ){ <br /> this.play( this.settings.interval,'next', true );<br /> } <br /> this.setNavActive( this.currentNo ); <br /> },<br /> getObjectDirection:function( start, end ){<br /> return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})"); <br /> },<br /> fxStart:function( index, obj, currentObj ){<br /> if( this.settings.direction == 'opacity' ) { <br /> $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );<br /> $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );<br /> }else {<br /> this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );<br /> }<br /> return this;<br /> },<br /> jumping:function( no, manual ){<br /> this.stop(); <br /> if( this.currentNo == no ) return; <br /> var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");<br /> this.onProcessing( null, manual, 0, this.maxSize )<br /> .fxStart( no, obj, this )<br /> .finishFx( manual ); <br /> this.currentNo = no;<br /> },<br /> next:function( manual , item){<br /><br /> this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length); <br /> this.onProcessing( item, manual, 0, this.maxSize )<br /> .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )<br /> .finishFx( manual );<br /> },<br /> previous:function( manual, item ){<br /> this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;<br /> this.onProcessing( item, manual )<br /> .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )<br /> .finishFx( manual ); <br /> },<br /> play:function( delay, direction, wait ){ <br /> this.stop(); <br /> if(!wait){ this[direction](false); }<br /> var self = this;<br /> this.isRun = setTimeout(function() { self[direction](true); }, delay);<br /> },<br /> stop:function(){ <br /> if (this.isRun == null) return;<br /> clearTimeout(this.isRun);<br /> this.isRun = null; <br /> }<br /> })<br />})(jQuery)<br /><br /> //]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TdFK5sJ1iuU_ZccTKvmeuVLLMpgbsgJfrmr-L3BkdYz7egC08lkEEsgTuleHYMLsNKBrWUeIOgpLxgwD3asg2SF7cFo6r8kkiLn6eQddVDOKzVkqHwMCipwccQdp4ZjxYMEJkBJkUP4/s1600/no+image.jpg";<br />showRandomImg = true;<br />aBold = true;<br />summaryPost = 70;<br />summaryTitle = 20;<br /><br />numposts = 10;<br /><br />function removeHtmlTag(strx,chop){<br /> var s = strx.split("<");<br /> for(var i=0;i<s.length;i++){<br /> if(s[i].indexOf(">")!=-1){<br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br /> }<br /> }<br /> s = s.join("");<br /> s = s.substring(0,chop-1);<br /> return s;<br />}<br /><br />function showrecentposts(json) {<br /> j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br /> img = new Array();<br /><br /> for (var i = 0; i < numposts; i++) {<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br /> var pcm;<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> <br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> pcm = entry.link[k].title.split(" ")[0];<br /> break;<br /> }<br /> }<br /> <br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;}<br /> else<br /> if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;}<br /> else var postcontent = "";<br /> <br /> postdate = entry.published.$t;<br /> <br /> if(j>imgr.length-1) j=0;<br /> img[i] = imgr[j];<br /> <br /> s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br /> if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br /> //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br /> var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br /> var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br /><br /> var day = postdate.split("-")[2].substring(0,2);<br /> var m = postdate.split("-")[1];<br /> var y = postdate.split("-")[0];<br /><br /> for(var u2=0;u2<month.length;u2++){<br /> if(parseInt(m)==month[u2]) {<br /> m = month2[u2] ; break;<br /> }<br /> }<br /><br /> var daystr = day+ ' ' + m + ' ' + y ;<br /> <br /> var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>'; <br /> document.write(trtd); <br /> <br /> j++;<br /> }<br /> <br />}<br /><br /><br />function showrecentposts1(json) {<br /> j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br /> img = new Array();<br /> <br /> for (var i = 0; i < numposts; i++) {<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br /> var pcm;<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> <br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> pcm = entry.link[k].title.split(" ")[0];<br /> break;<br /> }<br /> }<br /> <br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;}<br /> else<br /> if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;}<br /> else var postcontent = "";<br /> <br /> postdate = entry.published.$t;<br /> <br /> if(j>imgr.length-1) j=0;<br /> img[i] = imgr[j];<br /> <br /> s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br /> if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br /> //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br /> var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br /> var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br /><br /> var day = postdate.split("-")[2].substring(0,2);<br /> var m = postdate.split("-")[1];<br /> var y = postdate.split("-")[0];<br /><br /> for(var u2=0;u2<month.length;u2++){<br /> if(parseInt(m)==month[u2]) {<br /> m = month2[u2] ; break;<br /> }<br /> }<br /><br /> var daystr = day+ ' ' + m + ' ' + y ;<br /> <br /> var trtd = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>'; <br /> document.write(trtd); <br /> <br /> j++;<br /> }<br /> <br />}<br /><br /> //]]><br /></script> </div></div></div><div style="text-align: justify;">Perhatikan kode script <span style="color: #cc0000;">warna merah</span> paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan. <b>numposts:10;</b> adalah jumlah post yang tampil pada slider</div></li><li><div style="text-align: justify;">Save templates lagi, pemasangan kode-kode di <b>Edit HTML</b> selesai. Sekarang Anda kembali ke <b>Layout/Tata Letak</b>. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik <b>Add a Gadget</b> >> <b>HTML/Javascript</b> : </div><div style="text-align: left;"><blockquote class="tr_bq"><div class='lof-main-wapper' id='slider'><br /><div class='slider-main-outer'><br /><ul class='slider-main-wapper'><br /><script> <br />document.write("<script src=\"/feeds/posts/default/-/<b style="color: red;">misteri</b>?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br /></script><br /></ul><br /></div><br /><div class='slider-navigator-outer'><br /><ul class='slider-navigator'><br /><script> <br />document.write("<script src=\"/feeds/posts/default/-/<b style="color: red;">misteri</b>?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");<br /></script><br /></ul><br /></div><br /></div><br /><script type='text/javascript'><br />jQuery(document).ready(function($){ <br /> $('#slider').lofJSidernews({<br /> interval:6000,<br /> duration:800,<br /> mainWidth: 405,<br /> navigatorWidth: 200,<br /> maxItemDisplay:5,<br /> easing:'easeInOutQuad',<br /> auto:true,<br /> isPreloaded: false<br /> });<br />}); <br /></script></blockquote></div><i>Keterangan :</i><br />Tulisan <b style="color: red;">warna merah</b> (misteri) adalah label yang saya masukkan pada slider. Silahkan diganti dengan label yang ingin ditampilkan. </li><li>Terakhir <b>save</b>, selesai.</li></ol><div style="text-align: justify;">Agak rumit ya? pelan-pelan nanti juga bisa. Baca tutorialnya dengan teliti jangan ada yang kelewatan karena menurut saya ini agak sedikit rumit dalam pengaturan panjang dan lebar. Jangan lupa kopinya diminum dulu, nanti keburu dingin. Jika masih ada yang kurang jelas, bisa ditanyakan pada kolom komentar dibawah. Itu tadi tutorial membuat slider Lofslidernews kali ini, silahkan dicoba dan semoga bermanfaat.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>NB :</b></div><div style="text-align: justify;">To <b>Assal Ali</b>, I will make tutorial slider in Johny Jogos template for you, next after this post</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-53391724566311515342013-01-22T08:06:00.000-08:002013-02-17T16:36:35.440-08:00Artikel ini enaknya dikasih judul apa?<div style="text-align: justify;"><span class="awal">T</span>adi saya baru saja baca artikel dari salah satu blog teman, dari artikel yang saya baca ternyata ada juga orang yang suka kloning template blogger dari template berbayar atau tampilan blogger terkenal. Hmmm... ada-ada saja, kalau kloning template blogger dari platform lain, semisal Wordpress atau istilah kerennya convert template banyak saya temui, tapi kalau kloning template blogger, baru kali ini saya dengar. Yah perilaku blogger memang beda-beda, saya pribadi lebih menghargai sebuah template, meskipun banyak orang yang bilang itu template jelek tapi hasil dari ide dan gagasan sendiri daripada sebuah template yang wah tapi hasil kloning dari template lain.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Tapi di artikel ini saya bukan sedang menghakimi atau membuat penilaian subyektif tentang perilaku blogger tertentu. Itu urusan mereka apapun alasannya, mau kloning template atau mau copy paste tulisan orang lain saya pribadi nggak begitu perduli. Seperti kata salah satu master blogger Indonesia, <b>Masdoyok</b> sebaiknya kita berkonsentrasi membuat artikel yang bermanfaat bagi pembaca, ketimbang sibuk <i>marah-marah</i> atau menggerutu kelakuan blogger lain. Saya lebih cuka bercermin tiap pagi melihat kondisi diri, daripada melihat orang lain dengan segala kekurangannya. Mari kita lupakan semua itu, kita manusia pasti pernah punya salah, pasti ada kekurangan, semua ilmu yang kita punya semua berasal dari Dzat Yang Maha Agung. Otak yang kita gunakan untuk berpikir pun hasil serapan dari sana sini, bukan murni ciptaan atau hasil karya pribadi.</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8AWcpdte8GAtvHZrLxAwJp4LvP0IRYlP1Bf4pkjSQzUmZsbG4ubnHMCMrq82yjsgZ7rpxN6fhZqfLnq9IksCa4dK3AI6W4mKMrMGHe7MnGYkzrpUl46EPz1rYTb5iRxIINupUo31ob4/s1600/Norah+Jones.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="norah jones" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8AWcpdte8GAtvHZrLxAwJp4LvP0IRYlP1Bf4pkjSQzUmZsbG4ubnHMCMrq82yjsgZ7rpxN6fhZqfLnq9IksCa4dK3AI6W4mKMrMGHe7MnGYkzrpUl46EPz1rYTb5iRxIINupUo31ob4/s1600/Norah+Jones.jpg" /></a></div><div style="text-align: center;"><i>Sumber gambar : http://garitodeblues.blogspot.com/ </i></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Kembali ke masalah template, sebuah blog menjadi besar dan terkenal, bukan karena tampilan atau template yang dipakai. Tapi lebih ke konten atau artikel yang ditawarkan kepada pembaca. Percuma jika Anda memakai template yang paling bagus sedunia tapi artikel yang ditulis hanya itu-itu saja, sudah banyak orang yang menulis topik yang sama. Karena mayoritas pengunjung pasti mencari informasi sesuai keinginannya, bukan untuk melihat tampilan blog seperti apa. Memang ada kepuasan tersendiri bagi pemilik blog jika mempunyai tampilan yang atraktif dan menarik, tapi itu relatif. Tidak semua blogger perpendapat demikian, tergantung motivasi awal orang membuat blog. Kesimpulannya pilihan template nomor sekian, konten yang utama.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Seperti yang pernah saya tulis sebelumnya, bagus atau tidaknya tampilan sebuah blog itu terlalu subyektif, anda bisa saja mengatakan blog Anda sudah paling bagus, paling cepat atau paling yang lain. Di lain pihak ada orang yang mengatakan blog Anda kurang menarik, kurang informatif, terus anda mau bilang apa? Mau marah-marah, ngamuk-ngamuk? Banyak sekali orang membuat blog karena tidak fokus pada tujuan awal, sehingga banyak dari mereka yang gagal. Gagal karena hanya fokus pada tampilan blog, memodifikasi sesuai keinginan sehingga lupa menulis artikel yang bermutu. Juga gagal menciptakan sebuah branding sehingga kalah bersaing dengan blog lain. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Orang membuat blog seperti membuka sebuah toko, kenyamanan sebuah toko memang diperlukan. Tapi jika Anda hanya menawarkan kenyamanan tanpa dibarengi dengan dagangan bermutu yang banyak dicari konsumen, apa Anda yakin toko Anda akan bisa bertahan? Yang pasti meskipun fasilitas AC dan kamar kecil modern terpasang di setiap sudut ruangan, toko Anda akan semakin jarang dikunjungi pembeli, karena dagangan yang Anda tawarkan kurang variatif dan mutunya kurang bagus. Disinilah sebuah branding sangat diperlukan, anda dituntut mampu menciptakan sebuah ciri khas atau branding untuk toko yang Anda kelola.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Saya berikan contoh yang mudah, toko <b>Rohis Facebook</b> hanya berukuran 6 x 10 m persegi, tetangganya <b>Kompi Ajaib</b>, mempunyai sebuah toko yang luasnya 3 kali lipat, fasilitasnya lengkap dan sarana pendukung lainpun juga tersedia. Mereka berdua menawarkan barang dagangan yang hampir sama. Meskipun begitu toko <b>Rohis Facebook</b> terlihat lebih ramai dikunjungi pembeli. Usut punya usut ternyata <b>Rohis Facebook</b> lebih ramah dan supel dalam melayani pembeli, interaksi antara penjual dan pembeli lebih hidup. Siapapun yang menjadi pembeli mempunyai posisi tawar yang sama, entah itu orang kaya ataupun orang melarat semua diperlakukan dengan sama. Semakin hari, langganannya semakin bertambah banyak. Di lain pihak, meskipun dengan fasilitas mewah, toko <b>Kompi Ajaib</b> keliatan sepi pembeli. <b>Kompi Ajaib</b> terlalu kaku kepada pengunjung, dia memposisikan dirinya sebagai orang yang dibutuhkan, pelayanan kepada pengunjung terlihat diskriminatif. <i>Cerita diatas hanya contoh belaka, nama dan pelaku sengaja memang dibuat demikian... biar yang punya nama memberikan reaksi... hahahahahaha </i></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Dari analogi diatas, seorang blogger harus mampu menciptakan sebuah image atau opini publik yang positif. Memperlakukan setiap pengunjung sama, karena setiap pengunjung mempunyai latar belakang yang berbeda-beda. Membuat interaksi lebih hidup, sehingga pengujung betah dan kepingin lagi untuk kembali ke blog yang dikelolanya. Bayangkan jika Anda seorang konsumen di sebuah toko, dilayani dengan ketus oleh penjualnya, pasti anda akan berpikir dua kali untuk kembali membeli lagi barang di tokonya. Sebisa mungkin perlakukanlah mereka (pengunjung) pada posisi sama, jangan pernah ada stratifikasi blogger, pemula, senior, master atau lainnya. Saya paling benci jika menemui sebuah artikel yang judulnya ditamabahi dengan embel-embel "Pemula", misalnya tutorial blog untuk pemula, membuat blog bagi pemula dan lain-lain. Anjrittt... pengin muntah saya baca judulnya.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Itu tadi adalah salah satu contoh branding positif yang akan membuat pengunjung betah berlama-lama di blog Anda. Banyak sekali cara membuat branding yang lain, misalnya menawarkan artikel-artikel yang dibumbui dengan humor-humor segar, membuat judul artikel yang mengundang pembaca, atau menawarkan kepada pengunjung untuk berpartisipasi menulis di blog Anda. Silahkan cari sendiri branding yang ingin ditawarkan, jadilah Anda sebagai blogger yang berbeda dari yang lain. Ingat <b>Norman K</b> seorang polisi bisa terkenal karena dia berani tampil beda, akun twitter pseudeoanonym <b>@triomacan2000</b> menjadi trending topic karena berani membuka kebobrokan para pejabat (meskipun kebenarannya diragukan) dan masih banyak lagi contoh orang-orang atau blogger yang banyak dicari karena perilakunya yang berbeda dari yang lain.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Kesimpulan dari artikel diatas adalah, daripada sibuk ngurusi kelakuan blogger lain lebih baik kita fokus ke diri sendiri. Ambil kaca dan bercermin, apakah kita sudah menjadi seorang blogger yang bermanfaat bagi orang lain, apakah kita sudah menjadi seorang blogger yang cukup sempurna sehingga kekurangan dan kelemahan kita tertutup oleh kelakuan negatif blogger lain. Tidak ada blogger yang sempurna, semua pasti punya kekurangan. Mari kita ciptakan sebuah ciri khas bagi blog yang kita kelola, jadikanlah blog kita berbeda, dan satu lagi jangan terlalu fokus hanya pada tampilan blog tapi perhatikan juga konten atau artikel-artikel yang Anda tawarkan kepada pembaca. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Ini hanya tulisan iseng yang berisi pendapat subyektif saya, silahkan setuju atau sama sekali tidak setuju, karena setiap orang punya pendapat masing-masing, dan mohon maaf jika ada kata-kata yang menyinggung perasaan pembaca. Sekian dan semoga tidak bermanfaat...... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div><br /><div style="color: blue;"><b>Paling banyak dibaca orang kenthir : </b></div><ol><li><a href="http://www.maskolis.com/2011/04/cara-membuat-blog-yang-menarik.html" target="_blank">Cara Membuat Blog Yang Menarik</a> </li><li><a href="http://www.maskolis.com/2011/05/bagaimana-cara-memilih-nama-blog-yang.html" target="_blank">Bagaimana Cara Memilih Nama Blog Yang Baik?</a> </li><li><a href="http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html" target="_blank">Bagaimana Agar Template Anda SEO Friendly?</a> </li><li><a href="http://kauman0506.blogspot.com/2011/04/mengapa-komentar-tidak-harus-dibalas.html" target="_blank">Mengapa Komentar Tidak Harus Dibalas</a></li></ol>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-54843986738711705832013-01-20T13:28:00.000-08:002013-02-17T16:36:35.529-08:00Inilah Template Johny SEO dan Cepat<div style="text-align: justify;"><span class="awal">D</span>aripada jadi beban, karena kemarin banyak yang minta dibuatkan template yang <b>sederhana, SEO friendly dan valid HTML</b>. Sambil nunggu adzan Subuh, karena semalam tidur agak sore jadi bisa bangun pagi, langsung menyalakan komputer dan bikin template permintaan. Template ini termasuk template yang paling cepat loading diantara template-template lain yang pernah saya buat. Dan juga paling cepat proses pembuatannya, hanya 1 jam lebih dikit, meskipun hanya 1 jam tapi bikinnya nggak asal-asalan. Semua kondisi SEO dari template blogger paling SEO yang pernah ada di muka bumi, sudah saya pasang semua pada template ini. </div><br /><div style="text-align: justify;">Template ini namanya <b>Johny Wusss</b>, karena loadingnya menurut pengamatan saya sudah kriteria cepat, tanpa ada kode CSS atau javascript yang dikompres. Nanti silahkan dicek sendiri kecepatan template ini, menurut saya sih sudah cepat, tapi kalau menurut teman-teman belum cepat yang tidak usah dipakai, cari template yang lebih cepat lagi di Google banyak kok. Template ini juga termasuk <a href="http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html" target="_blank">SEO friendly</a> dan visitor friendly, karena tag H1 dan H2 juga sudah terpasang, bisa di cek juga nanti. <a href="http://www.maskolis.com/2013/01/modifikasi-3-template-valid-html5.html" target="_blank">Validasi HTML5</a> cuma error 1 karena kode CSS yang saya letakkan pada widget komentar yang ada di sidebar. Tapi sayangnya ini template biasa, bukan template responsif karena saya belum bisa membuat template responsif, selama ini saya belum ada waktu buat belajar mendalami responsif layout. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny wusss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg30rcnJC7LXCmPFfvwsIFPn3rz5KaTGCjZ1Eh7NNtMWkIgVtmTy-8TlPH3uhO5SJpw1kKbVEpdnT7xLQhtCaYpOSAcQpD0LwCg9Rhe_f_w8AS0JUr9cRPI_9g5QuczPcLAV_LIkrFSthE/s1600/Johny+Wusss.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-wusss.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-wuss.html" target="_blank">Download</a></span></b></div><br /><b>Fitur :</b><br /><ol><li>Simple template blogger with elegant look</li><li>Auto readmore without javascript</li><li>Fast loading </li><li>Stylish threaded comment </li><li>SEO friendly and visitor friendly</li><li>Sidebar toggle hide and show</li><li>Navigation menu dropdown</li><li>Ads ready and many more</li></ol>Untuk mengganti Feedburner yang ada di bawah setiap postingan, cari kode ini di <b>Edit HTML</b> (jangan lupa centang <i>Expand Widget Templates</i>) :<br /><div style="text-align: left;"><blockquote class="tr_bq"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<b style="color: red;">JohnyTemplate</b>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='<b style="color: red;">JohnyTemplate</b>'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/><br /><input id='botsubbutton' type='submit' value='Submit'/><br/><br /><small>Your information will not be shared. Ever.</small><br/><br /><a href='http://feeds.feedburner.com/<b style="color: red;">JohnyTemplate</b>'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/<b style="color: red;">JohnyTemplate</b>?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a><br /></form></blockquote></div><div style="text-align: justify;">Tulisan <b style="color: red;">warna merah</b> diatas adalah ID feedburner dari demo template, silahkan Anda ganti dengan ID feeburner blog Anda.</div><br /><div style="text-align: justify;">Itu tadi artikel tentang template sederhana SEO dan visitor friendly yang saya bagikan Subuh ini, jika Anda berminat silahkan dipakai dan jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kolom komentar di bawah. Selamat beraktivitas dan semoga bermanfaat.<br /><br /><b>Bukti Template ini SEO</b><br /><br />Perhatikan gambar di bawah ini, belum ada 2 jam template ini saya publish, ada salah satu blog yang menggunakan Johny Wusss template langsung nongkrong di halaman pertama dengan kata kunci <b>Johny Wuss</b>, nomer satu pula blog saya ini pun kalah.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpopEl_25CYzyTWDz947ZejhCW3fBdZM1rWXyko3ZsBbkSHEcJrhlfubAHaXS90cfTSU4XNxx7dlrSy2pp0CsPa8Wu02dpCHsHamdFclec3WFn6zQLJPHoDRdKGrTodsnNP5YcRaE1jJI/s1600/Template+johny+wusss.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template maskolis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpopEl_25CYzyTWDz947ZejhCW3fBdZM1rWXyko3ZsBbkSHEcJrhlfubAHaXS90cfTSU4XNxx7dlrSy2pp0CsPa8Wu02dpCHsHamdFclec3WFn6zQLJPHoDRdKGrTodsnNP5YcRaE1jJI/s1600/Template+johny+wusss.jpg" /></a></div><br /></div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-39698502116853619052013-01-19T04:12:00.000-08:002013-02-17T16:36:35.616-08:003 Template Blogger Sakit Gigi<div style="text-align: justify;"><span class="awal">H</span>ujan terus dari tadi, kapan redanya ya? Daripada manyun nunggu hujan, mending ini saya kasih lagi gratis 3 template blogger yang saya buat sambil sakit gigi. Dari kemarin, kalau lagi musim hujan dan cuaca dingin-dingin empuk, gigi ini pasti kambuh.... sompret. Jangan heran ya, tiap kali saya bikin artikel pasti arah tulisannya kemana-mana, namanya juga orang sakit gigi jadi bebas dong mau ngapain (nggak ada hubungannya). Sebenarnya, saya nulis asal-asalan begini punya maksud tertentu, agar tidak terlalu kaku antara pemilik blog dengan pengunjung, jadi biar tidak terkesan formal dan lebih interaktif, sehingga pengunjung tidak sungkan-sungkan berkomunikasi dengan pemilik blog lewat komentar, asalkan masih dalam tahap yang sopan dan wajar.</div><br /><div style="text-align: justify;">"<i>Saya, Anda dan teman-teman blogger lain statusnya sama, tidak ada newbie ataupun senior, tidak ada master maupun blogger abal-abal. Yang ada adalah pemakai platform blogspot gratis yang berusaha menyampaikan apa yang ada di benaknya lewat tulisan untuk memberikan informasi yang bermanfat bagi para pembaca</i>." Itu tadi sambutan pendek dari bapak ketua RT kita, jika ada kata-kata yang kurang berkenan mohon dimaafkan, namanya juga manusia pasti ada salah-salah kata, wajar kan. Lhah... ini templatenya mana...? </div><br /><div style="text-align: justify;">Sabar, ini juga mau dibagikan. Tiga template ini, seperti yang saya janjikan kemarin pada artikel <a href="http://www.maskolis.com/2013/01/mau-backlink-dari-maskolis.html" target="_blank">Mau Backlink dari Maskolis?</a> salah satunya sudah saya pajang di artikel itu. Dan dengan tidak disangka-sangka, template itu menjadi bahan pembicaraan di forum blogger Thailand (http://www.thaiseoboard.com/index.php?topic=303857.msg4193918;topicseen). Oke langsung saja, daripada nanti ada yang bilang saya orang sombong, inilah ketiga template yang saya buat sambil sakit gigi.</div><br /><span style="font-size: large;"><b>Johny Jogos</b></span><br /><br /><div style="text-align: justify;">Jogos berasal dari bahasa Portugal yang berarti Games. Template ini saya buat atas permintaan teman blogger dari Brasil, sebenarnya dia sudah lama minta dibuatkan template blogger untuk mini games online, bahkan sebelum saya libur panjang 3 bulan kemarin mintanya. Karena kesibukan di dunia nyata, baru sekarang saya realisasikan, entah masih ingat apa nggak dianya.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZnQOGLL_AjxWdnutb3qK9a467R3-BHMMN_YJ6E2T7QnjiD_8D_9JeoHwxye1LB0G9koEjoFObzeq4K7xYSZPsaA2BFrz82DBqLti3e0wHxCy86yQOLNaYmbnzSIaAkE49SquwELe-hc/s1600/Johny+Jogos.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template game" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZnQOGLL_AjxWdnutb3qK9a467R3-BHMMN_YJ6E2T7QnjiD_8D_9JeoHwxye1LB0G9koEjoFObzeq4K7xYSZPsaA2BFrz82DBqLti3e0wHxCy86yQOLNaYmbnzSIaAkE49SquwELe-hc/s1600/Johny+Jogos.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-jogos.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-jogos.html" target="_blank">Download</a></span></b></div><br /><b>Slider</b><br /><br />Untuk memasang slider, masukkan kode berikut ini pada kolom dibawah header yang panjang :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div id='slider'><br /><div id='loopedSlider'><br /><div class='container'><br /><script><br />document.write("<script src=\"/feeds/posts/default/-/<b style="color: blue;">hot games</b>?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");<br /></script><br /></div><br /><a class='previous' href='#'></a><br /><a class='next' href='#'></a><br /><ul class='pagination'><br /><script><br />document.write("<script src=\"/feeds/posts/default/-/<b style="color: blue;">hot games</b>?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");<br /></script><br /></ul><br /><script type='text/javascript'><br /> $(function(){<br /> $('#loopedSlider').loopedSlider();<br /> });<br /></script><br /></div><br /></div></div></div></div><br /><div style="text-align: justify;">Kode warna biru diatas adalah label yang saya masukkan pada slider, silahkan Anda ganti dengan label Anda, atau jika Anda ingin slider menampilkan postingan terbaru, hapus kode /-/<b style="color: blue;">hot games</b> diatas.</div><br /><b>Tab Widget Kategori</b><br /><br />Untuk merubah judul tab (Adventur, Action, Bike Game dan sebagainya) cari kode berikut ini di <b>Edit HTML</b> : <br /><blockquote class="tr_bq">Title1="<b style="color: blue;">Adventure</b>";Title2="<b style="color: blue;">Action</b>";Title3="<b style="color: blue;">Bike Game</b>";Title4="<b style="color: blue;">Dress-U</b>p";Title5="<b style="color: blue;">Strategy</b>";Title6="<b style="color: blue;">Sport Game</b>"</blockquote><div style="text-align: justify;">Setelah ketemu ganti tulisan warna <b><span style="color: blue;">biru</span></b> diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori. Dan untuk mengisi widget tab view dengan label yang ingin Anda pasang disitu, cari kode berikut pada Edit HTML (jangan lupa centang expand widget templates) :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div id='tabber-wrapper'><br /><ul class='tab-view'><br /><li><a href='#tab1'><script>document.write(Title1);</script></a></li><br /><li><a href='#tab2'><script>document.write(Title2);</script></a></li><br /><li><a href='#tab3'><script>document.write(Title3);</script></a></li><br /><li><a href='#tab4'><script>document.write(Title4);</script></a></li><br /><li><a href='#tab5'><script>document.write(Title5);</script></a></li><br /><li><a href='#tab6'><script>document.write(Title6);</script></a></li><br /></ul><div class='clear'/><br /><div class='tab-wrapper'><br /><div class='tabber' id='tab1'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">hot games</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='tabber' id='tab2'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">play station</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='tabber' id='tab3'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">review</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='tabber' id='tab4'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">hot games</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='tabber' id='tab5'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">play station</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='tabber' id='tab6'><br /><script><br />document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/<b style="color: red;">hot games</b>?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='clear'/><br /></div></div></div></div></div>Ganti tulisan <b style="color: red;">warna merah</b> diatas dengan Label yang ingin anda tampilkan.<br /><br /><b>Widget Label </b><br /><div style="text-align: justify;"><br />Yang dimaksud dengan widget label pada template ini adalah : <b>Game Category dan widget sidebar kanan atas</b>. Caranya sangat mudah, anda tinggal memasukkan atau ketik nama label yang sudah Anda buat pada kotak tersebut. Seperti contoh gambar di bawah :</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-LqyB6qN-e2U5DzAZQ7rbL9HDJfu0bZ8pVbeL_c2ucDdHEgEk4FXwwWeNp1anYwuF2YwE5wdC_eh1yrDHeKgmcibBTXUehDlj-XTsOWwmhgzYvDEnGCOFAC_rBVMTJPLFzx9h2FA2ls/s1600/widget+label.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="maskolis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-LqyB6qN-e2U5DzAZQ7rbL9HDJfu0bZ8pVbeL_c2ucDdHEgEk4FXwwWeNp1anYwuF2YwE5wdC_eh1yrDHeKgmcibBTXUehDlj-XTsOWwmhgzYvDEnGCOFAC_rBVMTJPLFzx9h2FA2ls/s1600/widget+label.jpg" /></a></div><br /><span style="font-size: large;"><b>Johny Coba Dulu</b></span><br /><br /><div style="text-align: justify;">Fitur yang ada pada template ini sama dengan <b>Johny Jogos</b> dan cara pemasangan widget pun juga sama jadi saya tidak perlu mengulangnya kembali. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2CYGFqL5nR1coYMOq2cF4BHi7R9un57ziRUEcqZclTufgJHVlIpa3f2FiEQsWvPHjsjgiB6lVjaRGqLOQbAupYBERlQJYTtfvgkBnJYiqRgOLCWxS7xHl2cqx0LBH0IgWUGUqAyQhuI/s1600/Johny+Coba+Dulu.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template game" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2CYGFqL5nR1coYMOq2cF4BHi7R9un57ziRUEcqZclTufgJHVlIpa3f2FiEQsWvPHjsjgiB6lVjaRGqLOQbAupYBERlQJYTtfvgkBnJYiqRgOLCWxS7xHl2cqx0LBH0IgWUGUqAyQhuI/s1600/Johny+Coba+Dulu.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-cobadulu.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-coba-dulu.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Kedua template untuk mini game online ini menggunakan fungsi reply threaded komentar bawaan blogger jadi Anda tidak perlu merubah Blog ID, karena memang tidak ada pada template diatas.</div><br /><span style="font-size: large;"><b>Johny Si Ganteng</b></span><br /><br /><div style="text-align: justify;">Template ini khusus buat orang-orang ganteng seperti saya.dan <a href="http://beben-koben.blogspot.com/" target="_blank"><b>Kang Beben Koben</b></a> yang anu ganteng pisan, katanya. Saya mau cerita sedikit tentang Kang Beben, dia salah satu blogger yang mempunyai perilaku yang layak ditiru oleh blogger lain, selain penguasaan coding yang handal tentunya (sumpah ini bukan isapan jempol, dia memang ahlinya). Banyak sih memang blogger-blogger lokal yang ahli dan menguasai kode-kode CSS, HTML maupun Javascript, tapi sifatnya tipikal seperti lainnya, beda sama Kang Beben Koben. Salah satu yang paling bikin saya terkesan dengan dia adalah, ketika Kang Beben walking in the prettt, dia selalu meninggalkan komentar dimanapun dia singgah, entah itu blog para master dari luar negeri ataupun ketika berkunjung ke blog abal-abal seperti blog ini. Pokoknya maju terus kang Beben, bahasa Inggrisnya keep goin' kang, saya ada di belakangmu, tapi kalau ada apa-apa saya lari duluan.... hahahahahaha.</div><br /><div style="text-align: justify;">Template <b>Johny Si Ganteng</b> fiturnya sama persis dengan <a href="http://www.maskolis.com/2012/08/2-template-kurang-kerjaan.html" target="_blank"><b>Johny Sompret Banget</b></a>, tapi ada beberapa perbedaan yang mendasar sehingga template ini lebih keliatan ramping kodenya, meskipun tampilannya sama. Salah satunya adalah penggunaan Tag H1 untuk setiap judul postingan, silahkan di cek nanti jika Anda berminat. Bagi Anda yang ingin menggunakan template ini silahkan dibuka lagi artikel <a href="http://www.maskolis.com/2012/08/2-template-kurang-kerjaan.html" target="_blank">2 template kurang kerjaan</a> untuk cara pemasangan widgetnya.</div><br /><div style="text-align: justify;">Untuk pemasangan widget <b>recent post</b> pada sidebar kanan, masuk ke <b>Layout</b> >> pilih sidebar >> <b>HTML/Javascript</b> kemudian masukkan kode berikut ke dalamnya :</div><div style="text-align: left;"><blockquote class="tr_bq"><ul><br /><script type='text/javascript'><br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts7\"><\/script>");<br /></script><br /></ul></blockquote></div><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuhHZBUWR2sPPI3-CIv0NYB0bWVvVS-WTpB6ifsB8tSbgtFyd4y5o8HTQLiM5LBRhkZ_nt6qXI7m99tKPRt5N_MWdaiPkzyXSG3eSCG42LM12gLtw_u9U5wdHxRihOKPTs1ZLwf4xgbM/s1600/Johny+Si+Ganteng+copy.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="template magazine" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuhHZBUWR2sPPI3-CIv0NYB0bWVvVS-WTpB6ifsB8tSbgtFyd4y5o8HTQLiM5LBRhkZ_nt6qXI7m99tKPRt5N_MWdaiPkzyXSG3eSCG42LM12gLtw_u9U5wdHxRihOKPTs1ZLwf4xgbM/s1600/Johny+Si+Ganteng+copy.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-siganteng.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-si-ganteng.html" target="_blank">Download</a></span></b></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://www.maskolis.com/2012/08/2-template-kurang-kerjaan.html" target="_blank">Template Cuztomisation</a></span></b></div><br /><div style="text-align: justify;">Saya berasumsi bahwa teman-teman blogger sudah bisa merubah atau mengganti navigasi menu yang ada pada ketiga template diatas, jadi saya tidak perlu lagi menjelaskan satu persatu langkah-langkahnya, bakalan panjang nanti artikelnya. Oke itu tadi 3 template yang saya bagikan hari ini, Sabtu malam Minggu, 19 Januari 2013. Puisi pendek malam Minggu :<br /><blockquote class="tr_bq">Ini malam Minggu kelabu, dari tadi hujan melulu.<br />Mau apel nggak jadi, malu aku.<br />Dikiranya nanti aku cowok yang nggak laku<br />Padahal banyak sekali cewek yang selalu menungguku</blockquote><br />Jika ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar dibawah. Selamat mencoba dan semoga bermanfaat.<br /><br /><i><b>Note : </b></i></div><div style="text-align: justify;">Ketiga template diatas support lisensi dari <b>http://creativecommons.org</b> jadi dimohon untuk <b>tidak menghilangkan kredit link yang ada di sebelah kanan bawah</b>. Yang tiga kiri itu silahkan diganti dengan blog list Anda.</div><br /><div style="text-align: center;"><a href="http://creativecommons.org/licenses/by/3.0/deed.en_US" rel="license"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by/3.0/88x31.png" style="border-width: 0;" /></a></div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-44567213743090177132013-01-17T02:05:00.000-08:002013-02-17T16:36:35.703-08:00Mau Backlink dari Maskolis?<div style="text-align: justify;"><span class="awal">J</span>ika Anda pengguna template dari <b>Creating Website</b>, kali ini saya akan memberikan sebuah bentuk apresiasi atau rasa terima kasih saya yang kedua. Jika teman-teman blogger belum mengetahui seperti apa apresiasi saya kepada pengguna template dari Creating Website, silahkan baca pada artikel <a href="http://www.maskolis.com/2012/06/bentuk-apresiasi-kepada-pengguna.html" target="_blank">Bentuk Apresiasi Kepada Pengguna Template</a>. Dan tentunya nanti akan saya buat sebuah postingan lagi berupa <a href="http://www.maskolis.com/2012/06/gallery-showcase-template-creating.html" target="_blank">gallery showcase template-template dari Creating Website</a>. Selain saya pajang disini juga akan saya posting di halaman statis di blog <b>Mas Template</b>, <a href="http://www.mastemplate.com/p/showcase.html" target="_blank">seperti ini</a>.</div><br /><div style="text-align: justify;">Bagi Anda pemakai template dari <b>Creating Website</b>, silahkan dimodifikasi sesuai keinginan yang menurut Anda itu sudah paling bagus, meskipun menurut orang lain itu kurang, namanya juga opini pastilah sifatnya subyektif. Saya disini hanya menilai tampilan bukan performance, kecocokan perpaduan warna yang digunakan, pengaturan widget-widget yang tersusun rapi. Bukan menilai isi konten blog, speed blog maupun SEO, karena saya bukan ahli SEO dan bukan kritikus artikel. Saya hanya menilai tampilan blog yang sudah dimodifikasi tampilan luarnya, siapa tahu nanti bisa jadi bahan referensi membuat template baru.</div><br /><div style="text-align: justify;">Saya akan berikan sebuah contoh modifikasi template berikut, dibawah ini adalah <a href="http://johny-kampret.blogspot.com/" target="_blank">Johny Kampret</a> template. Dan di bawahnya lagi hasil modifikasi.</div><br /><span style="font-size: large;"><b>Belum Dimodifikasi</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagKoKz8yjS0z3AwbwMrl99SM5W2eRmxDBY1rsn5P0RbO5G9KZDmtLEpb6WEocsJEHh8mthNv-riC3MSI5MmXnLjlMSYu8J4BVdD_bp5kOP88l71SCf7WCsTT7hGetgQEWdv9Z5k9KckY/s1600/Johny+Kampret.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny kampret" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagKoKz8yjS0z3AwbwMrl99SM5W2eRmxDBY1rsn5P0RbO5G9KZDmtLEpb6WEocsJEHh8mthNv-riC3MSI5MmXnLjlMSYu8J4BVdD_bp5kOP88l71SCf7WCsTT7hGetgQEWdv9Z5k9KckY/s1600/Johny+Kampret.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-kampret.blogspot.com/" target="_blank">Demo</a></span></b></div><br /><span style="font-size: large;"><b>Sudah Dimodifikasi</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIgFEi4zs5EdvbFWaj1QMD_L3dxNiSOR24Sezk2h1a0Znhtk95PJNCqcwkO0dBuBLHp1hCxC-DXIKomXDmcf75QIkmZDQmMWG9qMETbqhDqtKpA9-cNI_lzAbW0Eh-APcEs_Lh7wIUDU/s1600/Johny+Jogos.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="jojhny jogos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIgFEi4zs5EdvbFWaj1QMD_L3dxNiSOR24Sezk2h1a0Znhtk95PJNCqcwkO0dBuBLHp1hCxC-DXIKomXDmcf75QIkmZDQmMWG9qMETbqhDqtKpA9-cNI_lzAbW0Eh-APcEs_Lh7wIUDU/s1600/Johny+Jogos.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-jogos.blogspot.com/" target="_blank">Demo</a></span></b></div><br /><div style="text-align: justify;">Nah, seperti diatas itu gambaran modifikasi sebuah template. Anda bisa menggunakan software pengolah gambar seperti Adobe Photoshop maupun Corel Draw untuk mencari kombinasi warna yang cocok. Dan silahkan Anda menambahkan fitur-fitur baru pada templae yang dipakai, di Google banyak sekali tutorial blogger canggih untuk membuat sebuah fitur modern, silahkan dipasang dan sesuaikan dengan kebutuhan blog Anda.</div><br /><div style="text-align: justify;">Syaratnya hanya dua, blog Anda memakai template dari <b>Creating Website</b> dan masih ada <b>kredit link</b> di bagian footer. Jika berminat silahkan ketikkan seperti di bawah ini pada kotak komentar :</div><blockquote class="tr_bq">Nama Blog : Johny Jogos<br />URL blog : http://johny-jogos.blogspot.com/ <br />Nama Pemilik : Maskolis<br />Template Asli : Johny Kampret</blockquote><br /><div style="text-align: justify;">Waktunya dua minggu, setelah itu saya akan seleksi 10 blog terbaik yang akan akan saya pajang disini, di <b>Mas Template</b> dan <b>Johny Template</b>. Anda akan mendapatkan backlink gratis resmi dari tiga blog saya diatas. Untuk page rank ketiga blog saya silahkan dicek, lumayan deh pokoknya. Kali ini tidak ada hadiah tambahan berupa template seperti kemarin, karena tetep aja banyak yang minta nantinya, untuk template <b>Johny Jogos</b> diatas, jika ada yang minat sabar aja pasti nanti saya bagikan, belum selesai masih pada tahap pembuatan yang warna gelap. Sekian dan semoga tidak bermanfaat</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-22009413906640509372013-01-13T18:13:00.000-08:002013-02-17T16:36:35.789-08:00Orang Tampan Pakai Template Ini<div style="text-align: justify;"><span class="awal">S</span>ebelum saya bagikan template ini, saya mau cerita dulu sebentar. Kemarin ada yang tanya ke saya masalah nama template, "Mas.. kenapa sih kalau bikin template namanya mesti aneh-aneh, ada <a href="http://www.mastemplate.com/2012/06/johny-crott-template.html" target="_blank">Johny Crott</a>, <a href="http://www.mastemplate.com/2012/07/johny-kenthir.html" target="_blank">Johny Kenthir</a>, <a href="http://www.mastemplate.com/2012/06/johny-sompret.html" target="_blank">Johny Sompret</a> dan lain-lain, bukannya nama-nama itu tidak wajar untuk sebuah template blogger?" Terus saya jawab begini, awalnya saya membuat template namanya keren <a href="http://www.mastemplate.com/2012/01/johny-simple-magazine-2.html" target="_blank">Johny Magazine</a>, <a href="http://www.mastemplate.com/2012/02/johny-portal-2.html" target="_blank">Johny Portal</a> dan nama lain yang biasa digunakan oleh para pembuat template, nama-nama seperti itu sudah jamak digunakan. Jika Anda ketik kata kunci magazine atau portal di mesin pencari Google, pasti banyak artikel yang sama dengan kata kunci itu.</div><br /><div style="text-align: justify;">Kata para master blogger, kita mesti bisa menciptakan kata kunci atau keyword yang unik untuk memenangkan kompetisi di Google SERPs..... ngomong-ngomong SERPs apaan sih? Maksudnya jika ada orang mencari dengan kata kunci tersebut, artikel kita nongkrong minimal di halaman pertama search engine Google. Coba sekarang perhatikan judul artikel ini, sekarang coba Anda cari, mana ada orang se-narsis diriku ini dengan pede-nya bilang : <b>Orang Tampan Pakai template ini</b>. Nanti, dua bulan yang akan datang jika ada orang yang mencari dengan kata kunci "<b>Orang Tampan</b>" bisa jadi artikel ini nongkrong di halaman pertama Google.</div><br /><div style="text-align: justify;">Nah, sekarang coba perhatikan screenshot gambar di bawah ini, saya ketik kata kunci di Google : "<b>Kenthir</b>" dan yang muncul meskipun bukan nomer satu, sekarang coba perhatikan, template saya yang pakai nama kenthir ada di halaman pertama mesin pencari, karena alasan itulah saya suka bikin nama template yang aneh-aneh, pokoknya beda sama yang lain. Kalau yang lain masih suka nama-nama yang kebarat-baratan, ya silahkan saja. Apalagi dulu saya bahasa Inggris waktu sekolah nggak pernah dapat nilai lebih dari 7, jadi tau sendirilah kualitas Inggris saya seperti apa.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniZf0INVo0fyC0ExYKuFy47MBVOoU5GRyh8mOCCcDSBRaCNc65LUFE6tigTdkbx02vAShtMeM_XyzKREqoeBclvtdW82BlgKdMLBhByY8zthEESYT0Q-OAZveAreWX30KzXS18F7gGhE/s1600/kenthir+-+Penelusuran+Google.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="penulusuan google" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniZf0INVo0fyC0ExYKuFy47MBVOoU5GRyh8mOCCcDSBRaCNc65LUFE6tigTdkbx02vAShtMeM_XyzKREqoeBclvtdW82BlgKdMLBhByY8zthEESYT0Q-OAZveAreWX30KzXS18F7gGhE/s1600/kenthir+-+Penelusuran+Google.jpg" /></a></div><br /><br /><div style="text-align: justify;">Sekarang waktunya pembagian template gratis lagi, template ini permintaan dari orang luar negeri, tapi nggak tau dari negara mana asalnya. Dia suka dengan template <a href="http://www.maskolis.com/2012/07/johny-joss-banget-template-joss-untuk.html" target="_blank">Johny Joss Banget</a>, tapi tampilan slidernya terlalu besar gambarnya, dia minta agar dikecilkan minimal satu baris ada 6 postingan di dalam slider. Mumpung lagi nggak ada kerjaan, tadi habis Subuh saya bongkar semua kode yang ada pada template <a href="http://www.maskolis.com/2012/07/johny-joss-banget-template-joss-untuk.html" target="_blank">Johny Joss Banget</a>, sekarang baru selesai. Ada dua pilihan yang satu gelap dan yang satu lagi terang.</div><br /><div style="text-align: justify;">Ada beberapa perbedaan yang mendasar pada template ini dibanding template sebelumnya. Selain slider perbedaan lainnya adalah :</div><ol><li>Sidebar toggle hide and show, bekerja seperti accordion widget</li><li style="text-align: justify;">Pemasangan <b>meta tag H1</b> pada setiap judul artikel, intinya semua kondisi SEO yang ada pada template <b>paling SEO friendly sejagad</b> menurut saya, yaitu <a href="http://blogjuragan.blogspot.com/2010/07/seo-friendly-blogspot-templates.html" target="_blank">template Thesis buatan Blog Juragan</a> sudah saya transfer semua di template ini, silahkan di cek.</li><li style="text-align: justify;">Minimalisasi penggunaan image atau gambar, jika pada template <b>Johny Joss Banget</b> banyak menggunakan gambar dengan ukuran yang lumayan besar, pada template ini sudah berkurang, lebih banyak menggunakan warna.</li><li style="text-align: justify;">Rating star pada setiap postingan, dan jumlah view artikel.</li><li style="text-align: justify;">Tidak ada javascript yang saya simpan di Google Code jadi Anda tidak usah kawatir lagi dengan akun yang kena banned, tapi sebisa mungkin kode-kode script yang panjang diringkas dan disimpan sendiri di Google Code Anda sendiri. </li></ol>Pemasangan widget-widget yang ada pada template ini sama persis dengan template <a href="http://www.maskolis.com/2012/07/johny-joss-banget-template-joss-untuk.html" target="_blank">Johny Joss Banget</a>, jadi Anda silahkan buka kembali artikelnya jika ingin memakai template ini. <br /><br /><span style="font-size: large;"><b>Johny Tampan</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6AqsRGfnkGrqUzdcgDF98_Gkg_edELT6xCnm4icGmDFiPHa9ehZpIXVIEOb2pQSxIlRksqCaUz8hK1CMMO1GGTJ-QjZqO5ucsVFEhBnr66YBuSpssKtBbFEKSBtXWRuXCkEOYLvqSrM/s1600/Johny+Tampan.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Johny Tampan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6AqsRGfnkGrqUzdcgDF98_Gkg_edELT6xCnm4icGmDFiPHa9ehZpIXVIEOb2pQSxIlRksqCaUz8hK1CMMO1GGTJ-QjZqO5ucsVFEhBnr66YBuSpssKtBbFEKSBtXWRuXCkEOYLvqSrM/s1600/Johny+Tampan.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnytampan.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-tampan.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Pada template ini terdapat 5 buah widget untuk category, Anda tinggal memasukkan atau ketik nama label yang ingin Anda tampilkan pada kelima widget tersebut, seperti tampak pada gambar di bawah ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGVqEFheKG6I6JcDh5nm74aSYfThvb1e3ja2TNpPbSpxA5L-gCVOfKx85Uvhx-pYkvxDREZd6LVfvkO0N19fNvRyVWt0oU5psthifq63QgU7uQ_X2EWmwdGyWKIZ3MTmLm2J5BS0MxpNE/s1600/New+Picture.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget category" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGVqEFheKG6I6JcDh5nm74aSYfThvb1e3ja2TNpPbSpxA5L-gCVOfKx85Uvhx-pYkvxDREZd6LVfvkO0N19fNvRyVWt0oU5psthifq63QgU7uQ_X2EWmwdGyWKIZ3MTmLm2J5BS0MxpNE/s320/New+Picture.jpg" width="320" /></a></div><br /><div style="text-align: justify;">Dari gambar diatas saya memasukkan label atau kategori <b>"best seller"</b> pada widget <b>"Movie Categoy 1"</b>, silahkan Anda ganti dengan label Anda. Demikian juga untuk widget movie category lainnya, Anda tinggal ketik nama label pada kotak tersebut dan label anda akan tampil secara otomatis.</div><br />Untuk mengaktifkan fungsi reply pada kotak komentar, masuk ke <b>Edit HTML</b> jangan lupa untuk mencentang kotak <b>Expand Widgets Templates</b> kemudian cari kode berikut : <br /><div style="text-align: left;"><blockquote class="tr_bq"><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<b style="color: #cc0000;">30637789642614230</b>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a></blockquote></div><div style="text-align: justify;">Ganti <i>blog ID</i> warna <b style="color: #cc0000;">merah</b> diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBe_3yq1FLaKeK0mEFEl9gT3_Z81ewrqE52qpMGqfFrOYnyJT2PJRYedn41Rvh3_d2-ICi9GXdCBuVYK-4VVbHEpOHBHMCiwtXQb-G6pO8u-2Oik2G4gqfnICoFSKk3SApEScjcgM48dE/s1600/New+Picture.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="blog id" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBe_3yq1FLaKeK0mEFEl9gT3_Z81ewrqE52qpMGqfFrOYnyJT2PJRYedn41Rvh3_d2-ICi9GXdCBuVYK-4VVbHEpOHBHMCiwtXQb-G6pO8u-2Oik2G4gqfnICoFSKk3SApEScjcgM48dE/s1600/New+Picture.jpg" /></a></div><br /><span style="font-size: large;"><b>Johny Lebay</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bXnL-d74TdZf63p45I2VAOmzM4Z-9-kptyWqnONzSr9r9Ope6tklRrBeDk6pukUk-PqFkM8ld6pG85r6jP2zs5dQDUZOEgun6LvaGWoRJ7kL1f0583M_yXSyUwiBY1g2gCsErsFBsCw/s1600/Johny+Lebay.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny lebay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bXnL-d74TdZf63p45I2VAOmzM4Z-9-kptyWqnONzSr9r9Ope6tklRrBeDk6pukUk-PqFkM8ld6pG85r6jP2zs5dQDUZOEgun6LvaGWoRJ7kL1f0583M_yXSyUwiBY1g2gCsErsFBsCw/s1600/Johny+Lebay.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnylebay.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-lebay.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Cara pasang widget sama dengan template diatas, blog ID pada template ini yang harus diganti : <b style="color: red;">981587371775371044</b>.</div><br /><div style="text-align: justify;">Itu tadi dua template modifikasi dari <a href="http://www.maskolis.com/2012/07/johny-joss-banget-template-joss-untuk.html" target="_blank">Johny Joss Banget</a>, jika masih ada yang kurang jelas, silahkan tinggalkan pesan di kotak komentar. Nah sekarang waktunya kerja, kalau ada pertanyaan nanti sore atau malam bari bisa dijawab. Selamat beraktivitas semoga bermanfaat.</div><br /><b>Ada yang nge-share atikel ini nggak ya...???</b><br /><br />Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-80638802041948121272013-01-12T07:25:00.000-08:002013-02-17T16:36:35.878-08:00Kelemahan Ngeblog Pakai Blogspot<div style="text-align: justify;"><span class="awal">A</span>rtikel kali ini hanya iseng aja, tapi bisa juga dibilang serius karena bisa menjadi salah satu pertimbangan teman-teman pengguna platform Blogger sebagai sarana aktivitas ngeblog. Jaman dahulu kala, ada dua orang sahabat karib Maskolis dan Helmi terlihat mereka lagi duduk-duduk di teras rumah sambil ngobrol ringan. Helmi kelihatan kesal terlihat dari mukanya yang ditekuk, usut punya usut ternyata dia lagi kesal karena perilaku Google yang dengan sepihak menghapus blog yang dikelolanya setelah hampir bertahan selama 1 abad lebih dikit. Dia kesal seperti seorang pesakitan yang divonis bersalah oleh hakim tanpa bisa mengajukan banding ke pengadilan yang lebih tinggi, dan permintaan grasi pun sepertinya juga sudah ditutup rapat-rapat karena sang <b>presiden sibuk dengan segala keprihatinannya</b>.</div><br /><div style="text-align: justify;">Setelah merenung di pinggir kali sambil jongkok, Maskolis berpendapat begini, bahwa platform Blogger sebenarnya tidak layak untuk dijadikan sarana berekspresi secara bebas. Banyak keterbatasan yang dimiliki Blogger sehingga seorang yang ahli dalam bidang IT khususnya bahasa pemrograman situs atau web, sangat mustahil memakai Blogger sebagai sarana untuk mengembangkan bakat dan keahliannya, ya ada beberapa sih yang nekat pakai Blogger, tapi biasanya mungkin karena keterbatasan ekonomi seperti yang nulis artikel ini. Ini pendapat subyektif penulis, silahkan setuju atau setuju sekali, alternatif pilihannya cuma itu.</div><br /><div style="text-align: justify;">Tulisan ini nanti arahnya bakal kemana-mana, nggak fokus pada topik yang dibahas, jadi harap maklum soalnya yang nulis agak <b>kenthir</b>, tapi nggak gila, buktinya masih bisa nulis artikel ini. Semoga yang baca betah, kalau nggak betah langsung aja kasih komentar kentut ini : <b>nice posting Gan, ditunggu artikel selanjutnya</b>, atau <b>artikel yang menarik, ditunggu komen baliknya ya...!!!</b>. Oke kita lanjutkan, sampai dimana tadi? Lihat gambar orang cantik pasti lebih semangat......<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLWcHeZkLuEqI9RhcTzPCAp-XEqMk0TvV6j_jJCGMnqk9J0DkbfSoHWQZx_nFKR0JNht3gIGpYXCFNwaWCm1pTENxZOTs0-HiG0jW0DFmqR3C3g4dYl8MQN7dK3Kx86E67v2KfHKwG8E/s1600/dian+sastro.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="dian sastro" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLWcHeZkLuEqI9RhcTzPCAp-XEqMk0TvV6j_jJCGMnqk9J0DkbfSoHWQZx_nFKR0JNht3gIGpYXCFNwaWCm1pTENxZOTs0-HiG0jW0DFmqR3C3g4dYl8MQN7dK3Kx86E67v2KfHKwG8E/s1600/dian+sastro.jpg" /></a></div><div style="text-align: center;"><i>Sumber gambar : http://indonesiarayanews.com</i></div><br /></div><br /><div style="text-align: justify;">Pengguna blogspot atau dikenal juga sebagai blogger mayoritas berasal dari beberapa negara berkembang di dunia, jika dilihat prosentase pengguna blogspot, 70% dari negara-negara yang secara ekonomi masih belum mapan termasuk negara kita yang tercinta ini tentunya. Seorang pengguna blogspot ibarat seperti anak kost, cuma bedanya blogger gratis.. eh nggak juga, paling tidak kita mesti beli komputer atau minimal barang elektronik yang bisa buat nulis elektrik seperti HP atau Ipad, juga kalau kita ngeblog di warnet mesti bayar sewa, kecuali penjaga warnet. Seorang anak kost akan memperoleh fasilitas kamar dan tempat tidur dari yang punya rumah, jelek atau bagus sebuah fasilitas tergantung berapa biaya sewa yang mesti dikeluarkan. Meskipun udah begitu, ruang lingkupnya tetep aja terbatas, misalnya untuk ngambil air di kulkas aja kadang ada yang harus minta ijin dulu, kita nggak boleh masuk ruang-ruang tertentu di rumah itu atau yang paling parah kalau rumah kost yang kamar mandi dan WC buat bareng-bareng sama yang lain... wuihhh <b>ngeri-ngeri sedap</b>, kata Sutan Bhatoegana. </div><br /><i>"Lha terus apa hubungannya dengan seorang blogger?" tanya Helmi ke Maskolis.</i><br /><i>"Nggak ada hubungannya sih, emang siapa yang bilang ada hubungannya?" jawab Maskolis.</i><br /><div style="text-align: justify;"><i>"Lha itu alinea diatas, seorang blogger ibarat seperti anak kost! Berarti kan ada hubungannya?" tanya Helmi kesal.</i></div><div style="text-align: justify;"><i>"Makanya sabar dulu, ini juga lagi mikir, hubungannya kira-kira apa ya..?" jawab Maskolis sambil minum</i> <b>jamu tambah ganteng</b>.</div><br /><div style="text-align: justify;">Jagi begini, seorang pengguna blogspot juga sama seperti anak kost, diberikan fasilitas yang mendukung kegiatan dalam rangka menyampaikan informasi secara online. Semuanya sudah tersedia gratis, kita tinggal pencet tombol ini dan itu semuanya beres. Tapi aktivitas itu dibatasi, Google sebagai induk semang dari rumah kost blogspot membuat beberapa peraturan yang harus dipatuhi oleh penggunanya. Pengguna Blogspot diperbolehkan memodifikasi kamar yang dia tempati dengan beberapa kondisi yang sudah ditentukan oleh aturan-aturan yang tidak bisa diganggu gugat.</div><br /><div style="text-align: justify;">Silahkan Anda sebagai blogger membuat kamar atau ruangan Anda seperti yang diinginkan, silahkan isi space-space kosong yang ada dalam kamar dengan barang-barang yang Anda perlukan. Tapi resiko ditanggung penumpang, iya maksudnya batasan-batasan ideal yang dibakukan oleh si induk semang sudah jelas, aturan baku yang dibuat semua pasti demi kemudahan dan kelangsungan hidup si pengguna. Seorang anak kost bisa saja menambahkan perabotan, seperti kulkas, TV, komputer atau lainnya dengan konsekuensi kamarnya menjadi semakin sempit dan sumpek, yang pasti sewa kamarnya juga bertambah karena penggunaan listrik yang lebih dan tentunya tanpa merusak atau menjebol ruang-ruang lain di kamarnya karena akan mengganggu anak kost lainnya.</div><br /><div style="text-align: justify;">Demikian juga pengguna blogger diperbolehkan menambah kode-kode yang diperlukan untuk menjadikan blognya menjadi lebih atraktif dengan catatan Anda tidak diperbolehkan mengurangi atau menambahkan beberapa kode fixed bawaan dari platform tersebut karena akan berakibat rusaknya struktur rumah blogger. Blog Anda memang akan keliatan lebih menarik tapi konsekuensinya blog Anda semakin lamban yang mungkin akan mengakibatkan Anda akan kehilangan beberapa persen dari sekian banyak pengunjung loyal karena tidak sabar untuk masuk ke ruangan Anda.</div><br /><div style="text-align: justify;">Seorang anak kost juga dipersilahkan mengajak teman masuk ke kamar tapi dengan batasan, tidak boleh terlalu malam atau terlalu sering bagi temen yang beda gender, atau menggunakan kamar sebagai sarana mencari penghasilan tambahan yang berlebihan, karena hal ini akan merugikan dan merusak citra rumah kost itu sendiri di mata tetangga lainnya. Google pun juga nggak bakalan mau kalau salah satu rumahnya dijadikan sebagai sarana ajang afiliasi program dengan situs atau web afiliasi lainnya. Program afiliasi hanya akan merugikan Google, karena dalam itung-itungan bisnis hal itu mematikan Google sebagai induk semang. Secara, Google juga punya program afiliasi sendiri untuk mengeruk keuntungan dari pengguna internet.</div><br /><div style="text-align: justify;">Dari beberapa contoh kasus diatas jika ada yang dilanggar oleh penggunanya, akibat paling buruk adalah Anda akan diusir dari rumah kost, Anda bisa saja melakukan operasi plastik dengan membuat akun baru di blogger, tapi tanpa merubah perilaku blogging Anda, hal yang sama akan terjadi lagi di masa yang akan datang, dan itu akan berlanjut sampai Anda sadar bahwa kita tidak akan pernah bisa bertindak bebas selama fasilitas pendukung yang kita miliki belum sepenuhnya atas nama pribadi.</div><br /><div style="text-align: justify;">Penjelasan dangkal yang penuh dengan unsur subyektifitas dari Maskolis, belum bisa sepenuhnya diterima oleh Helmi. Maskolis melanjutkan argumennya lagi, coba sekarang bayangkan jika Anda punya rumah sendiri? Helmi membayangkan jika dia punya rumah sendiri, tentunya dia pasti akan bebas seperti seekor burung yang terbang di pagi hari. Mau dipakai buat apapun, itu rumah-rumah dia, bebas bereksprsi intinya tanpa harus takut diusir oleh pemiliknya.</div><br /><div style="text-align: justify;">Dengan semakin berkembangnya teknologi di bidang IT, tentunya hal ini akan berdampak pada teknologi terapan yang ada pada sebuah situs atau web. Sistem pengkodean misalnya, sekarang banyak sekali temuan baru pada kode-kode script untuk menjalankan sebuah fitur modern. Semuanya serba baru, mulai dari kode CSS, HTML maupun Javascript, dan lagi temuan kode-kode pembentuk fitur modern itu bisa dijalankan untuk semua CMS pembuat website termasuk Blogger sendiri. Bagi blog non blogger hal itu tidaklah menjadi masalah, karena tinggal diatur berapa kapasitas hosting yang mesti diperlukan untuk membentuk semua fitur modern tersebut, lha bagaimana dengan Blogger? </div><br />Melihat Helmi malahan tertidur, akhirnya Maskolis melanjutkan penjelasanya minggu depan.<br /><b><i>Bersambung.... semoga tidak bermanfaat</i></b><br /><br /><div style="color: blue;"><b>Paling banyak dibaca orang kenthir : </b></div><ol><li><a href="http://www.maskolis.com/2011/04/cara-membuat-blog-yang-menarik.html" target="_blank">Cara Membuat Blog Yang Menarik</a> </li><li><a href="http://www.maskolis.com/2011/05/bagaimana-cara-memilih-nama-blog-yang.html" target="_blank">Bagaimana Cara Memilih Nama Blog Yang Baik?</a> </li><li><a href="http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html" target="_blank">Bagaimana Agar Template Anda SEO Friendly?</a> </li><li><a href="http://kauman0506.blogspot.com/2011/04/mengapa-komentar-tidak-harus-dibalas.html" target="_blank">Mengapa Komentar Tidak Harus Dibalas</a></li></ol>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-91094246815236995832013-01-10T05:08:00.000-08:002013-02-17T16:36:35.963-08:00Inilah Template Toko Online Jelek Banget<div style="text-align: justify;"><span class="awal">K</span>emarin ada yang minta template <a href="http://www.maskolis.com/2012/12/2-toko-online-modifikasi-dengan-invoice.html" target="_blank">Johny Sip Deh</a> tapi tampilan warnanya ungu, yah akhirnya meskipun ungu salah satu warna yang saya tidak begitu suka karena dekat dengan pink kesannya feminim, saya kan laki jadi warnanya mesti macho. Saya mau cerita sebentar sebelum lanjut ke template yang mau saya bagikan, sebenarnya saya kalau nulis artikel pakai bahasa baku begini agak susah mesti mikir dua kali, penginnya sih nulis bahasa gaul. Misalnya tidak, nulisnya nggak, nanti jadi entar dan lain-lain, tapi nanti kalau yang datang orang luar mau translate ke bahasa mereka jadi kacau tidak bisa diterjemahkan.</div><br /><div style="text-align: justify;"><b>Lanjut</b>, template yang saya bagikan kali ini hanya modifikasi dari template sebelumnya. Setelah kemarin saya membagikan <a href="http://www.maskolis.com/2012/12/2-toko-online-modifikasi-dengan-invoice.html" target="_blank">Johny Sip Deh template untuk blog toko online</a>, karena ada beberapa pemakai template dari kaum Hawa yang mungkin agak kurang sreg dengan tampilan warnanya yang hitam seperti pantat penggorengan, apalagi kalau yang dijual adalah baju atau perlengkapan rumah tangga yang sifatnya <i>Girly</i> pasti kurang cocok. Saya akan berikan alternatif warna lain, ada dua jenis warna untuk template kali ini, yaitu Hijau dan Ungu (ungu apa pink ya?).</div><br /><div style="text-align: justify;">Template toko online kali ini saya kasih nama <b>Johny Palelu Peang</b>, nama itu saya ambil karena waktu hujan kemarin atap rumah bocor dan dengan sigap saya langsung membetulkan letak genteng yang melorot, tapi apa mau dikata, karena licin saya terpeleset dan terjatuh yang berakibat kepala saya agak peang dikit. Fiturnya sama dengan <a href="http://www.maskolis.com/2012/12/2-toko-online-modifikasi-dengan-invoice.html" target="_blank">Johny Sip Deh</a>, dengan tampilan slider yang berbeda dan tambahan fitur kategori produk di bawah postingan. Untuk lebih jelasnya silahkan perhatikan screenschot gambar di bawah ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj808EfJaiBMi71xm41bVXe1LkP6CXc3D-W-QWiG1-X3iyIHIgcf7in60Hp9AQ3NiIkhaHloFtUhAUFGIFPJAQLxML7L0JoMXBPRL44N-X3vD8kJKqbssfIDWrFxhGBj0uVY1Mx_lk2pdU/s1600/Johny+Palelu+Peang.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger online store" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj808EfJaiBMi71xm41bVXe1LkP6CXc3D-W-QWiG1-X3iyIHIgcf7in60Hp9AQ3NiIkhaHloFtUhAUFGIFPJAQLxML7L0JoMXBPRL44N-X3vD8kJKqbssfIDWrFxhGBj0uVY1Mx_lk2pdU/s1600/Johny+Palelu+Peang.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-palelupeang.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-palelu-peang.html" target="_blank">Download</a></span></b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuEvojB6lfLc1MUXih6DF4FGmeTkCf8x6MqSnR4vS0Tjr5OO6RMT00PgCKtODuX8IVLxJfoWT2Q60j2b1y9INQJf346jq0yNMhFcXI1GsEOJIObwBlEw3hSvHSGuiLhnMy762j3kBP_M/s1600/Johny+Pink+Store+.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger online store" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuEvojB6lfLc1MUXih6DF4FGmeTkCf8x6MqSnR4vS0Tjr5OO6RMT00PgCKtODuX8IVLxJfoWT2Q60j2b1y9INQJf346jq0yNMhFcXI1GsEOJIObwBlEw3hSvHSGuiLhnMy762j3kBP_M/s1600/Johny+Pink+Store+.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-pinkstore.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2013/01/johny-palelu-peang.html" target="_blank">Download</a></span></b></div><br /><b>Posting Artikel</b><br /><br />Untuk membuat sebuah postingan, perhatikan struktur kode di bawah ini :<br /><blockquote class="tr_bq"><div style="text-align: left;"><div class="product_image"></div><div style="text-align: left;"><a class="cloud-zoom" href="<b><span style="color: red;">url-image.jpg</span></b>" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="<b><span style="color: red;">url-image.jpg</span></b>" /></a></div><div style="text-align: left;"><span class="item_price"><span style="color: #f1c232;"><b>$00.00</b></span></span></div></div><div style="text-align: left;"><div class="product_describe"></div><span style="color: blue;"><b>Description your product.............</b></span><br /></div></blockquote><i><u>Keterangan :</u></i><br />Warna <b><span style="color: red;">merah</span></b> : masukkan url gambar produk anda pada kedua kode warna merah diatas.<br />Warna <b><span style="color: #f1c232;">kuning</span></b> : harga produk<br />Warna <b><span style="color: blue;">biru</span></b> : deskripsi dari produk<br /><br />Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke <b>setting</b>, pilih <b>posts and comments</b> >> <b>post template</b>. Klik <b>add</b>, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir <b>save setting</b>.<br /><br /><b>Slider</b><br /><br />Slider pada template ini menampilkan postingan terbaru, untuk mengaktifkan slider, masuk ke Layout kemudian pilih kolom kosong diatas Bawah Slider. Masukkan kode ini di dalamnya :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div id='slider'><br /><div id='loopedSlider'><br /><div class='container'><br /><script><br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br /></script><br /></div><br /><a class='previous' href='#'></a><br /><a class='next' href='#'></a><br /><ul class='pagination'><br /><script><br />document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");<br /></script><br /></ul><br /><script type='text/javascript'><br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$(function(){<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>$('#loopedSlider').loopedSlider();<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>});<br /></script><br /></div><br /></div></div></div></div><br /><b>Setting Template </b><br /><br />Untuk merubah setelan transaksi online pada template ini, cari kode berikut ini pada <b>Edit HTML</b> :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">simpleCart.email = &#39;<b><span style="color: blue;">ncmajid@gmail.com</span></b>&#39;;<br />simpleCart.checkoutTo = Email;<br />simpleCart.currency = IDR;<br />simpleCart.urlWebsite = &#39;<span style="color: blue;"><b>http://johnysip-deh.blogspot.com</b></span>&#39;;<br />simpleCart.taxRate = <b><span style="color: blue;">0.02</span></b>;<br />simpleCart.shippingFlatRate = <b><span style="color: blue;">3.25</span></b>;<br />simpleCart.shippingQuantityRate = <b><span style="color: blue;">1.00</span></b>;<br />simpleCart.alamatPemilik = &#39;<b><span style="color: blue;">Alamat Anda</span></b> &#39;;<br />simpleCart.noHP = &#39;<b><span style="color: blue;">081 xxxx xxxx</span></b>&#39;;<br />simpleCart.urlFacebook = &#39;<b><span style="color: blue;">http://www.facebook.com/pages/your faceboo</span></b>k&#39;;<br />simpleCart.urlTwitter = &#39;<b><span style="color: blue;">https://twitter.com/your twitter</span></b>&#39;;<br />simpleCart.akunbank1 = &#39;<b><span style="color: blue;">Bank A</span></b>&#39;;<br />simpleCart.norek1 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek1 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank A</span></b>&#39;;<br />simpleCart.akunbank2 = &#39;<b><span style="color: blue;">Bank B</span></b>&#39;;<br />simpleCart.norek2 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek2 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank B</span></b>&#39;;<br />simpleCart.akunbank3 = &#39;<b><span style="color: blue;">Bank C</span></b>&#39;;<br />simpleCart.norek3 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek3 = &#39;<span style="color: blue;"><b>Nama Pemilik Rekening Bank C</b></span>&#39;;<br />simpleCart.akunbank4 = &#39;<b><span style="color: blue;">Bank D</span></b>&#39;;<br />simpleCart.norek4 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek4 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.akunbank5 = &#39;<b><span style="color: blue;">Bank E</span></b>&#39;;<br />simpleCart.norek5 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek5 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.akunbank6 = &#39;<b><span style="color: blue;">Bank F</span></b>&#39;;<br />simpleCart.norek6 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek6 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.urlReferrer = &#39;http://www.maskolis.com&#39;;<br />simpleCart.businessName = &#39;<b><span style="color: blue;">Nama Toko Online Anda</span></b>&#39;;<br />simpleCart.formatsmsKonfirmasi= &#39;(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)&#39;;<br />simpleCart.contohformatsmsKonfirmasi= &#39;Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 &#39;;<br />simpleCart.catatanTambahanInvoice= &#39;(Have a nice day for you and I hope you enjoy it)&#39;;<br />simpleCart.cartHeaders = [&quot;Name&quot;, &quot;thumb_image&quot; , &quot;Quantity_input&quot; , &quot;Total&quot;, &quot;remove&quot; ];</div></div></div><br /><div style="text-align: justify;">Ganti kode <b><span style="color: blue;">warna biru</span></b> diatas dengan data Anda dan blog Anda.<br /><br /><b>Fungsi Reply Komentar</b><br /><br />Untuk mengaktifkan fungsi reply pada kotak komentar pada kedua template ini cari Blog ID masing-masing demo template ini. Untuk <b>Johny Palelu Peang</b> : <span style="color: red;"><b>2047062320562941851</b></span> dan <b>Johny Pink Store</b> : <b><span style="color: red;">5422099799591763959</span></b>. Silahkan cari kode blog ID itu di <b>Edit HTML</b> pada template demo, kemudian ganti dengan Blog ID Anda masing-masing. Dan terakhir untuk widget <b>popular post</b>, centang hanya thumbnail, kotak <i><b>snippet biarkan kosong</b></i>.<br /><br />Oya hampir lupa, untuk mengisi widget <b>Bawah Slider</b> dan <b>Product Category</b> tinggal ketik label pada kolom widget tersebut.<br /><br />Kedua template ini tersedia untuk dua pilihan sistem pembayaran online, yang satu menggunakan invoice email seperti yang terlihat pada demo, dan menggunakan pembayaran melalui Paypal (demonya nggak ada karena kebanyakan bikin blog nanti). Buat yang kemarin request template Toko Online warna ungu silahkan dipakai, kalau nggak cocok yah nggak apa-apa buat koleksi aja, buat bungkus kacang juga boleh, buat dijelek-jelekin juga boleh, buat diomelin juga boleh.... ngomong apa sih????<br /><br />Silahkan tinggalkan pesan jika masih ada yang mau ditanyakan, atau <a href="http://kauman0506.blogspot.com/2011/04/mengapa-komentar-tidak-harus-dibalas.html#" target="_blank">baca tata cara komentar dulu disini </a>sebelum mengisi kotak komentar yang tersedia.</div><br /><b>Penting untuk diperhatikan bagi pengguna kedua template diatas :</b><br /><ol><li>Buatlah sebuah page atau halaman statis dengan judul : <b><a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">Terima Kasih</a></b>. </li><li>Isi terserah Anda, contoh bisa dilihat disini <a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">http://johnysip-deh.blogspot.com/p/terima-kasih.html</a></li><li>Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.</li><li><b><a href="http://www.maskolis.com/2012/12/download-template-toko-online-dengan.html" target="_blank">Download Template Toko Online Dengan Invoice Email</a> </b></li></ol>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-8905736641331575092013-01-05T11:42:00.000-08:002013-02-17T16:36:36.048-08:00Modifikasi 3 Template Valid HTML5<div style="text-align: justify;"><span class="awal">P</span>ertama saya akan jelaskan dulu apa itu HTML5 dan kenapa kita harus memakai HTML versi terbaru? HTML sendiri adalah singkatan dari <b>Hyper Text Markup Language</b>. HTML bukanlah termasuk bahasa pemrograman, karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode yang dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak mempunyai struktur pemrograman yang umum ada pada sebuah bahasa pemrograman standar. HTML hanyalah kumpulan dari beberapa instruksi yang dapat dipakai untuk merubah format suatu naskah atau dokumen.</div><br /><div style="text-align: justify;">Saat ini HTML telah menjadi standar yang banyak digunakan secara luas untuk menampilkan halaman web atau situs. HTML juga bisa diartikan sebagai kumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Oleh karena itu, untuk dapat membuka dokumen yang ditulis dalam format HTML maka kita perlu sebuah tool yaitu berupa browser seperti <i>Opera, Mozilla, Google Chrome, Internet Explorer</i> dan lain-lain.</div><br /><b>Tentang HTML5 dan Fungsinya</b><br /><br /><div style="text-align: justify;">Dengan semakin berkembangnya teknologi saat ini, format HTML pun dituntut mampu memberikan informasi yang akurat untuk setiap dokumen yang dibaca. W3C atau <b>Word Wide Web Consortium</b> sebagai pengembang XHTML 2.0 dan <b>WHATWG</b> sepakat untuk bekerja sama membuat HTML versi terbaru, yaitu HTML5. Pengembangan format HTML menjadi HTML5 bertujuan untuk memperbaiki teknologi HTML agar dapat mendukung teknologi multimedia terbaru. Selain itu HTML5 dapat mengurangi penggunaan plugin-plugin <i>third party</i> pada HTML sehingga dapat mempercepat kinerja sebuah web atau situs. Plugin-plugin tersebut misalnya <i>Microsoft Silverlight, Adobe Flash, Java</i> dan sebagainya.</div><br />Bagi pengembangan website atau blog, format HTML5 juga memberikan beberapa kemudahan, misalnya pada bagian awal file HTML sebelumnya kita harus menulis coding DOCTYPE yang panjang, seperti ini :<br /><div style="text-align: left;"><blockquote class="tr_bq"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </blockquote></div> Pada HTML5, DOCTYPE dapat ditulis lebih ringkas<br /><blockquote class="tr_bq"><!DOCTYPE html> </blockquote>Kemudian pada baris berikutnya HTML lama biasanya seperti ini<br /><div style="text-align: left;"><blockquote class="tr_bq"><html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> </blockquote></div>Versi HTML5 bisa lebih simple menjadi<br /><blockquote class="tr_bq"><html expr:dir='data:blog.languageDirection'> </blockquote><br /><b>Validitas HTML sebuah Blog </b><br /><br /><div style="text-align: justify;">Sekarang kita menuju ke validasi HTML, validitas sebuah situs atau web bukanlah merupakan suatu keharusan. Awalnya saya bingung, kenapa sih blog mesti valid struktur HTML nya? Kenyataan memang dari beberapa situs besar, bahkan Google sendiri mempunyai sekian puluh error dalam halamannya. Tetapi mempunyai Page Rank tinggi, lalu kenapa kita harus memikirkan Validasi HTML? Apakah Validasi HTML yang biasa ditest melalui validator W3C itu berpengaruh pada Search Engine Google?</div><br /><div style="text-align: justify;">Silahkan cari sendiri alasannya di internet ya, soalnya sampai saat ini masih terjadi pro kontra, apakah validitas sebuah blog perlu atau tidak. Kalau saya sih perlu, coba sekarang silahkan cek di Google Analytics, ada bermacam-macam jenis browser yang telah mengakses blog anda. Disitu Anda akan kehilangan beberapa persen pembaca yang kesulitan melihat blog anda dari browser mereka. Maka validasi HTML akan menjamin tampilan blog akan sama di semua browser. Melalui validasi html, semua browser, bahkan yang paling tua sekalipun akan bisa membaca dokumen blog yang Anda kelola dengan mudah</div><br /><div style="text-align: justify;">Wah artikel ini bakalan panjang, saya cut sampai disini penjelasan tentang HTML5 dan validasi HTML. Bagi yang masih percaya kalau validitas HTML sebuah blog sangat berpengaruh pada artikel kita di mata SERPs atau SEO, yah silahkan dibuat se-minimal mungkin error margin pada kode HTML Anda. Bagi yang tidak begitu peduli dengan validitas ya silahkan saja, tidak apa-apa. Sebagai kesimpulan, adalah sebuah gagasan yang bagus untuk memiliki validasi HTML pada situs Anda untuk memeriksa kesalahan dan membersihkan coding yang tidak perlu. <b>Dan bagi Anda yang ingin mencoba keberuntungan apakah blog yang Anda kelola Valid HTML atau tidak, silahkan menuju link dibawah ini</b> :</div><br /><div style="text-align: center;"><a href="http://validator.w3.org/" target="_blank"><span style="font-size: large;"><b>http://validator.w3.org/</b></span></a></div><br /><b>Modifikasi Template Tipe Magazine Valid HTML5</b><br /><br /><div style="text-align: justify;">Setelah nulis muter-muter tidak ada ujung pangkalnya, sekarang saya akan bagikan kepada Anda disini, 3 buah template lama dari <b>Creating Website</b> yang tadinya masih memakai format HTML lama, saya ganti menjadi HTML5 dan yang pasti validitasnya bisa dicek nanti. Bentuk dan model template ini sama persis dengan yang sudah saya bagikan tidak ada yang berubah, tapi codingnya yang berbeda, silahkan langsung saja :</div><br /><span style="font-size: large;"><b>Johny Sompret Banget</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7JrkyDiNLgPO70RxbkGy6Q2fT41VqUIfLkOCLull4JFxOK4auLClLPO-p2WQ0ThWHTm6j_KEjOKkyGRKTTsZLG8GSrw3dX75-iRdmhis3X5iWktF7-x42zCD6ZktBkcrMWdaUbnIeO4/s1600/Johny+Sompret+Banget.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="banget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM7JrkyDiNLgPO70RxbkGy6Q2fT41VqUIfLkOCLull4JFxOK4auLClLPO-p2WQ0ThWHTm6j_KEjOKkyGRKTTsZLG8GSrw3dX75-iRdmhis3X5iWktF7-x42zCD6ZktBkcrMWdaUbnIeO4/s1600/Johny+Sompret+Banget.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnysompret-banget.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://mas-template.blogspot.com/2012/08/johny-sompret-banget.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: center;"><b><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjohnysompret-banget.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3" target="_blank">Test Vallidasi HTML5 W3C</a></b></div><br /><div style="text-align: center;"><b><a href="http://www.maskolis.com/2012/08/2-template-kurang-kerjaan.html" target="_blank">Cuztomisation Template</a></b></div><br /><span style="font-size: large;"><b>Johny Kena Banned </b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijkp7IJOxuXp7jhHnGxNbVOAIkby-zrr8eXpz4AsRlHMIdvZHYeWw4AJBOcFQJv0rUgfWWq7NFkpLuhyphenhyphenIbV731N03GJx-6nht2LYX53nzHeQxHll4J7fAeUPtADo1xg7BQM306N44l4tVo/s1600/Johny+Kena+Banned.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny kena banned" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijkp7IJOxuXp7jhHnGxNbVOAIkby-zrr8eXpz4AsRlHMIdvZHYeWw4AJBOcFQJv0rUgfWWq7NFkpLuhyphenhyphenIbV731N03GJx-6nht2LYX53nzHeQxHll4J7fAeUPtADo1xg7BQM306N44l4tVo/s1600/Johny+Kena+Banned.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnykena-banned.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://mas-template.blogspot.com/2012/09/johny-kena-banned.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: center;"><b><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjohnykena-banned.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3" target="_blank">Test Vallidasi HTML5 W3C</a></b></div><br /><div style="text-align: center;"><b><a href="http://www.maskolis.com/2012/09/inilah-2-template-bingung-mau-dikasih.html" target="_blank">Cuztomisation Template</a></b></div><br /><span style="font-size: large;"><b>Johny Sompret</b></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8_aCF5o0eLzRxl37qXw2ZGqZVMLRewWCLp7v9n5RsVkds5qVSqvwXjxzApsijCvRUY74U9nLoCEqbSV178YI8SRgvPiKdqpGRv9HbLve-qJKPzGOj4RCLPDnJ5tis3g-Th2Ao389O8A/s1600/Johny+Sompret.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="johny sompret" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8_aCF5o0eLzRxl37qXw2ZGqZVMLRewWCLp7v9n5RsVkds5qVSqvwXjxzApsijCvRUY74U9nLoCEqbSV178YI8SRgvPiKdqpGRv9HbLve-qJKPzGOj4RCLPDnJ5tis3g-Th2Ao389O8A/s1600/Johny+Sompret.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-sompret.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://mas-template.blogspot.com/2012/06/johny-sompret.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: center;"><b><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjohny-sompret.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.3" target="_blank">Test Vallidasi HTML5 W3C</a></b></div><br /><div style="text-align: center;"><b><a href="http://www.maskolis.com/2012/06/3-template-paling-sompret-di-dunia.html" target="_blank">Cuztomisation Template</a></b></div><br /><div style="text-align: justify;">Ketiga template diatas, sudah saya modifikasi sehingga valid secara HTML5. Bukan jaminan 100% jika Anda memakai ketiga template diatas, blog Anda juga akan mempunyai validasi HTML, semuanya tergantung pengguna. Paling tidak saya sudah membuang kode-kode error yang ada pada template-template diatas, Anda tinggal menyesuaikan jika ada penambahan kode di <b>Edit HTML</b> maupun pada widget. Silahkan dicoba bagi yang tertarik dan semoga bermanfaat.</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-92060389902139024962012-12-30T23:54:00.000-08:002013-02-17T16:36:36.136-08:00Download Template Toko Online Dengan Invoice Email<div style="text-align: justify;"><span class="awal">T</span>emplate-template toko online blogger dengan fasilitas shopping cart ini awalnya saya buat dengan metode pembayaran via Paypal. Karena pembayaran lewat Paypal sampai saat ini hanya support untuk mata uang tertentu, terutama top currency (Dollar, Euro dan Pounds) sehingga bagi pengguna template yang memasang harga produknya dengan mata uang lokal sebagai alat transaksi, fitur cart menjadi tidak berfungsi dan kesannya hanya sebagai pemanis blog saja.</div><br /><div style="text-align: justify;">Nah, agar fitur shopping cart disini masih bisa berfungsi bukan hanya sebagai pemanis blog, saya sudah modifikasi template-template tersebut dengan merubah menjadi sistem pemberitahuan lewat email atau bahasa kerennya <b>invoice email</b>. Untuk lebih jelasnya, silahkan baca artikel saya sebelumnya <a href="http://www.maskolis.com/2012/12/2-toko-online-modifikasi-dengan-invoice.html" target="_blank">2 Template Toko Online Modifikasi dengan Invoice Email</a>. Dan silahkan klik blog demo dibawah, klik <b>add to cart</b> salah satu produk yang ada di blog demo, lalu klik <b>Order Email</b> yang ada pada keranjang belanja (shopping cart).</div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnysip-deh.blogspot.com/" target="_blank">Demo Template with Invoice Email</a></span></b></div><br /><div style="text-align: justify;">Jika Anda tertarik, dibawah ini template-template toko online yang sudah saya modifikasi dengan fasilitas invoice email (tapi demonya masih menggunakan Paypal), keempat template ini khusus untuk mata uang Rupiah (Rp) :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtDr6yQw2aZ5NSdZPCMV6u0swF4vcT1giJ_8xPAm6r3A2Kvk1o4jcc4OfZTjX_j2PneYi5dWWWou8keO0Q_tEBLK5etuE77F0vaBwGFldy_95ZU16SEPDxjUD6ZLjYeAZ-kIgV9Us2uM/s1600/Johny+Blackstore.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtDr6yQw2aZ5NSdZPCMV6u0swF4vcT1giJ_8xPAm6r3A2Kvk1o4jcc4OfZTjX_j2PneYi5dWWWou8keO0Q_tEBLK5etuE77F0vaBwGFldy_95ZU16SEPDxjUD6ZLjYeAZ-kIgV9Us2uM/s320/Johny+Blackstore.jpg" width="320" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-blackstore.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mediafire.com/?lz341hrzdocgdw2" target="_blank">Download Johny Blackstore Invoice Email</a></span></b></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjEg_KsFsTAMX8V-ahx8lqYAuHzRq9EGdEBILZd8nx1azV88zB8SJ2wVQduv3tYQsvDFhHSeuQz9tLVv5jlLtJghIxX8E0HVJtR_RTzeDL8j1A5JPKdz2j0G0-TykrblYf0U9CGG_Qaw/s1600/Johny+Magstore.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjEg_KsFsTAMX8V-ahx8lqYAuHzRq9EGdEBILZd8nx1azV88zB8SJ2wVQduv3tYQsvDFhHSeuQz9tLVv5jlLtJghIxX8E0HVJtR_RTzeDL8j1A5JPKdz2j0G0-TykrblYf0U9CGG_Qaw/s1600/Johny+Magstore.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-magstore.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mediafire.com/?6t84cmt1lhedtiv" target="_blank">Download Johny Magstore Invoice Email</a></span></b></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqyLEiAuSIRtdNWoVF8-slCWqeNmOOfqi8DAlDkYExtUIb4WpbK1F0YDKtRMIToERy4x_I9lGB_XMeyMTrc-y63H9u2jQVAkK61JlJxGGBtlWSYlJTuZ63ez0a0UY__14K105GvEUsiM/s1600/Johny+Crott.png" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqyLEiAuSIRtdNWoVF8-slCWqeNmOOfqi8DAlDkYExtUIb4WpbK1F0YDKtRMIToERy4x_I9lGB_XMeyMTrc-y63H9u2jQVAkK61JlJxGGBtlWSYlJTuZ63ez0a0UY__14K105GvEUsiM/s320/Johny+Crott.png" width="320" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://jjohnycrott.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mediafire.com/?dctbd2fdtyni52t" target="_blank">Download Johny Crott Invoice Email</a></span></b></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkrvJN8cxZNMX2NFiZ2Nxo279lzG5qMjPHs76uNMOZCMzwxrqXm99RJnIaq9qOmClHW83TUHSUdBpsnEZS8tdwvXUOoPILdSYThmdz9WRBz61W_uzUvbSnQlP9oJOzcnAHb1EvuavuMI/s1600/Johny+Ganteng+Cart_1348581456265.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkrvJN8cxZNMX2NFiZ2Nxo279lzG5qMjPHs76uNMOZCMzwxrqXm99RJnIaq9qOmClHW83TUHSUdBpsnEZS8tdwvXUOoPILdSYThmdz9WRBz61W_uzUvbSnQlP9oJOzcnAHb1EvuavuMI/s1600/Johny+Ganteng+Cart_1348581456265.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnygantengstore-cart.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mediafire.com/?djkfmaqcobczee8" target="_blank">Download Johny Ganteng Cart Invoice Email</a></span></b></div><br /><div style="text-align: justify;">Jika Anda pemakai salah satu template diatas, dan sudah memodifikasi template tersebut, sehingga jika download ulang akan merubah warna dan semua susunan widget dan yang lain. Anda tinggal download template yang dipakai diatas, kemudian cari kode yang saya tambahkan pada template tersebut, copy-kan ke template Anda. Demikian artikel singkat kali ini, selamat mencoba dan semoga bermanfaat.</div><br /><b>Penting untuk diperhatikan bagi pengguna template-template diatas :</b><br /><ol><li>Buatlah sebuah page atau halaman statis dengan judul : <b><a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">Terima Kasih</a></b>. </li><li>Isi terserah Anda, contoh bisa dilihat disini <a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">http://johnysip-deh.blogspot.com/p/terima-kasih.html</a></li><li>Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.</li><li><b><a href="http://www.maskolis.com/2012/12/2-toko-online-modifikasi-dengan-invoice.html" target="_blank">2 Template Toko Online Modifikasi dengan Invoice Email Terbaru</a> </b></li></ol>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-30045800010069573022012-12-30T03:05:00.000-08:002013-02-17T16:36:36.222-08:002 Template Toko Online Modifikasi dengan Invoice Email<div style="text-align: justify;"><span class="awal">D</span>ari beberapa template Toko Online dengan shopping cart yang saya bagikan sebelumnya, banyak kendala yang dihadapi, khususnya bagi mereka yang menggunakan mata uang non top currency (<b>dollar, Euro dan Pounds</b>). Khusus untuk kali ini, saya akan membagikan 2 buah template Toko Online Cart dengan menggunakan fasilitas <b>Invoice Email</b>. Singkatnya begini, jika ada pesanan lewat fitur shopping cart Anda akan menerima langsung lewat email tanpa harus membuat form order, dan pesanan pembeli sesuai dengan produk yang di order lewat fitur shopping cart. Kelebihan lain adalah seorang pemesan pun juga akan menerima email dari barang yang dibelinya.</div><br /><div style="text-align: justify;">Untuk kali ini, saya memodifikasi 2 buah template yang pernah saya bagikan sebelumnya, yaitu <a href="http://www.maskolis.com/2012/05/johny-blackstore-template-toko-online.html" target="_blank">Johny Blackstore</a> dan <a href="http://www.maskolis.com/2012/05/johny-magstore-template-magazine-untuk.html" target="_blank">Johny Magstore</a> khusus untuk mata uang <b>Rupiah (Rp)</b>. Oke langsung saja ya</div><br /><b><span style="font-size: large;">Johny Sip Deh</span></b><br /><br /><div style="text-align: justify;">Template ini persis sama dengan <a href="http://www.maskolis.com/2012/05/johny-blackstore-template-toko-online.html" target="_blank">Johny Blackstore</a>, hanya beda warnanya saja dan tambahan fitur <i>related post</i> di bawah postingan. Untuk tutorial cara membuat postingan dan pemasangan widget yang ada pada template ini, silahkan dibuka artikel <b><a href="http://www.maskolis.com/2012/05/johny-blackstore-template-toko-online.html" target="_blank">Johny Blackstore, Template Toko Online Asal Jadi</a></b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtvwMPbjyy6tkAulrcBhNo6ibqitvCiYO_57Tb7hSTjcqcFS2vOnt-nhHgbogG7pXFBQjCGHv3sTzQKS1sxe-uy1xdNNoRkioixemr5IQbNnH8zLtS5C6PX5S13chl3EdCuivSa0LmkA/s1600/Johny+Sip+Deh.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtvwMPbjyy6tkAulrcBhNo6ibqitvCiYO_57Tb7hSTjcqcFS2vOnt-nhHgbogG7pXFBQjCGHv3sTzQKS1sxe-uy1xdNNoRkioixemr5IQbNnH8zLtS5C6PX5S13chl3EdCuivSa0LmkA/s1600/Johny+Sip+Deh.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnysip-deh.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2012/12/johny-sip-deh.html" target="_blank">Download</a></span></b></div><br />Simpan semua file javascript pada template ini pada Google Code sendiri, download filenya : <br /><br /><div style="text-align: center;"><b><a href="http://www.mediafire.com/?bdytbeeb5e5211e" target="_blank">Download Javascript</a></b></div><br /><div style="text-align: justify;">Saya akan menjelaskan cara kerja shopping cart dengan menggunakan fitur email invoice secara sistematis disini. Sebagai contoh kasus, saya memesan barang lewat cart pada demo template diatas seperti gambar berikut ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkmZzgG_FdqkMWGzJv_oGLINnRvlNmdnofXhHtcYnTDTIiIOeDLKIg0SX0keOBuSsBPhip1ZXlOxDLVZANDuCIkR_zbMfrUMnoR2rMfO7nOw9ChYgsthJwO6VadOL2PeakPYq0O0XvUY/s1600/pesan+produk.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkmZzgG_FdqkMWGzJv_oGLINnRvlNmdnofXhHtcYnTDTIiIOeDLKIg0SX0keOBuSsBPhip1ZXlOxDLVZANDuCIkR_zbMfrUMnoR2rMfO7nOw9ChYgsthJwO6VadOL2PeakPYq0O0XvUY/s1600/pesan+produk.jpg" /></a></div><br /><div style="text-align: justify;">Setelah klik "<b>Order Email</b>", si pemesan diharuskan untuk mengisi formulir yang muncul seperti <i>pop up </i>berikut ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDOFN28myUlzT4qmHWiXoPGQdJvTxYd2uBCP_bYLbjIXCXNe9CF8_hcV-gQCo9RG5bFiY448n_AfP0SdaVmQ-yJyldHlakD6MaQj3oAPynniW_tIuH_rserJht9FyNQZ00yqFrI3loVI/s1600/pop+up+pemesan.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDOFN28myUlzT4qmHWiXoPGQdJvTxYd2uBCP_bYLbjIXCXNe9CF8_hcV-gQCo9RG5bFiY448n_AfP0SdaVmQ-yJyldHlakD6MaQj3oAPynniW_tIuH_rserJht9FyNQZ00yqFrI3loVI/s1600/pop+up+pemesan.jpg" /></a></div><br /><div style="text-align: justify;">Kemudian klik <b>OK</b> button, setelah itu si pemesan akan diarahkan untuk mengisi <b>email, nama, alamat, nomer telepon</b> yang bisa dihubungi. Setelah semuanya diisi, pemesan akan mendapatkan notifikasi email seperti gambar berikut ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOwZe3lxTRtMGRkHdnDlk4khDbUTdG_370LgKbbRHXJE2BSg42bl8wzCgV5oCy7HifhPtm8Jk5IPI6ZZCPXuS4d-Pm2vWEOgpe0mPJQhS7FnHBP7TycSeFk0fO5rJbCYO1Mq0Aj766t0/s1600/email+pemesan.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOwZe3lxTRtMGRkHdnDlk4khDbUTdG_370LgKbbRHXJE2BSg42bl8wzCgV5oCy7HifhPtm8Jk5IPI6ZZCPXuS4d-Pm2vWEOgpe0mPJQhS7FnHBP7TycSeFk0fO5rJbCYO1Mq0Aj766t0/s1600/email+pemesan.jpg" /></a></div><br /><div style="text-align: justify;"><b>Perhatikan produk-produk yang dipesan, sama dengan barang yang dipesan lewat shopping cart</b>. Dan si pemilik toko online, dalam hal ini sebagai penjual pasti juga akan menerima notifikasi email dari pembeli atau pemesan produk seperti gambar berikut ini :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEd6uPZKZXrEQaTzAzlQ09fPsBYBZPQGnFKI7DiQdF1YvXQe1vJf7I5E0Moa7FXQHbm7OcxlcQV7IN-UoEKIYw1yTbF8NCr464mThPsj_5Aj_H85Vutltg-_-45eTQIIlLjRIOIdqB9E/s1600/email+penjual.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEd6uPZKZXrEQaTzAzlQ09fPsBYBZPQGnFKI7DiQdF1YvXQe1vJf7I5E0Moa7FXQHbm7OcxlcQV7IN-UoEKIYw1yTbF8NCr464mThPsj_5Aj_H85Vutltg-_-45eTQIIlLjRIOIdqB9E/s1600/email+penjual.jpg" /></a></div><br /><div style="text-align: justify;">Setelah proses diatas, pemesan dan penjual tinggal melakukan finalisasi proses transaksi melalui data-data yang sudah tercantum dalam email yang dikirim.</div><br /><b>Setting Template</b><br /><br />Untuk merubah setelan transaksi online pada template ini, cari kode berikut ini pada <b>Edit HTML</b> :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">simpleCart.email = &#39;<b><span style="color: blue;">ncmajid@gmail.com</span></b>&#39;;<br />simpleCart.checkoutTo = Email;<br />simpleCart.currency = IDR;<br />simpleCart.urlWebsite = &#39;<span style="color: blue;"><b>http://johnysip-deh.blogspot.com</b></span>&#39;;<br />simpleCart.taxRate = <b><span style="color: blue;">0.02</span></b>;<br />simpleCart.shippingFlatRate = <b><span style="color: blue;">3.25</span></b>;<br />simpleCart.shippingQuantityRate = <b><span style="color: blue;">1.00</span></b>;<br />simpleCart.alamatPemilik = &#39;<b><span style="color: blue;">Alamat Anda</span></b> &#39;;<br />simpleCart.noHP = &#39;<b><span style="color: blue;">081 xxxx xxxx</span></b>&#39;;<br />simpleCart.urlFacebook = &#39;<b><span style="color: blue;">http://www.facebook.com/pages/your faceboo</span></b>k&#39;;<br />simpleCart.urlTwitter = &#39;<b><span style="color: blue;">https://twitter.com/your twitter</span></b>&#39;;<br />simpleCart.akunbank1 = &#39;<b><span style="color: blue;">Bank A</span></b>&#39;;<br />simpleCart.norek1 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek1 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank A</span></b>&#39;;<br />simpleCart.akunbank2 = &#39;<b><span style="color: blue;">Bank B</span></b>&#39;;<br />simpleCart.norek2 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek2 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank B</span></b>&#39;;<br />simpleCart.akunbank3 = &#39;<b><span style="color: blue;">Bank C</span></b>&#39;;<br />simpleCart.norek3 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek3 = &#39;<span style="color: blue;"><b>Nama Pemilik Rekening Bank C</b></span>&#39;;<br />simpleCart.akunbank4 = &#39;<b><span style="color: blue;">Bank D</span></b>&#39;;<br />simpleCart.norek4 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek4 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.akunbank5 = &#39;<b><span style="color: blue;">Bank E</span></b>&#39;;<br />simpleCart.norek5 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek5 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.akunbank6 = &#39;<b><span style="color: blue;">Bank F</span></b>&#39;;<br />simpleCart.norek6 = &#39;<b><span style="color: blue;">No Rekening</span></b>&#39;;<br />simpleCart.namarek6 = &#39;<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>&#39;;<br />simpleCart.urlReferrer = &#39;http://www.maskolis.com&#39;;<br />simpleCart.businessName = &#39;<b><span style="color: blue;">Nama Toko Online Anda</span></b>&#39;;<br />simpleCart.formatsmsKonfirmasi= &#39;(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)&#39;;<br />simpleCart.contohformatsmsKonfirmasi= &#39;Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 &#39;;<br />simpleCart.catatanTambahanInvoice= &#39;(Have a nice day for you and I hope you enjoy it)&#39;;<br />simpleCart.cartHeaders = [&quot;Name&quot;, &quot;thumb_image&quot; , &quot;Quantity_input&quot; , &quot;Total&quot;, &quot;remove&quot; ];</div></div></div><br /><div style="text-align: justify;">Kode <b><span style="color: blue;">warna biru</span></b> diatas yang harus Anda ganti, sesuaikan dengan kebutuhan data Anda sehingga konsumen lebih percaya untuk membeli produk dari toko online yang Anda kelola.</div><br />Dan jika Anda ingin setting pembayaran dengan Paypal tinggal merubah kode berikut : <br /><pre>simpleCart.checkoutTo = Email;<br />simpleCart.currency = IDR;</pre>Ganti email dengan Paypal dan rubah IDR dengan mata uang top currency yang Anda inginkan. Hapus data pada kode diatas yang tidak diperlukan.<br /><br /><div style="text-align: justify;">Untuk mengaktifkan fungsi reply komantar pada template ini, ganti <i><b>Blog ID</b></i> pada template ini pada <b>Edit HTML</b> (jangan lupa <i>centang expand widget template</i>) : <b><span style="color: #cc0000;">4486072018930286729</span></b> setelah ketemu ganti dengan blog ID anda</div><br /><b><span style="font-size: x-large;">Johny Muantab</span></b><br /><br /><div style="text-align: justify;">Template ini modifikasi dari <a href="http://www.maskolis.com/2012/05/johny-magstore-template-magazine-untuk.html" target="_blank">Johny Magstore</a>, bedanya template ini menggunakan satu sidebar di sebelah kiri. Cara membuat postingan dan memasang widget sama persis dengan <a href="http://www.maskolis.com/2012/05/johny-magstore-template-magazine-untuk.html" target="_blank">Johny Magstore</a> template, untuk itu silahkan jika Anda ingin menggunakan template ini dibuka kembali artikel <b><a href="http://www.maskolis.com/2012/05/johny-magstore-template-magazine-untuk.html" target="_blank">Johny Magstore, Template Magazine untuk Toko Online</a></b>.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__Mybp7VDzD3dwX2Tn-6rlfwZIG0rNR4wmK3SOyJkpj4hbNUEwct0T2SIr2OYUlve_HaoknvseRZsz64PEFM-86ql-PQFmP7tirhPmsGAyHb2aDDuPyZ-J0-g1B3KRpOlWi0iK7EXUds/s1600/Johny+Mantuab.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__Mybp7VDzD3dwX2Tn-6rlfwZIG0rNR4wmK3SOyJkpj4hbNUEwct0T2SIr2OYUlve_HaoknvseRZsz64PEFM-86ql-PQFmP7tirhPmsGAyHb2aDDuPyZ-J0-g1B3KRpOlWi0iK7EXUds/s1600/Johny+Mantuab.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johny-mantuab.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2012/12/johny-muantab.html" target="_blank">Download</a></span></b></div><br />Simpan semua file javascript pada template ini pada Google Code sendiri, download filenya : <br /><br /><div style="text-align: center;"><b><a href="http://www.mediafire.com/?61f2epo0mt4k644" target="_blank">Download Javascript</a></b></div><br /><div style="text-align: justify;">Template ini sama dengan template <b>Johny Sip Deh</b>, menggunakan invoice email payment method (sistem pembayaran lewat email). </div><br /><b>Setting Template</b><br /><br />Cari kode di bawah ini pada <b>Edit HTML</b>, untuk mengoptimalkan data mengenai toko online yang Anda kelola :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;">simpleCart.email = '<b><span style="color: blue;">ncmajid@gmail.com</span></b>';<br />simpleCart.checkoutTo = Email;<br />simpleCart.currency = IDR;<br />simpleCart.urlWebsite = '<b><span style="color: blue;">http://johny-mantuab.blogspot.com</span></b>';<br />simpleCart.alamatPemilik = '<b><span style="color: blue;">Alamat Anda</span></b> ';<br />simpleCart.noHP = '<b><span style="color: blue;">081 xxxx xxxx</span></b>';<br />simpleCart.urlFacebook = '<b><span style="color: blue;">http://www.facebook.com/pages/your facebook</span></b>';<br />simpleCart.urlTwitter = '<b><span style="color: blue;">https://twitter.com/your twitter</span></b>';<br />simpleCart.akunbank1 = '<b><span style="color: blue;">Bank A</span></b>';<br />simpleCart.norek1 = '<b><span style="color: blue;">No Rekening Bank A</span></b>';<br />simpleCart.namarek1 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank A</span></b>';<br />simpleCart.akunbank2 = '<b><span style="color: blue;">Bank B</span></b>';<br />simpleCart.norek2 = '<b><span style="color: blue;">No Rekening Bank B</span></b>';<br />simpleCart.namarek2 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank B</span></b>';<br />simpleCart.akunbank3 = '<b><span style="color: blue;">Bank C</span></b>';<br />simpleCart.norek3 = '<b><span style="color: blue;">No Rekening Bank C</span></b>';<br />simpleCart.namarek3 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank C</span></b>';<br />simpleCart.akunbank4 = '<b><span style="color: blue;">Bank D</span></b>';<br />simpleCart.norek4 = '<b><span style="color: blue;">No Rekening Bank D</span></b>';<br />simpleCart.namarek4 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>';<br />simpleCart.akunbank5 = '<b><span style="color: blue;">Bank E</span></b>';<br />simpleCart.norek5 = '<b><span style="color: blue;">No Rekening Bank E</span></b>';<br />simpleCart.namarek5 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>';<br />simpleCart.akunbank6 = '<b><span style="color: blue;">Bank F</span></b>';<br />simpleCart.norek6 = '<b><span style="color: blue;">No Rekening Bank F</span></b>';<br />simpleCart.namarek6 = '<b><span style="color: blue;">Nama Pemilik Rekening Bank D</span></b>';<br />simpleCart.urlReferrer = 'http://www.maskolis.com';<br />simpleCart.businessName = '<b><span style="color: blue;">Nama Toko Online Anda</span></b>';<br />simpleCart.formatsmsKonfirmasi= '(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)';<br />simpleCart.contohformatsmsKonfirmasi= 'Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 ';<br />simpleCart.catatanTambahanInvoice= '(Have a nice day for you and I hope you enjoy it)';<br />simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];</div></div></div>Ganti kode <b><span style="color: blue;">warna biru</span></b> diatas dengan data Anda.<br /><br /><div style="text-align: justify;">Kekurangan dari sistem pembayaran dengan invoice email ini, Anda harus mempunyai hosting sendiri untuk menyimpan script email invoice yang berupa file PHP. Karena blogger belum support PHP dan tidak ada hosting gratis khusus untuk menyimpan file PHP. Untuk kedua template ini saya menggunakan hosting dari blog dimana saya berperan sebagai admin disitu. <b>Jika Anda ingin mengganti atau merubah kalimat dan bahasa yang ada di email invoice, syarat utama anda harus mempunyai file PHP invoice email dan hosting untuk menyimpannya</b>.</div><br /><div style="text-align: justify;"><b>Awalnya saya ragu untuk membagikan kedua template ini</b>, karena jika hosting yang saya pakai untuk menyimpan file PHP ini tidak diperpanjang bisa-bisa fitur invoice email yang saya pasang pada template itu tidak lagi berfungsi. Mengingat masih banyak pembuat toko online blogger berbayar yang menekuni bidang ini sebagai sumber mata pencaharian, tidak etis rasanya jika saya membuka semua rahasia pembuatan toko online blogger dengan invoice email payment method ini. Jadi silahkan Anda membuat sendiri file PHP dengan menggunakan dreamweaver, atau masuk ke situs <b>http://stackoverflow.com</b> disana banyak sekali dasar-dasar untuk membuat sebuah file PHP untuk email invoice.</div><br /><div style="text-align: justify;">Demikian tadi dua template toko online dengan model pembayaran lewat invoice email, jika ada yang ingin ditanyakan silahkan tulis pesan Anda di kotak komentar. Selamat mencoba dan selamat menikmati Tahun Baru 2013 bagi yang merayakan.... semoga bermanfaat.<br /><br /><b>Penting untuk diperhatikan bagi pengguna kedua template diatas :</b><br /><ol><li>Buatlah sebuah page atau halaman statis dengan judul : <b><a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">Terima Kasih</a></b>. </li><li>Isi terserah Anda, contoh bisa dilihat disini <a href="http://johnysip-deh.blogspot.com/p/terima-kasih.html" target="_blank">http://johnysip-deh.blogspot.com/p/terima-kasih.html</a></li><li>Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.</li><li><b><a href="http://www.maskolis.com/2012/12/download-template-toko-online-dengan.html" target="_blank">Download Template Toko Online Dengan Invoice Email</a> </b></li></ol></div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-78618462889306462802012-12-25T02:22:00.000-08:002013-02-17T16:36:36.308-08:00Membuat Menu Accordion Tanpa Edit HTML<div style="text-align: justify;"><span class="awal">K</span>ali ini saya akan memberikan tutorial membuat menu accordion yang saya pasang pada template <a href="http://johnysimple-magazine2.blogspot.com/" target="_blank">Johny Simple Magazine 2</a> dan <a href="http://johnymagazine2.blogspot.com/" target="_blank">Johny Magazine 2</a> tanpa harus masuk ke <b>Edit HTML</b>. Awalnya kedua template tersebut menggunakan <i>simple accordion</i> dari <b>dezinerfolio</b>, belakangan ini tidak berfungsi. Sampai sekarang saya tidak tahu kenapa, padahal semua javascriptnya sudah saya ganti dengan yang baru. Akhirnya saya menemukan accordion menu yang lebih sederhana, tidak perlu masuk ke <b>Edit HTML</b>, tinggal masuk ke <b>layout</b> kemudian pilih <b>HTML/Javascript</b>, letakkan kodenya disitu.... sudah jadi menu accordionnya.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHCc35lHrbeJQdtnahZKEI8nfVJODJJLa-FRyoDfEJjWsteblXdhMoPH9HjiITrBzaCCM0fBGgv-f1fVkvUR-f_9eN7gY2FuXLSF-z6DMLFMAAaEA4ljNdHZCo5esUCKE3Rm6ool6LSE/s1600/menu+accordion.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="menu accordion" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHCc35lHrbeJQdtnahZKEI8nfVJODJJLa-FRyoDfEJjWsteblXdhMoPH9HjiITrBzaCCM0fBGgv-f1fVkvUR-f_9eN7gY2FuXLSF-z6DMLFMAAaEA4ljNdHZCo5esUCKE3Rm6ool6LSE/s1600/menu+accordion.jpg" /></a></div><br /><div style="text-align: justify;">Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya (wah bahasanya jadul banget ya) :</div><ol><li>Login ke Blogger dengan akun Anda</li><li>Masuk ke <b>Layout</b>, pilih <b>HTML/Javascript</b></li><li>Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) : <div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><style type="text/css"><br />#accordion{width:100%;margin:auto;border:0px solid white}<br />#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwY9pxrDCqL2c1OBnRPDdrKpm3tPWuWDQqLA51p8ue5VSZ6Bvy5SYobu-1KwA3wd6vJJZhZVwltlIw4sdLCsyu1hI0_A8Gjk-sxCsRqbuIqHjvupuQqaDOLNrqYJFCIa-kOnEgS70-9lA/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}<br />#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}<br />#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}<br />#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}<br />#accordion .content li a:hover {text-decoration:none;color:#000;}<br />#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5mriMS-pAHYbfBBDxAISMR0Kdn7aSZxY7KT1LHs0C1oWUbISzw19hO1IcQgohg1p4fpY9wER5dW03oXf2VI-anOIcLAOliwQpcUr1VfQyiDUaF2_LqfJsgzKzMBbH2pQY3QHfFNqO6s/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}<br /></style><br /><script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /><script type='text/javascript'><br />$(function() {<br />$('#accordion .content').hide();<br />$('#accordion h2:first').addClass('active').next().slideDown('slow');<br />$('#accordion h2').click(function() {<br />if($(this).next().is(':hidden')) {<br />$('#accordion h2').removeClass('active').next().slideUp('slow');<br />$(this).toggleClass('active').next().slideDown('slow');<br />}<br />});<br />});<br /></script><br /><div id="accordion"><br /><h2>Title 1</h2><br /><div class="content"><br /><b>Isi konten 1</b><br /></div><br /><div id="accordion"><br /><h2>Title 2</h2><br /><div class="content"><br /><b>Isi konten 2</b><br /></div><br /><div id="accordion"><br /><h2>Title 3</h2><br /><div class="content"><br /><b>Isi konten 3</b><br /></div><br /><div id="accordion"><br /><h2>Title 4</h2><br /><div class="content"><br /><b>Isi konten 4</b><br /></div><br /><div id="accordion"><br /><h2>Title 5</h2><br /><div class="content"><br /><b>Isi konten 5</b><br /></div><br /></div></div></div></div></div></div></div></div></li><li>Terakhir <b>Save</b>, lihat hasilnya</li></ol><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnysimple-magazine2.blogspot.com/" target="_blank">Demo Accordion Menu Light</a></span></b></div><br /><div style="text-align: justify;"><u><b>Keterangan :</b></u><br /><ul><li><b>Title</b> : Judul heading menu accordion </li><li><b>Isi konten</b> : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget) </li></ul>Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi Anda yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya,. Lebih lengkapnya seperti kode di bawah ini :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><style type="text/css"><br />#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwoyhTGdCJabtc6PlUbMFozg5A4501dViL-qSrEFO7ytX9mbiCjTHvqBBLUH-czAfnJfR7woeVoI4VHkDnx5kPe-HWzKliJwYLvia9jGrgGLykHwlweNdM2RWrALEPyVn5Xb37pC1Urdo/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2mNtitsRsCLdL76N4G4A2bTnkU_Z9WzzkI16UFibOjimpadt4l0m3SnA99OPaLkZoiDNHuMjiQBMn_4a6Th-2PmuynqxCA1co4TXz3PM6-DFL5kAYyNnz5nIAUJuVksSHfV0WTyE4dI/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style><br /><script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /><script type='text/javascript'><br />$(function() {<br />$('#accordion .content').hide();<br />$('#accordion h2:first').addClass('active').next().slideDown('slow');<br />$('#accordion h2').click(function() {<br />if($(this).next().is(':hidden')) {<br />$('#accordion h2').removeClass('active').next().slideUp('slow');<br />$(this).toggleClass('active').next().slideDown('slow');<br />}<br />});<br />});<br /></script><br /><div id="accordion"><br /><h2>Title 1</h2><br /><div class="content"><br /><b>Isi konten 1</b><br /></div><br /><div id="accordion"><br /><h2>Title 2</h2><br /><div class="content"><br /><b>Isi konten 2</b><br /></div><br /><div id="accordion"><br /><h2>Title 3</h2><br /><div class="content"><br /><b>Isi konten 3</b><br /></div><br /><div id="accordion"><br /><h2>Title 4</h2><br /><div class="content"><br /><b>Isi konten 4</b><br /></div><br /><div id="accordion"><br /><h2>Title 5</h2><br /><div class="content"><br /><b>Isi konten 5</b><br /></div><br /></div></div></div></div></div></div></div></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://johnymagazine2.blogspot.com/" target="_blank">Demo Accordion Menu Dark</a></span></b></div><br />Bagi yang ingin menyimpan javascript menu accordion silahkan download link dibawah :<br /><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://www.mediafire.com/?44db0j0bc4cc99p" target="_blank">Download Javascript Accordion Menu</a></span></b></div><br /><div style="text-align: justify;">Demikian tutorial singkat membuat menu accordion kali ini, dan bagi Anda yang menggunakan kedua template <b>Johny Simple Magazine 2</b> dan <b>Johny Magazine 2</b> dapat mengupdate menu accordion-nya dengan tutorial ini.</div><br /><b>Pengumuman :</b><br /><div style="text-align: justify;">Bagi yang masih mengalami masalah dengan blog, karena ada permintaan password dan username pada blog yang dipakai, mending download ulang aja ya. Semua template sudah saya perbaiki kecuali 3 template pertama saya, yaitu <b>Johny Simplesite</b>, <b>Johny Portal 1</b>, dan <b>Johny Magazine</b> (lupa password emailnya, jadi nggak bisa diperbaiki).</div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0tag:blogger.com,1999:blog-5455100826281685320.post-83714389578206410172012-12-24T01:35:00.000-08:002013-02-17T16:36:36.394-08:002 Template Ini Saya Bagikan Karena banyak yang Minta<div style="text-align: justify;"><span class="awal">D</span>ua template yang saya maksud adalah <a href="http://collectortemplate.blogspot.com/" target="_blank">Collector Template</a> dan <a href="http://maskolis.blogspot.com/" target="_blank">Maskolis Template</a> yang dipakai adik saya di <a href="http://maskolis.blogspot.com/" target="_blank">http://maskolis.blogspot.com</a>. Daripada saya kasih satu per satu lewat email mendingan langsung saja saya bagi disini. Collector template awalnya saya bagi hanya untuk <a href="http://www.maskolis.com/2012/06/gallery-showcase-template-creating.html" target="_blank">blog pilihan yang menggunakan template dari Creating Website</a>. Dan untuk Maskolis Template, adik saya sudah memberikan ijin untuk dibagikan secara gratis disini. So, silahkan download bagi yang berminat, <b>saya jamin tidak ada lagi gangguan jika Anda menggunakan kedua template ini</b>, seperti file javascript yang rusak seperti kemarin. Karena tidak ada javascript yang saya simpan di Google Code.</div><br /><span style="font-size: large;"><b>Maskolis Template</b></span><br /><br /><div style="text-align: justify;">Template ini mirip dengan <a href="http://www.maskolis.com/2012/07/johny-kenthir-template-ramai-seperti.html" target="_blank">Johny Kenthir Template</a> cuma beda di header dan navigasi, cara memasang widget-widget yang ada di template ini pun juga sama. Untuk tutorial cara pasang widget pada template ini, silahkan Anda buka artikel <a href="http://www.maskolis.com/2012/07/johny-kenthir-template-ramai-seperti.html" target="_blank">Johny Kenthir, Template Ramai Seperti Pasar Tradisional</a>.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggqbU9USE0rldkcCYaysmUoMJaR_CrhI9b5p3M5oMxWwazYgrqWLWXz9d1IZk5EliyYkuizP2gJAYb2RGrLyB2sXfsJk45qImKyde2hEcbDCn5pmPEawQpS_UDHHXWJOB3qfaNDHlanxQ/s1600/maskolis+template.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="magazine template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggqbU9USE0rldkcCYaysmUoMJaR_CrhI9b5p3M5oMxWwazYgrqWLWXz9d1IZk5EliyYkuizP2gJAYb2RGrLyB2sXfsJk45qImKyde2hEcbDCn5pmPEawQpS_UDHHXWJOB3qfaNDHlanxQ/s1600/maskolis+template.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://maskolis.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2012/12/maskolis-template.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Pada bagian paling atas ada News Ticker atau <b>headline news</b>. Untuk mengganti dengan headline dari blog Anda masuk ke <b>Edit HTML </b>(<i>gunakan control + F untuk mempersingkat</i><b>)</b>, cari URL <b><span style="color: blue;">http://maskolis.blogspot.com</span></b>. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau <i><b>search box</b></i> cari URL <b><span style="color: blue;">http://maskolis.blogspot.com</span></b> ganti dengan URL blog Anda. Untuk mengganti kotak email berlangganan, letaknya persis diatas slider carousel, cari kode dibawah ini pada <b>Edit HTML</b> (jangan lupa untuk mencentang kotak expand widget templates) :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<b><span style="color: blue;">blogspot/htbgh</span></b>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='<b><span style="color: blue;">blogspot/htbgh</span></b>'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form></div></div></div><b><i>Keterangan :</i></b><br />Warna <span style="color: blue;">biru</span> : ganti dengan alamat feed anda.<br /><br />Untuk mengganti navigasi menu warna biru pada template ini, cari kode berikut di Edit HTML :<br /><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><li><a href='#'>Goggle +</a></li><br /><li class='hr'/><br /><li><a href='#'>Contact on Facebook</a></li><br /><li class='hr'/><br /><li><a href='#'>Contact on Twitter</a></li><br /></ul><br /></li><br /><li><a href='http://maskolis.blogspot.com/search/label/renungan'>Renungan</a></li><br /><li><a href='http://maskolis.blogspot.com/search/label/misteri'>Misteri</a></li><br /><li><a href='http://maskolis.blogspot.com/search/label/fakta'>Fakta</a></li><br /><li><a href='http://maskolis.blogspot.com/search/label/astronomi'>Astronomi</a></li><br /><li><a href='http://maskolis.blogspot.com/search/label/kehidupan'>Kehidupan</a></li><br /><li><a class='trigger' href='http://maskolis.blogspot.com/search/label/kesehatan'>Kesehatan</a><br /><ul><br /><li><a href='http://maskolis.blogspot.com/search/label/mitos'>Mitos</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/olahraga'>Olahraga</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/seksiologi'>Seksiologi</a></li><br /></ul><br /></li><br /><li><a href='http://maskolis.blogspot.com/search/label/teknologi'>Teknologi</a></li><br /><li><a class='trigger' href='http://maskolis.blogspot.com/search/label/berita'>Berita</a><br /><ul><br /><li><a href='http://maskolis.blogspot.com/search/label/aneh'>Berita Aneh</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/dalam%20negeri'>Dalam Negeri</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/luar%20negeri'>Luar Negeri</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/sejarah'>Sejarah</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/serba%20serbi'>Serba Serbi</a></li><br /><li class='hr'/><br /><li><a href='http://maskolis.blogspot.com/search/label/Sosial%20Budaya'>Sosial Budaya</a></li> </div></div></div><br /><span style="font-size: large;"><b>Collector Template</b></span><br /><br /><div style="text-align: justify;">Awalnya, template ini saya bagikan khusus untuk penggna template Creating Website saja, itu pun hanya 20 orang. Tapi karena banyaknya permintaan lewat email, saya memutuskan untuk membagikan untuk semua. <b>Semoga yang sudah menerima template ini tidak keberatan</b>. Template ini khusus saya design untuk blog kontent gallery, silahkan mau dipakai buat gallery apa saja terserah penggunanya.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK0_bzrrrMqma3buVbG90vUkRwHg50moBYBfZAROlzv9OtYc9gU9F8SeRq8q-TrdfFb8Doz1rXMMopE9D_JKw9RAYb9aiodvvZnYXiz501KSD1EnkDjvRRAljD4Ymm-US1qUBvj3hvJXo/s1600/Collector+Template.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="gallery template blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK0_bzrrrMqma3buVbG90vUkRwHg50moBYBfZAROlzv9OtYc9gU9F8SeRq8q-TrdfFb8Doz1rXMMopE9D_JKw9RAYb9aiodvvZnYXiz501KSD1EnkDjvRRAljD4Ymm-US1qUBvj3hvJXo/s1600/Collector+Template.jpg" /></a></div><br /><div style="color: blue; text-align: center;"><b><span style="font-size: medium;"><a href="http://collectortemplate.blogspot.com/" target="_blank">Demo</a> <span style="color: black;">|</span> <a href="http://www.mastemplate.com/2012/12/collector-template.html" target="_blank">Download</a></span></b></div><br /><div style="text-align: justify;">Untuk membuat postingan pastikan Anda dalam posisi <b>HTML </b>(bukan compose). Di bawah ini adalah contoh dalam membuat postingan pada template ini :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div align="center"><br /></div><br /><div class="badge sblogger"><br /></div><br /><img class="latest_img" height="250" src="<span style="color: #38761d;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEslEM7Otm7uF0X62uradlF4r3kW_oWuBb9u89Ro6mr95NDu02BJwzl7CAtTpUiYbjZYgr2TT1k4NAX-p-1_LTuY1JkHHr0T5g_T61NIphNmF7L1r4-OVheq3jGGHnqlSpWwM6pxgYBWwm/s1600/Johny+Darkmovie.jpg</span>" width="310" /><br /><div class="fullpost"><br /><ul class="postbuttons"><br /><li><a class="livedemo" href="<span style="color: blue;">http://johny-darkmovie.blogspot.com/</span>" rel="nofollow" target="_blank">Live Demo</a> </li><br /><li><a class="download" href="<span style="color: #cc0000;">http://www.box.com/s/qjhv758fzmne8lt3xpa8</span>" rel="nofollow" target="_blank">Download Theme</a></li><br /></ul><br /></div><br /><b>TEMPLATE FEATURES</b><br />Silahkan diisi deskripsi template atau terserah anda.........</div></div></div>Perhatikan kode script yang saya beri warna diatas :<br /><ol><li>Warna <span style="color: #38761d;">hijau</span> : adalah URL gambar yang harus anda ganti. Setelah gambar anda upload masukkan URL gambar pada kode yang berwana hijau.</li><li>Warna <span style="color: blue;">biru</span> : adalah URL blog demo</li><li>Warna <span style="color: #cc0000;">merah</span> : URL untuk download</li></ol><div style="text-align: justify;">Di sebelah kiri gambar postingan terdapat space untuk iklan 300 x 250, dan di bawahnya terdapat juga untuk space iklan 468 x 60. Untuk mengganti dengan iklan Anda, cari kode berikut di <b>Edit HTML</b> (jangan lupa centang kotak expand widget templates) :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div style='float:left; margin-right:35px; padding-top:10px'><br /><b>Script iklan 300 x 250 (di parse dulu)</b><br /><div style='position:absolute; ; padding-top:15px; padding-left:95px'><br /><b>Script iklan 468 x 60 (di parse dulu)</b><br /></div><br /></div></div></div></div><br /><div style="text-align: justify;">Sekarang widget kategori dan widget kategori warna di bawah menu navigasi. Untuk widget kategori di sidebar kiri, masukkan kode ini pada <b>layout</b> >> <b>Javascript/HTML</b> :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div class="mas-tp-dhead-wrap"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P1pWg27u19WpP6UfKKR6103hWH1H44lXBMeNAz2cYabTwA8hsbc8r86lzM0Ou5rXg8xdiBNJRkKNl3ga5GnLpVN2GRQfCdv5gK-s3iLQQlwo457LKFJP1aUX0AEkzzUGwZO-bNuuSljy/s1600/lb-one-px.gif" alt="" /><span>Template Categories</span></div><br /><ul id="mas-op-box"><br /> <li><a href="#">Columns</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/1 Column?max-results=12" title="1 Column Blogger Templates">1 Column</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/2 Columns?max-results=12" title="2 Columns Blogger Templates">2 Columns</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/3 Columns?max-results=12" title="3 Columns Blogger Templates">3 Columns</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/4 Columns?max-results=12" title="4 Columns Blogger Templates">4 Columns</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Sidebars</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/1 Left Sidebar?max-results=12" title="1 Left Sidebar Blogger Templates">1 Left Sidebar</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/2 Left Sidebar?max-results=12" title="2 Left Sidebar Blogger Templates">2 Left Sidebar</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/1 Right Sidebar?max-results=12" title="1 Right Sidebar Blogger Templates">1 Right Sidebar</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/2 Right Sidebar?max-results=12" title="2 Right Sidebar Blogger Templates">2 Right Sidebar</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Left and Right Sidebar?max-results=12" title="Left and Right Sidebar Blogger Templates">Left and Right Sidebar</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Width</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Fixed Width?max-results=12" title="Fixed Width Blogger Templates">Fixed</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Fluid Width?max-results=12" title="Fluid Width Blogger Templates">Fluid</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Topics</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Fashion?max-results=12" title="Fashion Blogger Templates">Fashion</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Movie?max-results=12" title="Movie Blogger Templates">Movie</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/News?max-results=12" title="News Blogger Templates">News</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Natural?max-results=12" title="Natural Blogger Templates">Natural</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Sport?max-results=12" title="Sport Blogger Templates">Sport</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Video?max-results=12" title="Video Blogger Templates">Video</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Cartoon?max-results=12" title="Cartoon Blogger Templates">Cartoon</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Music?max-results=12" title="Music Blogger Templates">Music</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Books?max-results=12" title="Books Blogger Templates">Books</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Animals?max-results=12" title="Animals Blogger Templates">Animals</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Money?max-results=12" title="Money Blogger Templates">Money</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Health?max-results=12" title="Health Blogger Templates">Health</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Game?max-results=12" title="Game Blogger Templates">Game</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Girly?max-results=12" title="Girly Blogger Templates">Girly</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Culture?max-results=12" title="Culture Blogger Templates">Culture</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Fantasy?max-results=12" title="Fantasy Blogger Templates">Fantasy</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Gadgets?max-results=12" title="Gadgets Blogger Templates">Gadgets</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Software?max-results=12" title="Software Blogger Templates">Software</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Space?max-results=12" title="Space Blogger Templates">Space</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Personal?max-results=12" title="Personal Blogger Templates">Personal</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Online Store?max-results=12" title="Online Store Blogger Templates">Online Store</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Vector?max-results=12" title="Vector Blogger Templates">Vector</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Transparent?max-results=12" title="Transparent Blogger Templates">Transparent</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Features</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Ads Ready?max-results=12" title="Ads Ready Blogger Templates">Ads Ready</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Custom Navbar?max-results=12" title="Custom Navbar Blogger Templates">Custom Navbar</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/CEO Ready?max-results=12" title="CEO Ready Blogger Templates">CEO Ready</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Page Number?max-results=12" title="Page Number Blogger Templates">Page Number</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Slideshow?max-results=12" title="Slideshow Blogger Templates">Slideshow</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Bookmark Ready?max-results=12" title="Bookmark Ready Blogger Templates">Bookmark Ready</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Slideshow?max-results=12" title="Slideshow Blogger Templates">Slideshow</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Footer Columns?max-results=12" title="Footer Columns Blogger Templates">Footer Columns</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Styles</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Magazine?max-results=12" title="Magazine Blogger Templates">Magazine</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Free Premium?max-results=12" title="Free Premium Blogger Templates">Free Premium</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Gallery?max-results=12" title="Gallery Blogger Templates">Gallery</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Simple?max-results=12" title="Simple Blogger Templates">Simple</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Wordpress Look?max-results=12" title="Wordpress Look Blogger Templates">Wordpress Look</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Unique?max-results=12" title="Unique Blogger Templates">Unique</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Elegant?max-results=12" title="Elegant Blogger Templates">Elegant</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Fancy?max-results=12" title="Fancy Blogger Templates">Fancy</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Floral?max-results=12" title="Floral Blogger Templates">Floral</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Light Weight?max-results=12" title="Light Weight Blogger Templates">Light Weight</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Web 2.0?max-results=12" title="Web 2.0 Blogger Templates">Web 2.0</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Colours</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Red?max-results=12" title="Red Blogger Templates">Red</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Green?max-results=12" title="Green Blogger Templates">Green</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Black?max-results=12" title="Black Blogger Templates">Black</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/White?max-results=12" title="White Blogger Templates">White</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Orange?max-results=12" title="Orange Blogger Templates">Orange</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Brown?max-results=12" title="Brown Blogger Templates">Brown</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Pink?max-results=12" title="Pink Blogger Templates">Pink</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Gray?max-results=12" title="Gray Blogger Templates">Gray</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Yellow?max-results=12" title="Yellow Blogger Templates">Yellow</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Violet?max-results=12" title="Violet Blogger Templates">Violet</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Blue?max-results=12" title="Blue Blogger Templates">Blue</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Activities</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Education?max-results=12" title="Education Blogger Templates">Education</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Business?max-results=12" title="Business Blogger Templates">Business</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Entertainment?max-results=12" title="Entertainment Blogger Templates">Entertainment</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Photography?max-results=12" title="Photography Blogger Templates">Photography</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Sport?max-results=12" title="Sport Blogger Templates">Sport</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Travel?max-results=12" title="Travel Blogger Templates">Travel</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Gaming?max-results=12" title="Gaming Blogger Templates">Gaming</a></li><br /> </ul><br /> </li><br /> <br /> <li><a href="#">Holidays</a><br /> <ul><br /> <li><a href="http://mas-template.blogspot.com/search/label/Christmas?max-results=12" title="Christmas Blogger Templates">Christmas</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/St. Valentine?max-results=12" title="St. Valentine Blogger Templates">St. Valentine</a></li><br /> <li><a href="http://mas-template.blogspot.com/search/label/Halloween?max-results=12" title="Halloween Blogger Templates">Halloween</a></li><br /> </ul><br /> </li><br /></ul></div></div></div><div style="text-align: justify;">Dan untuk widget kategori warna di bawah navigasi masukkan kode berikut pada kolom kosong di bawah navigasi :</div><div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div><div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;"><div style="display: none;"><div id='mas-color-sec' style='background:#2c2626; position:relative; height:54px; border:1px solid #120f0f; border-bottom:1px solid #473d3d; border-right:1px solid #473d3d;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-image: -moz-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -ms-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -o-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3b3232),color-stop(100%,#2c2626)); background-image: -webkit-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: linear-gradient(to bottom,#3b3232 0,#2c2626 100%);'><br /><div id='mas-color-box-thumb' style='position:absolute;left:10px; top:10px;'><br /><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P1pWg27u19WpP6UfKKR6103hWH1H44lXBMeNAz2cYabTwA8hsbc8r86lzM0Ou5rXg8xdiBNJRkKNl3ga5GnLpVN2GRQfCdv5gK-s3iLQQlwo457LKFJP1aUX0AEkzzUGwZO-bNuuSljy/s1600/lb-one-px.gif' style='width:34px;height:34px;background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdbuSZaieWQ30ODI3DvKXbDG5QxdZTIGl5JUNmJXC4aCYgShWLCfmjzTVwcSLT_PL2g5ohKfRJdli9JtRVRmVRknfMFlhYD2f1qqF7sLvxdV3ww3wVfeOU1JQmmB82tAK6hvU13QIcaFy/s1600/bg-color.png)'/></div><br /><h2 class='pmz' style='position:absolute;font-family:arial,sans-serif;font-size:15px;text-shadow:0px -1px 0px #000;line-height:20px;color:#b69786;left:56px;top:5px;border:none'>Choose your template colour</h2><br /><style type='text/css'><br />.pmz{ padding:0; margin:0;}<br />#mas-color-sb{list-style:none; position:absolute; left:56px; bottom:10px; float:left;}<br />#mas-color-sb li{ height:13px; width:30px; display:block; margin:0 9px 0 0; float:left;-moz-border-radius: 2px;-webkit-border-radius:2px;border-radius: 2px; filter:alpha(opacity=100);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:1;}<br />#mas-color-sb li:hover{filter:alpha(opacity=70);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);opacity:0.7;}<br /></style><br /><ul class='pmz' id='mas-color-sb'><br /><a href='http://mas-template.blogspot.com/search/label/Red?max-results=12'><li style='background:#ff0000' title='Red'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Green?max-results=12'><li style='background:#008000' title='Green'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Black?max-results=12'><li style='background:#000000' title='Black'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Orange?max-results=12'><li style='background:#ffa500' title='Orange'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Brown?max-results=12'><li style='background:#a52a2a' title='Brown'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Pink?max-results=12'><li style='background:#ffc0cb' title='Pink'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Gray?max-results=12'><li style='background:#808080' title='Gray'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Yellow?max-results=12'><li style='background:#ffff00' title='Yellow'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Violet?max-results=12'><li style='background:#ee82ee' title='Violet'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/Blue?max-results=12'><li style='background:#0000ff' title='Blue'></li></a><br /><a href='http://mas-template.blogspot.com/search/label/White?max-results=12'><li style='background:#FFFFFF' title='White'></li></a><br /></ul><br /></div></div></div></div>Ganti URL pada kode diatas dengan URL blog Anda.<br /><br /><div style="text-align: justify;">Itu tadi dua template yang saya bagikan pada artikel kali ini, kedua template ini sebenarnya sudah lama dibuat tapi baru sekarang saya bagikan secara gratis. Kode javascript pada kedua template diatas tidak saya ringkas, jadi <b>aman dari gangguan banned dari Google Code</b>. Jika Anda ingin meringkasnya silahkan, jika ada yang belum tahu caranya silahkan baca artikel saya tentang <a href="http://www.maskolis.com/2012/05/mengatasi-loading-blog-dengan-google.html" target="_blank">Mengatasi Loading Blog dengan Google Code</a>. Sekian artikel saya kali ini selamat mencoba bagi yang berminat dan semoga bermanfaat.<br /><br />Satu permintaan saja dari saya :<br /><b>Mohon jangan dihilangkan kredit link pada template ini </b><br /><br /><b>And I do not forget to say :</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSrs0eZMn95UXNpyzTKDjJ5h3hLjA0CiuBNtDUbmkuhoLrHpvX_ZHqegjE74BGKlJagSkogMPfz69taGsKBFayKeAkbj9vF_K1nZkGr00aX-OpuM-61MMpSzpa7GhK1awexlk7KPYtlQ/s1600/Merry-Christmas-and-Happy-New-Year-2013.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="toko online blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSrs0eZMn95UXNpyzTKDjJ5h3hLjA0CiuBNtDUbmkuhoLrHpvX_ZHqegjE74BGKlJagSkogMPfz69taGsKBFayKeAkbj9vF_K1nZkGr00aX-OpuM-61MMpSzpa7GhK1awexlk7KPYtlQ/s1600/Merry-Christmas-and-Happy-New-Year-2013.jpg" /></a></div></div><div style="text-align: center;"><i>Picture by : http://123newyear.com/</i></div>Blog Dwihttp://www.blogger.com/profile/06507939069212440193noreply@blogger.com0