.: Februari 2015

Jumat, 27 Februari 2015

Membuat Widget Kategori Simple Keren Di Blog

Membuat Widget Kategori Simple Keren Di Blog - Menghias blog merupakan pekerjaan yang sangat menarik, Ada suatu kebanggan tersendiri dikala blog kita tampil cantik atau profesional. Tak lepas dari hal tersebut, ternyata menghias blog dapat memakan waktu loading blog yang cukup lama. Apalagi ditambah script dari widget yang menggunakan javascript akan menambah lambat kecepatan loading blog anda, dan itu akan berdampak pada bosannya pengunjung kita menunggu loading blog yang lama. (Baca disini cara memperbanyak pengunjung di blog)

Agar blog kita menjadi lebih cepat, kita perlu menghindari penggunaan javasript terlalu banyak. Menggunakan script yang ringan adalah solusinya. Contoh dari script yang ringan dan tidak memakan banyak waktu saat loading di blog adalah HTML dan CSS.

Seperti pada widget yang saya share disini yakni Widget Kategori Yang Elegan dan tampak profesional, tetapi tidak memakan loading blog kita karena hanya menggunakan sript Css dan HTML. Meskipun terlihat cukup panjang, namun dijamin tidak akan membuat loading blog anda melambat.

Cara Memasang Widget Kategori Elegan

Login di akun blog anda
Pilih menu Template >> Edit HTML
Cari kode ]]></b:skin> dengan menggunakan shortcut Ctrl+F untuk mempercepat pencarian
Copy-Pastekan Kode dibawah ini Tepat diatas Kode ]]></b:skin> tersebut :

img#icon {

float: left;

}

.textwidget {

position: relative;

line-height: 18px;

}

.sidebar-widget {

background: #fff;

position: relative;

margin: 0 0 20px;

word-break: normal;

word-wrap: break-word;

overflow: hidden;

}

.sidebar-widget li {

padding: 10px 0 10px;

font-size: 100%;

line-height: 16px;

list-style: none;

overflow: hidden;

border-bottom: 1px solid #E4E4E4;

}

.sidebar-widget ul {

position: relative;

margin: -10px 0 0;

}

.kepala {

border:2px solid #E4E4E4;

font-weight:bold;

position:relative;

border-radius: 10px 10px 10px 10px;

a align:center;

padding: 10px 40px 10px;

}

Setelah itu SIMPAN template.
Kembali ke menu awal, Klik Tata Letak >> Tambahkan Gadget
Akan keluar jendela baru, Pilih HTML/JavaScript
Berikan Judul, Lalu Copy-Pastekan Script Di Bawah ini :

<div id="text-3" class="sidebar-widget widget_text">

<div class="textwidget"><ul>

<ul>

<p class="kepala"><a href="#">   Blogger</a></p>

<li><a href="#"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAlVuvg0UnpHQDrqXbGhS0CrHhdWHvEQ1DLllYT0SR2MHhLFbFur8OCJIa40YA5WDcGucOc-0OlO5qEFeXuBdGyAHlNaeDpccD7hPF7X1gt3wKL_KbToyAVQSadvstOtK18kkjo3drJ77h/s1600/Template.png">   Free Templates</a></li>

<li><a href="http://www.benuailmu.com/search/label/blogger"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAlVuvg0UnpHQDrqXbGhS0CrHhdWHvEQ1DLllYT0SR2MHhLFbFur8OCJIa40YA5WDcGucOc-0OlO5qEFeXuBdGyAHlNaeDpccD7hPF7X1gt3wKL_KbToyAVQSadvstOtK18kkjo3drJ77h/s1600/Template.png">   Tips Blogger</a></li>

<li><a href="http://www.benuailmu.com/search/label/belajar%20SEO"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjciInVki7pKG39E2gZhQzG-gt2P2xjmizlT94tBYutC413Rj-bFcUEUEE1_BE_mlCbXWr4Eh1D8eFtNRbvMoILlr41Ya0KklOejnp3PvPlZl6UymJDP3RVd085IlaIFCovl3GO4e4q0Duv/s1600/Seo.png">   Seo Bloging</a></li>

<p class="kepala"><a href="http://www.benuailmu.com/search/label/Softwer">   Aplikasi</a>

</p><li><a href="http://www.benuailmu.com/search/label/Android"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSu2VaO_WKqP5-gxMGh7OTDMhM75NE91g9WUoNgmNetE9b3RP_XpQuxz50nFMQBWxKtafZnCu8ZxeMA5umUVBLu8xaCzouG1T2eV6iiTR_IgroOc2thdike63cYR8SMSplqhL8MxJE8tm/s1600/Android.png">   Android</a></li>

<li><a href="http://www.benuailmu.com/search/label/Antivirus"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgsa2saUpvI5sRzgka6Imr1JoXB_5LyC20NFCWJjsfde7fqnIiJN487GswD6WvVIqq4rJJkgR633bbEBhTTfJyxLPV3LQBFtPIj1gMMbIU2UqGrUw2Vh01xSQU9B392Geyv9jEJ5YTI1P/s1600/Anti+Virus.png">   Antivirus</a></li>

<li><a href="http://www.benuailmu.com/search/label/AudioEditor"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSw-Qrbvm3AMybf5EbJFYwG3Z-T4ERJIRln70Q1a6glZTvP1rcHkIxFRun2-GyxixQKS4Pj_VryIBP2DRT9cFaDCC8M1pRcLP5gR_albt2EnN-tJUkqIsFCxKn6goUb085EX051NeVgMf/s1600/Audio+COnverter.png">   Audio Video Editor</a></li>

<p class="kepala"><a href="#">   Pelajaran</a></p>

<li><a href="http://www.benuailmu.com/search/label/B.%20Indonesia"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4RGneOCO-3WPZzmJMJ4oW0ozzKrSfGdbFvdgtMsfVOwGRMac5u84MMUtyYEp8qx1y2a6qaUDIGIP2kIAFa-RGi2XvF5XYam_-FGXa5t-7nB2_pht6lQ_nmgyhqgnbIGHL_PdVHkkZy-w/s1600/bendera.png">   Bahasa Indonesia</a></li>

<li><a href="http://www.benuailmu.com/search/label/Ilmu%20Agama%20Hindu"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvHh3o-DIlzFER2tLncYBZ-WO_NQCad2Zmv2klLt3X9Ep0tWOtWNgQb7-SsyH2JTZaZpZPiKLHDmJyuzAHI1NDFCEOaylwpYOh6y-IOqUf76e_D_vzHg2Q_JrhhzBDJBSEYeBk13yQKe_Z/s1600/hindu.png">   Agama Hindu</a></li>

<li><a href="http://www.benuailmu.com/search/label/Matematika"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBa_kucQOBWGPpy3lY_MOBW0aapT2lAg0RSA0N-ouG8R5WhFXIJAuoLjug_sDztsSuetFd8x7FaUHwtmmsBbZNoYI5T_ofAm_F9MtMmMy70b-vCxYUKb0sWT38Djfaxv5Cywkvgp9ATz3c/s1600/matematika.png">   Matematika</a></li>

<p class="kepala" =""><a href="#">    Other</a></p>

<li><a href="http://www.benuailmu.com/search/label/Tips%20dan%20Tick"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjmL8fZaTGt58vhdinjVpp5gF2DvSj6zFTLwAufO5hfR69mvJveRa0hJmdJXa9i3bYWlaQkiLnEWY5FsKLnis752IDrTbHFu91magmKSziwOJ6Z6SrdKnPnhqiROD23xAWQnuCej5gjXw/s1600/Tis.png">   Tips And Trick</a></li>

<li><a href="http://www.benuailmu.com/search/label/wisata"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZDGNu_J2UoU7i2HDJRQpzf6KZIxfesBG2Wr6L4XxK_MmHVZb8CnDh_A-ThtsnQFu0hP-G0wy0n4TZ1gW9BGUVgHHvDOOSjpiiiJAEg2dFwVSONTYYmBwld9dhUD_V-Ua78YZrpN399nyh/s1600/wisata.png">   Wisata</a></li>

<li><a href="http://www.benuailmu.com/search/label/ilmu%20internet"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwB8oyfWqNh_PW4TK6az0zhtjVKaaNRLAAJAwzUuQ7pXvZ4XVC_MZXsAYDuExlWnHfK5I1HIpirKoEvgaLYA62KNdAmHaklnZ0ng-RSerMD33bSqNvmopvQAGWffrv7s8vW0s_taf97236/s1600/interent.png">   Internet</a></li>

<a href="http://www.benuailmu.com/2014/08/membuat-widget-kategori-simple-keren-di.html" style="font-family: arial; size: 5px; text-align: right;"> Get This Widget </a>
<p></p></ul>

Kemudian Klik SIMPAN,

*cat :

- Untuk Link diatas ( Tulisan Berstabilo Kuning ), Ganti menggunakan Laman Link Anda Sendiri.

- Dan untuk gambar, Anda bisa ganti dengan gambar berukuran 20x20 px. Upload gambar anda, Lalu copy URLnya. Kemudian ganti pada URL gambar Script diatas dengan URL gambar anda.

- Jika anda ingin menambah menu lain, Copykan saja script diatas mulai dari <li>..........sampai.............</li> sudah saya pisahkan dalam sebuah jarak enter

Rabu, 25 Februari 2015

CARA MEMBUAT POPULAR POST KEREN DI BLOG

*Cara Membuat Popular Post Keren di Blog* - Bagaimana kabarnya sobat blogger? semoga dalam keadaan sehat, kali ini BANG GAGAP akan share tutorial blog yaitu tentang popular post atau memasang popular post yang tentunya keren dan menarik di blog.

Screenshot:

Nah, seperti yang sudah saya jelaskan diatas saya akan share "Cara Membuat Popular Post Keren di Blog" yaitu dengan modifikasi kode script dan menghasilkan popular post yang menarik dan keren buat blog sobat.

Cara Membuat Popular Post Keren di Blog

Tips dan trik untuk membuat popular post keren di blogspot kali ini cukup mudah, sobat blogger dijamin bisa untuk memasangnya. yuk,, simak tutorial cara memasang widget popular post keren dibawah ini:

1. Silahkan Sobat Login ke akun Blogger.
2. Langsung Pilih Template >> Klik Edit HTML.
3. Sobat Cari kode ]]></b:skin> (gunakan CTRL+F).
4. Lalu letakkan kode berikut ini tepat diatas ]]></b:skin>

#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width: 220px;
margin-left: 25px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:220px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: capitalize;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

5. Save dan lihat hasilnya.

Keterangan :
width: 220px; adalah lebar widget popular post, silahkan sesuaikan dengan lebar sidebar sobat.

Catatan Penting !!!
1. Pastikan widget Popular Post sudah terpasang di blog sobat.
2. Jika widget popular post sudah terpasang jangan lupa lakukan setting seperti gambar dibawwah ini:

3. Jika sudah selesai, silahkan save dan nikmati hasilnya.

Sekian tutorial blog kali ini, semoga Cara Membuat Popular Post Keren di Blogdapat bermanfaat dan menambah kesan menarik di blog sobat karena ini termaasuk trik seo on page. selamat mencoba Good Luck.

CARA MENGETAHUI BERATNYA PERSAINGAN UNTUK KATA KUNCI

persaingan kata kunci berat dari onpage, artikel, dan backlink

Saat ini banyak blogger yang mengharapkan mesin pencari seperti Google yang menjadi sumber trafik untuk website mereka, karena google adalah sumber trafik yang gratis. Hanya saja untuk mendapatkan itu ada setumpuk kata kunci yang harus ditaklukkan. Sekarang yang menjadi pertanyaan adalah siapa yang menjadi lawan anda?

Banyak blogger yang mengatakan bahwa mereka berhasil mengalahkan Google pada saat mereka meraih juara 1. Padahal yang menjadi mereka sebenarnya bukan Google, melainkan sekumpulan orang yang juga menginginkan posisi untuk kata kunci tersebut. Jadi karena anda tidak sendirian di jagad dunia maya ini, maka yang menginginkan kata kunci yang berpotensi komersil itu bukan cuma anda.

Jadi anda harus mengetahui seberapa hebat lawan anda.

Di sini saya mau membagikan kepada anda cara untuk menilai seberapa berat kompetisi yang akan anda hadapi; tapi sebelum itu kita harus mengetahui dulu teknik keliru yang sudah terlanjur beredar di antara peminat SEO....

CARA MENGETAHUI PERSAINGAN KATA KUNCI YANG KELIRU

Melihat jumlah halaman hasil pencarian

Apakah anda pernah melihat penawaran jasa SEO yang mendasarkan tarifnya pada jumlah hasil pencarian yang diperlihatkan oleh Google? Jika hasil pencairannya mencapai jutaan halaman, maka harga optimasinya akan sampai berjuta-juta?

contoh jumlah hasil pencarian di SERP Google

Ini jelas adalah teknik yang keliru, karena banyak bukan berarti hebat. Kalau kata kunci itu memang banyak yang membahas tapi dari banyak itu hanya sedikit yang menguasai SEO, maka anda sama sekali tidak perlu kuatir.

Melihat jumlah halaman yang memakai kata kunci di dalam judul

Teknik yang ini katanya lebih spesifik, karena hanya melihat mereka yang secara khusus menggunakan kata kunci ini di dalam judul. Semakin banyak orang yang memasukkan kata kunci ke dalam judul, maka dianggapnya akan semakin keras pula persaingannya. Untuk melakukan pencarian yang hanya menampilkan mereka yang memakai kata kunci di dalam judulnya digunakan operator intitle.

Kasus ini juga tidak ada bedanya dengan yang terjadi di atas, yaitu banyaknya pesaing bukan berarti pesaing itu hebat. Semua teknik ini membuat kata kunci itu hanya akan terasa lebih mahal dari yang seharusnya dan terkadang memang itu tujuannya.

CARA MENGETAHUI PERSAINGAN YANG SEBENARNYA

Saat mencari tahu persaingan untuk kata kunci yang anda inginkan, maka yang harus anda perdulikan hanya Top 5 saja yang ada di halaman pertama. Yang lainnya anda anggap saja peramai suasana. Kenapa demikian? Karena yang harus anda kalahkan adalah Top 5 ini. Semua yang berada di bawah Top 5 tidak perlu dianggap sebagai saingan, karena jika anda gagal masuk ke 5 besar, maka dari kerja keras itu tidak akan memuaskan.

Mengamati Onpage Halaman Saingan Anda

Jadi sekarang, masukkan kata kerja anda di Google, sesudah itu bukan hasil pencarian untuk 5 hasil teratas. Jika anda sudah membuka kelima halaman web tersebut, maka amati terlebih dahulu onpage dari web tersebut:

Apakah title tagnya mengandung kata kunci dan kata kuncinya ada di depan?
Apakah meta descriptionnya juga mengandung kata kunci?
Apakah heading h1 dan h2 pada halaman itu juga mengandung kata kunci?
APakah Alt tag melengkapi setiap gambar?
Apakah jumlah link tidak lebih dari 100?
Apakah ada link menuju halaman tersebut pada header atau sidebar?

Jika anda menjawab Ya untuk semua jawaban di atas, maka itu berarti onpage lawan anda sudah diatur dengan baik untuk kata kunci tersebut dan itu berarti persaingan untuk kata kunci tersebut akan relatif sulit untuk dikalahkan.

Mengamati Isi Artikel

Setelah anda mengamati struktur onpagenya sekarang amati juga struktur dari artikelnya.

Apakah artikelnya cukup panjang dalam artian lebih dari 2000 kata?
Jika tidak cukup panjang, apakah artikelnya lebih panjang dan lebih detil dari artikel anda?
Apakah artikelnya memakai poin pembahasan yang diberi tag h2?
Apakah dia memberi cetak tebal di pemunculan pertama kata kunci?
Apakah gambarnya memakai beberapa media seperti gambar dan video?
Apakah dia mempunyai beberapa internal link menuju artikel yang relevan dengan isi halaman tersebut?
Apakah artikel lainnya relevan dengan artikel yang sedang anda amati dalam artian blog itu hanya membahas satu niche saja?

Jika anda menjawab Ya untuk semua pertanyaan di atas, maka anda bisa menganggap persaingan bertambah sulit untuk kata kunci tersebut.

Mengamati Backlink Sangat Perlu Untuk Menilai Persaingan

Anda bisa memakai ahrefs.com untuk mengamati profil backlink dari pesaing anda. Cobalah untuk melihat apakah backlinknya lebih banyak dari anda? Apakah backlinknya dofollow? Apakah kata kuncinya beragam? Jika ya, maka itu bisa mengindasikan persaingan yang lebih keras lagi.

Tapi kalau anda melihat bahwa backlinknya lebih sedikit dari anda, cobalah untuk mengintip 5 contoh backlinknya. Biarpun backlinknya sedikit, tapi jika semuanya adalah backlink yang relevan dengan kontennya, maka itu adalah backlink yang sangat kuat.

Kalau anda melihat ternyata backlinknya sangat minim atau bahkan tidak ada, maka cobalah untuk melihat backlink dari homepagenya, karena suatu halaman tidak harus mempunyai backlink untuk mendapatakan otoritas. Suatu halaman bisa saja mendapatkan otoritas dari homepagenya sendiri atau keseluruhan halaman.

Di dalam Moz ini disebutkan sebagai Domain Authority dan Page Authority. Anda bisa memasang mozbar pada browser anda jika anda mau melihat DA dan PA dari setiap halaman. Bagi anda yang mau memakai toolbar ini silahkan dibuka URL berikut:http://moz.com/tools/seo-toolbar

Domain authority dan Page Authority yang lebih tinggi tidak menjamin kita menang di SERP karena ini hanya semacam pendekatan kasar saja. Tapi yang pasti anda harus bersiap-siap melakukan optimasi yang berat jika nilainya sudah berada di atas 40 untuk halaman tersebut (PA).

Jika anda melihat semua faktor di atas bergitu kuat pada halaman pesaing anda, maka anda harus bersiap melakukan optimasi yang sangat lama. Lamanya itu tergantung dari seberapa keras anda bekerja mencari backlink. Ini bisa menjadi pekerjaan 3 bulan sampai 1 tahun lamanya.

Jadi setelah anda mengetahui cara menghitung beratnya persaingan untuk kata kunci, maka ini saatnya anda memutuskan apakah lanjut melakukan optimasi atau tidak. Jika lanjut, maka buatlah perencanaannya.

Selasa, 24 Februari 2015

Cara Membuat Menu Navigasi Keren di Blog Ala Template Evo Magz

Cara Membuat Menu Navigasi Keren di Blog Ala Template Evo Magz dari Mas BAGUS (gagap) - Bagaimana sih cara membuat menu navigas kayak di tempplate evo magz itu ? Banyak sekali yang bertanya seperti kepada saya , sampai akhirnya saya mau memberikan tutorialnya kepada sobat . Tapi niat saya tidak ingin mengclone template premium evo magz tersebut , melainkan ingin berbagi pada menu navigasinya saja .

Sebenarnya dengan mengintip kode dari template evo magz itu sendiri , sobat bisa membuat menu navigasnya yang keren itu , asalkan sobat paham sedikit mengenai css dan html , tapi kalau sobat belom bisa mungkin tutorial membuat menu navigasi ala evo magz ini pilihan terbaik anda .

Bagi yang belom tahu seperti apakah menu navigasi keren dan evo magz ? sobat dapat mengetahuinya dengan melihat demonya di blognya langsung atau bisa juga melihat gambar berikut :

Cara Membuat Menu Navigasi di Blog seperti Evo Magz

Bagaimana Cara Membuat Menu Navigasi Keren di Blog Ala Evo Magz ?

Pertama , silahkan sobat masuk ke editor template terlebih dahulu

Kemudian Pasang kode css berikut , tepat diatas kode ]]></b:skin> atau</style>

/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

Untuk memanggil kode css diatas silahkan pasang htmlnya , caranya pasang kode dibawah ini tepat dibawah kode </header>

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='masyadi.com'>Markup</a></li>
<li><a href='masyadi.com'>Error Page</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
</ul>
<!-- secondary navigation menu end -->
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Jika sudah silahkan save template sobat

Membuat Menu Navigasi Evo Magz jadi responsive di Blog

Sebetulnya , cara diatas sudah cukup untuk membuat menu navigasi yang mirip evo magz , tapi jika sobat suka desaign template yang responsive , maka sobat perlu melakukan tutorial dibawah ini :

Masih dalam halaman edit html

Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

<script type='text/javascript'>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

Serta pasang Juga Media Queris responsivenya . caranya pasang kode css berikut diatas kode ]]></b:skin> atau </style>

@media only screen and (max-width: 768px) {
      .nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
}

oh ya saya hampir lupa , karena menu navigasi menggunakan font awesome , silahkan pasang javascript font awesome berikut diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Nah inilah yang ditunggu - tunggu , silahkan save template sobat dan lihat hasilnya

Senin, 23 Februari 2015

IDM 6.22 build 1

Agan - agan, pecinta downloader,,?
nih gue punya IDM terupdate Full Version..
IDM 6.22 build 1
Langsung comot aja gan..

Tusfiles

DOWNLOAD