Membuat Menu Sidebar Melayang dengan Efek Jquery Keren

Hai sobat, sebelumnya Andi Techno telah membuat Trik Blogger berjudul Cara Membuat Gambar pada Artikel Blog Bergetar, nah pada Trik Blogger kali ini saya ingin berbagi Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren. Untuk contoh Menu Sidebar Melayang Jquery yang saya maksud ini bisa dilihat di link ini: http://id-web.16mb.com/jsider . Nah keren kan sob? Ayo pasang diblog kalian :)

Pada saat tutorial ini dibuat saya menggunakan tampilan blogger lama / lawas, jadi bagi sobat blogger yang menggunakan tampilan blogger baru tinggal menyesuaikan ya :)

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>

/* Starts Menu Sideabr Jquery melayang by andi-techno.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR0jhJjXXfcQl0vEZeuC5WLxdf-X2T6FqRUoYx6i-PxWMcTuaFUuY534YK-1HkZle1FUeCEj0hImw5Ery6jReU7E780g88_Zu3frgGQBOd_5Ve9VP3Wm3Xid7zHsL5qAn2Z096I6aJc8E/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMggiQxvMG8nxamiR7lQtvDeSR9PVLYxAAoBlYE27OJQ8RI2b5A7RDLrmNT85-DRQ5SKMoS7mxNoDKn3zkb-kQlN6r4p2TmAr4rlBPmNmYz0JnX7-zWDGnfTRkOlLlkf6tpPqAIzQD6oY/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JL45wRg_7tnBzmNYA0M2Us1revTZqPHycZu6VZode0sZ1wkyTD95kvhUykn2fN0jBRFwJSNWHk0qszjIOFe8uCMbcbPWZsG_vPGP1gyu2Xxr_ccc2Btqy104g-TTRxXqGlnqhJvinAI/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWovjWXGlVu9RhFWgHFo7KEUd4FeNKrwPdmfRqFGUXRrxupMPvkIy999B-rLjBEzA4qfRK3I76SC9FR22UnIpuhEv8Pd0uA4AIyf-cY0LA6xbN2hx9z3MDySC41Lpy-kSsIIKUGqlzj0/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyYCBqCEAyDcYw6CZWeco4a4fuYRpsjtI_xHBnnomfC3sG1kwLv0uI6WLyhIZTnOBlvmjeL4HUEdNevQ9MiYrA6ca66taFcAVQaAWqAQ0Y7izOIUAOYnM_NhWw2fpwhSi9yV-ygHP7O4/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMX36hKoB3SJF8elB6O1WvDYPcVhj6Nd9OQXdPDZMV09qv5xcJ7yGcM7S3-wjxlB4zWmYW1zS2bz3qVxMJBLY9UyGYx5ZcpelmgGQE5oarW9mIDE264WC2kwKBYELGdGMHEkfMGwqND04/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCHsa0P9ru4Z3M4SNSFuEPOguvWsZiPaqW_tHH9pbIcViGZ_tGAeBcZNk6My3NLUay_Gvr7jouoHyFYxeLIAAkRAo1blTN7j84TpgtkUQBLFFXHlNK8eXlpV_7D1r9BQ6kyQNWss3h2k/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPOwizrW7ksUfg8KARbiVWuwuqib7AqsBNVFZBledLPbhpIjAQb9qmLdwTF46QLiLBt38d7rJHSloPZJe9lkME_syDP6t0dC8lsn4bBFB4sZTycTY-n8S0UKjIdfdG7VTcL2FlvwrO9Q/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXsiyiipZk2iQVii190dxsDjghnZ0NofcH_DtZXxM6-IR_-KCksijNeMETQzSCRWHI2L4qkrwtm3h9uqDSAqh6kFDIrl5gy7UAtiqkPEIfOoNb_vUAdQjOFtDQQ5BuzaP0Kb-PvqT9YI/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.blogspot.com End*/

3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);
}
);
});
</script>

4. Klik Simpan Template

5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:

<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://andi-techno.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://andi-techno.blogspot.com' target='_blank' title='About us'></a></li>
<li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://fb.com/andi.techno' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/Andi_Xgen' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/xgen' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>

#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)

keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren

Selanjutnya »

Cara Mendapatkan Domain Gratis .Asia

Hai sobat, Andi-Techno ingin memberitahukan bahwa sekarang domain .Asia bisa di dapatkan secara gratis untuk satu tahun. Jadi buat sobat blogger yang belum punya domain, ayo buruan daftar, kapan lagi dapat domain gratis? Lumayan keren loh domain .asia ini saya sendiri sudah daftar dengan domain www.andi-techno.asia keren kan sob? :) buat yang masih bingung cara daftarnya akan saya berikan tutorialnya beserta gambar.

Cara Mendapatkan dan Mendaftar Domain Gratis .Asia
1. Buka situs penyedia domain gratis asia ini: klik disini
2. Lalu masukkan domain yang mau didapatkan dan pilih domain .asia misalnya www.andi-techno.asia, lalu klik ''search''

3. Lalu akan muncul daftar domain yang kamu masukkan tadi, jika statusnya available dan free, silahkan centang pada $ 0.00 dan klik ''add to chart''

4. Lalu klik ''Register Selected''

5. Isi formulir pendaftarannya, gampang kok sama seperti cara membuat email ngisinya, lalu klik "Continue Order"

6. Klik ''Continue Order'' sekali lagi

7. Lalu klik "Complete Order"

8. Akan muncul halaman yang menjelaskan bahwa domain kamu sedang di proses

9. Buka email yang tadi digunakan untuk mendaftar, lalu buka email pertama dari domaincrazy tentang pendaftaran domain kamu tadi.

10. Pada email tersebut disertakan bukti pendaftaran domain kamu tadi lalu klik view

11. Lalu buka email kedua dari domaincrazy, disana tertera username dan password yang tadi kamu masukkan saat mendaftar, dan pada email tersebut sudah ada link untuk kamu login.

Selanjutnya kamu hanya perlu menunggu paling lambat 48 jam agar domain kamu diaktifkan.
Selamat menikmati domain gratis .asia :)

keyword: cara dapat domain gratis, cara daftar domain gratis, cara dapat domain gratis .asia, cara mendaftar domain gratis .asia, daftar domain gratis, domain gratis untuk satu tahun, mendapatkan domain gratis .asia

Selanjutnya »

Membuat Gambar Bergetar Disetiap Artikel - Trik Blogger

Oke sob, pada Tutorial Blog kali ini Andi-Techno akan menjelaskan bagaimana cara membuat gambar disetiap posting bergetar , kalau belum tau bagaimana itu gambar bergetar silahkan lihat contohnya klik disini. Nah sesuai dengan judulnya, trik gambar bergetar ini berfungsi terhadap setiap gambar pada setiap artikel, sehingga kamu tidak perlu lagi memasukkan kode satu persatu disetiap posting menarik bukan? Yuk coba membuatnya

Membuat Gambar Bergetar Disetiap Artikel :

Disini saya menggunakan blogger dengan tampilan lama / versi lawas

1. Buka dashbord blogger, lalu klik Rancangan > Edit HTML
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah, lalu pastekan / letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

/* Efek getar by andi-techno.blogspot.com */
.post img {
animation-name: x-gengetar;
-moz-animation-name:  x-gengetar ;
-webkit-animation-name:  x-gengetar;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  x-gengetar  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  x-gengetar  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  x-gengetar  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

3. Cari kode </body> lalu pastekan / letakkan kode dibawah ini tepat diatas kode </body>

<script src='http://x-gen.googlecode.com/files/x-gengetar.js' type='text/javascript'/>

4. Simpan Template, lalu lihat salah satu artikel pada blog kamu yang ada gambarnya, pasti bergetar :)

keyword: cara membuat gambar bergetar di blogger, membuat gambar pada artikel blog bergetar, membuat gambar bergetar otomatis di artikel blog, cara membuat gambar bergetar, membuat gambar disetiap posting bergetar

Selanjutnya »

Pasang Iklan Murah

Bismillahirahmanirrahim, sekarang blog Andi-Techno menyediakan jasa pasang iklan murah. Anda bisa mempromosikan blog, bisnis, atau yang lainnya melalui blog Technology Tower ini.

Status dan Statistik Blog Andi-Techno:

1. Pageview: 10.000 - 11.000 per hari (update 11 Februari 2013)
Bukti: klik disini atau disini (Histat)

2. Alexa Rank:88.000 (update 24 Mei 2013)
Bukti: klik disini

3. Followers blog: 532 Member (update 24 Mei 2013)

4. Google Pagerank: 2 (Valid) (update 11 Februari 2013)
Bukti: klik disini

Ketentuan:

1. Pemasang iklan sewaktu-waktu  dapat mengubah gambar banner maupun link banner yang telah terpasang di blog ini
2. Pembayaran melalui Bank (Mandiri atau BNI)

Ukuran Banner dan Harga

Ukuran	Harga PerBulan	Status	Posisi Banner
Banner 125 x 125	Rp. 50.000	Tersedia 2 Slot	Sidebar
Banner 460 x 75	Rp 80.000	Tersedia 1 Slot	Diatas Setiap Posting
Banner 130 x 500	Rp. 120.000	Tersedia 1 Slot	Float di Kanan dan Kiri Blog
Banner 670 x 90	Rp. 120.000	Tersedia 1 Slot	Float di bawah Blog
Banner 250 x 300	Rp. 90.000	Tersedia 1 Slot	Sidebar

*Harga Dapat berubah sewaktu-waktu

# Perlu diingat :
1. Uang tidak bisa dikembalikan jika kelak blog ini tidak sengaja terhapus oleh google atau blogger team
2. Uang tidak bisa dikembalikan jika situs yang diiklankan di blog ini terhapus atau hilang baik itu sengaja maupun tidak sengaja karena kesalahan pemilik situs tersebut
3. Uang tidak bisa dikembalikan jika sudah deal dalam pemasangan iklan

Hubungi:

Email : darypb@gmail.com
facebook: http://fb.me/darypradipta

keyword: pasang iklan berkualitas, pasang iklan yang paling murah, pasang iklan di blog yang murah, iklan murah di blog, mendapat uang dari pasang iklan, pasang iklan berkualitas

Selanjutnya »

Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor

Hai sob, Andi-Techno kembali membawa trik buat blogger, yang merasa udah master blogger boleh lewatin artikel ini sob, ini cuma trik newbie sob. Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor, gimana tuh maksudnya? coba sobat arahkan kursor sobat ke gambar dibawah ini:

nah gambarnya gerak kan sob saat disentuh kursor mouse, mau tau cara membuatnya?
check this on:

1. Masuk ke Blogger (saya masih memakai tampilan blogger lama saat artikel ini ditulis) > Klik Rancangan > Klik edit HTML
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F agar lebih mudah, lalu letakkan atau paste kode dibawah ini setelah / dibawahnya kode ]]></b:skin> tadi.
kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.post img {border:3px solid #1e1e1e;-webkit-transition: all 0.4s ease-in-out;}.post img:hover{margin-left:20px}</style> </b:if>

3. Klik simpan template.

sekarang coba lihat salah satu artikel sobat yang ada gambarnya dan arahkan kursor ke gambar tersebut.

semoga berguna :D baca juga: Membuat Menu Navigasi Vertikal Keren di Blog dengan Efek Transisi

keyword: gambar bergerak saat disentuh mouse, membuat gambar keren pada artikel blog, trik blogger, bagaimana cara membuat gambar yang bergerak saat disentuh kursor mouse

Selanjutnya »

Lakukan lima hal ini setelah membuat blog

Siapa yang tak mengenal blog? Saat ini, hampir semua orang seolah memiliki blog masing-masing. Blog bisa menjadi pekerjaan, hobi, kebutuhan, atau hanya sekedar tempat untuk memperbesar jaringan sosial. Jika Anda baru saja membuat blog, maka lima hal yang disarankan oleh Hellboundbloggers.com di bawah ini adalah hal yang harus Anda lakukan pertama kali.

1. Membuat sitemap

Sitemap adalah sebuah susunan link, post, dan halaman di situs blog Anda. Ini juga bisa digunakan sebagai media untuk memberitahu Google bahwa blog Anda siap untuk konten yang bisa ditempatkan di Google. Jika Anda tidak yakin bagaimana memulai membuat sitemap, maka Anda bisa menggunakan Google XML Sitemaps yang bisa membuatkan Anda sitemap secara otomatis. Jika blog Anda memiliki banyak konten video, maka Anda juga bisa membuat video sitemap untuk blog Anda.

2. Mendaftar di Google Webmaster Tools

Bagi para blogger "Tidak terlihat pada Google, berarti Anda tidak ada." Hal pertama yang Anda lakukan setelah membuat blog adalah mendaftar pada Google Webmaster Tools Service. Ini adalah cara yang mudah untuk mendaftarkan alamat blog Anda pada mesin pencari Google.

3. Menyediakan Feed yang benar

Feed adalah cara agar Anda terus terhubung dengan pembaca blog. Dengan feed, pembaca blog Anda akan terus mendapatkan konten terbaru dari blog Anda. Jumlah pembaca yang mendaftar pada feed bisa disebut sebagai pembaca setia blog Anda.

4. Tunjukkan identitas jejaring sosial

Saat ini akun jejaring sosial Anda juga dipertimbangkan untuk menentukan peringkat blog. Keberadaan jejaring sosial juga dianggap sebagai SEO yang bagus, dan Google menganggapnya sebagai nilai tambah bagi blog Anda.

5. Memperbarui isi blog dengan teratur

Mesin pencari selalu menyukai blog yang isinya terbarui secara teratur. Jika Anda baru saja membuat blog maka pastikan Anda mengisi blog Anda secara teratur, misalkan satu post setiap hari. Jangan tinggalkan blog Anda lebih dari satu bulan, atau nama Anda tak akan pernah ditemukan oleh mesin pencari.

Beberapa hal penting di atas akan membantu blog Anda dikenal dan mudah ditemukan oleh pembaca. Jadi, segera lengkapi blog Anda dengan hal-hal di atas. Happy blogging!

Selanjutnya »