Recent post
Dengan CSS/Javascript Pada Blog
Pada Kesempatan Kali Ini Saya Akan Membahas Tutorial Blogspot Artikel Tentang Membuat Menu Horizontal Drop down CSS Pada Blog
Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.
Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada menu Blog Ini
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">
<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>
<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>
<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>
<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>
<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>Lalu Simpan Dan Lihat Hasilnya...
Keterangan:
Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...
Pada Kesempatan Kali Ini Saya Akan Membahas Tutorial Blogspot Artikel Tentang Membuat Menu Horizontal Drop down CSS Pada Blog
Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.
Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada menu Blog Ini
- Langkah Pertama
- Login ke akun Blogger kamu.
- Dari halaman dashboard, pilih Edit HTML.
- Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
- Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
- Lalu Simpan Template.
- Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
- Copy dan paste Script dibawah ini
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">
<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>
<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>
<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>
<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>
</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>
<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>
Keterangan:
- Tanda # untuk Tempat Url yang anda inginkan
- Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan
- Login Ke akun Blogger sobat
- Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template widget
- Masuka KOde Berikut Dibawah kode <div id='outer-wrapper'>
<style type='text/css'>#menubar {position: fixed;top:0px;z-index: 1000;background:-moz-linear-gradient(top,#1F2326,#000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;width:988px;margin: 0;padding: 0;height:30px;}#menu {width:988px;height:30px;position:relative}#menu ul {padding:0;margin:0;list-style:none;position:absolute;left:0;top:0;width:988px;height:30px;z-index:10}#menu ul li {float:left;padding-bottom:4px}#menu ul li#li1 {padding:0}#menu li a {display:block;text-transform:capitalize;height:20px;float:left;color:#fff;text-decoration:none;line-height:20px;padding:0 10px;font-family:kristen itc;font-size:13px;border-right:1px solid #FF0000;margin:3px 0 0;}#menu li a:hover {color:#ff0000;white-space:nowrap;}#menu li a.current {color:#ffffff;}#menu li a:hover.current {color:#ffffff;}#menu li a:hover b {display:block;width:988px;height:30px;position:absolute;left:0; top:0;z-index:-1;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}#menu li#li1 a:hover b {background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));}#menu li#li2 a:hover b {background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);}#menu li#li3 a:hover b {background: -moz-linear-gradient(top,#AF0000,#6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#menu li#li4 a:hover b {background: #D11717 -moz-linear-gradient(top,#D11717,#000);background: -webkit-gradient(linear, left top, left bottom, from(#D11717), to(#000));}#menu li#li5 a:hover b {background:-moz-linear-gradient(top,#001C5A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#000));}#menu li#li6 a:hover b {background: #244007 -moz-linear-gradient(top,#244007,#000);background: -webkit-gradient(linear, left top, left bottom, from(#244007), to(#000));}#menu li#li7 a:hover b {background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));}#menu li#li9 a:hover b {background:-moz-linear-gradient(top,#029BC5,#000);background: -webkit-gradient(linear, left top, left bottom, from(#029BC5), to(#000));}#menu li#li8 a:hover b {background: #40071F -moz-linear-gradient(top,#40071F,#000);background: -webkit-gradient(linear, left top, left bottom, from(#40071F), to(#000));}</style>
<div id='menubar'>
<div id='menu'>
<ul>
<li id='li1'><a href='#'><b/>Home</a></li>
<li id='li2'><a href='#'><b/>About Me</a></li>
<li id='li3'><a href='#' ><b/>Daftar Isi</a></li>
<li id='li4'><a href='#'><b/>Masuk</a></li>
<li id='li8'><a href='#'><b/>Daftar</a></li>
<li id='li5'><a href='#'><b/>My Facebook</a></li>
<li id='li9'><a href='#'><b/>My Twitter</a></li>
<li id='li7'><a href='#'><b/>Kode Warna</a></li>
</ul>
</div>
</div>
4 . Ubah Tanda # dengan Url yg Sobat inginkan dan Ubah KOde yg Berwarna MERAH dengan Judul Yang Sobat Inginkan
5 . SIMPAN Dan Lihat Hasilnya
| |||||
 | |||||
Pembahasan kali ini adalah Cara Mengganti Warna Font Pada Blog Sobat, langsung saja TKP.
1. Login ke Blogger. Klik menu Design -> Template Designer -> Advanced. Disana terdapat beberapa elemen yang dapat Sobat atur seperti:
Page Background Color: Mengganti warna background template yang diluar
Main Background Color: Mengganti warna background template yang didalam
Text Color: Mengganti warna teks postingan/ artikel
Blog Title Color : Mengganti warna judul blog
Blog Description Color : Mengganti warna deskripsi blog
Post Title Color: Mengganti warna judul postingan
Date Header Color: Mengganti warna teks tanggal
Border Color: Mengganti warna garis tepi template
Sidebar Title Color: Mengganti warna judul pada kolom sidebar misalnya teks Blog Archive, Blogroll, Labels, dan lain-lain
Link Color: Mengganti warna teks yang dipasang link
Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada linknya
Sidebar Link Color: Mengganti warna teks yang dipasang link pada kolom sidebar
Sidebar Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada link yang terletak pada kolom sidebar
Text Font: Mengganti bentuk huruf/ teks pada postingan
Sidebar Title Font: Mengganti bentuk huruf judul pada kolom sidebar
Blog Title Font: Mengganti bentuk huruf judul blog
Blog Description Font: Mengganti bentuk huruf deskripsi blog
Post Footer Font: Mengganti bentuk huruf footer pada postingan. Misalnya: Diposkan oleh, Posted by
Itulah beberapa elemen dasar yang paling sering ditemukan dalam template blogger. Setiap template memiliki elemen yang berbeda-beda. Silahkan dicoba sendiri dengan menggonta-ganti warnanya.
2. Jika sudah tinggal klik Simpan maka warna template akan berubah sesuai dengan keinginan Sobat. Lalu klik View Blog untuk melihatnya.
1. Login ke Blogger. Klik menu Design -> Template Designer -> Advanced. Disana terdapat beberapa elemen yang dapat Sobat atur seperti:
Page Background Color: Mengganti warna background template yang diluar
Main Background Color: Mengganti warna background template yang didalam
Text Color: Mengganti warna teks postingan/ artikel
Blog Title Color : Mengganti warna judul blog
Blog Description Color : Mengganti warna deskripsi blog
Post Title Color: Mengganti warna judul postingan
Date Header Color: Mengganti warna teks tanggal
Border Color: Mengganti warna garis tepi template
Sidebar Title Color: Mengganti warna judul pada kolom sidebar misalnya teks Blog Archive, Blogroll, Labels, dan lain-lain
Link Color: Mengganti warna teks yang dipasang link
Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada linknya
Sidebar Link Color: Mengganti warna teks yang dipasang link pada kolom sidebar
Sidebar Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada link yang terletak pada kolom sidebar
Text Font: Mengganti bentuk huruf/ teks pada postingan
Sidebar Title Font: Mengganti bentuk huruf judul pada kolom sidebar
Blog Title Font: Mengganti bentuk huruf judul blog
Blog Description Font: Mengganti bentuk huruf deskripsi blog
Post Footer Font: Mengganti bentuk huruf footer pada postingan. Misalnya: Diposkan oleh, Posted by
Itulah beberapa elemen dasar yang paling sering ditemukan dalam template blogger. Setiap template memiliki elemen yang berbeda-beda. Silahkan dicoba sendiri dengan menggonta-ganti warnanya.
2. Jika sudah tinggal klik Simpan maka warna template akan berubah sesuai dengan keinginan Sobat. Lalu klik View Blog untuk melihatnya.
Anda ingin link ada menjadi berkedip warna warni ketika di sorot mouse! mari ikuti langkah berikut:
1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3. Klik Edit HTML
4. Cari Kode </head> , Untuk memudahkan cari dengan tool pecari denagn menekan ctrl F atau F3.
5. Pasang kode sript dibawah ini dibawah kode </head> atau disamping kode </head>
<script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>
sehingga menghasilkan seperti ini:
</head><script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>
6.Simpan dan lihat hasilnya.
1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3. Klik Edit HTML
4. Cari Kode </head> , Untuk memudahkan cari dengan tool pecari denagn menekan ctrl F atau F3.
5. Pasang kode sript dibawah ini dibawah kode </head> atau disamping kode </head>
<script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>
sehingga menghasilkan seperti ini:
</head><script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>
6.Simpan dan lihat hasilnya.
Elemen adalah tempat untuk menambahkan sebuah widget blogger, Sebuah Header bisanya hanya memiliki elemen satu dan tidak bisa diatmbahkan, tapi jika anda ingin Menambah Elemen tepat di Bawah atau di Atas Header kita hnya butuh merubah sedikit kode htmlnya, begini caranya:
- Login ke akun Blogger teman- teman
- Pada Dashboard pilih Tata Letak - Edit HTML
- cari kode di bawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> - Lalu rubah no menjadi yes ; maxwidgets = jumlah maksimal widget yang bisa kita tambahkan sehingga menjadi seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> - Klik Simpan Template
- Lihat Previewnya dengan masuk ke Tata Letak - Elemen Halaman
Untuk membuat kolom baru atau yang sering di sebut Gadget ini mudah asal temen - temen sudah mengenal sedikit aja kode kode CSS dan HTML, karna kode ini yang akan di gunakan untuk membuat Elemen tersebut :
1.Klik Klik Tata Letak
2. Klik tab Edit HTML
3. backup lah template temen - temen (wajib dilakukan)
4. Cari Code ]]></b:skin> lalu copy pastekan code di bawah ini di atas code ]]></b:skin> :
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
5. Cari kode dibawah ini (jika tidak ada cari yang hampir sama karna setiap temp berbeda - beda) :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section></div>
6. Copy kode berikut lalu paste di bawah kode di atas
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
7. Klik tombol SIMPAN TEMPLATE
8. Klik tab Tata Letak, maka hasilny aakan seperti dibwah ini :
Klik Untuk Memperbesar
Selamat Mencoba Cara Membuat Elemen "Gadget" di bawah Header, sukses selalu.
1.Klik Klik Tata Letak
2. Klik tab Edit HTML
3. backup lah template temen - temen (wajib dilakukan)
4. Cari Code ]]></b:skin> lalu copy pastekan code di bawah ini di atas code ]]></b:skin> :
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
5. Cari kode dibawah ini (jika tidak ada cari yang hampir sama karna setiap temp berbeda - beda) :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section></div>
6. Copy kode berikut lalu paste di bawah kode di atas
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
7. Klik tombol SIMPAN TEMPLATE
8. Klik tab Tata Letak, maka hasilny aakan seperti dibwah ini :
Klik Untuk Memperbesar
Selamat Mencoba Cara Membuat Elemen "Gadget" di bawah Header, sukses selalu.
Windows XP adalah suatu sistem pengoperasian (operating system) yang paling banyak dipakai sampai saat ini karena selain kemudahan dalam pemakaiannya Windows XP digunakan sebagai standarisasi pembelajaran yang di pakai oleh sekolahan-sekolahan dan perguruan tinggi pada umumnya.Untuk melakukan penginstalan windows xp diperlukan ketelitian dan kesabaran dalam prosesnya karena memerlukan waktu yang lumayan lama.
Ada beberapa jenis windows xp diantaranya windows xp professional, Home Edition, Media Center Edition, Tablet PC Edition, Starter Edition, Professional x64 Edition, Professional 64-bit Edition For Itanium.
1. Siapkan CD WINDOWS XP
2. Siapkan CD DRIVER MOTHERBOARD
3. Atur bios terlebih dahulu agar prioritas bootingnya dimulai dari CD(DVD)-ROM, caranya:
a. Masuk ke BIOS dengan menekan tombol Del, atau F1, atau juga F2.
Pilih menu Advanced Settings, kemudian carilah ‘Boot Priority’ atau yang sejenis.
b. ubah pengaturanya, agar CDROM jadi urutan yang pertama kemungkinan pilihan ini ada 2 jenis
* menu ‘First boot priority’, ‘Second boot priority’ dll: Aturlah ‘First boot priority’ ke ‘CDROM’ dengan menekan tombol PgDn/Pgup (Page Down/Up) atau +/-.
Atur juga ‘Second boot priority’nya ke HDD0/HDD1.
* Jika menunya ‘Boot priority’: atur ke ‘CDROM, C, A’ atau ‘CDROM, A,
C. dengan menekan tombol PgDn/Up.
2. Siapkan CD DRIVER MOTHERBOARD
3. Atur bios terlebih dahulu agar prioritas bootingnya dimulai dari CD(DVD)-ROM, caranya:
a. Masuk ke BIOS dengan menekan tombol Del, atau F1, atau juga F2.
Pilih menu Advanced Settings, kemudian carilah ‘Boot Priority’ atau yang sejenis.
b. ubah pengaturanya, agar CDROM jadi urutan yang pertama kemungkinan pilihan ini ada 2 jenis
* menu ‘First boot priority’, ‘Second boot priority’ dll: Aturlah ‘First boot priority’ ke ‘CDROM’ dengan menekan tombol PgDn/Pgup (Page Down/Up) atau +/-.
Atur juga ‘Second boot priority’nya ke HDD0/HDD1.
* Jika menunya ‘Boot priority’: atur ke ‘CDROM, C, A’ atau ‘CDROM, A,
C. dengan menekan tombol PgDn/Up.
4. Tunggu beberapa saat sampai muncul tulisan "press any key to boot from CD" seperti tampilan Seperti gambar di bawah ini
5. Tekan ENTER atau sembarang tombol, lalu proses instalasi akan mengecek hardware komputer anda, kemudian akan muncul tulisan "windows setup" seperti gambar dibawah ini
6. lalu file-file di dalam cd akan di load ke dalam komputer, kemudian akan muncul tampilan "welcome to setup" seperti gambar dibawah ini
7. Tekan "ENTER" untuk menginstal windows xp, "R" untuk repair system windows yang sebelumnya pernah terinstal, "F3" untuk keluar dari proses instalasi, lalu akan muncul (End User Licese Aggrement) seperti gambar di bawah ini
8. Tekan "F8" kemudian proses instalasi akan mencari dan membaca partisi hardisk anda, kemudian akan muncul semua partisi hardisk anda, seperti gambar di bawah ini
9. Tekan "ENTER" untuk langsung menginstal windows, "C" untuk membuat partisi hardisk anda, kapasitas partisi sesuai dengan kebutuhan anda, dalam satuan MB, selanjutnya jika anda membuat partisi dengan menekan tombol "C", maka akan muncul gambar seperti di bawah ini
10. Kemudian tuliskan kapasitas partisi yang ingin anda buat, seperti terlihat pada gambar diatas, sebagai contoh, misalkan kapasitas hardisk anda 40 GB, lalu anda ingin membagi dua, maka tuliskan 20000,jangan 20, karna partisi satuannya MB, tentunya anda mengerti kan...?? cat" 1GB = 1000 MB
11. Kenudian tekan "ENTER" maka akan muncul gambar seperti dibawah ini
12. kemudian pilih "format the partition using the NTFS file system (Quick)" atau "format the partition using the NTFS file system (Quick)" lalu tekan "ENTER" maka akan muncul layar sepert gambar di bawah ini
13. Kemudian arahkan pointer pada posisi "unpartitioned space", lalu tekan "C" maka akan muncul gambar seperti gambar sebelumnya, dalam hal ini layar yang akan muncul seperti gambar sebelumnya menunjukan sisa partisi yang telah anda bagi, jika anda cuma membagi 2 partisi saja maka langsung tekan "ENTER" tapi jika anda ingin mempartisi lagi sisa hardisknya maka tinggal di bagi lagi aj, seperti langkah-langkah sebelumnya, mengertikan maksud saya....??
setelah selesai partisi ketika anda menekan "ENTER" seperti yang di jelaskan di atas, maka akan muncul gambar sperti gambar diatas, setelah itu arahkan poiter di posisi C: partition1 [New Raw], tapi biasanya sudah berada di posisi tersebut, maka anda tinggal menekan "ENTER" saja untuk proses instalasi windows, kemudian akan muncul proses format seperti gambar di bawah ini
14. Setelah selesai format, kemudian windows akan ,menyalin file untuk proses instalasi, seperti gambar di bawah ini
15. Setelah proses penyalinan selesai, secara otomatis komputer akan melakukan restart seperti gambar di bawah ini, dalam hal ini untuk mempercepat proses restart, anda bisa langsung menekan "ENTER"
16. Setelah itu akan muncul loading windows seperti gambar di bawah ini
17. selanjutnya proses instalasi windows di mulai 1..2..3...GOoooo muncul layar seperti gambar di bawah ini
18. selanjutnya tinggal menunggu, sambil ngopi jg bisa, biar lebih terinspirasi, eitssss, tp jangan kemana mana dulu, karna selanjutnya akan muncul layar seperti gambar di bawah ini
19. Langsung klik "NEXT" aja BOS...!!! lalu mucul lagi bos layar seperti gambar di bawah ini
20. Isi nama dan organisasinya, terserah BOS aja... lalu tekan "NEXT" kemudian akan muncul layar seperti gambar di bawah ini
21. Masukan serial nombernya, jangan sampe salah ya....!!! kemudian tekan "Next" selanjutnya akan muncul layar administrator, isi aja mau dinamain apa komputernya, terserah deeeehhhhh......
kalau mau pake pasword tinggal di isi juga paswordnya, terserah juga mo apa paswordnya.... lalu tekan "Next" maka muncul layar Date and Time Setting seperti gambar di bawah ini
22. Masukan settingan jam dan tanggal, tentukan juga time zone anda, untuk jakarta : pilih GMT+7 Klik "Next" lagi BOS.... setelah proses instalasi windows delanjutkan, seperti gambar di bawah ini
23. Silahkan Menunggu lumayan lama BOS,.... sampai muncul layar seperti gambar di bawah ini
24. Selanjutnya akan muncul layar work group or computer Domain,seperti gambar di bawah ini
25. jika komputer anda terhubung dengan sebuah domain, maka isikan nama domainnya, tapi jika komputer anda stand alone, maka pilih radio button yang paling atas, lalu tekan "Next"
26. Selanjutnya akan muncul display setting, seperti gambar di bawah ini, klik "OK" aja BOS....!!!
27. Kemudian windows akan mendeteksi tampilan optimal dari PC anda, seperti terlihat pada gambar di bawah ini, Klik "OK" aj BOS...!!!
28. Proses instalasi hampir selesai BOS..... selanjutnya akan muncul loading jendela windows seperti gambar di bawah ini
29. Selanjutnya anda akan dibawa masuk ke dalam windows untuk pertama kalinya seperti terlihat pada gambar di bawah ini, tekan "Next" aj BOS..
30. Selanjutnya akan muncul layar "Help Protect Your PC", seperti gambar di bawah ini, kemudian pilih "Not Right Now" lalu tekan "Next"
31. Kemudian komputer akan mengecek koneksi ke internet, seprti terlihat pada gambar di bawah ini, pilih "Yes" lalu tekan "Next"
32. Kemudian akan muncul pilihan aktivasi windows, seperti gambar di bawah ini, lalu tekan "Next"
33. Setelah itu akan muncul tampilan seperti gambar di bawah ini yang menunjukan pilihan untuk menambah pengguna komputer, Anda bisa memasukkan beberapa pengguna yang akan mengakses komputer Anda, Namun jika satu akun sudah cukup, atau Anda menginstall komputer untuk dipakai bergantian, cukup masukkan satu user kemudian klik "Next"
34. Proses instalasi windows selesai, kemudian akan muncul layar seperti gambar di bawah ini, klik "finish", maka proses instalasi selesai.....
35. Selesailah sudah semua.... kemudian perlahan masuk ke windowsnya seperti telihat pada gambar di bawah ini
36. Kemudian tinggal menginstal CD Driver Motherboad, dan perangkat pendukung lainnya....
Demikianlah langkah-langkah dan cara install windows xp lengkap berikut gambarnya..
5. Tekan ENTER atau sembarang tombol, lalu proses instalasi akan mengecek hardware komputer anda, kemudian akan muncul tulisan "windows setup" seperti gambar dibawah ini
6. lalu file-file di dalam cd akan di load ke dalam komputer, kemudian akan muncul tampilan "welcome to setup" seperti gambar dibawah ini
7. Tekan "ENTER" untuk menginstal windows xp, "R" untuk repair system windows yang sebelumnya pernah terinstal, "F3" untuk keluar dari proses instalasi, lalu akan muncul (End User Licese Aggrement) seperti gambar di bawah ini
8. Tekan "F8" kemudian proses instalasi akan mencari dan membaca partisi hardisk anda, kemudian akan muncul semua partisi hardisk anda, seperti gambar di bawah ini
9. Tekan "ENTER" untuk langsung menginstal windows, "C" untuk membuat partisi hardisk anda, kapasitas partisi sesuai dengan kebutuhan anda, dalam satuan MB, selanjutnya jika anda membuat partisi dengan menekan tombol "C", maka akan muncul gambar seperti di bawah ini
10. Kemudian tuliskan kapasitas partisi yang ingin anda buat, seperti terlihat pada gambar diatas, sebagai contoh, misalkan kapasitas hardisk anda 40 GB, lalu anda ingin membagi dua, maka tuliskan 20000,jangan 20, karna partisi satuannya MB, tentunya anda mengerti kan...?? cat" 1GB = 1000 MB
11. Kenudian tekan "ENTER" maka akan muncul gambar seperti dibawah ini
12. kemudian pilih "format the partition using the NTFS file system (Quick)" atau "format the partition using the NTFS file system (Quick)" lalu tekan "ENTER" maka akan muncul layar sepert gambar di bawah ini
13. Kemudian arahkan pointer pada posisi "unpartitioned space", lalu tekan "C" maka akan muncul gambar seperti gambar sebelumnya, dalam hal ini layar yang akan muncul seperti gambar sebelumnya menunjukan sisa partisi yang telah anda bagi, jika anda cuma membagi 2 partisi saja maka langsung tekan "ENTER" tapi jika anda ingin mempartisi lagi sisa hardisknya maka tinggal di bagi lagi aj, seperti langkah-langkah sebelumnya, mengertikan maksud saya....??
setelah selesai partisi ketika anda menekan "ENTER" seperti yang di jelaskan di atas, maka akan muncul gambar sperti gambar diatas, setelah itu arahkan poiter di posisi C: partition1 [New Raw], tapi biasanya sudah berada di posisi tersebut, maka anda tinggal menekan "ENTER" saja untuk proses instalasi windows, kemudian akan muncul proses format seperti gambar di bawah ini
14. Setelah selesai format, kemudian windows akan ,menyalin file untuk proses instalasi, seperti gambar di bawah ini
15. Setelah proses penyalinan selesai, secara otomatis komputer akan melakukan restart seperti gambar di bawah ini, dalam hal ini untuk mempercepat proses restart, anda bisa langsung menekan "ENTER"
16. Setelah itu akan muncul loading windows seperti gambar di bawah ini
17. selanjutnya proses instalasi windows di mulai 1..2..3...GOoooo muncul layar seperti gambar di bawah ini
18. selanjutnya tinggal menunggu, sambil ngopi jg bisa, biar lebih terinspirasi, eitssss, tp jangan kemana mana dulu, karna selanjutnya akan muncul layar seperti gambar di bawah ini
19. Langsung klik "NEXT" aja BOS...!!! lalu mucul lagi bos layar seperti gambar di bawah ini
20. Isi nama dan organisasinya, terserah BOS aja... lalu tekan "NEXT" kemudian akan muncul layar seperti gambar di bawah ini
21. Masukan serial nombernya, jangan sampe salah ya....!!! kemudian tekan "Next" selanjutnya akan muncul layar administrator, isi aja mau dinamain apa komputernya, terserah deeeehhhhh......
kalau mau pake pasword tinggal di isi juga paswordnya, terserah juga mo apa paswordnya.... lalu tekan "Next" maka muncul layar Date and Time Setting seperti gambar di bawah ini
22. Masukan settingan jam dan tanggal, tentukan juga time zone anda, untuk jakarta : pilih GMT+7 Klik "Next" lagi BOS.... setelah proses instalasi windows delanjutkan, seperti gambar di bawah ini
23. Silahkan Menunggu lumayan lama BOS,.... sampai muncul layar seperti gambar di bawah ini
24. Selanjutnya akan muncul layar work group or computer Domain,seperti gambar di bawah ini
25. jika komputer anda terhubung dengan sebuah domain, maka isikan nama domainnya, tapi jika komputer anda stand alone, maka pilih radio button yang paling atas, lalu tekan "Next"
26. Selanjutnya akan muncul display setting, seperti gambar di bawah ini, klik "OK" aja BOS....!!!
27. Kemudian windows akan mendeteksi tampilan optimal dari PC anda, seperti terlihat pada gambar di bawah ini, Klik "OK" aj BOS...!!!
28. Proses instalasi hampir selesai BOS..... selanjutnya akan muncul loading jendela windows seperti gambar di bawah ini
29. Selanjutnya anda akan dibawa masuk ke dalam windows untuk pertama kalinya seperti terlihat pada gambar di bawah ini, tekan "Next" aj BOS..
30. Selanjutnya akan muncul layar "Help Protect Your PC", seperti gambar di bawah ini, kemudian pilih "Not Right Now" lalu tekan "Next"
31. Kemudian komputer akan mengecek koneksi ke internet, seprti terlihat pada gambar di bawah ini, pilih "Yes" lalu tekan "Next"
32. Kemudian akan muncul pilihan aktivasi windows, seperti gambar di bawah ini, lalu tekan "Next"
33. Setelah itu akan muncul tampilan seperti gambar di bawah ini yang menunjukan pilihan untuk menambah pengguna komputer, Anda bisa memasukkan beberapa pengguna yang akan mengakses komputer Anda, Namun jika satu akun sudah cukup, atau Anda menginstall komputer untuk dipakai bergantian, cukup masukkan satu user kemudian klik "Next"
34. Proses instalasi windows selesai, kemudian akan muncul layar seperti gambar di bawah ini, klik "finish", maka proses instalasi selesai.....
35. Selesailah sudah semua.... kemudian perlahan masuk ke windowsnya seperti telihat pada gambar di bawah ini
36. Kemudian tinggal menginstal CD Driver Motherboad, dan perangkat pendukung lainnya....
Demikianlah langkah-langkah dan cara install windows xp lengkap berikut gambarnya..
