Tutorial Desain Web Template Gratis


Tutorial Desain Web dan Template Gratis | Share Creativity™  » How are you my friends?? Tema sharing kali ini tentang Web Design nih, mungkin untuk menunjang kreatifitas anda dalam hal design, terutama dalam design web atau web desain, berikut saya berikan beberapa resource gratis buat anda para pecinta web design kreatif yang siap anda kunjungi buat PSD gratis dan tutorial gratisnya. Check this out guys...

Tutorial Desain Web dan Template Gratis | Share Creativity™
>>  White Blizzard design <<
 
Tutorial Desain Web dan Template Gratis | Share Creativity™
 Potter Designs: Free PSD Email Newsletter Template

Portfolio PSD template Tutorial Desain Web dan Template Gratis | Share Creativity™
 Free Portfolio PSD Template from Arun’s folio

locus one page Tutorial Desain Web dan Template Gratis | Share Creativity™
 Free Locus One Page PSD Template – Light

iDyll Ads Tutorial Desain Web dan Template Gratis | Share Creativity™
 iDyll Ads PSD Template Free

Green Style tutorial web desain
 Free Template – Green Style

clean corporate and business Tutorial Desain Web dan Template Gratis | Share Creativity™
 Clean corporate & business website PSD template

beer website template tutorial web desain
 Free Beer Website Template for Oktoberfest

app designer tutorial web design
 App Designer Portfolio

forum template design tutorial web desain
 vB Forum Template by Manu36Back

Ecommerce layout tutorial web desain
 Ecommerce layout with apple products

creative portofolio web desain tutorial
 Creative portfolio website PSD template

free portfolio PSD template tutorial web desain
 Free Portfolio PSD template

free grunge design tutorial web desain
 Free grunge design theme for webdesigner – PSD

free architecture tutorial web desain
 Free Architecture Website Template

sleek wordpress tutorial web desain

Demikianlah beberapa resource gratis yang dapat ardhi dapatkan, mungkin dari teman-teman ada tambahan? Silahkan tambahkan pada kotak komentar. Saya akan senang berbagi pendapat dengan anda. Semoga artikel Tutorial Desain Web dan Template Gratis | Share Creativity™ ini bermanfaat untuk anda. 


Cara Cepat Menaikkan PageRank Google


Cara Cepat Menaikan PageRank Google

Cara Cepat Menaikan PageRank Blog

Share Creativity - Ada beberapa situs analistik blog/web yang menyediakan secara gratis. Namun di antaranya memiliki persyaratan tertentu. misalnya blog/web anda minimal harus memiliki pagerank google [1] . namun anda kesulitan bagamana cara meningkatkan pagerank google blog anda yang masih [0].  cek pagerank anda di mastergoogle.com

kali ini saya akan berikan tips Cara Cepat Manaikan PageRank Google. meskipun masih banyak cara meningkatkan pagerank google . Bisa kok anda cari lagi di google.

silahkan anda ikuti langkah berikut utuk tips sederhana.

—— Copy mulai di sini —— Silahkan pelajari dengan baik lalu anda terapkan dengan benar…. Ada kata bijak yang mengatakan “Honesty is The Best Policy (Kejujuran adalah politik/strategi terbaik)”, mari kita buktikan….apakah konsep kejujuran disini dapat kita gunakan untuk menghasilkan traffic dan popularity yang sangat hebat dari sebuah metode rumit para expert webmaster atau pakarSEO..? Saya percaya kita bisa asal metode ini anda terapkan dengan benar…,apabila ini di aplikasikan pada web/blog anda sesuai ketentuan maka:
  • Blog anda akan kebanjiran traffic pengunjung secara luar biasa hari demi hari, tanpa anda harus repot-repot memikirkan SEO atau capek-capek melakukan promosi keberbagai tempat di dunia online.
  • Blog anda juga akan kebanjiran backlink secara signifikan hari demi hari, tanpa perlu repot-repot berburu link keberbagai tempat di dunia internet.

Hal yang harus anda lakukan adalah ikuti langkah-langkah berikut :
  1. Buatlah postingan artikel seperti posting saya ini, atau copy-paste artikel ini. Lalu beri Judul sesuka anda (karena itu merupakan SEO buat web/blog anda sendiri).
  2. Anda cukup hanya meletakkan Link-Link di bawah ini pada artikel anda tersebut pada blog/web anda
    1. Google.com
    2. Bisnis Online
    3. Panduan belajar Wordpress
    4. Softare Asli
    5. Lirik Music Indo
    6. Lirik Music Luar
    7. Free Template
    8. game para gamer
    9. Tutorial Blogging | Internet Bisnis Online
    10. pVidia Blog
    11. Tips dan Tricks SEO
    12. Bang huda
    13. Syaiful Hijrah
    14. Tutorial blog dan trik komputer
    15. Share Creativity

PERATURAN :
  1. Sebelum anda meletakkan Link-Link tersebut ditas ke dalam postingan web/blog anda, harap hapus Link nomor 1 , Sehingga link no 1 hilang dari daftar link dan setiap link anda naikkan 1 level ke atas. Yang tadinya no 2 naik menjadi no 1, yang tadinya no 3 menjadi no 2, yang tadinya no 4 menjadi no 3 dan begitu seterusnya. Setelah itu masukkan Link anda pada urutan Paling bawah ( no 15 ).
  2. Ingat!!! Jangan Merubah Urutan daftar link Apabila setiap blogger yang ikut dalam metode ini berhasil di duplikasi ole blogger lain yang akan bergabung, andaikan 5 blogger yang bergabung maka Backlink yang anda dapat adalah Ketika:
Posisi anda 15, jumlah backlink = 1
Posisi 14, jumlah backlink = 5
Posisi 13, jumlah backlink = 25
Posisi 12, jumlah backlink = 125
Posisi 11, jumlah backlink = 625
Posisi 10, jumlah backlink = 3.125
Posisi 9, jumlah backlink = 15.625
Posisi 8, jumlah backlink = 78.125
Posisi 7, jumlah backlink = 390.625
Posisi 6, jumlah backlink = 1.953.125
Posisi 5, jumlah backlink = 9.765.625
Posisi 4, jumlah backlink = 48.828.125
Posisi 3, jumlah backlink = 244.140.625
Posisi 2, jumlah backlink = 1.220.703.125
Posisi 1, jumlah backlink = 6.103.515.625

Dan semua Dari kata kunci yang anda inginkan, bayangkan jika ini bisa berjalan dengan sempurna maka anda akan memperoleh 6.103.515.625 external link yang berasal dari berbagai blog yang anda tidak akan pernah bayangkan sebelumnya. Belum lagi apabila ada pengunjung blog anda dari Link List tersebut diatas maka otomatis anda akan memperoleh traffic ke web/blog anda juga.
Ingat!!! Aturuan mainnya, Anda harus memulai dari urutan paling bawah (no 15) sehingga hasil backlink anda bisa Maksimal. Jangan salahkan saya apabila anda tidak mengikuti metode ini dengan benar dan Link anda tiba-tiba berada pada urutan no 1 dan menghilang pada Link daftar.
Jadi mulai lah pada urutan paling bawah(no 15). Bisakah Anda melakukan tindakan tidak fair atau tidak jujur dengan menyabotase metode ini, misalkan saja “menghilangkan semua link asal” lalu di isi dengan link web/blog anda sendiri…? ….Bisa, namun metode ini menjadi tidak maksimal. Kejujuran adalah strategi/politik terbaik…..Tapi saya yakin bahwa kita semua tak ingin menjatuhkan kredibilitas diri sendiri dengan melakukan tindakan murahan seperti itu… —- SELESAI —-

g lainn

Menghilangkan Jumlah Artikel pada Label




Bagaimana cara menghilangkannya? Sangat mudah kok kawan. Karena Blogger sendiri sudah menyediakan pengaturan Label yang dapat diedit dengan mudah. Ikuti langkah-langkah Menghilangkan Jumlah Artikel pada Label berikut ini :

1. Masuk dasbor blogger pilih Tata Letak
2. Pada bagian Label/Categories klik Edit (Lihat gambar)


3. Hilangkan centang pada "Tampilkan jumlah entri per label"


4. Klik Simpan. Klik Simpan Template

Atau dengan cara :

1. Masuk dasbor Blogger, pilih menu Template/ Rancangan,
2. Klik Edit HTML, 
3. Centang "Expand Template Widgets", klik Lanjutkan
4. Cari kode berikut ini :
(<data:label.count/>)
5. Hapus kode tersebut. Selesai

Bila ada keluhan atau kegagalan harap lapor melalui komentar (hehe...)
Semoga bermanfaay and selamat mencoba!

Oiyya jangan lupa untuk melihat tutorial yang lainnya loh :
>> Cara mengganti/memasang Favicon
>> Menghilangkan Navbar Blogger 
>> Menghilangkan Tulisan "Subscribe to : post (atom)" 
>> Menghilangkan Icon Bergambar Obeng dan Tang
>> Menghilangkan Pesan Pencarian Blogger
>> Menghilangkan Logo Blogger di 'Comment'
>> Trik Menghilangkan Bagian Elemen ketika di Page
>> Menghilangkan Tulisan Langgan: Poskan Komentar (Atom)

Menghilangkan Jumlah Artikel pada Label 

Menghilangkan Subscribe to Post Atom


Tanpa basa-basi lagi saya akan share tutorial tentang Menghilangkan Subscribe to Post Atom. Ikuti langkah-langkah berikut :

1. Masuk ke dashboard Blogger
2. Pilih Template
3. Klik Edit HTML, centang "Expand Template Widgets", klik Lanjutkan
4. Tekan Ctrl + F untuk mencari kode berikut

<div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
<a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>
5. Hapus kode tersebut. Klik Simpan Template

Sekian tutorial tentang  Menghilangkan Subscribe to Post Atom semoga bermanfaat and selamat mencoba!


Oiyya jangan lupa untuk melihat tutorial yang lainnya loh :
>> Cara mengganti/memasang Favicon 
>> Menghilangkan Navbar Blogger 
>> Menghilangkan Icon Bergambar Obeng dan Tang 
>> Menghilangkan Angka Dalam Label
>> Menghilangkan Pesan Pencarian Blogger
>> Menghilangkan Logo Blogger di 'Comment'
>> Trik Menghilangkan Bagian Elemen ketika di Page
>> Menghilangkan Tulisan Langgan: Poskan Komentar (Atom)

Menghilangkan Menyembunyikan Navbar Blog


Apa itu navbar??, Saya akan menjelaskan sedikit mengenai fungsi dari Navbar di Blog. Navbar atau Navigasi Bar merupakan fasilitas standar yang dimiliki oleh Blogger.com. Letaknya berada di bagian paling atas dari blog. yang berfungsi untuk memudahkan kita untuk balik ke dashboard utama lalu mencari alamat url blog teman-teman kita yang lain, bisa juga untuk secara otomatis mencari blog berikutnya, bisa juga untuk mengkustomisasi blog kita lalu melihat entri baru lainnya, kurang lebih Navbar digunakan untuk akses cepat/memberikan fungsi mempermudahkan. mungkin itu sedikit ulasan dari fungsi Navbar.


Cara Menghilangkan Menyembunyikan Navbar Blog
1. Log in ke blogger masuk dasbor  
2. Pilih menu Rancangan / Template  
3. Klik Edit HTML  
4. Centang "Expand Widget Templates", klik Lanjutkan
5. Cari kode ]]></b:skin> , masukkan kode berikut diatas kode ]]></b:skin>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
6. Klik Simpan template, Selesai.


Oiyya jangan lupa untuk melihat tutorial Trik & Hack Bloggeryang lainnya loh :
>> Cara mengganti/memasang Favicon 
>> Menghilangkan Nafbar Blogger
>> Menghilangkan Tulisan "Subscribe to : post (atom)"
>> Menghilangkan Icon Bergambar Obeng dan Tang 
>> Menghilangkan Angka Dalam Label
>> Menghilangkan Pesan Pencarian Blogger
>> Menghilangkan Logo Blogger di 'Comment'
>> Trik Menghilangkan Bagian Elemen ketika di Page
>> Menghilangkan Tulisan Langgan: Poskan Komentar (Atom)
Cara Menghilangkan Menyembunyikan Navbar Blog

Selamat mencoba and semoga berhasil!

Mengganti dan Memasang Favicon (Icon Blog)

Favicon adalah ikon kecil yang berada di pojok kiri address bar dan pojok kiri tab atau tittle bar browser kita. Secara default favicon Blogger/Blogspot berbentuk simbol B dengan background jingga. Kalau dirasa sepertinya kurang keren ya menurut saya. Sehingga ada keinginan untuk mengganti nya. Tentunya kamu juga ingin punya favicon sendiri untuk branding blogmu, ya atau tidak? Kemudian bagaimana cara membuat favicon yang gampang, lalu menampilkannya di blog? 

>> Membuat Favicon Sesuai Seleramu
Buatlah favicon dahulu sesuai selera kamu. Jika kamu seorang master (hehe) atau dapat menguasai software grafis, silahkan membuat favicon dengan Adobe Photoshop, Illustrator, CorelDraw, atau software grafis apapun yang kamu kuasai. Jangan lupa ekspor atau unagh ekstensinya ke gif, png atau jpg. 

Namun apabila kamu tidak menguasai software grafis, bisa gunakan icon gratis dengan googling atau bahkan foto yang ada di harddiskmu.

Upload file tersebut ke website FavIcon from Pics dengan menekan Browse. Centang pilihan "Animate Favicon" jika anda menginginkan favicon animasi. Lalu klik "Generate Favicon.ico"


Kemudian download icon tersebut dengan mengklik "Download Favicon"


Ekstrak file zip yang sudah kamu download tadi. Upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis seperti Google Pages, Photobucket, kalau saya menggunakan Tinypic.com. Lalu bagaimana cara memasangnya di blog?? Ada dua cara :

Cara Mengganti dan Memasang Favicon (Icon Blog) Part I
1. Log in ke blogger masuk dasbor 
2. Pilih menu Rancangan / Template 
3. Klik Edit HTML 
4. Centang "Expand Widget Templates", klik Lanjutkan 
5. Cari kode <b:include data="blog" name="all-head-content"/> atau <b:include data='blog' name='all-head-content'/> (tekan & tahan Ctrl + F untuk pencarian)  
6. Setelah ketemu masukkan script berikut di atas kode <b:include data="blog" name="all-head-content"/> atau <b:include data='blog' name='all-head-content'/>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon1.gif" type="image/gif" />
7. Atau bisa dengan cara mencari kode </head> , kemudian copas kode script berikut diatasnya
<link href='alamat tempat gambar favicon.ico sobat' rel='icon' type='image/vnd.microsoft.icon'/>
atau
<link href='alamat tempat gambar favicon.ico sobat' rel='icon' type='image/x-icon'/>
atau

<link rel="shortcut icon" href="alamat tempat gambar favicon.ico sobat"/>



Klik simpan template





Cara Mengganti dan Memasang Favicon (Icon Blog) Part II : 
Gampang saja, memang paling mudah ditunjukkan dengan gambar. Karena kata orang, gambar mampu berbicara atau menjelaskan lebih banyak dari kata-kata. Hehe...



1. Log in ke blogger masuk dasbor 
2. Masuk ke Layout / Tata Letak
3. Lihat letak Favicon di kiri atas, klik edit (look this picture)



4. Klik browse, pilih filenya, klik open dan Unggah. Selesai tanpa mendapatkan URL gambar, mudah kan??
Tinggal kamu mau pilih yang mana....

Semoga bermanfaat kawan and selamat mencoba!

Menghapus Menghilangkan Icon Obeng Tang di Blog



"Janganlah kamu iri atas kesuksesan orang lain, ketahuilah bahwa mereka berada di sana karena tekad dan kerja keras mereka sendiri"


Hai sobat blogger posting kali ini saya akan membahas tentang cara menghilangkan icon obeng dan tang yang terdapat pada blog biasanya terletak di pojok kanan bawah widget/gadget blog. Sebenarnya fungsi icon obeng dan tang itu adalah untuk mempercepat proses pengeditan atau istilahnya Quick Edit, misalnyaa jika kita ingin mengedit salah satu elemen atau gadget yang terdapat pada blog kita, dan yang perlu kita lakukan hanyalah meng-klik salah satu icon obeng-tang tsb.
Sebenarnya Icon obeng dan tang itu hanya bisa kita lihat jika kita sedang Login ke blogger saja, sedangkan untuk pengunjung blog kita, mereka tidak akan bisa melihatnya. Namun sejujurnya ini mengganggu tampilan blog juga, apabila kalian juga tidak suka dengan adanya Ion obeng dan tang itu tadi, kalian juga bisa menghilangkannya. Untuk cara menghilangkan icon obeng dan tang yang terdapat pada blog, ikuti langkah-langkah dibawah ini :
Sebelumnya :
1. Log in ke blogger masuk dasbor
2. Pilih menu Rancangan / Template
3. Klik Edit HTML
4. Centang "Expand Widget Templates", klik Lanjutkan
5. Cari kode ]]><b:skin/> (tekan & tahan Ctrl + F untuk pencarian) 
6. Setelah ketemu masukkan script berikut di atas kode ]]><b:skin/> Satu Paragraph Anda Di Sini
.quickedit{
display:none;
}
 7. Klik Simpan template
Selamat mencoba!

Oiyya jangan lupa untuk melihat tutorial yang lainnya loh :
>> Cara mengganti/memasang Favicon
>> Menghilangkan Nafbar Blogger
>> Menghilangkan Tulisan "Subscribe to : post (atom)"
>> Menghilangkan Icon Bergambar Obeng dan Tang
>> Menghilangkan Angka Dalam Label
>> Menghilangkan Pesan Pencarian Blogger
>> Menghilangkan Logo Blogger di 'Comment'
>> Trik Menghilangkan Bagian Elemen ketika di Page
>> Menghilangkan Tulisan Langgan: Poskan Komentar (Atom)  

 Semoga bermanfaat kawan!

Chapunk | GAME FLASH

Cara Bermain : Tinggal arahkan mouse kamu untuk menggerakkan capungnya. 
Tantangan : Menghindari tembakan dan meletuskan balon dan dapatkan poin sebanyak-banyaknya

Selamat Bermain!


Mendeteksi Hantu Dengan XParanormal Detector

Mendeteksi Hantu Dengan XParanormal Detector



Mendeteksi Hantu Dengan XParanormal Detector - Kali ini saya akan membagikannya kepada kalian semua.Software Ini Berfungsi Untuk mendeteksi makluk2 aneh disekitar kita melalui wifi & network adapter ( itu sih katanya software ini , saya sendiri belum tahu kepastiannya ).Program ini terdiri dari 2 versi yaitu free dan pro.Di versi free kita hanya bisa sebatas melakukan scanning saja , sedangkan di versi pro kita bisa mendeteksi secara detail dimana pusat makhluk2 aneh tersebut berada.Tapi jangan kahwatir , disini saya akan memberikan yang Versi pro karena sesuai dengan isi blog ini yaitu download software full version. Langsung saja download page :

XParanormalDetector.zip

Serial Key : KUD-59718

Caranya masuk ke menu settings > masukkan serialnya dan klik ok , selamat Xparanormal detector kamu sudah menjadi full version hehehehe....

Sekian dulu yah....Smapai ketemu di artikel berikutnya kawan...

Cara Melacak Lokasi No HP Telkomsel Seseorang

Cara Melacak Lokasi No HP Telkomsel Seseorang


Cara Melacak Lokasi No HP Seseorang - Kamu pernah dijahilin oleh nomor tak dikenal? Atau HP kamu sering di sms yang berisi penipuan? Apakah kamu ingin melacak lokasi dimana posisi yang menjahili kamu? Misalnya saja seperti kasus SMS Mama Minta Pulsa atau Transfer Uang ke Rekening Mama yang gak jelas.. Nah kali ini saya share softwares untuk melacak nomor hp seseorang, namanya "HLR LookUp". Software ini free untuk PC kamu. Enaknya lagi PC kamu tidak perlu terhubung ke internet.  Namun software ini untuk sekarang hanya dapat di jalankan untuk kartu Telkomsel saja. Baik langsung saja saya kasih link downloadnya :


Sekian postingan kali ini tantang Cara Melacak Lokasi No HP Telkomsel Seseorang. Selamat menikmati softwarenya!

Metal Slug | GAME FLASH

Salah satu permainan yang mirip "Metal Slug Game" dari segi grafis sampai persenjataan yang digunakan, pokoknbya benar-benar mirip deh! Selamat Bermain!

Cara Bermain : W-A-S-D = Jalan/ arah. J = Tembak / Rescue K = Lompat L = Melemparkan Granat Bunuh semua musuh dan menyelamatkan semua tawanan.
Dimulai dari pembukaan game, empat huruf yang ada mengandung arti "Special Mission" dengan tambahan 3 huruf kecil yang berarti "Stage 1". Hal ini mungkin dimaksudkan bahwa akan ada level tambahan yang sedang dikembangkan untuk update game ini.
Kemudian... 
  1. Tombol pertama adalah tombol untuk penjelasan tentang permainan. Tombol ini sudah dinon-aktifkan mungkin karena tutorial permainan sudah dijelaskan pada saat anda menekan tombol kedua. Keterangan permainan juga terdapat pada 2 kotak yang ada di bawah layar.
  2. Kotak yang ada di kiri layar menunjukan persenjataan dan amunisi yang anda dapatkan sewaktu memainkan game metal slug ini. Sedangkan kotak yang lain merupakan keterangan bonus dan skor permainan.
  3. Tombol kedua merupakan tombol start, kemudian akan memunculkan toturial permainan. Tekan tombol yang ada di bawah kanan layar kemudian tentukan tingkat kesulitan permainan :
--> Tombol Atas : Easy level
--> Tombol Tengah : Medium level
--> Tombol Bawah : Hard level Satu Paragraph Anda Di Sini
Selamat Bermain!

Buat Menu Paling Keren Css3 Circle System Menu


Buat Menu Paling Keren Css3 Circle System Menu


Rasulullah SAW bersabda, "Sabar sebenarnya ialah sabar pada saat bermula (pertama kali) tertimpa musibah)

Hai kawan! Kali ini aku mau share nih Css3 Circle System Menu, bentuknya persis seperti gambar diatas. Dan menu ini menggunakan css3:not jadi jika browsermu mendukung css3 maka menu akan terlihat sempurna. Sehingga saat kamu menyentuh linknya, maka menunya akan mengecil dan sebaliknya akan membesar jika tidak kamu sentuh atau hover menu/linknya. Kalau masih penasaran langsung lihat aja demonya kawan... 


Segala bentuk model dapat diikuti dengan css dan sudah banyak sekali blogger yang menguasai yang menciptakan karya-karya keren mereka, sudah lihat demonya? Mari simak cara menggunakannya atau lebih tepatnya cara memasangnya...

1. Masukkan kode CSS di bawah ini di atas kode ]]></b:skin>




/* Name : Css3 Circle System Menu
   Author : SYSTEM OF BLOG
   URL : http://sin1aja.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; }
* html .hapus { height: 1%; }
.hapus { display: block; }
ul.system-menu {
    margin: 0 auto 10px;
    padding: 0;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 390px
    }
ul.system-menu li {
    list-style-type: none;
    margin: 0 5px 0 0;
    padding: 0;
    float: left;
    position: relative;
    width: 70px;
    height: 80px;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }
ul.system-menu li a {
    position: absolute;
    margin: -30px 0 0 -43%;
    text-decoration: none;
    font: bold 13px/40px Arial, sans-serif;
    padding: 0;
    background: #21D319;
    color: transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 45%;
    left: 50%;
    outline: none;
    border: 5px inset #F8FBFC;
    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear
    }
ul.system-menu li a:hover {
    line-height: 130px;
    color: #000;
    border-color: #C5B386;
    background: #FAC800;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
    }
ul.system-menu li span.pembuka {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -29%;
    top: 11px;
    width: 25px;
    height: 30px;
    background: #949596;
    -moz-box-shadow: 3px -3px 0 0 #ECECEC;
    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
    box-shadow: 3px -3px 0 0 #ECECEC
    }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
    position: absolute;
    background: #F0F0F0;
    padding: 2px;
    width: 15px;
    left: 3px
    }
ul.system-menu li span.satu {
    top: 5px
    }
ul.system-menu li span.dua {
    top: 13px
    }
ul.system-menu li span.tiga {
    top: 22px
    }
.empat, .lima, .enam {
    position: absolute
    }
.empat {
    border: 15px solid;
    border-color: transparent transparent #EEE transparent;
    top: -7px;
    left: 10px
    }
.lima {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 14px
    }
.enam {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 28px
    }
.abot, .abit {
    position: absolute;
    left: 15px
    }
.abot {
    width: 20px;
    height: 20px;
    background: #EEE;
    top: 20%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }
.abit {
    border: 10px solid;
    border-color: transparent transparent #EEE transparent;
    top: 33%
    }
.a, .b, .c, .d {
    position: absolute;
    padding: 5px;
    background: #FFF7F7;
    top: 26%
    }
.a {
    left: 25px;
    background: #39FF13
    }
.b {
    top: 27px;
    left: 13px;
    background: #0070FF
    }
.c {
    left: 25px;
    top: 27px;
    background: #FFE000
    }
.d {
    left: 13px
    }
.e, .f {
    position: absolute
    }
.e {
    width: 15px;
    height: 17px;
    background: rgb(171, 185, 163);
    top: 35%;
    left: 32%;
    border: 2px solid rgb(255, 255, 255)
    }
.f {
    border: 10px solid;
    border-color: transparent transparent rgb(255, 255, 255) transparent;
    top: -2px;
    left: 30%
    }
ul.system-menu:hover li:not(:hover) {
    -moz-transform: rotate(360deg) scale(0.7);
    -ms-transform: rotate(360deg) scale(0.7);
    -o-transform: rotate(360deg) scale(0.7);
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7)
    }

2. Masukkan kode HTML diawah ini ke Gadget HTML/Javascript. Caranya masuk ke Tata Letak, kemudian tambah gadget, pilih HTML/Javascript.
<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

Untuk ikon-ikonnya bisa kamu buat sendiri, oke? Kemudian upload dan masukkan url gambarnya ke kode diatas. Nah sekian postingan kali ini semoga bermanfaat kawan!


 
Copyright © / Share Creativity™ / IR-AKAZINE TEMPLATE.All Right Reserved.
Created by : akaUTta Designed by : Aka_ARdi | Powered by Blogger.
Loading...