Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Cara Membuat Menu yang Menempel Di Dinding Blog

0
Published on 20:30 Category:
Cara membuat menu yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, menu masih pada posisi yang sama. Silakan lihat contoh menu hijau dibagian bawah.
menu yang menempel di blog

Untuk lebih jelasnya tentang cara membuat menu menempel diatas atau dibawah dinding blog. Ikuti langkah2 dibawah ini.
  1. Buatlah menu terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, lalu tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
  2. Selanjutnya copy kode dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
    3. <style>

    #cssmenu {
      background: transparent;
    }
    #cssmenu ul {
    float: left;
    }
    #cssmenu ul li {
      float: left;  padding:10px;
      background: transparent;  list-style: none;
    }
    #cssmenu ul li a {
      float: left;
      text-transform: uppercase;
      font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
      font-size: 12px;
      color: #FFFFFF;
    font-weight:bold;
    }
    </style>
    <div id='cssmenu'>
    <ul>
       <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
       <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
       <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
    </ul>
    </div>
  3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
  4. Setelah itu pengaturan template, klik edit HTML dan cari kode Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. seperti dibawah ini.
    5. menu menempel di dinding blog
  5. Sekarang Copy id dari menu tempel yang bergaris bawah HTML2, seperti gambar diatas.
  6. Lalu Pastekan di Notepad. Selanjutnya tambahkan kode css dibawah ini.
    7. #HTML2 {
      width: 100%;
      min-width: 960px;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 30px;
      font-size: 12px;
    z-index: 99;
      white-space: nowrap;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
      background-color: #336699;
      background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
      box-shadow: 0px 2px 0px rgb(14, 90, 140);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  7. Copy kode diatas, dan pastekan diatas ]]></b:skin> .
  8. Dan Save Template.
  9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  lalu hapus judulnya, biarkan gadget tidak berjudul. 
  10. Terakhir Save Gadget, Selesai.
Keterangan Kode Langkah 6:
  • top:0px ini fungsinya menempatkan menu dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
  • height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
  • background-color: #336699; dan #336699 100%); untuk warna background
Keterangan Kode Langkah 2:
  • http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
  • Dan juga https://twitter.com/fandrajuani adalah url yang jika diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.
Itulah sedikit cara membuat menu yang menempel di dinding atas atau bawah blog yang bisa saya bagikan. Semoga Bermanfaat.
Continue Reading

Cara membuat menu HTML dan Css

0
Published on 20:25 Category:
Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.
Kode dasar HTML dari sebuah menu, kira-kira seperti ini.
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>
Maka hasilnya akan menjadi seperti ini.
  • Beranda
Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>
Maka hasilnya akan menjadi seperti ini.
  • Beranda
  • Profil
  • Contact
  • Daftar Isi
Dari contoh diatas, setiap menu mempunyai kode sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
<li><a href ="URL address">Nama menu yang akan dibuat</a></li>

Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.
<style>
kode Css
</style>
kode html
Lalu Save, selesai.

Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:
#menu { background:#eee;border:1px solid #444444;}
Maka hasilnya akan menjadi seperti ini.

Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.

Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.
<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:
<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
HASILNYA


Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.
Continue Reading

Cara Agar Blog Tidak Bisa di Copy Paste

0
Published on 06:45 Category:

Cara Agar Blog Tidak Bisa di Copy Paste (COPAS) sebenarnya adalah hanya bagaimana cara mematikan fungsi klik kanan mouse komputer ketika berada di blog kita dalam hal ini blogspot/blogger.

Cara ini sangatlah mudah yaitu sebagai berikut :

  • Login ke akun Blogger.
  • Klik Template >> Edit HTML.
  • Cari kode </head> (gunakan ctrl+f).
  • Copy paste script berikut tepat di bawah </head>
<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>
  • save template dan coba lihat hasilnya
Bagaimana???mudah bukan???
Continue Reading

Cara Membuat Status Loading di Blog

0
Published on 10:20 Category:
Jika postingan sebelumnya Membuat status loading di blog versi 1 yang memfaatkan javascript, sekarang saya akan share Membuat status loading part || yang memanfaatkan jquery, yang nemu dari postingan System Of Blog, Dan yang loading versi 2 ini agak sedikit beda dengan yang versi 1, yang kedua ini loadingnya akan terus muncul dan akan hilang jika semua halaman blog telah di muat. Ok sobat blogger, ga usah panjang lebar cuap -cuapnya. mari kita langsuang ke pokok pembahasan Seperti biasa 1. Masuk ke blog anda 2. Klik Rancangan / Template 3. Klik Edit HTML 4. Cari kode </head> 5. Simpan kode di bawha ini di atas kode </head> 








  • <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
  • <script type="text/javascript">
  • (function($){$("html").removeClass("v2");
  • $("#header").ready(function(){
  • $("#progress-bar").stop().animate({ width: "25%" },1500) });
  • $("#footer").ready(function(){
  • $("#progress-bar").stop().animate({ width: "75%" },1500) });
  • $(window).load(function(){
  • $("#progress-bar").stop().animate({ width: "100%" },600,function(){
  • $("#loading").fadeOut("fast",function(){
  • $(this).remove();
  • });
  • });
  • });
  • })(jQuery);
  • </script>

    • 6. Setelah itu scroll ke atas temukan kode ]]></b:skin>  7. Setelah ketemu simpan kode di bawah ini di atas kode ]]></b:skin>






  • #loading {
  • position: fixed;
  • z-index: 50;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • background: #7f7f7f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_qtVSceZAYpqwF4SMk-_lEto8o1_3lD5o0nicCKczBAK0zl83siVELdrEUGH7aSZB3Rly5QOndRdkag5DzdbRmC2WYKdgK2nBllFo9xAYsdrgFju2erCpRyTN2kSINeVzHo2UYX0uAI/s400/naruto_png.png) no-repeat left center;
  • line-height: 350px;
  • text-align: center;
  • font-size: 36px;
  • color: #FFF;
  • }
  •  
  • .v2 #loading {
  • display: none
  • }
  •  
  • #progress-bar {
  • position: absolute;
  • top: 0;
  • left: 0;
  • background: #eee;
  • -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  • filter: alpha(opacity=80);
  • opacity: 0.8;
  • width: 0;
  • height: 18px
  • }
  •  
  • #loader {
  • background: transparent;
  • height: 100%;
  • display: block
  • }


    • 8. Nah tinggal satu langkah lagi nih cari kode <body> setelah ketemu 9. Copy kode di bawah ini, pastekan Bawah kode <body>

     <div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div> 

    10. Setelah itu klik SIMPAN TEMPLATE dan lihat Hasilnya, NB: Oh iya ada satu lagi nih jika anda ingin menggunakan Halaman Loading ini di BERANDA saja, jangan gunakan kode di atas silahkan gunakan kode di bawah ini
    <b:if cond='data:blog.url == data:blog.homepageUrl'><div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div> </b:if> 
    Setelah itu klik simpan dan coba sobat lihat hasilnya... 
    Continue Reading

    Cara mengupload atau memasukkan file ke Blogger atau Mediafire

    0
    Published on 07:22 Category:

    nah,,, sekarang saya akan berbagi dengan anda bagaimana caranya,

    caranya emang agak gampang2 susah tapi kita akan mencobanya, yang harus anda lakukan adalah buka paman google lalu ketikkan www.mediafire.com dan ikuti langkah2nya :
    1. Setelah masuk ke tampilan mediafire anda klik tab Menu Sign Up  

    2. Lalu anda buat account dengan mengklik account type yang free, klo anda sanggup bayar boleh anda pilih yang pro atau business. Di account type yang free anda klik “Try it” di bawah kolom free
    Continue Reading

    Cara Mudah Membuat Blog Gratis di Blogspot

    0
    Published on 07:01 Category:
    Cara Membuat Blog Gratis - Mungkin Sobat sedang kebingungan bagaimana cara membuat blog, apakah karena tugas sekolah yang diharuskan murid-muridnya mempunyai blog agar bisa mengikuti latihan dan mengerjakan tugas di blog masing-masing agar mendapat nilai, ataukah ada sebab lain seperti ingin berbagi kisah hidup, kata mutiara, kata bijak, kisah lucu, atau foto lucu supaya dapat diketahui oleh khalayak umum, ataupun Sobat ingin membuat blog karena ada teman yang bisa mendapatkan penghasilan dari blog.
    Continue Reading
     

    Sponsors

    212