Menambahkan Logo di Samping Nama Blog - Ramai Beud

Sebenarnya saya tidak menggunakan template ini, namun ada seorang teman bertanya bagaimana cara menambahkan logo di samping nama blog pada template contempo. Jadi kali ini kita akan belajar cara memasang logo di samping nama blog sesuai yang di minta oleh teman kita tersebut. Template blogger memang sedikit mengasikkan untuk di customize apa lagi kita menyukai dunia ini. Berikut langkah untuk menambahkan logo di samping nama blog pada template contempo.

Langkah yang pertama adalah anda harus masuk ke dashboard blogger anda, Kemudian buka Theme dan edit HTML. Setelah itu mari kita cari di mana letak title yang ada pada template contempo tersebut. Jujur saja template ini sedikit berbeda dengan gaya template lainnya, cara penulisan dan struktur templatenya bisa di bilang saya baru mengetahuinya.

Template Contempo

Menambahkan Logo di Samping Nama Blog pada Template Contempo

Baiklah, kita mulai langsung saja ya, Kira kira bagi yang belum mengetahui template contempo itu seperti apa. Anda bisa melihat template tersebut ada di halaman theme pada dashboard blogger anda. Jelas di sana terlihat banyak template dari contempo yang bisa anda pilih.

Cari Tag Title pada Template Contempo

Pada template contempo kita bisa menemukan tag title pada bagian header, sama seperti template blogger lainnya. Jadi cara menambahkan logo di samping nama blog pada template contempo anda bisa cari tag title, deskripsi, image pada widget header.

Anda bisa cari kode seperti ini pada template contempo, caranya pakai fitur loncat ke widget dan pilih header1 :

<b:includable id='main'>

Kemudian ganti dengan kode berikut ini :

<b:includable id='main'>
    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title' itemprop='headline'>
<b:include name='title'/>
        </h1>
<b:else/>
        <p class='title' itemprop='headline'>
          <b:include name='title'/>
        </p>
</b:if>
      </div><b:include name='description'/>
    </div>
</b:includable>
                     <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
                     <b:includable id='title'>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='Logo' expr:title='data:title' height='35' src='https://lh3.googleusercontent.com/-QDqCCQ10cnQ/WkAULqMa93I/AAAAAAAAADM/ZlLNpF9HWJk89kvBI1hwEQXN7ThP4I2uwCEwYBhgL/w140-h140-p/Ramai%2BBeud%2BLogo.png' width='35'/> <data:title/></span></a>
</b:includable>

Sekarang saatnya kita buat file css nya agar bisa menyatu antara logo dan judul textnya.

#header{text-align:center;width:auto;margin:0;padding:0}

#header-inner{margin:8px 40px 0 0;padding:0}
#header-inner a{color:#444}
#header h1,#header p{font-size:35px;line-height:12px;color:#444;padding:10px;margin:0;font-weight:800}
#header h1 a{color:#111}
#header h1.title a:hover{color:#1d7b8d}
.widget .title{
line-height:28px
}

Anda bisa menambahkan css di atas di bagian atas kode </style>

Nah, jika sudah, silahkan anda save dan lihat hasilnya pada halaman blog anda. Tips sebelum mengedit silahkan anda backup dahulu template anda agar jika terjadi kesalahan tidak pusing.



Baiklah, demikian tutorial tentang cara menambahkan logo di samping nama blog pada template contempo, sebagai tambahan, cara ini bisa anda kembangkan sendiri sesuai kebutuhan, karena pada tutorial ini sifatnya hanya petunjuk. Anda bisa melihat demonya di sini : Custom Theme