Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

38
Tgl. 20 Oktober 2012

Cara Memasang Gambar Logo Atau Ikon Blog Di Sisi Bagian Kanan Header

Sobat Blogger, jika sebelumnya Anda pernah mengunjungi blog ini, maka dapat Anda lihat bahwa sekarang terdapat 1 (satu) buah widget baru y...

Gambar Logo Atau Ikon Pada Header Blog
Sobat Blogger, jika sebelumnya Anda pernah mengunjungi blog ini, maka dapat Anda lihat bahwa sekarang terdapat 1 (satu) buah widget baru yang terpasang di area header. Widget yang dimaksud adalah sebuah logo yang terletak di sisi bagian kanan header, seperti yang ditunjukkan dengan tanda anak panah pada gambar di atas. Perlu diketahui bahwasanya gambar atau logo tersebut bukanlah sekedar gambar yang hanya dipakai sebagai hiasan blog, namun logo yang terdapat pada sisi bagian kanan header ini juga merupakan sebuah link atau tautan bergambar yang merujuk pada homepage, sehingga apabila diklik maka secara otomatis terbukalah halaman beranda. Dan perlu diketahui pula bahwa logo tersebut juga merupakan gambar yang dipakai sebagai favicon untuk blog ini.

Berbicara mengenai gambar yang terdapat pada sisi bagian kanan header blog ini, secara prinsip cara pemasangannya adalah serupa dengan teknik yang digunakan untuk memasang atau menempatkan iklan, banner, maupun animasi pada header. Dimana dalam pengerjaannya memerlukan 2 (dua) proses, yaitu membagi header menjadi 2 (dua) kolom untuk proses yang pertama dan kemudian proses selanjutnya adalah menambahkan widget baru pada kolom kedua yang terbentuk dalam header.

Oke, sekarang kita langsung pada pokok pembahasan yaitu mengenai cara memasang gambar, logo, banner, animasi, atau ikon pada header. Dan karena seperti yang saya uraikan di atas bahwa untuk keperluan tersebut diperlukan 2 (dua) proses, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Membagi Header Menjadi 2 Kolom
Guna membagi kolom header agar menjadi 2 (dua) bagian, maka kerjakan langkah-langkah di bawah ini.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian CSS berikut ini tepat di atasnya.
.Header {
  width: 78%;
}

.Header-RC {
  width: 20%;
  float: right;
  padding: 30px;

}

.Header-RC .widget {
  margin: 0px;
}

.Header-RC img {
  border: 1px solid orange;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -goog-ms-border-radius: 3px;
  box-shadow: 0px 0px 8px 1px orange;
}

Keterangan:
.Header { dipakai untuk mengatur lebar kolom header bagian kiri, .Header-RC { digunakan untuk mengatur setelan pada kolom header bagian kanan, .Header-RC .widget { digunakan untuk mengatur margin widget yang dipasang, dan .Header-RC img { digunakan untuk mengatur setelan bingkai untuk gambar yang dipasang. Jika setelan pada rangkaian kode CSS tersebut belum sesuai dengan desain header blog yang Anda kelola, maka silakan dilakukan kustomisasi seperlunya.

Ketiga, cari <div class='region-inner header-inner'> dan kemudian sisipkan kode berikut ini tepat di bawahnya.
<b:section class='Header-RC' id='Header-RC' maxwidgets='1' showaddelement='yes'></b:section>


Keempat, simpan template.

Menambahkan Widget Baru Pada Blog
Untuk keperluan penambahan widget baru, dalam hal ini adalah menambahkan widget dalam bentuk gambar atau logo yang akan ditempatkan dalam header, maka langkah selanjutnya bukalah menu ‘Tata Letak (Layout)’. Dan setelah membuka menu ‘Tata Letak (Layout)’, maka Anda akan mendapati sebuah kolom widget baru (yang terletak di sisi bagian kanan atau bisa jadi pula di atas widget untuk header) seperti yang tampak pada gambar di bawah ini.
Widget Baru Di Sisi Bagian Kanan Header
Widget Baru Pada Header Blog
Sumber gambar: Blogger.com
Langkah berikutnya klik ‘Tambah Gadget’ > gunakan pilihan widget ‘HTML/JavaScript’ > masukkan script dengan format seperti contoh di bawah ini dan kemudian simpan.
<div align="right">
<a href='http://eltelu.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png' style='width: 48px; height: 48px;'/></a>
</div>

Keterangan:
Karena script di atas hanya merupakah sebuah contoh, maka lakukan perubahan sesuai dengan URL blog, gambar serta ukuran gambar yang Anda inginkan.

Setelah semua langkah-langkah di atas Anda kerjakan, maka langkah yang terakhir adalah melakukan pengecekan atau melihat hasil dari penerapan teknik tersebut yaitu dengan cara membuka URL atau alamat blog yang Anda kelola. Namun apabila mengalami kesulitan dalam mengimplementasikan teknik yang diuraikan dalam artikel ini, maka Anda dapat mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 38 komentar pada artikel ini ▶
04/11/12, 10.21 O

Kunjungan balik gan. blog yang berisi tentang tips mempercantik tampilan blog dan tips2nya banyak sekali. Saya sangat terbantu dengan blog seperti milik anda ini dan khususnya artikel ini. Maklum tampi;an blog saya masih sederhana

05/11/12, 22.42 O

@Radhit YusandhiTerimakasih balik Sobat. Semoga artikel yang saya terbitkan di sini dapat diambil guna dan manfaatnya. :)

06/11/12, 15.37 O

waw,sungguh hebat sob,nanti aku coba yah
dan jangan lupa kunjungi kembali blog ku yah
:)

07/11/12, 13.08 O

@suhendarOke Sobat...

Anonim
15/11/12, 15.07 O

mantap sekali tutorialnya. keep post ya! oh ya, blognya ane follow, folback ya!

18/12/12, 18.29 O

wah sungguh bermanfaat postingannya.. Terimakasih infonya,
dicoba ah,,

22/12/12, 01.37 O

@PsychomputerOke, terimakasih Sob.

22/12/12, 01.38 O

@aRb IndoPublisherTerimakasih Sob. Silakan bila ingin mencoba menerapkan teknik yang diuraikan dalam artikel ini.

29/12/12, 10.00 O

gan kok di blog saya gak bisa ya ?

29/12/12, 13.28 O

@Nola YudistiraSobat, setelah saya cek sebenarnya sudah bisa terpasang kok.

Hanya saja yang menjadi masalah sepertinya Sobat belum menambahkan widget-nya.

Jadi sebagai langkah terakhir, jangan lupa Sobat menambahkan widget baru seperti yang telah saya contohkan dalam uraian di atas. :)

08/01/13, 10.52 O

Sangat membantu, Gan!. I Like this!

10/01/13, 03.04 O

@Dzaky DewanTerimakasih Sobat. Semoga bermanfaat.

13/01/13, 11.56 O

Sungguh bermanfaat sob..
Thanks banget..

16/01/13, 17.06 O

@Resthoe JebTerimakasih balik, Sob.

mas punyaku yang tutorial ini uda saya coba tetapi ga bisa ya.. saya pake gambar yg barusan sy posting .. ada yang salah ya..

17/01/13, 14.03 O

@Asih Budi AriyantiJadi begini Sob, setelah saya cek sebenarnya sudah benar.

Namun ada sedikit kekeliruan pada URL gambar yang Sobat gunakan, karena untuk URL gambar ternyata Sobat isi dengan URL artikel yang Sobat posting.

Jadi, URL gambar silakan digati dengan URL gambar yang sebelumnya telah di upload ke Picasa dan atau sejenisnya.

Dan terkait dengan jarak widget sidebar yang terlalu jauh, coba Sobat tambahkan CSS berikut ini:


.sidebar.section{margin:10px}
.sidebar .widget {padding:0px;}
.main-inner .column-left-inner, .main-inner .column-right-inner {background: inherit;box-shadow: none;border-radius: 0px;}


Semoga dapat membantu. :)

mas uda saya coba upload masuk ke picasa... dan masuk ke google + saya .. masukin nya gmana ya mas.. uda dicoba ko ga muncul.. apa ukurannya kebesaran atau gimana mas...

18/01/13, 22.48 O

@Asih Budi AriyantiBila sudah diupload ke Picasa, maka ambil link untuk gambar tersebut untuk dimasukkan dalam script blog Sobat.

Dan terkait dengan ukuran gambar, saya rasa tidak jadi masalah kok.

mas udah saya masukin link nya :https://plus.google.com/photos/103238378821626236581/albums/5834954313670945201/5834954356301072066?sqi&sqsi&authkey=CPLspaak5tGSZw.. tapi ga masuk ya mas.. ga ada.. kenapa ya.. apa yang musti dirubah

oh iya mas ko yang buat bingkai ga kayak punya mas ya.. kayak ada bingkai yang sisa.. kenapa ya mas.. ada yg gebayang kotak ga ikut model..
mohon penjelasnnya ya mas...
mkasih banyak mas ilmunya.

mas.. uda saya coba masukin link nya.. tapi ga muncul. kenapa ya ?

22/01/13, 00.25 O

@Asih Budi AriyantiHwaduh... bukan seperti itu Sob maksudnya.

Jadi link yang dimaksud bukanlah link dari Google Plus, akan tetapi link gambar yang diambil dari Picasa.

Jadi gini, alangkah baiknya Sobat pelajari dulu tentang Picasa dengan cara membuat album dan mengunggah beberapa foto ke sana. Baru kemudian setelah mengunggah beberapa foto, cobalah untuk membuka salah satu foto yang telah diunggah untuk mendapatkan link dari gambar yang dimaksud.

22/01/13, 00.41 O

@Asih Budi AriyantiUntuk masalah itu, coba edit template kemudian cari CSS berikut ini:

.main-inner .widget {
background-color: #ffffff;
border: 1px solid #061488;
padding: 0 15px 15px;
margin: 20px -16px;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
-goog-ms-border-radius: 0;
border-radius: 0;
}


dan kemudian hapus bagian berikut ini

background-color: #ffffff;
border: 1px solid #061488;


sehingga menjadi seperti berikut ini

.main-inner .widget {
padding: 0 15px 15px;
margin: 20px -16px;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
-goog-ms-border-radius: 0;
border-radius: 0;
}

22/01/13, 11.45 O

@Asih Budi AriyantiSobat, seperti yang telah saya sampaikan dalam uraian jawaban sebelumnya, bahwasanya hal tersebut terjadi karena URL yang dimasukkan adalah URL dari Google Plus.

Padahal semestinya URL yang dimasukkan adalah URL gambar yang diambil dari Picasa. :)

ga ada lo mas ko de yang dimaksud: .main-inner .widget {
background-color: #ffffff;
border: 1px solid #061488;
padding: 0 15px 15px;
margin: 20px -16px;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
box-shadow: 0 0 0 rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
-goog-ms-border-radius: 0;
border-radius: 0;
}
ga ketemu.. gimana ya mas

25/01/13, 09.59 O

@Asih Budi AriyantiKalau begitu, untuk mempermudah pencarian (untuk mempermudah dalam menemukan) bagian tersebut maka coba buka editor template terlebih dulu, dan kemudian setelah kode ditampilkan tekan F3 atau Ctrl + F.

Nah, selanjutnya gunakan .main-inner .widget { untuk melakukan pencarian.

Dengan cara yang demikian saya yakin Sobat akan lebih mudah untuk menemukan bagian yang dimaksud. :)

07/04/13, 10.54 O

mas,,blog saya sudah ada tambahan widgetnya tapi kok ndak bisa di edit ya,,jadi kaya widget mati

19/04/13, 01.00 O

@Kukuh WardhaniKalau yang Sobat maksud adalah link 'edit' yang tidak dapat diklik, maka bisa jadi itu disebabkan karena link tersebut tertutup oleh layout widget yang lainnya.

Nah, jika kasusnya sudah seperti itu, maka yang perlu dikerjakan adalah melakukan penataan pada layout widgetnya. Dan ini bisa dilakukan dengan mengedit CSS layout yang terdapat dalam template.

16/06/13, 20.15 O

mas gimana caranya klo pake gambar di header, soalnya kepotong gitu...

16/06/13, 21.50 O

@rxoroxrKalau misalnya kepotong karena ukuran gambar yang terlalu besar, saya rasa dapat ditata dengan memanfaatkan CSS, Sob.

Sebagai contoh gambar terletak pada bagian bagian Header1 (misalnya). Nah, berarti dapat ditambahkan CSS seperti di bawah ini.

#Header1 img{width:100%;height:80px;}

Jadi seperti yang tampak pada contoh tersebut ukuran gambar yang terletak pada ID Header1 kita tentukan secara langsung, baik untuk ukuran lebar maupun tingginya.

sementara itu untuk ukuran lebar dan tinggi tentu saja menyesuaikan dengan ukuran yang Sobat inginkan.

19/06/13, 19.01 O

ayah knp logo saya tidak bisa diklik?

20/06/13, 16.53 O

@Arif Fajar NasuchaSobat, setelah saya cek, sepertinya tidak ada masalah dengan logo yang terpasang. :)

24/06/13, 16.53 O

hehehe.. iya ayah..
kemaren tidak bisa tapi sudah saya benerin sendiri..
trimakaasih ayah :)

26/06/13, 06.24 O

@Arif Fajar NasuchaOwh, gitu ya Sob.

Ya syukurlah kalau begitu. :)

Anonim
06/07/13, 03.00 O

Ayah, saya saya ingin pasang logo di depan judul blog saya. Selama ini saya pakai metode upload gambar di header untuk judul blog, tapi kenapa jadinya aneh dan akhirnya saya memutuskan untuk menyimpan logo itu sampai ketemu penjelasan ahli yang masuk akal. Maklum, saya ngeblog juga otodidak ayah. Mohon pencerahannya.

Salam,

07/07/13, 00.38 O

@travendom.comKalau menurut saya sih sebenarnya secara teknis tidak beda jauh dengan cara yang saya uraikan pada artikel di atas, Sob. Dalam hal ini adalah dengan cara menambahkan sebuah section baru pada bagian header.

Hanya saja karena section baru tersebut akan diposisikan pada bagian kiri, maka tentu saja floating yang dipakai pada CSS-nya adalah float:left;

15/11/13, 23.34 O

makasi banyak yaaa....meskipun sudah berpusing-pusing ria, akhirnya bisa juga. ^^

18/11/13, 10.02 O

@Deasy SalvinaSama-sama Sob. Terimakasih juga atas pos komentarnya dalam artikel ini. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog