Navigasi Menu Cantik

CANTIK? Eh, jangan seneng dulu! Cantik itu kan relatif. Hehehe... Saya mau bagi tips lagi neh... Sebenernya sama aja kayak navigasi menu, tapi yang ini dengan background, sehingga mempercantik tampilannya. Nah, contohnya seperti gambar diatas (klik gambar untuk lebih jelas). Nah, kalau tertarik, ikuti langkah berikut.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Cari kode:

]]></b:skin>

4. Lalu masukkan kode berikut diatasnya:


a. Untuk yang hijau:

/* Navigasi menu hijau */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxC0nPPY0QPc2R1bQ18nCP5blp-f5NCw0DR_6Ov_Q4KHejP380bM7ex74RrHyDsoCDuFnULYtmCMDJnANMWD39LGWZvDp9lMTyuqz1mGD798BIeHOHbwsHuT0JYyXJ7ggDNE9J8JdReGE/s320/Navbg.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVZig_AKOU2CcGBtFIxB8FR6sQwq-ZtW_rEet8n8VNswUZMzeLeA0ymKa9EqNoG1EZ9Fe3eFFowUoNDbfxBtGVzVqHnq3Bub6PsJk9NH_Lz3D74RDaeajNIUDx06BFejhjrrtiOt9PQc/s320/Navhoverbg.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

b. Untuk yang biru:

/* Navigasi menu biru */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dNVq5qWxSbldPcQ2q9Wk9a8tfb6Tl70f8RCb3vdC1e5CPrZP3Z8tdGYnDs2zZY6NV_xwt9HKuyTKlQ8aH1BmVenzasixElzko9P4bseXWWa9gKq1nNK6OOzO6ZVRlLCCaFaCpCvwlsM/s320/Navbgblue.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYQ1s9uvRDMUMkr7t4-WCwaXGqKn6AGB8-_n1qRORYU8Ilsl9SavFOGrP6yiDxA1jlTEmU026Hj5DNc6VShyphenhyphenY8lPnwLIjZZustuuZQuOhi-RQsEUCcZPeH-TB6AN3eIMoAAp2mS-n15Q/s320/Navbgbluehover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

c. Untuk yang berwarna kuning:

/* Navigasi menu kuning */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXU2BkvoIgno1xbLD6KrKQWNCNYM1SHEtkSDESM7V72fs8Cuqf5prDGPtR5OufYoWyRium5mqVJOsLqpHPIoOekmeYdu3GS7tvWIq8ltnbLL_wIMJj8mmEKceL-F6Gk8zdywaQb8t-g0/s320/Navbgyellow.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxA6qHkohNaSBUwCA3Nv_DAiCCGthqTV1HfbjiVnkI3P3cMsS3PjHZlUyvM08N5BP3WarkB4R68FkjWWJbJSg1kaA-0Ck4ILq-DOu0ozHcpTvosBy-zhD8xngxk_xaMnA_AgHSVctkNGc/s320/Navbgyellowhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

d. Untuk yang hitam:

/* navigasi menu hitam */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnTG-bv4v0Ih-LYBTDK_FYEqci2JI0-kjw7ZRzeqB9xqvJfMT9u98TfVj5Dc9dqhIdG_4vRWAA-Vj9WYBX2reoAQxwT_PR1bHj8Q_jiNoIeJbLky0rVMoGkPxJsK485sE2gTa1bEVaaI/s320/Navbgblack.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXfgNbVwcWk6BTe8Mm17tddq-wGDHIooyTfZ_vWN44EkqHFLqjijdTdpN-x487WYhdZHB2OywHZW4nZZcJqccc7hbP18CQwvcXLWlzaO83bxtSOMuavLo3NxOOlbRN4fdn06qg4LYF48/s320/Navbgblackhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Cari kode yang mirip:

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

6. Masukkan kode berikut dibawahnya (untuk semua jenis).

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Ket: tanda pagar (#) adalah link. Ganti dengan URL yang diinginkan. Sedangkan yang berwarna biru adalah teks pada menu. Ganti juga dengan yang diinginkan.

7. Klik Simpan Template.

8. Coba lihat blog anda.

Selamat mencoba dan semoga berhasil.

Read More......

Navigasi Dropdown Menu

Saya pernah membahas cara membuat navigasi menu yang pernah saya buat DISINI. Tetapi, navigasi menu tersebut hanya mampu menampung sedikit link. Nah, jika kita akan menampung banyak link, gimana? Kita bisa membuat navigasi dropdown menu. Ketika sebuah menu disorot, menu lainnya akan muncul. Seperti gambar ini.

Nah, untuk contohnya, anda bisa melihatnya di http://forumparablogger.blogspot.com (sorry, bukan promosi). Oh, ya. Menu ini menggunakan javascript. Jadi, ini bisa membuat blog anda sedikit lebih lambat. Nah, jika sudah kebelet ingin memiliki navigasi dropdown ini, ikuti 10 langkah berikut dan yang kebelet pipis silahkan ke belakang dulu.

Kita mulai tutorialnya.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Ketikkan kode berikut diatasnya.

/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu,  #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}

5. Cari kode berikut.

</head>

6. Ketikkan kode berikut diatasnya.

<script>
var auahgelap = &#39;&#39;;
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == &#39;ngumpet&#39;) {
if (auahgelap != &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;ngumpet&#39;;
}
menu.className = &#39;muncul&#39;;
auahgelap = id;
} else {
menu.className = &#39;ngumpet&#39;;
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != &#39;ngumpet&#39;) {
if (auahgelap == &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;muncul&#39;;
}
menu.className = &#39;ngumpet&#39;;
auahgelap = id;
} else {
menu.className = &#39;muncul&#39;;
}
}
</script>

7. Cari kode yang mirip kode berikut.

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

8. Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>

<li><a href="#">Home</a></li>

<li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Menu 1</a>

<div class='ngumpet' id='submenu1'>

<ul>

<li><a href='#'>Separuh Jiwaku Pergi</a></li>

<li><a href='#'>Sang Mantan</a></li>

<li><a href='#'>Begadang</a></li>

<li><a href='#'>Buka Hatimu</a></li>

<li><a href='#'>Baik-baik Sayang</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Menu 2</a>

<div class='ngumpet' id='submenu2'>

<ul>

<li><a href='#'>Wali</a></li>

<li><a href='#'>Nidji</a></li>

<li><a href='#'>Letto</a></li>

<li><a href='#'>ST 12</a></li>

<li><a href='#'>Hijau Daun</a></li>

<li><a href='#'>Warteg Boyz</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Menu 3</a>

<div class='ngumpet' id='submenu3'>

<ul>

<li><a href='#'>Kang Rohman</a></li>

<li><a href='#'>O-OM</a></li>

<li><a href='#'>Mas Doyok</a></li>

<li><a href='#'>Anangku</a></li>

<li><a href='#'>Cebong Ipiet</a></li>

<li><a href='#'>Beben</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Menu 4</a>

<div class='ngumpet' id='submenu4'>

<ul>

<li><a href='#'>Amerika</a></li>

<li><a href='#'>Indonesia</a></li>

<li><a href='#'>Australia</a></li>

<li><a href='#'>Inggris</a></li>

<li><a href='#'>Italia</a></li>

<li><a href='#'>Prancis</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu5&quot;)' onmouseover='umpetpetak(&quot;submenu5&quot;)'><a href='#'>Menu 5</a>

<div class='ngumpet' id='submenu5'>

<ul>

<li><a href='#'>Wayne Rooney</a></li>

<li><a href='#'>Didier Drogba</a></li>

<li><a href='#'>Christiano Ronaldo</a></li>

<li><a href='#'>Del Piero</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu6&quot;)' onmouseover='umpetpetak(&quot;submenu6&quot;)'><a href='#'>Menu 6</a>

<div class='ngumpet' id='submenu6'>

<ul>

<li><a href='#'>Afgan</a></li>

<li><a href='#'>Vidi Aldiano</a></li>

<li><a href='#'>Derby Romero</a></li>

<li><a href='#'>Agnes Monica</a></li>

<li><a href='#'>Sherina</a></li>

</ul>

</div>

</li>

</ul>
</div>

Ket:

• Kode Submenu1, Submenu 2, dst harus disesuaikan dengan menu yang akan tampil.
• Tanda # pada  kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
• Anda bisa menambah atau mengurangi menu diatas.

9. Lalu klik Simpan Template.

10. Lihat hasilnya.

Selamat mencoba! Apabila bingung, tanyakan dalam komentar.

Read More......

Pertimbangan dalam Mempercantik Blog: Pilih Kecantikan atau Kecepatan?

Kali ini saya tidak akan membahas tentang tutorial modifikasi template dan mempercantik blog. Tetapi postingan ini masih ada hubungannya dengan mempercantik blog.

...google hanya mengatakan akan memberi 'bonus' untuk situs dengan kecepatan yang bagus, bukan tidak mungkin suatu saat mereka akan benar-benar menjadikannya pembanding utama
Mas Doyok di SEO Tour: Periksa Speed Blog Anda...

Biasanya, kita mempercantik blog dengan menjejalkan aneka kode HTML, CSS, Javascript, Jquery, dll ke dalam template blog kita. Baik lewat menu Elemen Halaman, Edit HTML, atau kedunya. Imbasnya, blog anda menjadi lebih lambat diload. Hal ini tentu sangat menyebalkan bagi yang memiliki kecepatan internet dibawah keong... Untuk yang pake broadband connection atau yang koneksi internetnya melesat bak roket luar angkasa sih, hal itu tak menjadi masalah...

Masalahnya tidak semua orang punya koneksi internet yang melesat seperti roket luar angkasa. Kadangkala ada juga yang memiliki koneksi internet yang lelet dan lemot. Dan, bahkan, akhir-akhir ini beredar kabar bahwa Google akan memberi bonus pada blog yang memiliki waktu loading yang cepat. Nah, lalu kita harus gimana?

1. Jangan pake template yang berat.
Yup! Itu dia kuncinya. Jangan pake template yang berat... maksudnya, template yang pake banyak gambar. Karena gambar bisa membuat lemot blog anda.

2. Jangan kebanyakan widget/javascript.
Widget dan javascript bisa membuat blog anda berat. Maka, sebaiknya, widget dan javascript di blog anda dikurangi.

3. Kompres CSS anda.
Ini juga bisa dijadikan cara mempercepat loading blog. Ada banyak tool kompressor di dunia ayam, seperti http://www.csscompressor.com/ dan masih banyak lagi.

Anda tidak harus menghilangkan Javascript di blog anda, namun anda bisa menguranginya. Dan, jangan terlalu banyak widget di blog anda, karena bisa membuat blog anda lama diloadingnya, dan, apabila pengunjung blog tidak sabar, mereka bisa saja tidak jadi berkunjung ke blog kita, dan akhirnya kita bisa kehilangan pengunjung blog kita. Seperti lagu yang dinyanyikan oleh Firman:

Sejujurnya, ku tak bisa, hidup tanpa ada kamu aku gila... Seandainya, kamu bisa, mengulang kembali lagi cinta kita... Takkan kusia-siakan kamu lagi...

Read More......

Related Posts Style

Assalamualaikum. Bersama Muhammad Rizki Fadillah seperti biasa kita akan membahas seputar modifikasi template. Anda tentu tahu related posts. Related posts digunakan untuk menampilkan postingan yang berkaitan dengan artikel yang sedang dibuka. Related posts bisa membuat pengunjung blog betah dengan membuat mereka penasaran dengan postingan di blog anda. Cara membuat related posts pernah dibuat oleh Mas Doyok. Nah, kali ini kita juga akan membuat related posts, namun dengan style yang lebih aduhai. Seperti ini.

Indahnya, indahnya, aduhai... Manisnya, manisnya, aduhai... Saat-saat memadu cinta, saat-saat yang paling indah... Kata-kata bak mutiara, kata-kata dalam bercinta...

Waduh, kok jadi nyanyi sih? Okelah kalo begitu, okelah kalo begitu... okelah kalau begitu... okelah kalo begitu... kita mulai tutorialnya...

Ayo kita mulai.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Centang checkbox Expand Template Widget.

3. Cari kode:

]]></b:skin>

4. Taruh kode berikut diatasnya.

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;/* Jenis font. */
font-size:small;/* Ukuran font. */
color:#0080FF;/* Warna teks. */
background:#81BEF7;/* Warna latar belakang. */
clear:both;
float:left;
width:410px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) anda. */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#0080FF;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #0080FF;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:400px;/* Tinggi dari artikel terkait */
padding:10px;
}

5. Cari kode:

<p><data:post.body/></p>

6. Masukkan kode berikut dibawah kode diatas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='underpost'>
<div class='similiar'>

<div class='widget-content'>
<h2>Artikel Menarik Lainnya</h2>
<div id='artikel-terkait'>
<div id='relposts'/><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;relposts&#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>

</div>
</div>
</b:if>

7. Klik Simpan Template.

Silakan lihat blog anda. kini pada postingan anda sudah ada artikel terkait yang berkaitan dengan artikel yang sedang dibuka pengunjung.

Selamat mencoba!

Read More......

Cara Membuat Submenu pada Navigasi

Assalamualaikum, sob...

Setelah ngecek postingan saya di sini, saya menemukan komentar masuk. Seperti ini nih komentarnya.

"kalau untuk membuat navigasi menu horizontalnya menjadi 2 (dua) tingkat, bagaimana caranya mas?"

Mungkin maksud dari 2 tingkat itu mempunyai submenu kali, seperti punya Kang Rohman.

Lihat! Dibawah menu utama ada menu tambahan lagi untuk menampung menu-menu lainnya. Mungkin itu kali yah, maksudnya? (kalo salah tolong jelasin yang dimaksud ya...)

Untuk menampilkan menu seperti itu, gampang caranya.

1. Login dulu ke Blogger, lalu pilih menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* 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 (hover) */
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;
}

5. Lalu cari kode yang mirip/mendekati:

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

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>
<div id="subnavmenu">
<ul id="subnavmenu">
<li><a href="#">Wali</a></li>
<li><a href="#">Hijau Daun</a></li>
<li><a href="#">ST 12</a></li>
<li><a href="#">Ungu</a></li>
<li><a href="#">Nidji</a></li>
<li><a href="#">Vierra</a></li>
<li><a href="#">The Dance Company</a></li>
</ul>
</div>

Jangan lupa, Ganti link diatas dengan link yang anda inginkan. Anda bisa menambah ataupun mengurangi jumlah link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya Klik Pratinjau.

8. Kalau sudah yakin, Klik Simpan Template.

Nah, sudah kejawab kan?

Semoga bermanfaat.

Read More......

Cara Membuat Navigasi Menu

Awas ada Rizki... Prikitiw... Assalamualaikum. Kembali lagi bersama saya, seperti binasa biasa, kita akan membahas tentang Modifikasi Template. Oh, iya. Untuk melihat semua posting yang dibuat oleh saya, klik aja DISINI. Ok, kita langsung saja beralih ke topik.

Navigasi adalah sebuah tool yang berguna untuk membantu pengunjung menjelajahi isi situs web. Nah, navigasi yang kali ini akan kita buat TIDAK menggunakan gambar. Hanya sekedar teknik CSS biasa sehingga tidak terlalu memberatkan loading blog. Contohnya seperti gambar dibawah.

Nah, tertarik nggak membuatnya? Kalau iya, lakukan langkah-langkah berikut.

1. Login dulu ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Silakan backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81F781; /* 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:#088A08; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Lalu cari kode yang mirip/mendekati:

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

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>

Ket: Ganti teks dan link diatas dengan teks dan link yang diinginkan. Anda bisa menambah ataupun mengurangi jumlah teks dan link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya pratinjau dulu. Klik Pratinjau

8. Kalau sudah yakin, simpan template anda. Klik Simpan Template.

Selamat mencoba. Semoga artikel ini bermanfaat.

Read More......

Mengatur Style Bullet Unorderer List (UL)

Bullet biasa digunakan untuk menjelaskan informasi yang berbutir. Biasanya bullet ini berbentuk bulat. Namun, anda bisa mengubahnya menjadi gambar seperti gambar dibawah.

Pertama-tama, bikin dulu gambarnya. Tak perlu besar-besar karena gambarnya adalah gambar untuk daftar berbutir (bullet). Sekitar 20 piksel x 20 piksel saja cukup. Kalau sudah, upload gambar tersebut ke image hosting. Lalu, kita mulai tutorialnya.

Ayo kita mulai.

1. Kita login ke Blogger terlebih dahulu. Lalu, klik menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Diatasnya, ketikkan kode berikut.

/* Unordered list style */
.post ul{
list-style-type:none;
margin:10px 5px 10px 0px;
}
.post ul li{
background: url(URLGAMBARANDA)no-repeat;
padding:0px 0px 5px 25px;
}

Ganti tulisan URLGAMBARANDA dengan URL alamat gambar anda. Lalu, anda juga bisa mengatur paddingnya. Cukup ganti yang berwarna merah dengan jarak sela (padding) yang diinginkan supaya gambarnya klop dengan teksnya. Yang lainnya tidak perlu diganti.
5. Lalu klik tombol Simpan Template.

Akhir kata, semoga tutorial ini bermanfaat.

Read More......

Cara Membuat Ikon pada Setiap Judul Postingan

Ini adalah posting kedua Muhammad Rizki Fadillah di blog Mas Doyok. Nah, kali ini saya akan membahas cara membuat judul blog memiliki ikon disampingnya. Seperti gambar dibawah.

Gimana? Mantep to? Ayo, mau ke mana? (Waduh, kok jadi nyambung ke Mbah Surip ya?)

Penasaran gimana cara membuatnya? Jika iya, ikuti langkah berikut.

1. Seperti binasa biasa, kita login ke Blogger, lalu tujulah menu Tata Letak > Edit HTML.

2. Lalu, untuk mencegah hal-hal yang tidak diinginkan, seperti rusaknya template, silakan backup dulu templatenya.

3. Cari kode yang mirip-mirip dengan kode berikut.

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

Ket: Tidak semuanya berkode seperti diatas. Ada beberapa yang menggunakan tag h2 atau h1. Makanya saya bilang cari yang mirip-mirip dengan kode diatas.

4. Lalu ketikkan kode berikut sebelum kode tutup kurung kurawal (}).

background:url(URLGAMBARANDA)no-repeat left;

Sehingga menjadi:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:url(URLGAMBARANDA)no-repeat left;
}

5. Lalu atur padding (jarak sela) supaya jarak antara teks dan ikon menjadi pas. Misalnya ubah kode padding:0 0 4px; menjadi:

padding:0 0 4px 50px;

Ket:

• Yang diwarnai dengan warna merah adalah padding atas.
• Yang diwarnai dengan warna biru adalah padding kanan.
• Yang diwarnai dengan warna ungu adalah padding bawah.
• Yang diwarnai dengan warna hijau adalah padding kiri.

Aturlah padding supaya tampilannya klop antara judul posting dengan ikon. Supaya anda yakin, sebaiknya pratinjau dulu dengan mengeklik Pratinjau.

 

6. Kalau sudah yakin, klik Simpan Template.

7. Selesai.

Itu dia langkah-langkah untuk membuat ikon pada judul postingan. Selamat mencoba dan semoga bermanfaat.

Read More......

Cara Modifikasi Judul Posting dan Judul Sidebar

Assalamualaikum... Ini pertama kalinya Muhammad Rizki Fadillah ngeblog di blognya Mas Doyok. Sebuah kehormatan besar tentunya untuk saya seorang newbie menulis menjadi guest blogger di blognya master.

Udah ah... kebanyakan basa-basi jadi garing deh... Langsung saja ya kita mulai tutorialnya.

Judul blog dan judul sidebar dapat diganti. Untuk pemula, anda bisa memulainya dari menu Tata Letak > Font dan Warna. sedangkan yang sudah mahir, anda bisa menuju Tata Letak > Edit HTML.

Untuk pemula, pertama-tama buka dulu menu Font dan Warna.

Lalu, ada bisa mengubah beberapa elemen. Seperti warna dan font judul blog/judul sidebar.

• Untuk mengubah warna judul posting, klik pada bagian Warna Judul Posting, lalu ubah dengan warna yang diinginkan.
• Untuk mengubah warna judul sidebar, klik pada bagian Warna Judul Sidebar, lalu ubah dengan warna yang diinginkan.
• Untuk mengubah font judul sidebar, klik bagian Font Judul Sidebar lalu utak atik sesuai keinginan.

Kalau sudah klik Simpan Perubahan.

Untuk yang mahir, bukalah menu Edit HTML dan silakan backp dulu templatenya. Kalau sudah, cari kode:

1. Untuk judul posting, cari kode yang mirip:

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

2. Untuk judul sidebar, cari kode yang mirip:

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

Lalu editlah sesuai keinginan. Misalnya anda ingin menambahkan background pada judul postingan, maka kodenya menjadi:

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

Ket: kode background:#000000; adalah kode yang ditambahkan. Ganti #000000 dengan warna yang diinginkan. O, ya. Atau anda juga bisa membuat garis batas dibawah judul sidebar, maka kodenya menjadi:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
border: 1px solid #00FF00;
}

Ket: Kode border: 1px solid #00FF00; adalah kode yang ditambahkan. Ganti #00FF00 dengan warna yang diinginkan. Anda juga bisa membuat variasi lain, seperti menambahkan background berupa gambar, membuat huruf judul postingan membesar ketika mouse melintasinya, atau berbagai variasi lain sesuai dengan keinginan dan kreatifitas anda.

Kalau sudah klik Simpan Template.

Akhir kata, semoga bermanfaat.

Read More......