Selasa, 18 Maret 2014

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.


Widget 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 :

Border Gambar


1. Kode 1

.post-body img{

border: 1px solid #4C3C1B;

padding: 5px;

width: 300px;

background-color: #EFEECB;

}


Bingkai Gambar


2. Kode 2

.post-body img{

border: 1px solid #666666;

padding: 10px 10px 60px 10px;

}


Bingkai Foto


3. Kode 3

.post-body img{

border-style: double;

padding: 16px;

background-color: #DCDCED;

}


Border Foto


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;

}


Border Cantik


5. kode 5

.post-body img{

border: 10px dotted #29C3FF;

margin: 0;

padding: 0;

}


Border biru


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;

}


Cara Buat Border


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;

}


border keren


8. Kode 8

.post-body img{

background-color: #666;

color: #fff;

font-weight: bold;

padding: 10px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}


Bingkai merah pink


9. Kode 9

.post-body img{

color: #000;

font-weight: bold;

background-color: #f99;

border: 3px solid #c00;

}


Bingkai Sederhana


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 »»