Tampilkan postingan dengan label Header. Tampilkan semua postingan
Tampilkan postingan dengan label Header. Tampilkan semua postingan

Mengganti Icon addressbar (favicon)

0

Label: , ,
Bookmark and Share

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog diBlogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagikamu yang tidak puas dengan icon/gambar tersebut, kamu bisamenggantinya dengan gambar sesuai dengan keinginanmu. caranya sangatmudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) denganukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebassih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu.....

Masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_u-YQSCLIZsWrHJMpSg8Ppv68BDIiLxQo5lASVZtedMHuy1e8vUyHPWkbvyfVyJBm63FuOF2KsK3XACXT0uNqHgF8wV6HsWZMHU4z-thyphenhyphenAstpPyZ6yquDAOXSLXBQ29DuTXwdBXhJgo/h120/tb_icon.png' rel='SHORTCUT ICON'/>
atau
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_u-YQSCLIZsWrHJMpSg8Ppv68BDIiLxQo5lASVZtedMHuy1e8vUyHPWkbvyfVyJBm63FuOF2KsK3XACXT0uNqHgF8wV6HsWZMHU4z-thyphenhyphenAstpPyZ6yquDAOXSLXBQ29DuTXwdBXhJgo/h120/tb_icon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di picasa atau bisa juga di photobucket dan juga di imageshack.

Read More >>

Membuat Menu Horizontal Multilevel

0
Langkah pertama yaitu Login ke Blogger

Masuk pada bagian Template lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>
<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]-->
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>
.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari kode seperti dibawah ini :
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>
Perhatikan saja kode yang berwarna merah karena kode yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah kode yang diatas tadi
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Tambah Widget"




Terlihat pada "Tata Letak" muncul tempat gadget baru, lalu klik saja "Tambah Widget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://tutorialblogger.blogspot.com">Tutorial Blogger</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorialblogger.blogspot.com">Tutorial Blogger</a></li>
</ul>
<br style="clear: left" />
</div>

Kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan SAVE...

Semoga bermanfaat :D
Read More >>

Membuat judul blog berjalan

0

Label: ,
Bookmark and Share
Untuk membuatnya, silahkan ikuti langkah-langkah berikut :
  1. Lakukan Login terlebih dahulu pada blog anda
  2. Klik Menu Layout
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)
  4. Temukan code pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).
  5. Silahkan letakkan kode dibagian bawah code <head> . (Note : Ganti kalimat "Welcome in Share Center....more...." dengan kalimat anda)



  6. Klik tombol Save Template
  7. Lihat perubahannya …
Read More >>

Bagian-Bagian pada Template Minima

0

Label: ,
Bookmark and Share
Lihat gambar dibawah ini yang merupakan capture dari layout minima untuk memperjelasnya.


Nah terlihat pada gambar diatas adalah capture dari template dasar blogger yang belum termodifikasi, terlihat pada gambar diatas terdapat bagian bagianya yaitu header, main wrapper sidebar dan footer.

Untuk lebih jelasnya mengenai bagian-bagian layout template baca dibawah ini.



Dari gambar diatas keteranganya dibawah ini :

Susunan bagian template blogger seperti dibawah ini

BODY→ OUTER WRAPPER → (HEADER + MAIN WRAPPER +SIDEBAR + FOOTER)

BODY : Adalah bagian paling dasar dari bagian-bagian lainya, body pada blog biasanya memenuhi halaman dari browser Anda baru setelah itu tersusun bagian-bagian lainya.

OUTER WRAPPER : Bagian ini adalah tempat dimana bagian-bagian dasar seperti header,main wrapper, sidebar dan footer tersusun diatas bagian ini

HEADER : Header ini tempatnya pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog.

MAIN WRAPPER : Sering disebut juga Posting area karena pada main wrapper adalah area postingan pada suatu Blog.

SIDEBAR : Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget misalnya gadget yang telah disediakan oleh pihak blogger maupun luar blogger yang tempatnya disamping posting area/main wrapper.

FOOTER : Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.

Semoga bermanfaat... :D
Read More >>

Menghilangkan Navbar Blog

1

Label: , ,
Bookmark and Share
Untuk menghilangkan navbar yang ada di atas halaman blog anda seperti gambar di bawah ini :


Lakukan langkah-langkah berikut :
  1. Login terlebih dahulu pada blog anda 
  2. Klik Menu Layout 
  3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download) 
  4. Temukan code body { pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari). 
  5. Silahkan letakkan kode di bawah ini di atas code body {
    /* Use this with templates/template-twocol.html */
    #navbar-iframe { /* this section hides the nav bar */
    height: 0px;
    visibility: hidden;
    display: none;
    }
  6. Klik tombol Save Template 
Dan lihat hasilnya…


Read More >>
Langganan: Postingan (Atom)
 
Tutorial Blogger Design by Trick and Tips Powered by Blogger