Showing posts with label TUTORIAL BLOG. Show all posts
Showing posts with label TUTORIAL BLOG. Show all posts

Monday, July 18, 2011

Cara membuat related post - Artikel terkait dibawah posting

Cara membuat related post - Artikel terkait dibawah posting

membuat related post - artikel terkait dibawah posting.

Setelah membuat related post atau artikel terkait di side bar blog seperti yang kita bahas sebelumnya, pada panduan dan tutorial gratis kali ini kita akan belajar membuat related post atau artikel terkait yang di letakan pada bagian bawah halaman blog kita di blogspot.

Sebenarnya penempatan artikel terkait atau related post sama saja baik di bagian bawah halaman maupun di bagian side bar blog. Hal ini tergantung
selera Anda mana yang lebih bagus kelihatannya.

Baiklah, sekarang langsung saja ikuti panduan dan tutorial cara membuat related post atau artikel terkait di bawah halaman posting berikut ini:

1. Login menggunakan Username dan Password google account atau gmail Anda di www.blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup)

4. Cari kode ini
<data:post.body/>

5. Letakkan script code berikut ini di bawah kode diatas (lihat kode di nomor 4):


<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Save Template, lihat hasilnya.

Selamat mencoba dan semoga berhasil.
Terimakasih atas waktu dan kunjungan Anda untuk membaca artikel Cara membuat related post - Artikel terkait dibawah posting - Silakan berikan komentar mengenai artikel Cara membuat related post - Artikel terkait dibawah posting ini karena komentar Anda sangat berarti demi perkembangan blog ini kedepannya.
Baca Kelanjutannya...... - Cara membuat related post - Artikel terkait dibawah posting Bagikan

auto read more


(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untukversi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.


Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head>kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:


<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>

Masih pada halaman EDIT HTMLBeri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, 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 == &quot;item&quot;'><data:post.body/></b:if>

 
silahkan disimpan dan lihat hasilnya :)

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 dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)
Baca Kelanjutannya...... - auto read more Bagikan

Saturday, July 9, 2011

PANDAUAN MEMBUAT BLOG

1. Apa itu Blog ?

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama.
Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.
Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3.

Baca Kelanjutannya...... - PANDAUAN MEMBUAT BLOG Bagikan

KODE WARNA HTML

KODE WARNA HTML Contoh:Putih =>#ffffff;
postingan kali ini memebicarakan kode warna yang sering kita temui saat kita men edit Templete atau widged yang ada di blog kita....
Baca Kelanjutannya...... - KODE WARNA HTML Bagikan

Friday, July 8, 2011

Cara membuat link di Blogspot

 Untuk mengetahuai tanda tautan ini biasanya tanda mouse pointer/cursor "tanda panah" anda akan berubah menjadi tangan menunjuk atau di sebut Pointer/corsor "hand".





Nah, cara membuat link/tautan di posting blogspot it's easy. Tautan di gunakan dalam posting guna untuk mengelink ke situs atau blog yang lain. Caranya tinggal di klik saja tautan itu maka kita akan pergi ke halaman web atau blog baru yang di tautkan tersebut.


Come on follow me...

Masuk ke Account Bllogger, Klik ENTRI BARU--- Tulis Judul Posting--- dan Mulai Posting.


Baca Kelanjutannya...... - Cara membuat link di Blogspot Bagikan

TUTORIAL BLOG


Diposkan oleh bElajardotcom
Naaaahhhhhhhhhhhhhhhhh... ini cara ketiga...hehehehheh...masih banyak lo cara membuat menu dan sub menu blog kita, tergantung TEMPLETE yang kita guanakan,,,,,.......

1. Login ke blogspot.com

2. Klik Rancangan (Tata Letak)

3. Klik Edit HTML
4 Cari kode ]]></b:skin> 
5. Letakkan kode dibawah ini,  diatas kode no 4 tadi


/* ----- NAVBAR MENU ----- */

#NavbarMenu {



width: 875px;

height: 35px;

background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

color: #ffffff

margin: 0 auto 0;

padding: 0;

font: bold 11px Arial, Tahoma, Verdana;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

}

#NavbarMenuleft {

width: 680px;

float: left;

margin: 0;

padding: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #ffffff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover, #nav li a:active {

background:#FF6600;

color: #ffffff;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

width: 150px;

color: #ffffff;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font: normal 14px Georgia, Times New Roman;

}



#nav li li a:hover, #nav li li a:active {

background: #FF6600;

color: #ffffff;

padding: 7px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

 6. Kemudian cari kode ini:
</b:section>
</div>

7. Letakkan kode dibawah ini di bawah kode no 6 tadi
 
<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>


<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>

</li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>
</li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>
</li>

<li><a href='http://www.zizinrahma.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>

</div>



</div> <!-- end navbar -->

Keterangan:
 => www.zizinrahma.blogspot.com diganti dengan alamat blog anda
=> Nama Label diganti dengan nama label pilihan anda yang ada di blog anda
=> Judul Menu diganti dengan judul menu yang anda inginkan


8. Simpan

Nah, langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog anda. Seperti biasa anda perlu login ke www.blogger.com dan langsung menuju ke Edit HTML. Jangan lupa back-up dulu template anda. Setelah itu ikutilah langkah-langkah di bawah ini:
1.     Carilah kode ]]></b:skin>
2.     Setelah menemukan kode di atas, letakkan kode di bawah ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu navigasi, rubahlah nilai px agar sesuai dengan lebar blog anda.
#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
3.     Sebelum melanjutkan ke langkah berikutnya, anda perlu menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan anda ingin memasangnya di atas header, maka anda harus mencari kode <div id='header-wrapper'>
4.     Lalu letakkan kode di bawah ini persis di atas kode tadi
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>
<li><a href='#'>Blogger Template</a>
<ul>
        <li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>
        <li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>
        <li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>
<li><a href='#'>Blogging Trick</a> </li>
<li><a href='#'>Forum</a>
<ul>
       <li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
       <li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>
       <li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
      <li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>
</ul> </li> </ul>
</div> </div>
5.     Sekarang anda perlu mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merahadalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home. Anda menginginkan apabila menu ini diklik maka akan membawa anda kepada halaman utama dari blog anda, maka dari itu rubahlah url-linknya dengan url blog anda. Berikutnya, menu Blogger Template. Anda ingin apabila menu ini diklik maka akan membawa atau menampilkan posting-posting yang mempunyai label blogger template. Maka, rubahlah linknya menjadihttp://namabloganda.blogspot.com/search/label/blogger template.
6.     Anda bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya anda pun bisa menghilangkan menu dan sub-menu yang tidak anda inginkan dengan menghapus kode di atas yang tidak diinginkan.
7.     Setelah itu jangan lupa untuk menyimpan pekerjaan anda dan lihatlah hasilnya di blog anda.
8.     Jika anda berhasil, tentunya blog anda akan terlihat lebih menarik.
9.   Dan jangan lupa kasih komentar disini yaaaa


SELAMAT
Baca Kelanjutannya...... - TUTORIAL BLOG Bagikan

Cara membuat Menu dan Sub Menu I




setelah kemarin mencoba mengutak-atik template khususnya didaerah navigasinya, ternyata berhasil juga dan disini akan saya share kembaliCara Membuat Menu Navigasi Beserta SubMenuSini yang saya dapat dari blogmas doyok.Semoga bermanfaat dan membantu anda yang lagi belajar mengutak-atik blog seperti saya.


Menu Navigasi ataupun SubMenu
ini sangat bermanfaat sekali buat blog anda karena pengunjung akan mudah sekali mengakses semua informasi yang mereka perlukan dari blog anda. Dengan kemudahan2 yang diberikan anda tersebut blog anda akan banyak yang menyukainya apalagi dibarengi dengan konten yang selalu fresh dan menarik.
Berikut tutorial untuk membuat

Cara Membuat Menu Navigasi Beserta SubMenu:
  • Login keBlogger.com
  • KemudianTata Letak
  • PilihEdit HTML
  • CentangExpand Widget
  • Copas kode berikut di atas kode]]></b:skin>

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}
  • Silahkan anda modifikasi sendiriukurandanwarnanya, untuk kode warna (Baca:Kode Warna HTML)
  • Setelah itu, Cari kode yang seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='undefinedJudul Blog Anda) undefinedHeader)' type='Header'/>
</b:section>
</div>
  • Setiap template memiliki kode yang berbeda, jadi cari kode yang mirip dengan diatas.
  • Kalau sudah ketemu, Copas kode berikut dibawah kode diatas.

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='
/'>Home</a></li>
<li><a href='
http://rasiqzonetwork.blogspot.com'>Blogger Tips</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Tricks</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Widgets</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Tools</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger News</a></li>
</ul>
</div>
<div id='subnavmenu'>
<ul id='subnavmenu'>
<li><a href='
http://twitter.com/rasiqzone'>Follow me on Twitter</a></li>
<li><a href='http://facebook.com/rafelzone'>Add me on Facebook</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>About Me</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Contact Me</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Archieves</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Monetise Blog</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Get Free News</a></li>
</ul>
</div>

Baca Kelanjutannya...... - Cara membuat Menu dan Sub Menu I Bagikan

Followers

MS OFFICE

renungan

TUTORIAL BLOG

YOEN`S

Total Pageviews

Blog Archive

 

Copyright © 2009 by belajardotcom

Template by Blogger Templates | Powered by Blogger