DIGITALPAY MPN: September 2012

Sprites Menu Keren Dengan CSS

Langsung saja gan...saya hanya mau share Sprites Menu menggunakan css dari bloggertrix. Tampilannya keren dan dijamin menarik. Sebelumnya makasih kepada bloggertrix atas scriptnya. Sekarang ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode HTML berikut di atas kode <div id='content-wrapper'>

<div class="bloggertrix-navi1">
<ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="http://MASUKKAN ALAMAT BLOG ANDA DI SINI/"></a></li>
</ul>
</div>

Selanjutnya masukkan kode css berikut di atas kode ]]></b:skin>. Pilih salah satu dari dua kode di bawah ini.

.bloggertrix-navi1{display:block;height:72px;margin:30px auto;position:relative;width:525px}
.bloggertrix-navi1 ul{float:none;list-style-image:none;list-style-type:none;margin:3px 0}
.bloggertrix-navi1 ul li{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWwIYZbALbArP1m0cUj_esNu1zhLn0mX139SM4rMzxU09IcbToXpRaiyvYIgGgb9GjtQZ9ntbSdeQz2844LxK8xpZUlfoTDCatIftaQ9hpez-ekGFtEKVBxJcwPfN_9SfmbzlJcP3cMA/s1600/bloggertrix.com-tab-1.png);background-repeat:no-repeat;float:left;height:72px;margin:0px;padding-top:5px;position:absolute}
.bloggertrix-navi1 ul li a{display:block;height:100%;width:100%}
.bloggertrix-navi1 ul li.sm1{background-position:0 0;left:0px;width:125px}
.bloggertrix-navi1 ul li.sm2{background-position:-125px 0;left:100px;width:124px}
.bloggertrix-navi1 ul li.sm3{background-position:-249px 0;left:200px;width:124px}
.bloggertrix-navi1 ul li.sm4{background-position:-373px 0;left:300px;width:125px}
.bloggertrix-navi1 ul li.sm5{background-position:-498px 0;left:400px;width:126px}
.bloggertrix-navi1 ul li:hover{z-index:1000}
.bloggertrix-navi1 ul li.sm1:hover{background-position:0 -75px}
.bloggertrix-navi1 ul li.sm2:hover{background-position:-125px -75px}
.bloggertrix-navi1 ul li.sm3:hover{background-position:-249px -75px}
.bloggertrix-navi1 ul li.sm4:hover{background-position:-373px -75px}
.bloggertrix-navi1 ul li.sm5:hover{background-position:-498px -75px}

bloggertrix-navi2{display:block;height:72px;margin:30px auto;position:relative;width:525px}
bloggertrix-navi2 ul{float:none;list-style-image:none;list-style-type:none;margin:3px 0}
bloggertrix-navi2 ul li{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrKkiQKaVHxSnrgr2_P-EUxytJF9AGpBoFPsJGpUw5yYStyqJC3CjI0elVysLrXHmxlvwh5ZNZVAMRYNAwusX28_uZ1SeoPbU0vEgXwVRNgGnCzUOLwx48X-q2w2xmy78jW6mhwsGIj0/s1600/bloggertrix.com-tab-2.png);background-repeat:no-repeat;float:left;height:72px;margin:0px;padding-top:5px;position:absolute}
bloggertrix-navi2 ul li a{display:block; height:100%;width:100%}
bloggertrix-navi2 ul li.sm1{background-position:0 0;left:0px;width:125px}
bloggertrix-navi2 ul li.sm2{background-position:-125px 0;left:100px;width:124px}
bloggertrix-navi2 ul li.sm3{background-position:-249px 0;left:200px;width:124px}
bloggertrix-navi2 ul li.sm4{background-position:-373px 0;left:300px;width:125px}
bloggertrix-navi2 ul li.sm5{background-position:-498px 0;left:400px;width:126px}
bloggertrix-navi2 ul li:hover{z-index:1000}
bloggertrix-navi2 ul li.sm1:hover{background-position:0 -75px}
bloggertrix-navi2 ul li.sm2:hover{background-position:-125px -75px}
bloggertrix-navi2 ul li.sm3:hover{background-position:-249px -75px}
bloggertrix-navi2 ul li.sm4:hover{background-position:-373px -75px}
bloggertrix-navi2 ul li.sm5:hover{background-position:-498px -75px}

Selanjutnya klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Active Blending Horizontal Menu

horizontal menu dengan efek blending glow

Beberapa waktu lalu saya pernah memposting beberapa cara membuat horizontal menu dengan berbagai tampilan. Namun semua itu lebih cocok untuk template yang berwarna putih cerah atau berwarna terang. Kali ini saya akan posting horizontal menu gelap dengan efek blending. Widget ini lebih cocok untuk template gelap, namun saya rasa juga bisa cocok dengan template berwarna gelap. Masalah selera kembali pada cocok atau tidak cocok menurut anda. Baiklah, sekarang mari kita bahas cara membuat active blending horizontal menu. Ikuti langkah berikut.

<style>
*{padding:0; border:0; margin:0}
#default a,
#example a{display:block; width:90px; height:46px; margin-right:3px; float:left; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigX00dPgf6I1jcMZOLNq7tMWQCC7T19rP5HwNdnzfWfcUrY0dX5WrxoGFnpxuW4b1kXkaaQxVoxaJomOhrYbWvSevVombPTVW-pHbUJQ7ZIGutI3iCF6KHxOMnvrw4ofmkFVLUHhfcvC0/s1600/nav-sprite.png); background-repeat:no-repeat; cursor:pointer; text-indent:-9999px}
#example_home{background-position:0 0}
#example_home:hover, #example_home.hover{background-position:0 -48px}
#example_blog{background-position:-90px 0}
#example_blog:hover, #example_blog.hover{background-position:-90px -48px}
#example_demo{background-position:-180px 0}
#example_demo:hover, #example_demo.hover{background-position:-180px -48px}
#example_about{background-position:-270px 0}
#example_about:hover, #example_about.hover{background-position:-270px -48px}
#example_services{background-position:-360px 0}
#example_services:hover, #example_services.hover{background-position:-360px -48px}
#example_contact{background-position:-450px 0}
#example_contact:hover, #example_contact.hover{background-position:-450px -48px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
<script src='jquery.blend.js'/>
<script>
   $(document).ready(function(){
    $("#example a").blend();
    $("#example2 a").blend();
   });
</script>

Selanjutnya Masukkan kode berikut setelah salah satu kode di bawah ini. Silahkan pilih satu yang sesuai dengan keinginan anda. Ingat, pilih salah satu saja.

<div id='outer-wrapper'>
<div id='content-wrapper'>
<div id='main-wrapper'>

Berikut kode yang harus anda masukkan

<div id='demo'>
<div id="example">
<a href="masukkan link anda di sini" id="example_home">Home</a>
<a href="masukkan link anda di sini" id="example_blog">Blog</a>
<a href="masukkan link anda di sini" id="example_demo">Demo</a>
<a href="masukkan link anda di sini" id="example_about">About</a>
<a href="masukkan link anda di sini" id="example_services">Services</a>
<a href="http://blogonol.blogspot.com/" id="blogger tutorial">Get Blog Tutorial</a>
</div></div>

Selanjutnya ganti tilisan masukkan link anda di sini dengan alamat atau link anda
Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

7 Tips Seo Terbaik

Kita dapat menemukan ribuan artikel tentang SEO, tapi banyak pula hal yang membingungkan mengenai pendapat dan istilah seo yang kadang mengaburkan pengertian seo itu sendiri. Seo diperlukan untuk setiap blog, namun tidak semua langkah penerapan seo merupakan kerja terbaik untuk blogging. Artinya seo alami, lebih disenangi mesin pencari dan dapat mendongkrak lalu lintas blog. Sekarang saya akan share 7 tips seo terbaik. Saya yakin kalau ketujuh langkah ini diterapkan, peringkat blog akan menjadi lebih baik dari sebelumnya. Simak lebih lanjut penjelasan di bawah ini.

1. Melakukan Riset Kata Kunci (keyword research)
Hal pertama yang perlu dilakukan dalam Seo adalah Penelitian Kata Kunci. Langkah ini adalah dasar SEO. Jika anda menulis konten yang berharga, tidak berarti akan berada di halaman pertama mesin pencari. Penelitian kata kunci sangat penting dilakukan sebelum membuat artikel, agar artikel tersebut dapat bersaing pada hasil pencarian. Menyediakan kata kunci secara acak dan tanpa melakukan penelitian yang benar akan berpengaruh buruk untuk posisi artikel pada hasil pencarian dari mesin pencari.

2. Pentingnya Link Internal
Berbicara tentang Seo On Page, maka link internal merupakan persyaratan penting pertama. Link internal tidak hanya membantu untuk mengurangi tingkat bouncing, tetapi juga membantu dalam mendapatkan beberapa peringkat lebih tinggi dalam mesin pencari untuk kata kunci yang ditargetkan.

3. Tag Deskripsi
Tag deskripsi sangat penting untuk memberitahu mesin pencari tentang konten yang ditulis. Sebagian besar blogger kurang menyadari akan hal ini. Anda dapat memberikan tag deskripsi singkat tentang artikel yang ditulis pada Deskripsi Penelusuran di bagian sebelah kanan posting area. Ingat!!! berikan deskripsi singkat, jelas, dan menarik agar pengunjung dapat memahami deskripsi anda, termasuk juga robot perayap yang nantinya akan menjelajahi konten anda. Google sangat pintar untuk menangkap konten blogger lalu menempatkannya pada posisi yang baik dalam hasil pencarian. Bila melakukan kesalahan, bisa saja konten anda tidak akan mendapat peringkat, bahkan berada pada halaman terakhir pada suatu hasil mesin pencarian.

4. Membangun Link
Membangun link untuk blog sangat penting dilakukan. Caranya, berikan komentar di blog lain untuk memancing link ke blog Anda. Sebagian besar blogger juga melakukan investasi untuk mendapatkan beberapa link. Namun bagian yang paling fatal yang dilakukan para blogger dalam membangun link adalah Link Exchange. Sebagian besar link exchange dapat mengakibatkan larangan dari Googlesooner. Ingat!!! bangun link yang mempunyai keterkaitan konten, atau lonten yang relevan dengan blog. Jangan membangun link yang tidak relevan, karena akan menghancurkan blog sendiri. Bila ini tidak diindahkan, tunggu kunjungan google penguin yang akan membuat blog menjadi manyun.

5. Pentingnya Social Media
Gunakan situs jejaring sosial untuk share artikel yang dibikin dan berilah komentar pada beberapa link yang ada pada suatu komunitas jejaring sosial yang diikuti. Lakukan kunjungan sesekali pada kawan-kawan yang tergabung pada jejaring sosial tersebut dan tinggal komentar pada blog mereka, karena dengan begitu anda akan dilihat dan diperhatikan oleh blogger lainnya. Pertimbangkan untuk menggunakan tombol berbagi sosial di blog, sehingga pembaca dapat berbagi konten pada akun media sosial mereka. Semua ini benar-benar dapat bekerja sebagai sumber besar lalu lintas blog yang lebih baik.

6. Responsif Untuk Pembaca
Banyak blogger memotivasi pembaca untuk mengomentari blog mereka dan itu bermanfaat juga. Tetapi bagian yang salah adalah bahwa beberapa blogger tidak menjawab komentar yang ditinggalkan. Sekali-sekali kunjungi juga pengunjung yang meninggal komentar di blog anda dan berikan komentar balik pada artikel mereka. Dengan begitu hubungan antar blogger akan terjalin dan dapat dijadikan arahan untuk mempertinggi lalu lintas blog.

7. Membangun Daftar Reader dan Subscriber
Membangun pelanggan dan memiliki daftar pembaca merupakan tugas yang sangat sulit. Pertimbangkan untuk memiliki daftar lengkap dari pembaca blog dan sekali-sekali berbagi hal penting yang dijadikan semacam panduan singkat seperti pemberian E-Books gratis. Mungkin ini akan sangat bermanfaat kalau dilakukan sekali-sekali. Minimal kita telah berbagi apa yang dibutuhkan oleh blogger lainnya. Bukan hanya mengharap kunjungan, namun tidak pernah mau peduli pada blog orang lain. Jadikan blog orang lain itu sebagai inspirasi dan sumber pengetahuan, bukan hanya duduk saja didepan komputer dan menunggu kunjungan dari blogger lainnya. Itu sama halnya melakukan kebodohan dalam dunia kerdil anda sendiri.

Pada dunia blogging banyak sekali terdapat istilah atau pendapat tentang seo yang membuat pusing. Mungkin juga artikel ini membuat pusing, tapi saya yakin, suatu saat anda akan mengatakan kalau tip-tip ini dapat berjalan dengan baik untuk meningkatkan traffik. Sekarang mau tunggu apa lagi? kerjakan dan kejar ketinggalan.

"keep spirits and do the best"

Entri Populer Keren Dengan Multi Warna

Kali ini saya akan share cara membuat entri populer keren dengan multi warna. Tampilannya cukup menarik dan dapat dijadikan daya tarik tersendiri untuk blog anda. Sekarang mari kita bahas cara membuat widget entri populer keren dengan multi warna. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode css berikut di atas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Selanjutnya klik Simpan Template
Selanjutnya klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript dan setting seperti gambar di bawah ini

Selanjutnya klik Simpan dan lihat hasilnya
Demikian tutorial membuat entri populer keren dengan multi warna
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Tools Canggih Pelacak Kata Kunci Google

Tool canggih pencarian kata kunci ini dirancang khusus untuk melacak posisi kata kunci pada Search Engine Result Page Google. Hasil kata kunci akan ditampilkan dalam 10 halaman hasil pencarian Google. Anda dapat menggunakannya untuk cek kata kunci yang telah digunakan pada artikel anda, sehingga persaingan menempati posisi terbaik dalam hasil pencarian Google dapat dicapai secara maksimal. Tool ini juga dapat digunakan dalam kontes seo untuk melihat hasil pencarian kata kunci anda dan kompetitor lainnya, sehingga dengan mudah kita dapat menetukan kata kunci terbaik yang akan digunakan untuk mengikuti kontes seo tersebut. Sekarang mari kita bahas cara penggunaan tool pelacak kata kunci canggih ini. Ikuti langkah berikut.

Kunjungi Pelacak Kata Kunci Canggih
Masukkan kata kunci yang ingin dilacak pada pencarian Google
Masukkan alamat blog anda

tool cangging pelacak kata kunci google untuk kontes seo

Klik Show Advenced Options
Pastikan yes pada Clean URL (recomended)
Selanjutnya klik

Nanti anda akan melihat 10 halaman hasil pencarian Google. Bila kata kunci yang dipakai tidak ditemukan, lebih baik ganti kata kunci dengan yang lebih seo friendly dari pada berakibat buruk bagi perjalanan konten anda. Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Cara Merubah Tampilan Label Cloud

Sebelumnya saya pernah memposting cara mempercantik label cloud. Kali ini saya akan share cara merubah tampilan label cloud yang cukup menarik untuk diterapkan pada blog anda. Cara kerjanya sama saja, namun cara ini lebih mudah dan hanya menambahkan css pada template anda. Sebelumnya saya ucapkan terima kasih pada helper blogger yang telah berbagi widget ini. Sekarang mari kita bahas cara merubah tampilan label cloud. Ikuti langkah berikut

Log in ke blogger
Pastikal anda sudah memasang widget label cloud
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode css berikut di atas kode ]]></b:skin>

.label-size{float:left;margin:0 0 7px 20px;position:relative;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:0.75em;font-weight:bold;text-decoration:none; color:#963;text-shadow:0px 1px 0px rgba(255,255,255,.4);padding:0.417em 0.417em 0.417em 0.917em;border-top:1px solid #d99d38;border-right:1px solid #d99d38;border-bottom:1px solid #d99d38;-webkit-border-radius:0 0.25em 0.25em 0;-moz-border-radius:0 0.25em 0.25em 0;border-radius:0 0.25em 0.25em 0;background-image:-webkit-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));background-image:-moz-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));background-image:-o-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));background-image:-ms-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));background-image:linear-gradient(top,rgb(254,218,113),rgb(254,186,71));filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0,StartColorStr='#feda71',EndColorStr='#feba47');-webkit-box-shadow:inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);z-index:1}

.label-size:before{content:'';width:1.30em;height:1.39em;background-image:-webkit-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));background-image:-moz-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));background-image:-o-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));background-image:-ms-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));background-image:linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=1,StartColorStr='#feda71',EndColorStr='#feba47');position:absolute;left:-0.69em;top:.2em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg); transform:rotate(45deg);border-left:1px solid #d99d38;border-bottom:1px solid #d99d38;-webkit-border-radius:0 0 0 0.25em;-moz-border-radius:0 0 0 0.25em;border-radius:0 0 0 0.25em;z-index:1}

.label-size:after{content:'';width:0.5em;height:0.5em;background:#fff;-webkit-border-radius:4.167em;-moz-border-radius:4.167em;border-radius:4.167em;border:1px solid #d99d38;-webkit-box-shadow:0 1px 0 #faeaba;-moz-box-shadow:0 1px 0 #faeaba;box-shadow:0 1px 0 #faeaba;position:absolute;top:0.667em;left:-0.083em;z-index:9999}

#Label1{ height:210px}

.label-size:hover{background-image:-webkit-linear-gradient(top,rgb(254,225,141),rgb(254,200,108)); background-image:-moz-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));background-image:-o-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));background-image:-ms-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));background-image:linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0,StartColorStr='#fee18d',EndColorStr='#fec86c');border-color:#e1b160}

.label-size:hover:before{background-image:-webkit-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));background-image:-moz-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));background-image:-o-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));background-image:-ms-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));background-image:linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=1,StartColorStr='#fee18d',EndColorStr='#fec86c');border-color:#e1b160}

Selanjutnya klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Cara Mempercantik Label Cloud

Kadang tampilan label dapat membuat kita bosan, karena tampilannya yang sederhana dan terkesan membosankan. Oleh karena itu kita harus memberikan sedikit sentuhan agar tampilan label menjadi lebih cantik dan menarik. Sekarang saya akan bagikan trik mempercantik label cloud agar terkesan elegan dan nyaman dipandang mata. Sekarang mari kita bahas cara mempercantik tampilan label cloud. Ikuti langkah berikut.

.label-size{margin:0 2px 6px 0; padding:3px; text-transform:uppercase; border:solid 1px #C6C6C6; border-radius:3px; float:left; text-decoration:none; font-size:10px; color:#666}
.label-size:hover{border:1px solid #6BB5FF; text-decoration:none; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out; -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg); -ms-transform:rotate(7deg); transform:rotate(7deg); filter:progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455,M12=-0.08715574274765817,
M21=0.08715574274765817,M22=0.9961946980917455,
sizingMethod='auto expand'); zoom:1}
.label-size a{text-transform:uppercase; float:left; text-decoration:none}
.label-size a:hover{text-decoration:none}

Selanjutnya klik Simpan Template
Klik Tata Letak
Klik Tambah Gadget
Pilih Label lalu setting seperti gambar di bawah ini

Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Menu Horizontal Hijau dengan CSS

Tutorial menu horizontal telah banyak dikupas oleh kawan-kawan blogger. Perbedaannya hanya pada tampilan dan pelebaran fungsi dari menu itu sendiri. Kali ini saya akan share cara membuat menu horizontal hijau untuk blogspot dengan tampilan yang cantik dari paul santos blogger bin. Kelebihannya menu horizontal ini hanya menggunakan css jadi dijamin tidak memperberat loading blog anda. Baiklah, sekarang mari kita bahas cara membuat menu horizontal hijau cantik. Ikuti langkah berikut.

Log oh ke blogger
Klik Tempalate
Klik Edit HTML
Masukkan css berikut di atas kode ]]></b:skin>

nav.horizontal{}
nav.horizontal h3{padding-bottom:20px}
nav.horizontal ul{height:50px; background-image:-moz-linear-gradient(top,#93C204,#608009); background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#93C204),to(#608009),color-stop(1,#608009)); -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; border:1px solid #608009; box-shadow:5px 5px 5px rgba(0,0,0,0.25); -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.25); -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.25)}
nav.horizontal ul li{list-style:none; display:inline; float:left}
nav.horizontal ul li a{display:block; height:28px; margin:2px 6px 2px 6px; padding:15px 20px 0px 20px; font-size:12px; font-weight:bold; color:#FFF; text-transform:uppercase; text-decoration:none; border:1px solid transparent; background-image:none; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box}
nav.horizontal ul li a:hover{background-image:-moz-linear-gradient(top,#161616,#2B3615); background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(#2B3615),color-stop(1,#2B3615)); -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; border:1px solid #A3D804; box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25); -moz-box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25); -webkit-box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25)}

Selanjutnya klik Simpan Template
Klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<nav class=”horizontal”>
<ul>
<li><a href=”alamat link anda di sini”>Judul 1</a></li>
<li><a href=”alamat link anda di sini”>Judul 2</a></li>
<li><a href=”alamat link anda di sini”>Judul 3</a></li>
<li><a href=”alamat link anda di sini”>Judul 4</a></li>
<li><a href=”alamat link anda di sini”>Judul 5</a></li>
<li><a href=”alamat link anda di sini”>Judul 6</a></li>
</ul>
</nav>

Ganti tulisan merah dan biru pada kode di atas sesuai petunjuk
Selanjutnya klik Simpan dan tempatkan sesuai keinginan
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Apakah Seo Telah Mati?

Strategi mesin pencari telah berubah secara besar-besaran beberapa tahun terakhir. Sebelumnya, banyak situs mengalami pasang surut, terutama dalam optimasi mesin pencari. Diantara situs tersebut banyak yang memanfaatkan kinerja mesin pencari melalui kerja personalisasi, dukungan munculnya media sosial, mencoba mempelajari perubahan algoritma Google, dan terakhir dengan penurunan indeks yahoo yang merupakan penukar permainan kunci. Hal ini cukup jelas bahwa Evolusi SEO akan berbuah tanpa akhir yang memaksa para webmaster dan blogger harus bekerja keras, terutama pada pemaksimalan konten. Sebagian besar ahli berpikir bahwa itu adalah akal-akalan mesin pencari google yang sengaja digembar-gemborkan, karena selama beberapa tahun terakhir webmaster dan blogger telah menyaksikan perubahan besar. Nyatanya beberapa pendapat berguguran dan masuk keranjang sampah. Lalu, Apakah SEO Telah Mati, atau ada sesuatu yang masih tersembunyi dibalik semua ini?.

Kecurangan SEO dari Blogger dan Webmaster
Sebelumnya SEO (Search Engine Optimization) digunakan webmaster dan blogger dengan maksud menipu mesin mencari. Pada waktu itu tidak ada crawler mesin pencari untuk melindungi mesin pencari dari spam, sehingga sangat mudah untuk memanipulasi mesin pencari dengan melakukan kecurangan Seo (Black Hat Seo). Pada tahun 2002, Google datang dengan update besar algoritma, dimana banyak situs web dihapus dari mesin pencari karena melakukan kecurangan (Spam Teknik dan taktik yang disesuaikan untuk memanipulasi SEO) dan itu merupakan kerugian besar bagi Blogger dan Webmaster. Dari sini google melakukan perubahan sikap yang diterapkan pada Search Engine untuk perkembangan selanjutnya (Langkah Pertama Evolution dalam SEO).

Google Sandbox untuk Website Baru dengan Kualitas Tinggi atau Rendah
Google Sandbox (juga dikenal sebagai efek sandbox atau hukuman kotak pasir) adalah nama yang diberikan untuk sebuah sistem peringkat Google dalam mesin pencari. Situs-situs baru ditempatkan di sandbox sampai mereka meningkatkan konten dengan cara memperbanyak tulisan asli pada blog. Setelah Google percaya bahwa situs web tertentu memiliki konten yang berkualitas dan layak, maka secara otomatis blog tersebut dihapus dari Sandbox. Webmaster dan blogger dapat melakukan hal-hal terhitung jumlahnya untuk keluar dari Sandbox tapi waktu dan kesabaran adalah kuncinya. Namun demikian, Sandbox adalah langkah terbesar Google untuk membawa evolusi dalam SEO, agar para kompetitor mesin pencari dapat bersaing dengan sehat dan tidak main serobot dengan cara curang untuk menempati posisi terbaik pada Google SERP.

Google Panda dan Google Penguin
Ketika Google dapat dimanipulasi dengan cara kerja beberapa situs yang menerapkan Black Hat Seo, google mengalami banyak protes dari pengguna jasa pencarian terbesar tersebut. Banyak para Black Hat Seo mulai menyalin pekerjaan orang lain dengan menerapkan beberapa trick agar konten mereka terlihat asli dan berkualitas. Pada tahun 2011, Google memperkenalkan lagi mimpi buruk bagi para mesin fotokopi konten melalui Algoritma Panda yang seluruhnya mengkonversi internet atau situs web dari atas ke bawah. Tujuan utama dari pembaruan ini adalah untuk menghilangkan situs yang tidak berguna, tukang copas konten dari situs-situs lain, atau memiliki konten yang berkualitas rendah. Sejak itu, mereka telah menggulirkan update Google Panda lebih dari 7 Algoritma.

Pada 2012, untuk memerangi Website SPAM, Google melakukan perubahan besar dalam algoritma yang disebut Google Penguin. Siapapun yang melanggar Pedoman Webmaster Google akan dikenakan sanksi. Dari dua pembaruan ini google sekan tidak mau kecolongan sekecil apapun dalam menerapkan permainan jujur dalam mesin pencari mereka. Hal inilah yang merubah pandangan para Black Hat Seo, dan banyak diantara merasa yang merasa putus asa.

Penerapan Seo Bagaimana yang Sah Menurut Google?
Google telah menyatakan berkali-kali bahwa SEO sepenuhnya didasarkan pada isi website. Menurut insinyur Google Matt Cutts, "Kami tidak ingin melihat orang-orang yang membuang-buang waktu mereka dalam melakukan blackhat, atau menghabiskan jam dalam memanipulasi mesin pencari dengan menerapkan Seo yang tidak wajar. Kami ingin pengguna membuat konten indah dan jika mereka ingin menerapkan Seo yang tidak melanggar aturan (white hat seo), maka itu diperbolehkan ". Konten adalah resep untuk mendapatkan peringkat yang lebih tinggi di SERP Google, tapi kita tidak boleh lupa bahwa kualitas backlink masih memiliki makna. Kombinasi dari konten yang sangat profesional dan membuat backlink optimasi mesin pencari lebih sempurna .

Catatan dari Meja Penulis
Kita harus mengakui Google untuk memberikan layanan terbaik untuk membawa lebih banyak kemudahan penggunaan dan permainan jujur pada mesin pencari. Evolusi Search Engine Optimization telah memberikan kesempatan yang luar biasa bagi semua orang, dan yang perlu dilakukan adalah menulis konten asli dengan penerapan seo yang tidak melanggar aturan. Jadi intinya Konten adalah Raja, sedangkan penerapan seo hanya memuluskan kinerja konten agar cepat terindeks mesin pencari. Itu saja.

Referensi Bacaan Penerapan Seo Terbaik
9 Langkah Penerapan Seo Terbaik
Konten Adalah Raja
Seo Sederhana Tapi Jenius
Teknik Seo Gantung Diri
10 Kesalahan Seo

"keep spirifts and do the best"

Cara Membuat Jquery Lights Box

Kali saya akan share cara membuat lights box. Lights box merupakan tempat kumpulan gambar seperti gallery. Kelebihan lights box ini bila gambar diklik, maka akan membuat windows view tersendiri, sehingga deretan gambar akan ditampilkan pada frame tersendiri. Widget ini dari Leandro Vieira yang dirilis ulang oleh Spice up your blog. Sekarang mari kita bahas cara membuat Jquery Lights Box. Ikuti langkah berikut.

#jquery-overlay{position:absolute; top:0; left:0; z-index:90; width:100%; height:500px}
#jquery-lightbox{position:absolute; top:0; left:0; width:100%; z-index:100; text-align:center; line-height:0}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0}
#lightbox-nav{position:absolute; top:0; left:0; height:100%; width:100%; z-index:10}
#lightbox-container-image-box >#lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext{width:49%; height:100%; zoom:1; display:block}
#lightbox-nav-btnPrev{left:0; float:left}
#lightbox-nav-btnNext{right:0; float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; overflow:auto; width:100%; padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px; color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%; float:left; text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block; clear:left; padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px; float:right; padding-bottom:0.7em}

Selanjutnya masukkan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('a.spicebox') .lightBox({

overlayOpacity: 0.6,
imageLoading: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQpf4fAhov12xlQ7nYAiwZ-4-C1AfkNVM8MZ3n_2qRRf7bhAD1YIzT9DCTmoXtCpQgO-mGtjSDDHhy_GWaKtT-_ogqE5UC8ZH3P9Ocf556_olqsKj5vrXzzm9PdhVdKFT-JoZII3KRW8p/s1600/lightbox-ico-loading.gif',
imageBtnClose: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yqR3Z551gS8ZMOUvNkx2reh-7KC4VCCKChjfhJ2WnfxSDz9bGTTq-8ptFpV2oMcB5fsTAsKWu3Hqk8YoLEEWnNZQsmcR_RLyjDTUvEQfQwEY9uBQee9mcLmPqOUI_AyS5ybrgRFDyDBP/s1600/lightbox-btn-close.gif',
imageBtnPrev: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvm3x3tq-MBNbJ1mSN3vkBRGr1ERftmrEK_WGa-tgjLWtK_3-eFfqSdJFq1wrJ5o7rib_54YYEOdx1XF4tN8UTNc_yMrOkP_oyzjFLo2QTZVAxg7nRwzGVLd5IxbdKJFow3rJi46QjZxtM/s1600/lightbox-btn-prev.gif',
imageBtnNext: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiPRWWS42RjxNTMaKZa2Dpv27ig6AFeMh9sD_nw7T9NUzW3Xh1zDKk7EgqDsa8mhaT1qryvnhPWtnxxF_3rqi4mNWQwkHe6g8Ch-i7xlU-HKsbEA0fTPCF-iP3ts1R4QvS8IAeDfTe0Jcp/s1600/lightbox-btn-next.gif',
containerResizeSpeed: 350,
txtImage: 'Image',
txtOf: 'Of'
});
});
</script>

Klik Simpan Template
Tambahkan kode class="spicebox" title="Image Description Here" pada kode gambar anda. Perhatikan contoh kode gambar di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe048o6HUKxBLH-eL-v_8f9Edyt4oCZuY-fwTHH518YT3U05AHWhohGLVJM9x_cU-04jGWhP54Xj1CvNuBz3sSakq6FjDbTB4Z8ShqGB1pud92nL7KNytYJJ9gjaP_wciC9mWo3vmEK0Q/s1600/gs2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe048o6HUKxBLH-eL-v_8f9Edyt4oCZuY-fwTHH518YT3U05AHWhohGLVJM9x_cU-04jGWhP54Xj1CvNuBz3sSakq6FjDbTB4Z8ShqGB1pud92nL7KNytYJJ9gjaP_wciC9mWo3vmEK0Q/s1600/gs2.jpeg" /></a></div>

Setelah ditambahkan kode merah dan biru akan menjadi seperi berikut.

<div class="separator" style="clear: both; text-align: center;">
<a class="spicebox" title="Image Description Here" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe048o6HUKxBLH-eL-v_8f9Edyt4oCZuY-fwTHH518YT3U05AHWhohGLVJM9x_cU-04jGWhP54Xj1CvNuBz3sSakq6FjDbTB4Z8ShqGB1pud92nL7KNytYJJ9gjaP_wciC9mWo3vmEK0Q/s1600/gs2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe048o6HUKxBLH-eL-v_8f9Edyt4oCZuY-fwTHH518YT3U05AHWhohGLVJM9x_cU-04jGWhP54Xj1CvNuBz3sSakq6FjDbTB4Z8ShqGB1pud92nL7KNytYJJ9gjaP_wciC9mWo3vmEK0Q/s1600/gs2.jpeg" /></a></div>

Selanjutnya klik Publikasikan dan lihat hasilnya
Bila ingin membuat pada Laman Baru, ikuti langkah berikut
Klik Laman dan pilih Laman kosong seperti gambar di bawah ini

Nanti anda akan dibawa ke halaman berikutnya. Berikan judul dan uploud gambar, lihat contoh di bawah ini.

jangan dipelototin ya gan

Selanjutnya klik HTML disamping Compose dibagian kiri atas posting area seperti gambar berikut.
Nanti akan didapati kode gambar, selanjutnya tinggal memasukkan kode merah dan biru seperti yang sudah
diterang di atas

Selanjutnya klik Publikasikan
Lalu klik link Laman dan copy alamat link Laman yang ada di address bar seperti berikut dan jadikan link tersendiri seperti di bawah ini.

<a href='http://Alamat link anda/p/judul-laman-anda.html' target='_blank' title='judul yang berkaitan dengan keterangan gambar'>JUDUL LINK</a>

Terakhir klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

5 Efek Gambar Menggunakan Jquery

Beberapa blogger menggunakan css untuk memberi efek pada gambar agar terlihat menarik. Kali ini saya akan berbagi trik efek pergerakan pada gambar menggunakan jquery. Gambar akan memperlihatkan pergerakan aktif dan peralihan menawan setelah cursor diarahkan pada gambar tersebut. Hal ini akan menjadi daya tarik tersendiri bagi gambar dipostingan saudara. Baiklah, sekarang mari kita bahas cara memberi efek pada gambar menggunakan jquery. Ikuti langkah berikut.

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Selanjutnya msukkan kode berikut di atas kode </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>

Selanjutnya Simpan Template
Ketika anda ingin memberikan efek jquery pada gambar posting, sertakan kode berikut. Perhatikan kode biru dan merah.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAK7VyU2rk0AIOAK9nES1D1N-GuRwiFEPdPxFgVEuQWPZebuvi1jf9SkotD35GDI2IQfcSes4kVXLPYfmf1treY8o0eYHlBPO3e9J6OADT7VwxCqumFsN8w6AVwXv_WUfi_hmLJLye1Gm/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAK7VyU2rk0AIOAK9nES1D1N-GuRwiFEPdPxFgVEuQWPZebuvi1jf9SkotD35GDI2IQfcSes4kVXLPYfmf1treY8o0eYHlBPO3e9J6OADT7VwxCqumFsN8w6AVwXv_WUfi_hmLJLye1Gm/s1600/image-effects-image-2.png" /></a></div>

Ganti kode biru dengan kode merah. Selanjutnya tambahkan juga kode merah hingga menjadi dua seperti contoh di bawah ini.

<div class="effect1" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAK7VyU2rk0AIOAK9nES1D1N-GuRwiFEPdPxFgVEuQWPZebuvi1jf9SkotD35GDI2IQfcSes4kVXLPYfmf1treY8o0eYHlBPO3e9J6OADT7VwxCqumFsN8w6AVwXv_WUfi_hmLJLye1Gm/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAK7VyU2rk0AIOAK9nES1D1N-GuRwiFEPdPxFgVEuQWPZebuvi1jf9SkotD35GDI2IQfcSes4kVXLPYfmf1treY8o0eYHlBPO3e9J6OADT7VwxCqumFsN8w6AVwXv_WUfi_hmLJLye1Gm/s1600/image-effects-image-2.png" /></a></div>

Kamu dapat menggunakan class="effect1" class="effect2" class="effect3" class="effect4" class="effect5" pada masing-masing gambar untuk memberi perbedaan efek.

Catatan:
Bila anda bingung mencari kode gambar, silahkan ikuti instruksi berikut.
Setelah memasukkan gambar pada saat menulis posting, klik HTML disamping Compose (disebelah kiri atas posting area). Cari kode yang mirip dengan kode di atas. Setiap gambar akan berbeda kodenya. Setelah ketemu ikuti tutorialnya.

Selanjutnya klik Publikasikan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"