Menambah Widget Di Atas Header Blog Dan Website Pada Blogger

PENJASKES MAN LEMBAH GUMANTI -Menambah Widget Di Atas Header Blog - Menambah kolom widget diatas header banyak manfaatnya, seperti: bisa memasang menu drop down, widget lainnya atau mungkin sobat pengguna template bawaan blog yang ingin mempercantik tampilan judul blognya seperti blog ini. Bagaimana sob? Tertarik? Silahkan di simak artikel Membuat Header Blog Ber-link. Dan silahkan di simak artikel yang bejudul cara Menambah Widget Di Atas Header Blog.

Menambah Widget Di Atas Header Blog:

1. Login ke Blogger --> Template --> Edit HTML

2. Cari kode seperti kode di bawah ini (gunakan CTRL+F supaya mudah):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

3. Setelah ketemu, lihat kode yang berwarna:

• maxwidgets=’1’ ganti menjadi maxwidgets='2’ 
• showaddelement='no'> ganti menjadi showaddelement='yes'>

4. Selesai

Mudahkan caranya? Begitulah cara Menambah Widget Di Atas Header Blog yang bisa saya berikan tutorialnya untuk sobat.

Baca selengkapnya »»  

Cara membuat bingkai frame border pada gambar blog dan website pada blogger

PENJASKES MAN LEMBAH GUMANTI - Foto yang dicantumkan pada blog bisa jadi memang ditampilkan hanya sebagai pendukung artikel dan ada juga yang sengaja membuat blog galeri foto sehingga penampilan blog juga mempengaruhi visitor akan suka dan kembali lagi ke blog anda. Nah kali ini Waroenkblog akan menjelaskan Cara membuat bingkai frame border pada gambar blog. tutorial ini tidak sengaja saya dapatkan dari sobat blogger kita tutoriablogspot. tidak ada salahnya bukan kita ulas kembali tutorialnya? oke langsung saja kita bahas tutorial pemasangan bingkainya sebagai berikut :

• Silahkan masuk ke dasbor blog anda.
• Klik panah kebawah seperti pada gambar yang diberi kotak merah :

• Kemudian Pilih >> Template

• Dilanjutkan dengan klik >> Edit HTML
• Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik  Ctrl + F pada keyboard Komputer anda kemudian masukkan kode ]]></b:skin>.
• Langkah berikutnya adalah piih salah satu kode dibawah ini sesuai pilihan anda kemudian letakkan kode tersebut di atas kode ]]></b:skin>. kemudian silahkan anda simpan

Berikut ini Kode Bingkai Foto untuk dipilih salah satu yang cocok dengan selera anda :

1. Kode 1

.post-body img{

border: 1px solid #4C3C1B;

padding: 5px;

width: 300px;

background-color: #EFEECB;

}

2. Kode 2

.post-body img{

border: 1px solid #666666;

padding: 10px 10px 60px 10px;

}

3. Kode 3

.post-body img{

border-style: double;

padding: 16px;

background-color: #DCDCED;

}

4. Kode 4

.post-body img{

border-top-width: 4px;

border-bottom-width: 4px;

border-top-style: double;

border-bottom-style: double;

border-top-color: #E1A60A;

border-bottom-color: #E1A60A;

padding: 8px 0px;

}

5. kode 5

.post-body img{

border: 10px dotted #29C3FF;

margin: 0;

padding: 0;

}

6. Kode 6

.post-body img{

width: 300px;

padding: 0px 6px 6px 0px;

background-color: #9FB2C1;

border-top-width: 2px;

border-right-width: 5px;

border-bottom-width: 5px;

border-left-width: 2px;

border-style: solid;

border-color: #082F70;

}

7. Kode 7

.post-body img{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQKzrQoGlDw7vN22tSz723J43Ay8Q4fNMk6o6QYquAPAG9mkmvnKoSD2KpWu0FXIc1R2Jb15e9rwGHU-z7gwGEKYJQpqng51VTqERGLaQDUP8RaLCSfNG6jtIr87GAcKV0cCl_6st8OB8/s400/image-background.png) repeat scroll 0 0 transparent;

padding:7px;

border:1px solid #cecece;

-moz-box-shadow: 0px 0px 5px #BBB;

-webkit-box-shadow: 0px 0px 5px #BBB;

box-shadow: 0px 0px 5px #BBB;

}

8. Kode 8

.post-body img{

background-color: #666;

color: #fff;

font-weight: bold;

padding: 10px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

9. Kode 9

.post-body img{

color: #000;

font-weight: bold;

background-color: #f99;

border: 3px solid #c00;

}

10. Kode 10

.post-body img{

border-style: dotted;

}

Demikian diatas tutorial kali ini mengenai Cara membuat bingkai frame border pada gambar blog, semoga tutorial kali ini bermanfaat buat sobat semua.

Baca selengkapnya »»  

Cara Membuat DropDown Menu di Bawah Header Blog Dan Website Pada Blogger

PENJASKES MAN LEMBAH GUMANTI - Cara membuatnya juga terbilang mudah, karena hanya meletakkan CSS dan HTML nya saja di template editor. Oke kita mulai dari penerapan CSS kemudian HTML nya.

CSS

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

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

HTML

Letakkan kode berikut tepat di bawah </header>

<nav>
<ul>
<li><a href='/search/label/Tutorial'>Tutorial</a></li>
<li class='sub'><a href='/search/label/Template'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='/search/label/SEO'>SEO</a></li>
</ul>
</li>
</ul>
</nav>

Kemudian simpan template anda. Tutorial membuat menu dropdown berakhir sampai sini.

Baca selengkapnya »»  

Cara Membuat Header Blog Dan Website Bergambar Pada Blogger

Tampilan template standar blogspot memang sangat sederhana. Memang tidak banyak, ada beberapa template rekomendasi dari blogger yang lumayan bagus menurut saya. Salah satunya adalah simple
template dari blogger. Temmplate tersebut merupakan salah satu template standar yang saya sukai.

Jika template standar saja sudah bagus, tak perlu lagi kita mendownload template gratis untuk blog kita. Hanya saja masih kurang mantap jika tak sedikit diubah. Tambahi gambar untuk header blog akan membuat tampilan template standar blog menjadi sedikit lebih kece.

Berikut ini cara membuat header blog dan website bergambar:

1. Login ke dasbor blog anda

2. Pilih tata letak

3. Cari kotak bertuliskan "Header" lalu klik "edit

4. Persiapkan gambar untuk header (height dan weight biasanya sesuai template, untuk template saya 875 x 100)

5. Pilih gambar dari komputer, lihat gambar

6. Pilih opsi penempatan gambar "selain judul dan keterangan" agar judul blog atau website tidak tumpang tindih dengan gambar header baru

7. Simpan dan Selesai

Lihat hasilnya, blog dengan header bikinan sendiri akan tampak lebih kece dan cantik daripada tanpa menggunakan header bergambar. Cara membuat header blog dan website bergambar sangat mudah kan? ^^ silakan dicoba.

Baca selengkapnya »»  

Cara Buat Blog Dan Website Pada Blogger

APA ITU BLOG 

 

Blog adalah sngkatan dari Weblog. Orang pertama yang memperkenalkan blog adalah Jorn Barger 1997 pada bulan Desember.

Blog bisa dianggap sebagai laman web pribadi. Ia bisa dijadikan sebagai catatan harian pribadi, majalah pribadi, rumah pribadi, kedai pribadi dan buku pribadi. Kita bisa menuliskan apa saja di dalam blog tersebut.

Jika anda ingin menuliskan isi hati anda dan ingin diketahui oleh umum, maka blog ini adalah salah satu jalan keluar. Anda juga bisa mengajar orang banyak dengan menggunakan blog. Jadi amatlah banyak fungsi blog ini mengikut keinginan penulisnya.

Seperti sekarang ini, saya gunakan blog ini untuk mengajar anda cara membuat blog. Dan bagusnya blog ini adalah gratis.

Anda bisa gunakan blog sebagai toko anda. Dengan itu anda bisa mengiklankan barang-barang yang ingin anda jual atau apa-apa produk yang anda pasarkan.

Karena saya juga sedang belajar dalam membuat blog ini, maka saya akan mengajar anda dasar-dasar membuat blog yang saya ketahui. Anda beruntung karena menemukan blog ini yang akan mengajar anda langkah demi langkah dari awal.

Ikutilah langkah-langkah dengan sabar dengan banyak latihan. Tentunya pada tahap permulaan anda belajar membuat blog ini, anda akan mengalami banyak kesalahan. Tetapi hal itu biasa dan jangan takut kerana setiap kesalahan dapat anda perbaiki dan edit di kemudian hari. 

LANGKAH PERTAMA 

 

Pertama-tama anda perlu membuka situs : https://www.blogger.com/start . Setelah itu klik pada perkataan CREATE YOUR BLOG NOW.
Jika paparan baru sudah muncul, maka anda isikan sahaja apa yang di dalam kotak-kotak:
email address sehingga word verification.
Jika sudah terisi semua, anda tinggal mengklik CONTINUE.

MEMBUKA AKAUN BLOG ANDA 

 

Setelah mengklik CONTINUE maka akan muncullah paparan seperti di sebelah. Anda membuka akaun dulu yaitu dengan mengisikan email anda, dan ulangi sekali lagi. Kemudian buatlah password anda dan isikan semula password anda sekali lagi.

Anda tidak boleh lupa email dan password anda ini, karena diperlukan sekali ketika anda ingin mengisi tulisan pada blog anda atau mengedit dan menambah apa-apa dalam blog anda.

Kemudian tuliskan huruf yang ada pada word verification, dan klik CONTINUE.

LANGKAH KEDUA 

 

Setelah mengklik CONTINUE maka akan muncullah paparan seperti di sebelah. Anda namakan blog anda. Seperti blog ini, saya beri nama CARA BUAT BLOG. Anda boleh menamakan apa sahaja mengikut selera anda.
Di bawahnya anda tuliskan alamat blog anda. Seperti blog saya ini, alamatnya http://penjaskesmanlembahgumanti.blogspot.com/. Nah anda bisa menamakan apa sahaja alamat blog anda, dengan syarat belum ada orang lain yang membuat lebih awal nama yang sama dengan alamat yang anda tuliskan. Jadi ulangilah lagi sehingga nama itu diterima. Jika diterima maka akan diberi tanda "available".
Kemudian tuliskan huruf yang ada pada word verification, dan klik CONTINUE

LANGKAH KETIGA 

 

Langkah selanjutnya anda perlu memilih salah satu tamplate yang akan digunakan oleh blog anda. Anda bisa memilih warna dan model yang anda sukai.

Setelah anda pilih salah satu, maka anda lanjutkan dengan mengklik CONTINUE.

Anda tidak perlu risau tentang tamplate ini karena jika anda kurang cocok dengan pilihan anda tadi, maka anda bisa mengganti tamplate lain pada setiap saat anda kehendaki.

Bahkan banyak situs-situs yang memberikan tamplate gratis selain yang ada di dalam situs blogger ini. 

ANDA TELAH BERHASIL MEMBUAT BLOG 

 

Langkah ketiga tadi adalah langkah terakhir dalam pembuatan blog secara dasar. Setelah anda mengklik CONTINUE pada langkah ketiga, maka muncullah paparan seperti pada gambar sebelah. Dengan itu anda telah berhasil membuat blog anda. Selanjutnya anda bisa menuliskan apa sahaja pada blog anda. Selamat dan Tahniah. 

MEMBUKA BLOG YANG BARU KITA BUAT 

 

Setelah kita berjaya membuat blog kita maka tentunya kita ingin melihat sendiri hasil karya kita agar orang lainpun dapat membuka blog kita.
Untuk tujuan itu kita tentunya harus ingat nama blog kita. Contohnya: www.namablogkita.blogspot.com. Kalau kita membuat blog dengan memberi nama kursusqiraati maka alamat blog kita sebagai berikut: www.kursusqiraati.blogspot.com.

Selamat berjaya dan selamat mengiklankan blog anda kepada orang ramai agar boleh dikunjungi oleh siapapun dari mana sahaja di seluruh pelosok bumi.

CARA MENGEDIT TULISAN YANG SUDAH DIUPLOAD 

 

Jika kita sudah selesai membuat blog kita dan ingin melihat hasilnya maka anda bisa cek di View Blog. Namun apabila kita sudah sign out (keluar), maka kita harus masuk dalam laman web : www.blogger.com. Kemudian kita sign in dengan menggunakan email kita seperti ketika mendaftar membuat blog dan mengisi kata laluan (password).
Setelah itu barulah kita klik EDIT POSTS.
Selamat mencoba.

Untuk menambah variasi pada blog anda, maka akan saya lanjutkan pada waktu yang akan datang. Silahkan anda berlatih dulu pada pelajaran-pelajaran yang telah saya berikan. 

Terimakasih atas kunjungannya, bagikan kepada teman2 yang lain supaya bermanfaat dan jangan lupa tinggalkan komentarnya.

Baca selengkapnya »»  

Menghapus Tulisan Diberdayakan oleh Blogger

Cara Menghapus Tulisan Diberdayakan oleh Blogger atau Powered by Blogger. Sebenarnya tutorial cara menghapus tulisan diberdayakan oleh Blogger, sudah banyak sobat yang lain membahasnya. Akan tetapi karena ada pertanyaan dari rekan blogger, maka saya akan share kembali cara menghilangkan tulisan diberdayakan oleh Blogger.

Sebenarnya ada beberapa cara menghapus tulisan diberdayakan oleh Blogger atau Powered by Blogger, namun di sini saya akan share 2 cara, dengan menggunakan kode CSS dan menghapus permanen.

Cara 1 : Menyembunyikan dengan kode CSS

Untuk menyembunyikan tulisan diberdayakan oleh Blogger dengan kode CSS, silahkan ikuti langkahnya :

1. Login ke blogger sobt

2. Cari kode ]]></b:skin>, simpan kode ini di atasnya

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

3. Simpan template.

Dengan menggunakan kode di atas, widget attribution tidak hilang, melainkan hanya disembunyikan. Apabila sobat lihat Tata Letak, widget itu masih ada. Lihat contoh Tata Letak di bawah :

Cara 2 : Menghilangkan Widget Attribution Permanen

Untuk menghilangkan tulisan diberdayakan oleh Blogger secara permanen, sobat harus menghapus Widget Attribution. Dalam menghapus kode Attribution, kadang-kadang mengalami error. Supaya tidak error, ikuti langkah di bawah :

1. Login ke Blogger

2. Masuk ke Template > Edit HTML, centang Expand Template Widget

3. Cari kata-kata Attribution1 (gunakan Ctr+F untuk mempermudah)

4. Rubah locked='true' menjadi locked='false'

5. Simpan Template

6. Masuk ke Tata Letak

7. Klik Edit pada Widget Attribution

8. Klik Hapus, pada Konfigurasikan Atribusi

9. Simpan Setelan

Dengan cara ini, maka widget attribution dan tulisan Diberdayakan oleh Blogger akan hilang secara permanen.

Baca selengkapnya »»  

Menghapus / Menghilangkan Navbar Blogger | Tutorial Blog

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping stylenya yang kurang memuaskan bagi para blogger.

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.

Baca selengkapnya »»