Cara Membuat Menu di Blog, Dijamin Bisa!

Kali ini Rafif Blog's akan membagikan Trik tentang Cara Membuat Menu di Blog, Dijamin Bisa! . Sekarang ini menu blog sangat dibutuhkan untuk blog yang kita miliki, karena ini menambah kemudahan bagi pembaca blog kita untuk melihat konten yang sesuai dengan yang ia cari. Berikut langkah-langkah membuat menu di blog.

1. Pertama buka akun blogger anda.

2. Kemudian anda ambil menu template, dan pilih edit HTML

3. Lalu cari kode ini 

<b:skin><![CDATA[/*

    Agar lebih mudah, gunakan Ctrl + F
4. Setelah anda mendapatkan kode tersebut pasang kode ini di bawah kode tersebut

body#layout .secondary-navigationnbt {display:none;}

5.Lalu setelah itu, letakkan kode dibawah ini tepat setelah kode body#layout .secondary-navigationnbt {display:none;}

/*-[ Navigation ]-----------------*/
.secondary-navigationnbt .children li .sf-sub-indicator { display: none }
.secondary-navigationnbt {
    background: #364956;
    display: block;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: 45px;
}
.secondary-navigationnbt ul li { }
.secondary-navigationnbt a {
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    transition: all 0.25s linear;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    font-family: 'Monda', sans-serif;
}
.secondary-navigationnbt a .sub {
    font-size: 11px;
    font-weight: normal;
    color: #9B9B9B;
}
.sf-js-enabled li a.sf-with-ul { }
.sf-js-enabled li  ul.sf-with-ul { padding-right: 20px }
#navigationnbt .sf-sub-indicator {
    display: block;
    width: 11px;
    overflow: hidden;
    position: absolute;
    right: 7px;
    top: 0;
}
#navigationnbt {
    margin: 0 auto 0;
    font-size: 13px;
    float: left;
    width: 100%;
}
.secondary-navigationnbt a:hover {
    color: #fff;
}
#navigationnbt select { display: none }
#navigationnbt ul {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
}
#navigationnbt ul li {
    float: left;
    position: relative;
}
#navigationnbt ul .header-search { float: right }
#navigationnbt > ul > li:last-child { border-right: none }
#navigationnbt ul li a, #navigationnbt ul li a:link, #navigationnbt ul li a:visited {
    overflow: hidden;
    display: block;
}
#navigationnbt > ul > .current a {
    background: transparent;
    color: #5a5a5a !important;
}
#navigationnbt ul li li {
    background: #fff;
    width: 100%;
}
#navigationnbt ul ul {
    position: absolute;
    width: 190px;
    padding: 20px 0 0 0;
    padding-top: 0px;
    z-index: 400;
    font-size: 12px;
    color: #798189;
    border: 1px solid #ccc;
}
#navigationnbt ul ul a {
    color: #555555;
    font-weight: normal;
}
#navigationnbt ul ul li {
    padding: 0;
    background: #fff;
}
#navigationnbt ul ul a, #navigationnbt ul ul a:link, #navigationnbt ul ul a:visited {
    position: relative;
    width: 134px;
    margin-left: 8px;
    border-left: 0;
    background: transparent;
    border-right: 0;
    border-bottom: 1px solid #ccc;
}
#navigationnbt ul ul li:first-child a { }
#navigationnbt ul ul li:last-child a { border-bottom: none }
#navigationnbt ul ul {
    opacity: 0;
    left: -999em;
}
#navigationnbt ul li:hover ul {
    left: auto;
    opacity: 1;
}
#navigationnbt ul ul ul { top: -1px }
#navigationnbt li:hover ul ul, #navigationnbt li:hover ul ul ul, #navigationnbt li:hover ul ul ul ul {
    left: -999em;
    opacity: 0;
}
#navigationnbt li:hover ul, #navigationnbt li li:hover ul, #navigationnbt li li li:hover ul, #navigationnbt li li li li:hover ul {
    opacity: 1;
    left: 190px;
}
#navigationnbt ul ul:after {
    left: 10px;
    top: -5px;
}
#navigationnbt ul ul ul:after {
    border-color: transparent #282E33 transparent transparent;
    border-color: transparent rgba(14,19,22,0.92) transparent transparent;
    left: -12px;
    top: 3px;
}

6. Sekarang saatnya anda memasang tag HTMLnya. Cari kode berikut

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

7. Setelah itu letakkan kode dibawah ini tepat dibawah kode </div> yang terdapat dibawah kode <div style='clear:both;'/> 

<div class='secondary-navigationnbt'>
<nav id='navigationnbt'>
<ul class='menunbt'>

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

<li><a href='#'>lorem ipsum</a></li>

<li><a href='#'>lorem ipsum</a>
<ul class='sub-menu'>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul>
</li>

<li><a href='#'>lorem ipsum</a>
<ul class='sub-menu'>
      <li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>

</ul>
</li>

<li><a href='#'>lorem ipsum</a></li>



</ul>
</nav>
</div>

Pengaturannya adalah sebagai berikut :
 kode berwarna biru merupakan nama menu yang akan anda buat
 kode berwarna ungu merupakan link menuju halaman yang anda tuju di menu anda
 kode berwarna merah muda merupakan kode untuk nama sub menu. Sub menu ini bisa anda  hilangkan dengan menghapus kode

<ul class='sub-menu'>
      <li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>

</ul>

 kode berwarna hijau digunakan sebagai background ganti kode ini jika anda ingin menggunakan  warna yang anda sukai
Sekian Tutorial Blog yang dapat Rafif Blog's sampaikan, jika ada pertanyaan, silahkan tanyakan di komentar atau langsung email ke : tanya.jawab.rafifblogs@gmail.com

Read More

Cara Mendapatkan Uang Melalui Blog atau Website anda

Kali ini Rafif Blog's akan memberitahu Cara Mendapatkan Uang Melalui Blog atau Website anda.
Caranya sangat mudah ! anda hanya perlu mendaftar di Situs PropellerAds. Mengapa anda harus memilih PropellerAds ? Karena PropellerAds merupakan advertising network terdepan dalam eCPM rates, dan 100% traffic monetization yang artinya 100% dari traffic blog anda akan diuangkan di PropellerAds ini ! Maka dari itu disini Rafif Blog's akan memberitahu anda cara mendaftarkan Blog atau Website anda di situs PropellerAds

1. Pertama, Masuk ke halaman PropellerAds

2. Lalu arahkan pointer mouse anda ke menu Register dan pilih Publisher

3. Setelah itu isi semua form dengan data diri anda yang benar dan lengkap, lalu centang bagian I have read and accepted the Terms and Conditions. dan klik SIGN UP AS PUBLISHER

4. Lalu muncul halaman untuk anda memverifikasikan alamat email anda. 

5. Buka email anda dan klik alamat verifikasi yang diberikan oleh pihak PropellerAds

6. Selamat ! anda telah berhasil mendaftar di PropellerAds 

7. Lalu buka kembali email anda dan buka data untuk login yang diberikan oleh pihak PropellerAds kepada anda

Sekian pos tentang Cara Mendapatkan Uang Melalui Blog atau Website anda jika ada pertanyaan mohon ajukan ke : tanya.jawab.rafifblogs@gmail.com

Read More

Cara Memasang Adsense ditengah Postingan Blog

Berikut Cara Memasang Adsense/Iklan ditengah Postingan Blog :

1. Pertama anda harus mem-pharse kan terlebih dahulu kode iklan anda. Anda dapat mem-                  pharse kode iklan anda di web HTML Escape 

2. Lalu masuk ke pengaturan template blog anda

3. Pada tampilan pengaturan template/editor template blog anda, carilah kode                                        <data:post.body/>, anda dapat menggunakan CTRL+F untuk mencari kode tersebut

4. Setelah itu, ganti kode <data:post.body/> dengan kode berikut

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='adsense' style='margin:20px 0'>
<center>
--Letakan kode unit adsense hasil parse disini--
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

 
5. Lalu kembali lagi ke halaman HTML Escape dan copy hasil pharse kode iklan anda tadi lalu letakkan atau timpa di --Letakan kode unit adsense hasil parse disini-- Jika sudah selesai, silahkan simpan template anda kembali

6. Sekian postingan Cara Memasang Adsense ditengah Postingan Blog semoga pos ini bermanfaat.

Read More

Cara Membuat Teks Berjalan di Header Blog

Bagaimana ? anda tertarik untuk membuat teks berjalan di atas header blog anda seperti gambar diatas  ? Jika anda tertarik ikuti petunjuk dari kami :

1. Klik edit HTML pada pengaturan Template di blog
2. Lalu cari kata kunci :
   <head>
3. Lalu dibawah nya tuliskan kode HTML berikut ini :
   <marquee bgcolor="red"><font color="white" face="goudy stout">edit teks ini sesuai dengan kebutuhan anda</font></marquee>
4. Lalu simpan teks tersebut.
5. Dan bukalah halaman blog anda, dan terciptalah teks berjalan di header blog anda

dan beberapa pengaturan bisa anda lakukan:

• bgcolor="red" red bisa anda ganti dengan warna lain
• color="white" white adalah warna tulisan, dan ini juga bisa anda ganti dengan warna yang anda sukai
• face="goudy stout" goudy stout adalah jenis tulisan/jenis font dan ini juga dapat anda ganti dengan jenis tulisan yang anda sukai

Sekian penjeleasan tentang cara membuat teks berjalan dari kami semoga dapat membantu anda,

Salam Semangat !

Read More