OKY KELANA: TUTORIAL BLOG

Showing posts with label TUTORIAL BLOG. Show all posts

Thursday, April 3, 2014

Cara Mendaftarkan Blog di Webmaster Google

Google Webmaster Tools merupakan layanan gratis milik perusahaan search engine raksasa, Google yang memungkinkan kita untuk untuk memantau dan mengoptimalkan blog atau web kita agar dapat dicrawl dan diindex dengan baik oleh Google. Layanan ini juga memungkinkan untuk meminta search engine melakukan crawling terhadap blog atau web dan memantau 'kesehatan' suatu blog/web. Tentunya hal ini sangat penting manfaatnya bagi para blogger dalam melakukan optimalisasi blognya.

Untuk dapat menggunakan layanan Google Webmaster Tools anda harus mendaftar terlebih dahulu menggunakan akun Gmail atau akun Google lainnya. Bagi yang belum memiliki akun Google silakan mendaftar terlebih dahulu.
Berikut ini cara mendaftar dan melakukan verifikasi blog di Google Webmaster Tools :

1.) Buka halaman www.google.com/webmasters/tools/ lalu Login lah menggunakan akun Gmail atau akun Google anda.
2.) Kemudian pada halaman Google Webmaster Tools , Klik tombol Add a Site lalu masukkan alamat blog anda yang ingin didaftarkan. Setelah itu klik Continue.

3.) Lalu pada halaman Verify Ownership kita diminta untuk melakukan verifikasi blog. Ada 4 pilihan dalam melakukan verifikasi blog, yaitu :

>> Use your Google Analytics account
Menggunakan kode Google Analitycs pada blog anda

>> Add a DNS record to your domain's configuration
Menambahkan DNS record pada domain registrar atau hosting provider

>> Add meta tag to your site's home page
Menyisipkan kode meta tag yang disediakan kedalam kode HTML blog.

>> Upload an HTML file to your server
Kita akan diminta untuk mendownload sebuah file HTML yg disediakan
kemudian menguploadnya ke blog kita.

Saya sarankan menggunakan metode Add meta tag to your site's home
page karena lebih mudah.

Adapun berikut ini cara melakukan verifikasi menggunakan meta tag:
a.) Pada halaman Verify Ownership tadi, klik Add meta tag to yous site's
homepage
b.) Kemudian, copy kode meta tag yang ada disana.
c.) Login ke akun Blogger anda di Tap baru
d.) Pilih Design >> Edit HTML
e.) Sebaiknya backup dulu template anda dengan cara klik Download Full
Template
f.) Masukan kode meta tag tadi diantara tag <head> dan <body> (anda
boleh meletakkannya dibawah tag <head> atau diatas tag <body> , pilih
salah satu saja)
g.) Klik Save Template. Sekarang meta tag sudah terpasang di blog anda,
ikuti langkah selanjutnya

4.) Setelah memasang kode meta tag, kembali ke halaman Verify Ownership lalu klik Verify.

Sekarang Blog anda sudah terdaftar dan terverifikasi di Google Webmaster Tools. Langkah selanjutnya agar blog lebih mudah dicrawl oleh spiderbot adalah dengan mensubmit sitemap blog anda ke Google Webmaster Tools. Sitemap digunakan untuk memberiahu search engine tentang suatu halaman blog atau web agar dicrawl. Dengan membuat dan mensubmit sitemap ke Google Webmaster Tools, blog anda memiliki kemungkinan lebih besar untuk cepat dicrawl dan diindex search engine Google.

Adapun cara mensubmit sitemap ke Google Webmaster Tools adalah sebagai berikut :

1.) Masuk ke dashboard Google Webmaster Tools blog anda

2.) Klik Site Configuration, lalu pilih Sitemaps.

3.) Klik Submit a Sitemap, lalu masukkan sitemap blog anda. Setelah itu Klik Submit Sitemap.
Contoh sitemap blog http://blablabla.blogspot.com/sitemap.xml jadi di kolom sitemap isi dengan sitemap.xml

Sekarang blog anda sudah terdaftar di Google Webmaster Tools dan sitemap blog anda sudah tersubmit.

Buku Tamu Panel Slide Vertikal Jquery

5:43 AM TUTORIAL BLOG No comments

TUTORIAL BLOG | BELAJAR BLOG | TIPS TRIK BLOG -Membuat buku tamu Panel Slide Vertikal jquery, dengan ini akan memudahkan kita untuk saling sapa dengan para bloger lainya. Memang kita di susahkan dengan berbagai macam cara yang unik untuk menampilkan buku tamu itu sendiri. Nah, sekarang ini gue akan buat artikel tentang cara membuat Buku Tamu Slide Vertikal Dengan Jquery yang akan tampil jika diKlik.

Contoh hasil bisa Anda lihat seperti dibawah ini :

Dan untuk demonya anda bisa lihat di blog saya, Tepat pada pojok kanan
Caranya membuatnya sebagai berikut :
Login di blogger Anda
    * Masuk ke Dasbor
    * Pilih Tata Letak / Rancangan Dan Edit HTML
    * Klik "Expand Template Widget"
    * Jangan lupa untuk memback-up template anda terlebih dahulu

      Kemudian

1. Cari code : ]]></skin>
Sisipkan code berikut di Atas-nya :

      
.panel2{position:fixed;top:20px;right:0;background:#000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;border:1px
  solid  
#940000;width:350px;height:350;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px
  60px 10px 30px}

.panel2 p{color:#ffffff;margin:0 15px 0  0;padding:0}

    .panel2 a,.panel2  a:visited{color:#940000;text-decoration:none;border-bottom:1px solid  #9FC54E;margin:0;padding:0}

    .panel2 a:hover,.panel2  a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid  #fff;margin:0;padding:0}
     
a.trigger2{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
  helvetica, arial, 
sans-serif;color:#fff;font-weight:700;background:#333   
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzku-yYjl-knoZ-CTPszoxZTcZ3jby77aA0bFw4YDDNKvfuRciaLLif_hzHBrP36eQAo9dpYbeGyYZz510d0gSjv8tlddJgnjn4wrrl8M-K6DU-lsdDTVPQC7XEEZ3CUBagPOEtoh1fBc/)
  85% 55% no-repeat;border:2px solid  
#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px
  35px 10px 10px}
     
a.trigger2:hover{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
  helvetica, arial, 
sans-serif;color:#fff;font-weight:700;background:#222   
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRUOAJXVUykbFEs9zMLY2YqvgJ8QMQjs2jgvpBwig2gVUaLZGZvhEe7ddpRxibw5TNaXJvuj6K9Ye4dS8T36b_PV9KHDPCsGHJwJshx3f42wvI7l6npJBoFtRlXuv-vncKHm7g7Nkzo4/)
  85% 55% no-repeat;border2px solid  
#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px
  40px 10px 10px}
 a.active.trigger2{background:#222  
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRUOAJXVUykbFEs9zMLY2YqvgJ8QMQjs2jgvpBwig2gVUaLZGZvhEe7ddpRxibw5TNaXJvuj6K9Ye4dS8T36b_PV9KHDPCsGHJwJshx3f42wvI7l6npJBoFtRlXuv-vncKHm7g7Nkzo4/)
  85% 55% no-repeat}
 .columns2{clear:both;width:330px;line-height:22px;padding:0 0 0 20px}

     a:focus{outline:none}

    .panel2  img{background-color:#262626;border:1px solid #333;float:left;margin:3px  3px 6px 8px;padding:5px}

    .panel2 h3{border-bottom:1px solid  
silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}

2. Cari code : </head>
Sisipkan code berikut di Atas nya :

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

<script  type='text/javascript'>

$(document).ready(function(){

$(&quot;.triger2&quot;).click(function(){

 $(&quot;.panel2&quot;).toggle(&quot;fast&quot;);

 $(this).toggleClass(&quot;active&quot;);

 return  false;

});

});

</script>

3. Selanjutnya cari code : </body>
Dan masukan code berikut di Atas-nya juga :

<div  class='panel2'>

<h3>Buku  Tamu</h3>

<=  Isikan dengan Buku Tamu Anda =>

</div>

<a  class='triger' href='#'>SHOUT</a>

Simple Javascript Floating Image, Object, Avatar, dan Lain-lain

5:36 AM TUTORIAL BLOG No comments

Saya tertarik dengan dengan float image yang pernah saya lihat di blog-blog atau forum untuk di pasang di blog saya. setelah mencari di google saya menemukan script floating dari dynamic drive yang telah di ringkas dan di buat simple oleh joy atau crazy davinci . script ini berfungsi untuk menampilkan gambar, link, mp3 atau apa saja di sidebar page kita.

Caranya mudah dan simple :

Letakkan kode berikut setelah tag <body> sebelum tag </body>

<div id="avatar">
<img src="YOUR IMAGE URL" width=" 80" height=" 80"/>
</div>

Letakkan kode berikut setelah tag <head> sebelum tag </head>

<link rel="stylesheet" type="text/css" href="http://static.int.crazydavinci.net/style/float_joy.css " />
<script type="text/javascript" src="http://static.int.crazydavinci.net/script/float_joy.js"></script>

Silahkan download dan edit file CSS http://static.int.crazydavinci.net/style/float_joy.css kemudian upload di hostingan sendiri.
Untuk modifikasi file .js nya silahkan download dan edit file http://static.int.crazydavinci.net/script/float_joy.js kemudian upload di hostingan sendiri.

Keterangan:

startX = parseInt(screen.width/2)+400;
startY = parseInt(screen.height/2)-110

starX akan menjadi objek horizontal dari tengah halaman anda.
starY akan menjadi objek vertikal.

Nah untuk mengganti gambar menjadi mp3, atau apa saja silahkan modifikasi tag div avatar nya :

<div id="avatar">
<img src="YOUR IMAGE URL" width=" 80" height=width=" 80"/>
</div>

Ganti saja yang saya beri warna merah di atas dengan kode embed mp3 atau yang kamu mau.

Ok, saya rasa cukup jelas dan semoga berguna.
Preview bisa di liat di blog saya atau di SINI .

Cara Membuat Efek Salju Natal DiBlog

5:33 AM TUTORIAL BLOG No comments

Oke untuk menghabiskan waktu luang gue yang ngak begitu singkat langsung aja dech untuk hari ini gue mau posting lagi mengenai TipsBlog, udah lama banget gue ngak posting mengenai tipsblog oke langsung aja dech postingnya mengenai Cara Membuat Efek Salju Natal DiBlog,

Oke sedikit penjelasan mengapa gue milih ini untuk dipostingkan pada hari ini karna, mungkin alasannya karna ini kan udah dekat banget dengan natal jadi untuk mendapatkan visitor yang lebih menurut gue lebih baik tamba beberapa animasi aja dech diblog agar blog tampak lebih menarik dan oke kelihatannya :

Oke langsung aja dech pada tips ini dia, Cara Membuat Efek Salju Natal DiBlog :

Pertama tam kamu mesti login ke akun blog kamu,langsung aja kesini blogger.com
Kalo udah langsung aj dech kamu buka Tataletak
Kalo udah langsung saja TambahGadget > kalo udah langsung pilih HTML/Java Script
Kalo udah juga langsung aja pastekan kode ini kedalam HTML/Java Script tersebut
ini dis kodenya :

<script src="http://tgffghg.googlecode.com/files/snowstorm.CobaSanaSini.js" type="text/javascript"></script>

Kalo udah pastekan kode tersebut langsung aja simpan HTML/Java Script, tersebut dan langsung aja lihat blog kamu, selamat mencoba

Oke sekian dulu dari saya jangan lupa untuk terus berkunjung keblog saya dan jangan lupa juga untuk meninggalkan komentar anda disini sekian terima kasih atas kunjungannya salam blogger Oke sekian dulu salam Blogger by CobasanaSini

Membuat kelelawar terbang di blog

5:33 AM TUTORIAL BLOG No comments

Tips Trik Blog | Tutorial Blog -Halo sobat tutorialbelajarblog yang tercinta,kali ini saya akan memberikan script yang saya uplaod di google code tentang cara membuat kelelawar terbang di blog, untuk membuat agar blog kamu banyak cara yang bisa kamu lakukan nah,kalau membuat kelelawar terbang pada blog inilah scriptnya,silahkan pasang di blog kamu.

Cara membuat kelelawar terbang di blog:

Masuk ke Blogger dengan akun anda
Setelah masuk ke Dashboard pilih Rancangan~~Tata Letak~~Add Widget
Lalu pilih Html/javascript
kemudian copy paste kode berikut:
<script src="http://oktri.googlecode.com/files/lawa.js" type="text/javascript"></script>
Lalu simpan.

Mungkin pada postingan selanjutnya tutorial belajar blog akan berbagi tips tidak berbeda jauh yaitu Tips Membuat gambar Berjatuhan (falling snow effect),

Tips Memilih Alamat Blog Atau Nama Domain

5:32 AM TUTORIAL BLOG No comments

Tutorial Belajar Blog - Tips Memilih Alamat Blog Atau Nama Domain, Salam blogger, kali ini saya akan sedikit membahas mengenai tips dan trik memilih domain. Alamat atau domain dalam sebuah blog itu ibarat nomor handphone, jika kita tidak tidak tahu Nomornya maka apa daya kita tidak akan bisa menghubungi orang tersebut. Begitu halnya dengan alamat blog, jika alamat blog kita itu asing di telinga orang-orang atau bahkan susah untuk diingat maka jangan harap ada orang yang akan mengunjungi blog kita, itu sedikit gambaran betapa pentingnya suatu Domain.

Apakah sobat masih pusing memilih alamat blog atau nama domain buat blog sobat? Oke gak perlu bingung, sobat tinggal baca artikel dibawah ini dan saya jamin sobat langsung dapat gambaran gimana alamat blog yang baik.

Inilah Beberapa Tips yang perlu anda pertimbangkan dalam memilih suatu Domain:

1. Harus Menggambarkan Blog Anda

Besar kemungkinan bahwa banyak orang akan melihat Alamat ke blog Anda sebelum memiliki keputusan untuk benar-benar membacanya (di search engine melalui proses pencarian, misalnya). Coba tebak, jika hanya dengan melihat nama alamat blog Anda, dan mereka dapat langsung mengetahui apa tema blog Anda, maka mereka akan lebih cenderung untuk mengunjunginya kembali blog Anda.

2. Harus Mudah Diingat

Misalkan blog anda berbicara tentang olah raga, futsal, dan sepak bola secara umum. Penamaan itu "Blog Olah raga, Seluk beluk Futsal dan Dunia Sepak Bola" akan menawarkan dengan uraian yang lengkap dari blog Anda, dan Anda akan mendapatkan cakupan alamat blog yang lebih fokus lagi. Tentu juga mudah yang diingat. Misalnya Kita pilih dengan nama sederhana, yaitu duniabola. Sekali lagi ini hanya suatu gambaran yang dibuat untuk mempermudah Anda.

3. Harus Sama Dengan Nama Domain

Ini adalah suatu prospek kedepan dalam jangka yang panjang. Jika suatu saat Anda memutuskan ingin lebih serius terjun ke dunia blog, suatu saat pasti Anda akan memutuskan membeli suatu domain yang mewakili Brand dari blog Anda. Ini bukan lah hal yang tidak mungkin. Aturan ini sering diabaikan oleh orang, mungkin karena menemukan domain yang cocok yang belum terdaftar adalah tugas yang sulit. Namun jika nama domain Anda tidak cocok dengan nama blog Anda sekarang nanti nya, mungkin akan kehilangan beberapa pembaca sepanjang beriringnya waktu. Walaupun memang secara teori dan praktik, alamat blog lama Anda akan tetap di redirect ke alamat domain baru Anda nantinya. Tetapi akan menjadi suatu nilai tambah, ketika para pengunjung setia Anda melihat alamat blog Anda telah berganti menjadi Domain Anda yang baru. Contoh: tutorialbelajarblogger.blogspot.com menjadi tutorialbelajarblogger com. Jangan sampai ketika orang mengunjungi blog Anda dengan cara pintas melalui cara menghilangkan .blogspot.com Anda dan menggantinya menjadi .com, mereka tidak menemukan blog Anda setelah mereka tekan enter. Mereka hanya akan pergi ke alamat lain.

4. Kesesuaian Dengan Sosial Media

Saya sarankan alamat blog Anda sama dengan username Anda pada situs-situs Sosial Media yang Anda ikuti. Sebagai contoh, Jika alamat blog Anda dan Username Twitter Anda Sama, hal ini bermanfaat untuk memiliki kekuatan dan pengaruh pada optimasi mesin pencari (SEO), yang berarti seberapa dekat ke bagian atas daftar hasil pencarian Anda muncul di mesin pencari seperti Yahoo! atau Google. Jika Anda pebisnis, pertimbangkan untuk menggunakan kata kunci berharga sebagai nama Twitter Anda dan alamat blog Anda.

5. Kesesuaian Nama

Sebuah nama pengguna yang baik adalah sama, atau mirip dengan, atau menggunakan nama Anda sendiri. Untuk kasus ini, terjadi ketika kita inggin membuat blog dengan menggunakan identitas nama kita sendiri. Jika sudah ada pengguna telah mengklaim nama kita, cobalah menambahkan kata sifat atau keterangan, seperti blog atau blogs atau jika perlu masukan nama kita secara lengkap tetapi, jika cara ini masih gagal, atau alamat blog sudah terpakai, bisa dicoba menggunakan nama terakhir Anda sebagai alamat blog Anda. Dengan cara ini, pengunjung secara tidak langsung beranggapan bahwa Anda merupakan orang yang terbuka dan gemar berbagi. Kita juga mendapatkan keuntungan dan nilai jual dari nama kita. Tetapi, Jika Anda lebih memilih untuk orang-orang tidak tahu siapa Anda, Cara ini lebih baik diabaikan saja. Atau Anda dapat memilih nama lain yang sedikit lebih generik, atau lebih umum.

6. Etika Dunia Maya dan Dunia Nyata

Jika Anda lebih memilih untuk menggunakan nama panggilan, alias, bukan nama Anda yang sebenarnya, bukan perusahaan Anda atau nama produk, pastikan untuk memilih alamat blog yang ramah dan mudah diakses. Di dunia blog, tentu saja Anda ingin orang untuk merespon anda, tidak membuat pengunjung terusik oleh alamat blog Anda yang agak bersifat cabul atau dipertanyakan. Dan jika Anda menggunakan alamat blog Anda tersebut didunia nyata, misalkan pernyataan tertulis di kartu nama Anda atau dalam ucapan, tentu saja Anda tidak Akan dibuat malu nantinya.

7. Eksentrik, Sensasi dan Ajang Show Off

Jika anda bertujuan membuat blog adalah ajang mencari sensasi, LUPAKAN semua hal di atas. Pilih lah alamat blog yang bersifat eksentrik, sensasional, bahan ekstrim sesuai tujuan Anda. Tentu saja hal ini lebih cepat mendongkrak popularitas blog Anda. Tentu saja konsekuensi ditanggung Anda.

Nah itulah beberapa hal yang perlu dipertimbangkan dalam memilih alamat atau domain blog, karena domain adalah sektor vital bagi sebuah blog, semoga bermanfaat...

Perbaikan Blogger Template HTML Editor

1:33 AM TUTORIAL BLOG No comments

Tutorial Belajar Blog - Beberapa hari tidak membuka blog sore ini kaget dengan inovasi Blogger dari waktu ke waktu semakin membuat penggunanya merasakan "jatuh cinta" kepadanya.Blogger kembali melakukan perubahan pada fitur Template mereka. Perubahan yang menurut saya cukup mencolok dari sebelumnya.

Di perubahan kali ini Blogger menyuguhkan beberapa fitur tambahan seperti :

Lompat ke Widget : untuk mengetahui kode HTML widget yang telah terpasang. Dengan adanya fitur ini pengguna hanya perlu memilih kode widget mana yang ingin ditampilkan. Sehingga cukup memudahkan terutama bagi mereka yang masih awam dengan berbagai kode HTML.

Pratinjau Template : Fitur tambahan ini memungkinkan pengguna melihat langsung perubahan yang terjadi pada template di dashboard ketika proses pengeditan, sehingga tidak perlu lagi menggunakan fitur pratinjau yang membuka halaman baru untuk melihat perubahan pada template.

Edit Template : Tampilan baru yang cukup segar, dengan kode berwarna-warni dilengkapi fitur line, memudahkan pengguna mendeteksi setiap kali terjadi kesalahan ketika mengedit template. Sehingga ketika pengguna ingin mengetahui baris kode yang salah, tidak perlu lagi menggunakan software tambahan.

Beberapa perubahan dan tambahan fitur ini telah membuktikan konsistensi Blogger di dalam menjawab semua kritik dan saran dari para penggunanya. Tidak bisa dipungkiri nantinya Blogger akan mengadakan update fitur-fitur lain untuk mendukung para Blogger dalam menjalankan aktifitas mereka dan mungkin saja akan menjadi Platform Blogging idaman para Blogger.

Panduan Cara mendaftarkan blog di technorati

1:26 AM TUTORIAL BLOG No comments

Technorati adalah salah satu directory yang sudah terkenal.Banyak para blogger master yang mendaftarkan blognya disini bagaimana tidak jika terdaftar disini blog kita akan lebih dikenal oleh search engine semisal google,yahoo,bing dan search engine lainnya

Cara mendaftarkan blog kita di technorati :
1. Kunjungi situs www.technorati.com
2. Pilih join.
3. Kemudian isi data yang diperlukan → Klik submit.
4. Lalu buka email kemudian verifikasi dengan mengklik email yang anda peroleh dari technorati.

Cara claim technorati :
1. Log in ke akun technorati anda.
2. Klik user name anda ( di pojok kanan atas.)

3. Isi profil anda → Update Account anda
4. Kemudian pada pilihan Claim My Blog masukkan url atau blog anda lalu klik Claim.
5. Pada menu Details isi data yang diperlukan. Pada bagian Feed URL isi dengan feed url sobat contoh :
http://tutorialbelajarblogger.blogspot.com/atom.xml (tambahin aja url blog anda dengan /atom.xml)
6. Pilih kategori dan keyword yang sesuai dengan tema blog anda. Lalu klik proces to next step.
7. Setelah muncul tampilan, pilih return to profile.
8. Kemudian pilih Check Claim
9. Lalu anda akan memperoleh Unique Code. Buatlah sebuah postingan yang berisi unique code agar pihak technorati dapat memverifikasi blog anda. Contohnya seperti postingan saya ini.

contoh unique code :VJ5HXQ8JC4JM
contoh unique code :
url : http://tutorialbelajarblogger.blogspot.com/

10. Terakhir klik Verify Claim Token.
11. Tunggu beberapa hari hingga tim technoriti memverifikasi blog anda.

Kriteria Blog Mendapat PageRank Tinggi

1:23 AM TUTORIAL BLOG No comments

Tutorial Blog | Tips Blog - Kriteria Blog Mendapat PageRank Tinggi , kali Ini tutorial belajar blog ingin berbagi info tentang kriteria blog yang mendapatkan page rank tinggi sebenernya blog ini belum pantas untuk postingkan artikel ini karena pagerank blog ini saja masih nol besar, tetapi tidak apa apa sebab beberapa teman blogger banyak yang setuju dengan kriteria ini.

Berikut Ini kriteria - kriteria Blog Page Rank tinggi:

1.       SEO Friendly Blog
> adalah salah satu cara penting agar blog kita mudah terindex oleh Google dan mendapatkan pagerank. Blog SEO Friendly bisa berasal dari pemilihan template yang SEO Friendly, loading blog yang tidak berat atau penanaman Meta Tag di HTML.

2.       Link Wheel
Link wheel ternyata sangat penting pengaruhnya untuk SEO dan page rank. Berbeda dengan Related Post yang di- generate oleh script, link wheel yang baik di mata SEO adalah link wheel manual yang menghubungkan link post yang satu dengan yang lain. Misalnya adalah post A, B, C, D, dan E memiliki link rujukan ke post F, G, dan H, kemudian post F-G-H memiliki rujukan ke post J. Link Wheel yang seperti ini juga cocok sekali jika Anda sedang mengikuti Kontes SEO, karena Google akan meng- crawl post J sebagai post yang sangat penting atau direkomendasikan sehingga akan memiliki posisi yang bagus di Search Engine.

3.       Backlink Berkualitas
Tidak perlu repot- repot membeli backlink berkualitas dengan harga mahal, cara memperoleh backlink berkualitas yang murah sekaligus legal di mata Search Engine cukup sederhana, yaitu rajin- rajin memberi komentar pada blog yang ber- PR tinggi.

4.       Maksimalkan Meta Tag yang dapat men- support SEO
5.       Berikan penekanan terhadap keyword

Selalu memberi penekanan terhadap keyword atau kata kunci tertentu dengan memberigaris bawah atau cetak tebal ternyata membuat robot Google meng- crawl keyword tersebut lebih cepat karena menganggapnya lebih penting dari pada yang lain. Semakin sering kebiasaan ini dilakukan, maka semakin baik nilai postingan Anda di mata SEO dan berpengaruh terhadap pagerank Anda.

6.       Artikel Unik, Menarik dan Original
7.       Posting secara teratur
Untuk blog baru minimal satu artikel per hari selama sebulan atau maksimal tiga bulan, sedangkan blog lama, minimal setiap dua kali seminggu.
8. Promosikan Blog,Social Bookmark, Social Network atau melalui Blogwalking.

*Berbagai Sumber dengan beberapa perubahan
nah apa blog kamu sudah termasuk kriteria tersebut??

Dampak Positif Dan Negatif Tukar Link

1:22 AM TUTORIAL BLOG No comments

Dalam mendongkrak popularitas situs maupun blog kita di search engine banyak cara optimasi yang bisa kita tempuh,salah satu nya adalah dengan cara mencari backlink yaitu bertukar link antar blog,namun dalam bertukar link banyak sekali yang perlu kita perhatikan salah satu nya adalah dengan situs/blog apa kita bertukar link,se tema atau tidak blog tersebut dengan blog kita.
Karena apabila kita bertukar link dengan blog yang tidak setema dengan blog kita maka link yang mengarah dari blog lain ke blog kita tidak akan ada manfaat nya.
Dari beberapa sumber menyebutkan dengan bertukar link banyak sekali manfaat yang bisa kita petik,namun disisi lain juga terdapat Dampak Positif Dan Negatif Tukar Link pada blog kita.

Berikut Beberapa dampak positif(manfaat) tukar link antar blog:

1. Kalian akan mendapatkan banyak link partner untuk blog kalian.
2. Meningkatkan Ranking blog kalian di search engine.
3. Blog kalian akan mendapat banyak anchor text dari blog lain yang mengarah ke blog kita.
4. dapat meningkatkan pagerank dan alexa rank blog kalian.
5.Pengunjung atau trafik akan semakin cepat meningkat pada blog kalian.
6. mendapatkan banyak backlink dari blog lain dan terlebih lagi dofollow dan ber pagerank tinggi.
7. Menambah teman dan persahabatan antar sesama blogger.
8. Blog kita akan semakin populer karena banyak link blog kita yang terdapat di halaman blog lain.
9. Dan lain lain,silakan googling.

Banyak ya manfaat yang kita dapat dari tukar link dengan blog lain,namun di sisi negatif banyak juga yang perlu kita perhatikan terlebih lagi di mata search engine google.

Berikut petikan nya:

-------------------------------------------------------------------------------------------------------------

..Excessive link exchanges, could “negatively impact your site’s ranking in search results.”

-------------------------------------------------------------------------------------------------------------
Don’t participate in link schemes designed to increase your site’s ranking or PageRank. In particular, avoid links to web spammers or “bad neighborhoods” on the web, as your own ranking may be affected adversely by those links.

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35769#3
-------------------------------------------------------------------------------------------------------------
…some webmasters engage in link exchange schemes and build partner pages exclusively for the sake of cross-linking, disregarding the quality of the links, the sources, and the long-term impact it will have on their sites. This is in violation of Google’s webmaster guidelines and can negatively impact your site’s ranking in search results. Examples of link schemes can include:
* Links intended to manipulate PageRank
* Links to web spammers or bad neighborhoods on the web
* Excessive reciprocal links or excessive link exchanging (“Link to me and I’ll link to you.”)
* Buying or selling links that pass PageRank

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66356
--------------------------------------------------------------------------------------------------------------
Begitulah Yang di kutip dari google guidelines.

Berikut dampak negatif pada blog kita:

1. tukar link yang terlalu banyak dapat mengakibatkan situs/blog kita di banned oleh Google,
terutama mereka yang memakai layanan Blogspot.
2. Melakukan Link Schemes yaitu Search engine mengira blog kita melakukan manipulasi banyak link.
4. Links intended to manipulate PageRank Yaitu membuat banyak link,hanya untuk meningkatkan PageRank.
5. Links to web spammers yaitu Melakukan banyak tautan ke situs spam atau situs lain yang dianggap kurang
baik oleh Google.
6. reciprocal links or excessive link exchanging ("Link to me
and I'll link to you.") yaitu Link timbal balik atau tukar link yang
sangat banyak.
7. Buying or selling links yaitu search engine blog kita melakukan jual beli link untuk mengelabui dan manipulasi PageRank.

Begitulah dampak positif dan negatif dalam tukar link.
Buat webmaster silakan di tambahin bila ada yang kurang.
Semoga bermanfaat.

Cara Mudah Dan Cepat Merampingkan Alexa Rank

1:21 AM TUTORIAL BLOG No comments

Alexa Certified Traffic Ranking for tutorialbelajarblogger.blogspot.com

Alexa Rank adalah sebuah Website yang menyediakan informasi tentang Rangking atau peringkat suatu Web/Blog , semakin kecil nilai Web/Blog yang yang di berikan oleh Alexa maka semakin baik lah Web/Blog tersebut contoh nya seperti yang diraih oleh Google sebagai peringkat pertama pada Alexa

Jadi supaya blog populer dimata search engine dan membantu optimasi SEO agar mendapatkan pengunjung yang berlimpah yaitu salah satu nya dengan memperkecil nilai pada Alexa Rank .
Supaya Alexa Rank Blog cepat ramping dengan mudah yaitu diataranya sebagai berikut :

Update postingan 1 kali 2 hari dan sekurang nya 2 postingan dalam satu minggu , cara ini telah terbukti sangat ampuh untuk memperkecil nilai pada alexa rank

Instal Alexa Toolbar pada PC anda , cara ini sangat membantu untuk merampingkan Alexa rank pada blog karena Alexa melakukan penghitungan blog melalui input data dari Alexa Toolbar yang di gunakan pada browser internet di seluruh dunia.

Buat lah postingan tentang Alexa pada blog sebaik nya buatlah postingan lebih dari satu postingan karena cara ini menurut para pakar blog membuat artikel tentang Alexa Rank sangat membantu mempercepat untuk merampingkan blog dengan mudah

Supaya Alexa Rank blog dengan mudah di analisa sebaik nya pasanglah widget Alexa pada blog untuk mendapatkan kode widget nya kunjungi halaman INI dan cara pasang nya bisa sobat ketahui DISINI

Itulah cara yang saya coba untuk merampingkan Alexa Rank pada blog ini yang dengan cepat , semoga blog sobat mendapatkan nilai yang memuaskan dari Alexa Rank.

Membuat Widget Slide Panel With CSS and jQuery Effect

1:19 AM TUTORIAL BLOG No comments

Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

    <style type="text/css">
    /*
    Visit: http://tutorialbelajarblogger.blogspot.com/
    */
    #paneloktri {display:block;}
    #panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
    font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
    .tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
    .tombolpanel:hover {color:#ccc;}
    .tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
         $('.tombolpanel').click(function() {
              $('#panel').slideToggle('slow');
              $('.tombolpanel span.in').toggle();
         });
    });
    </script>
    <div id="paneloktri">
    <div id="panel">

    ... ISI KONTEN DI SINI ...

    </div>
    <div class="tombolpanel">
    <span class="in">Buka Panel</span>
    <span class="in" style="display:none;">Tutup Panel</span>
    </div>
    </div>

5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.

Selamat mencoba.!

Membuat Readmore circle

1:11 AM TUTORIAL BLOG No comments

Trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~

Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v
#kerusakan template bukan tanggung jawab saya.

Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD

Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*

Trik 1

Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
]]></b:skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)

#note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
#solusi:dicopas dua"a

<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More....</a>
</span>

lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Setelah Itu simpan dan lihat hasilnya~

Trik 2

CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html

<a expr:href='data:post.url'>Read More...</a>

dengan

<a href="http://alamatlink">namalink</a>

Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
(berlaku untuk semua style)

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a href="http://alamatlink">namalink</a></div></div>

kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
diantara kode body
#buat yang ga ngerti (<body> isi html </body>)
atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.

Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
misal

Warna merah:
Hexa :#ff0000

Rgba color: rgba(255,0,0,0.9);

Style1

DEMO

CSS

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;

}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

HTML

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Style 2

Demo

CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}

.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}

@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='data:post.url'>Read More</a>
</div>

Style3

CSS

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

HTML

<div class='loading'>
<p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p>
<span class='l-1'/>
<span class='l-2'/>
<span class='l-3'/>
<span class='l-4'/>
<span class='l-5'/>
<span class='l-6'/></div>

Style4

CSS

01.menureadmore1 {
02clear: both;
03margin:auto;
04background: black;
05font-size: 15px;
06color: #32BDE8;
07height: 80px;
08width: 80px;
09line-height: 80px;
10text-align: center;
11-webkit-transition: all 0.3s ease-in-out;
12-moz-transition: all 0.3s ease-in-out;
13-moz-border-radius: 200px;
14-webkit-border-radius: 200px;
15border: 8px solid 
16
17rgba(255, 255, 255, 0.8 );
18-webkit-box-shadow: 0 1px 4px 
19rgba(0, 0, 0, 0.5);
20-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
21-webkit-background-clip: padding-box;
22-moz-background-clip: padding-box;
23background-clip: padding-box;}
24
25.menureadmore1::before {
26content: "";
27position: absolute;
28width: 125px;
29margin: auto;
30height: 125px;
31border: 8px solid 
32rgba(255, 255, 255, 0.8 );
33-webkit-box-shadow: 0 1px 4px 
34rgba(0, 0, 0, 0.5);
35-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
36-webkit-border-radius: 12px;
37-moz-border-radius: 120px;
38border-radius: 120px;
39display: block;
40margin-top: -30px;
41margin-left: -30px;
42}
43
44.animasimenureadmore1 {
45position: absolute;
46width: 105px;
47margin: auto;
48height: 105px;
49border: 8px dotted rgba(50, 189, 232, 0.8 );
50-webkit-box-shadow: 0 1px 4px 
51rgba(0, 0, 0, 0.5);
52-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
53-webkit-border-radius: 12px;
54-moz-border-radius: 120px;
55border-radius: 120px;
56display: block;
57margin-top: -100px;
58margin-left: -20px;
59-moz-animation:spin5Pulse 2s infinite linear;
60-webkit-animation:spin5Pulse 2s infinite linear;
61}
62@-moz-keyframes spin5Pulse {
630% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
6450% {opacity:1;}
65100% { -moz-transform:rotate(-360deg); opacity:0;}
66}
67@-webkit-keyframes spin5Pulse {
680% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
6950% {opacity:1;}
70100% { -webkit-transform:rotate(-360deg); opacity:0;}
71}

HTML

<div class='menureadmore1'>
<a expr:href='data:post.url'>Readmore</a>
<div class='animasimenureadmore1'/>
</div>

Membuat Efek Zoom Pada Gambar Postingan Blog

1:04 AM TUTORIAL BLOG No comments

Tutorial Belajar Blog Terbaru | Tips Blog ,Membuat Efek Zoom Pada Gambar Postingan Blog - Kembali lagi aku ingin berbagi kepada sobat blogger bagaimana Cara Membuat Efek Zoom Pada Gambar Postingan blog . memang cara ini sudah begitu lama di terapkan oleh sobat blogger namun tak ada salahnya kalau aku mengulas lagi artikel Membuat Efek Zoom Pada Gambar Postingan agar sobat blogger yang masi pemula akan tahu seperti owner blogger ini pemula.

sebenarnya cara ini mudah sekali dan tak merepotkan kalian dengan tambahan kode sedikit maka efek zoom untuk gambar postingan kalian akan berubah total. dan ini menjadi kebanggaan yang unik bagi sobat blogger yang baru. nah kalian bisa lihat efek zoom di postingan bawah ini atau juga bisa lihat di blog

Bisa di lihat Contoh gambar di atas apabila sudah mencoba mengarah kan mouse arah gamabar , gambar akan memberikan efek zoom kalau kalian sudah melihat gambar diatas silahkan kita mulai tutorial membuat efek zoom pada gambar postingan:

1. silahkan langsung saja kalian login ke blogger.

2. silahkan menuju edit tamplate . jangan lupa untuk centang expant widget.

3. cari kode ]]</b;skin>

4. kalau sudah ketemu silahkan copy kede dibawah ini dan paste diatasnya.

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3) ;
-ms-transform: scale(1.2) ;
transform: scale(1.3) ;}

NB : kalau dalam template kalian ada kode .post img:hover sebelum kode yang kalian taruh alangkah baiknya kalau kalian hapus dulu.

aku harap postingan ini bermanfaat buat sobat blogger. semoga blog kalian akan semakin maju dari pada blog ini. semoga sukses danhappy blogging.

Membuat Animasi Loading Blog

1:03 AM TUTORIAL BLOG No comments

Membuat Animasi Loading Blogspot - Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, disini saya menggunakan script animasi loading dari DTE :] kemudian saya padukan dengan CSS3 Loading Animation dari Alessio Atzeni.
Script animasi Loading DTE :] menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda.

CSS3 LOADING ANIMATION LOOP

3 LOADING ANIMATION LOOP

MEMASANG ANIMASI LOADING KE BLOGSPOT
Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Langkah terakhir, pasang Script dibawah ini diatas tag </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog ini, selamat mengoprek :))

Cara Membuat menu Slide Info di Blog

12:51 AM TUTORIAL BLOG No comments

Berikut Ini Langkah - Langkah Membuat nya :

Login Ke Akun Blog Sobat
Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
Copas KOde Berikut Tepat Di Bawh Kode

Contact online

Slider

Popup Revenue

Abc

Profile

Total Visitor

Labels

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Thursday, April 3, 2014

Cara Mendaftarkan Blog di Webmaster Google

Buku Tamu Panel Slide Vertikal Jquery

Simple Javascript Floating Image, Object, Avatar, dan Lain-lain

Cara Membuat Efek Salju Natal DiBlog

Membuat kelelawar terbang di blog

Tips Memilih Alamat Blog Atau Nama Domain

Tuesday, April 1, 2014

Perbaikan Blogger Template HTML Editor

Panduan Cara mendaftarkan blog di technorati

Kriteria Blog Mendapat PageRank Tinggi

Dampak Positif Dan Negatif Tukar Link

Cara Mudah Dan Cepat Merampingkan Alexa Rank

Membuat Widget Slide Panel With CSS and jQuery Effect

Membuat Readmore circle

Membuat Efek Zoom Pada Gambar Postingan Blog

Membuat Animasi Loading Blog

Cara Membuat menu Slide Info di Blog

Search This Blog

Adsense

Popular Posts

Blog Archive

Blogroll

Contact online

Slider

Popup Revenue

Abc

Profile

Total Visitor

Labels

Thursday, April 3, 2014

Tuesday, April 1, 2014

Search This Blog

Social Profiles

Adsense

Popular Posts

Blog Archive

Blogroll