Langsung ke konten utama

Kompiimut, Template Blog Yang Imut Dan Amit Amit

Kompiimut
Bosen dengan tampilan blog yang lebar? Nah kali ini saya share modifan template yang ramping dan imut hehehe... Lebarnya hanya 750px dengan sidebar 200px. Dasarnya masih dari Johny Wusss, dan template ini diambil dari template Bukan Johny yang dipakai Kompi Ajaib. Aslinya arahan xml-nya diambil dari template Kompi Ajaib yang saya pakai sekarang ini.

Sepertinya template ini cocok untuk blog personal. Warna secara umum dikuasai yaitu warna abu-abu semoga sedikit adem tapi tidak menyakitkan mata hehehe.....

Seperti biasa, templatenya sudah disertai tag h1, h2, h3, slot iklan 728px x 80px di bawah header (sebaiknya diisi dengan Adsense teks satu baris). Sudah ada breadcrumb, related posts, share buttons, tombol scroll to top, translator ringan dan kotak subscribe di bawah postingan. Dan sudah saya sertakan arahan js untuk SMILEY pada komentar blog. Penampakannya menyerupai gambar di bawah ini.

Kompiimut, Template Blog Yang Imut

Instalasinya sama menyerupai template Kompiana yang saya share kemarin, mampu dilihat DI SINI. Seperti untuk menu header, menu footer, popular post, dan recent posts, juga untuk paginasi di homepage. Untuk skor SEO template di Chkme sudah 100% dan validasi HTML5 di W3C menyisakan 2 buah error.

Di situ sudah saya sertakan juga untuk pengaturan DROP CAP atau aksara besar pada awal postingan. Anda tinggal menambahkan arahan menyerupai di bawah ini pada aksara awal postingan Anda pada posisi postingan HTML.

 <span class="awal">T</span>

Huruf T berwarna merah sebagai referensi aksara awal postingan, sehingga penampilannya akan menyerupai di bawah ini.

 <span class="awal">T</span>idak menyerupai template-template lainnya.....

Untuk kotak subscribe di bawah postingan, cari arahan menyerupai di bawah ini:

<div class='clearfix' id='related'>
<div class='related2'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/><br/>
<a href='http://feeds.feedburner.com/JohnyTemplate' title='feedburner'><img alt='feed count' height='26' src='http://feeds.feedburner.com/ ,fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' title='readers' width='88'/></a>
</form>             
</div>

<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default' title='feed blog'>Subscribe via RSS Feed</a></p>
</div>
</div>

Untuk goresan pena berwarna merah silahkan sesuaikan dengan akun feedburner blog Anda.

Untuk deskripsi blog silahkan isi pada Dashboard >> Settings >> Search Preferences >> pada Description silahkan pilih radio button "Yes" pada Enable Search Description. Dan silahkan isikan deskripsi blog Anda pada kotak di bawahnya. Terakhir silahkan klik tombol Save Change.

UPDATE:
Ada bab yang saya lupa hehhehe, untuk search boxnya itu masih menggunakan punya Kompi Ajaib. Jika ingin membuatnya menyerupai itu silahkan baca cara menambahkan fungsi Google custom search ke search box blog DI SINI. Namun jikalau ingin membuat yang simple silahkan ganti arahan di bawah ini:

<div class='menusearch'>
<div style='float:right;padding:0px 8px 0 0;'>
<form action='http://www.tips-trick.com//p/kompi-ajaib-search-result.html' class='searchform' id='cse-search-box' target='_blank'>
<input name='cx' type='hidden' value='partner-pub-006106396690849460662:zxyadz2g7gi'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input alt='search button' class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx4ErGq9BT_E4Iz_zHpXxXXeejLO06YU6TPi57Phq1CJb-pvkzgn1DQE7QbHYM0O0tgjcmI6MnqTFOeB9EjqEhrQzQZJYcwq0accDwjkvOIhAgGHI3ib7Q8kcPmEdvJYyjbLFrlXZ4MBY/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image'/>
</form>
</div></div>

Ganti dengan arahan di bawah ini:

<div class='menusearch'>
<div style='float:right;padding:0px 8px 0 0;'>
<form action='/search' method='get' class='searchform' target='_blank'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input alt='search button' class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx4ErGq9BT_E4Iz_zHpXxXXeejLO06YU6TPi57Phq1CJb-pvkzgn1DQE7QbHYM0O0tgjcmI6MnqTFOeB9EjqEhrQzQZJYcwq0accDwjkvOIhAgGHI3ib7Q8kcPmEdvJYyjbLFrlXZ4MBY/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image'/>
</form>
</div></div>

Seperti biasa, dimohon untuk tidak menghilangkan atau merubah credit link di kanan bawah blog. Namun untuk kredit link di sebelah kiri mampu Anda rubah sesuka hati Anda.

UPDATE:
Bagi pengguna template yang mengalami problem pada tombol Readmore-nya, silahkan atasi dengan cara menyerupai di bawah ini:

Silahkan cari arahan menyerupai di bawah ini:
http://4.bp.blogspot.com/-LAGOPpd8H_o/UUVvnuO4yEI/AAAAAAAAAfE/Q26j4shYyzE/s1600/readmore.png

Kemudian silahkan ganti dengan arahan di bawah ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIz3fxNf3_pcrQ5kO9qDH5gxqJ1Y3VYiNsifsRnKBmWujYr8mdOw5tgi4uM3jeuGrdTJXAqi4oAnpuLRbreyWCZXM8zCuoHOBkl_XH3FvoqfYrF-uWM140wFMa0DVmbK9Rgz_RTTJNtc8/s1600/readmore.png

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Teknik Mengolah Kata Kunci, Cara Sederhana Riset Keyword Tanpa Tools

Pada postingan kali ini saya mau bagikan lagi sebuah teknik mengolah kata kunci. Agar isi dalam artikel ini praktis dipahami jadi saya menggunakan sedikit ulasan bergambar semoga nantinya praktis dipahami. Teknik ini yaitu salah satu teknik seo yang sering digunakan oleh para internet marketing untuk mampu menggaet calon pelanggannya secara tertarget. Dan percaya saja bahwa ini kali pertama anda menemukan satu dari sekian banyaknya teknik seo yang ada yang mampu membantu anda menerima visitor yang banyak. Kabar baiknya, walaupun ini yaitu seni administrasi seo marketing tapi mampu juga diaplikasikan untuk jenis website artikel. Bahkan hal ini akan sangat bagus.. Ribuan pengunjung organik google dalam 1 bulan bukan duduk duduk masalah lagi untuk mampu didapatkan secara mudah. Oleh alasannya yaitu itu simak baik-baik, baca poin per poin semoga wawasan anda mampu ditambahkan secara menyeluruh. Berikut yang akan kita pelajari... Survey Google Auto Complete Google Sugge...
Posting Komentar
Baca selengkapnya

Cara Upload File, HTML, CSS, Javascript Di Google Drive

D ari info beberapa sumber yang saya baca, bahwa Google Code ada kemungkinan tahun depan sudah tidak mampu dipakai alasannya yakni Google akan menutupnya. Nah sebagai penggantinya Google telah menyiapkan daerah gres untuk menghosting file menyerupai file dokumen, HTML, CSS, maupun JavaScript yaitu Google Drive. Untuk itu kini saya mulai mengalihkan file JavaScript dan HTML blog Kompi Ajaib dari Google Code ke Google Drive dan ternyata sangat mudah dan script berjalan sempurna. Sekarang saya akan menguraikan cara upload file HTML, CSS, atau Javascript di Google Drive. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini: 1. Silahkan masuk ke Google Drive dengan link berikut https://drive.google.com/ dan login dengan akun Google Anda. 2. Kemudian klik tanda upload untuk mulai mengupload file dari komputer Anda, menyerupai pada gambar di bawah ini. 3. Silahkan pilih file yang ingin Anda upload kemudian akan muncul kotak upload, bi...
Posting Komentar
Baca selengkapnya

Daftar Pilihan Situs Penyedia Gambar Gratis Legal Bebas Di Gunakan

Daftar website/situs yang menyediakan gambar gratis. Jika anda bingung memilih gambar untuk posting blog atau melengkapi artikel dengan gambar supaya terlihat bagus dan menarik , anda bisa menggunakan situs yang menyediakan foto serta gambar yang bebas hak cipta alias gratis untuk di gunakan secara komersil. Dengan memakai gambar di daftar situs ini di jamin aman dan tidak perlu khawatir lagi ada pihak yang meng-claim.  Barangkali ada yang belum tahu bahwa setiap gambar di internet juga mempunyai hak cipta , jadi tidak semua gambar bisa di gunakan sembarangan. Penggunaan gambar yang berhak cipta bisa berbuntut panjang , jikalau yang mempunyai gambar tersebut secara sah mengadu atau melaporkan ke pihak DMCA , besar kemungkinan blog kita akan mendapat peringatan , jikalau hal ini berlanjut dan tidak ada tindakan untuk menghapus gambar tersebut maka resiko terburuk ialah artikel kita akan otomatis masuk ke dalam daftar draft. Berikut ini gua rangkum daftar...
Posting Komentar
Baca selengkapnya