PURBALINGGA BROW er

Friday, 24 January 2014

Membuat Menu Navigasi Horizontal Glossy di Blog


Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.


Langsung saja. berikut ini tutorial membuat glossy horizontal menu
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Modified : IB  (http://www.maskolis.co./) */
    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KshgV1sSXPAN2L5BpzhzgjFe_PyhbusKnXoLs2Xkfw8giH4IIm-vVWqiJiONyUN-E8hGrRyCo0wRGLRF95_h-j62kUpQ74WrJ5V5Jjc_i4RvwISVrWIYvOXMMf8nu83HPb-VAkVfOHY/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
        height: 46px;
        list-style: none;
    }
    .glossymenu li{
        float:left;
    }
    .glossymenu li a{
        float: left;
        display: block;
        color:#000;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 13px;
        font-weight: bold;
        padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
        height: 46px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;   
    }
    .glossymenu li a b{
        float: left;
        display: block;
        padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    .glossymenu li.current a, .glossymenu li a:hover{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MHu_1M9PUrSPvPj_Vl7DgT9kLIJ_y3h6wVqCQjkBOAKvdCW99uP1IoY1Ye50hD5Z6f8AdyFqWtE3ydhrZ_rQy9AzEmymok33JFutBiDX-S_Lg572IstGsJ3LMUCgiOGaN5tT2a0YsuU/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
        background-position: left;
    }
    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZGlNw49t7X7OPUEZ7WDA6Ogm3lfBw-rf_KNvjh4-wej0gq_33Pq6Wv1jFmMgCOolek8WK4HjvK2sNthTtz0G8f4u9QuuqGUUdSh1z7jm_wSdn7acE5Gy8bUrPWRStXjQ8qTTsbH61dc/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
    }
    Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
    image 
  4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
  5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <ul class='glossymenu'>
    <li class='current'><a href='http://creatingwebsite-maskolis.blogspot.com/'><b>Home</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
    </ul>
  6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
  7. Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....
Posted by at No comments:
Labels:

Cara Membuat Menu Melayang Di Atas Header / Floating menu


Pada postingan sebelumnya saya telah membahas Cara Membuat Menu Melayang Di Atas Header, Kali ini saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? yahh jelas sama dong sob..., yang membedakan hanyalah desain penampilanya saja tapi kegunaanya tetap sama kok.!
jika kalian pada bingung ini adalah sreenshotnya:
Oke langsung aja Caranya:
  • Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
  • Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin> .

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

  • Ganti 970px untuk ukuran blog sobat.
  • Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head> 
<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2CBBdMt_HfKny2kqtxZ3pdc0OoPdu-Z-DWD3ODryXS3FUGWz9T-rETTCX6mZY1tRLPDBmFS-19kAA_rDR-vV9MJ3gGiLAOxrAa4JHKGSPZksgUfvOYwjJxD-Xzo_CXPavZM7Pkx4TwX8/s1600/home.png' style='padding:0px;'/></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>
  • Klik Simpan
Posted by at 2 comments:
Labels:

CARA BUAT MENU BAR DI BLOGSPOT

untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.
oke ini adalah gambarnya



Gemana sob keren kan?
berikut caranya:
1. Login ke akun Blogger sobat
 
2. Sekarang Klik Template
3. Klik EDIT HTML
4. Sekarang Cari Kode </head> agar mudah dalam pencarian tekan Ctrl+f
5. Letakan kode di bawah tepat di atas kode </head>


<style type='text/css'> 
#tabs28 {   float:left;   width:100%;   background:#fff;   font-size:93%;   line-height:normal; border-bottom:1px solid #DD740B;   }
 #tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none;   } 
#tabs28 li {   display:inline;   margin:0;   padding:0;   } 
#tabs28 a {   float:left;   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1uVtn4X3f4b2lVShTECJd-1BMtdVpOm90woqP46y1cQ5XZZX8-WgwxK0q9iYkk21fFjLyxGtXxgVSHHR-DPWQwYiFpezUv0qBqoTsYpVP0fFMt-24ZeLqjhBHirIicm0YGIUhBUER0Hv/s1600/slide-left.gif&quot;) no-repeat left top;   margin:0;   padding:0 0 0 5px;   text-decoration:none;   } 
#tabs28 a span {   float:left;   display:block;   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnKcnE1eGzXm2Nc4FLsKDQO_-iBK062_k7R8TVmeoYtvamEpQn0qTLIWsQ5Vfk4HWF0FhUFn_QpYr-_pBt_8z-P4jAEl8yLf_tawY4n_PK6vUC8bbKt35IGVFl67KJCUleE1v0jpiN6Ji/s1600/side-right.gif&quot;) no-repeat right top;   padding:5px 15px 4px 6px;   color:#FFF;   } 
#tabs28 a span {float:none;}  #tabsI a:hover span {   color:#FFF;   } #tabs28 a:hover {   background-position:0% -42px;   } 
#tabs28 a:hover span {   background-position:100% -42px;   }</style>
Catatan:
Anda Boleh Ganti tulisan 10 dengan yang anda inginkan(fungsinya untuk panjang jarak atas)
Anda Boleh Ganti tulisan 50 dengan yang anda inginkan(fungsinya untuk panjang sebelah kiri) 

7. Sekarang kita menuju ke layout
 
8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript
9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)


<div id="tabs28">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>

</div>
10. Klik Simpan
catatan: ganti tanda # dengan alamat URL
               ganti Link 1 - Link8 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!
Posted by at No comments:
Labels:

Wednesday, 22 January 2014

Bel Pelajaran Dan Pengingat Waktu Sholat Otomatis Gratis

 

Bel pelajaran sebagai tanda dan pengingat Guru, karyawan, dan peserta didik sangatlah diperlukan disekolah, namun sering kali banyak keluhan dari Guru maupun Peserta didik, bel terlambat bunyi, bel kecepetan, ini semua tidak lain karena faktor kelalaian manusia, bisa juga karena petugas keburu setor dan asyik di kamar mandi, mungkin karena kesibukan pekerjaan lain, dsb.

Dengan adanya bel pelajaran otomatis ini diharapkan mampu sebagai tanda dan pengingat aktifitas disekolah, madrasah atau pondok pesantren. Bel ini sebenarnya sudah lama saya pakai untuk sekolah-sekolah yang membutuhkan (tentunya kalau mengundang dan meminta untuk menyetingnya jadi gak GRATIS) hehe...

Software yang saya gunakan ini bukanlah software bel otomatis asli, bukan juga software bel berbayar yang banyak ditawarkan di internet, melainkan software gratis yang disediakan di internet, dan tujuan awal software ini dibuat adalah untuk memberi peringatan waktu sholat otomatis dengan menyesuaikan daerah anda masing-masing (pasti sudah tau atau pernah dengar kan?, atau bahkan malah sekarang sudah terpasang di komputer anda? ). Software ini dibuat oleh programer yang luar biasa baik hati, dan sudah diakui dunia persilatan software beliau adalah Ebta Setiawan dari Jogjakarta, nama softwarenya Shollu, anda bisa mendownloadnya langsung disini.

Okeh... langsung saja, mari kita coba membuat bel pelajaran otomatisnya, saya hanya akan memanfaatkan fasilitas tambahan di program shollu ini (semacam alrm) yang bisa disetting berdasarkan hari, mingguan, bulanan dan untuk audionya sudah mendukung .mp3.
Jadi nanti ketika software ini sudah terpasang di komputer yang sudah disiapkan, maka Bel Pelajaran Otomatis dan Pengingat Waktu Sholatpun (suara Adzan yang merdu) akan berjalan secara otomatis.

Masalah model suara dan musiknya sudah saya siapkan, saya sudah rekaman distudio pribadi anda bisa download koleksi audionya nanti hehe... (isinya mulai dari suara bel untuk jam ke 1, jam ke 2, istirahat, sampai waktunya pulang), nanti bisa anda manfaatkan untuk pengingat waktunya, masalah pengaturan musiknya, pemotongan lagu dan sebagainya bisa anda pakai software gratisan audiocity.

Berikut langkah-langkahnya:
  1. Download dan install program Shollu (download softwarenya disini)
  2. Download koleksi audio bel sekolah disini dan buatlah direktory di D:\Musik Jam Sekolah (nama foldernya sementara samakan dulu dengan yang sudah saya buat ya...? yaitu: Musik Jam Sekolah, copy semua audio yang sudah anda download tadi dan masukan kedalam folder Musik Jam Sekolah).
  3. Download dan masukan file Task.dat berikut (klik untuk download) kedalam C:\Program Files\Shollu3\ kalau ada pertanyaan replace, pilih saja Yes. (sebagai keterangan: Task.dat ini merupakan settingan yang sudah saya buat dengan jenis waktu standar, yaitu masuk jam 07.00 dan contoh ini nanti anda bisa edit semau anda sesuai kebutuhan.
  4. Restart komputer, selesai.
Sekarang bel pelajaran otomatis sudah berjalan di komputer anda, dan siap anda sambungkan ke speaker aktif atau langsung ke amplifier dan hubungkan ke speaker / toa biar suara mengema sampai jauh .

Untuk mengubah waktu yang sudah saya buat, silahkan anda perhatikan video tutorial berikut:


Kalau ada masalah atau pertanyaan bisa anda tulis dikolom komentar.
Semoga bermanfaat.
Posted by at 1 comment:

Cara Mudah Membuat Tanda Tangan Di Setiap postingan Blog



Berbeda dengan pembahasan sebelumnya yang saya bahas masih tentang tanda tangan namun yang pertama tanda tangan tanpa animasi dan agak sedikit panjang atau ribet cara membuatnya baca disini,namun yang sekarang ini cukup praktis dan super cepat di jamin memuaskan deh pokonya,buat kalian yang penasaran gimana sih tanda tangan yang memakai sedikit animasi kita langsung saja menuju TKP.


1. Langkah awal buat dulu tanda tangannya DISINI
2. Maka akan muncul gambar seperti di bawah ini.


Petunjuk penggunaan :

  1. Choose the text of your signature, isikan nama kalian pada kotak yang di sediakan.
  2. Choose a font and a size for the text, pilih jenis hurup yang kalian inginkan berikut ukurannya.
  3. Choose the color of your sugnature, pilh warna yang yang kalian sukai.
  4. Choose a figurine, pilih gambar animasi tanda tangan yang kalian sukai.
3. Setelah selesai kemudian klik CREATE dan kalian akan di arahkan kepada gambar di bawah ini.
4. Klik tulisan Download this signature.
Pembuatan tanda tangan sudah selesai kini kita menuju pada langkah selanjutnya cara memasangnya pada blog.
Cara Memasang 
1. Upload dulu gambar yang tadi di download ke situs yang tersedia untuk menggambil link gambar.
2. Login ke akun blog kalian.
3. Pilih menu Template > Edit HTML ( centang expand widget templates ).
4. Cari kode di bawah
<p class='post-footer-line post-footer-line-1>
atau
<div class='post-footer-line post-footer-line-1'>

5. Copy kode di bawah dan letakan tepat di atas kode nomer 4.
<img src='LETAKAN URL IMAGE DISINI' style='border: none; background: transparent;' /><br/>

6. Terakhir klik save dan silahkan lihat hasilnya.
Demikianlah tutorial kali ini tentang Cara Mudah Membuat Tanda Tangan Di Setiap Postingan Blog semoga dapat bermanpaat.
Posted by at No comments:

Cara Memasang / Membuat Tanda Tangan di Blog



Cara Memasang / Membuat Tanda Tangan di Blog
1. Kunjungi situs http://mylivesignature.com
2. Klik pada tombol bertuliskan Proceed untuk membuat tanda tanda tangan tanpa perlu registrasi.
tanda tangan

3. Setelah itu, klik tulisan Using the signature creation wizard.
tanda tangan

4. Silahkan masukkan nama sobat di kotak yang di sediakan dan klik Next Step
tanda tangan

5. Pilih jenis huruf yang di inginkan dan klik Next Step.
tanda tangan

6. Setelah itu, tentuhkan ukuran tanda tangan yang di inginkan dan klik next step.
tanda tangan

7. Kemudian sobat akan melihat tampilan seperti berikut yang bertanda bahwa tanda tangan sobat akan segera jadi. Pilih warna background dan warna tanda tangan yang di inginkan.
tanda tangan

Tambahan :
Untuk warna background direkomendasikan menggunakan background ( latar ) transparan agar nantinya cocok dengan semua warna.

8. Atur kemiringan ( slope ) teks dan klik Next Step
tanda tangan

9. Nah dengan demikian maka tanda tangan online sobat telah berhasil dibuat.
tanda tangan 


Tambahan :
Klik Copy Image Location untuk mengambil URL gambarnya
Klik Save Image As untuk mendownload Tanda Tangannya.

Beginilah hasilnya
Posted by at No comments:

Monday, 20 January 2014

Cara Membuat Chat Box Di Blog :



1. Buka Website ini ► www.cbox.ws
2. Klik tombol Sign Up di kanan atas Website tersebut.
3. Kemudian akan muncul tampilan seperti ini. ( Lihat Gambar )


Cara Membuat Chat Box Di Blog

4. Lalu isi pada kotak - kotak tersebut dan centang, sehingga menjadi ini. ( Lihat Gambar )

Cara Membuat Chat Box Di Blog

Keterangan:

  • Cbox Name diingat ya, karena itu akan dijadikan ID Login kalian.
  • Emailnya disensor ya.

5. Kemudian Klik " Create My Cbox! "
6. Akan muncul tampilan seperti ini jika anda berhasil. ( Lihat Gambar )

Cara Membuat Chat Box Di Blog
7. Setelah itu Cek Email anda dan Login.
8. Kemudian pada halaman utama Cbox tersebut. Klik " Publish! " yang berada di Kanan Atas.
9. Pada halaman baru tersebut, Lihat Bagian ini. ( Lihat Gambar )

Cara Membuat Chat Box Di Blog

10. Kemudian Copy dan Paste Kode tersebut di Blog anda. Jika bingung baca artikel ini Cara Edit Blog.
11. Selesai.
Posted by at No comments:
Subscribe to: Posts (Atom)