Cara Membuat Menu Horizontal Dropdown di Blogspot

Caranya Cukup Mudah Yaitu :

1. Masuk dulu ke akun blogger anda

2. Setelah berada di Dashboard Klik Design --> Edit HTML

3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget

4. Cari Kode ]]></b:skin> 

5. Copy-Paste Kode CSS dibawah tepat Di Atas ]]></b:skin> 

 #subnavbar {
                background: #ffffff;
                width: auto;
                height: 26px;
                color: #FFF;
                margin: 0;
                padding: 0;
    }
    #subnav {
                margin: 0;
                padding: 0;
    }
    #subnav ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li {
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
                color: #000000;
                display: block;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
                background: #888;
                color: #FFF;
                display: block;
                text-decoration: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
                background: #666;
                width: 140px;
                float: none;
                margin: 0;
                padding: 6px 10px;
                border-bottom: 1px solid #FFF;
                border-left: 1px solid #FFF;
                border-right: 1px solid #FFF;
    }
    #subnav li li a:hover, #subnav li li a:active {
                background: #888;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li {
                float: left;
                padding: 0;
    }
    #subnav li ul {
                z-index: 9999;
                position: absolute;
                left: -999em;
                height: auto;
                width: 160px;
                margin: 0;
                padding: 0;
    }
    #subnav li ul a {
                width: 140px;
    }
    #subnav li ul ul {
                margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
                left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
                left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
                position: static;
    }

6. Setelah Itu Cari Kode <b:widget id='Header1' locked='true'

Contoh :

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

 

7. Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header, Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>

 

<div id='subnavbar'>
          <ul id='subnav'>
    <span style='font-weight: bold; text-shadow: 3px 3px 3px rgb(204, 204, 204);'><li>
    <a href='#'>Home</a>
    <ul>
    <li>
    <a href='#'>HomePage</a>
    </li>           
    </ul>
    </li>
<li>
    <a href='#'>Download Movie</a>
    </li>
     <li>
    <a href='#'>Download Mp3</a>
    <ul>
    <li>
    <a href='#'>Lagu Indo.</a>
    </li>
    <li>
    <a href='#'>Religi</a>
    </li>
    <li>
    <a href='#'>Western</a>
    </li>
</ul></li>

<li>
<a href='#'>Download Software</a>
    <ul>
    <li>
    <a href='#'>Tools</a>
    </li>
    <li>
    <a href='#'>Security</a>
    </li>
    <li>
    <a href='#'>Multimedia n Desaign</a>
    </li>
<li>
    <a href='#'>Musik</a>
    </li>
<li>
    <a href='#'>Internet</a>
    </li>
<li>
    <a href='#'>Drivers</a>
    </li>
<li>
    <a href='#'>Utilities</a>
    </li>
</ul></li>

<li>
<a href='#'>Artikel n Tutorial</a>
    <ul>
    <li>
    <a href='#'>Tutorial</a>
    </li><ul>
    <li>
    <a href='#'>Blogspot</a>
    </li></ul>
    <li>
    <a href='#'>Artikel</a>
    </li>
   
<li>
    <a href='#'>Islami</a>
    </li><li>
    <a href='#'>NusantaraQ</a>
    </li><li>
    <a href='#'>Indo. News</a>
    </li></ul></li>

<li>
<a href='#'>Tv Online</a>
    <ul>
    <li>
    <a href='#'>Tv One</a>
    </li>
    <li>
    <a href='#'>Antv</a>
    </li>
    <li>
    <a href='#'>Tv Islam</a>
    </li>
<li>
    <a href='#'>Mivo.Tv</a>
    </li>
<li>
    <a href='#'>Indoweb.Tv</a>
    </li>

</ul></li>
<li>
    <a href='#'>PlayList</a>
    </li><li>
    <a href='http://www.rizkyariff.co.vu/2011/04/link-exchange.html'>Link Exchange</a>
    </li>

<li>
    <a href='http://www.rizkyariff.co.vu/2012/02/cara-membuat-menu-horizontal-dropdown.html'><b><blink>Menu</blink></b></a>
    </li></span></ul></div>

  Untuk Link Dan Titlenya Silahkan Di Edit Sendiri :D




Ganti Tanda # ( Biru ) Dengan Link Anda Sendiri

Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.

Cara Membuat Related Post Di Blog

Related post adalah bagian penting dari blog yang berfungsi memberi rujukan artikel yang mirip atau terkait dengan artikel yang di baca. dengan begitu berarti pageview blog sobat akan lebih meningkat. Satu lagi yang perlu sobat ketahui tentang kegunaan related post ( artikel terkait ) yaitu nantinya blog sobat akan kelihatan keren. lihat aja blog gue.. keren kan???  ( sombong banget ni admin ) hehehe...

Kali ini saya akan share tentang cara pasang related post blogger. Hasilnya nanti akan jadi sama seperti relatedpost di blog ini.. Bagi sobat yang tertarik silahkan ikuti tutorial berikut.

Blogger Related Post

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit html --> centang kotak expand template widget.
3. Letakkan kode berikut di atas kode ]]></b:skin>

.rbbox{border:1px solid #F2F2F2; padding:px; font-family:"Julee"; font-color:#000; background:#ffffff; border:; margin:;}
.rbbox:hover{background}

 4. Letakkan kode berikut di bawah kode <data:post.body/> ( gunakan Ctrl + F untuk memudahkan pencarian )

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:; padding:10px;height:200px; overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5. Klik save dan lihat hasilnya..

sekian posting tentang Blogger Related Post... semoga membantu

 

Merubah Warna Teks Saat Diblock Mouse

Merubah Warna Teks Saat Diblock Mouse - Lagi gencar gencarnya posting nih, kali ini saya mau share tentang mouse lagi , tapi ini berefek pada dokumen atau artikel yang kita tulis. Pada saat artikel di Block oleh mouse maka akan terjadi perubahan warna Latar (bakground) dan warna tulisan yang di Block. Demonya bisa anda praktekkan langsung disini dengan cara memblock tulisan ini . efek yang muncul adalah warna background nya menjadi hitam dan warna tulisan menjadi putih. mau tau  Cara Merubah Warna Teks Saat Diblock Mouse? ikuti langkah langkahnya gan :

[-] Masuk dulu ke Blogger.
[-] Pilih deh Rancangan - Edit Html - centang "Expand Widget Template"
[-] Lalu letakkan kode berikut diatas kode ]]></b:skin>

::selection {background:#000000; color:#ffffff}
::-moz-selection {background:#000000; color:#ffffff}
::-webkit-selection {background:#000000; color:#ffffff}

Keterangan :

Untuk kode yang berwarna Hijau adalah warna background pada saat diblock.
Untuk kode yang berwarna Merah adalah warna text pada saat diblock.

[-] Langkah terakhir adalah Save Template.


Mudah Bukan ?
Semoga Berguna ya Sobat

Tutorial Hilangkan Navbar Pada Blog

Navbar berperanan untuk memudahkan blogger kembali kepada link² tertentu. Walau bagaimanapun, beberapa pengubahsuaian yang dilakukan yang menyebabkan kehadiran navbar ini sedikit menyemakkan.:). Jadi tutorial kali ini akan menunjukkan cara untuk hilangkan navbar pada blog anda.

Antara pengubahsuaian yang menyebabkan navbar ini tidak diperlukan adalah tutorial letakkan button follow dan dashboard dalam blog.

Tutorial untuk hilangkan navbar adalah seperti berikut.
Terdapat 2 cara, anda boleh pilih mana yang bersesuaian dengan blog anda.


CARA 1:

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find ( ctrl + F), cari 'navbar'
(hasil cari biasanya samada navbar-iframe atau navbar sahaja)

3. Dari kod yang ada di bawah navbar,
Tukarkan 'display:block' kepada 'display:none'

contoh:





4. Save dan lihat hasilnya.


CARA 2:

Nota: Cara kedua digunakan jika anda tidak mempunyai 'navbar' dalam 'edit HTML' blog anda.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi find ( ctrl + F), cari kod body {


3. Copy dan paste code berikut SEBELUM code body {

#navbar-iframe {
display: none ;
}

contoh:





4. Save dan lihat hasilnya.:)

SUMBER : http://tutorialuntukblog.blogspot.com/2011/11/tutorial-hilangkan-navbar-pada-blog.html