Cara Membuat Kotak Script di Posting Blog

Cara membuat kotak script di posting blog. Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Cara membuatnya, Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dan pilih entri baru.
2. Selanjutnya buatlah tulisan seperti dibawah ini.

3. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script. 
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
4. Untuk lebih jelasnya, lihat gambar dibawah ini.

5. Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:

6. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.
7. Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. Selesai.

Keterangan Kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>

1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
2. Double; = Bentuk kotak, bisa diganti dengan, 
dashed
dotted
Double
Groove
inset
outset
ridge
3. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
4. background-color:ffffff; = warna dalam kotak. 
5. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

Kotak Script Dengan Scroll.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>

1. Sama seperti cara diatas, masukan kode script ke HTML.
2. overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)
3. Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.
<div style="border: 3px #1780dd solid; float: right; dan lain-lain.
Kotak Posisi Kanan
4. Untuk yang posisi tengah, saya belum tau, nanti jika sudah tau, akan saya tambahkan kembali diposting ini. 

Dengan menambahkan kotak script di posting blog, maka halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting. Semoga Bermanfaat.

Cara Menghilangkan Tombol Share Di Blog

Cara menghilangkan tombol share di blog. Tombol share adalah salah satu alat untuk membagikan posting ke facebook, twitter, googleplus dan lain-lain, yang disediakan oleh blogger. Letaknya berada dibawah posting blog. Tombol tersebut akan muncul dihalaman awal blog, dari setiap posting. Untuk lebih jelasnya, silakan lihat gambar dibawah ini.

Dari gambar diatas, tombol share tepatnya berada di bawah tulisan diposkan oleh xxx. Mungkin sedikit menggantu tampilan awal blog. Untuk cara menghilangkan tombol share di blog, agar tidak terlihat di halaman awal, tapi muncul di setiap halaman posting blog yang dibuka. Untuk lebih jelasnya.

Ikuti langkah-langkah dibawah ini.

1. Login ke Blogger.
2. Dari halaman dasbor. Pilih pengaturan Template.
3. Selanjutnya klik edit HTML dan cari kode <b:includable id='shareButtons' var='post'> Tampilan kode awalnya kira-kira seperti ini.
<b:includable id='shareButtons' var='post'>...</b:includable>
4. Klik tanda >...<  maka akan terbuka semua kode lengkapnya.
5. Sekarang yang harus kita lakukan adalah, menambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode-kode tombol share diatas.
6. Berikut contoh lengkap penempatan kodenya.
<b:includable id='shareButtons' var='post'>
 <b:if cond='data:blog.pageType == "item"'> 
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email'....
.............................................................................................................................................
 <data:post.dummyTag/></div></b:if></b:if>
</b:includable>
7. Selanjutnya klik preview, untuk melihat sudah hilang atau belum tombol share di halaman awal blog. Jika sudah hilang, baru Save Template. Selesai.

Dengan menyembunyikan tombol share dari halaman awal blog. Maka akan menambah kecepatan loading blog. Walaupun hanya sedikit, tapi itu sangat berpengaruh, karena tombol share yang ditampilkan adalah berupa gambar. Dengan menyembunyikan tombol share, blog akan terlihat rapi tidak berantakan.

Tanpa harus menghapus atau menonaktifkan fungsi tombol share. Karena tombol share sendiri sangat bermanfaat bagi blog, untuk membagikan isi dari artikel blog ke situs sosial media atau situs lainnya.

Sekarang, coba baca juga cara membuat tombol share di blog. yang pasti tampilannya beda dengan tombol share default blogger. Disitu juga dijelaskan agar tombol share tidak muncul di halaman awal blog. Tapi munculnya disetiap halaman posting yang di buka. Semoga Bermanfaat.

Cara Menghilangkan Tang Obeng Blog

Cara menghilangkan tang obeng di blog. Gambar tang dan obeng berada di setiap widget blog, fungsinya adalah untuk mengedit dengan cepat. Jika kita klik pada suatu widget, maka akan terbuka halaman pengaturan widget tersebut. Untuk lebih jelasnya, coba lihat gambar dibawah ini.

Mungkin sedikit berantakan, jika melihat halaman blog dihiasi gambar tang obeng di setiap widget blog. Sehingga ada keinginan untuk menghapus atau menghilangkannya dari halaman blog. Cara menghilangkan gambar tang obeng di blog.
Ikuti langkah-langkah dibawah ini.

1. Login ke blogger.
2. Dari halaman dasbor, buka pengaturan template.
3. Selanjutnya klik edit HTML dan cari kode ]]></b:skin>
4. Dan tempatkan kode berikut ini diatasnya.
.quickedit{display:none;}
5. Terakhir klik preview, jika sudah hilang gambar tang-obeng, baru save template, selesai.

Tambahan: Cara menghilangkan tang obeng di blog

Ternyata setelah saya pelajari lagi, cara diatas hanya menyembunyikan tampilan quick edit saja. Saya coba test seo tools di http://chkme.com/ , dan hasilnya masih terdapat gambar yang tidak mempunyai  title dan deskripsi gambar. Gambarnya seperti dibawah ini.

Saya coba buka satu persatu gambar diatas, ternyata gambar tang obeng. Jadi bingung, padahal gambar sudah hilang dari blog. Akhirnya dapat juga cara menghilangkan quickedit dan juga mematikan fungsinya. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Login ke blogger. ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode <b:include name='quickedit'/> dan ganti menjadi.
<!--b:include name='quickedit'/-->
3. Akan ada banyak kode yang sama, Ganti semuanya. Karena memang kode itu ada disetiap widget dan posting blog. 
4. Selanjutnya, coba cek di http://chkme.com/. Dari yang saya coba, gambar quick edit sudah hilang, hanya tinggal 2. Seperti gambar dibawah ini.

5. Gambar yang tertinggal itu adalah gambar quick edit di widget google friend connect dan widget atribut blogger, yang bertuliskan diberdayakan oleh blogger. Ternyata memang kedua widget tersebut, gambar quick editnya tidak bisa dihapus. 
6. Setelah melakukan cara diatas, score seo di situs chkme naik.

Dengan kedua cara diatas, maka blog akan terlihat rapi dan juga bisa menambah tingkat seo blog. Loading blog pun akan bertambah sedikit lebih cepat, karena disembunyikannya gambar tang dan obeng di blog. Semoga Bermanfaat.

Cara Membuat Gambar Header Blog

Cara Membuat Gambar Header Blog. Satu lagi cara desain blog sendiri, yaitu dengan menambahkan gambar di header blog. Cara membuat gambarnya bisa menggunakan software, bisa juga secara online. Artikel ini akan menjelaskan tentang cara membuat gambar header blog secara online. Prosesnya tidak lama, cukup mengunjungi situs penyedia layanan pembuatan gambar, dan memilih salah satu bentuk gambar yang kita inginkan. Setelah itu download dan pasang di blog kita. Silakan lihat dulu contoh gambar dibawah ini.

Gambar diatas adalah contoh gambar dalam bentuk tulisan yang pernah saya gunakan di blog ini. Dengan menggunakan gambar, kita punya banyak pilihan bentuk dan juga warna yang bisa digunakan. Berbeda dengan tampilan huruf blog, yang warna dan bentuknya terbatas, hanya bisa menggunakan satu warna.

Ukuran gambar yang dihasilkan cukup kecil dan juga tidak memberatkan loading blog, ukuran huruf bisa diatur sesuai dengan yang kita inginkan. Disitus tersebut ada juga jenis gambar animasi, seperti huruf yang mengeluarkan api, Petir, animasi Glow yang bergerak dan masih banyak lagi.

1. Gambar yang dihasilkan berformat PNG dan juga GIF, sesuai dengan bentuk dan animasi yang digunakan. Dan ukuran File gambar yang dihasilkan juga berbeda, antara Png dan Gif, sesuai dengan ukuran huruf gambar yang digunakan.
2. Untuk gambar animasi ukuran huruf 40 keatas bisa sampai 50-70kb dalam format Gif. Sedangkan untuk gambar biasa tanpa animasi hanya 10-30kb dalam format png.
3. Silakan pilih bentuk dan ukuran gambar yang sesuai dengan yang kalian inginkan.

Untuk lebih jelasnya, Cara membuat gambar header blog. 

Ikuti langkah-langkah dibawah ini:

1. Kunjungi situs http://cooltext.com/ 
2. Selanjutnya pilih salah satu gambar huruf yang kalian suka.
3. Dan atur warna dan juga bentuk hurufnya.
4. Setelah selesai, lihat bagian bawah, klik Creat Logo.
5. Terakhir Download. Seperti gambar dibawah ini.

6. Sekarang, memasang gambar tersebut di blog kita.
7. Login ke blog, dan Klik pengaturan Tata Letak.
8. Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.

9. Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
10. Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi. Jika ingin menyembunyikan tulisan judul dan deskripsi blog. Ikuti langkah-langkah dibawah ini.
    

Cara menyembunyikan judul dan deskripsi blog

1. Sekarang kita sembunyikan tulisan judul dan deskripsi dari halaman blog, cari kode ]]></b:skin> dan tempatkan kode ini diatasnya.
.Header h1 {
   height: 0px;
   visibility: hidden;
   display: none;
}

.Header .description {
   height: 0px;
   visibility: hidden;
   display: none;
}
2. Setelah menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari tampilan blog, tinggal gambar saja.
3. Dengan begitu judul dan deskripsi tetap ada, hanya disembunyikan.
4. Silahkan cek di chkme.com untuk melihat masih ada atau tidak title judul blog H1, jika ada berarti gambar header tidak akan mempengaruhi seo blog.

Jika kita memliih menempatkan gambar selain judul dan keterangan atau tempatkan keterangan setelah gambar. Maka H1 header akan hilang, dan itu mempengaruhi seo blog. Jika ingin mencoba silahkan saja cek di chkme.com atau disitus chek seo blog lainnya. Agar H1 header blog disembunyikan dari halaman blog tanpa mempengaruhi seo blog, gunakanlah cara seperti diatas. Semoga Bermanfaat.

Cara Membuat Menu Dropdown di Blog

Menu dropdown, berarti menu yang menurun. Menu yang lebih simple, dan tidak banyak memakan tempat. Sebelumnya saya sudah menjelaskan cara membuat menu di blog, dengan memanfaatkan laman untuk membuat menu blog. Caranya sedikit lebih sederhana, dari pada menu dropdown yang akan saya jelaskan kali ini. Untuk lebih jelasnya, lihat dulu gambar menu dropdown dibawah ini.

Menu dropdown ini ada yang satu cabang, dan juga ada yang 2 cabang. Saya akan coba menjelaskan sesederhana mungkin, cara membuat dan mengatur menu dropdown sesuai dengan keinginan, agar mudah untuk dimengerti. Menu dropdown ini tidak mengedit kode html di template, tapi menggunakan widget/gadget di blog, jadi template aman ketika ada kesalahan dalam pembuatannya.Cara membuat menu dropdown di blog.

Ikuti langkah-langkah dibawah ini:

Membuat Menu Dropdown

1. Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.
<style>
KODE CSS
</style>
KODE HTML
2. Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.
3. Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.
4. http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.
5. Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.
6. Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.

7. Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

 Memasang Menu di Widget atau Gadget

1. Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letak di blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.
2. Copy semua kode di Notepad tadi dan Pastekan semua kode ke Gadget HTML/JavaScript. Dan Simpan.
3. Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.
4. Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.
5. Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
<b:includable id='main'>
6. Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Dan Save Template.
7. Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.
8. Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.
9. Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

Cara lain dengan memasukan kode css dan html di template blog

1. Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.
Kode CSS
]]></b:skin>
<div class='tabs-outer'>
Kode HTML
2. Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.
3. Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.

Cara membuat daftar artikel terbaru di blog

Cara membuat daftar artikel terbaru di blog. Daftar artikel terbaru atau artikel yang baru saja di publikasikan. Biasanya terletak di sidebar kanan atau kiri blog. Fungsinya sendiri adalah untuk menampilkan daftar artikel terbaru, yang mungkin saja ingin dilihat oleh pengunjung. Atau juga sebagai penanda, bahwa penulis blog, selalu update artikel atau posting terbaru di blognya. Untuk lebih jelasnya silakan lihat gambar dibawah ini.

Dengan adanya daftar artikel terbaru. Maka kemungkinan pengunjung untuk membuka dan membaca artikel lain di blog kita semakin besar. Dan itu bagus untuk meningkatkan jumlah View dari pengunjung. Artikel ini akan menjelaskan cara membuat daftar artikel terbaru di blog. Kurang lebih gambarnya seperti diatas. cara membuatnya cukup mudah, tidak harus edit html, yang terkadang eror, cukup memasukan url blog ditambah beberapa kode untuk menampilkan artikel terbaru. Untuk lebih jelasnya.

Cara membuat daftar artikel terbaru di blog

Ikuti langkah-langkah dibawah ini.

1. Login ke blogger.
2. Dari halaman dasbor ke Tata Letak.
3. Selanjutnya dibagian layout klik Tambahkan gadget. Dan pilih Feed, seperti gambar dibawah ini.

4. Selanjutnya masukan alamat feed dari url blog kamu, dengan menambahkan atom.xml dibelakangnya. Dan klik Lanjutkan. Ganti Url dengan alamat blog kamu.

5. Maka akan terbuka pengaturan konfigurasi feed seperti gambar dibawah ini. Beri judul sesuai dengan yang kamu inginkan, dan centang buka link dijendela baru. Dan simpan.

6. Sekarang coba lihat blog kamu. Daftar artikel terbaru sudah tampil. Selesai. 

Setiap artikel terbaru yang baru saja kamu publikasikan. Akan terlihat di daftar artikel terbaru. Dengan batas tampilan 5 artikel. Artikel yang ditampilkan hanya judul saja, tidak menggunakan gambar. Untuk label, yang ditampilkan adalah semua label, tergantung label atau kategori mana yang kita masukan. Jadi bukan menampilkan satu label atau kategori yang sama, tapi semua. Semua artikel terbaru, akan terlihat di daftar artikel terbaru. Semoga Bermanfaat.

Cara Menghilangkan Tulisan Langganan Entri Atom

Cara Menghilangkan Tulisan Langganan Entri Atom. Langganan Entri Atom. Tulisan yang berada di bawah daftar posting blog. biasanya setelah tulisan Home-Previous-Next di blog. Tulisan asli dari bawaan blogger yang muncul pada setiap blog. Fungsinya sendiri adalah tombol untuk berlangganan artikel atau posting blog.

Jadi ketika ada pengunjung yang ingin berlangganan artikel di blog, tinggal klik langgana entri atom itu saja. Maka akan terbuka halaman baru untuk berlangganan, dengan memasukan alamat email yahoo, google atau bookmart dari browser yang ingin di kirimkan berlangganan artikel. Untuk lebih jelasnya silakan lihat gambar dibawah ini.

Tulisan langganan entri atom diatas mungkin sedikit menggangu tampilan blog, sehingga banyak blogger yang ingin menghapusnya, agar tampilan blognya terlihat rapi sesuai dengan keinginan. Cara menghilangkan tulisan langganan entri atom di blogger. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger.
2. Dari halaman dasbor, buka Template. Dan Klik edit HTML
3. Selanjutnya cari kode <div class='feed-links'> . Gunakan Ctrl F untuk memudahkan pencarian. Kode lengkapnya seperti dibawah ini.
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
4. Hapus atau delete semua kode diatas.
5. Selanjutnya klik preview. Untuk memastikan bahwa tulisan langganan entri atom sudah hilang atau belum. Jika sudah hilang, baru Save. Selesai.

Setelah melakukan cara diatas, maka tampilan blog akan terlihat lebih rapi. Dan juga bisa menambah kecepatan loading blog karena walaupun sedikit tetapi tulisan langganan entri atom masih dihitung bytenya, karena kita membukanya melalui website blogspot yang membutuhkan koneksi internet untuk membukanya.

Itulah cara menghilangkan atau menghapus tulisan langganan entri atom di blog. Silakan baca juga cara mengganti tulisan home-previous-next dengan tulisan sendiri atau dengan gambar. Agar tampilan blog menjadi lebih menarik.Atau juga menambahkan Tombol share di bawah postingan blog seperti facebook, twitter, dan lain-lain, disetiap posting. Semoga Bermanfaat.