Menu Navigasi CSS Mac Dock

Akhirnya kesampaian juga saya membuat postingan ini, bagaimana cara membuat Menu navigasi CSS Mac Dock mungkin menu navigasi yang satu ini sudah sering kita liat berkeliaran di internet dan bermacam metode cara pemasangannya, nah kali ini kita coba untuk membuatnya ya walau pun postingan saya kali ini aga telat dari pada yang lain mohon di maafkan :), ya udah dari pada basa-basi terus langsung saja kita buat berikut langkah-langkahnya. o.iya liat dulu demonya sebelum mencoba bagi yang belum tau, tapi bagi yang sudah tau langsung aja.

• Masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* ---------------
http://www.amcied-logica.blogspot.com/
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOf2gR0Ze6sbgSdMu9I60wIASMuoIvyDv8tyUQq31qXXWw-nmLtkbc4erHuSTQM6HTdd1L3pCaxYN8g06GCk3lHUrNrwJwbyY1Wd4cOjuF0nwvVvZtSki8RtAl69jKa9Mvc3Vc-2rTEk/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}

• Selanjutnya Copas lagi script dibawah ini, diatas code </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://amcied-logica2.googlecode.com/files/interface.js"></script>

• Lanjut lagi di bagian Body template, letakkan script di bawah ini, di atas </body>

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

• Simpan templet, setelah itu copas lagi script di bawah ini dan letakkan dimana saja sesuai kesukaan teman-teman, disini saya meletakkannya di HTML/JavaScript sebagai contoh.

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7rGLNK-3mZB0KSHILNCVxS2eqlONxt-cIHInDWxRdVqKArgGV3fkya0n4J4LRsZtt1xvyDKiO8RtJoMzM4h48E96DadXZho8c6pWDE0AT82RjtSByeNA0cKJXaB1GmJXYmr168HMnKs/s1600/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnuHyAQa0ESEHMMXpPGp1iM2XCy510IRIyNmdSMxn3Obu9vgeSSfFnCZbEZ6my9cKO5hputGTqZgI4d7DsPY_-cK2JxtBarbXGW-1DCWK6jy0DYAiDeLxxdp0IHOPa8aAKl1ILRpZXbY/s1600/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzNA-BDUOCkFCkAEOxsNyrtFW4mziOujHTjLdo8joz5fTuEBO_A3ngX2-OpSqtTKfElnLQTxtyp02ykKtGwb3BDVnG2alJ4owDrecfdRXik7mbgVmOBnFub5vQT2YvfYbRh9XEZdfSkc/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKd0iuSDr54h5FvRCW_hYu8MSfNkYKO2xWoaK7yRfy-jrRFUj-97YoD7s0XGqw0fcdMNjurGqLzV8f2ZgvnkNW54BOKAgkopjQT-YeTGVWDc_6njx-14wUxfBSW-PBtwU_W_q0RFLwUr0/s1600/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhek3ZcsgH9FOcbR1-XpagVQR-oGI39s0o2SyJQ_4yGHaHYkr-fsEAu2IoAhL2XoispMeb-SqIaY-LSmploKHKS5XmqJ_jHBDLWHOWSZErBQCCpn_afcpqHrUCw5FDabu7ujGQOsn2ZFdM/s1600/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijPJOoFVbzfA08EJymwvTwMqxO66gRLUHyylsgYO-XplmCjZ8BvLmshxQiHBOJ1qe4Irja4jo3HcStMZaT-mw7lchPYlyTEtu-hJGyOPJSRa3nl2RhJD0bjSz9-KJAf9W6Uz2s0t6ZhQ/s1600/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0KO2lysRLy8-mcGrPGpv-m9e1CxleufTpTvwWLCC7YaPjtU5OsdELEG71lRlD6nprMXA0GO8DbKw0iX9HlOx97qcA2SulFcaHIfZ_M3uRD_e4D9MVvIS7w2-7CiTPktey5iyByYV8q8/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_6LvKpo2kMUAM_PrHM1ED2gFdfIGJJ1iZlA72YH6N6vckronU4dxhQJWICZgbiLzd92Srg-7TE0sb4FXMvMPlG0IGjYbOvaH_Bry5kW1PHC9OS-byW5E-hRfsmXWgw0KVvWbhZElj8E/s1600/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBWCZQSHBoCsVdfxu3nFFTYccnkvhPdZAR-sUCMKTqY6zJnaxItv7RHSv3eeOp759FgjBZrjQ0MQwjf81mPJr0WApj1Np4MVSZWQrPQ_LnKDOgVMUt2xOryJDevA8qYiWm8UAioOGxTg/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>

Selesai...!!! semoga bermanfaat.. :)

Read More..

Membuat Menu Rocking and Rolling

Selamat malam sahabat blogger gimana kabarnya, semoga sehat selalu ya dan semoga tidak pernah bosan untuk membaca postingan saya, untuk sahabat blogger mungkin sudah tidak asing lagi mendengar kata menu navigasi, untuk postingan saya kali ini kita coba untuk membuat menu rocking & rolling. Menu ini sangat cocok buat sahabat-sahabat blogger yang suka mempercantik tampilan blognya, cara pembuatannya sangat mudah tinggal mengikuti langkah-langkah di bawah ini, yuk langsung kita mulai aja.

Sperti biasa saya tidak bosan-bosan untuk mengingatkan sebelum teman-teman mencoba tutorial ini mending kita lihat dulu demonya :

Nah sekarang kita buat menu seperti demo diatas.

• Seperti biasa masuk ke Edit HTML cari code ]]></b:skin> lalu copas script di bawah ini di atas code tadi.

/* -------------------------
amcied Logica
----------------------------------------------- */
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxn4sjWELNBhrRrCSfq52M5XZdUFRTiMImI7nrWOSfk8Bw7hMQWRm2BO4CR5YxUTBN48I3ugWscNmYYydaNItvCnv9jE8_BDl60_AdGojV-4Y1PSFOdmQDmRT0sMl6YmU7LJqlIg3ya4/s1600/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKNZiaZyIs0cKIl9qUMukKobBiUIosAnzV8ZRd35VXtwqn6iaX0jhmM9Snry2wbV4a_B6hyunAuHySoxiUrwF_vPeBXZ3FdGecwKnxlElMApKidjW4BNlWkuMM7QGIxCbkHiKcBhVN2E/s1600/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkaUegICBWXUdaPh6KyJMjUeAkzReLIMRGTBK1jUaYSFQSUyCU7zqIWD7L6pp5XhxDZutvokcaa2pndbcnVO7kLEh8R1XQGw-MqIjDhUvJhxWR_hav-TZ_WIoHKFS5B0EZQHQEeMGrIE/s1600/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF1sEwSgJ7TzGD2i5sCKCEPOAbZ-61fzXSQOa4Yk9u7azFiPuLgUAFw3Cqb60ZO7H5kDk2Gi17qt413FHitB6Lm1uVeHk69gGntXC-Y_AR8eoPlyXfUAwznXMKtN8mHpSEAVcDnlo_PGY/s1600/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVKF7dYSTkegYO6Q2Pw1rympwTYAGrX1LxpCRWvTapVC-sCTcBahPseiRfee8JR7xvaB2gKPRJC7QyzsWmMbHdQuNw_NxgVITs35lDJubjUL1sxcfDLGB8uvgFQBZpgq6zxEvXx7vR6yk/s1600/photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

• Selanjutnya copas lagi script di bawah ini di atas code </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://amcied.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script>
<script src="http://amcied.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>

• Yang terakhir copas script di bawah ini di mana saja yang teman-teman suka, tapi di sini saya mencoba copas di HTML/JavaScript

<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text" />
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">About Us</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Photo Profil</a>
<a href="#">Images Archives</a>
</p>
</div></div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Home</h2>
<p>
<a href="#">Kategori</a>
</p>
</div></div>

• Selesai, dan lihat hasilnya.

Selamat mencoba dan Semoga bermanfaat,...!!!

Read More..

Mengubah Warna Font pada Blog

Bagi teman-teman yang tidak puas dengan pengaturan default, Sebenarnya blogger juga menyediakan beberapa fasilitas ini. Salah satunya, agar tampilan tulisan pada posting terlihat lebih menarik, kita bisa merubah warnanya sesuka kita. Untuk kali ini teman-teman bisa mengubah warna font pada postingan dengan cara memasang widget tambahan. Dengan widget ini yang dapat mengubah warna font bukan hanya admin pengunjung pun bisa merubah warna sesuka mereka, demi kenyamanan dalam membaca artikel.

Seperti biasa sebelum teman-teman mencoba mending lihat dulu demonya dari pada menyesal kemudian,hehee

Gimana apa kah teman-teman tertarik ingin mencobanya, bila tertarik langsung di coba aja berikut langkah-langkah membuatnya :

• Masuk ke Edit HTML kemudian copas script di bawah ini di atas </head>
  

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

• Setelah itu simpan template lanjutakan ke Elemen Laman.
• Tambahkan gadget HTML/JavaScript, copas script dibawah ini kedalamnya.

<!-- Code Begins -->
<!-- http://amcied-logica.blogspot.com -->
<style type="text/css">
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}

#fcw-black { background: #000000 !important; }
#fcw-white { background: #088A08 !important; }
#fcw-blue { background: #0066CC !important; }
#fcw-gray { background: #666666 !important; }
#fcw-red { background: #ed1c24 !important; }
#fcw-yellow { background: #ffff00 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});
$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#088A08" });
return false;
});
$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});
$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
$(" #fcw-color #fcw-red ").click(function() {
$(" .post-body ").css({ color: "#ed1c24" });
return false;
});
$(" #fcw-color #fcw-yellow ").click(function() {
$(" .post-body ").css({ color: "#ffff00" });
return false;
});
});
</script>

<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Ganti warna tulisan </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">green</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
<li> <a id="fcw-red" href="#">red</a> </li>
<li> <a id="fcw-yellow" href="#">yellow</a> </li>
</ul>
</div>
</div>
<!-- Code ends -->

• Selesai deh, tinggal di lihat hasilnya.

Semoga Bermanfaat..!!! selamat berkreasi.. :)

Read More..

Menu Navigasi JQuery yang Berbeda

Ketika merancang sebuah situs baru, web designer biasanya menghadapi pertanyaan: navigasi vertikal atau horizontal? Ada pro dan kontra untuk kedua solusi ini. Salah satu contoh yang navigasi horizontal membatasi jumlah link anda karena memiliki lebar halaman yang terbatas. Ini biasanya diselesaikan dengan menambah drop down sistem pada menu navigasi. Dalam tutorial ini, kita akan menggunakan jQuery untuk membuat sistem navigasi multi-lapis yang berbeda dari jenis-jenis menu navigasi horizontal yang sering kita ketemui.

Berikut beberapa langkah untuk membuatnya :

• Tambahkan Script JQuery dibawah ini diatas kode <b:skin><![CDATA[

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#main-nav li a.main-link&quot;).hover(function(){
$(&quot;#main-nav li a.close&quot;).fadeIn();
$(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;#sub-link-bar&quot;).animate({
height: &quot;40px&quot;
});
$(&quot;.sub-links&quot;).hide();
$(this).siblings(&quot;.sub-links&quot;).fadeIn();
});
$(&quot;#main-nav li a.close&quot;).click(function(){
$(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);
$(&quot;.sub-links&quot;).fadeOut();
$(&quot;#sub-link-bar&quot;).animate({
height: &quot;10px&quot;
});
$(&quot;#main-nav li a.close&quot;).fadeOut();
});
});
</script>

• Kemudian masukan CSS dibawah ini diatas kode ]]></b:skin>

/*--------------------------------------------------
CSS TOP NAVIGATION
---------------------------------------------------*/
#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
}

#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
}
#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #514539;
}
#sub-link-bar {
background: #514539;
min-height: 10px;
border-bottom: #645546 1px solid;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
}
#main-nav li .sub-links li a:hover{
background: #2d2620;
}
#main-nav li a.close{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHTPAkPZJI/AAAAAAAAAOE/mvjEVRA-S3I/minus.png) 0px 0px no-repeat;
}
#main-nav li a.close:hover{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHStBuH-BI/AAAAAAAAAOA/HmIDAZ33wYA/plus.png) 0px 0px no-repeat;
}
}
<!--Thanks Spiffy Corners-->
.round {
display:block
}
.round * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546
}
.round1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
border-right:1px solid #443a30;
background:#56493c
}
.round2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e
}
.round3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;
}
.round4 {
border-left:1px solid #443a30;
border-right:1px solid #443a30
}
.round5 {
border-left:1px solid #56493c;
border-right:1px solid #56493c
}
.roundfg {
background:#645546
}
/*-- Akhir CSS Top Navigation --*/

• Masukkan kode HTML dibawah ini dibawah kode <body>

<div id='sub-link-bar'/>
<!-- End sub-link-bar -->
<!-- Top Navigation -->
<div id='wrap'>
<div id='main-handle'>
<div class='roundfg'>
<ul id='main-nav'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a>
<ul class='sub-links'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a></li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Tutorials</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tutorial%20Photoshop' title='Tutorial Photoshop'>Tutorial Photoshop</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tools%20Blogging' title='Tools Blogging'>Tools Blogging</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/JQuery' title='Jquer'>Jquery</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Trik%20Blog' title='Trik Blog'>Trik Blog</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/PHP' title='Tutorial PHP'>PHP</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Articles</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Berita' title='Berita'>Berita</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/E-Book' title='E-Book'>E-Book</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Windows' title='Tips Windows'>Tips Windows</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Komputer' title='Tips Komputer'>Tips Komputer</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Free</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Software' title='Software'>Software</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Free%20Stuff' title='Free Stuff'>Free Stuff</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/RSS%20FEED' title='Rss Feed'>Rss Feed</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Hacker' title='Hacker'>Hacker</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Security' title='Security'>Security</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Page%20Ranking' title='Page Rank'>Page Rank</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Videos</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Diskografi' title='Diskografi'>Diskografi</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2011/02/tv-streaming.html' title='TV Online'>TV Online</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Video%20Tutorial' title='Video Tutorial'>Video Tutorial</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>About</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/2009/02/peduli-sesama-bukti-akhlak-mulia.html' title='Link Sahabat'>Link Sahabat</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2009/02/mendekatkan-diri-kepada-allah.html' title='Kontak Saya'>Kontak Saya</a> </li>
</ul>
</li>
<li><a class='close' href='#' title='Click to Collapse'/></li>
</ul>
</div>
<!-- End roundfg -->
<b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>
<!-- End main-handle-->
</div>
<!-- End wrap / Akhir Demo Top Navigation -->

• Silahkan Save Tempalte dan lihat hasilnya, Semoga Bermanfaat...!!!
  

Read More..

Membuat Efek Hujan Salju di Blog

Kali ini saya akan membahas tentang cara membuat efek salju pada blog, kedengarannya keren juga ya ! Ya lumayan sih untuk mempercantik blog atau website ! dalam pembuatan efek salju ini lagi-lagi menggunakan script JQuery Contoh efek saljunya bisa di lihat, di bawah ini... Kalau begitu, jika anda ingin membuatnya langsung aja anda tahap-tahapan berikut ini.

Cara Membuat Efek Hujan Salju di Blog :

• Langsung aja masuk ke Edit HTML
• Beri tanda centang pada Expand Template Widget
• Copy-Paste script berikut ini diatas script </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

• Kemudian Simpan.

Read More..

Tombol Navigasi JQuery

Membuat Navigasi di blog atau pu Website adalah sebuah kebutuhan bagi yang ingin memudahkan pengunjung untuk mengakses isi content yang ada pada blog tersebut. Membuat navigasi stylish mungkin dapat menjadi solusi bagi yang ingin memasang menu navigasi akan tetapi takut akan menambah berat loading blog. walaupun menu navigasi ini juga menggunakan JQuery, akan tetapi tidak akan menambah lama loading blog, karena menu ingin termasuk paling ringan menurut saya.

Untuk demonya silahkan dilihat pada link berikut :

Ikuti langkah-langkah dibawah, cara Membuat Menu Accordion Dengan JQuery :

• Seperti biasa Log-In dulu ke blog anda.
• Lanjut ke "Tata Letak" kemudian "Edit HTML".
• Centang "Expand Template Widget".
• Cek dulu pada blog anda, apakah sudah termasang JQuery berikut :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Jika belum termasang, pasang dulu dan letakkan di bawah <head>
• Kemudian copy script di bawah ini dan letakkan di bawah script di atas.

<script src='http://hapiajavascript.googlecode.com/files/NavStylish.js' type='text/javascript'/>

• Selanjutnya cari code CSS ]]></b:skin> letakkan script di bawah ini di atasnya.

ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
margin-left:-40px;
}

ul li{
border:1px solid #444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}

ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}

/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}

/* styles that are assigned individually */

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:#eee;
color:#333;
}

.selectedMenu,.selectedMenu:visited {
margin:0;
}

.normalMenu, .normalMenu:visited{
color:#fff;
background: #333;
}

• Kemudian cari code <div id='content-wrapper'> copy dan pate script di bawah ini, dan letakkan di bawah code <div id='content-wrapper'>

<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>

• Selesai.
• Klik Simpan.
• Semoga bermanfaat Yaw... !!!
  

Read More..

Membuat Menu Accordion JQuery

Ketika mengembangkan sebuah website, itu merupakan suatu tantangan besar untuk dapat mengatur isi sedemikian rupa. Belum lagi betapa pentingnya untuk mencegah informasi overloading dengan mengekspos pengunjung Anda untuk terlalu banyak data dalam tampilan tunggal. Inilah sebabnya mengapa ada teknik tertentu yang membantu konten grup desainer dan tunjukkan hanya jika pengguna tertarik pada apa yang Anda tawarkan dan berinteraksi dengan halaman

Menu ini tidak terlalu memberatkan loading blog tanpa mengurangi tampilan menu yang colorful. untuk demonya silahkan dilihat pada link berikut :

Ikuti langkah-langkah dibawah, cara Membuat Menu Accordion Dengan JQuery :

• Pergi ke "Tata Letak" kemudian "Edit HTML".
• Copy script JQuery di bawah ini dan letakkan dibawah HEAD.
  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/>

• Selanjutnya silahkan cari code ]]>/b:skin dan letakkan code CSS berikut diatasnya :

ul{
margin:0;
padding:0;
}

ul.accordion{
/* The topmost UL */
width:240px;
margin:0;
padding:10px;
}

li{
list-style:none;
text-align:left;
}

li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}

li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}

li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}

li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NnrbOH_5AB9ij2vFMdiPFEI-jQI09xoc0xtYNuzsHSRbk6F3E6RnR_Dz2gecun0hnC0yPJCvXP0HFmSQN9yp0BnInPZDUE4TIv1gxHNgQWtui18m9xDidgX-WDEiYS0LM9T1JskPHT8/s320/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NnrbOH_5AB9ij2vFMdiPFEI-jQI09xoc0xtYNuzsHSRbk6F3E6RnR_Dz2gecun0hnC0yPJCvXP0HFmSQN9yp0BnInPZDUE4TIv1gxHNgQWtui18m9xDidgX-WDEiYS0LM9T1JskPHT8/s320/blue.png) repeat-x top right;}

li.button a.green{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtlKdcXgGavOXhXX-hy2G80F_23Ct5kCFlX8E_YgABpBTjgn3XpcV1yMUwOr844chHwfCpphhhwMOq1zIVgAQDhewy73BtUL_eh9rYNxf_EfjUWv_CzMNmW5eVixqUJIeXwFg6VJ3Rh0/s320/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtlKdcXgGavOXhXX-hy2G80F_23Ct5kCFlX8E_YgABpBTjgn3XpcV1yMUwOr844chHwfCpphhhwMOq1zIVgAQDhewy73BtUL_eh9rYNxf_EfjUWv_CzMNmW5eVixqUJIeXwFg6VJ3Rh0/s320/green.png) repeat-x top right;}

li.button a.orange{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIfkaKELRrjmBF3WdEke4_O_kH1BqbQ4qFVGFqXif3oBPC3NV7JaFJfQAdzYvq8M7DRVNP1P6PBJdqp4X-eMGzGSiml1lOBNZernFjfOfqAabj8-aiOILpsdqQ56kekRGoiDXmfHIttE/s320/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIfkaKELRrjmBF3WdEke4_O_kH1BqbQ4qFVGFqXif3oBPC3NV7JaFJfQAdzYvq8M7DRVNP1P6PBJdqp4X-eMGzGSiml1lOBNZernFjfOfqAabj8-aiOILpsdqQ56kekRGoiDXmfHIttE/s320/orange.png) repeat-x top right;}

li.button a.red{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8woS0vJEGagKSRzU7siSLEreUFkbrdn4wq1W1G0_W0W950EhPVM-GoNZXDRlSckLpOoCaDuT7fkdKbSWMRysjBwvYsaN2_G-xD7D0Sxm1eYr8v7RaDB8hB2IT4HSE7ZiVaGXRLmiWcBk/s320/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8woS0vJEGagKSRzU7siSLEreUFkbrdn4wq1W1G0_W0W950EhPVM-GoNZXDRlSckLpOoCaDuT7fkdKbSWMRysjBwvYsaN2_G-xD7D0Sxm1eYr8v7RaDB8hB2IT4HSE7ZiVaGXRLmiWcBk/s320/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}

.dropdown li{
/* Each element in the expandable list */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}

• Selanjutnya simpan Template.
• Lanjut ke "Elemen Laman" tambah gadget pada sidebar.
• Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :
  

<ul class="accordion">
<li class="menu">

<ul>
<li class="button"><a class="green" href="#">Judul 1 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 1.1</a></li>
<li><a href="#">Nama Content 1.2</a></li>
<li><a href="#">Nama Content 1.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 2.1</a></li>
<li><a href="#">Nama Content 2.2</a></li>
<li><a href="#">Nama Content 2.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 3.1</a></li>
<li><a href="#">Nama Content 3.2</a></li>
<li><a href="#">Nama Content 3.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="red" href="#">Judul 4<span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 4.1</a></li>
<li><a href="#">Nama Content 4.2</a></li>
<li><a href="#">Nama Content 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Selesai Deh..
Untuk HEAD dan ]]>/b:skin> jangan luma menggunakan <>.
Semoga Bermanfaat...!!!

Read More..