Cara membuat footer 3 kolom

Assalamualaikum.
Footer atau kaki pada blog biasanya terletak pada bagian bawah blog,dimana footer ini mempunyai fungsi yang hampir sama dengan sidebar yaitu kita dapat menempatkan beberapa  widget menarik di blog,hanya bedanya footer berada di bagian bawah blog.
Jika anda menggunakan template default dari blogger yang sekarang ini maka anda akan dengan mudah membuat footer dengan jumlah lebih dari 1 dengan cara masuk ke perancang template.Namun bagi anda yang sedang memodifikasi sebuah template dari sumber diluar blogger maka anda akan sedikit mengalami kesulitan karena anda hanya bisa mengeditnya di pengaturan edit HTML.
Untuk itu di tutorial kali ini saya akan share cara membuat footer 3 kolom dengan cara mengedit template di mode edit HTML.

Berikut cara membuat footer 3 kolom di blogger.
1.Pertama-tama silahkan anda login ke blogger.com.
2.Berikutnya klik Template > Edit HTML.
3.Silahkan anda cari kode ]]></b:skin> menggunakan CTRL+F (apabila anda menggunakan komputer)
4.Silahkan masukkan kode CSS berikut ini tepat diatasnya.

#footer-column-container { clear:both; } .footer-column { padding: 10px; }

5.Berikutnya silahkan anda cari kode HTML <div id='footer-wrapper'>.
6.Berikutnya silahkan anda masukkan kode berikut ini tepat diatasnya.

<div id='footer-column-container'> <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> <div style='clear:both;'/> </div>

7.Terakhir,silahkan anda klik save atau simpan untuk menyimpan perubahan.

Silahkan anda klik tata letak,maka di layout blog anda akan muncul 3 buah kolom baru pada nagian footer,silahkan anda isi kolom tersebut dengan widget menarik yang anda inginkan.
Demikianlah cara membuat footer 3 kolom di blogger,semoga mudah difahami.
Semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara mengetahui ID widget blogger

Assalamualaikum.
Widget di blogger merupakan suatu hal penting,dimana keberadaannya cukup membantu kita untuk mengelola konten apa saja yang akan kita tampilkan di blog entah itu label,arsip,popular post,daftar link,pemasangan widget eksternal dengan javascript dan lain sebagainya.
Selain itu keberadaan widget di blogger akan membuat blog kita jauh lebih menarik apabila widget tersebut kita modifikasi sedemikian rupa.
Bagi anda yang saat ini sedang memodifikasi sebuah widget blogger,entah itu label,arsip,popular post dan widget lainnya mungkin anda akan sedikit bingung mencari ID dari setiap widget tersebut,dimana jika anda akan memodifikasi sebuah widget di blogger anda harus mengetahui ID dari setiap widget yang ada di blog anda yang tentunya ada di halaman edit HTML template.
Untuk itu di kesempatan kali saya akan berbagi sebuah cara atau tips mudah dalam mencari ID dari sebuah widget di blogger yang semoga mudah difahami.Untuk mengetahui semua ID dari widget blogger caranya adalah sama,oleh karena itu disini saya akan mengambil 1 contoh saja yaitu cara mengetahui ID widget label.

Berikut cara mengetahui ID widget blogger.
1.Silahkan login ke blogger.com.
2.Berikutnya silahkan anda klik tata letak lalu klik tambahkan gadget,seperti contoh gambar dibawah ini.

3.Berikutnya,silahkan anda pilih widget label,seperti contoh gambar dibawah ini.

4.Berikutnya anda akan diminta untuk mengkonfigurasikan widget label tersebut,silahkan masukkan judul dari widget label tersebut,misal : Label Saya,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.
6.Berikutnya,silahkan anda klik template > Edit HTML.
7.Di halaman edit HTML,silahkan anda cari kode dengan keyword dari judul widget label yang baru anda buat,karena tadi anda menamai widget tersebut dengan nama Label Saya,maka silahkan anda cari kode dengan keyword Label Saya.Untuk lebih mudahnya silahkan anda gunakan CTRL+F jika anda menggunakan komputer.seperti contoh gambar dibawah ini.

8.Jika sudah ketemu,maka anda akan menemukan kode seperti,contoh gambar dibawah ini.

Coba anda perhatikan contoh kode dari gambar diatas,ada 2 kode yang saya beri lingkaran berwarna.

• Kode yang saya lingkari berwarna biru adalah kode dari judul widget label yaitu label saya.
• Kode yang saya lingkari berwarna merah yaitu  kode id='Label2' adalah kode ID dari widget  label saya.

Dengan begitu anda sudah dapat mengetahui sebuah ID dari widget label dan untuk mengetahui ID dari widget lainnya seperti popular post,arsip maka caranya adalah sama seperti contoh yang saya berikan diatas.
Lantas bagaimana jika widget di blog kita sudah ada? seperti popular post dengan judul posting terbaik? caranya mudah,yang hanya kita perlukan disini adalah klik template > edit HTML,masukkan keyword posting terbaik maka akan muncul ID dari widget tersebut.
Kenapa judul widget yang harus menjadi keyword? karena setiap ID di sebuah template itu berbeda-beda apalagi jika blog yang anda miliki mempunyai sebuah widget ganda dengan fitur yang sama.

Demikianlah caranya,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Membuat popular post unik

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara membuat popular post warna-warni dan popular post warna-warni v.2.Di kesempatan kali ini saya akan share cara membuat popular post dengan tampilan unik.
Contoh tampilannya adalah seperti contoh gambar dibawah ini.

Keterangan:

• Jika nomor tersentuh kursor maka nomor akan berputar beberapa derajat.
• Karena popular post ini menggunakan nomor,maka tampilan popular post ini akan sangat baik jika fungsi gambar thumbnail di nonaktifkan.
• Jika anda sudah terbiasa dengan kode warna,maka anda akan dapat membuat warna popular post ini lebih menarik.

Sudah tidak sabar untuk membuat popular post seperti contoh gambar diatas? baiklah berikut caranya.

Berikut cara membuat popular post dengan background warna-warni.
A.Langkah pertama.
Langkah pertama adalah menambahkan widget popular post di bagian sidebar blog,caranya adalah sebagai berikut.

• Silahkan anda login ke www.blogger.com.
• Setelah anda berhasil masuk ke halaman dashboard,silahkan klik nama blog yang akan anda pasangi popular post (apabila blog anda lebih dari 1).Contoh seperti gambar dibawah ini.

• Di halaman berikutnya silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

• Di halaman pengaturan tata letak,Silahkan anda klik add gadget di bagian layout sidebar,seperti contoh gambar dibawah ini.

• Nanti akan muncul tab baru berisi berbagai gadget yang bisa kita terapkan di blog,silahkan anda pilih atau klik entri populer,seperti contoh gambar dibawah ini.

• Berikutnya,silahkan anda hilangkan cecklist atau tanda centang pada bagian tumbnail gambar dan cuplikan,lalu klik simpan.Contoh seperti gambar dibawah ini.

B.Langkah kedua.
Langkah kedua yaitu menambahkan kode css pada bagian template blog.Caranya adalah sebagai berikut.

• Pertama,silahkan anda klik template,seperti contoh gambar dibawah ini.

• Di halaman pengaturan template silahkan anda klik edit HTML,seperti contoh gambar dibawah ini.

• Berikutnya anda akan melihat kode-kode yang membentuk struktur halaman blog anda,silahkan anda cari kode ]]></b:skin>,untuk memudahkan pencarian,silahkan anda gunakan CTRL+F (jika anda menggunakan komputer)
• Berikutnya silahkan anda masukkan kode css berikut ini tepat diatas kode ]]></b:skin> tadi.

/* popular post----------------------------------------------- */
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width: 90%;
margin-left: 25px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:90%;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #283C48; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px cuprum; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: capitalize;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

• Jika sudah,berikutnya silahkan anda klik save atau simpan untuk menyimpan perubahan.Kunjungi blog anda untuk melihat hasilnya.

Bagaimana? cukup menarik bukan?

Terimkasih telah berkunjung dan semoga bermanfaat.

Assalamualaikum.

Selengkapnya ➢

Mengatur jarak antara form komentar dan footer

Assalamualaikum.
Bagi anda yang sedang memodifikasi sebuah template blogger,anda tentu memikirkan jarak antara form komentar dan footer,dimana jarak tersebut akan seperti ruangan kosong tanpa widget di halaman post footer yang jika diperhatikan terus-menerus akan mengganggu pemandangan anda bahkan pengunjung.
Di tutorial kali ini saya akan share cara untuk mengatur jarak tersebut,sehingga anda dapat mengaturnya sesuai dengan keinginan anda.

Mengatur jarak antara form komentar dan footer
1.Silahkan anda login ke blogger.com seperti biasa.
2.Berikutnya klik template > edit HTML.
3.Berikutnya cari kode HTML seperti kode dibawah ini.(untuk memudahkan pencarian silahkan gunakan CTRL+F jika anda menggunakan komputer).

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

• Angka 410 yang saya beri warna merah diatas adalah nilai ketinggian antara footer dan form komentar,ini yang menjadi permasalahannya.Silahkan anda ganti nilai 410 menjadi 200 atau sesuai dengan selera anda.
• Biasanya kode HTML seperti diatas pasti lebih dari 1 kode,silahkan anda ganti nilainya semua dari 410 menjadi 200 atau sesuai dengan selera anda agar sama.

4.Jika sudah,berikutnya anda klik save untuk menyimpan perubahan.

Silahkan anda kunjungi blog anda,maka jarak antara form komentar dan footer akan nampak rapat dan tidak kosong lagi.
Demikianlah cara mengatur jarak antara form komentar dan footer di blogger.
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Menghilangkan Link Older Newer Post dan Homepage di Blogger

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara untuk mengganti link older,newer post beserta homepage.
Nah di tutorial kali ini saya akan share cara untuk menghapus link older,newer post beserta homepage tersebut,agar kelihatan lebih berbeda dan lebih ringan.
Sebenarnya keberadaan link older newer post merupakan ciri khas pengguna platform blogger.com sekaligus memudahkan pengunjung untuk melihat artikel selanjutnya,namun selera penulis blog berbeda-beda.Ada sebagian penulis blogger yang sengaja menghapus link tersebut untuk tujuan-tujuan tertentu semisal optimasi loading blog,agar kelihatan tidak memakai platform blogger.com dan lain sebagainya.
Bagi anda yang benar-benar ingin menghilangkan link older newer post dan homepage,maka di tutorial ini saya akan share caranya.Adapun cara yang akan share akan saya bagi menjadi 2 cara,yaitu dengan menonaktifkan link tersebut dan menghapus link tersebut,disini pilihan saya serahkan sepenuhnya kepada anda.

A.MENGGUNAKAN CSS
Cara pertama yaitu dengan menambahkan kode css yang berfungsi untuk menonaktifkan atau menyembunyikan link older newer post beserta homepage,sehingga link tersebut hilang dari blog.
1.Pertama-tama,silahkan anda klik template > edit HTML.
2.Berikutnya,silahkan anda cari kode ]]></b:skin>
3.Silahkan anda masukkan kode CSS berikut ini tepat diatasnya.

#blog-pager {display: none !important;} body .pager {height:0px;}

4.Berikutnya klik save untuk menyimpan perubahan.
Silahkan anda kunjungi blog anda maka link older newer post beserta homepage akan hilang dari halaman posting.

B.MENGHAPUS KODE HTML
Cara kedua yaitu dengan cara menghapus kode HTML link older newer post beserta homepage  di dalam template blogger,sehingga link tersebut akan hilang sama sekali..
1.Pertama-tama,silahkan anda klik template > edit HTML.

• Untuk menghapus link older post,silahkan anda cari kode <data:olderPageTitle/> lalu silahkan anda hapus kode tersebut.
• Untuk menghapus link newer post,silahkan anda cari kode <data:newerPageTitle/> lalu silahkan anda hapus kode tersebut.
• Untuk menghapus link homepage,silahkan nada cari kode <data:homeMsg/> lalu silahkan anda hapus kode tersebut.

2.Berikutnya silahkan anda klik save untuk mneyimpan perubahan.

Silahkan kunjungi blog anda,maka link older newer post beserta homepage di halaman posting akan hilang.
Demikianlah cara menghilangkan link older newer post beserta homepage di blogger.
Semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara Memperkecil Ukuran kode HTML

Assalamualaikum.
Beberapa saat yang lalu saya telah share tutorial mengenai cara memperkecil ukuran CSS dan memperkecil ukuran javascript.Di tutorial singkat kali ini saya akan share cara untuk memperkecil ukuran HTML,tujuannya agar kode HTML yang ada di blog lebih ramping dan loading blog lebih ringan.
Dengan loading blog yang lumayan ringan,maka pengunjung pun akan senang datang ke blog yang kita miliki,apalagi jika speed internet sedang low.Sebaliknya,jika loading blog terasa berat maka pengunjung pun akan enggan datang ke blog kita yang ujung-ujungnya akan menentukan trafik blog kita sendiri.

Berikut cara memperkecil ukuran kode HTML.
1.Pertama-tama yang anda harus lakukan andalah login terlebih dahulu ke blogger.com.
2.Berikutnya silahkan anda klik Template > Edit HTML.
3.Silahkan anda cari dan copy kode HTML yang akan anda perkecil ukurannya.
4.Buka tab baru pada browser lalu buka alamat www.textfixer.com.
5.Jika sudah,berikutnya anda paste kode HTML yang sudah anda copy tadi pada box input yang telah disediakan,seperti contoh gambar dibawah ini.

6.Berikutnya silahkan anda centang Dont't compress HTML head of document,berikutnya silahkan anda klik Compress HTML,seperti contoh gambar dibawah ini.

7.Nanti dibawahnya akan muncul kode HTML yang sudah berhasil anda perkecil ukurannya (new compressed HTML).Berikutnya silahkan anda copy kode HTML tersebut,seperti contoh gambar dibawah ini.

8.Berikutnya silahkan anda kembali ke Edit HTML blogger,lalu silahkan anda ganti kode HTML yang belum anda perkecil dengan kode HTML yang sudah berhasil anda perkecil.

9.Terakhir,silahkan anda klik save.untuk menyimpan perubahan.

Silahkan anda kunjungi blog yang anda miliki,maka loading blog akan sedikit cepat dari sebelumnya. Demikianlah cara memperkecil ukuran HTML di blogger,cukup mudah bukan? Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Cara Memperkecil Ukuran CSS

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara memeperkecil ukuran javascript,nah di tutorial kali ini saya akan share cara untuk memperkecil ukuran CSS pada suatu template blog.
Seperti yang kita ketahui bahwa CSS dan javascript mempunyai fungsi yang hampir sama yaitu membuat tampilan blog lebih indah dan tampak rapi.Semakin banyak kita memasukkan kode CSS pada suatu template maka semakin berat pula loading blog yang kita miliki apalagi jika speed internet sedang low,mungkin bukan hanya kita yang jengkel tetapi pengunjung pun ikut jengkel yang ujung-ujungnya akan membuat trafik pengunjung menurun karena loading blog kita yang lama.
Jika anda terpaksa menggunakan banyak kode CSS ada baiknya anda memperkecil ukuran CSS yang anda gunakan sebagai solusinya.

Berikut Cara Memperkecil Ukuran CSS.
1.Pertama-tama yang anda harus lakukan andalah login terlebih dahulu ke blogger.com.
2.Berikutnya silahkan anda klik Template > Edit HTML.
3.Silahkan anda cari dan copy kode CSS yang akan anda perkecil ukurannya.
4.Buka tab baru pada browser,lalu buka alamat csscompressor.com
5.Jika sudah,berikutnya anda paste kode CSS yang sudah anda copy tadi pada box input yang telah disediakan,seperti contoh gambar dibawah ini.

6.Berikutnya silahkan anda pilih compression level yang anda butuhkan,seperti contoh gambar dibawah ini.

Keterangan :

• Highest : Silahkan anda pilih level ini jika anda ingin memperkecil ukuran CSS menjadi lebih ekstrim kecil,namun resikonya kode bisa saja dapat rusak.
• Hight    : Silahkan anda pilih level ini jika anda ingin memperkecil ukuran CSS dengan mode kompresi tinggi.
• Balance : Silahkan anda pilih level ini jika anda ingin memperkecil ukuran CSS dengan mode kompresi standar.
• Low       : Silahkan anda pilih level ini jika anda ingin memperkecil ukuran CSS dengan mode kompresi rendah.

7.Jika sudah,berikutnya anda klik Compress,seperti contoh gambar dibawah ini.

8.Nanti dibawahnya akan muncul kode CSS yang sudah berhasil diperkecil,berikutnya silahkan anda copy kode CSS tersebut,seperti contoh gambar dibawah ini.

9.Berikutnya silahkan anda kembali ke Edit HTML blogger,lalu silahkan anda ganti kode CSS yang belum anda perkecil dengan kode CSS yang sudah berhasil anda perkecil.

10.Terakhir,silahkan anda klik save.untuk menyimpan perubahan.

Silahkan anda kunjungi blog yang anda miliki,maka loading blog akan sedikit cepat dari sebelumnya. Demikianlah cara memperkecil ukuran kode CSS di blogger,cukup mudah bukan? Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.
Baca juga cara memperkecil ukuran kode HTML untuk template blogger.

Selengkapnya ➢

Cara memperkecil ukuran javascript

Assalamualaikum.
Bagi anda yang gemar blogging menggunakan blogger,tentunya anda pernah bahkan sering mengedit sebuah template agar tampilan blog yang anda miliki  sesuai dengan selera anda.
Dalam mengedit sebuah template tentunya kita tau bahwa didalam struktur template blogger terdapat javascript yang membuat tampilan blog yang kita miliki menjadi lebih bagus dan lebih dinamis.
Namun sayangnya keberadaan javascript ini membuat loading blog menjadi semakin berat bahkan dalam beberapa kasus sangat berat karena terlalu banyak memasang javascript.
Untuk itu pemasangan javascript lebih baik seperlunya saja atau jika memang terpaksa menggunakan banyak javascript maka kita perlu mengkompresnya dengan kata lain memperkecil ukuran file javascript itu sendiri.
Untuk file javascript standar umumnya berukuran lumayan besar,biasanya ditulis dengan nama main.js,sedangkan untuk file javascript yang sudah di kompres (diperkecil) biasanya ditulis dengan nama min.js.
Nah,bagi anda yang ingin mengkompres (memperkecil) ukuran javascript maka ditutorial ini saya akan share caranya.

1.Pertama-tama silahkan anda login seperti biasa ke blogger.
2.Berikutnya silahkan anda klik template > edit HTML.
3.Silahkan anda cari dan copy kode javascript yang akan anda kompres (perkecil) ukurannya.
4.Buka tab baru pada browser lalu silahkan anda kunjungi situs javascriptcompressor.com.
5.Jika sudah,berikutnya  anda paste kode javascript yang akan anda perkecil ukurannya lalu silahkan anda klik compress button,seperti contoh gambar dibawah ini.

6.Berikutnya silahkan anda copy semua kode hasil javascript yang sudah berhasil anda perkecil,seperti contoh gambar dibawah ini.

7.Berikutnya anda kembali ke edit HTML di blogger,lalu ganti javascript yang belum di perkecil dengan semua kode javascript yang sudah berhasil anda perkecil.
8.Terakhir,silahkan anda klik save untuk menyimpan perubahan.

Silahkan anda kunjungi blog yang anda miliki,maka loading blog akan sedikit cepat dari sebelumnya.
Demikianlah cara memperkecil ukuran javascript di blogger,cukup mudah bukan?
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.
Baca juga cara memperkecil ukuran CSS. dan cara memperkecil ukuran kode HTML untuk template blogger.

Selengkapnya ➢

Cara Menghapus Link Langganan Entri Atom Di Blogger

Assalamualaikum.
Langganan entri atom - biasanya terletak dibagian post footer pada homepage blog,biasanya berbentuk link dengan contoh tampilan seperti gambar dibawah ini.

Fungsinya yaitu untuk menampilkan halaman feed default blog kita,jika link tersebut di klik maka pengunjung akan dibawa ke halaman feed default blog yang kita miliki.
Banyak dari pengguna blogger yang menghapus link langganan entri atom dikarenakan link tersebut tidak berfungsi banyak dan juga membuat loading blog agak lama.
Bagi anda yang mungkin sedang ingin menghapus link langganan entri atom,maka di tutorial kali ini saya akan share caranya,caranya mudah yaitu kita hanya perlu menghapus sedikit kode di template blog.

Berikut cara menghapus link langganan entri atom di blogger.
1.Pertama-tama yang harus anda lakukan adalah login ke www.blogger.com seperti biasa.
2.Di halaman dashboard blogger,silahkan anda klik nama blog yang anda miliki.
3.Berikutnya silahkan anda klik Template > Edit HTML.
4.Berikutnya silahkan anda cari kode HTML berikut ini.(untuk memudahkan pencarian silahkan anda gunakan CTRL+F jika anda menggunakan komputer)

<b:include data='feedLinks' name='feedLinksBody'/>

5.Berikutnya silahkan anda hapus semua kode tersebut.
6.Terakhir,silahkan anda klik save atau simpan.

Silahkan anda kunjungi blog anda,maka link langganan entri atom di blog anda kini sudah menghilang dan loading halaman homepage blog anda akan terasa lebih ringan.
Demikianlah cara menghapus link langganan entri atom di blogger,semoga bermanfaat.
Terimakasih telah berkunjung.

Selengkapnya ➢

Mengganti link older newer post dan homepage di blogger

Assalamualaikum.
Link - Older Post (Posting lama),Homepage (beranda),Newer Post (posting lebih baru) biasanya terletak pada bagian dibawah post footer atau lebih tepatnya dibawah kolom input komentar blog.
Link ini berfungsi sebagai navigasi,dimana para pembaca dapat dengan mudah untuk mencari artikel posting yang baru atau yang terdahulu.
Jika anda  pengguna blogger dan ingin sekali mengganti link older post,homepage dan newer post dengan kata-kata yang anda inginkan maka anda harus memodifikasi template blog yang anda miliki.Caranya sederhana,yang anda perlukan disini ialah mengedit beberapa kode yang ada didalam template blog anda.

Berikut cara mengganti link older post,homepage,newer post di blogger.
1.Pertama-tama yang anda harus lakukan adalah login seperti biasa ke www.blogger.com.
2.Di halaman dashboard blogger,silahkan anda klik template > edit HTML.
3.Untuk mengganti link older post,silahkan anda cari kode HTML seperti berikut (dengan CTRL+F):

<data:olderPageTitle/>

Silahkan anda hapus kode tersebut,lalu anda ganti dengan kata "next" (tanpa tanda petik) atau dengan kata-kata yang anda inginkan.
4.Untuk mengganti link homepage,silahkan anda cari kode seperti berikut (dengan CTRL+F):

<data:homeMsg/>

Silahkan anda hapus kode tersebut,lalu anda ganti dengan kata "home" (tanpa tanda petik) atau kata-kata yang anda inginkan.
5.Untuk mengganti link newer post,silahkan anda cari kode seperti berikut (dengan CTRL+F):

<data:newerPageTitle/>

Silahkan anda hapus kode tersebut,lalu anda ganti dengan kata "previous" (tanpa tanda petik) atau dengan kata-kata yang anda inginkan.
6.Jika sudah,langkah berikutnya adalah klik simpan atau save.

Silahkan anda kunjungi blog anda,maka link older post,homepage dan newer posr akan berubah menjadi kata-kata yang sudah anda ganti tadi.
Bagaimana? cukup menarik bukan?
Demikianlah cara mengganti link older post,homepage,newer post dengan kata-kata yang kita inginkan di blogger.com
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Menghilangkan Titik Hitam Pada Layout Blogger

Assalamualaikum.
Titik hitam pada layout blogger - Atau lebih tepatnya disebut dengan bullet list biasanya muncul di halaman pengaturan layout (tata letak) blogger.com ketika kita selsesai memasang sebuah navigasi menu baik vertikal maupun horizontal atau elemen lainnya di pengaturan edit HTML template.
Anda tidak perlu khawatir karena ini adalah suatu hal yang wajar,namun sayangnya keberadaan titik-titik hitam tersebut akan membuat halaman layout blog anda menjadi agak berantakan dan mungkin beberapa dari anda akan merasa sedikit risih dengan tampilan titik-titik hitam tersebut.

Berikut gambar contoh tampilan layout blog saya:

• Tampilan layout blog saya setelah selesai menambahkan menu navigasi di edit HTML template,muncul titik-titik hitam seperti contoh gambar dibawah ini.

• Tampilan blog saya setelah saya hilangkan titik-titiknya,contoh seperti gambar dibawah ini.

Untuk menghilangkan atau menonaktifkan titik-titk hitam tersebut kita harus menambahkan beberapa kode CSS di edit HTML template.
Jika anda memiliki permasalahan yang sama seperti diatas maka ditutorial ini saya akan share caranya.

Berikut cara menghilangkan titik hitam pada layout blogger.
1.Silahkan anda login seperti biasa ke www.blogger.com.
2.Berikutnya silahkan anda klik template > edit HTML.
3.Silahkan anda copy kode CSS berikut ini  diatas kode ]]></b:skin>

body#layout ul {display: none}

4.Berikutnya silahkan anda klik save atau simpan.

Silahkan anda kunjungi halaman layout (tata letak) blog anda dengan meng-klik tata letak.
Sekarang titik-titik hitam tersebut  telah hilang dari blog anda.
Demikianlah cara menghilangkan titik hitam pada layout blogger,bagaimana? cukup mudah bukan?
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Membuat Elemen Sidebar baru di blogger

Assalamu'alaikum.
Membuat  Elemen Sidebar baru yang saya maksud disini adalah menambahkan elemen add gadget baru di bagian pengaturan tata letak blogger,sehingga elemen add gadget baru yang tadinya berjumlah satu akan kita buat menjadi dua buah.Untuk lebih jelasnya anda dapat melihat contoh gambar dibawah ini.

• Tampilan sidebar  dibagian pengaturan  tata letak blogger.

• Tampilan sidebar dibagian pengaturan tata letak ketika sudah ditambahkan elemen baru,sehingga add gadget akan berjumlah dua.

Penambahan elemen sidebar ini akan terasa sekali manfaatnya apabila kita akan membuat tab widget baik vertikal maupun horizontal.
Di tutorial ini saya akan share cara membuat elemen sidebar baru bagi anda yang menggunakan template blogger tipe klasik (bukan template baru saat ini) yang masih memiliki kode seperti berikut:

• #header
• #sidebar
• #outer-wrapper
• #main-wrapper

Kenapa menggunakan template tipe klasik?
Karena template blogger terdahulu lebih mudah di modifikasi dibanding dengan template blogger saat ini,salah satu template yang paling mudah di modifikasi adalah template yang bernama minima.Jadi bagi anda yang terlanjur menggunakan template simple blogger saat ini alangkah baiknya anda mengganti template anda dengan template tipe klasik,anda dapat mencarinya di google.

Berikut cara membuat elemen sidebar baru di blogger.
1,Pertama,silahkan anda login ke www.blogger.com dengan menggunakan akun masing-masing.
2.Jika anda sudah berhasil login,berikutnya silahkan anda klik template > edit HTML.
3.Di halaman edit HTML silahkan anda cari kode seperti berikut ini.

#sidebar-wrapper {
  width: 310px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#ffffff;
  background-image:url(none);
}

Kode didalam #sidebar-wrapper didalam template anda mungkin akan berbeda dengan contoh kode diatas,maka silahkan anda fokuskan pencarian kode #sidebar-wrapper saja.

4.Silahkan anda copy kode #sidebar-wrapper beserta semua kode didalamnya (lihat contoh kode yang saya berikan di langkah nomor 3)

5.Berikutnya silahkan anda paste kode yang anda copy tadi tepat diatas kode #sidebar-wrapper.
6.Ganti kode #sidebar-wrapper yang baru kita paste tadi menjadi #sidebar-wrapper-baru.
Sehingga contoh keseluruhannya akan seperti kode dibawah ini.

#sidebar-wrapper-baru {
  width: 310px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#ffffff;
  background-image:url(none);
}
#sidebar-wrapper {
  width: 310px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#ffffff;
  background-image:url(none);
}

7.Berikutnya anda cari kode HTML seperti berikut ini.

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' maxwidgets='10' preferred='yes'>
 </b:section>
      </div>

8.Silahkan anda copy semua kode diatas,lalu anda paste di atas kode <div id='sidebar-wrapper'> atau dibawah kode </div>.
9.Silahkan anda ganti kode <div id='sidebar-wrapper'> yang baru anda paste tadi menjadi <div id='sidebar-wrapper-baru'>.Sehingga contoh hasilnya akan seperti dibawah ini.

<div id='sidebar-wrapper-baru'>
 <b:section class='sidebar' id='sidebar' maxwidgets='10' preferred='yes'>
 </b:section>
      </div>
<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' maxwidgets='10' preferred='yes'>
 </b:section>
      </div>

10.Jika sudah,silahkan anda klik save atau simpan.

Silahkan anda masuk ke halaman pengaturan tata letak blog anda dengan cara klik tata letak,maka anda akan melihat elemen baru add gadget di sidebar blog anda sudah muncul.
Dengan cara diatas anda dapat membuat elemen sidebar baru sebanyak yang anda inginkan.
Demikianlah cara membuat elemen sidebar baru di blogger.
Semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara mengganti bullet list di posting blogger

Assalamualaikum.
Bagi anda yang bosan dengan tampilan blog anda yang itu-itu saja,maka ada baiknya anda harus mengedit template blog yang anda gunakan.
Salah satunya ialah mengedit atau mengganti bullet list yang di postingan blog dengan icon gambar,agar kelihatan lebih berbeda dan tidak membosankan.

Berikut cara mengganti bullet list di postingan blogger.com.
1.Pertama-tama adalah login seperti biasa ke blogger.com.
2.Berikutnya silahkan anda klik template > edit html seperti biasa.
3.Di halaman pengeditan HTML,silahkan anda cari kode ]]></b:skin> (untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop atau komputer).
4.Berikutnya,letakkan kode berikut ini diatas kode ]]></b:skin>

/* Bullet List ----------------------------------------------- */ .post ul li {list-style-image:url('http://url gambar');margin-left:20px; }

Keterangan:
Coba anda perhatikan kode yang saya beri warna merah adalah alamat URL gambar,anda dapat menggantinya dengan URL gambar yang anda sukai.
5.Jika sudah,silahkan anda klik save atau simpan.

Silahkan anda kunjungi blog anda dimana anda pernah posting dengan tanda bullet list,maka bullet list default tersebut akan berubah menjadi gambar icon yang kita inginkan.
Demikianlah caranya.
Cukup sederhana bukan?
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

membuat label cloud berwarna di blogger

Assalamualaikum.

Bagi anda yang sedang memodifikasi sebuah template blogger baik itu versi lama maupun versi baru tentunya anda juga menginginkan tampilan blog anda nampak berbeda dari yang biasanya agar terlihat tidak begitu membosankan bagi diri anda sendiri juga pengunjung.

Di tutorial ini saya akan share cara membuat label berwarna pada mode cloud (link label berbaris dari kiri ke kanan).Tujuannya agar terlihat lebih menarik dan tidak begitu memakan tempat di area sidebar blog.

Berikut cara membuat label cloud berwarna di blogger

1.Login seperti biasa ke blogger.com.

2.Berikutnya silahkan anda klik tata letak > add gadgetdibagian layout sidebar  lalu anda pilih label.

3.Nanti anda akan diberi 2 buah pilihan tampilan label yaitu daftar dan cloud.Karena kita akan membuat label cloud berwarna,maka silahkan anda pilih cloud lalu klik simpan,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda klik template > edit html seperti biasa.

5.Di halaman pengeditan HTML,silahkan anda cari kode

]]></b:skin>

 (untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop atau komputer).

6.Berikutnya,letakkan kode CSS berikut ini diatas kode ]]></b:skin>

/* Label Warna ----------------------------------------------- */
#Label1 .cloud-label-widget-content{text-align:center;font-weight:700;padding:5px 0}
#Label1 .cloud-label-widget-content span{display:inline-table;line-height:1.2}
#Label1 .cloud-label-widget-content span a{padding:4px 5px;color:#fff}
#Label1 .label-size{margin:4px 0}
#Label1 .label-size span{background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a{background:#64A071;font-size:15px}
#Label1 .label-size-2 a{background:#5cc9cd;font-size:15px}
#Label1 .label-size-3 a{background:#e24f4f;font-size:15px}
#Label1 .label-size-4 a{background:#f568dc;font-size:15px}
#Label1 .label-size-5 a{background:#38a3ee;font-size:15px}
#Label1 .cloud-label-widget-content span a:hover{background:#007abe}

keterangan:

Teks yang saya beri warna merah adalah kode untuk warna,anda dapat menggantinya sesuai selera anda,untuk mencari kode warna silahkan klik disini.

7.Jika sudah,silahkan anda klik save atau simpan.

Silahkan anda kunjungi blog anda,maka label di blog anda akan terlihat berwarna-warni dan lebih menarik.

Bagaimana? cukup mudah bukan?

Demikianlah cara membuat label\

Selengkapnya ➢

membuat tab widget sederhana di blogger

Assalamualaikum.

Tab widget berfungsi untuk lebih menghemat halaman sidebar di blog.Apabila kita sudah terdaftar dan berhasil menjadi publiser di google adsense maka tab widget ini akan terasa lagi manfaatnya terlebih jika kita akan lebih banyak lagi menampilkan konten-konten yang cukup banyak di area sidebar blog.

Setiap elemen tab ini mempunyai fungsi yang mandiri,kita dapat menambahkan berbagai elemen widget kedalam satu tab widget yang akan kita buat di area sidebar.Namun sayangnya tab widget ini tidak berjalan sempurna jika kita menggunakan template simple blogger(template default blogger saat ini),karena kita akan kesulitan untuk meletakkan tab ini.walaupun bisa dipasang dengan sangat mudah dibagian tata letak atau layout namun nantinya kita akan dibingungkan untuk memasang id dari setiap gadget.Jadi disini saya sarankan template yang anda gunakan adalah template klasik yang masih memiliki kode seperti berikut.

• #header
• #outer-wrapper
• #main-wrapper
• #sidebar-wrapper

dan lain sebagainya.

Berikut cara membuat tab widget sederhana di blogger.

1.Login seperti biasa ke blogger.com.

2.Berikutnya silahkan anda klik template > edit html seperti biasa.

3.Di halaman pengeditan HTML,silahkan anda cari kode

]]></b:skin>

(untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop aau komputer).

4.Berikutnya,letakkan kode CSS berikut ini diatas kode ]]></b:skin> tadi.

/* Tab widget
----------------------------------------------- */
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#404040;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#64A071}
#sidebar-main .widget1{background-color:#ffffff;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}

5.Jika sudah,berikutnya anda cari kode

<div id='sidebar-wrapper'>

lalu letakkan kode dan script berikut ini tepat dibawahnya.

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

6.Jika sudah,silahkan anda klik save atau simpan.

7.Berikutnya silahkan anda masuk ke tata letak. dengan cara klik tata letak.Dihalaman tata letak,anda akan menemukan elemen layout baru yang bentuknya seperti gambar dibawah ini.

keterangan :

Coba anda perhatikan bagian gambar yang saya beri nomor berwarna merah diatas.

• nomor 1 adalah tab pertama yang posisinya akan berada disebelah kiri dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.
• nomor 2 adalah tab pertama yang posisinya akan berada disebelah tengah dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.
• nomor 3 adalah tab pertama yang posisinya akan berada disebelah kanan dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.

Tambahan:

Untuk judul tab seperti popular post,label.archieve dapat anda ganti di edit HTML template,caranya sebagai berikut:

• misalnya anda akan mengganti judul tab archieve dengan kata statistik,maka silahkan anda klik template > edit HTML,lalu cari kode 

• <div id='sidebar-wrapper'>

   
• Nanti anda akan menemukan kata popular post,label,archieve dengan warna teks hitam.Silahkan anda ganti kata-kata tersebut dengan kata statistik atau sesuai keinginan anda.Jika anda sudah terbiasa atau sudah lebih mahir lagi maka anda akan dapat memodifikasinya dengan sesuatu yang lebih menarik lagi.

Demikianlah cara membuat tab widget sederhana di blogger,semoga bermanfaat dan terimakasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢