Cara Menambah elemen Gadget di bawah postingan Blog

Cara Menambah Elemen add Gadget Di Bawah Postingan. Berikut ini Info blogger akan membahas tentang Cara Menambah Elemen Di bawah Postingan. Untuk membuatnya anda akan sedikit menambahkan kode CSS ke dalam tamplate blog dan Html juga kedalam template blog. Tutorial dibawah ini terdapat dua bagian yaitu Menambah dua elemen di bawah postingan dan cara menambah satu elemen dibawah postingan.

Cara Menambah dua elemen di bawah postingan

Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML. ( Sebelum lanjut sebaiknya backup template anda agar bisa di kembalikan seperti semulah jika nantinya terjadi kesalahan. Misalnya simpan template anda ke dalam notepad ).

1. Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )

#magazine-left { width:48%; float:left; }
#magazine-right { width:48%; float:right; }

Anda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll. Anda bisa juga mengaturl lebarnya jika merasa kurang pas ( width:48%; ).
2. Kemudian cari kode berikut atau yang serupa:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>

3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine-left' class='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section id='magazine-right' class='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

Sampai pada point ini, Anda dapat melihat preview template atau pratinjau. Jika sudah sesuai  dengan keinginan anda, selamat anda berhasil tapi jika belum mungkin anda dapat mencoba trik yang lain di artikel bagaimana membuat dua kolom add gadget dibawah postingan.

Diatas adalah jika anda ingin menambahkan dua elemen add gadget dibawah postingan. Tapi jika anda hanya ingin menambahkan satu gadget saja anda dapat mengedit kode di atas seperti tutorial di bawah ini!

cara menambah satu elemen dibawah postingan

Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML. ( sebelumnya backup template anda agar bisa di kembalikan seperti semulah jika terjadi kesalahan. Misalnya simpan template anda ke dalam notepad ).

1.Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )

#magazine { width:100%; float:center; }

Anda masih bisa menambahkan kode lain pada CSS diatas, misalnya menambahkan border atau mengatur kembali lebarnya ( width:100%; )  dll.
2. Kemudian cari kode berikut atau yang serupa:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>

3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine' class='magazine' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
</b:if>

Selanjutnya klik "Save Template" dan setelah tersimpan klik "Tata Letak" kemudian lihat hasilnya. Sampai pada point ini, Anda dapat melihat preview template atau pratinjau. Jika sudah sesuai dengan keinginan anda atau belum.

Sebagai tambahan anda juga dapat mencoba menambahkan elemen add gadget diatas postingan blog. atau menambahkan add gadget footer 3 kolom di blog. Nah bagaimana? mudah-mudahan sobat semuanya berhasil menambahkan elemen di blog sobat.

Read More

Cara Menghapus | Obeng Dan Tang di Blog Permanen

CARA PERTAMA - Pasti di widget blog kalian ada gambar atau tanda Obeng dan Tang kan ? Sebagian orang mengatakan blognya kurang menarik jika melihat gambar atau tanda obeng dan tang di blog mereka. Ada pula yang mengatakan blog tidak Valid HTML5 dan CSS3 karena di sebabkan gambar Obeng dan Tang di blog ini. Nah kali ini saya akan berikan Cara Menghapus Obeng Dan Tang di Blog secara Permanen.

Langkah Menhapus Obeng dan Tang di Blog secara Permanen

Sebenarnya ada dua cara menghapus obeng dan tang di blog :

• Pertama, hanya menghilangkannya saja.
• Kedua, Menghapusnya secara permanen.

Kedua cara diatas saya kombinasikan di tutorial dibawah ini, silahkan disimak..

1. Langkah awal Klik Template > Edit Template
2. Kita akan menambahkan beberapa script, silahkan tambahkan script dibawah ini

.quickedit{display:none;}

3. Copy dan Pastekan script diatas sebelum ]]></b:skin>, lalu Save.
4. Dilangkah ini kalian masih dibagian Edit HTML, disebelahnya ada Jump To Widget. Klik lalu pilih widget mana yang ada gambar tang dan obeng. Klik tanda panah kecil disamping kiri

5. Kalian cari kode berikut ini <b:include name='quickedit'/> dan hapus. Hampir disemua widget ada kode tersebut silahkan cek setiap widget dan hapus kodenya.

CARA KE 2

 

Cara Menghilangkan Gambar Obeng dan Tang Pada Blog

Gambar obeng dan tang adalah istilah lain dari quick edit pada blog. Gambar tersebut sebenarnya bukan merupakan suatu masalah bagi pengunjung blog, karena gambar tersebut hanya muncul ketika pemilik blog sedang "login" di akun blog yang bersangkutan dan hanya muncul di komputer sang pemilik. Jadi para pengunjung tidak terganggu pada tampilan gambar obeng dan tang tersebut dan jika pemilik blog sudah "sign out" maka gambar tersebut sudah tidak muncul lagi. Namun jika gambar tersebut dirasa cukup mengganggu maka berikut saya kasih tau cara menghilangkannya dari pandangan anda, ikuti cara berikut dan jangan lupa tinggalkan komentar pada kolom yang telah tersedia sebagai wujud apresiasi anda pada blog ini.

1. Login ke akun blogger.com
2. Klik template >>> edit HTML >>> klik expand widget template
3. Cari kode ini : ]]></b:skin>
4. Copy kode ini : .quickedit{display:none;}
5. Paste tepat diatas kode : ]]></b:skin>
6. Simpan hasil pekerjaan anda, dan Selesai

Silahkan di cek apakah gambar obeng dan tang sudah hilang dari pandangan anda, jika belm silahkan ulangi tahapan diatas, dan akhirnya cukup sekian dan semoga bermanfaat.

Read More

Cara Membuat Elemen Baru di atas halaman postingan

 Berikut ini Cara Membuat Elemen Baru di Main-Wrapper (di Atas Halaman Posting):

1. Login Bloggger,
2. Masuk template. Backup dulu template yang ada, sebagai antisipasi kemungkinan terjadi kesalahan. Caranya, tekan tombol backup/restore di bagian kanan atas. 
3. Jika sudah selesai, klik edit html. Kalaupun ada peringatan, tekan saja Proceed,
4. Cara kode berikut: <b:section class='main' id='main'
5. Pada kode di atas setelah id=’main’ biasanya terdapat kode lain semisal: “showaddelement=’no’>“. Jika ada sedikit perbedaan kode html seperti contoh di bagian atas (header), sesuaikan juga penulisan kodenya. Ganti kode html-nya dengan kode html berikut ini: <b:section class='main' id='main' showaddelement='yes'>
6. Selesai. 

Preview atau pratinjau terlebih dahulu sebelum save, untuk antisipasi terjadinya kesalahan. Selamat mencoba dan semoga berhasil.

Read More

Cara Membuat Header | dengan Iklan 728 x 90 di Blog

Oke, kembali lagi dengan saya. Sudah bosan kah? Hehe. Ini merupakan tutorial kelanjutan dari tutorial "Cara Mandiri Membuat Template Blog Sendiri" Pada tutorial sebelumnya saya hanya memberikan template dasar dan pendahuluan untuk membuat template yang paling dasar. Sebelumnya, anda harus keluar dari template editor kemudian masuk kembali ke template editor agar memastikan widget blog / artikel sudah muncul di template.

Kita lanjut membuat template dari atas, ke bawah, dan dari luar ke arah dalam bagian template. Sekarang kita akan belajar cara untuk membuat header blog dengan mendukung iklan 728 x 90 px di blog. Disini saya juga akan memberikan tips-tips yang semoga bermanfaat untuk anda yang ingin membuat template.

Karena sebelumnya saya memberikan template dengan #wrapper berukuran 1000px, maka untuk membuat iklan dengan ukuran 728 x 90 px maka kita tambahkan saja menjadi 738 x 100 px. Loh kok ditambah 10px? Yap, 10 px nya itu untuk jarak antara widget dengan kulit luar element (padding). Jadi, di sekitar gambar iklan tersebut ada jarak 5px antara kulit element. Untuk melihat jelasnya, saya berikan gambar contoh. 

Nah, di gambar atas tersebut pada iklan lazada di antaranya ada padding 5px. Gambar yang berwarna hijau kekuning-kuningan merupakan padding. Sekarang untuk membuatnya 2 kolum kita akan membagi ukuran untuk header yang kiri. Karena header kanan (iklan) berukuran 738px, makan header yang kiri berukuran 1000 - 738 px = 262px. Sebelumnya kita buat dulu CSS untuk membungkus header, anggap namanya #header-wrapper.

Letakkan CSS berikut di atas ]]></b:skin>

#header-wrapper{width:100%;overflow:hidden;}

Sebelumnya letakkan dulu HTML pembungkus header di bawah <div id='wrapper'>

<header id='header-wrapper'>
<!-- Letak Kedua Widget (b:section) Header -->
</header>

Untuk membuat 2 widget didalam 'header-wrapper', maka letakkan 2 b:section didalam 'header-wrapper'. B:section yang dibuat kuranglebih seperti ini.

<b:section class='header' id='header-kiri' maxwidgets='1'/>
<b:section class='header' id='header-kanan' maxwidgets='1'/>

Sebelumnya, b:section merupakan kode bawaan blogger untuk penempatan widget. Class merupakan sesuatu yang menyamakan CSS suatu element. Id merupakan sesuatu yang membedakan CSS suatu element. Maxwidgets merupakan penentu jumlah berapa element maksimal yang boleh ditambahkan.
Kurang lebih kode HTML nya akan seperti ini.

    <div id='header-wrapper'>
      <b:section class='header' id='header-kiri' maxwidgets='1' showaddelement='yes'>
       <b:section class='header' id='header-kanan' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Karena tadi sudah sepakat bahwa untuk header-kanan berukuran 738px, dan header-kiri berukuran 262px. Untuk membantu Element widget tersebut berdampingan, maka kita gunakan CSS float. Karena header-kiri berada di kiri, maka gunakan float:left dan header-kanan berada di kanan, maka gunakan float:right. Maka letakkan CSS berikut tepat di atas ]]></b:skin>

#header-kiri{width:262px;overflow:hidden;float:left;}
#header-kanan{width:738px;overflow:hidden;float:right;}

Kemudian simpan template. Silahkan buka menu "Tata Letak" dan lihat widget hasilnya. Tambahkan widget header di kiri dan tambahkan widget yang berisikan script iklan. Simpan. Hasilnya kurang lebih seperti berikut.

Namun, hasilnya masih kurang rapih karena belum ada jarak antara isi widget dengan kulit element. Untuk membuat jarak tersebut bisa menggunakan CSS padding. Maka letakkan kode berikut tepat di atas ]]></b:skin>

.header .widget{padding:5px;}

Kurang lebih hasilnya akan seperti berikut.

Selesai.

Nah yang menjadi pertanyaan, kenapa paddingnya tidak ditaruh di CSS #header-kiri dan #header-kanan? Nah, ini ada sedikit tips. Kalau anda sudah menentukan ukuran element tersebut, maka letakkan padding pada element didalamnya. Karena kalau meletakkan padding pada element yang sudah ditentukan ukurannya, maka ukuran tersebut bisa bertambah atau berkurang dari yang sudah ditentukan. Oke, contohnya peletakkan padding di #header-kiri dan #header-kanan. Hasilnya sangat tidak baik.

Dari gambar di atas, ukuran #header-kanan berubah menjadi 748px karena ditambahkan padding sebesar5px. Dan tidak lagi berada berdampingan.

Semoga tutorial dan tipsnya dapat dimengerti dan bisa menjadi ilmu bagi anda yang ingin membuat template.

Tunggu kelanjutan tutorial selanjutnya.

Read More

cara mengatur | ukuran header blog

Merubah Lebar Header Blog

Pada kesempatan ini saya coba sedikit memberikan info mengenai merubah ukuran header pada tampilan baru editing template blogger. Sebelum memulai tutorial ini, coba teman-teman rubah dulu background header blog masing-masing pada menu template >> costumize/sesuaikan >> kemudian pada halaman desain template pilih advance/tingkat lanjut >> lalu klik latar/background dan cari header background (latar header) untuk merubah warnanya agar kita bisa melihat perubahan size yang akan kita praktekan. Kebetulan pada percobaan ini saya menggunakan template default blogger yang "minimalist template/template sederhana", seperti biasa yang saya gunakan adalah template default blogger, sedangkan pada costumize template yang teman-teman dapat free dari situs-situs template mungkin tidak berhasil karena setiap template memiliki hirarki class css yang berbeda.

Jika sudah selesai diwarnai bagian header blognya maka tampilannya akan seperti ini (kebetulan icon header image saya sudah saya center jadi tampilannya menjadi seperti ini) :

Pada gambar diatas, bagian sisi header yang saya tandai dengan anak panah berwarna merah adalah bagian yang akan kita coba untuk memperlebarnya. Cara merubahnya cukup mudah, cukup gunakan CSS berikut ini:

.header-outer{
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}

Seperti biasa CSS tersebut ditambahkan pada bagian template >> costumize/sesuaikan >> pada desain template klik menu advance/tingkat lanjut >> klik tambahkan css/add css. Pada kode css yang saya warnai hijau left:-40px; merupakan kode untuk mengatur kerapatan sisi kanan header dengan tampilan layar, silahkan angkanya dirubah-rubah sesuai keinginan teman-teman dengan mencocokan perubahan preview yang tampak pada halaman desain blogger, dan jika sudah merasa cocok silahkan di save dengan klik tombol "terapkan ke blogger" pada pojok kanan atas halaman desain blogger. Kode berikutnya yaitu yang saya warnai biru muda width:1000px; merupakan kode untuk menyesuaikan panjang header di sisi kanan, silahkan di sesuaikan angkanya menurut selera teman-teman. Kode berikutnya yaitu yang saya warnai orange height:40px; merupakan kode untuk merubah ukuran tinggi header, seperti biasa silahkan di sesuaikan dengan selera teman-teman. Yang terakhir yaitu kode yang saya warnai merah bottom:10px; merupakan kode jarak dari bagian bawah, jadi jika angka ini dirubah/diperbesar maka akan ada jarak antara header dengan widget yang ada pada bagian bawah header (dalam contoh ini yaitu jarak antara header dan widget pages seperti yang tampak pada blog saya ini).

Merubah Lebar Widget Menu Pages Pada Blogger

Setelah berhasil merubah ukuran/size header, maka selanjutnya saya mencoba merubah ukuran lebar widget pages yang ada pada bagian header saya. Kira-kira gambaran menu widget yang akan saya rubah ukurannya seperti ini :

Pada gambar diatas, bagian sisi yang saya beri warna merah adalah bagian sisi widget pages/laman yang akan sedikit say perbesar ukurannya. Caranya culup mudah dan hampir sama dengan cara melebarkan header di atas, hanya saja class pada css yang kita gunakan berbeda. Berikut ini kode css yang saya gunakan:

.fauxborder-left {
    background-position: left top;
    background-repeat: repeat-y;
    position: relative; width:960px; left:-10px;
}

Kode css yang saya warnai biru diatas sebenarnya kode yang sudah ada pada edit template blogger untuk template sederhana default blogger, sedangkan kode yang berwarna hijau adalah kode css yang saya tambahkan untuk merubah posisi kiri widget dan memperpanjangnya ke arah kanan, silahkan di rubah angkanya sesuai selera teman-teman.

Sedangkan untuk menambahkan kode css ini bisa langsung melalui edit template blogger dan tekan ctrl+f kemudian cari penggalan kode .fauxborder-left { kemudian silahkan ditambahkan deklarasi untuk width dan left dengan posisi yang sama seperti kode diatas dan kemudian save template. Tetapi saya lebih suka menambahkannya pada bagian costumize/sesuaikan template karena saat kita merubah-rubah angka width dan left-nya bisa langsung di lihat di preview sudah cocok atau belum sesuai yang kita inginkan. Untuk cara kedua ini saat menambahkannya usahakan seluruh code css di atas di copy semua dan di paste pada bagian add css, jadi sedikit berbeda jika kita menambahkannya dari menu edit/html template, karena pada penambahan di edit/html template kodenya sudah ada dan kita tinggal menambahkan kode deklarasi width dan left sedangkan jika mengunakan costumize/sesuaikan template, seluruh kodenya kudu di copy untuk memperjelas class css mana yang ingin kita tambahkan. 

Jika sudah berhasil kira-kira tampilannya akan seperti gambar berikut ini (atau bisa dilihat pada blog saya ini)

Selamat mencoba.

Read More

cara menghapus | navbar di blog

Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja.

Berikut salah satu caranya :

• Masuk ke akun blogger anda
• Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
  
  #navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none
  }
• Terakhir klik Simpan Template.

Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :

• Sama seperti cara pertama. Masuk ke akun blogger anda
• Klik pada Template.
• Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
  
  <script type='text/javascript'>
  <![CDATA[
  <!-- /*<body>*/ -->
  ]]>
  </script>
• Simpan Template Anda.
• Anda akan melihat gambar konformasi seperti di bawah ini.
  
• Klik Delete Widget untuk menghapus Navbar.
  

Jika Anda melakukan cara ini Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus / Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :

 <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       bla...
       bla...
       bla...
</b:widget>
</b:section>

Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus / Menghilangkan Navbar Blogger.

Read More