Belajar Ngeblog, Komputer, Tips trik, Free Template

Showing posts with label Template. Show all posts

Membuat Tab View di Postingan di Blogspot

Posted by Yoh Asakura | Comments : 24

Category : Labels: Blogger Stuff, CSS Tutorial, Iseng- iseng, Template, Tips Trik, Tutorial

Mungkin anda sudah mengenal apa yang dinamakan tab view, suatu widget yang bisa menampung banyak konten dalam satu box atau kotak kolom atau suatu area. Yang dimana konten tersebut akan terlihat bila kita mengklik tab masing-masing. Seringkali kita menemui tutorial cara membuat tab view, namun hanya terbatas pada sidebar. Dan bila kita memaksakan untuk mengimplementasikannya kedalam kotak Postingan (pada blogspot) maka, akan terjadi kegagalan fungsi kode.

Nah, lalu bagaimana Cara Membuat Tab View di Postingan di Blogspot ? Berikut kode alternatif atau lanjutan dari kode Membuat Tab View di Sidebar. Agar bisa digunakan digunakan di postingan, sebaiknya anda menggunakan kode ini.

Bila anda sudah berhasil mengimplementasikan kode tersebut. Anda bisa menaruh TV Online atau apapun yang anda butuhkan.

Bila anda ingin menonton TV Online Piala Dunia, Cepat dan tanpa Buffering, Ringan Halamannya, Bisa chatting bareng sambil nonton online, Silahkan menuju ke blog teman penulis di Sharing Mas Doyok.

Thanks to BloggerBuster anda Yahoo YUI

Cara Menghapus Widget Navbar Blogger Permanen

Posted by Yoh Asakura | Comments : 28

Category : Labels: Blog Tutorial, CSS Tutorial, Iseng- iseng, SEO, Template, Tips Trik

Seperti yang kita tahu, blogger memberi pada blog kita sebuah navbar (navigation bar) yang biasanya secara default terletak pada bagian paling atas dari blog kita. Karena navbar ini stylenya masih belum bisa memuaskan hati para designer, maka mereka mengakalinya dengan menyembunyikan keberadaan navbar ini dengan CSS. Dan sebenarnya kita bisa meremove secara permanen keberadaan widget navbar blogger ini dengan cara :

1. Masuk ke Blogger anda dan tuju pada EDIT HTML pada blog anda.

2. Cari kode <body> dan copy-paste kode dibawah ini diatas kode <body>.

<script type='text/javascript'>
<![CDATA[

]]>
</script>

3. Simpan Template anda. Dan jangan terkejut bila anda akan mendapatkan pesan konfirmasi penghapusan widget navbar ini dari template anda. Seperti yang ditunjukkan gambar dibawah ini.

4. Klik Tombol Delete Widget untuk menghapus widget secara permanen.

Mengembalikan Navbar Blogger yang dihapus Permanen

Untuk mengembalikan navbar blogger yang dihapus tadi, anda cukup dengan mencari kode diawal tadi yang anda gunakan untuk menghapus yang seperti dibawah ini.

<script type='text/javascript'>
<![CDATA[

]]>
</script>

Lalu hapus kode tersebut.

Keuntungan dari Menghilangkan Navbar Blogger secara permanen tidak hanya menyembunyikan adalah membuat template anda lebih SEO Friendly.

Kerugiannya, anda tidak akan mendapati icon obeng dan tang dan tombol quick edit pada post.

Trik Hack Dasar Blogger Template (Agar Template Lebih SEO Friendly)

Posted by Yoh Asakura | Comments : 32

Category : Labels: Blog Stuff, Blog Tutorial, Blogger Stuff, CSS Tutorial, Desain, Google, RSS, Search Engines, Template, Tips Trik, Tutorial

Berikut beberapa List trick hack template blogspot agar lebih nyaman dimata Search Engine (SEO Friendly). Dan membuat blog anda mempunyai kesempatan tampil di halaman pertama Search Engine. Berikut dasar-dasar hack dalam membuat template blogger sendiri.

Memasang Favicon
Untuk memasang/mengganti favicon blogger copas kode dibawah ini di bawah kode <head>

<link href='Alamat Tempat favicon Anda' rel='shortcut icon'/>
<link href='Alamat Tempat favicon Anda' rel='icon' type='image/gif'/>

Atau dengan menggunakan kode dibawah ini. Letakkan kode dibawah ini diatas kode </head>

<link rel="shotcut icon" href="..alamat tempat favicon.ico anda.."/>

atau

<link href='..alamat tempat favicon.ico anda..' rel='icon' type='image/vnd.microsoft.icon'/>

atau

<link href='...alamat favicon anda...' rel='icon' type='image/x-icon'/>

Menghilangkan Navbar Blogger
Kenapa harus dihilangkan?. Agar lebih kelihatan profesional kalau menurut saya, walaupun dibelakang URL blog tetap ada embel-embel .blogspot.com. Tapi tetap saja lebih kelihatan profesional. Soalnya navbar blogger tidak stylis. ehehe..
Masukkan kode berikut ini di atas kode ]]></b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Mouse Over Navbar blogger (Menghilangkan Navbar Blogger tapi, akan tampak kembali bila disorot oleh mouse.)

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Menghapus Quick Edit (Menghilangkan Icon Obeng dan Tang)
Kenapa ini harus dihilangkan ?. Sebenarnya tidak harus, cuman saya pribadi menjadi agak risih bila melihat template blog tidak bersih dan dipenuhi dengan icon obeng dan tang dimana-mana, walaupun hanya kita saja yang tahu, tapi tetap saja mengganggu.. hehe.. Tapi, kembali lagi pada diri anda.
Pasang kode berikut diatas kode ]]></b:skin>

.quickedit{
display:none;
}

Atau langsung saja dengan menghapus kode berikut satu persatu sampai habis. Dengan menggunakan CTRL+F untuk lebih mudah melakukan pencarian.

<b:include name='quickedit'/>

Menghilangkan Angka Dalam Label

Ini mungkin menjadi ciri khas tersendiri bagi sebagian orang, tapi bagi sebagian lainnya, ini merupakan pengganggu dalam keindahan sebuah template. Untuk menghilangkannya Cari kode berikut dibawah ini (gunakan CTRL+F agar lebih mudah) dan hapus kode berikut. Jangan lupa untuk mencentang kotak cek Expand Widget Templates.

(<data:label.count/>)

Menghapus Feed Link (Menghilangkan tulisan Subscribe to : post (atom).

Feed Link, kadang juga bisa berguna untuk kita, karena kemudahannya untuk digunakan langsung mensubscribe (membookmark) / menyimpang link feed bila belum disediakan oleh pemilik blog. Nah, bila sudah tersedia dengan desain indah jadi saya kira malah mengganggu pemandangan.

CSSnya.

.feed-links {
clear: both;
line-height: 2.5em;
}

HTMLnya

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Atau seperti dibawah ini.

<div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
<a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>

Menghilangkan Pesan Pencarian Blogger
caranya masukan kode berikut diatas ]]></b:skin>

.status-msg-wrap{
display:none;
}

Menghilangkan Logo Blogger di Comment
Biar tidak terkesan gratisan dan biar kelihatan lebih profesional kalau menurut saya.. ehehe..
cari kode berikut:

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

ganti dengan:

<dt expr:class='"comment-author " + data:comment.anchorName' expr:id='data:comment.anchorName'>

Reset Heading
1. Pembenahan Pada Judul Post
pada kode CSS secara default tersusun sebagai berikut

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Pada kode HTML

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
     <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
       <b:else/>
       <data:post.title/>
    </b:if>
</b:if>
</h3>

Ganti kode heading h3 menjadi h2.

2. Pembenahan pada judul pada Sidebar/Footer (Widget)
Pada kode CSS :

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

dan pada HTML nya

<h2 class='title'><data:title/></h2>

Ubah kode h2 menjadi h3

3. Pembenahan pada Date (Tanggal)
Penanggalan tidak terlalu mempunyai arti bagi kekuatan SEO, jadi kita tidak membutuhkannya. Untuk itu kita hilangkan saja tag heading pada 'Date'.
Pada kode CSS :

h2.date-header {
margin:1.5em 0 .5em;
}

hilangkan kode h2 nya sehingga menjadi seperti berikut :

.date-header {
margin:1.5em 0 .5em;
}

dan pada HTML :

<h2 class='date-header'><data:post.dateHeader/></h2>

ganti kode h2 menjadi div . Sehingga menjadi seperti berikut :

<div class='date-header'><data:post.dateHeader/></div>

Update :

Pembenahan Pada Title Blog (Judul Blog Agar Lebih SEO Friendly

Ganti kode berikut, bila masih ada di template anda

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Dan ganti dengan kode berikut dibawah :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='Tulis Deskripsi Blog anda disini, ini yang disebut meta description' name='description'/>
<meta content='Tulis Keyword blog anda di sini' name='keywords'/>

biasanya terletak dibawah <head> dan diatas kode <b:skin><![CDATA[/*

Periksa Resolusi Monitor Pengunjung Blog dengan Screenresolution.Org

Posted by Yoh Asakura | Comments : 3

Category : Labels: Free Online Tools, Info, Internet, Template

Sebuah gaya atau tampilan juga ikut berperan dalam kesuksesan dalam berblogging ria. Theme (template) blog anda yang indah akan lebih membuat pengunjung anda betah dalam mengunjungi blog anda. Untuk itu, biasanya agar blog anda kelihatan menjadi lebih unik, anda akan membuat dan mendesain template sendiri. Setelah semua selesai, mungkin anda akan merasa bahwa template anda sudah sempurna untuk digunakan. Tapi, apakah anda benar-benar tahu semua monitor yang digunakan oleh pengunjung anda untuk mengakses blog anda?.

Resolusi monitor, sesuatu yang bisa merubah hasil karya anda yang indah menjadi hal yang lumayan memuakkan. Kita perlu juga untuk mengetahui monitor yang bagaimana yang sebagian besar dipakai oleh pengunjung anda. Apakah dengan monitor berresolusi rendah atau resolusi tinggi. Bila menggunakan resolusi rendah, maka kita bisa mengganti template kita dengan gambar dari template dengan resolusi yang rendah pula. Maka akan lebih cocok. Untuk itu kita perlu pelapor realtime yang bisa memberitahu kita info secara terus menerus. Ada sebuah tool atau widget yang bisa anda gunakan untuk menginformasikan hal tersebut yaitu ScreenResolution.Org . Dengan widget yang disediakan oleh ScreenResolution.Org, anda akan lebih mudah memantau keadaan monitor pengunjung anda secara realtime. Untuk menggunakan widget ini tentunya anda harus mendaftar dulu.

Bagaimana Membuat Block Hover Effect untuk Link

Posted by Yoh Asakura | Comments : 3

Category : Labels: CSS Tutorial, Desain, Template, Tips Trik

Tutorial ini akan menunjukkan cara membuat block hover link. Dengan link bergaya ini, link anda akan terlihat lebih cantik dari link biasa. Seperti gambar dibawah ini nantinya link anda akan berwujud. Warna kuning background link adalah yang dimaksud Block Hover Link.

Link Block Hover Effect

Cara Membuatnya.

1. Anda akan menyisipkan secara manual kedalam deskripsi link anda dengan tag <em> dan <span> . Dikarenakan IE (Internet Explorer) hanya mendukung elemen :hover untuk link, dan juga karena anchor link harus mempunyai block style. Maka dari itu, kita tambahkan tag <em> dan <span> diantara tag <li>....</li>.

2. Berikut contoh struktur dari kode HTML link.

<ul>

<li><a href="#">Link Heading One

<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>

<li><a href="#">Link Heading Two

<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>

<li><a href="#">Link Heading Three

<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>

</ul>

</div>

3. Dan berikut CSS kodenya. Copy dan paste kode dibawah ini diatas kode
]]></b:skin> .

#linkBox ul {
   list-style-type: none;
   width: 400px;
}

#linkBox li {
   margin: 5px 0;
   border-bottom:1px dotted #ccc;
   border-top:1px dotted #ccc;
}

#linkBox li a {
   color: #E67701;
   display: block;
   font: bold 100.1% "Georgia", Times New Roman, Times, serif;
   padding: 5px;
   text-decoration: none;
   line-height:182.5%;

}

* html #linkBox li a { /* make hover effect work in IE */
   width: 400px;
}

#linkBox li a:hover {
   background: #eeeeee;
}

#linkBox a em {
   color: #333;
   display: block;
   font: normal 82.5% "Georgia", Times New Roman, Times, serif;
   line-height: 182.5%;
}

#linkBox a span {
   color: #006AFF;
   font: normal 82.5% "Georgia", Times New Roman, Times, serif;
   line-height: 150%;
}

Setting blog anda "Blog ini Sedang dalam tahap Maintenance (Under Construction) !"

Posted by Yoh Asakura | Comments : 18

Category : Labels: Blog Stuff, Desain, Template, Tips Trik, Widget

Suatu saat anda mungkin akan menemui kebosanan akan template, widget, ataupun yang lainnya yang ada dalam blog anda. Nah, bila hal ini terjadi pada anda, mungkin anda akan langsung saja mengganti template (misalnya) dan menggantinya dengan yang baru. Ini tentu akan menjadikan blog anda menjadi terlihat amburadul dan pembaca akan merasa risih tentunya karena blog anda sedang dalam keadaan kacau. Jadi sekalian saja dibuat mati suri, daripada malah membuat tidak nyaman pembaca.

Nah, untuk itu daripada blog anda menjadi kacau pada saat maintenance, selayaknya anda membuat anda berpenampilan "Under Construction Page" pada saat anda melakukan maintenance.

Dengan trick ini, anda memang akan menutup website anda untuk sementara. Dan yang akan dimunculkan nantinya hanyalah peringatan bahwa blog anda sedang dalam maintenance.

Langsung saja ke tricknya.

1. Pertama, tentu anda harus masuk kedalam akun blogger anda ► Pilih Layout ► Edit HTML
2.Cari kode dibawah ini. Untuk mempermudah, anda dapat menggunakan tombol (ctrl + F)

</head>

3. Setelah ketemu, Copy-paste kode dibawah ini di atas kode tersebut diatas.

<link rel="stylesheet" type="text/css" href="http://oemar.googlecode.com/files/leightbox.css"/>
<script type="text/javascript" src="http://oemar.googlecode.com/files/prototype.js"></script>
<script type="text/javascript" src="http://oemar.googlecode.com/files/leightbox.js"></script>

4. Simpan template anda dulu.

5. Setelah itu tuju Page Element dan klik add gadget HTML/Javascript.
6. Copy-paste kode dibawah ini widget HTML/Javascript.

<div id="pop01" class="leightbox">
<div class="scrollbox">
<center><h1>Welcome To My Blog</h1>
<p>A blog by <a href="http://lembar-coretan.blogspot.com">Lembar Coretan</a></p>
<p>This Page Is Under Construction</p>
<p>Sorry For The Inconvenience</p>
<p>Come Back Within An Hour :)</p></center>

<--- Di sini bisa ditambahkan juga script/kode/tulisan/kode gambar yang ingin anda masukkan dalam ucapan Under Construction anda. --->

</div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

7. Setelah itu SAVE template anda.

Dan anda siap untuk maintenance blog anda dengan tenang.

Untuk kustomisasi style lebih lanjut, sebaiknya anda edit kode css berikut ini dan upload ke server hosting anda sendiri.

http://oemar.googlecode.com/files/leightbox.css

Demo Page Special thanks to BloggerStop

NOTE :

Tentu saja pada saat maintenance, jangan sampai menghapus widget yang diterangkan diatas. Agar efek tidak hilang.

Membuat Efek Kursor Bertabur Kerlap - Kerlip Bintang Jatuh

Posted by Yoh Asakura | Comments : 6

Category : Labels: Blog Tutorial, Desain, Iseng- iseng, Template

Trik ini digunakan untuk memperindah tampilan gerak dari mouse di blog anda. Setiap mouse bergerak, akan muncul butiran - butiran (kerlap - kerlip bintang) yang tentunya akan membuat blog anda terlihat fantastis. Oke langsung saja ke cara membuatnya.
Masuk ke Mode Edit HTML dari

Sign ke akun Blogger anda.
Pilih Layout /Tata Letak
Pilih Edit HTML
Cari kode </head> dan Copy -Paste kode javascript dibawah ini di atas kode tersebut.

Atau bila tidak ingin kesulitan dan takut membuat template anda menjadi berantakan setelah menambahkan kode javascript di atas, silahkan copy-paste code di bawah ini di dalam Elemen widget HTML/Javscript.

// JavaScript Document<script type='text/javascript'>
// <![CDATA[
var colour="green";
var sparkles=65;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>

Setelah Itu simpan hasil edit Template Anda.

Note :

var colour="green"; : ganti kode warna dengan kode dari warna yang anda inginkan untuk warna kerlap-kerlip bintang.

Membuat Teks Kotak Pencarian Auto Hide

Posted by Yoh Asakura | Comments : 8

Category : Labels: Blog Stuff, Blog Tutorial, Desain, Template, Tips Trik, Widget

Anda pasti pernah melihat bahkan sering kotak pencarian suatu blog. Bermacam - macam bentuk dan gaya dari mesin pencari yang menarik di mata dan akhirnya membujuk diri kita untuk melakukan pencarian walaupun awalnya hanya ingin mencoba efek yang muncul dari kotak pencarian bila melakukan pencarian. Seperti contohnya kotak pencarian milik Google (Google Custom Search), Lijit yang mempunyai efek menarik saat melakukan pencarian. Tentu ini akan menambah kesempatan bagi blog kita untuk di eksplore lebih jauh lagi. Lowh kok bisa ? bisa saja maksud penulis begini :

Kotak Pencarian dengan gaya/model/style depan menarik ► efek proses pencarian yang menarik ► Judul artikel - artikel anda menarik untuk dibaca ► Pengunjung membaca artikel dari hasil pencarian.

Memang dalam hal ini judul artikel ikut ambil bagian dalam menarik minat pengunjung untuk membaca, tapi hal itu tidak akan terjadi kan bila tidak dilakukan pencarian terebih dahulu (hehe, bisa kan ? ).

Kali ini penulis tidak akan membahas mengenai cara desain dan membuat efek proses searching kotak pencarian menjadi lebih menarik, kita akan membahas langkah awal dalam desain kotak pencarian yang tentunya sedikit menambah gaya dari kotak pencarian yang masih kaku.

Kita akan menambahkan teks kedalam kotak pencarian kita. Eits, bukan sembarang teks penunjuk kotak pencarian. Teks ini akan menghilang bila kita klik bagian dalam (arena) kotak pencarian, dan muncul lagi bila kita klik di luar area kotak pencarian. Ya, memang sudah umum tapi perlu diketahui juga, kotak pencarian jenis ini akan memudahkan pengunjung dalam pencarian sekaligus menambah sedikit gaya dalam kotak pencarian. Contohnya :

Misal ada kotak pencarian, tapi tidak ada apapun (tampilan standar, biasa saja) = Kemungkinan melakukan pencarian lebih sedikit dari yang bergaya.

Kotak pencarian dengan teks penunjuk di dalam area pencariannya, tapi teks tidak menghilang bila kita klik kotak pencarian = Membuat sedikit malas, karena kita harus menghapus dulu teks tersebut secara manual.
Kotak pencarian dengan teks auto hide (di klik di dalam hilang, di klik di luar muncul lagi) = Membuat nyaman karena kita tidak perlu menghapus teks secara manual, dan kita tahu bahwa itu kotak pencarian yang sebenarnya, bukan banner affiliasi atau iklan yang sengaja dibuat seperti kotak pencarian yang akhirnya membuat kita kesasar bila kita search di situ. Seperti banner affiliasi domain gratis Co.CC contohnya.
Kotak pencarian dengan efek - efek yang menyenangkan dan membantu = akan membuat kita nyaman dan senang.

Nah, kini kita tidak akan membahas bagaimana membuat kotak pencarian bergaya sangat dinamis, kita akan membuat yang cukup membuat nyaman saja seperti kotak pencarian pada point kedua. Dan kotak pencarian inilah yang paling umum.

Nah, bagaimana cara membuatnya. ayo kita kita mulai.

Copy -Paste saja kode di bawah ini kedalam HTML widget, bila belum mempunyai kotak pencarian.

<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' onblur='if (this.value == "") {this.value = "Ketik kata kunci dan tekan Enter";}' onfocus='if (this.value == "Ketik kata kunci dan tekan Enter") {this.value = "";}' type='text' value='Ketik kata kunci dan tekan Enter'/>
<INPUT id='searchsubmit' type='hidden' value='Search'/>
</FORM>

Atau bila sudah mempunyai tapi tidak seperti pada point kedua silahkan tambahkan kode dibawah ini di dalam kode kotak pencarian. Seperti berikut ini misalnya kotak pencarian polos.

<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' type='text' value=''/>
<INPUT id='searchsubmit' type='hidden' value='Search'/>
</FORM>

Ganti kode yang berwarna hijau dengan kode dibawah ini untuk membuat auto hide teks. Ganti teks berwarna merah dibawah ini dengan teks yang anda kehendaki.

<INPUT class='inpsearch' id='s' name='q' onblur='if (this.value == "") {this.value = "Ketik kata kunci dan tekan Enter";}' onfocus='if (this.value == "Ketik kata kunci dan tekan Enter") {this.value = "";}' type='text' value='Ketik kata kunci dan tekan Enter'/>

Setelah itu Save Template.

Selesai. Jenis kotak pencarian lain, bisa di lihat di blognya Kang Albri.

Memasang dan Kustomisasi Auto Readmore

Posted by Yoh Asakura | Comments : 8

Category : Labels: Blog Tutorial, Template, Tips Trik

Sebenarnya artikel mengenai cara memasang Auto Readmore sudah banyak sekali bertebaran didunia maya ini. Tapi, dalam rangka guna melengkapi artikel blog ini dan berhubung juga ada seorang sahabat blogger yang bertanya, akhirnya sekalian saja dech di Post. hehe.

Readmore merupakan salah satu blog hack yang lumayan digandrungi bagi pemain blog khususnya dalam platform Wordpress dan Blogspot. Dengan fungsi "Readmore" kita bisa menghemat halaman depan blog kita dengan maksud kita bisa menunjukkan banyak post dalam satu halaman depan. Lagipula penggunaan fungsi "Readmore" ini bisa mengurangi penggunaan bandwith yang besar. Karena isi artikel blog di load hanya separuh dari seluruhnya. Berbeda bila kita tidak menggunakan fungsi "Readmore", pasti blog akan tampak panjaaang turun kebawah. Walaupun mungkin sudah diatur berapa post yang akan ditampilkan dalam halaman depan, tapi kalau tulisannya panjang ya sama saja donk. ehehe :D .

Nah, lalu bagaimana cara menggunakan fungsi Readmore ?.

Pertama, kita bisa menggunakan fungsi "Jump-Break" di teks editor blogspot yang baru dengan mengklik tombol/ icon "Jump-Break" yang biasanya terletak di pojok paling kanan atas dari menu teks editor blogspot setelah anda menetapkan kursor pada akhir teks yang akan anda pakai sebagai ringkasan artikel anda.

Kedua, bisa dengan cara memasukkan kode tag  dalam mode Edit HTML pada posisi akhir/batas teks yang ingin anda tampilkan sebagai ringkasan posting anda.

Lalu, untuk kustomisasinya agar kata-kata "Readmore" nya sesuai dengan yang anda inginkan, misalnya diganti dengan kata "Baca Selanjutnya" , "Lanjutkan" bisa dengan mensetting pada widget blog post pada tab Layout (Page Element) akun blogger anda.

Untuk yang Ketiga, anda bisa menggunakan fungsi Auto-Readmore. Tentu fungsi ini belum ada pada blogspot. Maka dari itu anda perlu untuk menambahkannya sendiri. bila ingin menambahkannya, berikut caranya.

Tentu anda harus sudah login dalam akun blogger anda. Dan tuju ke halaman Layout ► Edit HTML. Jangan lupa untuk mencentangi kotak kecil bertuliskan "Expand Widget Templates". Cari kode </head> . Copy-Paste kode dibawah ini di atas kode </head> tersebut.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Lalu, cari dan temukan kode <data:post.body/> . Anda bisa menggunakan CTRL+F untuk mencari kode tersebut.
Kalau sudah ketemu ganti kode <data:post.body/> dengan semua kode dibawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Silahkan di simpan dahulu. :) . Sampai disini, sebenarnya anda sudah selesai, tapi agar tampilannya bisa sedikit rapi, berikut beberapa tips dan triknya.

Keterangan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi gambar dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar gambar dalam piksel)

Tips dan trik tambahan.

Hilangkan kode <data:post.title/> . Yaitu kode yang terletak di sebelah kanan Tulisan READMORE. Agar nantinya link readmore anda tidak diikuti dengan judul posting anda. Misalkan kata readmorenya "Baca Selanjutnya" lalu Judul Postingnya "Cara Membuat Blog" maka menjadi "Baca Selanjutnya Cara Membuat Blog". Maka, bila judul posting anda panjang, maka link readmore anda akan menjadi panjang juga. Jadi, lebih baik dihilangkan saja.
Ganti Tulisan READMORE dengan kata yang anda inginkan.
Ganti kode left dalam kode <span class='rmlink' style='float:left'> menjadi right. Sehingga akan tempak seperti ini kodenya. <span class='rmlink' style='float:right'> .Ini akan membuat link READMORE anda berada disebelah kanan bawah post.
Atau bila anda ingin menggunakan gambar sebagai link READMORE, ganti kata READMORE dalam kode di atas dengan kode berikut,

Gantii URL gambar yang dipakai, misal http://i792.photobucket.com/albums/yy204/shamanking96/12-mini-allblogtools.jpg dengan URL gambar yang anda inginkan.

Untuk diperhatikan, gambar pertama dalam posting lah yang akan digunakan sebagai gambar pembuka dan sebagai ikon sebuah posting (artikel) anda.

Save template anda. Bila ada yang belum atau kurang jelas silahkan bertanya lewat komentar. Atau bahkan dalam post atau post (artikel) ini ada yang kurang, mohon petunjuknya. Terima kasih :) .

Selamat Mencoba dan Semoga berhasil.

Script Auto-Readmore diambil dari blognya Om Agus Ramadhani .

Membuat Header Blog Penuh (Tanpa Ada Jarak)

Posted by Yoh Asakura | Comments : 26

Category : Labels: Blog Tutorial, Desain, Template, Tips Trik

Membuat Header Blog Penuh maksudnya disini yaitu, membuat header blog anda mempunyai tampilan full (penuh) sepanjang lebar blog tanpa ada jarak. Dulu ini merupakan salah satu blog hack favorit saya. Bila anda ingin mencoba silahkan ikuti langkah berikut.

Full Header

Tentunya harus login dahulu ke akun Blogger anda ► Layout ► Edit HTML.
Tidak perlu untuk mencentang kotak kecil bertuliskan Expand Widget Templates.

Cari kode seperti ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Free Template (Header)' type='Header'/>
</b:section>

</div>

Setelah itu CUT dan PASTE kode tersebut tepat di atas kode <div id='outer-wrapper'><div id='wrap2'>

Save (Simpan) template anda dan lihat hasilnya. Agar hasilnya lebih indah, anda perlu untuk mengedit ulang gambar pada header anda (bila anda menggunakan gambar sebagai header).

Semoga berhasil. :)

Menambahkan 3 Kolom Elemen Halaman dibawah Header

Posted by Yoh Asakura | Comments : 16

Category : Labels: Blog Tutorial, Desain, Template, Tips Trik

Menambahkan kolom dibawah header. Sebenarnya mudah untuk dilakukan. Menambahkan elemen halaman dibawah header mungkin berguna bagi anda yang sudah kehabisan tempat untuk menaruh widget-widget ataupun yang lainnya.

Masuk ke blog anda ► Layout ► Edit HTML.
Jangan lupa untuk membackup template blog anda. Ini penting untuk mengembalikan settingan blog anda sebelumnya bila terjadi kesalahan dalam proses nantinya dengan mengklik Download Full Templates .
Tidak perlu untuk mencentang kotak kecil bertuliskan Expand Widget Templates. Karena akan semakin membuat bingung anda nantinya.

Copy kode dibawah ini

<div id='underheader-column-container'>
<div id='underheader5' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col7' preferred='yes' style='float:left;'/>
</div>
<div id='underheader6' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col8' preferred='yes' style='float:left;'/>
</div>
<div id='underheader7' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col9' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

dan paste di bawah kode untuk kolom benar - benar terletak dibawah header.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Free Template (Header)' type='Header'/>
</b:section>
</div>

Lalu copy-paste kode dibawah ini diatas kode ]]></b:skin> atau dalam tag CSS anda.

#underheader-column-container {
clear:both;
}
.underheader-column {
padding: 10px;
}

Kode tersebut berguna untuk mengatur tampilan atau style dari kolom anda nantinya.

Save Templates. Selesai

Selamat mencoba. Semoga berhasil. :D

Note :
Besar kolom dalam jumlah besar dalam percent (%) kadang tidak selalu pas dengan lebar template bila dilihat di beberapa monitor dengan resolusi berbeda. Sebaiknya diganti dengan pixel (px).

Kustomisasi Title (Judul) Sidebar Blogger

Posted by Yoh Asakura | Comments : 7

Category : Labels: Blog Tutorial, Desain, Template, Tips Trik

Sidebar pada blog biasanya adalah tempat mangkalnya berbagai macam widget-widget yang ikut meramaikan tampilan dan menambahkan fleksibilitas dan fungsionalitas suatu blog. Title pada sidebar merupakan hal yang cukup penting untuk menunjukkan dan menekankan deskripsi dari suatu widget. Sederhananya judul pada sidebar berperan dalam menjelaskan widget yang terkandung (terinstal) di dalamnya. Dan tentu, juga berfungsi untuk memperindah tampilan suatu blog.

Tapi, biasanya title (judul) sidebar tampak polos sehingga terkesan judul sidebar tersebut merupakan bagian dari konten yang ada di sidebar. Apalagi ukuran dan bentuknya sama.

Nah, bagaimana caranya agar tidak tampak begitu polos dan kosong dan standar dan banyak lagi..hehe :D. Sebenarnya bila anda berniat merubah dan membuat gaya tampilan judul sidebar anda anda cukup dengan memperhatikan kode CSS blog anda dan pusatkan pada kode seperti dibawah ini.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Untuk menambahkan warna background pada judul sidebar, tambahkan kode background:#ccc;
Akan menjadi seperti begini

h2 {
background:#ccc;
.........
.........
}

Kustomisasi Title (Judul) Sidebar Blogger

Untuk menambahkan background gambar pada judul sidebar, anda tinggal mengganti atau langsung saja tambahkan kode backround:url(URL GAMBAR ANDA) seperti ini contohnya

h2 {
background:url(http://www.blogpulp.com/imagehost/images/381245101.jpg);
...........
...........
}

Pastinya, ukuran gambar harus disesuaikan dulu. Dan perlu diketahui, tips ini berdasarkan kode css template minima. Tapi saya rasa tidak akan banyak ada perbedaan untuk template lain. Karena berdasarkan template minima dan juga bila anda menggunakan template minima biasanya background pada tanggal postingan akan sama dengan bakground pada title (judul) sidebar. Jadi anda harus mengganti backgroundnya dengan bentuk dan warna background yang lain. Temukan kode dibawah ini dan ganti sesuai dengan cara sebelumnya.

h2.date-header {
background:#ffffff;

Atau bila malas dan tidak suka dengan adanya tanggal, anda bisa membuangnya dengan memberi kode visibility:hidden; dibawah kode h2.date-header {

Update :

Tentunya Kode- kode tersebut dapat ditemukan dalam lingkup Sidebar. Kode utama bisa berupa dan berbentuk sidebar-wrapper atau sidebar. Sebenarnya tergantung template yang anda gunakan masing-masing.

Membuat Related Post Cantik di Blogspot

Posted by Yoh Asakura | Comments : 51

Category : Labels: Blog Stuff, Blog Tutorial, Desain, Template, Tips Trik

Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Dengan Related Post, pageview terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah mengeksplore konten - konten yang ada dalam blog kita.

Untuk cara membuat related post ini, tentu sudah banyak yang memberikan tutorial dan trik untuk ini. Dan salah satunya bisa dengan cara :

Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QJsAPO88HQajqERiSHkNJqLtUdvmdUuhTuc8m0JKauJ6rJM4OPpuegkgwpj07VLrEgtTcEtXU4Q7VJ2b-Zw8Hcl4Lmpp-ZKsWD37RRJ6yTfgmRDVq446NwRmMbOcB8gk8-m9Bd3Bqc8/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Simpan Template anda .

Related Post anda akan tampak seperti gambar berikut.

► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.

► Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.

► Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.

Semoga berguna. :)

Horizontal Menu Navigation : Instant

Posted by Yoh Asakura | Comments : 4

Category : Labels: Blog Stuff, Blogger Stuff, Template, Tutorial

Lama tidak mengupdate blog karena ada suatu urusan di dunia nyata yang lumayan membuat pusing. Walah kok malah curhat. Cara membuat menu horizontal.

Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2bLvZrLnZ9nnYragwUv5c_pe2jrRtaUMsVC6r8Zwnkbng13He9ib6XbeTBhYT_jFqo2QOvBAtXOwTzpNYh8ELN_VhWZG_E0UaYHLlLmMdlg2-pytXzfTqFu9nrTVHipJt4f2bBZHTYtN/") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYXMzgN_bAxoOIcqHwaB9SBVev0aKy78mt4cCvcFATfcRVQI1r_Oc66oT1nmUGL4vpIyZy07nOPBVfWAXMv2qXdj3z8mhVxwxL7GIBq_HMpM5XbQP-XqWR6bPbNfmxkhbaQEtNT5MUzFQ/") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;

        }
    .menu li li {
        background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SUghjwso9POJ5Cznb7UAbv6I4dF1DofyrxhdQL2SVt1QR8xocaBMxSljrsOa9ZCXpjSHJWX9ABZpwRCNDZwhAuNqoFI_QD-rwvLIKCga_JEjR5L7_I2x7gkag3WsHDUwf-SnntLGmswA/') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;

        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0pcOv2AMsnCKt-V7pFY8711z9Gpj1exsr3tLQJkts14RfptuWmdL9hF0uSmLKkw2uq-PWq6OtWXl8Cy7sJTArrIkRC2s3RFjWO5mD8mmPeGg9CM5Ds60KS94sxVcmOnHhow9asXiL-nX/') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }

Copy kode di bawah ini :

<div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Menu 1</a>
                <ul>
                    <li><a href="#">Sub Menu 1</a></li>
                    <li><a href="#">Sub Menu 2</a></li>
                    <li><a href="#">Sub Menu 3</a></li>
                    <li><a href="#">Sub Menu 4</a></li>
               </ul>
        </li>
            <li><a href="#">Menu 2</a>
                <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                </ul>
          </li>
            <li><a href="#">About</a></li>
        </ul>
    </div>

dan paste di

<div id='outer-wrapper'><div id='wrap2'> : Jika ingin meletakkan menu tersebut di puncak template anda.

<div id='main-wrapper'> : Jika ingin diletakkan di atas halaman posting/artikel.

Atau letakkan di bawah kode/script <div id='header-wrapper'> : Jika ingin diletakkan tepat di bawah header.

Jangan lupa ganti link dan nama menu dengan keinginan anda.

Demo

Lembar Coretan

Membuat Tab View di Postingan di Blogspot

Cara Menghapus Widget Navbar Blogger Permanen

Trik Hack Dasar Blogger Template (Agar Template Lebih SEO Friendly)

Periksa Resolusi Monitor Pengunjung Blog dengan Screenresolution.Org

Bagaimana Membuat Block Hover Effect untuk Link

Setting blog anda "Blog ini Sedang dalam tahap Maintenance (Under Construction) !"

Membuat Efek Kursor Bertabur Kerlap - Kerlip Bintang Jatuh

Membuat Teks Kotak Pencarian Auto Hide

Memasang dan Kustomisasi Auto Readmore

Membuat Header Blog Penuh (Tanpa Ada Jarak)

Menambahkan 3 Kolom Elemen Halaman dibawah Header

Kustomisasi Title (Judul) Sidebar Blogger

Membuat Related Post Cantik di Blogspot

Horizontal Menu Navigation : Instant

Follow Me

My Friend

Popular Post

Subscribe Via Email

Sahabat Blogger

Buy Link Here

Traffic Rank

Backlink Massal