Cara Membuat Menu Navigasi Horizontal Di Blog

Selamat Pagi Sobat..
Sebelum berangkat ke sekolah, saya menyempatkan diri untuk memposting Cara Membuat Menu Navigasi Horizontal Di Blog, pasti semua sudah pada tau apa itu menu navigasi, tak heran, karena sudah banyak yang memposting nya.. :D
tapi ada yang berbeda pada postingan saya disini, yaitu cara pengeditan HTML nya,
Menu ini baru saja saya modifikasi di blog saya.. :D
Dan akhirnya berhasil juga saya edit.. :P

Jika sobat merasa tertarik dengan menu navigasi di atas, silahkan baca sampai dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di dapat bisa berbeda dengan contoh diatas karena faktor desain template yang berbeda-beda, oleh kerena itu ada kemungkinan sobat harus sedikit merubah kode yang saya berikan agar cocok dengan template sobat.

Silahkan sobat ikuti cara dibawah ini

Sebelum nya sobat simpan dulu gambar nya,

http://i1231.photobucket.com/albums/ee519/noochii/headermenu.png

http://i1231.photobucket.com/albums/ee519/noochii/tableft6.png

http://i1231.photobucket.com/albums/ee519/noochii/tabright6.png

Kemudian Simpan Gambar nya ke imagehosting yang biasa sobat gunakan contohnya www.Photobucket.com

Sebenarnya sobat boleh menggunakan 3 gambar diatas, karena saya takut tidak sengaja menghapusnya, jadi sebaiknya sobat menggunakan alamat sobat sendiri. biar lebih aman.. :D

Berikut adalah cara" penginstallan nya

Pertama
Login dulu ke account blogger sobat
Klik menu Design/Rancangan
Kemudian klik tab Edit HTML
Jangan Lupa di centang dahulu Expand Widgetnya
Cari code ]]></b:skin>  Dan pastekan code dibawah ini, Diatas code ]]></b:skin>

/* Menu */
#tabs6 {
float:left;width:100%;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/headermenu.png") no-repeat center top;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}

#tabs6 ul {
margin:0;padding:10px 10px 0 5px;
list-style:none;
}

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

#tabs6 a {
float:left;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/tableft6.png") no-repeat left top;
margin:0;padding:0 0 0 4px;text-decoration:none;
}

#tabs6 a span {
float:left;display:block;background:url("http://i1231.photobucket.com/albums/ee519/noochii/tabright6.png") no-repeat right top;
padding:5px 15px 4px 6px;
color:#fff;
font-weight:bold;
}

/* Commented backslah Hack hides rule from IE5-Mac \*/

#tabs6 a span {
float:none;
}
/* End IE5-Mac hack */

#tabs6 a:hover span {
color:#C2FB77;
}

#tabs6 a:hover {
background-position:0% -42px;
}

#tabs6 a:hover span {
background-position:100% -42px;
}

#tabs6 #current a {
background-position:0% -42px;
}

#tabs6 #current a span {
background-position:100% -42px;
}

Setelah sudah, cari code <div id='content-wrapper'>
Paste lagi code dibawah ini di bawah code <div id='content-wrapper'>

<div id='tabs6'>
<ul>

<!-- Silahkan ganti tanda pagar (#) dengan link milik anda -->

<li id='current'><a href='/' title='Home'><span>Home</span></a></li>
<li><a href='http://www.facebook.com/noochii' target='_blank' title='About Me'><span>About Me</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' target='_blank' title='Edit'><span>Edit</span></a></li>
</ul>
</div><!-- #tabs6 end -->

Setelah sudah semuanya, save template sobat..
akhirnya selesai juga postingan nya, huh
waktunya mandi dan siap-siap untuk berangkat sekolah.. :)

Readmore Cara Membuat Menu Navigasi Horizontal Di Blog

Cara Membuat Recent Comment di Blog

Alhamdulillah.
Setelah mencari" kemana mana akhirnya saya dapet juga nih yang pass. Cara Membuat Recent Comment di Blog, Terima kasih banyak buat blog Antigaptek.com yang telah share ilmunya.. :)
Cara membuat recent comment di blog ini maksudnya adalah menampilkan komentar baru yang ada di blog kita, Selain mempermudahkan saya melihat comment terbaru dari pengunjung. ini juga berguna untuk menarik perhatian pengunjung untuk masuk ke artikel yang sudah di komentari pengunjung lainnya,

Nah..sekarang langsung aja kita coba..
Cara nya sangat mudah..

• Setelah masuk ke akun Blogger sobat..
• Sobat klik Design/Rancangan 
• Pilih Page Element 
• Lalu Add Gadget
• Pilih  Javascript/HTML
• Kemudian copy paste code dibawah ini

<script style="text/javascript" src="http://antigaptek.googlecode.com/files/recentcomment.js"> </script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://nidyasoftware.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

jika sudah.. tinggal di save aja.. dan sobat lihat hasilnya.. :)
Jika ada yang perlu ditanyakan.. tanyakan lah di kotak komentar.. :P

Readmore Cara Membuat Recent Comment di Blog

Cara Membuat Menu Tab View Di Blog

Selamat sore sobat..
Selamat datang di blog baru saya.. :)
kali ini saya akan share tentang Cara Membuat Menu Tab View Di blog..
seperti yang sobat lihat di blog saya. tepat nya di sebelah kanan, menu tab view ini sangat bermanfaat untuk ukuran blog sobat yang kecil. atau sudah kepenuhan dengan widget,

Sekarang langsung aja Kita mulai Cara pemasangan nya..
Pertama.

• Pastinya harus Login dulu ke blogger.com
• Setelah Login, sobat klik Menu Design/Rancangan
• Lalu Klik Edit html
• Jangan lupa expand widget nya di centang/di klik
• Setelah itu,cari code ]]></b:skin>
• Lalu copy dan pastekan code dibawah ini sebelum code ]]></b:skin>

div.TabView div.Tabs {
width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 330px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }

Keterangan :

• Kode berwarna hijau
  adalah ukuran Tab-view, rekomendasi: usahakan ukuran width yang berwarna hijau sama.
• Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
• Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.

 Kalau sudah di copy semua. lanjut lagi copy code nya.. kali ini paste code nya di atas code </head>

<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

• Masih Lanjut nih copy" an nya..
• Tapi sekarang di page element
• Sebelum ke page element
• Simpan dulu template sobat.. 
• Setelah di simpan..
• Klik page element nya
• lalu klik add widget
• Pilih javascript/HTML
• Lalu copy paste kan code dibawah ini

<div class="TabView" id="TabView">
<div class="Tabs">

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages">
<div class="Page">
<div class="Pad">



<ul>

<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>



</div>
</div>





<div class="Page">

<div class="Pad">



Kamu bisa memasukkan script<br />

Kamu bisa memasukkan image<br />

Kamu bisa memasukkan numbered list/bullent list/<br />

Apalagi memasukkan teks atau link jelas bisa/<br />



</div>
</div>





<div class="Page">
<div class="Pad">



View 3.1<br />

View 3.2<br />

View 3.3<br />



</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

nahh..akhirnya selesai juga..
sekarang tinggal lihat blog sobat deh..
selamat mencoba.. :)
jika ada yang kesulitan. silahkan sobat tanya di komentar. :)

Readmore Cara Membuat Menu Tab View Di Blog

Cara Membuat Guest Book Melayang

Kalau sebelumnya saya memposting tentang cara Membuat guest book/buku tamu di Blog Kali ini saya akan Membuat Guestbook nya melayang, (bukan sihir loh ..:D)

bagi sobat yang sudah punya shoutmix /Guestbook . tinggal mengikuti saja langkah yang saya berikan dibawah,
tapi jika sobat belum punya guestbook masuk saja kesini Klik Disini
Disana dijelaskan cara mendapatkan guestbook

okeh,, langsung aja kita mulai,

Langkah Pertama,
1.pastinya harus masuk dulu ke Blog sobat,

2.Klik design - Page Element - Add a Gadget - Pilih Html/javascript

3.copy code dibawah ini..

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1231.photobucket.com/albums/ee519/noochii/animasi.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#00000;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>


<div id="gb">


<div class="gbtab" onclick="showHideGB()"> </div>


<div class="gbcontent">
<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="noochii" src="http://www.shoutmix.com/?noochii" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?noochii">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Catatan : Tulisan yang berwarna Hijau ganti dengan code shotmix sobat


Selamat Mencoba .:D

Readmore Cara Membuat Guest Book Melayang