Serial Petualangan Tiga Pendekar Kenthir

Tulisan ini hanya iseng nggak ada hubungannya dengan blogging, maksudnya biar kita refreshing dikit lah. Masa mau ngutak-atik blog mulu tiap hari. Lagian saya juga lagi tumpul nggak ada ide mau bikin apa. Tulisan ini juga saya tulis di blog planetkenthir.com blog komunitas saya bersama teman-teman yang tiap hari selalu dipenuhi dengan tawa dan canda, mentertawakan jaman yang sepertinya sudah diatur oleh orang-orang yang mempunyai wewenang, mengekang kita dalam berekspresi membuat manusia yang pada dasarnya lahir sebagai makluk Tuhan yang bebas menjadi dibatasi daya kreativitasnya.

Sudah lama saya sudah meninggalkan mereka untuk kegiatan blogging, mereka adalah keluarga saya di dunia maya. Kenapa mesti dinamakan kenthir? Kenthir lebih banyak untuk menekankan kegilaan daripada kengawuran. Kenapa kita mau dibilang kenthir?? Hemmm, jawabannya sangat sederhana karena hari-hari kita selalu penuh tawa, ditertawakan, mentertawakan, dan membuat ketawa, kadang ada sebagian yang ketawa sendirian……….. hahahahahahaha bukankah itu edan?? Kalau edan dan gendheng yang artinya juga gila, masih bisa diasosiasikan dengan kenekatan atau keberanian, tapi kenthir enggak. Kenthir merupakan perilaku antisosial, atau setidaknya menabrak pakem atau aturan umum yang berlaku. Tapi benarkah kita ini sepenuhnya sehat, “sane” atau waras?

Saya akan buat satu contoh cerita kenthir, cerita ini sangat panjang dan bersambung pula. Bagi yang belum baca seri sebelumnya bisa dibaca disini. Berikut cerita selengkapnya semoga dibaca sampai selesai, jangan seperti anak muda jaman sekarang yang lebih senang melihat gambar atau video daripada membaca. Kalau saya bisa, pasti sudah saya visualisasikan cerita ini lewat gambar atau video.

Setelah sekian lama tertunda, akhirnya sekuel petualangan 3 pendekar kenthir akan saya lanjutkan lagi. Sebenarnya ini karena banyak sekali permintaan dari penggemar yang dikirim lewat surat kaleng krupuk maupun ke PO BOX 012345678910. Pada cerita sebelumnya, pendekar Spiderte sedang bertarung melawan pendekar Andreaneda untuk memperebutkan Princess, terpaksa dihentikan karena princess ngantuk dan penulisnya capek setelah seharian menjadi kuli panggul di pasar. Pertarungan yang sangat sengit dan belum pernah terjadi di dunia persilatan. Selama dua hari dua malam belum ada tanda-tanda siapa yang bakal menjadi pemenang. Kedua pendekar kenthir itu mengerahkan semua jurus andalannya, spiderte dengan jurus andalannya bernafas dalam lendir dan pendekar Andreaneda dengan jurus joroknya menerobos semak-semak.


Pagi-pagi sekali kedua pendekar kenthir sudah berada di halaman kerajaan, mereka telah siap untuk bertarung kembali demi memperebutkan sang putri. Terlihat pendekar Spiderte sedang giat melatih jurus andalannya, sedangkan pendekar Andreaneda hanya duduk-duduk dan sesekali buang air kecil dan kentut. Tiba-tiba pendekar Andreaneda mendatangi spiderte, “Eh… pendekar bau, elu kagak bakal menang dah lawan gua. Mending nyerah aja, balik lagi ke kandang ngurusin kambing tuh udah pada mau beranak.”

Pendekar spiderte menghentikan latihannya, “Mana bisa, jurus jorok nggak mungkin bisa menang lawan jurus lendir gua. Elu yang mesti pulang tuh urusin onta udah pada minta kawin.”

Terjadi adu mulut antara kedua pendekar kenthir, karena merasa tidak bisa mengintimidasi, akhirnya pendekar Andreaneda berjalan kembali ke arah tempat duduknya. Setelah itu dia mengambil handphone beri-berinya, handphone kesayangannya hadiah waktu menang lomba balap kambing (lomba balapan sama kambing). Kemudian dia memencet tombol tett… toottt, tak berapa lama terdengar suara di HP nya, “Halo… ada apa ya, saya lagi sibuk nulis cerita nih.” Ternyata pendekar Andreaneda menghubungi penulis cerita ini.

“Wooii… bro, ini nanti siapa yang menang sih?” tanya pendekar Andreaneda.

“Yee… rahasia dunk. Masa gua kasih tau, ketahuan lu ya kalo ujian suka nyogok sama guru.” Kata penulis.

“Yah bro masa gitu aja kagak mau kasih tau sih? Gua buru-buru nih soalnya onta di rumah udah pada minta kawin. Udah gini aja, menangin gua deh, ntar lu gua kasih satu ekor anak onta.” Pendekar Andreaneda sedikit agak kesal.

“Wah sorry ya gua nggak terima sogokan, tapi kalo elu punya adik, kakak atau tetangga cewek yang cakep, gua pertimbangin dah.” penulis memberikan penawaran.

Pendekar Andreaneda berpikir sejenak, “Wah nggak ada bro, ada juga janda sama nenek-nenek langganan gua tiap malem, Itu juga udah 3 bulan gua belum bayar.”

“Ya udah kalau gitu, mendingan elu berlatih yang tekun dan rajin deh biar menang. Udah ya, gua mau nerusin cerita lagi.” Kata penulis sambil menutup telpon. Sedangkan pendekar Andreneda kesel bukan main,”Somprett…. dasar penulis mata keranjang, kagak mau diajak kerja sama. Awas lu ya kalo gua menang jadi mantu raja, gua blokir akunnya biar nggak bisa nulis lagi disini.”

Tak lama kemudian sang raja Ajinatha bersama princess dan rombongan tiba di pelataran kerajaan. Tak ketinggalan pula hulubalang dongo Mas Mus dan pengawal Andee. Mereka semua bersiap untuk menyaksikan pertarungan terakhir hingga titik lendir penghabisan kedua pendekar sakti memperebutkan princess, putri raja Ajinatha. Penonton juga sudah mulai berdatangan dari seluruh pelosok kerajaan menyaksikan siapa yang bakal jadi mantu kerajaan. Mulai dari bapak-bapak, ibu-ibu, anak-anak, nenek-nenek bahkan kambing dan onta kedua pendekar pun juga datang untuk memberikan support kepada kedua pendekar ini.

Raja Ajinatha kemudian menyuruh kedua pendekar itu untuk segera melanjutkan pertandingan. Kedua pendekar sudah bersiap, pertandingan kali ini dipimpin oleh seorang wasit, kebetulan yang terpilih menjadi wasit adalah dayang Minche. Hal ini dilakukan karena banyak sekali terjadi kecurangan pada pertandingan sebelumnya dan dayang Minche sudah terbiasa memimpin pertandingan catur antar dayang di kerajaan. Genderang pun ditabuh, kedua pendekar tersebut masuk ke dalam arena. Mereka beradu pandang kemudian saling cium.. eh saling meledek. Pertandinganun dimulai, pendekar Spiderte sangat bernafsu memenangkan pertandingan ini, belum apa-apa dia sudah berjongkok sambil nungging mengeluarkan jurus andalannya bernafas dalam lendir.

“Pendekar jorok rasakan jurus andalanku ini…” Sambill nungging pendekar Spiderte maju ke depan menyerang pendekar Andreaneda dengan pedang. Untung pendekar Andreaneda segera menghindar. Dia kemudian membalas dengan menusukkan pedangnya kearah lawan, dan berhasil masuk kedalam selangkangan pendekar Spiderte. Kemudian berusaha menusukan pedangnya ke arah biji Spiderte (kelemahan Spiderte terletak pada bijinya). Terdengar suara “Tiingg…” ternyata pendekar Spiderte memakai sempak baja, gagal usaha pertama pendekar Andreaneda kali ini.

Pertarungan berlangsung cukup alot dan seimbang. Sorak sorai penonton semakin menambah seru pertarungan. Tanpa terasa sudah 10 jam pertarungan itu berlangsung, Princess bosan juga melihatnya tanpa ada kepastian siapa yang bakal menang, kemudian dia berkata kepada ayahnya, “Ayahanda, saya bosan ingin jalan-jalan dulu cari angin, siapa tau nanti setelah saya pulang pemenangnya sudah ada.” Raja lalu memanggil hulubalang Mas Mus memerintahkan untuk menjaga princess. “Nggak usah dikawal ayahanda, saya mau jalan-jalan sendiri, saya hanya mau ke taman istana.“ Princess menjelaskan kepada ayahnya.

Singkat cerita princess sudah berada di taman istana melihat keindahan bunga-bunga sambil sesekali berdendang. Tidak ada satu orangpun di taman selain Princess, karena semua abdi kerajaan sedang menyaksikan sayembara pertarungan final dua pendekar sakti. Tanpa disadari, sejak keluar dari arena pertarungan, princess sudah diikuti oleh pendekar kolor ijo alias Geboy. Kali ini dia tidak sendiri, pendekar kolor ijo membawa kedua temannya yaitu pendekar sarap Wepe dan satu lagi bekas hulubalang istana Herry. Herry dulunya adalah seorang hulubalang raja, tetapi karena dia membocorkan rahasia raja akhirnya dia dipecat sebagai hulubalang. Kesalahan hulubalang Herry waktu itu adalah dia mengatakan ke seluruh pejabat istana bahwa raja Ajinatha memakai rambut palsu (Pak Aji nggak boleh marah, kalo marah gede sebelah… hahahaha), padahal itu sangat rahasia buat raja dan akhirnya diapun dipecat. Hulubalang Herry merasa sakit hati kemudian dia bergabung dengan pendekar kolor ijo untuk menculik princess.

Princess kaget melihat disitu ternyata sudah ada tiga orang, satu diantaranya adalah pendekar kolor ijo yang dulu pernah menculiknya. “Hahahahahaha…. mau lari kemana kau, manis? Sekarang nggak ada yang bisa menolongmu,” pendekar kolor ijo berkata sambil menyeringai. Mereka berdua akhirnya menangkap Princess dan membawa lari keluar istana dengan menunggang kuda. Belom jauh mereka membawa Princess, di tengah jalan dihadang seorang pendekar yang sangat rupawan, ya pendekar itu adalah pendekar Maskolis menghadang ketiga orang yang membawa princess dengan pedang di tangan. Pendekar Maskolis adalah satu diantara 3 pendekar kenthir, seorang pendekar yang tampan, manis, berwibawa, baik hati, gagah perkasa, suka menolong… apa lagi ya? Pokoknya yang baik-baik semua ada di dia.

“Dasar pendekar sesat, belom kapok juga menculik princess he?” Pendekar Maskolis langsung menyerang ketiga penculik Princess. Terjadilah pertarungan 3 lawan satu, pertarungan yang tidak seimbang, biasanya yang satu orang pasti kalah, tapi karena pendekar Maskolis sangat sakti banget ketiga penculik princess dapat dikalahkan. Ketiga penculik princess kabur lari tunggang langgang, akhirnya Princess dibawa kembali ke istana. Begitu sampai di istana princess menceritakan kejadian tentang penculikan yang baru saja menimpa dirinya kepada raja. Princess meminta raja menghentikan sayembara, dia lebih memilih pendekar Maskolis untuk mendampingi hidupnya daripada kedua pendekar yang sedang bertarung tak kunjung selesai itu. Raja kemudian memerintahkan hulubalang Mas Mus untuk menghentikan sayembara. Hulubalang Mas Mus segera melaksanakan perintah raja, belum jauh keluar istana hulubalang Mas Mus yang terkenal dengan penyakit pelupa akutnya, bukannya menghentikan sayembara tapi malah langsung menuju ke kamar terus tidur mendengkur sampai pagi.

Walaupun princess sudah mendapatkan jodoh, tapi bertarungan antara pendekar spiderte melawan pendekar Andreaneda masih berlangsung. Saking asyiknya bertarung mereka berdua tidak sadar bahwa sudah tidak ada lagi penonton dan aparat kerajaan yang menyaksikan pertarungan mereka. Yang ada hanya mereka berdua dan dayang Minche yang dari tadi masih setia menjadi wasit. Karena kesal dengan kedongoan kedua pendekar ini, penulis turun tangan, “Wooii… kalian berdua ngapain sih, tuh princess udah dapet jodoh kenapa masih bertarung juga?” tanya penulis. Mereka berdua menghentikan pertarungan, baru sadar kalau arena pertandingan kosong tidak ada siapapun. Kemudian pendekar Spiderte berkata, “Lah… pada kemane nih orang-orang, kita kan belom selesai berantemnya koq udah bubar semua?”

“Orang-orang udah pada pergi, princess udah dapet jodoh. Udah kalian berdua pulang aja ditungguin emak tuh.” Jawab penulis.

“Lha trus sayembaranya gimana, katanya yang menang jadi mantu raja?” pendekar Andreaneda juga bingung.

“Makanya kalo mau berantem jangan lama-lama hadiahnya keburu diambil sama orang lain, lagian kalian nggak ada yang mau ngalah. Mestinya yang tua ngalah kasih kesempatan yang muda, jadinya kan nggak kek gini.” Jawab penulis lagi.

“ Terus ini gimana, mau dilanjut kagak ne..??” mereka berdua serempak bertanya.

“Meneketehe, tuh kalo mau lanjut hadiahnya dayang Minche aja, mauuu…??” sambil jawab begitu penulis langsung ngacir lari secepat kuda Arab.

“Somprett….. dasar penulis stresss. Kalo bikin cerita yang bener dunk..!!!” pendekar Andreaneda menjawab kesal.

Itu tadi cerita hiburan dari planet kenthir lebih asyik kalau baca cerita sebelumnya, semoga terhibur dan mohon maaf kalau pertanyaan yang masuk ke kotak komentar belum bisa saya balas, mau libur dulu sampai hari minggu.

Modifikasi Popular Post untuk Template Gallery

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

popular


Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
  1. Login ke Blogger dengan akun Anda
  2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
  3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
    .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
    .PopularPosts ul{padding:5px 0}
    .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
    .PopularPosts .item-content{position:relative;float:left;margin:0}
    .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
    .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
    .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
    .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
    Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
  4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
  5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

    popular

    Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
  6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  7. Setelah ketemu, ganti dengan kode berikut ini :
    <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  8. Terakhir, save templates lihat hasilnya.
Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

Slider Otomatis Untuk Template Toko Online

Kemarin ada teman yang meminta via email untuk dibuatkan sebuah slider otomatis untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan permintaan untuk membuat sebuah template toko online pun juga banyak, tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.

slider toko online


Baiklah langsung saja pada cara pembuatannya :

Langkah pertama
  1. Kita harus membuat satu widget di bawah header untuk meletakkan slider nantinya. Login ke blogger dengan akun Anda
  2. Setelah masuk ke dashboard, pilih blog yang mau dipasang slider.
  3. Kemudian pilih template >> Edit HTM, jangan lupa centang dulu kotak expand widget template.
  4. Backup dulu template untuk berjaga-jaga jika nanti terjadi kesalahan dalam pengeditan. Kemudian masukkan kode berikut ini diatas ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;}
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}
  5. Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
    </div>
    </b:if>
  6. Lalu save template, sekarang anda masuk ke layout dulu, lihat dibagian bawah header apa sudah ada satu widget kosong seperti pada gambar di bawah?

Jika pada template Anda sudah terdapat satu kolom kosong yang ada di bawah header seperti gambar diatas, untuk langkah pertama tinggalkan saja, langsung pada langkah kedua

Langkah kedua
  1. Masih pada posisi Edit HTML masukan kode dibawah ini diatas ]]></b:skin>
    .shadow{width:950px; height:39px; background:#fff url(http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png) no-repeat center;margin:0 auto}
    #featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(http://4.bp.blogspot.com/-XIuN9wCp7P4/T6v_XWDrceI/AAAAAAAABKg/X5A25lOVkVk/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
    #featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
    #featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
    #featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
    #featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
    #featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
    #featured-slider .featuredPostMeta a{color:#a1a1a1}
    #featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(http://3.bp.blogspot.com/-KJx2Buu0zJE/T651wlL5t0I/AAAAAAAAGDo/FYTmwGcI-BE/s1600/order.png) no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
    #featured-slider .order a:hover{ color:#515151;}
    .featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
    .featuredTitle a{color:#719429}
    .featuredTitle a:hover{color:#0a0a0a}
    #paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
    #paginate-featured-slider ul{width:595px;list-style:none}
    #paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
    #paginate-featured-slider .featured_thumb:hover{opacity:0.7}
    Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda.
  2. Setelah langkah diatas, masukkan kode berikut diatas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://kauman.googlecode.com/files/slider.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 400;
    summaryTitle = 25;

    numposts2 = 7;

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }

    function showrecentposts1(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
     
      for (var i = 0; i < numposts2 ; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }

    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }

        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
    document.write(trtd);    

     j++;
    }

    }

    function showrecentposts2(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
     
      for (var i = 0; i < numposts2 ; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }

    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }

        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
    document.write(trtd);    

     j++;
    }

    }
    //]]>
    </script>
    Perhatikan kode warna merah diatas jika pada template anda sudah terdapat jQuery.min.js meskipun serinya berbeda, Anda tidak perlu memasukkan script warna merah itu lagi. Cukup satu jQuery.min untuk satu template jika ada dua, kemungkinan akan bentrok dan slidernya tidak jalan.
  3. Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 5 diatas, ganti semua dengan kode dibawah ini :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'>
    <b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
    <b:includable id='main'>
    <div id='featured-slider'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </ul>
    </div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: &quot;featured-slider&quot;, //id of main slider DIV
    contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
    toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
    nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
    revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </b:includable>
    </b:widget>
    </b:section>
          </div>
    </b:if>
    <div class='shadow'/>
  4. Setelah itu save template dan masuk ke layout akan nampak seperti pada gambar dibawah ini :


  5. Kemudian klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :


    Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan.
  6. Terakhir save, dan lihat pada blog Anda sudah terpasang slider menarik.
Segitu dulu ya tutorial membuat featured slider sederhana untuk toko online, maaf kalau tulisan saya acak-acakan karena lagi sedih, pasti diantara teman-teman banyak yang mengikuti berita di media banyak korban yang belum ditemukan akibat jatuhnya pesawat Sukhoi meskipun tidak ada keluarga saya yang ikut dalam penerbangan tersebut, tapi saya prihatin dengan banyaknya kejadian pesawat jatuh di negeri ini, kenapa ya? Disamping itu saya juga sedih Adsense saya hari ini kena banned... duuhhh lebay banget somprettt. Jika masih ada yang kurang jelas dalam penjelasan diatas tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat

Mengatasi Loading Blog dengan Google Code

Kali ini saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang memiliki masalah dengan loading blog yang cukup berat. Loading atau proses membuka pada sebuah program menjadi salah satu faktor penting bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog, jika terlalu berat maka akan membuat kinerja blog yang kita kelola menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar koneksi internet.

Blog yang saya bahas disini adalah blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung pada seberapa banyak kode script yang kita masukkan ke dalam template tapi dengan asumsi kecepatan koneksi internet yang digunakan sama.  Beda dengan Wordpress atau platform blog lain yang menggunakan hosting sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya memakai template jenis magazine seperti yang sering saya buat, karena banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google sendiri juga menyarankan agar loading blog lebih cepat, paling tidak hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga menyerupai bentuk blog-blog profesional seperti platform lainnya dengan konsekuensi loading blog yang semakin lambat.

Bagi Anda pengguna blogger, saya akan memberikan solusi logis untuk meningkatkan performa kecepatan loading blog, khususnya bagi anda pemakai template style magazine. Jika anda memakai sebuah template dengan menggunakan banyak fitur, seperti slider, label per categori atau lainnya. Pasti pernah menemukan sebuah script yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template. 

Javascript yang belum disimpan di Google Code

Saya akan berikan contoh sebuah script dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh script di bawah ini saya ambil yang sederhana :
<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}

</script>
Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya : contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :


Setelah proses penyimpanan file di komputer sekarang kita simpan di Google Code agar bisa dipasang pada template. Buka Google Code Anda, kalau belum pernah menggunakan Google Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :
  1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/

  2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.


    Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
  3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.


  4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.


  5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :

    Sebelum disimpan di Google code

    Sesudah disimpan di Google code

    Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :
    <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>
    Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
Javascript yang sudah disimpan di Google Code

Nah sekarang bagaimana jika file javascript itu sudah disimpan di Google Code milik akun lain? Saya akan berikan contohnya dibawah :
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
URL Javascript warna merah diatas yang harus diganti dengan URL script dari Google Code anda. Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :


Kemudian tekan Enter pada keyboard. Jika muncul pilihan save, Anda tinggal save file tersebut kemudian upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika setelah tekan enter muncul kode javascript yang berderet-deret banyak sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.

Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog? Penjelasannya seperti ini, jika Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu terasa kalau yang memakai template itu banyak apa tidak semakin berat loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script si pembuat template rusak atau overload.

Itu tadi satu tips untuk mempercepat loading blog Anda dengan menyimpan file Javascript di Google Code Anda sendiri, silahkan dipahami dan semoga bermanfaat.

Johny Simpleblog, Template Sederhana Easy Loading

Template ini hasil utak-atik saya sambil menunggu derby pertandingan sepakbola kota Milan nanti malam. Daripada nganggur mending bikin sesuatu buat bisa dishare disini. Template ini sangat sederhana tidak ada fitur khusus seperti template-template saya sebelumnya, yang jelas template ini lumayan ringan dan nggak tahu SEO friendly apa nggak. Tapi semua meta tag dan fasilitas SEO yang lain untuk blogger sudah saya pasang. Setahu saya yang namanya template blogger itu jauh dari kata SEO friendly kita hanya bisa mencoba untuk membuatnya lebih ramah pada pengunjung. Beda dengan platform lain, wordpress misalnya bisa dipasang plugin-plugin khusus untuk SEO. Tapi namanya juga sudah dikasih gratisan sama Google masa sih mau protes? 

johny simpleblog

Template ini hanya mempunyai dua warna dasar putih dan abu-abu dengan background hitam, 70% template ini hanya menggunakan pemainan warna dan hanya menggunakan gambar sedikit saja pada bagian-bagian tertentu. Mempunyai dua navigasi menu, navigasi yang pertama (atas) Anda harus mengisikan secara manual pada Edit HTML. Untuk navigasi bawah, itu adalah navigasi untuk halaman statis (static page), jika Anda membuat halaman, seperti about me, contact me, disclaimer dan lain-lain, maka otomatis akan muncul pada navigasi yang kedua. Fitur lain yang mungkin perlu penjelasan disini adalah :
  1. Social bookmark dan Subscriber
    Cara pasangnya masuk ke layout >> add gadget masukkan kode ini ke dalamnya :
    <center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
    <table><tbody><tr><td>
    <a href='http://feedburner.google.com/fb/a/mailverify?uri=maskolis' target='_blank'><img alt='newsletters' src="http://2.bp.blogspot.com/-T6Jwvl78yt4/T6aQRn6CDmI/AAAAAAAABCU/vmj_BCGOv2U/s1600/mail.png" border="0" title='newsletters'/></a> </td>
    <td> <a href='http://feeds.feedburner.com/maskolis' target='_blank'><img alt='rss' src="http://2.bp.blogspot.com/-BkgRd2NvFT8/T6aQSYJiQnI/AAAAAAAABCg/IPE8JvSisT4/s1600/rss.png" border="0" title='rss'/></a> </td>
    <td> <a href='http://twitter.com/maskolis' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-wDhM0i4yvb8/T6aQTdIRmSI/AAAAAAAABCo/CS61MLJ8QRo/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
    <td> <a href='http://www.facebook.com/maskolis' target='_blank'><img alt='facebook' src="http://1.bp.blogspot.com/-RvQpmf-y4PE/T6aQQqqjT2I/AAAAAAAABCQ/jEECzsdedY8/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
    <td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="http://1.bp.blogspot.com/-Lpu7KBe9Q2c/T6aQUbuQWBI/AAAAAAAABCw/bsKGA1q_WeQ/s1600/youtube.png"  border="0" title='youtube'/></a>
    </td></tr></tbody></table> </div></center>
    <center>
    <div class='sub-box'>
    <div style="text-align: left; display: inline-block;">
    <h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
    <small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/maskolis' target='_blank' title='feedburner'>
    <b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input type="hidden" value="maskolis" name="uri"/>
    <input type="hidden" name="loc" value="fr_FR" />
    <input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
    <input type="submit" class="sub-button" value="Enter" title='' alt='' />
    </form></div></div></center>
    Ganti kata maskolis diatas dengan ID anda masing-masing.
  2. Template Johny Simpleblog ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, jangan lupa untuk centang kotak expand widget templates :
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=6168443577798831338&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>
    Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

    3S6YXY4VKCDR

  3. Untuk mengganti iklan yang ada di bawah postingan (sebelah related post), masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
    <div id='banner-ads'>
    &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
    google_ad_client = &quot;ca-pub-9608487840337104&quot;;
    google_ad_host = &quot;pub-1556223355139109&quot;;
    /* johny bingung 1 */
    google_ad_slot = &quot;3387370593&quot;;
    google_ad_width = 300;
    google_ad_height = 250;
    //--&gt;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;
    src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
    &lt;/script&gt;
    </div>
    Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 300 x 250 px.
Template ini saya buat karena tadi sore di kotak komentar ada yang meminta untuk dibuatkan template yang sederhana, tapi nggak tau ini cocok apa nggak. Yang penting saya sudah memenuhi permintaannya masalah cocok dan tidak cocok selera tiap orang pasti beda-beda. Selamat mencoba dan semoga bermanfaat maaf kalau template ini kurang berkenan.  3S6YXY4VKCDR

3 Pilihan Warna untuk Template Johny Storage

Sebelumnya saya minta maaf belum bisa jawab komentar yang masuk baik lewat email maupun lewat kotak komentar di blog ini dan di Mas Template, karena kondisi kesehatan yang tidak mau diajak kompromi. Dari beberapa komentar yang masuk pada artikel Johny Storage template, ada beberapa teman yang meminta untuk dibuatkan dengan versi warna yang berbeda. Kali ini saya akan berikan tiga warna alternatif untuk template Johny Storage, yaitu gelap (dominan hitam), biru dan merah. Disini saya hanya menambahkan 2 fitur kategori otomatis memanjang, untuk fitur yang lain masih tetap sama.

Johny Storage Dark

johny storage dark


Template ini dominan warna hitam dan biru, cara pemasangan sama persis dengan Johny Storage pada artikel saya sebelumnya. Akan saya ulangi lagi disini
  1. News Ticker atau headline news letaknya diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
  2. Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
    <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=blogspot/htbgh&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='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
Pemasangan Widget

Sebelum masuk ke pemasangan widget, coba Anda perhatikan struktur layout yang terdapat pada template Johny Storage di bawah ini (ada penambahan widget yaitu Label 7 dan Label 8 letaknya dibawah blog post) :

layout johny storage
  1. Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
  2. Sekarang untuk label 1 sampai dengan label 8 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :

    Keterangan :
    Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
  3. Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
    </script>
    </ul>
    Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
  4. Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.
  5. Khusus untuk Johny Storage Dark.  membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :
    <div style="background:#cc0000 url(http://2.bp.blogspot.com/-C9T2YYi8tv8/T6LO-vQvcuI/AAAAAAAAA9U/Xq14mSfAsII/s1600/tweet+2.png) no-repeat;padding-top:46px;padding-left:10px">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 10,
    interval: 3000,
    width: 280,
    height: 122,
    theme: {
    shell: {
    background: 'transparent',
    color: '#aeaeae'
    },
    tweets: {
    background: 'transparent',
    color: '#aeaeae',
    links: '#5193f0'
    }
    },
    features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'default'
    }
    }).render().setUser('maskolis').start();
    </script>
    </div>
    Ganti maskolis dengan twitter username anda.

Johny Storage Blue

johny storage dark


Johny Storage Red

johny storage red


Itu tadi tiga pilihan warna untuk templte Johny Storage, silahkan dipilih warna mana yang paling cocok. Selamat mencoba dan semoga bermanfaat.

Johny Storage, Template Magazine untuk Blog Berita

Karena ini malem Minggu saya singkat saja artikel kali ini. Template ini sekilas tampak seperti Mas Paper versi 1, hanya pada template kali ini warna didominasi putih dan hitam. Template ini sangat cocok untuk blog berita, ya memang saya untuk saat ini akan fokus dulu dalam membuat template blogger untuk blog berita, karena untuk template yang lain saya belum mahir apalagi yang bentuknya blogazine (pernah seorang teman blogger meminta saya membuat template blogazine via email), disamping keterbatasan kemampuan saya dalam pemahaman jQuery, dalam membuat template seperti blogazine dibutuhkan kemampuan dalam mengolah gambar dengan menggunakan software tertentu, sehingga bisa lebih cantik dan menarik.

johny storage

Seperti pada template Mas Paper 2 dan Johny Simplemag, template kali ini juga semuanya serba otomatis. Anda tinggal memasukkan label dan kode script ke dalam kotak HTML/Javascript maka fitur-fitur yang ada pada template ini akan muncul secara otomatis. Langsung saja saya akan jelaskan satu persatu untuk penggunaan template ini :
  1. Saya mulai dari atas, News Ticker atau headline news yang ada diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
  2. Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
    <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=blogspot/htbgh&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='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
Pemasangan Widget

Sebelum masuk ke pemasangan widget, coba Anda perhatikan struktur layout yang terdapat pada template Johny Storage di bawah ini :

layout johny storage
  1. Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
  2. Sekarang untuk label 1 sampai dengan label 6 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :

    Keterangan :
    Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
  3. Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
    </script>
    </ul>
    Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
  4. Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.
Apa lagi ya, sepertinya hanya itu yang perlu saya jelaskan untuk penggunaan dan pemasangan widget yang terdapat pada template Johny Storage ini. Karena waktu sudah menunjukkan pukul 8 malam lebih, sudah waktunya untuk berkeliaran cari mangsa... hehehehe. Bagi yang masih bingung dan butuh penjelasan silahkan tinggalkan komentar di bawah, selamat mencoba dan happy weekend

Tiga pilihan warna lain untuk template ini :