Diberdayakan oleh Blogger.
Tampilkan postingan dengan label template. Tampilkan semua postingan
Tampilkan postingan dengan label template. Tampilkan semua postingan
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/AVvXsEjFqcO4SnD4jAR236pOPysnyC3zoS24v0w70Ad-dZi5u_0ebk9opMi23JbHZeb_vhUbFXqcRJwU6qiZJiPMFptxlRt7Xk8a_MvxWxRHMeU-QZSC0Q0No18rAuIcR4OmzXGky9qekv0ymwc/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.......
Unknown template
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....
Unknown template