Membuat Navigasi Dropdown Sliding Web Menu tanpa Flash dengan JQuery

Membuat tampilan web menu /Navigasi yang interaktif tidak hanya dengan Flash saja, melainkan anda bisa membuat Navigasi menu dengan Script jQuery. Navigasi ini akan tampil secara dropdown saat mouse anda arahkan pada Menu tersebut.
Berikut adalah Tutorial untuk membuat Effect Interaktif Drop Down Navigasi  dengan CSS dan script jQuery.

Struktur HTML

hal pertama yang perlu anda lakukan adalah meload css file yang kita buat ( jika code/file css berada di luar html ( external css) pada bagian HEAD

1	<link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8">

2	<script type="text/javascript" src="/jquery-1.3.2.js"></script>

kemudian Menambahkan / membuat kode HTML sederhana pada halaman web dan menambahkannya diantara bagian BODY atau dimana menu ini nantinya akan ditampilkan. Penggunaan css class span di dalam list element untuk tiap Navigasi/Menu item anda.

1	<ul id="navigation">

2	<li class="home"><a><span>Home</span></a></li>

3	<li class="about"><a><span>About</span></a></li>

4	<li class="search"><a><span>Search</span></a></li>

5	<li class="photos"><a><span>Photos</span></a></li>

6	<li class="rssfeed"><a><span>Rss Feed</span></a></li>

7	<li class="podcasts"><a><span>Podcasts</span></a></li>

8	<li class="contact"><a><span>Contact</span></a></li>

9

</ul>

CSS Menu Navigasi

Dibawah ini contoh penggunaan CSS untuk navigasi dari HTML diatas. Anda dapat menyesesuaikannya untuk jarak dan letak dari navigasi ini.

01	ul#navigation {

02	position: fixed;

03	margin: 0px;

04	padding: 0px;

05

top: 0px;

06	right: 10px;

07	list-style: none;

08	z-index:999999;

09	width:721px;

10

}

11	ul#navigation li {

12	width: 103px;

13	display:inline;

14	float:left;

15

}

Pada CSS diatas menggunakan z-index:999999 yang tinggi. Ini dimaksudkan agar Menu tampil secara "Floating" di atas dari semua element yang lainnya.
Untuk membuat agar menu tampil horisontal maka pada CSS kita akan mengeset element menjadi inline, seperti pada contoh css dibawah ini :

01	ul#navigation li a {

02	display: block;

03	float: left;

04	margin-top: -2px;

05	width: 100px;

06	height: 25px;

07	background-color: #E7F2F9;

08	background-repeat: no-repeat;

09	background-position: 50% 10px;

10	border: 1px solid #BDDCEF;

11	text-decoration: none;

12	text-align: center;

13	padding-top: 80px;

14

}

Selanjutnya untuk memperindah tampilan navigasi anda, kita tambahkan Rounded Border dan background dengan CSS serta membuat item terkesan transparant :

01	ul#navigation li a {

02	display: block;

03	float:left;

04	margin-top: -2px;

05	width: 100px;

06	height: 25px;

07	background-color:#E7F2F9;

08	background-repeat:no-repeat;

09	background-position:50% 10px;

10	border:1px solid #BDDCEF;

11	text-decoration:none;

12	text-align:center;

13	padding-top:80px;

14	-moz-border-radius:0px 0px 10px 10px;

15	-webkit-border-bottom-right-radius: 10px;

16	-webkit-border-bottom-left-radius: 10px;

17	-khtml-border-bottom-right-radius: 10px;

18	-khtml-border-bottom-left-radius: 10px;

19	opacity: 0.7;

20	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

21

}

Untuk memperindah tampilan effect text link Menu dari tiap tiap item element kita memperindah dengan menambahkan images background yang akan terlihat seperti Icon pada tiap link menu.

01	ul#navigation .home a{

02	background-image: url(home.png);

03

}

04	ul#navigation .about a      {

05	background-image: url(id_card.png);

06

}

07	ul#navigation .search a      {

08	background-image: url(search.png);

09

}

10	ul#navigation .podcasts a      {

11	background-image: url(ipod.png);

12

}

13	ul#navigation .rssfeed a   {

14	background-image: url(images/rss.png);

15

}

16	ul#navigation .photos a     {

17	background-image: url(camera.png);

18

}

19	ul#navigation .contact a    {

20	background-image: url(mail.png);

21

}

untuk effect mouse over link menu dapat di melakukan penggantian warna background yang berbeda

1	ul#navigation li a:hover{

2	background-color:#CAE3F2;

3

}

Selanjutnya kita akan melakukan span css untuk tiap item pada element menu

1	ul#navigation li a span{

2	letter-spacing:2px;

3	font-size:11px;

4	color:#60ACD8;

5	text-shadow: 0 -1px 1px #fff;

6

}

pekerjaan yang terakhir yaitu menambahkan effect sliding/ dropdown dengan menambahkan function script jQuery pada html yang kita buat.

01	<script type="text/javascript">

02	$(function() {

03	var d=300;

04	$('#navigation a').each(function(){

05	$(this).stop().animate({

06	'marginTop':'-80px'

07	},d+=150);

08

});

09

10	$('#navigation > li').hover(

11	function () {

12	$('a',$(this)).stop().animate({

13	'marginTop':'-2px'

14

},200);

15

},

16	function () {

17	$('a',$(this)).stop().animate({

18	'marginTop':'-80px'

19

},200);

20

}

21

);

22

});

23

</script>

Untuk jelasnya anda dapat mendownload contoh file dari navigasi menu interaktif ini.

DEMO - DOWNLOAD

Read more

Mengoptimalkan Publikasi Bisnis melalui Press Release

Seperti layaknya Majalah / Koran harian, Press Release lewat jaringan Internet menjadi alat yang sangat berpengaruh kuat sebagai media promosi dalam mengembangkan usaha ataupun dalam suatu usaha dalam menginformasikan Acara, promo produk terhadap masyarakat umum.
Dengan mempublikasikan peruhanan serta web bisnis anda lewat press release secara rutin & berkesinambungan , target pasar yang anda raih akan lebih tepat sasaran hal ini disebabkan olehkarena pembaca mendapatkan informasi yang lebih relevan dari sumber terpercaya.
Untuk dapat lebih optimal pada target pasar bisnis anda, melakukan Optimalisasi pada Tulisan /isi press release tersebut sangat penting.

Optimalisasi bisa dilakukan dengan menyisipkan alamat url website bisnis anda serta menambahkan beberapa "kata kunci /Keyword" pada content berita yang akan dipublikasikan. Dengan Optimalisasi tersebut akan membantu bisnis anda pada proses SEO di mesin pencarian terkemuka seperti google, yahoo dan bing.
Secara garis besar/umum format dari suatu Press Release adalah sebagai berikut :
Headline    : __________ memuat judul
Summary  : __________ memuat ringkasan dari isi press release ( Intro text)
News body: __________ memuat Isi secara penuh press release anda (Full Text)
Industry   : __________ memuat Kalsifikasi /jenis publikasi anda
Contact     : __________ memuat alamat kontak

Ada beberapa hal yang perlu anda lakukan sebelum anda mempublikasikan bisnis anda ke press release, yaitu;

• Pastikan bahwa isi berita /content yang anda buat telah diatur secara seimbang antara penggunaan  Keyword dengan alur kalimat yang anda buat. Hal ini diperlukan agar konten berita yang anda tulis dapat terbaca dengan baik dan tidak berkesan hanya mengulang-ulang suatu kalimat tertentu, atau pengulangan banyak keyword tanpa dengan alur kata/paragraf yang jelas dan tepat sasaran akan membuat pembaca memberikan respon negatif terhadap bisnis anda.
• Buatah beberapa variasi konten, hal ini akan memudahkan anda dalam memilih yang mana yang terbaik untuk dipublikasikan ke masyarakat luas nantinya.
• Cantumkan alamat kontak anda yang jelas agar pembaca dapat melakukan reaksi secara cepat saat menghubungi anda.
• Cari dan lakukan survey pasar terhadap jasa media dimana anda nantinya menerbitkan konten berita anda.
• Pilih jenis dari jasa media publikasi tersebut sesuai dengan jenis usaha /web bisnis anda atau sesuai target pasar anda.
• Tanyakan pada mereka dimana saja kontent anda akan diterbitkan, dan berapa Rasio klik pengunjung dari konten yang anda diterbitkan.
• Yang terakhir gunakan dan pasang Web Analytic untuk dapat melakukan track visitor dari press release yang anda muat. Dengan memasang web analytic anda akan dapat menentukan langkah selanjutnya apakah jasa media tersebut dapat membantu anda dalam investasi yang anda lakukan (ROI).

Setelah anda siap anda dapat mempublikasikan lewat jasa/ Agent atau penyedia layanan untuk Press Release seperti pada Newswire, Newsletter, Newspaper, Radio bahkan pada TV dan media Broadcast.
Press release yang di submit melalui penerima jasa layanan kusus, memungkinkan anda mensubmit dengan gambar/photo serta beberap penyedia jasa layanan dapat dengan mensertakan logo sekaligus dan mampu mensubmit ke ratusan media , namun  untuk hal seperti ini biaya relatif lebih tinggi dan setara dengan anda mempublikasikan lewat media koran/majalah.
Jika melakukan submit secara manual ( satu demi satu) ke jasa layanan Gratis akan memerlukan waktu lebih banyak dan juga tentunya di imbangi dengan beberapa keterbatasan.
Untuk Free submit ada banyak bertebaran di internet, anda hanya tinggal Search sesuai dengan selera melalui mesin pencarian.

Author by : http://www.cmsplaza.com

Read more

Download Template Gratis untuk Wordpress Blog

Pada halaman ini kami memuat Template gratis yang berkualitas tinggi dari para pembuat design untuk Wordpress tema anda.  Tema-tema ini telah kami pilih dan diuji. Semua Theme Wordpress Template ini  dapat di download secara cuma-cuma, disesuaikan dan digunakan secara gratis dalam website/Blog yang anda miliki.

Theme /Template yang kami listing disini adalah dengan konsep minimalis sehingga memudahkan bagi pemula dalam melakukan perbaikan.penyesuaian kembali.

---

Download : Blogging Pro Theme [ Demo ]

---

Download : Illacrimo [ Demo ]

---

Download : FFF Lemon Twist

---

Download : Gossip City [ Demo ]

---

Download : Dilectio [ Demo ]

---

Download : dfMarine [ Demo ]

---

Download : WP Polaroid [ Demo ]

---

Download : Simpress [ Demo ]

Read more

Menambahkan Images SlideShow dengan TinySlider Script

Pada artikel kali ini akan membahas bagaimana menambahkan/membuat effect animasi dari berberapa image sebagai slideshow.

Anda bisa manfaatkan TinySlider Script  berikut untuk dipakai di halaman website yang anda bangun agar kelihatan lebih menarik.
TinySlider Script  ini telah dirancang secara otomatis untuk Rotasi image/photo, auto resume, navigasi untuk penomoran permindahan slide serta tampilan dapat di atur baik secara Horisontal maupun Vertical.

Di dalam penggunaanya anda tinggal menyesuaikan/mengganti  code berikut sesuai keperluan :

1	var slideshow=new TINY.slider.slide('slideshow',{

2	id:'slider', // ID  of the parent slideshow div

3	auto:3, // Seconds to auto-advance,  defaults to disabled

4	resume:true, // Resume auto after interrupted,  defaults to false

5	vertical:false, // Direction, defaults to false

6	navid:'pagination', // Optional ID of direct navigation UL

7	activeclass:'current', // Class to set on the current LI

8	position:0  // Initial slide position, defaulting to index 0

9

});

SLIDESHOW DEMO
DOWNLOAD SCRIPT

Read more

Membuat MAP Interactive dengan Javascript HTML5

Anda ingin membuat website dengan disertai Map/Peta interactive seperti Google Map ?
Kini telah tersedia tool sederhana dan gampang dipergunakan untuk membuat Map/Peta dimana anda bisa menambahkan/memakai Icon anda sendiri sesuai dengan yang anda inginkan. Leaflet adalah sebuah javascript API Opensource yang dapat anda download dan pergunakan secara gratis.
applikasi Leaflet yang dibuat oleh CloudMade dapat dioperasikan dari desktop, web browser dan Mobile device. Map Interactive ini di dalam penggunaannya disertai dengan HTML5, sehingga map ini mudah untuk di tampilkan dari berbagai web flatform. Fitur terbaiknya adalah ukuran file yang sangat kecil, performance yang baik, fleksibel dan mudah dipergunakan.

CONTOH /DEMO INTERACTIVE MAPS

DOWNLOAD DISINI

Read more