Home Posts filed under BLOGGER
Tampilkan postingan dengan label BLOGGER. Tampilkan semua postingan
Tampilkan postingan dengan label BLOGGER. Tampilkan semua postingan

Sabtu, 27 Desember 2014

Mengganti Background Blog pada blogger

Comment
Cara mengganti Background blog di blogger.com tidak seperti memasukkan gambar di dalam postingan. Ada dua cara yang bisa sobat lakukan untuk mengganti background blogspot sobat blogger yaitu:
  1. Mengganti background blog melalui Designer Blogger Template
  2. Mengganti background blog melalui Edit HTML
Di antara kedua cara tersebut, yang paling direkomendasikan oleh Google atau Blogger adalah dengan menggunakan cara pertama. Banyak video-video yang bisa sobat blogger temukan di YouTobe yang mempertontonkan tentang cara mengganti background blog. Salah satu dari video tersebut langsung di unggah oleh tim dari blogger.com.
Sekarang, kita akan bahas satu persatu dari kedua cara mengganti background blog di atas

Cara Mengganti Background Blog Melalui Designer Blogger Template

Kalau kode-kode yang terdapat di template sudah di rubah secara total, maka fitur untuk mengganti background template melalui designer template terhapus. Coba sobat blogger perhatikan terlebih dahulu sambil mengikuti tutorial di bawah ini.
  1. Sign In di blogger.com
  2. Pada menu drop down pilih template
  3. Klik tombol Costumize (Kita langsung di bawa ke laman Designer Blogger Template)
    4. a
  4. Lihat menu vertikal yang terdapat di sebelah kiri, lalu klik Background
    5. b
  5. Klik Upload Image dan baca petunjuk yang ada disitu (You can upload a JPG, GIF, or PNG file up to 300k in size. For a full background, use images 1800x1600 or greater.)
  6. Klik tombol Pilih File dan jendela baru akan muncul
  7. Cari dimana sobat blogger menyimpan gambar yang akan dijadikan background blog, kalau sudah ketemu, klik gambar tersebut dan klik open.
  8. Klik tombol Done
  9. Hasil dari mengganti template bisa langsung sobat blogger lihat melalui jendela Preview yang terdapat di bawahnya
  10. Terakhir, jangan lupa klik tombol Apply to Blog yang terdapat di bagian kanan atas laman tersebut

Cara Mengganti Background Blogger melalui Edit HTML

Cara ini hanya berlaku buat template yang bukan template HTML5, jadi buat sobat blogger yang menggunakan template lama, langsung saja ikuti langkah di bawah ini. Lho... Kenapa kalau yang menggunakan HTML5 tidak bisa mengikuti langkah-langkah ini? Karena kalau HTML5 lebih baik menggunakan cara di atas, kalau menggunakan cara ini, background blog yang diganti pakai gambar akan terlihat terpotong atau setengah nanti.
  • Sign In di blogger.com
  • Pada menu drop down pilih template
  • Backup template sobat terlebih dahulu
  • Klik Edit HTML dan Klik Proceed
  • Kasih tanda centang pada Expand Widget Template
  • Cari kode body{
  • Kalau sobat blogger sudah ketemu kode tersebut, kode yang akan mengikuti seperti ini:
body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}
  • Kode tersebut bisa saja lain tergantung dari template sobat. Dari kode di atas, yang harus di rubah adalah di bagian background. Begini caranya:
body{
background:#ded8c0;
background:url(https://lh3.googleusercontent.com/-sC_zZdqEs1E/T-c2135AXoI/AAAAAAAAAmA/9InepRLDwRU/s128/swatch%2813%29.gif);background-repeat: repeat-x repeat-y;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}
  • Tambahan yang berwarna merah merupakan URL gambar.
  • Klik Preview sebelum menyimpan template sobat blogger

Menyusun Layout Template Blogger

Comment
6 Element Tags Menyusun Layout Template Blogger - Dalam sebuah template terdiri dari beberapa element penyusun untuk membuat layout suatu template.  
Element tags itu bias di sebut kode HTML. Apa itu kode HTML??  
HTML (Hyper Text Markup Language)adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. wikipedia
6 Element Tags Menyusun Layout Template Blogger

Bahasa HTML ini hanya bisa di baca oleh browser. Untuk melihat kode html suatu website cukup dengan klik kanan lalu lihat source code atau lihat sumber laman. Dengan cara itu sobat bisa melihat struktur html yang digunakan suatu website itu. Dan dengan cara ini juga banyak pelaku yang melakukan CLONING template web blog orang lain, tentu hal ini merupakan tindakan kriminal.

Semua elemen tags html itu tidak bisa hanya berdiri sendiri, ada beberapa code lain untuk menyusunnya agar sesuai layout yang kita harapkan. Kode yang digunakan untuk menyusun kode-kode html agar sesuai layout di sebut CSS. Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Untuk lebih jelas mengenai Tutorial CSS bisa mengunjungi sumber terpercaya wikipedia.

Berikut 6 Element Tags Menyusun Layout Template Blogger:
1. Outer Wrapper
Merupakan element paling luar dari kode html, dan ini paling utama yang harus ada karena Outer Wrapper digunakan untuk menentukan tinggi lebar suatu layout. Untuk penerapan biasanya seperti ini:
<body>
<div id="outer-wrapper">. . . . . . </div>
</body>
Kode CSS:
#outer-wrapper { . . . . ;}
2. Header Wrapper
Fungsi dari header wrapper ini adalah untuk mengatur layout bagian header. Yang biasanya untuk nama dan iklan. Untuk penggunaan secara umum seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #header-wrapper { . . . . ;}
3. Content Wrapper
Untuk fungsi element content wrapper ini saya kurang begitu jelas, namun secara prinsip ini sama dengan fungsi main-wrapper. Menurut saya ini bisa digunakan untuk pembungkusan main-wrapper dan sidebar-wrapper.
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper"> . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper { . . . . ;}
4. Main Wrapper
Fungsi dari main wrapper ini adalah untuk tempat posting, biasanya terletak di bagian tengah. Untuk penggunaan secara umum seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
</div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper #main-wrapper { . . . . ;}
5. Sidebar Wrapper
Fungsi dari element ini pasti pada udah tahu, sidebar wrapper digunakan untuk penempatan widget atau fungsi dari fitur lain. Letak sidebar ini biasanya di sebelah kanan atau kiri. Untuk penggunaan secara umum:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
<div id="sidebar-wrapper"> . . . . </div>
</div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper #sidebar-wrapper { . . . . ;}
6. Footer
Fungsi footer ini biasanya untuk credit link atau informasi mengenai siapa pembuat template. Letak footer paling bawah. Penggunaannya seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
<div id="sidebar-wrapper"> . . . . </div>
</div>
<div id="footer"> . . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #footer { . . . . ;}
Dengan mengetahui dasar-dasar dari tags element template kita bisa dengan mudah melakukan editing template blogger dan membuat layout template sederhana. Semoga artikel  6 Element Tags Menyusun Layout Template Blogger bisa bermanfaat untuk sobat dan pembaca.

Membuat Menu Bar dan Kotak Pencarian pada blog

Comment

Menu bar yang berdampingan dengan search box mulai tenar di kalangan blogger Indonesia semenjak salah satu webmaster kita, Agus Ramadhani memasangnya di bawah header website miliknya. Saat ini, mungkin ada ratusan blogger yang memasang menu bar plus kotak pencarian di blog mereka. Menurut saya, banyaknya blogger yang memasang menu bar seperti itu sangatlah wajar karena menu bar yang berdampingan dengan kotak pencarian mempunyai tampilan yang sangat manis. Untuk melihat bgaimana tampilan dari menu bar yang saya jelaskan di atas, coba sobat blogger klik gambar di bawah ini untuk memperbesar ukurannya!

menu-bar

Bagaimana pendapat sobat blogger tentang menu bar di atas? Manis bukan? Menu bar ini bisa sobat blogger modifikasi sesuai dengan keinginan sobat blogger sehingga setiap menu memiliki sub menu (Bercabang).
Cara Memasang Menu Bar Plus Kotak Pencarian Di Blog
  • Sign In di blogger.com
  • Pada Menu Drop Down, sobat pilih Template
  • Kemudian klik tombol "Edit HTML" dan Klik Proceed
  • Kasih tanda centang pada Expand Widget Template.
  • Copy Paste kode berikut tepat di atas kode ]]></b:skin>
#menubar{
width:920px;
height:38px;
background:#222;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #222;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #222;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #222;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #222;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}
  • Pasang kode berikut, sebelum kode <div id="content-wrapper">
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
  • Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa untuk menyimpan template sobat blogger.

Tambahan :
  1. Setiap template memiliki kode yang berbeda, jadi, jika di dalam template sobat blogger tidak terdapat kode <div id="content-wrapper"> sobat blogger bisa meletakkan kode HTML di atas sebelum kode <div id="header-wrapper"> atau<div id="outer-wrapper"> atau <div class='tabs-outer'> atau sebelum kode <div class='tabs-cap-top cap-top'>
  2. Jika sobat blogger ingin mengganti warna dari menu bar di atas, sobat blogger tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai dengan warna template sobat.
  3. Ganti http://URL-YANG-DI-TUJU.blogspot.com/ dengan URL blog sobat. Dan jangan lupa juga untuk mengganti "Menu" dan "Sub Menu" sesuai Title yang diinginkan.

Cara Memasang Robots.txt pada Blogger

Comment
Cara Memasang Robots.txt di Blog - Sebelum kita memasang Robots.txt di blog kita harus tahu terlebih dahulu fungsi dari robots.txt ini. Fungsi secara singkat robots.txt adalah sebuah script robot yang dikhususkan untuk robots search engine melakukan crawl suatu web blog. Jika ingin jelasnya fungsi dan manfaat dari robots.txt ini bisa baca artikel saya Fungsi Robots.txt.

Kita bisa mengecek robots.txt milik web blog lain seperti google, yahoo, facebook dengan cara memberi URL di belakang alamat web blog tersebut. Contoh: http://sayamanusiagaptek.blogspot.sg//robots.txt.
Cara Memasang Robots.txt di Blog
Cara Memasang Robots.txt di blog:
1. Login ke blogger.com
2. Menuju ke menu settings atau pengaturan
3. Klik Search Preferences
4. Pilih Custom robots.txt
5. Lalu klik Edit dan pilih Yes
6. Isi dengan Script Robots.txt yang telah dibuat
Seperti ini scriptnya:
User-agent: Googlebot
Disallow: /?m=1
Disallow: /?m=0
Disallow: /search
Disallow: /*archive.html 
User-agent: *
Disallow: /?m=1
Disallow: /?m=0
Disallow: /search
Disallow: /archive.html 
Sitemap: http://aikonmedia.blogspot.com/atom.xml
Sitemap: http://aikonmedia.blogspot.com/feeds/posts/default
Sitemap: http://aikonmedia.blogspot.com/feeds/posts/default?orderby=UPDATED
Sitemap: http://aikonmedia.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Note: Ganti yang saya beri warna merah dengan alamat web blog kamu.

7. Simpan atau Save
Langganan: Postingan (Atom)