Cara Otomatis Membuat Link Sumber Saat Artikel Di Copas
Hi, Sobat! Rizki Kali Ini Membawa Informasi Penting Untuk Para Blogger Yang Tidak Suka Kalo Artkelnya DiCopas Tanpa Memasukan Link Sumber? OK, Sekarang Kita Belajar "cunning trick". Tentang Automatic Link Source in Every Article when COPASTed/Cara Membuat Widget Otomatis Membuat Link Sumber Kalau Artikel Dicopas. Apakah Efeknya? Efeknya Untuk Membuat Automatic Link Sumber Kalo Artikel Kita Di Copas. Ini Adalah Trick Yang Bagus Dan Sangat Penting Buat Sobat Yang Ingin Dapet Backlink Dan Mendapatkan Untung Besar.
DEMO - Copy Beberapa Artikle Di Demo Itu Dan Simpan Di Notepad Lihat Hasilnya
Turitorial Langkah-Langkah Cara Membuat Otomatis Membuat Link Sumber Kalau Artikel Dicopas
2. Pergi Ke Design --> Edit HTML
3. Copas Kode Di Bawah Ini Dan Letakan Sebelum, Tag/Kode </head>
Pengaturan:
DEMO - Copy Beberapa Artikle Di Demo Itu Dan Simpan Di Notepad Lihat Hasilnya
Turitorial Langkah-Langkah Cara Membuat Otomatis Membuat Link Sumber Kalau Artikel Dicopas
Untuk memanfaatkan layanan Google Webmaster Tools, yang kamu butuhkan hanyalah akun Google. Jika kamu sudah memiliki akun di Google, kamu sudah bisa menggunakan layanan ini. 1. Buka Google Webmaster Tools di alamat http://www.google.com/webmasters/tools 2. dengan akun Google kamu. gambar log in pada Google Webamster Tools Mengingat kamu belum mendaftarkan data website / blog kamu, maka tampilan halaman Google Webmaster Tools kamu masih terlihat kosong seperti gambar di bawah ini Home page Google Webamster Tools Lalu jika kamu ingin menambahkan website / blogmu ke dalam Google Webmaster Tools, maka klik , kamu bisa menambahkan website / blogmu sebanyak yang anda kelola. Kemudian jika kamu telah menambahkan website / blogmu, maka akan muncul tabel yang berisi daftar-daftar website / blog yang telah kamu masukkan tadi. Setiap website memiliki dashboard tersendiri untuk mengelola dan memonitor masing-masing website / blog. home page yang sudah ditambahkan website / blog Nantinya, kamu juga bisa menghapus website / blogmu yang sudah tidak aktif dengan cara memilih salah satu website / blog dan klik tombol Pada bagian , kamu juga dapat pesan ringkas mengenai hasil perubahan atas pengaturan yang kamu lakukan. Secara periodik, Google juga akan menampilkan pesan yang berkaitan dengan Webmaster Tools. Jadi, silahkan kamu bersenang-senang dengan Google Webmaster Tools dulu ya... ^_^
Original from: http://dengangoogle.blogspot.com/2011/03/menambahkan-blog-ke-google-webmaster.html
Copyright Full Blog Tricks
1. Log in Ke Akun BloggerOriginal from: http://dengangoogle.blogspot.com/2011/03/menambahkan-blog-ke-google-webmaster.html
Copyright Full Blog Tricks
2. Pergi Ke Design --> Edit HTML
3. Copas Kode Di Bawah Ini Dan Letakan Sebelum, Tag/Kode </head>
<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Original from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Mashasih"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Original from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Mashasih"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>
Pengaturan:
- Sobat Bisa Merubah Original from: Mashasih dengan Text Yang Anda Inginkan
| Ĉ ђ Ë Â Ť : BeLaJaR BLoG | 1 ƘǿmєиtąЯ
Software Hack Akun Facebook
Software hack facebook terbaru kali ini dibuat dengan baik, asalkan kita tidak membagikan secara open source atau terbuka. agar tidak menarik perhatian dan diblacklist oleh pihak facebook. software hack facebook terbaru ini bebas dari semua jenis antivirus, oleh karena itu software hack facebook yang di buat oleh anonymouse dan Zmaim v 2.0 sangat ramah dan mudah digunakan untuk pengguna, petunjuk software hack facebook ini pun harus digunakan untuk tindakan tertentu atau digunakan untuk, bukan tindakan yang merugikan orang lain, biasanya Software hack facebook digunakan oleh orang tua yang dilakukan pada nak-anaknya yang masih kecil, oleh karnanya tolong Software hack facebook ini pergunakan dengan sebaik baiknya.
Selamat mencoba.
Klik Enter , Kemudian Masukkan password
Pilih Hack Account Facebook Kemudian Masukan Akun Yang Menjadi Target
ini passwordnya
| Ĉ ђ Ë Â Ť : CaRa HacK | 3 ƘǿmєиtąЯ
Cara Ganti Nama FB Menjadi Keren
Credit : ™RusmayanaCyber™
Thank : Doza Cracker
Nih Saya Share Cara Ganti Nama Facebook Yang Sudah Limit ( Yang Tidak Bisa Di Ganti Lagi )
Karna Saya Sudah Ganti Domain Baru.Dan Ini Saya Akan Memberi Artikel Keren
Langsung Ke TKP>>>..Jangan Banyak Bacot.:
Cara Ganti Nama Facebook :
1. Buka Facebook Kalian
2.Buka Tab Baru.
3.Copy Pastekan Nih Link nya https://www.facebook.com/help/contact/?id=245617802141709&_rdr
Liat yah Fotonya
4.Lalu Upload Foto Asli Kalian Dan Unggal Lalu Kirim..
5. Alesanya Sesuai Keingin Anda..
| | 0 ƘǿmєиtąЯ
Solusi : Regedit Disable by Administrator
Saat kita akan mengedit registri, ada kalanya fungsi regedit di Windows tidak bisa diakses alias disable. Ini bisa dikarenakan oleh virus, atau juga memang oleh sang Administrator telah di-disable untuk mencegah orang yang tidak berkepentingan mengutak-atik setting Windows. Kalau anda pernah mengalami kejadian seperti ini Registry Editing has been disable by your Administrator ketika memasukkan perintah REGEDIT pada menu RUN
Inilah solusi singkat yang mungkin bisa membantu anda mengatasi masalah seperti diatas.Klik Menu [Start] – [RUN] dan masukkan perintah : GPEdit.msc
Akan muncul Windows Group Policy, selanjutnya arahkan ke [User Configuration] – [Administrative Templates] – [System].
Setelah itu pada jendela sebelah kanan (panel setting) Double Klik Prevent Access to Registry Editing Tools
Pada jendela yang muncul pilih NOT CONFIGURED atau DISABLED, untuk mengaktifkan kembali fungsi regedit.
Klik OK
Sekarang coba anda akses registry editor lewat menu [RUN] - REGEDIT kalau masih belum berhasil, Restart Komputer anda dan coba akses lagi registry editor.
Bila ternyata Solusi tersebut masih juga kurang ampuh, Tinggal Download REGTOOLS dari Doug Knox, Save dan kemudian jalankan regtools, ini berfungsi untuk meng-enable dan disable registry. Bila kondisi registry editor disable, maka regtool akan meng-enable-kannya, begitupun sebaliknya.
| | 0 ƘǿmєиtąЯ
Memproteksi Gambar Dari Save As
Sepertinya setiap postingan tanpa disertai gambar, baik itu ilustrasi atau memang bagian dari tulisan itu jadi terasa kurang menarik. Oleh sebab itu sebagian besar blogger yang posting akan menyertakan gambar. Baik gambar itu hasil jepretan sendiri atau mencari di search engine dan melampirkannya.
Kali ini kita akan belajar memproteksi gambar yang ada di blog kita dari 'save as' atau disimpan oleh seorang. Mungkin bagi yang sudah menerapkan disable klik kanan di blognya bisa langsung juga memproteksi gambar. Sekarang yang akan kita bahas kali ini adalah trik sederhana untuk memproteksi gambar dari 'save as'. Jika orang mengklik kanan gambar pastinya akan bisa dan ada pilihan 'save as' dan ketika diklik akan muncul jendela tempat menyimpan. Saat gambar disimpan yang ada adalah berupa gambar kosong.
Cara Memproteksi Gambar di Blog dari Save As
Berikut ini adalah kode HTML normal untuk menampilkan sebuah gambar;
Dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik di bawah ini akan membuat gambar kosong pada hasil download. Selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Berikut adalah kodenya;
Dan berikut adalah contoh gambar yang memakai kode diatas, coba saja cek dengan klik kanan lalu 'save as'.
Kali ini kita akan belajar memproteksi gambar yang ada di blog kita dari 'save as' atau disimpan oleh seorang. Mungkin bagi yang sudah menerapkan disable klik kanan di blognya bisa langsung juga memproteksi gambar. Sekarang yang akan kita bahas kali ini adalah trik sederhana untuk memproteksi gambar dari 'save as'. Jika orang mengklik kanan gambar pastinya akan bisa dan ada pilihan 'save as' dan ketika diklik akan muncul jendela tempat menyimpan. Saat gambar disimpan yang ada adalah berupa gambar kosong.
Cara Memproteksi Gambar di Blog dari Save As
Berikut ini adalah kode HTML normal untuk menampilkan sebuah gambar;
<img width="320" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE543rI0EDHdOxONEfgdyms4Brw2Hf8Ty-1mbNEyh7QYFm1gKA5l_GQlSrJaVLdprZktIWUpKqLNEssMYlo6fDCkxxmZtCVWg_sFXb1ZzZJjdkEiZsXVIuzrBaLK_Whm51WbNueSW6i8/s320/computer-vision-syndrome.jpg"/>
Dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik di bawah ini akan membuat gambar kosong pada hasil download. Selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Berikut adalah kodenya;
<img style="background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE543rI0EDHdOxONEfgdyms4Brw2Hf8Ty-1mbNEyh7QYFm1gKA5l_GQlSrJaVLdprZktIWUpKqLNEssMYlo6fDCkxxmZtCVWg_sFXb1ZzZJjdkEiZsXVIuzrBaLK_Whm51WbNueSW6i8/s320/computer-vision-syndrome.jpg');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="320" height="213"/>
Dan berikut adalah contoh gambar yang memakai kode diatas, coba saja cek dengan klik kanan lalu 'save as'.
| | 1 ƘǿmєиtąЯ
Membalas Komentar Blog Otomatis
Blog itu adalah sarana berbagi, berkomunikasi. Oleh sebab itulah hadir kotak komentar, untuk berkomunikasi antara pembaca dan pemilik blog. Sesuatu yang kita share atau bagi di blog yang berupa tulisan, photo atau video tak jarang mendapatkan komentar dari yang melihat. Komentar itu bisa berupa pertanyaan mengenai tulisan kita, pendapat lain dari pembaca mengenai topik yang ditulis atau kadang hanya meninggalkan jejak. :x
Penting bagi blogger untuk tidak hanya mengisi blognya secara rutin, tapi juga membalas atau menjawab komentar yang muncul dari tulisannya. Apa yang ada di blog adalah mewakili si empunya blog. Kalau di tidak mau menanggapi komentar bisa jadi dianggap sombong, atau terkesan blognya tak hidup karena tak ada komunikasi dua arah. Akhirnya enggan datang ke blog kita lagi. Ini adalah salah satu alternatifnya jika kita memang sibuk tak ada waktu untuk menanggapi komentar yang muncul. Yaitu dengan membuat membalas komentar secara otomatis. Setelah pembaca menulis dan mengirim komentar akan muncul balasan komentar itu dengan ucapan terimakasih. :~
Cara Membalas Komentar Blog Secara Otomatis
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut;
6. Hapus kode di atas dan ganti dengan kode berikut;
7. Teks yang berwarna merah adalah balasan komentar, kita dapat mengganti sesuai keinginan kita. Dan 10adalah ukuran fontnya.
8. Simpan Template jika sudah selesai.
Semoga trik blogging di atas bermanfaat, jangan lupa sesekali kita balas komentar itu secara langsung sesuai dengan isi komentarnya, biar blog kita ramah :D
Penting bagi blogger untuk tidak hanya mengisi blognya secara rutin, tapi juga membalas atau menjawab komentar yang muncul dari tulisannya. Apa yang ada di blog adalah mewakili si empunya blog. Kalau di tidak mau menanggapi komentar bisa jadi dianggap sombong, atau terkesan blognya tak hidup karena tak ada komunikasi dua arah. Akhirnya enggan datang ke blog kita lagi. Ini adalah salah satu alternatifnya jika kita memang sibuk tak ada waktu untuk menanggapi komentar yang muncul. Yaitu dengan membuat membalas komentar secara otomatis. Setelah pembaca menulis dan mengirim komentar akan muncul balasan komentar itu dengan ucapan terimakasih. :~
Cara Membalas Komentar Blog Secara Otomatis
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut;
<b:include data='comment' name='commentDeleteIcon'/>
6. Hapus kode di atas dan ganti dengan kode berikut;
<b:include data='comment' name='commentDeleteIcon'/> <span style='margin: 10px 10px 0px 0px; text-align: center; font-size: 10px;'>Rizky Rama : Terima kasih atas komentarnya.</span>
7. Teks yang berwarna merah adalah balasan komentar, kita dapat mengganti sesuai keinginan kita. Dan 10adalah ukuran fontnya.
8. Simpan Template jika sudah selesai.
Semoga trik blogging di atas bermanfaat, jangan lupa sesekali kita balas komentar itu secara langsung sesuai dengan isi komentarnya, biar blog kita ramah :D
| Ĉ ђ Ë Â Ť : BeLaJaR BLoG | 0 ƘǿmєиtąЯ
Jquery Sliding Login Panel di atas header blog
Untuk membina Jquery Sliding login panel di atas header blog, seperti yang boleh anda lihat di sini (Demo), sila ikut beberapa langkah di bawah.
1. Log in dashboard--> Template --> Edit HTML --> Proceed.
2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>
3. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin>
#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}
.slide{width:950px;
margin:auto;
}
.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}
.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}
.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}
.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}
.loginregister{
color:#999;padding:5px;
}
.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}
.loginregister a:hover{
color:#fff';
}
.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}
.loginform ul li{
display:inline;
}
.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}
input#signIn{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95sM4g7mTM-u-gwKs70NAPAVtfXbkZJJviSX9rXMlK71Ba6z-75z0pR9N6UQpYt2uwJx8VChrMRnmwqsaJ_gG5EVwJrnaAeA5cV9VUBJ7qGNL8OsCP7TgcSGLNGmXfz0Hyfr4IllcG0c/) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}
input#Email,input#Passwd{
background:#414141;color:#fff;
}
input:focus#Email,input:focus#Passwd{
background:#545454;
}
4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head>
5. Copy dan paste kod ini, di bawah atau selepas kod </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.
<script type='text/javascript'>
$(document).ready(function(){$(".btn-slide").click(function(){$("#slide-panel").slideToggle("slow");});});
</script>
<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&ltmpl=start&skipvpage=true&rm=false&showra=1&fpui=2&naui=8#s01' method='post'>
<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>
<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>
<input id='signIn' name='signIn' type='submit' value='Masuk'/>
<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>
<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar­</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>
<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>
p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.
| Ĉ ђ Ë Â Ť : BeLaJaR BLoG | 0 ƘǿmєиtąЯ
Tambahkan Emoticon Sexy Di Komentar Blog
Banyak cara yang dilakukan para blogger untuk menarik perhatian dari para pengunjungnya. Salah satu diantaranya yaitu dengan memasang emotions pada kotak komentar, icon2 emotions ini juga dimaksudkan agar pengunjung tertarik untuk memberikan komentarny.
Sekarang el akan berbagi script emotion cewek sexi, memang tidak terlalu bagus seh tapi setidaknya membrikan gambar/icon yg sedikit berbeda dengn yang lain (agak nakal). Cara memasang emotion cewek sexy pada kotak komentar blog langkah awal masuk blogger -> Rancangan --> Edit HTML kemudian ikuti langkah dibawah ini!
1. Cari kode </body> letaknya paling bawahSekarang el akan berbagi script emotion cewek sexi, memang tidak terlalu bagus seh tapi setidaknya membrikan gambar/icon yg sedikit berbeda dengn yang lain (agak nakal). Cara memasang emotion cewek sexy pada kotak komentar blog langkah awal masuk blogger -> Rancangan --> Edit HTML kemudian ikuti langkah dibawah ini!
2. Kemudian simpan scrip dibawah ini diatas kode </body>
<script src='http://elmubarok.googlecode.com/files/sexyemotion.js' type='text/javascript'/>
3. Selanjutya cari kode <b:if cond='data:post.embedCommentForm'>
Jika sudah ditemukan, simpan code berikut diatasnya
<b><img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce10.gif' width='50'/>
:a:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce11.gif' width='50'/>
:b:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce12.gif' width='50'/>
:c:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce6.gif' width='50'/>
:d:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce7.gif' width='50'/>
:e:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce8.gif' width='50'/>
:f:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce9.gif' width='50'/>
:g:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy1.gif' width='50'/>
:h:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy2.gif' width='50'/>
:i:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy3.gif' width='50'/>
:j:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy4.gif' width='50'/>
:k:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy5.gif' width='50'/>
:l:
</b>
4. Simpan dan lihat hasilnya:a:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce11.gif' width='50'/>
:b:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce12.gif' width='50'/>
:c:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce6.gif' width='50'/>
:d:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce7.gif' width='50'/>
:e:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce8.gif' width='50'/>
:f:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce9.gif' width='50'/>
:g:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy1.gif' width='50'/>
:h:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy2.gif' width='50'/>
:i:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy3.gif' width='50'/>
:j:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy4.gif' width='50'/>
:k:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy5.gif' width='50'/>
:l:
</b>
Contoh yang sudah jadi bisa lihat disini
| Ĉ ђ Ë Â Ť : BeLaJaR BLoG | 0 ƘǿmєиtąЯ
Singel Submenu dengan CSS3
Masih di "Tutorial Blog" sekarang saya membahas tentang CSS3 WOW. [Biasa aja kalee wkwkwkkw]
"Singel Submenu dengan CSS3" Tau nggak gmna bentuk nya ? Yang pasti ajaib hloo bisa mbukak WAW, Mau mau mau ? wkwkkw Wanii piroo ? Gratiss kok tapi sun dulu wkwkkwcuuiihh. Di sini saya akan kasi 2 versi. Nih langsung aja
Caranya : Login ke Blogger -> Klik Rancangan -> Edit HTML cari kode ]]> lalu copy pastekan kode di bawah ini tepat di atas kode tersebut.
"Singel Submenu dengan CSS3" Tau nggak gmna bentuk nya ? Yang pasti ajaib hloo bisa mbukak WAW, Mau mau mau ? wkwkkw Wanii piroo ? Gratiss kok tapi sun dulu wkwkkwcuuiihh. Di sini saya akan kasi 2 versi. Nih langsung aja
Caranya : Login ke Blogger -> Klik Rancangan -> Edit HTML cari kode ]]> lalu copy pastekan kode di bawah ini tepat di atas kode tersebut.
4 MENU
Ni HTML nya :.ringMenu {
width: 100px;
margin:auto;
}
.ringMenu:hover {}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;
}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}
.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}
<div class="ringMenu">Gmna keren kaga ?? xixixi Langsung aja lanjuttt
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
</ul></div>
8 MENU
.ringMenu {Nih HTML nya :
width: 100px;
margin:auto;
}
.ringMenu:hover {}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;
}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}
.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}
.ringMenu ul li.topright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
right: -102px;
}
.ringMenu ul li.topleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
left: -102px;
}
.ringMenu ul li.bottomright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
right: -102px;
}
.ringMenu ul li.bottomleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
left: -102px;
}
<div class="ringMenu">Gmna gan ? Keren kann ? whahaha Semoga Bermanfaat gan :D. Jangan lupa Komentarnya sama Follow nya.
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
<li class="topright"><a href="#">topright</a></li>
<li class="topleft"><a href="#">topleft</a></li>
<li class="bottomright"><a href="#">bottomright</a></li>
<li class="bottomleft"><a href="#">bottomleft</a></li>
</ul></div>
| Ĉ ђ Ë Â Ť : BeLaJaR BLoG | 0 ƘǿmєиtąЯ