CIKI-CIKIBUNG
BELAJAR MEMBUAT BLOG DAN WEBSITE
DENGAN HTML, PHP, MYSQL, FLASH DAN CSS


Membuat Menu Navigasi Dengan Subkategori Pada Blogger

Membuat Menu Navigasi Dengan Subkategori Pada Blogger

 Membuat Menu Navigasi Dengan Subkategori diperlukan jika sobat ingin membuat menu yang bercabang-cabang. Misalnya Sobat mempunyai menu dengan kategori BERITA dan di dalamnya ada subkategori1 dan subkategori1.1 dan seterusnya. Contohnya seperti ini :

 # Kategori : 
  - Berita 
    
    ## Subkategori-1 : 
       - Olahraga
         ### Subkategori-1.1 :
           - Sepakbola
         ### Subkategori-1.2 :
           - Basket
         ### Subkategori-1.3 :
           - Volley

      ## Subkategori-2 : 
        - selebritis
          ### Subkategori-2.1 :
           - Selebritis Lokal
          ### Subkategori-2.2 :
           - Selebritis Luar
     
      ## Subkategori-3 : 
        - Fashion
          ### Subkategori-3.1 :
           - Mode Busana
          ### Subkategori-3.2 :
           - Promo
          ### Subkategori-3.3 :
           - Pagelaran Busana

 Maka bentuk kode dasar HTML nya seperti ini (sebelum dibuat link) :


Dan dibawah ini adalah contoh kode HTML untuk Membuat Menu Navigasi Horizontal Dengan Subkategori yang sudah ditamabahi style CSS dan LINK.


Ini adalah kode CSS nya 

/* CSS Menu Navigasi Horizontal Dengan Subkategori */
#cat-nav {background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #BFBDBF),
color-stop(1, #EFEAEF)
);
background-image: -o-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -moz-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -webkit-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -ms-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: linear-gradient(to bottom, #BFBDBF 0%, #EFEAEF 100%);
margin-top:20px;padding:0;height:39px; width: 100%; position: relative; text-transform: uppercase; border-bottom: 5px solid #999999;}

 #cat-nav a { color:#666666; text-decoration:none; border-right: 1px solid #999999;}
#cat-nav a:hover { color:#fff;background:#333333;}
#secnav a:active, #secnav a.active {background:#999999; z-index:0;}
#cat-nav li:hover { background:#999999; height:39px; margin-top:0;}
#cat-nav a span { font-family:  tahoma, verdana, arial,Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff;}
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:39px; background:#; }
#secnav a { font-family: arial, tahoma, Verdana,Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:15px; display:block; z-index:100; padding:0 15px; line-height:39px; text-decoration:none;}
#secnav li { float:left; width: auto; height:43px; margin:0; }
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:39px; border-top: 1px solid #000;}
#secnav li ul li a  { font-family: Helvetica, Geneva, Verdana,Arial, "trebuchet MS", Tahoma,  sans-serif; width:230px; line-height:39px; padding:0 10px; font-size:12px; font-style:normal;  color:#000;  background:#E0DCE0; text-spasing:1.5em;}
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em;}
#secnav li:hover ul, #secnav ul li a ul a:hover, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto;}
#secnav li:hover,#secnav li.hover  { position:static;}
#cat-nav #secnav {width:100%;margin:0 auto;}
#secnav li ul li a:hover { background:#000; height:39px;}
#cat-nav li:active, #cat-nav li.active {background:#999999;}
Cara mengaplikasikannya pada blog :
1. Ubah kode HTML diatas sesuai dengan menu navigasi sobat.
2. Setelah selesai lalu buka template blogger sobat dan letakkan kode HTML tersebut tepat dibawah tag </header>
3. Ubah kode CSS diatas jika ingin tampilannya sesuai dgn keinginan sobat (ukuran, warna, teks dll). Jangan takut umtuk mencoba. Tp jangan lupa save dulu template sobat agar lebih aman
4. Letakkan kode CSS tsb diatas kode ]]></b:skin> yang ada pada template sobat.

 Inilah tampilan dari Menu Navigasi Dengan Subkategori dengan menggunakan kode HTML dan CSS diatas. Ini menu navigasi toko online yang menjual produk-produk herbal

 Demikian cara Membuat Menu Navigasi Horizontal Dengan Subkategori Pada Blogger. Jangan lupa memberikan komentar ya sob :)

'
2 comments:
Label: , , , ,

Membuat nomer halaman pada blogger

Membuat nomer halaman pada blogger

 Membuat nomer halaman pada blog sebenarnya mudah (tapi bagi yang sudah tau, hehe..). Sobat hanya perlu menambahkan beberapa baris kode CSS dan HTML saja. Kode CSS ini dibuat dan diletakkan pada template blogger  untuk mengganti tampilan "HOME", "NEXT" dan "PREV" yang merupakan bawaan dari template default blogger.

 Contoh tampilan nomer  halaman pada blogger seperti yang ada di blog ini ( gambar disamping), dan inilah cara membuatnya :

 1. Letakkan kode css dibawah ini diatas tag </head> pada template blogger sobat.

 /* CSS untuk Nomer Halaman */
#blog-pager {
clear: both;
margin: 30px auto; 
text-align: center; 
padding: 30px;
} 

 .blog-pager {
background: none;
} 

 .displaypageNum a, .showpage a, .pagecurrent {
padding: 5px 10px;
margin-right:5px; 
color: #fff; 
background-color: #800080; 
border: 1px solid #404042;
} 

 .displaypageNum a:hover, .showpage a:hover, .pagecurrent {
background:  #D01414;
text-decoration: none;
color: #000; 
border: 1px solid #800080;
} 

 #blog-pager .showpage, #blog-pager, .pagecurrent {
font-weight: bold;
color: #000;
}
.showpageOf {
display: none!important
} 

 #blog-pager .pages {
border: none;
}


2. Letakkan kode HTML dibawah ini diatas tag </body> pada template blogger sobat

<div class='cleared'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>

/*<![CDATA[*/
var perPage=4;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Prev';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation2.js'/>
</b:if>
</b:if>
</div>

Penjelasan untuk kode CSS diatas:
Untuk mengganti warna latar belakang kotak-kotaknya, tinggal mengubah kode warna pada "background-color". Dan untuk mengganti warna teks/angka tinggal mengganti warna pada "Color".

 CATATAN :
Hapus atau non aktifkan fungsi blog-pager bawaan dari blogger, jika sobat ingin menon aktifkan saja tanpa menghapus caranya seperti ini :

/*
#blog-pager-newer-link{float:left}
#blog-pager-newer-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqICVP0VL-IPJtd0a_H9Kz3g1TokB36MEmMLP9S-51obs6GXAFshhf3vANxrcSrp5s3oLLLb5nddlF73MQiy60-_o8f0lZeLcjJBr-bcln-XqxwN5S0nYgpDcmETyNYH_6MOE6UCj3IhP/s1600/arrow-leftpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
.home-link{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEsztky9Lmm7rJGm_kZTMVm6Nmsfd3OM9-Nghham5zuCPNFWv65EDvW-YwGeJRaWuJF463kQRn5ECHuAYPv2WxX-3VeeYehNSHC-t7AL2BMyswc5dzIcnDdhFZFxTZuWztM9FWdU9oKtH/s1600/homepink.png) no-repeat scroll center center; display:block; height:32px; margin:0 auto; text-indent:-9999px; width:32px}
#blog-pager-older-link{float:right}
#blog-pager-older-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinstlw5GVEO5RPVuUwhPSQXem0vbYZEf_2yxuM8BVFA60M0MNs_W-lQCmrY3Huy-W0qi1-3kt6qtwZoaJ3fIskLE-KvKMihcFEyOESVu5GB86JZAmILibrF6FVy5ndkK7MtLvvVYyXCHbw/s1600/arrow-rightpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
#blog-pager{padding:30px; clear:both; text-align:center}
feed-links{}
*/

 tanda garis miring dan bintang pada kode diatas berfungsi untuk menon aktifkan kode tsb.
Penjelasan untuk kode HTML diatas:
var perPage=4;  --> ini adalah kode untuk menampilkan jumlah postingan pada tiap halaman. Sobat tinggal menggantinya.

var numPages=6; --> ini kode untuk menampilkan jumlah maksimal kotak yang terlihat di halaman

CATATAN :
Sesuaikan jumlah pos per halaman yang ada pada "setelan" di template sobat. Silahkan lihat di "setelan" lalu klik "pos dan komentar"


 Jangan lupa kasih komentar ya :)


'
No comments:
Label: ,

Cara Mudah Membuat Animasi GIF 3D Menggunakan Aplikasi XARA

Cara Mudah Membuat Animasi GIF 3D Menggunakan Aplikasi XARA 3D Maker

Membuat animasi 3D (3 Dimensi) baik berupa gambar animasi ataupun teks animasi saat ini semakin mudah. Jika sahabat lihat animasi teks disamping, berupa teks yang muter-muter (pusing deh itu teks hehe..) itu 90% yang mengerjakan bukan saya lho, tapi aplikasi animasi GIF 3D yang namanya XARA. ya nama aplikasinya XARA, bukan Sarah, apalagi Farah :) , jangan sampai salah sebut, nanti mereka GR.

Kembali ke XARA.
Aplikasi XARA 3D Maker ini sangat mudah digunakan. Contohnya adalah teks animasi "ciki-cikibung" yang sedang muter-muter itu. Saya cuma menuliskan teks, lalu selanjutnya memberikan efek-efek / design untuk tulisan tersebut, maka jadilah teks animasi tersebut.

Dibawah ini adalah tampilan XARA 3D Maker


Jika sahabat ingin membuat teks animasi 3D dengan mudah, maka gunakan saja aplikasi XARA 3D Maker ini. Sahabat tinggal mencoba-coba animasi seperti apa yang sobat mau. Dan dibawah ini saya berikan link untuk mendownload aplikasi XARA 3D ini.

DOWNLOAD

Happy Blogging and Design,
Selamat muter-muter :) , and jangan lupa kasih komentar ya.

'
2 comments:
Label: , ,

Cara Membuat Efek Zoom pada Image

Cara Membuat Efek Zoom pada Gambar atau Image

Membuat efek zoom agar sebuah gambar terlihat lebih besar mungkin kita butuhkan bila tidak ingin gambar tersebut mengganggu tampilan awal dari halaman web atau blog.

 Hal ini perlu diakukan karena ukuran gambar yang besar akan membuat perhatian pengunjung atau pembaca jadi lebih terfokus pada gambar, bukan pada artikel yang ditulis. Tapi masalahnya di sisi lain kita juga ingin agar setelah pembaca memahami apa yang kita tulis lalu kemudian melihat gambar yang kita pasang, agar pembaca lebih mengerti apa yang ingin kita sampaikan. Lalu bagaimana cara menyiasatinya

 ya, kita harus memasang gambar dengan ukuran kecil tapi bisa diperbesar, atau istilahnya gambar atau image tersebut bisa di-zoom, agar perhatian pembaca jadi lebih terfokus pada tulisan, baru kemudian perhatiannya bisa beralih ke gambar atau image yang kita pasang pada artikel.

 Dibawah ini saya memberikan contoh gambar yang akan di-zoom dengan 2 cara. Coba arahkan cursor anda diatas gambar, lalu lihat apa yang terjadi pada gambar tersebut. Sahabat jangan lupa memberikan komentar ya




Contoh penerapannya bisa dilihat disini : http://arlojimurah-original.blogspot.com

 Bersambung... :)

'
3 comments:
Label: , , , ,

recent comment

Modify by Eko Sugiarto Power By Blogger