Update Perbaikan Untuk Logo Blog Kompi Males

Update Perbaikan Untuk Logo Blog Kompi Males

Bola Hero Gawai

Update Perbaikan Untuk Logo Blog Kompi Males

Perbaikan Untuk Logo Blog Kompi Males

Ini adalah update yang ketiga untuk perbaikan logo blog setelah saya merilis template Kompi Males. Update-update ini saya lakukan untuk kenyamanan para pengguna template. 

Kewajiban saya untuk memperbaiki kekurangan pada template yang saya buat sehingga template ini menjadi lebih baik lagi. Ini template kedua saya jadi mohon maaf jika masih ada kesalahan, dan mohon informasi dari pengguna jika kekurangan selain hal modifikasi tampilan blog.

Untuk para pengguna template Kompi Males, silahkan cek update-update sebelumnya di postingannya pada link di bawah ini.
Untuk update ketiga kali ini adalah perbaikan pada logo blog untuk deteksi tag H1 di homepage sebagaimana saya jelaskan pada postingan sebelumnya yang bisa Anda simak pada link di bawah ini.
Untuk itu silahkan buka edit HTML blog Anda dan silahkan cari kode seperti di bawah ini:


                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='logo blog' height='90' src='http://1.bp.blogspot.com/-HJBAXm0_Kaw/UxvxnUXaQ9I/AAAAAAAAbbA/FZf8wpAZ24Y/s1600/titlekompimales.png' title='Kompi Males' width='212'/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='logo blog' height='90' src='http://1.bp.blogspot.com/-HJBAXm0_Kaw/UxvxnUXaQ9I/AAAAAAAAbbA/FZf8wpAZ24Y/s1600/titlekompimales.png' title='Kompi Males' width='212'/></span></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>

Kemudian ganti dengan kode di bawah ini:


                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>
<div class='logo-blog'>
  <a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
               </div>

Silahkan ganti URL LOGO BLOG dengan URL logo blog Anda.

Kemudian cari kode CSS di bawah ini


#header-wrapper{width:100%;color:#555;margin:0 auto;padding:0}
#header{float:left;width:212px;margin:0;padding:0}
#header-inner{margin:0 auto;padding:0}
#header h1,#header p{font:28px Oswald;text-transform:uppercase;line-height:24px;color:#e74c3c;text-shadow:2px 2px 1px #000;padding:0;margin:0 auto}
#header h1 a,#header h1.title a:hover{color:#e74c3c;text-decoration:none}
#header .description{color:#fff;font:12px Arial;text-shadow:none;}
#header img{border:0;margin-top:10px;padding:0}
#header2{float:right;width:728px;margin:10px 10px 5px;text-align:left;color:#555}
.header2 .widget{margin:0 auto;padding:0}

Dan ganti dengan kode CSS di bawah ini


#header-wrapper{width:100%;color:#555;margin:0 auto;padding:0;position:relative}
#header{float:left;width:212px;margin:0;padding:0}
#header-inner{margin:0 auto;padding:0}
#header h1,#header p{font:28px Oswald;text-transform:uppercase;line-height:24px;color:#e74c3c;text-shadow:2px 2px 1px #000;padding:0;margin:0 auto;opacity:0}
#header h1 a,#header h1.title a:hover{color:#e74c3c;text-decoration:none;opacity:0}
#header .description{color:#fff;font:12px Arial;text-shadow:none;}
#header img{border:0;margin-top:10px;padding:0}
#header2{float:right;width:728px;margin:10px 10px 5px;text-align:left;color:#555}
.header2 .widget{margin:0 auto;padding:0}
.logo-blog{position:absolute;left:0;bottom:5px}

Kemudian kode float:left ganti dengan position:relative pada kode CSS di bawah ini


.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;float:left}

Menjadi seperti kode di bawah ini


.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;position:relative}

Kemudian tambahkan pada kode CSS di bawah ini pada media query @media screen and (max-width: 800px)

.logo-blog{position:relative;margin-top:-20px}

Dan tambahkan juga kode CSS di bawah ini pada media query @media screen and (max-width: 240px)

.logo-blog img{width:100%;height:auto;margin-left:-10px}

Selesai...

Atau silahkan download ulang di postingannya (link downloadnya sudah saya perbaiki dengan file yang sudah diupdate/diperbaiki).

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

63 Comments Add Comment

hahaha kayak template premium aja pake update segala, siip mas adhy :-bd

Balas

Hehehe biar tidak setengah hati dalam berbagi sis :)

Balas

Wah pas banget ane mau pake template ini buat blog baru.
OOT kang.
Kenapa blog kompi ajaib ini pas ane cek di chkme descriptionnya gak muncul ya kang?
Apa emang sengaja tanpa description kang?

Balas

Iya mas mencoba tidak menggunakan deskripsi baik homepage dan postingan. Ini penjelasan saya
http://www.kompiajaib.com/2014/03/kompi-males-blogger-template-responsive.html?showComment=1394624473322#c6592008525350546371

Balas

Oke kang ane paham sekarang.
Maaf gak baca komen2 yang sebelumnya, ternyata ada yg tanya juga =D

Balas

mas adhy barusan saya coba pakai firefox, jika slot banner 728x90nya tidak diisi widget, tampilannya agak sedikit kacau. ini ss nya http://4.bp.blogspot.com/-8iwa3y-qSdE/UyU4TI33NtI/AAAAAAAADgE/LtNh6qnWHY4/s1600/ss.jpg

Balas

makasih infonya mas Adhy, segera dilaksanakan :D

Balas

Iya karena saya tidak set tingginya pada header-wrapper dengan maksud agar tingginya otomatis pada responsive-nya. karena itu harus menambahkan banner pada slot header2-nya. Jika tidak diisi maka harus ditentukan tinggi (height) pada header-wrapper-nya :)

Balas

Sama-sama mbak Indri... jangan lupa untuk mengecek update lainnya di postingannya :)
Untuk masalah thumbnail yang tidak muncul ketika share di G+ sudah saya jawab pada komentar mbak Indri di postingan sebelumnya.

Balas

wah... ketika saya baru mencoba langkah yg pertama jadinya malah berantakan mas, logo headernya lari ke kanan karena diusir oleh judul blog yg tampil, hmmm :(

akhirnya saya kembalikan ke posisi lama :D tapi sayangnya logo blog nya selalu muncul di google+ setiap kali update artikel baru :)

update yg ini saya cobanya dulu pelan2 aja mas, makasih updatenya utk kompi males :D

Balas

Jangan dulu di save sebelum semua langkahnya disimpan mbak :)
Untuk logo blog yang selalu muncul ketika share di G+ udah saya jawab kemarin di komentar mbak Indri sebelumnya :)

Balas

saya coba pelajari dan praktekkan dulu ya mas Adhy, takutnya ada yang error lagi seperti teman - teman yang lain
thanks mas :)

Balas

Makasih penjelasannya mas Adhy :) tips ini sudah saya praktekkan sesuai dgn petunjuk di atas, dan saya juga mencocokkannya lagi dengan mengintip hasil download kompi males update terbaru :D

Namun pada saat dipreview, logo header hanya kelihatan separo dan iklan di header hilang.

Dan setelah saya save, logo header tidak bisa sejajar dengan iklan di header, maksudnya ketinggiannya tidak bisa rata, posisi header lebih tinggi daripada posisi iklan :D

Lalu saya kembalikan lagi ke tampilan awal, hasilnya, tampilan di windows sangat bagus, tampilan di mini ipad juga sangat bagus, kemudian tampilan di tablet juga sangat bagus, dan saya check di alat pratinjau google adsense appspot hasilnya sangat bagus luar biasa :)

Jadi sementara ini saya pakai kompi males yg versi lama aja mas Adhy, krn sdh terlanjur mapan di blog saya, hehehe :D makasih penjelasannya dan update barunya utk kompi males :)

Balas

mantap mas..

saya ada pertanyaan neh yg belum di jawab di postingan mas atunya, di ulang disini aja ya..hehe

saya udah berhasil mengganti warna baground menu atas, nah kalau untuk warna baground abu2 di page BERANDA paling atas merubahnya kode yang mana ya?
trus untuk widget random post itu di isi sendiri ya mas kode widgetnya?

thanks

Balas

ijin nyuri kodinya mas!, kalau pake kodi ini memang membuat title blog muncul, untuk mengatasinya saya kasih kodi visibility:hidden pada #header h1 (punyak saya), sapa tau kodi ini juga berfungsi pada blognya mbak indri.

Balas

ni kang tolong benerin http://goo.gl/FdHjbN

Balas

Hehehehe silahkan mas :)

Balas

Ganti backgroundnya pada kode ini
.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0

Balas

Untuk random post iya sis isi sendiri, coba di validasi template magazine Maskolis ada script untuk random post
http://www.kompiajaib.com/2014/02/validasi-html5-dan-css3-magazine.html

Balas

Mbak Indri previewnya di edit HTML?

Balas

Hehehe iya mas bisa dicoba juga dengan itu :)

Balas

Hehehehe maaf ada aja yang kelewat :)
coba kode float:left ganti dengan kode position:relative pada kode CSS
.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;float:left}
Menjadi seperti ini:
.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;position:relative} Silahkan cek demo template juga udah betul :)

Balas

makasih mas replynya..

saya coba dulu utak atik.. hehee

sekali lagi makasih dan sorry ngerepotin

Balas

gan kenapa pake perbaikan, kan sudah nice!
o iya gan kalo cara mengatasi begini gimana soalnya saya kagak work work :(

Kesalahan: Missing required field "updated".
Kesalahan: Missing required hCard "author".

Balas

Kang Adhy..template kompi males setelah di update, titlenya jd dua kalo di lihat via opmin hp, kalo pake browser lain sich ga ada masalah.

Ini ss_Nya http://3.bp.blogspot.com/-LQa3CNQGWz8/UyWIvRfahhI/AAAAAAAAB2M/Zv-XpwTjt64/s320/Screenshot%2Bvia%2Bopmin-764874.png

Balas

tengkyu moga tambah ganteng :)

Balas

itu harus diperbaiki dibagian postmeta dan biasanya kode itu seperti ini <div class='postmeta'>

caranya tinggal ubah menjadi gini

<div class='postmeta'>
<span class='author'><span class='post-author vcard'><span class='fn'>Nama Anda</span></span> </span>
<span class='clock'><span class='updated'><data:post.timestamp/></span> <span class='commenttbox'><b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>Add Comments</b:if><b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Comments</b:if></a></b:if></span></span>
</div>

Balas

Wah template Kompi malesnya di update logonya Kang Adhy pasti
Lebih nyaman dan lebih responsive yah Kang? saya cek dulu makasih Kang :)

Balas

maaf saya tanya lgi di post update ini.......buat hapus menu translate di template KOMPI MALES kode ini bkan mas yg harus dihapus(maaf mas adhy, tanpa mngurangi rsa hormat)

<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>

makasih mas....

Balas

Betul kata sista Leony :)

Balas

Itu bukan title postingan jadi dua, tapi yang atas adalah breadcrumb :) ya begitulah opmin, banyak fitur yang tidak berfungsi di opmin. Coba pakai browser bawaan HP-nya.

Balas

Ya begitulah kang :) Silahkan kang :)

Balas

Iya betul bang kode yang itu :)

Balas

Kalau melibatkan masalah template responsive, saya angkat tangan Mas, belum tahu sama sekali :D

Balas

Malem kang adhy.
Ane udah baca postingan di kompiajaib.com/2014/02/menyingkat-html-header-blogger-dan-mengganti-title-blog-dengan-gambar dan kompiajaib.com/2014/03/perbaikan-logo-blog-pada-header-blog, ane bingung mau merubah kode di template ane, soalnya beda. Ane nemu kode <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'> tapi bawahnya beda semua, yang musti di ganti sampe mana ane bingung kang. blog ane yang ini kang jawigo.blogspot.com.

Balas

terimakasih atas template nya, dan maknyus dah template ini..

ditargetkan.blogspot.com

Balas

ayo ladies ke : penjualtas.com :) ...

Balas

kang sebelumnya saya mau tanya,, kalau warna templatenya saya rubah total boleh gak ni ??
kebetulan saya suka warna hijau + gelap.

maaf oot

Balas

mau tanya kang, knapa ya kang tombol share artikel di bawah postingan pada template kompi males yg saya pake di blog saya cma muncul tombol share Tweet dan tanda + ya kang ?
dan juga kode widget untuk FB dan Google+ yang dikasih kang adhy gak muncul lgi ya kang di blog saya ?
mohon pencerahannya kang adhy..
makasih kang adhy

Balas

Heheheehe sama saya juga masih belajar mas :)

Balas

Sama-sama mas :)

Balas

Boleh mas silahkan sesuaikan dengan selera sendiri :)

Balas

mas boleh req . pengen thema / template seperti web ini : juraghandesign.com
buat di wordpress..

yang kompi sudah josh disini : ditargetkan.blogspot.com

Terimakasih atas sebelumnya

Balas

Barusan udah saya cek udah normal mas ini ss nya http://prntscr.com/322z16

Balas

mas cara melabarkan halaman postingan gimana ya .
biar didalam postingan bisa iklan 300x250 rapat kiri kanan .

maklum newbie

Balas

templatenya spesial banget nih buat pengunjung setia Kompiajaib :-d

Balas

Kang masih bingung nih cara ganti gambar headernya dengan title blog ..
Gimana Kang ?

Balas

Hi again, Adhy Suryadi.

I have another question seems their is something in the template that makes the blog stats widget not work. Im not a huge fan of histats i don't believe that track quite as well as they say they do. is there any way to get the blog stats widget to work ?

Balas

This is because of this code &lt;!--</body>--&gt;&lt;/body&gt; at the bottom of template. Replace that code with this code </body>.

You can read post about that code http://www.kompiajaib.com/2013/04/mempercepat-loading-blog-dengan.html

Balas

cheers mate, i'll take a read of that post.

Balas

sudah otak-atik.. dan ngikuti semua panduan, tp masih gagal pasang logo header blog saya.. ada template final yg bisa download dan langsung di pasang tanpa edit ga ya mas?

Balas

Untuk link download yang sekarang sudah saya update dengan ini mas, jadi silahkan download di postingan templatenya.

Balas

oh ternyata hrs pasang bener 728x90 to mas.. klo ga pasang jd ga pas gitu ya.....
trims

Balas

Kang saya menggunakan Template " KOMPI BANGET" Untuk LOGO saya berhasil di Munculkan dan tulisan berhasil di hilangkan ttp saya tidak berhasil Loga di Pindahkan Ke Sebelah Kiri caranya bagaimana?
Blog saya : http://wangian-garansi.blogspot.com/

Balas

ini baru admin yang patut ditiru. maz kalau buat template sendiri gimana yah. apa pake aplikasi tertentu maz

Balas

mas adhy saya mau minta izin untuk perbaiki tampilan responsive ukuran lebar 320px-nya kompi males... dan share di blog kalo boleh... kalo nggak gak apa-apa, hehehehe..... ^_^

Balas

Terimakasih gan templatenya, oke banget gan. Salam kenal

Balas

Halo mas, saya mau nanya nih, kenapa ya saya pake template ini kok logonya menutupi menu ya? mohon bantuannya mas.. ini blog saya, coba dilihat.. www.jelekbanget.com

Balas

Terimakasih banyak Mas Adhy saya sudah pakai Template kompimales ini bener-bener maknyuss, baru kali ini ada yg share template + update berkala :D
Mogo ilmu, rizky dan kehidupannya semakin berkah. :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×