Kamis, 28 Maret 2013

2 Template Blogger Hasil Kreasi Bapak-Bapak


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








Demo | Download




Modified by : Kompi Ajaib









Demo | Download




Modified by : Panjz Online





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



Note :


  1. Untuk Template Darla Ferdana, template Anda tidak jadi saya publish disini karena link kredit dari blog ini nggak ada.

  2. Mas Adhy dan Mas Panjz tolong dibantu ya kalau ada yang tanya seputar template hasil modifikasi kalian. Saya mau istirahat ngeblog sebentar.


Sabtu, 23 Maret 2013

Inilah Pembuat Template Blogger yang Tidak Tanggung Jawab


Bagi Anda para blogger khususnya buat Anda para designer template, kelakuan orang ini sungguh menyebalkan dan jangan ditiru ya. Sebagai seorang pembuat template harusnya dia mampu mengakomodasi setiap pertanyaan si pengguna, sehingga jawaban yang keluar minimal bisa memberikan pencerahan dan dapat dipertanggung jawabkan kelak di akhirat..... Sekarang Anda perhatikan baik-baik screenshot di bawah ini, untung saja yang tanya bukan saya, kalau saya yang tanya sudah saya lempar bakiak orang itu :




template blogger

Selengkapnya bisa Anda baca disini




Nah sekarang waktunya saya akan memberikan klarifikasi rasional tentang kasus diatas, subyektif pastinya. Yang Pertama, jawaban diatas itu bisa keluar jika sifat usil saya kumat. Saya bukan orang yang selalu serius dalam menghadapi sesuatu, terkadang selingan itu perlu untuk meregangkan saraf-saraf yang kita paksa bekerja rodi seharian. Kata orang-orang dulu jangan terlalu serius nanti bisa cepet tua, jadinya seperti Om Adhy dan Om Mahfid, lihat aja rambutnya udah habis di makan usia.... hahahahaha. Menjalani kehidupan tetap dengan serius, tapi adakalanya perlu selingan (humor) untuk santai. Karena dengan humor, banyak sekat atau batas-batas formil menjadi semu.





Malah saya justru kadang heran, misalnya ketika menemukan sebuah komunitas dunia maya, entah itu komunitas blogger atau apalah. Nggak ada bercandanya blas, terkesan kaku, penuh retorika dengan bahasa yang normatif, disitu isinya orang-orang yang tegak lurus terus nggak ada menikungnya sama sekali. Kadang saya berpikir apa yang mereka cari, profesionalitas...??? Ini dunia maya bung, jangan terlalu berharap banyak. Tapi ya terserah, kalau selalu serius itu dapat memuaskan logika berpikir Anda, silahkan saja.





Penjelasan yang Kedua, mungkin karena saking banyaknya komentar yang masuk (sehari sampai 50 lebih), terkadang saya jadi bingung mana dulu yang dijadikan prioritas untuk dijawab, karena saking bingungnya kadang yang keluar adalah jawaban asal njeplak. Sekarang Anda bayangkan, aktivitas di dunia nyata yang sudah sangat menguras tenaga dan pikiran. Kemudian ketika Anda mulai berinteraksi di dunia maya dihadapkan pada persoalan yang menunggu untuk segera dijawab, apa nggak tambah pusing?







Oke saya sadar, ketika apa yang kita tawarkan atau tulis itu tidak sepenuhnya bisa dipahami dan diterima oleh semua orang. Misalnya ketika kita membuat sebuah opini tentang sebuah kondisi sosial yang sedang terjadi di negeri ini, tidak semua orang yang baca akan setuju dengan apa yang kita tulis. Pemahaman setiap orang pasti berbeda-beda, pro dan kontra pasti terjadi dan kita harus siap menerima segala konsekuensi itu, yang pasti kita harus mampu memberikan klarifikasi rasional dan bertanggung jawab sehingga tercipta sebuah konklusi yang bisa diterima semua pihak yang saling berseberangan.







Tulisan diatas sekedar iseng jangan hanya membaca judulnya yang provokatif, tulisan ini juga bukan berangkat dari suatu konflik dengan pihak tertentu apalagi pesanan orang, hanya sekedar untuk mengingatkan kepada diri sendiri agar tidak tinggi hati dan merasa paling benar/pintar. Kesimpulannya, buat Kang Jaka Zulham dan juga buat teman-teman yang lain. Lain kali kalau ada pertanyaan seputar template atau tutorial yang saya tulis di blog ini, langsung saja disertakan link blognya (jangan link hidup) jadi saya bisa langsung koreksi dimana letak kesalahannya.

Rabu, 20 Maret 2013

Floating Social Bookmark dengan Efek Easing

Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). 


floating social bookmark




Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
  1. Login ke Blogger

  2. Masuk ke Template >> Edit HTML (centang expand widget templates)

  3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

    .social-buttons {

        position: fixed;

        top: 130px;

        width: 45px;

        z-index: 9999;

    }

    .button-left {

        left: 0;

    }

    .button-right {

        right: 0;

    }

    .social-buttons #twitter-btn .social-icon,

    .social-buttons #facebook-btn .social-icon,

    .social-buttons #google-btn .social-icon,

    .social-buttons #rss-btn .social-icon,

    .social-buttons #pinterest-btn .social-icon,

    .social-buttons #youtube-btn .social-icon {

        background-color: #33353B;

        background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);

    }

    .button-left #facebook-btn span {

        background-position: right 10px;

    }

    .button-left #twitter-btn span {

        background-position: right -35px;

    }

    .button-left #google-btn span {

        background-position: right -127px;

    }

    .button-left #rss-btn span {

        background-position: right -80px;

    }

    .button-left #pinterest-btn span {

        background-position: 11px -177px;

    }

    .button-left #youtube-btn span {

        background-position: 11px -223px;

    }

    .button-right #facebook-btn span {

        background-position: 12px 10px;

    }

    .button-right #twitter-btn span {

        background-position: 11px -35px;

    }

    .button-right #google-btn span {

        background-position: 10px -127px;

    }

    .button-right #rss-btn span {

        background-position: 11px -80px;

    }

    .button-right #pinterest-btn span {

        background-position: 11px -177px;

    }

    .button-right #youtube-btn span {

        background-position: 11px -223px;

    }

    .social-buttons #facebook-btn:hover .social-icon {

        background-color: #3B5998;

    }

    .social-buttons #twitter-btn:hover .social-icon {

        background-color: #62BDB2;

    }

    .social-buttons #google-btn:hover .social-icon {

        background-color: #DB4A39;

    }

    .social-buttons #rss-btn:hover .social-icon {

        background-color: #FF8B0F;

    }

    .social-buttons #pinterest-btn:hover .social-icon {

        background-color: #D43638;

    }

    .social-buttons #youtube-btn:hover .social-icon {

        background-color: #C4302B;

    }

    .social-buttons a:hover .social-text {

        display: block;

    }

    .button-left .social-icon {

        -moz-transition: background-color 0.4s ease-in 0s;

        -webkit-transition: background-color 0.4s ease-in 0s;

        background-repeat: no-repeat;

        display: block;

        float: left;

        height: 43px;

        margin-bottom: 2px;

        width: 43px;

    }

    .button-left .social-text {

        display: none;

        float: right;

        font-size: 1em;

        font-weight: bold;

        margin: 11px 40px 11px 0px;

        white-space: nowrap;

    }

    .button-right .social-icon {

        -moz-transition: background-color 0.4s ease-in 0s;

        -webkit-transition: background-color 0.4s ease-in 0s;

        background-repeat: no-repeat;

        display: block;

        float: right;

        height: 43px;

        margin-bottom: 2px;

        width: 43px;

    }

    .button-right .social-text {

        display: none;

        float: left;

        font-size: 80%;

        font-weight: bold;

        margin: 11px 0 11px 40px;

        white-space: nowrap;

    }

    .social-buttons .social-text {

        color: #FFFFFF;

    }

  4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

    <script>

        $(window).load(function(){

            $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){

                $(this).stop();

                $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 

            });

            $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){

                $(this).stop();

                $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

            });

        });

    </script>
    Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.

  5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :

    <div class='social-buttons button-right hidden-phone hidden-tablet'>

    <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>

    <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>

    <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>

    <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>

    <span class='social-text'>Follow via Pinterest</span></span></a>

    <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>

    <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>

    </div>
    Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.

  6. Terakhir, Save Templates

Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.


Sekian dan semoga ada manfaatnya

Selasa, 19 Maret 2013

2 Simple Template Blogger Responsive


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




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




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



Pakdhe Johny




blogger template responsive







Karena template ini awalnya permintaan Pakdhe saya, namanya Pakdhe Johny. Fitur-fitur yang tersedia pada template ini :


  1. Camera Slideshow

  2. Floating Social Bookmark

  3. Responsive Layout (menurut saya)

  4. Banner iklan 728 x 90 di bawah header

  5. Artikel terkait dengan thumbnail

  6. Tag H1 dan H2 juga sudah dipasang

  7. Coba klik salah satu gambar di homepage, fitur apa itu namanya?

  8. Dan masih banyak lagi yang masih belum dipasang


Untuk mengaktifkan camera slideshow, cari kode ini di Edit HTML :


blogURL:'http://pakdhe-johny.blogspot.com/',

Ganti URL warna kuning diatas, dengan URL blog Anda. Dan untuk mengganti floating social bookmark dengan data-data Anda cari kode berikut di Edit HTML :






 <div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='https://www.facebook.com/your facebook' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERf0W4KxctffGTWO7lKgoUwBfOMy78r04kepNXR66RnhteeYJ-mzO8vS_Pt1iqOYF46j3RR-1slSPIAiKIXHzHCkmSAmMoBCZQ9Y_bwKPWWQRZC1dBxYv3Enj7WdtsDTkZvTKy7wu2wjS/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>

</div></div><div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='https://twitter.com/maskolis' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn59-T-M0VrG5yDZcXMXP5BHu8L0URBYs6CprLE6gUQCfpJoZcRcZHb2dZ6B44f3ya0pzNtJ5-3dtSVwiShm85PuFVrZ_EMt7Y6P_63SOOmT4Eo1andVxm2RLWjtxYMrUm9tn3AiRjQAO5/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>

</div></div><div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='https://plus.google.com/your googleplus/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodMuL8fPC22DnwratGHFRqazvLy8BXdcuISah7kLXsJQYdZDrlCwLvN3LvLf6y8SlGPRoFsauep0TOBxpnFXVcQjRiv-OpD_AHtl8UBCKVWeiXVr7WxCkCX5BEI2l9kmZD8htbOu3uoTs/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>

</div></div><div class='sosmed-kananrss' onmouseout='this.className=&apos;sosmed-kananrss&apos;' onmouseover='this.className=&apos;sosmed-kananrssc&apos;'><div class='sosmed-isirss'><a href='http://feeds.feedburner.com/maskolis/iqBg' target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png' title='Subscribe me'/></a><br/>

</div></div>



Ganti semua tulisan warna merah di atas dengan ID Anda.



Johny Ribet




blogger template responsive







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




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




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



TAMBAHAN :

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

Rabu, 13 Maret 2013

2 Template Blogger Responsive Gratis

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


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


Johny Ajaib



responsive template




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


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


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


responsive template


Anda bisa merubah jumlah post itu sesuai keinginan. Tapi mesti diingat, Anda harus sesuaikan juga dengan jumlah tampilan post widget daftar isi yang ada di bawahnya agar tidak terjadi double post pada halaman muka. Caranya, perhatikan kode ini pada Edit HTML (centang expand widget templates) :
for(var o=1;o<postsperpage;o++)
Perhatikan angka warna kuning diatas, sesuaikan dengan jumlah show at most yang Anda pilih. Dan untuk setting widget daftar isi, cari kode berikut ini pada Edit HTML (centang expand widget templates):
var showPostDate   = true,

    showComments   = true,

    idMode         = true,

    sortByLabel    = false,

    labelSorter    = "",

    loadingText    = "Loading...",

    totalPostLabel = "Total Post :",

    jumpPageLabel  = "Page",

    commentsLabel  = "Comments",

    rmoreText      = "Read more &#9658;",

    prevText       = "Prev",

    nextText       = "Next",

    siteUrl        = "http://johny-ajaib.blogspot.com/",

    postsperpage   = 9,

    numchars       = 160,

    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTO0ca3GIul8-HlbYse6o1L00oRUb9KvDH6FVm3B1S3VQvjFnF7XdWlObZmX-xVUhWgAMlX92ZoaO5oLrCmLsPaV55LCRHMFPytn0mhJVw_LaZGFK4-mcNIN6bA2vsENqbBmxWg0HOAU/s1600/no+image.jpg";
Keterangan :

  1. Warna Merah : Ganti dengan URL blog Anda

  2. Warna Hijau : Jumlah postingan keseluruhan pada halaman muka.

  3. Warna Biru : Jumlah karakter huruf pada widget daftar isi.

Untuk keterangan yang lain saya kira mudah, silahkan Anda sesuaikan dengan kebutuhan atau keinginan



Johny Asal Responsive



responsive template


Note :

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



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


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

Jumat, 08 Maret 2013

Artikel Lanjutan yang Kemarin


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



Johny Tubeprett




blogger template video




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





Cara posting video pada template ini sama persis dengan template Johny Crottube, jadi silahkan dibuka lagi artikel Johny Crottube, Template Iseng Sambil Nunggu Jerman Vs Yunani. Untuk pemasangan fitur lain yang ada pada template ini, silahkan simak penjelasannya berikut ini :


  1. Slider atas yang saya pasang pada template ini bekerja menampilkan recent post, jika Anda ingin merubah menampilkan per label/kategori, silahkan dibuka tutorial cara membuat slider vertikal disini.


  2. Widget "Type Your Label Here" yang di samping slider, seperti biasa masuk ke Layout, pilih kolom Type Your Label Here yang ada diatas blog post >> klik Edit, kemudian ketikkan label pada kotak itu, terakhir Save. Lihat gambar di bawah untuk lebih jelas :




    maskolis




  3. Widget Tab View kategori

    Pertama, untuk merubah judul tab (Adventure, Action, Bike Game dan seterusnya) cari kode berikut ini di Edit HTML :


    Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game"


    Setelah ketemu ganti tulisan warna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori.

    Kedua, untuk mengisi widget tab view dengan label yang ingin Anda pasang disitu, cari kode berikut pada Edit HTML (jangan lupa centang expand widget templates) :






    <div class='tab-wrapper'>

    <div class='tabber' id='tab1'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='tabber' id='tab2'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='tabber' id='tab3'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='tabber' id='tab4'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='tabber' id='tab5'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/comedy?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='tabber' id='tab6'>

    <script>

    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/jazz?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script></div>

    <div class='clear'/>

    </div></div>



    Ganti semua tulisan warna merah pada kode diatas, dengan label yang ingin Anda tampilkan.


  4. Widget Popular Post

    Masuk ke Layout >> pilih Popular Post >> centang hanya kotak thumbnail, biarkan kotak snippet kosong.


Johny Movie Prett




blogger template movie




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





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




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

Rabu, 06 Maret 2013

2 Template Blogger Gallery Bukan Responsif

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


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


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


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


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


Lha ini template yang mau dibagi mana?



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


blogger template movie




blogger template video




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


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



Tutorial Pemasangan Kedua Template Diatas

 

Subscribe to our Newsletter

Contact our Support

Email us: youremail@gmail.com

Our Team Memebers