Home » Archive for Oktober 2016

Cara Membuat Blog/website SEO 100%

Add Comment
Bangethz akan membahas seputar situs chkme.com, sudah tahukah kamu dengan situs ini? mungkin udah banyak yang tahu ya atau kamu belum tahu sama sekali.

cek seo

Chkme adalah salah satu situs SEO tool yang berfungsi sebagai alat untuk cek score SEO blog/website kamu. Cara menggunkannya juga sangat mudah sekali bro, kamu tinggal memasukan alamat blog/website kamu untuk mengetahui berapa % SEO blog/website kamu, seperti gambar dibawah ini:

cek seo

Cara mendapatkan score 100% SEO Di CHKME

Setelah kamu memasukan alamat baik dengan domain premium atau dengan sub-domain seperti wordpress & blogger, klik tombol check SEO score. Dan lihat hasil dari blog/website kamu, untuk mendapatkan 100% SEO ada beberapa yang perlu kamu benahi.
Bangethz akan membuat contoh untuk alamat domain DEMO bangethz (demo-bangethz.blogspot.co.id) saat menulis posting ini, score dari blog demo bangethz 63% saja hehehhe. Kenapa? karena blog ini hanya sebagai sarana untuk bangethz menampilkan LIVE DEMO dari sebagaian postingan saja baik generator maupun widget. Sangat sepi akan teks di blog tersebut.
Kita lanjut untuk mencari solusi agar blog menjadi 100% SEO di chkme.

Headings

Bagian ini menampilkan hasil cek dari heading blog : <H1>, <H2> & <H3>
cek seo

untuk mengatasinya sangat mudah bro, pada posting atau laman tinggal dicantumkan kode tersebut atau tinggal kamu buat posting baru yang mencantumkan kode tersebut, minimal 2/kode. contoh:

cek seo
Jika posting/laman yang kamu buat tidak ingin terbaca oleh pengunjung, bisa kamu setting di setelan entri. Tinggal di publikasikan dan 1 masalah sudah kita selesaikan.

Description & Keywords

cek seo

Kamu tinggal memasukan deskripsi & keyword di blog/site kamu, jika kamu kesulitan untuk memasukannya. Kamu bisa melihat postingan bangeth sebelumnya di cara membuat description & keyword di blog.

Flash, Frame & Link

Disini menjelaskan jika blog/site kamu akan lebih maksimal jika tanpa Flash & Frame, karna ini akan memperlambat loading blog/site kamu saat dibuka.

cek seo

Flash Movies seperti youtube di blog/site
Frame & Iframe seperi memasukan situs lain ke blog/site kamu dengan menggunakan coding <iframe> situs lain </iframe>
Website Link tidak perlu kita masalahkan, karena ini bukan point yang akan menghambat kita menuju 100% SEO.

Image: Description & Title


cek seo
Terakhir untuk bagian gambar, pastikan semua gambar yang ada di blog/site kamu menggunakan deskripsi & Title. bagaimana caranya? pada saat kamu membuat posting, klik gambar yang sudah kamu upload tadi dan klik properties. Akan tampil seperti dibawah ini:
cek seo

setelah di isi klik ok, lakukan setiap kamu memasukan gambar di blog/website. Setelah kamu selesai dengan gambar silahkan di ulang untuk cek score SEO di chkme.com.

cek seo
Pada Image kebanyakan dari kamu kebingungan, ada gambar yang blum diberi deskripsi & title. Coba kamu copy link, buka gambarnya & ini dia si biang kerok: wrench_allbkg.png 

biang kerok
Kenapa bangethz sebut ini biang kerok hehehhe, dulu bangethz juga sempat kebingungan untuk mencari icon ini walau kamu menggunakan CTRL+F untuk mencarinya di template. Trus dimana keberadaannya? mungkin di dunia lain hahaha...Untuk mengetahui caranya, monggo dibaca posting bangethz: cara mencari dan menghapus icon obeng & tang atau wrench_allbkg
Selesai sampai disini bro & kamu bisa memasang  badge hasil score SEO kamu di blog/site biar pengunjung bisa intip juga, seperti badge bangeth ini : SEO Reports for bangethz.com
Beberapa penjelasan bangethz arahkan ke posting lain agar tidak telalu panjang di postingan ini, apa saja yang perlu kamu baca untuk mendapatkan 100% SEO :
- Membuat Deskripsi, Title & Keyword di Blog
- Menghilangkan Icon Tang & Obeng (wrench_allbkg)
Read More

Cara Membuat Generator Teks Terbalik

Add Comment
Teks terbalik? tutorial bangethz maksud adalah tulisan atau teks mengarah berlawanan, contoh seperti ini bro:
copyright © bangethz.com
ǝɥǝɥǝɥ˙˙˙oɹq ɐʎ ıuı zɥʇǝƃuuɐq uɐsılnʇ ɐɔɐqɯǝɯ ʞnʇun ɐƃnɾ ʞılɐqıp ɐpuɐ doʇdɐl ǝdɯɐs uɐƃuɐɾ 'ʞılɐqɹǝʇ sʞǝʇ/uɐsılnʇ ɥoʇuoɔ
Pusing juga ya bro baca tulisan ginian hehehe... Tapi jika ingin tetap memasang dan menggunakan juga untuk mempercantik tampilan blog kamu, berikut cara membuatnya:


Cara Membuat Generator Teks Terbalik


Disini terserah kamu mau diletakan dimana, jika di sidebar silahkan di setting ukuran generatornya.

<script>
function flip() {
var result = flipString(document.f.original.value.toLowerCase());
document.f.flipped.value = result;
}
function flipString(aString) {
var last = aString.length - 1;
//www.bangethz.com
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r ? r : c
}
return result.join('')
}
var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254',
d : 'p',
e : '\u01DD',
f : '\u025F',
g : '\u0183',
h : '\u0265',
i : '\u0131',
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF',
'!' : '\u00A1',
"\'" : ',',
'<' : '>',
'_' : '\u203E',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235',
'\r' : '\n'
}
for (i in flipTable) {
flipTable[flipTable[i]] = i
}
</script>
<style type="text/css">
<!-- .style1 {color: #FF0000 -->
</style>
<h1 class="style1">Teks Flip/Terbalik</h1>
<form name="f">Masukkan Teks Kamu Dibawah Ini :
<textarea cols="50" name="original" onkeyup="flip()" rows="5"></textarea>
<input onclick="flip()" type="button" value="Flip" />

Hasilnya :
<textarea cols="50" name="flipped" rows="5"></textarea></form>
Silahkan di copy dan pastekan di tempat yang ingin kamu tampilkan, happy blogging....
Read More

Memasang Mp3 Player di Laman/Posting Blog

Add Comment
Sepertinya menarik ya bro kalau ada mp3 player di blog kita, banyak para master yang sudah membagikan cara membuat mp3 player blog ini. Bagi yang belum menemukan atau mampir di bangethz, langsung aja di baca tutorialnya ya bro..

copyright © bangethz.com

Disini bangethz menyarankan anda untuk juga membaca postingan saya tentang google site, karna tutorial kali ini sangat berhubungan dengan google site. Kok bisa? yup bro, kita akan menampilkan file mp3 anda di widget yang akan kita buat ini. Silahkan mampir ke cara upload file musik ke google site, jika sudah paham kita lanjutkan.
Widget yang kita akan buat bukanlah pemutar lagu otomatis, jadi perlu klik play dulu untuk memutarnya (seperti pemutar mp3 di HP atau laptop gitu bro)

LIVE DEMO

Cara Memasang Mp3 Player

Bebas mau taruh di postingan atau halaman, yang pasti buka laman/posting baru. Pertama kita buat dulu tampilannya dengan kode CSS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/bangethz/music/master/music.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/bangethz/music/master/music2.js" type="text/javascript"></script>
<style>
*,:after,:before { box-sizing:border-box; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix:after,.clearfix:before { content:''; display:table; }
.clearfix:after { clear:both; display:block; }
.track { width:2px; margin-right:5px; background:rgba(0,0,0,0); transition:background 250ms linear; }
.track:hover,.track.dragging { background:#d9d9d9; background:rgba(0,0,0,.15); }
.handle { right:0; width:2px; background:#999; transition:width 250ms; background:rgba(255,255,255,.2); }
.ethz-player { width:360px; height:500px; padding:15px; position:relative; margin:55px auto 0; background:rgba(0,0,0,.9); box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); }
.ethz-player .album-art,.ethz-player .album-thumb { background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MC4zMTNweCIgaGVpZ2h0PSI5MC4zMTNweCIgdmlld0JveD0iMCAwIDkwLjMxMyA5MC4zMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwLjMxMyA5MC4zMTMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTkxOTE5IiBkPSJNNDUuMTU2LDBDMjAuMjE4LDAsMCwyMC4yMTcsMCw0NS4xNTZjMCwyNC45MzksMjAuMjE4LDQ1LjE1Niw0NS4xNTYsNDUuMTU2YzI0LjkzOSwwLDQ1LjE1Ni0yMC4yMTgsNDUuMTU2LTQ1LjE1NkM5MC4zMTMsMjAuMjE3LDcwLjA5NSwwLDQ1LjE1NiwweiBNMjIuMzk3LDc4Ljc1M2MwLDAtNS4yNzQtMy41NC03LjIyNS01Ljc4Yy0xLjk1MS0yLjI0LTMuOTc0LTQuNjk2LTMuOTc0LTQuNjk2TDI2LjAxLDU4LjE2MWw1Ljc4LDUuNzhsMC4zNjIsMC4zNjFMMjIuMzk3LDc4Ljc1M3ogTTQ1LjE1Niw2My4yMTljLTkuOTc2LDAtMTguMDYzLTguMDg3LTE4LjA2My0xOC4wNjNjMC05Ljk3NSw4LjA4Ny0xOC4wNjMsMTguMDYzLTE4LjA2M2M5Ljk3NSwwLDE4LjA2Myw4LjA4NywxOC4wNjMsMTguMDYzQzYzLjIxOSw1NS4xMzIsNTUuMTMyLDYzLjIxOSw0NS4xNTYsNjMuMjE5eiBNNjQuMzAzLDMyLjUxM2MwLDAtMC42NjItMS4yMDQtMi4xNjctMi44OWMtMS41MDUtMS42ODYtMy45NzQtMy45NzQtMy45NzQtMy45NzRsMTAuMTE1LTE0LjQ1YzAsMCwyLjQwOCwxLjc0Niw0LjY5NiwzLjYxMmMyLjI4OCwxLjg2Nyw2LjE0MSw3LjIyNSw2LjE0MSw3LjIyNUw2NC4zMDMsMzIuNTEzeiBNNDUuMTU2LDQxLjE4MmMtMi4xOTUsMC0zLjk3NCwxLjc3OS0zLjk3NCwzLjk3NGMwLDIuMTk1LDEuNzc5LDMuOTc0LDMuOTc0LDMuOTc0YzIuMTk1LDAsMy45NzQtMS43NzksMy45NzQtMy45NzRDNDkuMTMsNDIuOTYxLDQ3LjM1MSw0MS4xODIsNDUuMTU2LDQxLjE4MnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat center / 50%; }
.ethz-player .album-art { width:330px; height:330px; overflow:hidden; position:relative; border:1px solid #000; }
.ethz-player .album-art img { width:100%; display:block; }
.ethz-player .album-art:before { top:30px; left:50%; width:200px; content:'music'; font-size:72px; font-weight:600; position:absolute; margin-left:-100px; color:rgba(255,255,255,.4); }
.ethz-player .album-art:after { top:0; left:0; content:''; width:inherit; height:inherit; position:absolute; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,1)); }
.ethz-player .album-art img { width:100%; position:relative; }
.ethz-player .album-art.blur img { -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); }
.ethz-player a { color:inherit; text-decoration:none; }
.ethz-player .play-list { top:15px; left:15px; right:15px; display:none; bottom:245px; overflow-y:auto; position:absolute; width:auto !important; background:rgba(0,0,0,.4); padding-right:1px !important; }
.ethz-player .play-list a { color:#ccc; display:block; overflow:hidden; padding:6px 10px; white-space:nowrap; text-overflow:ellipsis; transition:all .4s ease-in-out 0s; }
.ethz-player .play-list a:hover { background:rgba(255,255,255,.2); }
.ethz-player .play-list a.active { color:#2ecc71; }
.ethz-player .play-list .album-thumb { width:35px; height:35px; overflow:hidden; margin-right:10px; border:1px solid #666; }
.ethz-player .play-list .album-thumb img { width:100%; display:block; }
.ethz-player .play-list .songs-info { max-width:240px; text-shadow:0 2px 2px #000; }
.ethz-player .play-list .songs-info .song-title { font-size:16px; }
.ethz-player .play-list .songs-info .songs-detail { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.ethz-player .current-info { left:30px; right:30px; color:#ccc; bottom:160px; margin-left:-15px; margin-right:-15px; position:absolute; text-shadow:0 2px 4px #000; }
.ethz-player .current-info>div { margin-top:10px; }
.ethz-player .current-info .song-title { font-size:24px; margin-top:10px; font-weight:400; }
.ethz-player .current-info .fa { min-width:30px; font-size:18px; text-align:center; font-weight:normal; }
.ethz-player .controls { margin-top:30px; position:relative; }
.ethz-player .controls .toggle-play-list { right:5px; width:40px; color:#ccc; height:40px; bottom:100px; border-radius:50%; line-height:40px; text-align:center; position:absolute; background-color:crimson; }
.ethz-player .controls .fa-pp:before { content:'\f04b'; }
.ethz-player .controls .active .fa-pp:before { content:'\f04c'; }
.ethz-player .controls .progress { height:1px; margin:15px 0; position:relative; background:#262626; }
.ethz-player .controls .duration { color:#ccc; font-size:14px; }
.ethz-player .controls .progress .bar { width:0; display:block; height:inherit; background:#bc3958; box-shadow:0 0 5px 0 #bc3958; }
.ethz-player .controls .action-button a { width:40px; height:40px; font-size:16px; margin-right:5px; border:2px solid; line-height:35px; border-radius:50%; text-align:center; display:inline-block; }
.ethz-player .controls .action-button a:hover,.ethz-player .controls .action-button a.active { color:#ccc; }
.ethz-player .controls .action-button a .fa { font-size:inherit; }
.volume { height:10px; width:100px; margin:0 10px; font-size:14px; cursor:pointer; display:inline-block; -webkit-appearance:none; background:transparent; }
.volume::-webkit-slider-runnable-track { height:.5em; background:#d8d8d8; border-radius:.25em; -webkit-appearance:none; }
.volume::-moz-range-track { border:none; height:.5em; background:#d8d8d8; border-radius:.25em; }
.volume::-ms-track { border:none; height:.5em; color:transparent; background:#d8d8d8; border-radius:.25em; }
.volume::-webkit-slider-thumb{-webkit-appearance:none; position:relative; margin:-.25em; border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-moz-range-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; cursor:ew-resize; border-radius:.5em}
.volume::-ms-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-ms-fill-lower,.volume::-ms-fill-upper { border-radius:5em; background:transparent; }
.volume::-ms-tooltip { display:none; }
.volume::-ms-fill-lower { background:#f05e7b; }
.volume::-webkit-slider-thumb { background:#dc143c; }
.volume::-moz-range-thumb { background:#dc143c; }
.volume::-ms-thumb { background:#dc143c; }
.volume::-webkit-slider-runnable-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume::-moz-range-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}
</style>
Perhatikan kode jQuery yang telah bangethz warnai merah, jika sudah ada/terpasang di blog anda maka silahkan dihapus saja bro.
Selanjutnya kita akan membuat kode HTML.
<div class="ethz-player">
<div class="album-art"></div>
<div class="play-list">
 <a href="#" class="play"
  data-id="1"
  data-album="Spectre"
  data-artist="Alan Walker"
  data-title="Fade"
  data-albumart="http://nggitar.com/wp-content/uploads/2016/06/alan-walker-faded-chord-gitar.jpg"
  data-url="https://sites.google.com/site/ethzmp3/bro/Alan%20Walker%20-%20Fade.mp3"></a>
 <a href="#" class="play"
  data-id="2"
  data-album="The Best Of Saint Loco"
  data-artist="Saint Loco"
  data-title="Terapi Energi"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZSBMJZ_g5F_1m_AW-W9McNPtAIQYsNqEB-cThUXXfurDVyiZ25gZY_WbLy3nkgoLaCY0RCtxsz3l9ADMIjnxtNy-a3IaTuJ3nmxnzySIDLcgqQZ20iRU6BlgJHEPMQbYYXRqK3GGi7cr/s640/saint_loco.jpg"
  data-url="https://sites.google.com/site/ethzmp3/bro/Saint%20Loco%20-%20Terapi%20Energi.mp3"></a>
 <a href="#" class="play"
  data-id="3"
 data-album=""
  data-artist="Marshmallow"
  data-title="Alone"
  data-albumart="http://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/12976113_159496367780726_1785912987_n.jpg"
  data-url="https://sites.google.com/site/ethzmp3/bro/Marshmello%20-%20Alone.mp3"></a>
 <a href="#" class="play"
  data-id="4"
  data-album="Bingung Bro"
  data-artist="Superman Is Dead"
  data-title="Pulang"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKxvrWWKwuZshwCNvsg69rq27hdUFqyE8ntwmI3qXuktV_NcqMneZ9Nz7MRSudl0HENWVqgVh5qiCAOmA0OZ8N7-KweSpJxnQxqUuqrQhiIcceMn4o5bUdBv5x4WgxoZLuJ7CFRPZJWcY/s1600/Superman+Is+Dead+blog_112387539266728.jpg"
  data-url="https://sites.google.com/site/ethzmp3/bro/Superman%20Is%20Dead%20-%20Pulang.mp3"></a>
  </div>
<div class="audio"></div>
<div class="current-info">
 <div class="song-artist"></div>
 <div class="song-album"></div>
 <div class="song-title"></div>
</div>
<div class="controls">
<a href="#" class="toggle-play-list"><i class="fa fa-list-ul"></i></a>
<div class="duration clearfix">
 <span class="pull-left play-position"></span>
 <span class="pull-right"><span class="play-current-time">00:00</span> / <span class="play-total-time">00:00</span></span>
</div>
<div class="progress"><div class="bar"></div></div>
<div class="action-button">
 <a href="#" class="prev"><i class="fa fa-step-backward"></i></a>
 <a href="#" class="play-pause"><i class="fa fa-pp"></i></a>
 <a href="#" class="stop"><i class="fa fa-stop"></i></a>
 <a href="#" class="next"><i class="fa fa-step-forward"></i></a>
 <input type="range" class="volume" min="0" max="1" step="0.1" value="0.5" data-css="0.5">
</div>
</div>
</div>
Ok, sampai disini kode HTML & CSS telah kita buat. Untuk memasang di laman/postingan anda, tinggal letakan kode CSS terlebih dahulu dan kode HTML tepat dibawah kode CSS.


Setting Mp3 Player

Pada kode HTML diatas, telah bangethz berikan beberapa warna berbeda:
warna biru adalah nama album, nama artis & judul lagu
warna kuning adalah cover album/gambar
warna orange adalah lagu yang akan di putar, nah disini lah kita butuhkan link mp3 yang telah anda simpan di google site tadi. Setelah semua selesai dan masih dalam mode HTML, silahkan publikasikan.
Read More

Membuat Menu Accordion di Blog

Add Comment

copyright © bangethz.com
Mempercantik tampilan blog itu ga salah ya bro, apa lagi di tambah menu yang bisa buka tutup untuk menampilkan daftar isi dari menu tersebut. Nah kali ini bangethz akan membagikan cara membuat menu accordion di blog, tanpa merubah kode template tentunya.
Ini bukanlah widget baru bagi para master blog, namun bagi anda yg belum paham membuatnya silahkan dipraktekan. Menu ini menggunakan kode tabel sederhana & ditambahkan kode CSS untuk mengaktifkan dropdown dan tampilan. Dapat anda letakan di sidebar, posting atau juga di laman blog.


LIVE DEMO

Cara membuat Menu Accordion


Copy semua kode di bawah ini: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;  
}
.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>          
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Templates</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Guides</a></li>
                    </ul></li></ul></li>
    <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Guides</a></li>              
                 </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Freebies</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Blogger templates</a></li>
    <li><a href="#">Wordpress Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Scripts</a></li>
         </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Services</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Website Design</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Custom Templates</a></li>                
                 </ul></li></ul></li>
 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >About us</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >About us</a></li>
    <li><a href="#">Contact us</a></li>
     <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Privacy policy</a></li>
              </ul></li></ul></li>
    </ul>
Jika sudah anda copy, silahkan anda letakkan di tempat yang anda inginkan, berikut bangethz jelaskan sedikit, gunakan ctrl+F untuk mempermudah anda mencari kode:
-  Ganti semua tanda # dengan link anda, baik di area li maupun di area ul jika diperlukan.
-  Kode background:orange untuk merubah warna mouse hover.
-  Kode background: # 333333 untuk merubah warna latar judul utama menu.
-  Kode width di bawah kode ul.container utuk merubah ukuran menu.
Silahkan dipraktekkan bro...
Read More
Langganan: Postingan (Atom)