http://cybercommunityrevolution.blogspot.com/ » Archives for Mei 2012

Selasa, 29 Mei 2012

Meta Tag Yang Saya Pakai Di blog Cyber Revolution

Selamat Malam Sahabat Blogger ,Cyber Revolution akan Memberikan Meta Tag yang Saya Pakai Di blog  Cyber Revolution  .Jika Sahabat Blogger Tertarik ,Silahkan CTRL + C Text Di bawah Ini :

<b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title><meta content='Free Download Software' name='description'/>
    <meta content='Cyber Revolution ' name='keywords'/>
    <meta content='http://cybercommunityrevolution.blogspot.com/' name='subject'/>
    <meta content='kumpulan software gratis, full version, free serial number, key, patch, crack, via mediafire, indowebster dan trik maksimalkan internet' name='Abstract'/>
    <b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if><meta expr:content='data:blog.pageName + &quot; kumpulan software gratis, full version, free serial number, key, patch, crack, via mediafire, indowebster dan trik maksimalkan internet&quot;' name='description'/>
    <meta expr:content='data:blog.pageName + &quot;  kumpulan software gratis, full version, free serial number, key, patch, crack, via mediafire, indowebster dan trik maksimalkan internet &quot;' name='keywords'/>
    <meta expr:content='data:blog.pageName' name='subject'/>
    <meta expr:content='data:blog.pageName' name='Abstract'/>
    <b:else/>
    <title><data:blog.pageTitle/></title><meta expr:content='data:blog.pageName + &quot;  kumpulan software gratis, full version, free serial number, key, patch, crack, via mediafire, indowebster dan trik maksimalkan internet &quot;' name='description'/>
    <meta expr:content='data:blog.pageName + &quot; Free Download Software Full version &quot;' name='keywords'/>
    <meta expr:content='data:blog.pageName' name='subject'/>
    <meta expr:content='data:blog.pageName' name='Abstract'/>
    </b:if>
    </b:if>
    <title><data:blog.pageTitle/></title>
    <meta content='http://revolutioncommunitycyber.blogspot.com/' name='copyright'/>
    <meta content='Revolution Cyber' name='author'/>
    <meta content='Aeiwi, Alexa, AllTheWeb, AltaVista, AOL Netfind, Anzwers, Canada, DirectHit, EuroSeek, Excite, Overture, Go, Google, HotBot. InfoMak, Kanoodle, Lycos, MasterSite, National Directory, Northern Light, SearchIt, SimpleSearch, WebsMostLinked, WebTop, What-U-Seek, AOL, Yahoo, WebCrawler, Infoseek, Excite, Magellan, LookSmart, bing, CNET, Googlebot' name='search engines'/>
    <meta content='mhEjnZ_xaA-na4xywuYHdSezXCud4j4a9y7IRX3JXMw' name='google-site-verification'/>
    <meta content='KODE VERIFIKASI BLOGCATALOG' name='blogcatalog'/>
    <meta content='UTF-8' name='Charset'/>
    <meta content='Global' name='Distribution'/>
    <meta content='information' name='classification'/>
    <meta content='General' name='Rating'/>
    <meta content='INDEX FOLLOW' name='Robots'/>
    <meta content='document' name='resource-type'/>
    <meta content='follow,all' name='robots'/>
    <meta content='INDEX,FOLLOW, all' name='robots'/>
    <meta content='1 days' name='revisit'/>
    <meta content='1 Days' name='Revisit-after'/>
    <meta content='en' name='language'/>
    <meta content='Indonesia' name='geo.country'/>
    <meta content='jakarta' name='geo.placename'/>
    <meta content='global' name='distribution'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>
    <meta content='global' name='target'/>
    <meta content='index,follow,snipet' name='googlebot'/>
    <meta content='follow, all' name='Googlebot-Image'/>
    <meta content='follow, all' name='Scooter'/>
    <meta content='follow, all' name='msnbot'/>
    <META CONTENT='NOODP' Name='msnbot'/>
    <meta content='follow, all' name='alexabot'/>
    <meta content='follow, all' name='Slurp'/>
    <meta content='follow, all' name='ZyBorg'/>
    <meta content='follow, all' name='Scooter'/>
    <meta content='ALL' name='SPIDERS'/>
    <meta content='ALL' name='WEBCRAWLERS'/>
    <link expr:href='data:blog.url' rel='canonical'/>
read more button →Meta Tag Yang Saya Pakai Di blog Cyber Revolution
Diposting oleh di 0 komentar
Label:

Membuat Teks Berganti-Ganti Warna (Rainbow Teks)

Malam Sahabat blogger,gimana Kabar'a ? saya Harap baik Saja ,kali ini Cyber Revolution akan memposting Sebuah artikel tentang Membuat Teks Berganti-Ganti Warna (Rainbow Teks)..jika sahabat blogger Tertarik silahkan ikutin cara'a di bawah ini ..

Berikut Cara Membuatnya Dan scriptnya :
    <h2>
    <script type='text/javascript'>
    //<![CDATA[

    /*
    Teks berganti-ganti warna Script by Matt Hedgecoe
    Featured on JavaScript Kit, visit http://www.javascriptkit.com/script/script2/rainbowtext.shtml
    */

    var text="Cyber Revolution" //Ganti dengan teks anda
    var speed=80 //Kecepatan ganti warna

    if (document.all||document.getElementById){
    document.write('<span id="highlight">' + text + '</span>')
    var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
    }
    else
    document.write(text)
    var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
    var r=1
    var g=1
    var b=1
    var seq=1
    function changetext(){
    rainbow="#"+hex[r]+hex[g]+hex[b]
    storetext.style.color=rainbow
    }
    function change(){
    if (seq==6){
    b--
    if (b==0)
    seq=1
    }
    if (seq==5){
    r++
    if (r==12)
    seq=6
    }
    if (seq==4){
    g--
    if (g==0)
    seq=5
    }
    if (seq==3){
    b++
    if (b==12)
    seq=4
    }
    if (seq==2){
    r--
    if (r==0)
    seq=3
    }
    if (seq==1){
    g++
    if (g==12)
    seq=2
    }
    changetext()
    }
    function starteffect(){
    if (document.all||document.getElementById)
    flash=setInterval("change()",speed)
    }
    starteffect()

    //]]>
    </script>
    </h2>
Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah <body>
........
diatas </body>
NB=>"Ganti Text Berwarna merah Sesuai selerah sahabat"
Terakhir Save. dan lihat hasilnya.
read more button →Membuat Teks Berganti-Ganti Warna (Rainbow Teks)
Diposting oleh di 0 komentar
Label:

Pasang Widget Share Button Lengkap

Selamat malam Sahabat Blogger ,malam Hari ini Cyber Revolution akan Memposting Tentang Widget Share Button Lengkap ,jika Sahabat Blogger Tertarik ,silahkan ikuti langkah berikut :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.
<style>#ShareSidebar{top:48px;width:69px;right:0 !important;overflow:hidden;position:fixed;z-index:100000;text-align:center;line-height:normal;_position:absolute;font-size:9px;background:#000;background:rgba(255,255,255,0.6);-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;padding:5px}
.fb_share_count_top {width:55px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:55px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style>
<div id="ShareSidebar">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div style="float:left; margin:10px 0 0 10px;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="float:left; margin:10px 0 0 10px; width:61px;"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<div style="float:left; margin:10px 0 0 7px;"><script src="http://orkut-share.googlecode.com/svn/trunk/delicious.js"></script></div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div style="float:left; margin:10px 0 0 7px;"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript">(function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})();</script><a class="DiggThisButton DiggMedium"></a></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script></div>
</div>
5.Terakhir Save, dan Lihat hasilnya.

Semoga Bermanfaat , Jangan Lupa Follow Blog Saya Ya  ^_^..
read more button →Pasang Widget Share Button Lengkap
Diposting oleh di 0 komentar
Label:

cFoSpeed 8.00 + Trial Reset

Selamat malam Sahabat Blogger,Kali ini Cyber Revolution akan Mengupdate tentang Software Internet Yang Sahabat Blogger pasti sudah sangat mengenal software ini untuk menstabilkan /mengoptimalkan transfer data melalui traffic shaping .traffic shaping adalah metode untuk mengoptimalkan lalu lintas internet.hal ini memungkinkan kecepatan maksimum sementara memastikan ping minimal.Langsung saja yang mau Software internet cFoSpeed 8.00 Terbaru silahkan Download di bawah ini .. ^_^
Mirror Link ^_^
Belum Sempat Upload Filenya Karena Koneksi Internet yang tidak memungkinkan..
 
Sumber=>http://www.dytoshare.us/
read more button →cFoSpeed 8.00 + Trial Reset
Diposting oleh di 0 komentar
Label:

Cara Membuat Breadcrumb Google di Blogger

Selamat malam Sahabat blogger, Kali Ini Cyber Revolution akan Memposting Tentang Cara Membuat Breadcrumb Google di Blogger ..
Jika Sahabat blogger Tertarik ,Silahkan Ikutin langkahnya di bawah ini :
1. Langkah pertama sobat login dulu ke blog,Dan pilih menuju halaman design(rancangan),setelah itu pilih Edit HTML » Ceklis Expand Widget Templates .kemudian sahabat blogger cari kode <b:include data='top' name='status-message'/> biasanya terdapat 2 kode tersebut,kalau sudah di temukan silahkan paste kode berikut ini tepat di atas kode <b:include data='top' name='status-message'/>  (paste saja di atas 2 kode yang sobat temukan biar tidak bingung).
<b:include data='posts' name='breadcrumb'/>
2.Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>http://cybercommunityrevolution.blogspot.com/</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>http://revolutioncommunitycyber.blogspot.com/</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>http://cybercommunityrevolution.blogspot.com/</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>http://cybercommunityrevolution.blogspot.com/</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
3.Untuk mempercantik Breadcrumb google sekarang tambahkan sedikit Kode CSS di bawah ini,tepat di atas kode ]]></b:skin>
.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }
 4. Terakhir Save Template ..
NB : Text yang Berwarna Merah,Ganti Dengan URL Blog Sahabat Blogger ..
Salam Blogger ^_^
read more button →Cara Membuat Breadcrumb Google di Blogger
Diposting oleh di 0 komentar
Label:

Cara mematikan fungsi CTRL + U, CTRL + A, dan Disable klik kanan pada blog

Selamat Siang sabahat blogger ,Maaf sebelumnya karena Cyber Revolution Jarang Update dikarenakan Saya masih ujian Semester,tp kali ini Cyber Revolution akan Memberitahu cara mematikan fungsi CTRL + U, CTRL + A, dan Disable klik kanan pada blog,
karena seiringnya perkembangan blogger,banyak sekali plagiat artikel yang selalu ingin mencuri hasil artikel tanpa memberitahu sumbernya ,dan mengetahui Source Kode template Blog tersebut hingga mengedit hasil karya orang menjadi miliknya,
maka dari itu , bila sahabat blogger tidak ingin Artikelnya di copas oleh plagiat,silahkan ikuti cara berikut :
1.Seperti biasa,silahkan anda login ke blogger kamu.
2.Silahkan pilih rancangan,pilih edit HTML .
3.Lalu silahkan kamu cari kode <body>,(Untuk memudahkan pencarian,silahkan Tekan CTRL + F pada keyboard kamu .
4.Setelah ketemu kode tersebut ,Silahkan Ganti dengan kode di bawah ini.
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
5.Lalu klik pratinjau terlebih dahulu ,untuk memastikan apakah script tersebut bekerja dengan sempurna
6.Jika Sudah silahkan Save template.

NB :

  • oncontextmenu=’return false;’ (Berfungsi untuk mematikan fungsi klik kanan / right klik pada mouse)
  • onkeydown=’return false;’ (Berfungsi untuk mematikan fungsi CTRL+A dan CTRL+U pada keyboard)
  • onmousedown=’return false;’ (Berfungsi untuk mematikan block select pada text/artikel)
  • ‘return false;’ (Untuk mengaktifkan script yang digunakan)
Sebagai contoh misalnya sahabat blogger hanya ingin mematikan fungsi klik kanan saja , maka kodenya seperti di bawah ini
<body oncontextmenu=’return false;’>
Jika Masih Belum jelas , Silahkan berkomentar di bawah ini ..
^_^Salam Blogger ^_^
read more button →Cara mematikan fungsi CTRL + U, CTRL + A, dan Disable klik kanan pada blog
Diposting oleh di 0 komentar
Label:

Jumat, 25 Mei 2012

Soal-Soal Agama Paket A + Kunci Jawaban

Selamat Sore Sahabat Blogger,Cyber Revolution masih Share tentang Soal-soal agama ,
Tapi kali Ini Soal agama adalah Paket A + kunci jawaban ..

Jika Sahabat Blogger Tertarik untuk membahasnya ,Silahkan Download Di bawah ini :

read more button →Soal-Soal Agama Paket A + Kunci Jawaban
Diposting oleh di 0 komentar
Label:

Kamis, 24 Mei 2012

Agama Kristen Kelas XI + Kunci Jawaban

Selamat Sore Sahabar blogger,Cyber Revolution Kali Ini akan mengupdate Soal-Soal agama Kristen Kelas XI SMA,sebelumnya saya minta maaf,karena Cyber Revolution Jarang Update Karena Banyaknya Tugas Sekolah Yang menumpuk,Termasuk Tugas Yang saya Share ini ,dan Juga saya share Karena Temen-Temen Sekolah Saya Yang Minta tolong kepada saya untuk Mencari tugas ini ..
Bila Sahabat blogger Tertarik untuk Membahas soal ini,silahkan Download Di bawah ini :

NB=>Soal Sudah Saya lengkapi dengan Kunci jawaban .
read more button →Agama Kristen Kelas XI + Kunci Jawaban
Diposting oleh di 0 komentar
Label:

Rabu, 23 Mei 2012

Net Cut 3.0

Selamat Sore Sahabat Blogger , Maaf ya sebelumnya karena Cyber Revolution tidak ada Memberikan postingan terbaru , tapi kali ini Cyber Revolution akan memposting Tentang gunanya Net Cut ..
Net Cut ialah software untuk memotong koneksi orang lain di suatu jaringan ..
jadi Sahabat Blogger Bisa mendownload Ria Sesuka hati kalian ..
Jadi Bila Sahabat Blogger Tertarik Silahkan Download Software di bawah ini ..

 Salam Blogger  ^_^
NB=> Gunakan Software Dengan Bijak ...
read more button →Net Cut 3.0
Diposting oleh di 0 komentar
Label:

Floating Dropdown Menu Plus Sosial Icons With jQuery

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Topnav Drop down trigger styles */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;font-family:century gothic;text-shadow:1px 2px 2px #000;
font-size:12px;
float: right;
font-size: 13px;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
text-transform:uppercase;
}
ul.topnav li a:hover{
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://lh5.googleusercontent.com/-xW4p9b_uWyI/TeQwwBEAGGI/AAAAAAAAAGY/rGxrR1WBhgE/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border:1px solid #111;z-index:1001;
}
ul.subnav_last{
list-style: none;
position: absolute;
right: 15px; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index:1001;
}
ul.subnav li, ul.subnav_last li{
margin: 0; padding: 0;
border-top: 1px solid #111;
border-bottom: 1px solid #333;
clear: both;
width:150px;
}
ul.subnav li:last-child{
border-bottom: none;
}
ul.subnav_last li:last-child{
border-bottom: none;
}
html ul.subnav li a, ul.subnav_last li a {
float:left;
width:130px;
text-align:left;
background: transparent url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
padding:8px 0 8px 20px;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
text-transform:none;
}
html ul.subnav li a:hover, ul.subnav_last li a:hover{
background: #191919 url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
}
#header-bar-outer{
position:fixed;
z-index:9999;
width:100%;
height:34px;
padding:0;
margin:0;
background:#212121;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding-top:1px;
padding-bottom:1px;
top:0;
}
#header-bar {
width:100%;
height:33px;
margin:0 auto;
padding:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
}
#top_nav{
height:33px;
line-height:33px;
text-align:left;
float:left;
}
#top_nav ul{
margin:0; padding:0 0 0 5px;
}
#top_nav li{
display:inline;
}
#top_nav li a{
color: #CCCCCC;
font-size: 11px;
margin: 0 0 0 0;
padding: 0 0 0 10px;
text-transform: uppercase;
}
/* social icon */
#social-networking li
{
float:left;
}
#social-networking a
{
display:block;
padding:0 3px 0 0;
position:relative;
}
#social-networking span
{
opacity:0.5;
width: 24px;
height: 24px;
display: block;
border:4px solid #2C2B2B;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow:inset 0 2px 6px #000000;
webkit-shadow:inset 0 2px 6px #000000;
-moz-shadow:inset 0 2px 6px #000000;
transition: all linear 350ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}
#social-networking span:hover
{
border:4px solid #75AC0D;
opacity:0.9;
}
#social-networking .social-icon
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW7Q2Y3OvtAsqdl4Beg5jbLqkD2qkfq42iYz5aPKnT01b1kyIbVUv2_TnZri4k_SvtTGCcbcNRxdL9yAMcQMuK3ipMRt3rvq-NePUnm-gwb7dmIEdHsLIp8ndqSedpGnQVbbIqUWeWL2k/s1600/social.png') no-repeat;
}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }
4. Selanjutnya letakkan script berikut, di atas kode </head>  :

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

<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav, ul.subnav_last").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav, ul.subnav_last").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){  
$(this).parent().find("ul.subnav, ul.subnav_last").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
5. Selanjutnya letakkan kode berikut, di bawah kode Head-nav (sesuaikan template) Masing-masing  :

 <!-- Start Dropdown Menu Plus Sosial Icons -->
<div id='header-bar-outer'>
<div id='header-bar'>
<ul class='topnav'>
<li>
<a href='/'>Home</a>
</li>
<li><a href='#'>Blogger</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-1</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-2</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-3</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-4</a>
<ul class='subnav_last'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li><a href='URL-LINK' target='_blank'>Edit-Me</a></li>
</ul>
<div id='top_nav'>
<!-- start #social-networking-->
<ul id='social-networking'>
<li><a href='https://twitter.com/#!/YOUR-ID' id='twitter-link' target='_blank' title='twitter'><span class='twitter social-icon'></span></a></li>
<li><a href='http://www.facebook.com/YOUR-ID' id='facebook-link' target='_blank' title='facebook'><span class='facebook social-icon'></span></a></li>
<li><a href='skype:YOUR-ID?call' target='_blank' title='skype'><span class='skype social-icon'></span></a></li>
<li><a href='http://www.youtube.com/YOUR-ID' id='youtube-link' target='_blank' title='youtube'><span class='youtube social-icon'></span></a></li>
<li><a href='http://lk.linkedin.com/in/YOUR-ID' id='linkedin-link' target='_blank' title='linkedin'><span class='linkedin social-icon'></span></a></li>
<li><a href='https://plus.google.com/u/0/YOUR-ID/' id='googleplus-link' target='_blank' title='googleplus'><span class='googleplus social-icon'></span></a></li>
<li><a href='http://delicious.com/url/YOUR-ID' id='delicious-link' target='_blank' title='delicious'><span class='delicious social-icon'></span></a></li>
<li><a href='http://digg.com/YOUR-ID' id='digg-link' target='_blank' title='digg'><span class='digg social-icon'></span></a></li>
<li><a href='http://feeds.feedburner.com/YOUR-ID' target='_blank' title='rss'><span class='rss social-icon'></span></a></li>
<li><a href='http://www.flickr.com/YOUR-ID' target='_blank' title='flickr'><span class='flickr social-icon'></span></a></li>
</ul>
<!-- end #social-networking-->
</div>
</div>
</div>
<!-- End Dropdown Menu Plus Sosial Icons -->
6. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save.
Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
read more button →Floating Dropdown Menu Plus Sosial Icons With jQuery
Diposting oleh di 0 komentar
Label:
Langganan: Postingan (Atom)