Cara mendaftarkan Blog ke Bing Webmaster Tools

Bagaimana Cara Mendaftarkan Blog Ke Bing Webmaster Tools.

Waktu saya membuka-buka email yahoo, mata saya tertuju pada bing webmaster tools. Lalu saya langsung sign up mendaftarkan blog/website ke bing webmaster tools, karena saya kemudian diarahkan ke wordpress.com untuk sign up, saya mulai bingung neh, utak-atik, ketik ini ketik itu ga bisa-bisa juga (dah gatek...pamer lagi...hihi). Jadi saya mulai deh surfing di dunia mbah Google.

Sampailah saya ke situs Bang arus (hihi…sok kenal ya)…yah mudah-mudahan nanti juga kenal ya bang.

Isinya sangat detil yang aku suka dengan bang arussukses.com ini, jadi mudah dipahami.

Ini dia hasilnya gan :

Oke kawan langsung aja ke TKP ya….

1. Kunjungi Alamat Situs Resmi Bing Webmaster Tools.

Lalu klik tab “Webmaster Tools Sign In” anda akan dibawa kehalaman web seperti berikut:

Jika anda belum memiliki akunnya klik di “sign up”untuk mendapatkan akun di Windows Live karena memang harus mempunyai akun windows live sebelum mendaftar di bing webmaster ini.Setelah itu baru anda dapat mengikuti langkah-langkah berikutnya.

2. Mendaftarkan Blog/Website Ke Bing Webmaster Tools.

Setelah anda mempunyai akun di windows live atau hotmail.com silahkan anda “sign In”ke dalam bing webmaster tools,maka anda akan mendapatkan halaman web sebagai berikut:

Untuk mendaftarkan blog/website ke bing webmaster tools,klik tab “add site”dan anda akan mendapatkan pop- up screen seperti ini:

Silahkan masukkan nama domain blog anda atau website anda setelah itu anda klik“submit”kemudian anda akan mendapatkan halaman pop-up sebagai berikut:

Di situ ada 3 opsi untuk memveryfikasi kepemilikan blog atau website tetapi jika anda menggunakan blogspot atau wordpress,yang paling disarankan adalah opsi kedua.Nama domain atau website anda akan terlihat dibagian “site:http://……”

3. Masukkan Meta Tag Key Kedalam Blog Atau Website.

Untuk blog di blogspot/blogger, masukkan meta tag key yang sudah diberikan Bing Webmaster Tools melalui html editor persis dibawah <head>

Untuk konfigurasi html di blog masing-masing bisa saja berbeda oleh karena itu maka jangan menjadikan konfigurasi diatas sebagai referensi blog anda.Pastikan saja meta tag key untuk blog anda ada dibawah <head> karena meta tag key yang dihasilkan untuk setiap blog atau website memang berbeda dan unik setelah itu klik simpan template.

4. Klik Verify di “Verify Ownership “Screen.

Setelah anda memasukkan meta tag key dari Bing Webmaster Tools kedalam html source blog anda,kemudian kembali kehalaman web “Verify Ownership”dan klik di tab “Verify”.

Setelah proses verifikasi oleh bing webmaster tools selesai,anda akan di redirect ke halaman web utama Bing Webmaster Tools sebagai berikut:

Terakhir: Jika verifikasinya berhasil,maka blog atau website anda akan terdaftar dibagian “site”seperti gambar diatas yang saya beri warna hitam.Butuh waktu 3 hari untuk Bing Webmaster Tools menampilkan data statistik blog atau website anda.

Salam sukses.

Read More »

Cara Hapus link Home, newer post dan older post secara permanen

Sebagai lanjutan dari postingan terdahulu untuk menghapus link home(beranda), maka kali ini saya berikan cara untuk menghapus secara tuntas atau permanen, karena cara terdahulu ternyata masih memunculkan link home(beranda) pada saat-saat tertentu.

1. Masuk/Login Blogger
2. Pergi ke Dashboard Klik Template
3. Back up data template terlebih dahulu (Backup/Restore disebelah kanan atas)
4. Edit HTML
5. Cari kode berikut :
     <b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
6. Hapus kode tersebut diatas
7. Kemudian cari kode berikut :
<span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
8. Hapus kode diatas
9. Kemudian cari lagi kode berikut :
<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>
10. Hapus kode diatas :
11. Kemudian cari kode berikut :
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

      <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
12. Hapus kode diatas
13. Cek atau view blog kalian, bila link home, newerpost dan olderpost sudah tidak ada lagi di bawah postingan kalian, berarti sudah berhasil, jika tidak berhasil, kembalikan ke template semula yang telah kalian backup tadi.
14. Save Template

Demikian uraian artikel cara menghapus link home(beranda), newerpost(posting baru) dan olderpost(posting lama). Semoga bermanfaat.
Pelajari tutorial selanjutnya mengenai editorial blog di : cara menyembunyikan judul postingan

Keep Blogging!

Read More »

Cara menyembunyikan judul postingan

Untuk alasan tertentu, Sobat blogger tentunya ingin menyembunyikan judul postingan di halaman utamanya, apalagi bila berhubungan dengan kebutuhan blog toko online, sekedar memperluas halaman atau sebagai estetika untuk mempercantik tampilan halaman blog tersebut.

1. Langkah pertama tentunya Login blogger terlebih dahulu
2. Buka Dashboard
3. Edit HTML
4. Temukan kode => ...
 
h3.post-title, h4 {
   font: $(post.title.font);
   color: $(post.title.text.color);

5. Juga kode yang ini =>
 
h3.post-title a {
   font: $(post.title.font);
   color: $(post.title.text.color);
6. Gunakan ctrl+f atau F3 untuk menemukan dengan cepat
   tapi jangan khawatir atau bingung karena kode tersebut berada diurutan baris atas
   (dibaris 600...keatas)

7. Kemudian tambahkan kode berikut =>
 
visibility: hidden;

8. Sehingga kode lengkapnya menjadi =>
 
h3.post-title, h4 {
    font: $(post.title.font); visibility: hidden;
    color: $(post.title.text.color);

   
h3.post-title a {
    font: $(post.title.font); visibility: hidden;
    color: $(post.title.text.color);

9. Save Template dan lihat hasilnya
10. Selesai

Begitulah cara menyembunyikan judul postingan pada blog, semoga bermanfaat.
Baca juga tutorial lainnya untuk sekedar menambah wawasan Sobat blogger di : cara membuat menu footer 4 kolom

Read More »

Cara Hapus widget footer powered by

Masih dengan topik pembahasan untuk membuat halaman blog menjadi lebih luas dan leluasa untuk menembah image atau widget atau kolom iklan dan sebagainya.
Kali ini kita lihat dan bahas cara menghapus tulisan pada footer yang bertuliskan powered by blogger (diberdayakan oleh blogger), caranya adalah sebagai berikut :

1. Masuk/Login Blogger
2. Masuk ke  Dashboard
3. Masuk Template
4. Edit HTML
5. Cari kode seperti ini :
   <!-- outside of the include in order to lock Attribution widget -->
6. Ganti tulisan lock tersebut menjadi unlock
7. Kemudian cari kode berikut :
   <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
8. Ganti tulisan 'true' menjadi 'false'
9. Simpan/save Template

Kembali ke menu Tata letak atau Layout
1. Edit attribution
2. Remove atau Hapus attribution tersebut
3. Lihat hasilnya

Demikian artikel cara menghapus footer powered by blogger, untuk mempercantik tampilan blog anda silahkan kunjungi bahasan lainnya tentang : cara menghapus langganan entry atom

Keep Blogging!

Read More »

Cara menghilangkan Langganan : Entry (Atom)

Pada beberapa tampilan sebuah blog mungkin ada beberapa yang masih menempatkan link post atom di bagian footer, ada juga yang sudah menghilangkannya.
Untuk alasan memberikan ruang atau tempat bagi sebuah blog agar bisa memasukkan widget lain maka Langganan: Entry (Atom) ini bisa dihilangkan, pada sebagian template mungkin masih memakai istilah dalam bahasa inggri yang kira-kira tertulis seperti ini : Subscribe to : Posts (Atom)
Cara menghapus atau menghilangkan link tersebut adalah :

1. Masuk/ Login Blogger
2. Masuk Dashboard
3. Pilih Template
4. Edit HTML
5. Cari kode berikut :
    <!-- feed links -->
    <b:include name='feedLinks'/>
6. Hapus kode tersebut
7. Save template
8. Lihat hasilnya

Demikian artikel cara menghilangkan langganan entry atom pada footer blog, jika ingin menghapus link lainnya silahkan kunjungi : Cara menghapus Link Home atau Beranda pada Footer 

Keep Blogging!

Read More »

Cara Menghapus link Home atau Beranda pada footer

Pada setiap Template gratisan yang kita peroleh terutama pada Blogger Template yang disediakan oleh Google maka kita akan mendapatkan sebuah tampilan lay out atau tata letak secara default atau layout seadanya yang telah disediakan google.
Untuk membuat tampilan blog tampil cantik dan lebih professional secara maksimal, kita perlu menambah dan mengurangi sudut-sudut layout atau tata letak sesuai dengan selera kita atau sesuai dengan tampilan blog yang kita inginkan.
Salah satunya barangkali kita akan/harus menghilangkan link HOME atau BERANDA pada footer didalam blog kita.
Maka inilah cara yang harus ditempuh :

1. Login Blogger
2. Masuk Dashboard
3. Masuk ke pengaturan Template
4. Pilih Edit HTML
5. Cari kode  berikut :
    (Gunakan perintah ctrl+f, agar mempermudah pencarian)
     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
6. Setelah ditemukan lalu HAPUS kode tersebut
7. Save Template
8. Lihat hasilnya


Demikian cara yang mudah, hanya saja barangkali pencarian kode diatas yang agak susah, karena karakter setiap template bisa berbeda satu dengan lainnya. Diperlukan sedikit kesabaran untuk menemukan kode diatas, kalau bantuan ctrl+f masih kurang membantu maka coba masukan dengan kata kunci berbeda, misal : a class kalau belum ketemu coba kata kunci home atau home-link atau homepage atau homeMsg, jangan lupa juga buka setiap tanda panah hitam kecil di baris sebelah kiri editor template.

Ikuti selanjutnya artikel cara menghilangkan langganan entry atom

Read More »

Cara membuat Menu Navigasi pada Footer blog

Menu Footer

Kali ini saya akan bahas menu navigasi footer pada blog. Ada banyak pilihan menu footer akan tetapi saya hanya akan bahas mengenai footer 4 kolom saja, karena dengan menu 4 kolom ini kalian bisa kembangkan menjadi 5 kolom atau lebih atau juga mengurangi jumlah kolomnya menjadi 3.

Kita langsung saja pada permasalahannya :

contoh menu footer

1. login Blogger
2. Template
3. Edit HTML
4. Cari kode ]]></b:skin> , lalu salin dan tempel kode dibawah ini diatasnya
                                                                                                                                              
    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
   .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
   .lowerbar li:hover {
    display:block;
    background: #222;
    }
                                                                                                                                                       
    Kemudian cari kode </body> lalu salin kode dibawah ini dan tempel diatasnya
 
   <div id='lower'>
   <div id='lower-wrapper'>
   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
   </b:section>
   </div>

   <div style='clear: both;'/>
   </div> </div>
                                                                                                                                               
5. Kemudian preview template dan cek perubahannya, setelah sesuai silahkan di 'save'
6. Setelah disimpan lalu Klik layout
7. Perhatikan jumlah kolom add gadget yang baru sebagai hasil penambahan kode css diatas
8. Add a Gadget
9. Edit HTML/Javascript
10. Salin dan tempel kode css dibawah ini :
                                                                                                                                              

     <h4><a href="http://alamat URL/" target="_blank"">Home</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">About</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">#</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">#</a></h4>
                                                                                                                                              
     Alamat URL ganti dengan alamat blog kalian, Home ganti menurut kebutuhan.
11. Kemudian Add a Gadget lagi untuk kolom berikutnya. Lakukan langkah ke-10
12. Selesai.

Demikian penjelasan dan ulasan kali ini tentang : Menu Navigasi Footer 4 Kolom.
Kalau kalian berniat membuat menu navigasi yang lain silahkan kunjungi : Cara membuat menu dropdown bergambar

Keep Blogging!

Read More »

Cara Membuat Menu Navigasi diatas Header Blog

Menu Navigasi Horisontal diatas Header blog

Setelah Artikel terdahulu "Cara membuat menu dropdown bergambar", maka kali ini saya akan lanjutkan dengan membuat menu serupa tetapi menu navigasinya horisontal diatas header blog atau diatas judul blog.
Seperti biasa yang harus dilakukan adalah :

contoh menu navigasi diatas header

1. Login kedalam Blog
2. Klik Template
3. Edit HTML
4. Centang Expand widget template pada pojok kanan untuk template terdahulu atau older template, sedangkan bagi kalian yang templatnya baru atau daftar di Blogger tahun 2014 ini kalian tidak perlu susah payah mencentang expand widget, karena memang sudah tidak ada lagi disana.
5. Copy paste Kode HTML dibawah ini : lalu cari kode ]]></b:skin> kemudian letakkan diatasnya.

  /*Gm Top Menu*/
#top{margin:right;padding: 0;width: 960px;background:#000000;border-bottom:1px solid #fff;}
#top-wrap{margin:right;padding: 0;width: 960px;background:#000000;}
#navwrap {margin: 0px auto; width:960px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:#8A0808; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#000000; color:#ffffff;}}
#navbar-iframe {display: none !important;}

6. Jangan lupa save template lalu view blog, jika penempatannya sudah benar maka lanjutkan copy paste kode dibawah, lalu letakkan dibawah kode </head>.

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='Url Blog link artikel yang dituju' title='Beranda'>Beranda</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Profil'>Profil</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Artikel'>Artikel</a></li>
<li><a href='http://www.menunavigasi.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='Url Blog link artikel yang dituju' title='About'>About</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Facebook'>Facebook</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Site Map'>Site map</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

7. Selesai

Penjelasan :
width: 960px;background:#000000;border-bottom:1px solid #fff; artinya adalah ukuran lebar atau panjang menu navigasi tersebut 960px, apabila masih ada ruang masih bisa ditambah lagi untuk memberi tambahan menu pada blog kalian, Kode background #000000 artinya background berwarna hitam dan kode #fff artinya berwarna putih.
Float: left; adalah untuk menempatkan menu navigasi berada dipojok atas sebelah kiri
background:#000000; color:#ffffff; artinya kita menginginkan background dengan warna hitam dan tulisan berwarna putih.
Url Blog link artikel yang dituju artinya kalian harus mencantumkan url blog kalian sendiri ditempat tersebut. ( contoh url,= http://www. menunavigasi.blogspot.com/2014/01/cara-membuat-menu-navigasi-diatas-header-blog.html ).

Sampai disini dulu, mudah-mudahan kalian mengerti apa yang saya sampaikan dan semoga artikel : cara membuat menu navigasi diatas header blog ini bermanfaat.
Pelajari selanjutnya Cara membuat menu navigasi pada footer blog

Keep Blogging!

Read More »

Cara membuat Menu Dropdown Bergambar

Menu Dropdown

Setiap Blogger yang rajin mengupdate websitenya dan apalagi sering melakukan blogwalking, maka pasti ia akan tertarik dengan penampilan blognya para tetangga, lalu pastilah akan mencari tahu bagaimana mereka bisa melakukannya.
Tips dari saya, untuk melakukan blogwalking jangan pernah merasa putus asa atau gampang menyerah, karena kalau kamu sedang tidak beruntung maka tutorial yang kalian temukan tidak akan mempan diterapkan pada blog kalian. Ini dikarenakan porsi bahasa HTML dan CSS Templat kalian mungkin berbeda dengan karakteristik Template para Tutor. Jadi teruslah mencari sampai ketemu tutorial yang kebetulan memang sama dan identik dengan blog templat yang kalian punya.

Baiklah sekarang kita mulai saja tutorialnya.

Ini contoh menunya

1. Masuk/Login blog
2. Layout
3. Add a Gadget
4. HTML/Java script
5. Kopi paste kode Css dibawah ini

<style type="text/css"> * {   margin: 0px;   padding: 0px; } nav {   font-family: Helvetica, Arial, sans-serif;   line-height: 1;   margin: 30px auto; /*for display only*/   width: 150px;   -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);      -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);           box-shadow: 2px 2px 5px rgba(0,0,0,0.2); } .menu-item {   background: #fff;   width: 150px; } /*Menu Header Styles 1*/ .menu-item h4 {   color: #fff;   font-size: 15px;   font-weight: 100;   padding: 7px 12px;   background: #9DB6D7; } .menu-item h4 a {   color: white;   display: block;   text-decoration: none;   width: 150px; } /*Menu Header Styles 2*/ .menu-item h4 {   border-bottom: 1px solid rgba(0,0,0,0.3);   border-top: 1px solid rgba(255,255,255,0.2);   color: #fff;   font-size: 15px;   font-weight: 100;   padding: 7px 12px;   background: #a90329; /* Old browsers */   background: -moz-linear-gradient(top, #ff9900 0%, #cc3300 44%, #993300 100%); /* FF3.6+ */   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9900), color-stop(44%,#cc3300), color-stop(100%,#993300)); /* Chrome,Safari4+ */   background: -webkit-linear-gradient(top, #ff9900 00%,#cc3300 44%,#993300 100%); /* Chrome10+,Safari5.1+ */   background: -o-linear-gradient(top, #ff9900 10%,#cc3300 44%,#993300 100%); /* Opera 11.10+ */   background: -ms-linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* IE10+ */   background: linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* W3C */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#993300',GradientType=0 ); /* IE6-9 */ } .menu-item h4:hover {   background: #cc002c; /* Old browsers */   background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */   background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */   background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */   background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */   background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ } .alpha p {   font-size: 13px;   padding: 8px 12px;   color: #aaa; } /*ul Styles*/ .menu-item ul {   background: #fff;   font-size: 13px;   line-height: 30px;   list-style-type: none;   overflow: hidden;   padding: 0px; } .menu-item ul a {   margin-left: 0px;   text-decoration: none;   color: #0A0A0A;   display: block;   width: 150px; } /*li Styles*/ .menu-item li {   border-bottom: 1px solid #eee; } .menu-item li:hover {   background: #eee; } /*ul Styles*/ .menu-item ul {   background: #B2D8E0;   font-size: 13px;   line-height: 30px;   height: 0px; /*Collapses the menu*/   list-style-type: none;   overflow: hidden;   padding: 0px; } /*ul Styles*/ .menu-item ul {   background: #fff;   font-size: 13px;   line-height: 30px;   height: 0px;   list-style-type: none;   overflow: hidden;   padding: 0px;   /*Animation*/   -webkit-transition: height 1s ease;      -moz-transition: height 1s ease;        -o-transition: height 1s ease;       -ms-transition: height 1s ease;           transition: height 1s ease; } .menu-item:hover ul {   height: 200px; } </style> <nav>     <div class="menu-item">     <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>     <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>     <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>         <ul>         <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>         <li><a href="URL postingan" target="_blank" imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>     </ul>     </div>     <div class="menu-item">     <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>         <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>         <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>         <ul>          <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>        <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>        <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>     </ul>     </div>     <div class="menu-item">     <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>         <ul>     <li><a href="URL postingan " target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>     <li><a href="Url postingan " target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>     </ul>     </div>     </nav>

6. Lihat hasilnya
7. Selesai

Penjelasan kode Css diatas : kita mulai dari yang teratas dahulu

.menu-item {   background: #fff;   width: 150px;

Ini adalah kode untuk warna background table dropnya ( #fff adalah warna putih, kalian bisa ganti dengan warna kesekaan), lebar dari table menu disini adalah : 150px, sesuaikan dengan templat kalian.

/*Menu Header Styles 2*/ .menu-item h4 {   border-bottom: 1px solid rgba(0,0,0,0.3);   border-top: 1px solid rgba(255,255,255,0.2);   color: #fff;   font-size: 15px;   font-weight: 100;   padding: 7px 12px;   background: #a90329; /* Old browsers */   background: -moz-linear-gradient(top, #ff9900 0%, #cc3300 44%, #993300 100%); /* FF3.6+ */   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9900), color-stop(44%,#cc3300), color-stop(100%,#993300)); /* Chrome,Safari4+ */   background: -webkit-linear-gradient(top, #ff9900 00%,#cc3300 44%,#993300 100%); /* Chrome10+,Safari5.1+ */   background: -o-linear-gradient(top, #ff9900 10%,#cc3300 44%,#993300 100%); /* Opera 11.10+ */   background: -ms-linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* IE10+ */   background: linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* W3C */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#993300',GradientType=0 ); /* IE6-9 */ }

Menu header 1 dan menu header styles 2 sama fungsinya, hanya saja saya disini akan menambah warna background gradasi/gradient dengan warna pilihan saya pada kode menu header styles 2.
font size 15px dan font weight  100 adalah untuk mengatur besar huruf serta tinggi dari menu table tempat hurup tersebut berada.

Kemudian fungsi moz -linear- gradient top, #ff9900 0%, #cc3300 44%, #993300 100% artinya warna gradasi mulai dari atas sehingga gradasi menjadi horizontal, 0%,44% dan 100% adalah besaran untuk kombinasi warna gradasi, sesuaikan warnanya dengan kesukaan kalian.

.menu-item:hover ul   height: 200px;

Kode yang ini untuk mengatur tinggi dropdown yang dinginkan, disini saya pakai height :200px
sesuaikan dengan besar gambar yang ingin kalian tampilkan.

Url Blog
ini adalah nama blog kalian (contoh=>  http://menudropdown.blogspot.com/)
URL postingan
dan ini adalah link Url tujuan, dimana saat pembaca mengklik gambar atau teks tersebut kita akan arahkan pembaca tersebut menuju ke alamat artikel yang kita sisipkan disini.  ( contoh =>  http://menudropdown.blogspot.com/2014/12/home.html )
Judul postingan
contoh: home, about

disini tempat url gambar
ini adalah gambar yang ingin kalian tampilkan ( contoh url gambar seperti = <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWDXoR4jEUAzbdCRw73Bm8dKzW1t3ds5KtUUDdkkqPH0DhiACYt8gnjxFYNYvC1mSBKh4dc5X74_AeDMsDRdZHqvinydOeaIGUJMv-Eg_tQt0atgblHm_lOwi5tYEiwYCXLrx8Wm_9tU/s1600/17+5960x-8core.jpg "height="100" width="100")
Besar gambar disini 100px, kalian bisa ganti sesuaikan dengan besar gambar yang diinginkan.

Seperti itu penjelasannya, semoga bermanfaat bagi kalian semua yang ingin menambah wawasan tentang template dan ingin mempercantik tampilan blognya.
Demikian artikel Cara membuat menu dropdown bergambar kali ini, baca juga 'cara membuat menu navigasi diatas header blog'.

Keep Blogging! 

Read More »

Verifikasi Google Webmaster Tool ID

Google verification

Google Webmaster Tools mempunyai fitur google analytics yang berguna untuk menganalisa situs atau blog anda, akan tetapi Google hanya dapat berbagi informasi ini dengan pemilik situs yang terdaftar atau sudah verifikasi. Anda dapat memverifikasi situs Anda dengan Webmaster Tools dan dapatkan kode HTML untuk ditambahkan ke dalam meta tag template situs yang sobat miliki.
Mengapa Google Webmaster Tools meminta Anda untuk membuktikan bahwa Anda adalah pemilik situs sebelum menunjukkan kepada Anda statistik dan data tentang hal itu. (Verifikasi tidak mempengaruhi PageRank atau mempengaruhi kinerja situs Anda dalam hasil pencarian Google).

Untuk memverifikasi bahwa Anda memiliki situs yang bersangkutan, Anda dapat menambahkan tag meta ke home page situs (membuktikan bahwa Anda memiliki akses ke file sumber), atau meng-upload file HTML khusus untuk server Anda (membuktikan bahwa Anda memiliki akses ke server) . Dengan demikian Alat Webmaster akan memeriksa dan melihat bahwa meta tag sudah disematkan dalam situs anda.
Jika ya, Google akan menganggap Anda pemilik situs dan akan menunjukkan rincian situs. Disinilah mungkin adanya verifikasi tersebut sebab dengan demikian seo lebih mudah merayapi situs anda daripada situs lain yang belum terverifikasi...(who knows)?

Cara verifikasi :
1. Masuk ke akun google webmaster tools. :
https://www.google.com/webmasters/verification/home?hl=en
2. Jika belum mempunya akun webmaster, segera buat di cara membuat akun webmaster tools
3. Jika sudah mempunyai akun maka akan terbuka situs webmaster tools tersebut seperti dibawah ini

klik pada verification details dari blog yang akan diverifikasi

4. Selanjutnya verifikasikan dengan metode lain

klik verify using a different method

5. Check HTML tag

Copas meta name google site verifikasi

6. Buka Template pada blog
7. Edit HTML,

edit HTML

8. Cari kode <head> dan atau <b:skin> kemudian paste code verifikasi google HTML tadi diatas kode <b:skin>

setelah paste meta tag google tadi lalu save template

9. Kembali ke Webmaster tools

Klik verify

10. Selesai... jika tidak ada masalah dengan alamat web yang diverifikasi maka tampilan dilayar akan seperti ini :

Great Job...Meta tag telah diverifikasi oleh google

Sukses.
Keep Blogging!

Read More »

Verifikasi ID code Meta tag Alexa

Cara verifikasi kode ID Alexa pada Blog

Apa itu verifikasi kode id?
kode id yang dikeluarkan oleh alexa maupun oleh google adalah bertujuan agar blog yang terverifikasi akan mudah masuk dalam daftar list rank alexa maupun google, sehingga search engine bekerja lebih maksimal dalam arti lebih cepat menangkap atau menelusuri blog yang terverifikasi dibandingkan dengan blog yang belum diverifikasi.
Tak kenal maka tak sayang....begitu kira-kira analoginya, Blog yang terverifikasi lebih 'disayang' daripada blog yang belum terverifikasi.

Langkah-langkah verifikasi.
1. Login ke www.alexa.com
2. Jika belum punya Account Alexa, daftarkan dulu disini
3. Jika sudah punya account silahkan langsung lanjut ke langkah no. 4

klik create account

masukan  email lalu klik create

buka email untuk verifikasi account

klik url to complete registration

buat password untuk account alexa

4. Sign in to alexa

masukan email dan password yang baru dibuat

5. Setelah ada di home page alexa. klik address pada sudut kiri atas monitor dan masukan
http://www.alexa.com/siteowners/claim

6. Selanjutnya akan diminta memasukkan alamat URL

7. Pilih metode 2 untuk claim verifikasi.

copy meta tag alexa

8. Buka Template, lalu edit HTML

9. Cari kode <head> pada template 

10. Paste kode meta tag tadi persis dibawah kode <head> lalu Save Template.

11. Kembali ke website alexa 

klik verify my id

12. Selanjutnya akan ada notifikasi Claim sukses 

claim success

Verifikasi kode meta id alexa selesai.

Keep Blogging

Read More »

Kode Warna CSS pada HTML

Bro n Sis...

Jika kita sudah mulai mencoba mengutak-atik Template untuk mempercantik tampilan Blog ...maka kita pasti akan ketemu dengan (salah satunya)...'kode warna'...yaitu pengkodean untuk warna tertentu dalam rancangan HTML pada template blog kita...bisa juga disebut kode CSS.

Lalu apa beda HTML dan CSS?
kita bahas sedikit ya....

HTML singkatan dari Hypertext Markup Language yaitu bahasa standar yang digunakan oleh browser internet untuk membuat halaman dan dokumen pad sebuah website, sehingga dapat diakses atau dibaca layaknya sebuah artikel.

CSS singkatan dari Cascading Style Sheet adalah bahasa penrograman web untuk mengedit beberapa komponen web sehingga lebih terstruktur dan rapih. CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML atau XHTML(bahasa standar baku penerus HTML). CSS lah yang mengatur tampilan gambar, warna, spasi antar paragraf serta parameter lainnya, Dengan CSS lah bentuk template yang ada sekarang mempunyai tampilan yang berbeda...dengan kata lain tanpa CSS semua template akan berformat sama diseluruh dunia...
Jadi kalau diijinkan bermain analogi... HTML itu CPUnya komputer...dan CSS adalah Processornya.
( begitu kira-kira gan...kesimpulan ane...mohon maaf kalo ada salah salah kate ye...hehe)

Yuk sekarang kita kembali ke pokok persoalan yaitu tentang  KODE WARNA CSS
langsung ke tekape aja gan....

klik gambar atau caption dibawah ini untuk langsung terhubung dengan website color codes online...

html-color-codes.info

Atau dengan cara membuka Photoshop pada komputer agan...(itu juga kalo agan dah instal photoshopnya....wakakakk).

Atau langsung cari kode warnanya langsung dengan Hex color code generator dibawah ini :

Hex Color Codes Generator

Bagi agan yang suka blogwalking silahkan mampir ke : onestopbrowsing
Ok...gan
Keep Blogging!

Read More »

PageRank Checker

Page Rank checker adalah layanan gratis untuk memeriksa peringkat Google ™ pagerank  dari blog agan langsung melalui checker PR online, dengan cara memasukkan nama URL sobat ke dalam PageRank checker dibawah ini, lalu tekan tombol Check PR untuk melihat hasil dari halaman web Sobat... Cekidot.

(contoh URL : http://www.example.blogspot.com)

Masukan URL agan Bro n Sis punya...dibawah ini...Ok!

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by PRChecker.info service

Baca selanjutnya : Backlink Checker

Read More »

Backlink Checker

Backlink adalah link masuk dari situs lain ke situs Anda. Backlink berkualitas sering digunakan sebagai bagian dari SEO (search engine optimization) strategi,  mesin pencari menggunakan jumlah backlink situs sebagai ukuran popularitas.

Backlink Checker adalah alat untuk mengetahui siapa saja atau situs mana saja yang pernah mengunjungi blog agan...

Ini ada oleh-oleh dari hasil surving bersama mbah Google dan teman SeoCiyus...paket dari Webtoolhub.com...buat mas bro n sis....yuk langsung ke tekape

Masukan nama url dari blog bro n sis...

Enter URL: (e.g. yourwebsite.com)

Powered by: WebToolHub.com situs sejenis yang bisa agan telusuri : onestopbrowsing, pagerank checker

Read More »

Cara Membuat Animasi Bergerak

Sebagaimana janji saya untuk menulis 'cara membuat animasi bergerak' dalam artikel terdahulu, maka kiranya sekarang saya datang membawa oleh-oleh animasi ini untuk sobat blogger yang baru mengenal Flash.

1. Modal utama adalah pengetahuan soal software Adobe Photoshop. Kali ini saya memakai CS2.
Jika sudah menguasai Photoshop, maka akan sangat mudah mengikuti pembuatan animasi bergerak ini.
2. Langkah awal adalah menyiapkan gambar, membuat gambar atau mengambil/meminjam dari persediaannya Oom Google.

> Buka Photoshop.Buatlah ukuran bingkai atau kanvas dengan width : 100 pixels dan height : 100 px.
atau boleh saja dengan ukuran yang Sobat blogger mau.

Pilih icon shape tools , silahkan pilih gambar shape yang mana yang Sobat sukai.

 > Buatlah Layers sebanyak mungkin seperti gambar diatas. Jangan lupa untuk menuyimpannya dalam file psd.
Jika gambar telah selesai maka. Klik toolbar menu window dan pilih animation.

 > Selanjutnya mengatur posisi masing-masing 'layers' sehingga pada kotak animations terlihat posisi dari gambar yang berbeda. lalu mainkan atau klik 'Play animations'.

Jika Sobat tertarik untuk mengetahui detailnya, silahkan kunjungi 'cara membuat gambar animasi bergerak'

Read More »