Cara Memperbaiki URL Yang di Cekal Robot.txt

Robot.txt adalah file yang terdapat dalam directory root dari suatu situs yang berguna untuk mengontrol halaman-halaman tertentu agar diindex oleh spider mesin pencari, atau untuk mengatur bagian-bagian tertentu supaya tidak diindex oleh search engine.

Terkadang Google dan beberapa mesin pencari lainya tidak bisa merayapi seluruh artikel yang telah kita buat. Hal ini sangat memperlambat munculnya artikel di mesin pencari. Tidak lain dan tidak bukan di sebabkan oleh kerusakan di Robot.txt.

Kita bisa mengetahui URL yang dicekal melalui Webmaster tools. Google akan mengirim pesan apa bila terdapat kerusakan yang cukup serius di blogg kita. Jika anda mendapat pesan peringatan segera perbaiki situs/blog anda.

Saya akan memberikan solusi bagaimana cara memperbaiki URL yang di cekal oleh Robot.txt.

1. Login ke Blogger.com
2. Pergi ke Setelan > Preferensi dan penelusuran
3. Pada kolom Perayap dan pengindeksan,
4. Klik Edit di bagian kanan robots.txt khusus.
5. Masukan kode dibawah ini


User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow:
Allow: /

Sitemap: http://v2tricktop.blogspot.com/feeds/posts/default?orderby=updated

catatan: "ganti warna biru dengan URL blogg anda"

6. Centang Ya untuk mengaktifkan.
7. Simpan perubahan.

Tunggu kurang lebih 2 sampai tiga hari untuk memulihkan situs anda.

Saya menyarankan anda 1 minggu sekali untuk memeriksa kesehatan situs anda di Webmaster tools untuk mengetahui ada tidak nya kerusakan di blogg anda.

Semoga " Cara Memperbaiki URL Yang di Cekal Robot.txt " dapat bermanfaat bagi anda dalam ilmu blogging anda. Terimakasih.

Cara Mempercepat Loading Blog

Cara Mempercepat Loading Blog - Lamanya loading suatu blog bisa dipengaruhi oleh 3 hal, yaitu: Koneksi si pengunjung, kemampuan server, dan ukuran serta desain halaman yang dibuka oleh browser.

Untuk hal yang pertama yaitu koneksi pengunjung blog, sudah jelas itu di luar kemampuan kita, sedangkan untuk hal yang kedua masih tergantung apakah anda menggunakan hosting sendiri atau tidak....

Kalau anda tidak punya akses ke server alias pengguna jasa gratisan, maka pasrah saja jika server berulah. Tapi satu hal yang pasti bisa kita atasi adalah poin ketiga, karena itu sepenuhnya bisa kita atur.

Perlu dicatat bahwa saya sendiri tidak melakukan semua proses di bawah ini. Untuk menjawab komentar dan menulis artikel saja saya sudah kepayahan....jadi belum ada waktu untuk  mengutak-atik semua komponen dan membuat rancangan ulang setiap elemen. Jadi saya bagi apa yang saya tahu, dan bukan apa yang saya lakukan saja ya? Harap maklum .... ^_^

Adapun cara terbaik untuk mempercepat loading blog adalah dengan membuat blog yang seringan mungkin. Semakin banyak komponen, dan semakin besar ukuran setiap komponen penyusun halaman, maka akan semakin lama waktu muat dari blog anda.

Singkat kata blog dengan desain warna putih dan tulisan apa adanya akan terbuka dengan sangat mudah. Yang menjadi masalah adalah; sangat sedikit orang yang ingin membuat blog yang apa adanya seperti itu.

Rata-rata blogger menjadikan blognya sebagai sarana mengekspresikan diri mereka. Jadi mari kita melihat apakah ada hal-hal yang bisa dilakukan setidaknya untuk mengurangi waktu loading dari blog kita sambil tetap berekspresi ria di blog.

Sekali lagi perlu diingatkan bahwa tips di bawah ini dibuat dengan asumsi bahwa kecepatan koneksi pengguna, dan kemampuan server yang mengakomodir blog kita tidak bermasalah. Tips di bawah ini juga dibatasi untuk pemakai blogspot saja. Untuk pengguna blog atau website yang self hosted, tentu lebih banyak opsi yang bisa ditempuh....

#1 Cara Mempercepat Loading Blog Dengan Mengurangi HTTP Request

Cara pertama untuk mempercepat loading dari blog adalah dengan membuat komponen blog seminimal mungkin. Untuk setiap komponen yang ada browser akan melakukan request yang memakan waktu loading.

Seumpamanya seperti ini, anda membutuhkan 300 barang dari sebuah supermarket, sedangkan sekali jalan pembantu anda cuma bisa membawa 30 barang. Itu berarti pembantu anda harus bolak balik sebanyak 10 kali untuk membawa semua barang. Seandainya anda hanya memesan 100 barang saja.... pasti pembantu bisa menyelesaikan pesanan anda dalam waktu yang jauh lebih singkat.

#2 Cara Mempercepat Loading Blog Dengan Memperkecil Ukuran Gambar

Ukuran gambar yang dimaksud di sini bisa dalam pixel maupun dalam kb. Jadi anda bisa mempekecil persentase pixels gambar dan menguploadnya atau sekedar menurunkan kualitas gambar dengan ukuran dimensi yang tetap (gambar jadi agak blur sedikit). Kedua teknik ini akan mengurangi ukuran file gambar.

#3 Mempercepat Loading Blog Dengan Melakukan CSS Image Sprites

Teknik ini adalah menggabungkan beberapa gambar dalam satu gambar dan membagi satu gambar itu dalam banyak area. Jadi dalam satu gambar bisa disuntikkan banyak link, yang mana sebelumnya dalam satu gambar cuma bisa ada satu link.

Image Sprites bisa digunakan dalam background, ataupun navigasi yang menggunakan gambar berederet.Penggunaan image sprites bisa mengurangi http request yang ada pada gambar di atas, karena yang sebelumnya harus meloading banyak gambar sekarang hanya perlu mendownload satu gambar. Ukuran bobot gambar bisa saja tidak berkurang, tapi berkurangnya http request yang mempercepat waktu loading blog anda.

#4 Mempercepat waktu loading dengan menggabungkan beberapa file

Misalnya blog anda memakai beberapa file style sheet, jika anda bisa menggabungkan beberapa file tersebut dalam satu file style sheet, dengan demikian kita bisa mengurangi http request. Teknik ini juga berlaku untuk script. Anda bisa menggabungkan beberapa script dalam satu file.... sehingga browser hanya sekali saja meloading semua script.

#5 Mempercepat waktu loading dengan memastikan semua style sheet berada pada head section

Dengan melakukan ini anda bisa membuat browser melakukan render dengan sangat cepat untuk setiap pengaturan style setiap komponen di dalam halaman tersebut.  Pengaturan style pada body bisa membuat render lebih lambat, atau bahkan jika style sheet ditaruh di bagian bawah halaman, bisa berakibat errornya tampilan, karena browser memblokir proses render untuk mencegah penataan ulang elemen jika style berubah.

#6 Mempercepat waktu loading dengan menaruh script pada bagian akhir halaman blog.

Berbeda dengan style sheet, script justru akan lebih baik jika ditaruh di bagian akhir dari halaman. Kenapa? Karena browser akan memblokir proses loading dari elemen halaman lain jika script ditaruh di antara elemen. Dengan menaruh script pada bagian akhir halaman, maka semua komponen sudah selesai dimuat saat browser akan mulai melakukan script loading.

Yang menjadi masalah adalah tidak semua script bisa ditaruh pada bagian bawah dokumen. Script yang berfungsi untuk memanggil elemen halaman, harus ditaruh pada posisi yang diinginkan. Untuk itulah beberapa pengembang mulai menggunakan script asinkron, sehingga halaman bisa tetap melanjutkan proses loading tanpa harus menunggu tuntasnya script asinkron.

#7 Hindari CSS Expression

Apa yang dimaksud dengan CSS expression? CSS ini digunakan jika anda ingin membuat CSS yang dinamis. Misalnya membuat tampilan warna background berubah setiap jamnya. CSS expression ini bisa membuat browser menganalisa halaman berulang kali. Bayangkan saja, hanya dengan mengayunkan pointer mouse menyeberangi halaman, browser anda bisa menganalisa halaman hingga ribuan kali. Jadi sebaiknya hindari atau gunakan one time expression untuk mengurangi intensitas kalkulasi yang dilakukan browser anda.

#8 Anda bisa mempercepat waktu loading blog dengan menggunakan CSS dan Javascript eksternal

Tujuan utama dari menggunakan CSS dan javascript external dan bukannya inline adalah untuk memanfaatkan cache oleh browser. Dengan menggunakan eksternal css dan javascript, maka browser akan melakukan cache sehingga browser tidak perlu lagi melakukan loading saat pengunjung ingin membuka halaman ini berkali-kali.

Sebaliknya, jika anda menggunakan yang inline, maka browser harus memuatnya setiap anda membuka lagi script tersebut. Satu lagi yang perlu diperhatikan adalah kemampuan dari server yang anda tempati melakukan host script tersebut....cari yang bisa diandalkan.

#9 Kompresi CSS dan Javascript bisa mengurangi waktu loading dari blog anda....

Anda bisa melakukan kompresi pada style sheet ataupun pada script untuk mempercepat loading blog anda. Anda tidak perlu melakukan ini secara manual, karena saat ini sudah sangat banyak tools yang bisa anda pakai. Jika anda ingin melakukan kompresi pada CSS silahkan kunjungi http://www.csscompressor.com/. Dan jika anda ingin melakukan kompresi pada javascript bisa memakai alat dari http://javascriptcompressor.com/ . Selain itu pastikan tidak ada javascript yang identik, jika ada maka hapus salah satunya....

#10 loading blog bisa semakin cepat jika komponen yang berat dihapus

Pada saat anda memuat halaman blog anda coba perhatikan log proses yang ditampilkan di bagian bawah jendela browser. Biasanya di situ akan diperlihatkan komponen apa yang sedang berusaha dimuat oleh halaman blog anda. Jika ada komponen yang menurut anda terlalu lama, maka anda punya 2 pilihan; apakah menghapusnya atau menggantinya dengan elemen serupa dari sumber yang lain

Pastikan saat anda melakukan tes ini menggunakan komputer yang bebas dari cache, karena cache bisa mempengaruhi kecepatan muatnya, sehingga anda tidak mendapatkan hasil yang sebenarnya. Tes juga blog anda dari koneksi berbeda. Anda bisa pergi ke warnet-warnet untuk melakukan ini. Tujuannya adalah agar anda bisa melihat apakah gangguan itu benar-benar karena masalah dari server komponen, atau memang ada koneksi yang bermasalah jika harus memuat komponen tersebut

#11 Optimisasi Gambar Untuk Menambah Kecepatan Loading Blog

Untuk mengelola gambar sendiri ada beberapa hal tambahan yang harus menjadi perhatian anda....:

1. Hindari src gambar yang kosong seperti src="" ini akan sangat merugikan performa blog anda
2. Hindari penggunaan skala pada gambar. Misalnya anda ingin menampilkan gambar dengan ukuran 400x300 pixels, maka sebaiknya gambar itu memang dibuat dalam ukuran demikian. Jangan mengupload gambar dengan ukuran 1200 x 800 pixels kemudian anda atur dengan fungsi width dan height menjadi 400 x 300 pixels
3. Yang cukup sulit adalah memastikan gambar dan komponen statis lainnya bernilai di bawah 25kb. Saya juga selalu melanggar batas ini.... ^_^
4. Kalau gambarnya sama, maka pastikan URL juga sama persis. Jangan mengupload gambar yang sama berulangkali sehingga setiap gambar punya URL berbeda. Kalau gambar sudah diupload sekali itu sudah cukup. Silahkan ambil URL gambar tersebut untuk dipakai berkali-kali

#12 Hindari tanda kueri dari komponen statis.....

Yang dimaksud dengan tanda kueri itu adalah tanda "?" pada URL komponen. Jika anda menggunakan suatu komponen yang statis, maka sebaiknya URL juga bersifat statis.

Ok, rasanya itu saja dulu, kalau nanti teringat ada hal yang perlu ditambahkan artikel ini akan diupdate. Teman-teman yang mau berbagi tips yang bisa mempercepat loading blog juga dipersilahkan memberi masukan.... Terima kasih sebelumnya.

Cara Setting Robot.txt Blogspot

Sebelum kita berbicara tentang robots.txt, yang perlu dan harus sobat tahu adalah tentang  Protokol Robots Exclusion.  Mungkin istilah ini jarang atau bahkan tumben sobat blogger dengar selama sobat blogger menekuni dunia website atau blog. Oleh karena itu, saya uraikan sedikit tentang  Protokol Robots Exclusion.

Pemilik situs Web atau blog menggunakan file / robots.txt untuk memberikan instruksi tentang situs/blog mereka untuk robot web, inilah yang disebut Protokol Robots Exclusion .

Protokol Robots Exclusion bekerja dengan cara seperti ini : Ketika sebuah robot akan mengunjungi URL dari sebuah blog, sebagai contoh http://lenterablogger.blogspot.com/welcome.html. Sebelum melakukan kunjungan tersebut, Robots Exclusion Protocol akan memeriksa terlebih dahulu http://lenterablogger.blogspot.com/robots.txt, dan menemukan

User-agent: *
Disallow: /

Kata "User-agent: *" artinya berlaku untuk semua robot dan kata "Disallow: /" memberi tahu robot untuk tidak mengunjungi beberapa halaman dari blog tersebut.

Ada dua pertimbangan penting yang harus kita pikirkan ketika menggunakan  /robots.txt yaitu :

1. Robot bisa saja mengabaikan / robots.txt sobat blogger.
2. File / robots.txt adalah file yang tersedia untuk umum.

Berikut ini contoh robots.txt beserta fungsinya masing-masing :

Memberikan pengecualian semua robot dari seluruh server

User-agent: *
Disallow: /

Membiarkan semua robot untuk melakukan Akses  di blog tersebut :

User-agent: *
Disallow:

Memberikan pengecualian terhadap semua robot dari bagian Server

User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /junk/

Memberikan pengecualian terhadap single robot

User-agent: BadBot
Disallow: /

Membiarkan single robot

User-agent: Google
Disallow:
User-agent: *
Disallow: /

Memberikan pengecualian terhadap semua file kecuali satu

User-agent: *
Disallow: /~joe/stuff/

Atau sobat blogger dapat secara eksplisit melarang semua halaman dianulir:

User-agent: *
Disallow: /~joe/junk.html
Disallow: /~joe/foo.html
Disallow: /~joe/bar.html

Apakah sobat blogger sudah bisa memahami penjelasan di atas? Mungkin sobat blogger malah tambah pusing. Jadi, lebih baik saya jelaskan langsung tentang cara menambahkan Custom robots.txt pada blog yang bernaung di bawah Paltform blogger.com

Cara Setting Custom robots.txt di blog :

• Login di http://www.blogger.com
• Pada menu Drop Down, Klik Settings dan Search preferences

• Lihat bagian Crawlers and indexing

• Klik kata Edit pada Custom robots.txt ?
• Di bagian Enable custom robots.txt content?, kasih tanda pada kolom "yes"

• Masukkan kode berikut

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow:
Allow: /

Sitemap: http://v2tricktop.blogspot.com/feeds/posts/default?orderby=updated

• Klik Save Changes

Tambahan :
Jangan lupa ganti http://v2tricktop.blogspot.com dengan URL blog sobat.
Kode yang saya gunakan untuk Custom robots.txt di atas merupakan kode yang biasa di terapkan di blog.  Kalau sobat blogger ingin menggunakan kode yang berbeda dengan saya (Lentera Blogger), Sobat bisa gunakan salah satu dari kode yang sudah saya jabarkan sebelumnya.

Itu adalah tutorial singkat tentang cara Setting Custom robots.txt di blogger. Semoga informasi ini berguna buat sobat blogger. Untuk mendapatkan informasi yang lebih banyak tentang robots.txt, sobat blogger bisa mengunjungi halaman berikut : http://www.robotstxt.org/robotstxt.html

Cara Memasang Widget IP Address Pengunjung Blog

Kali ini saya akan post tentang cara memasang widget IP Address pengunjung blog. Widget ini berfungsi untuk mengetahui IP Address komputer atau laptop yang sedang kalian pakai untuk membuka di blog yang sudah terpasang widget ini. Widget ini tentu sangat bermanfaat bagi pengunjung blog karena mereka bisa mengetahui IP Address. Widget ini tidak hanya menampilkan IP Address saja, tapi juga menampilkan jenis OS pengunjung, Browser yang digunakan pengunjung, Negara asal pengunjung.
Langkah - langkah pembuatannya:

1. Login Blogger
2. Masuk ke Tata Letak > Add Gadget
3. Pilih HTML/JavaScript
4. Paste kode widgetnya di bawah ini

                <a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>

                <a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

Semoga bermanfaat..

Cara Memasang Animasi Emoticon Gundam di Kotak Komentar

Disini saya akan share Animasi Emoticon Gundam Keren, barang kali di antara teman-teman yang lain ingin mendapatkan animasi emoticon gundam keren ini.

:b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: 

Cara Memasang Emoticon Gundam  Berguna di Kotak Komentar Blog,kalau berminat ikuti langkah-langkahnya

• Log in ke akun blog sobat.
• Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
• Letakkan kode berikut di atas kode </body>

Kodenya :

<script src='http://tateluproject.googlecode.com/files/Gundam%20emoticon.js'/>

4. Cari kode Biru seperti di bawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Bila sudah ketemu letakkan kode emoticon gundam di bawah ini tepat di bawah kode

  <p class='comment-footer'>

Kodenya :

<center><b><img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/14-1.gif' width='50'/>

:b:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/13-1.gif' width='50'/>

:c:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/12-1.gif' width='50'/>

:d:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/11-1.gif' width='50'/>

:e:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/10-1.gif' width='50'/>

:f:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/9-1.gif' width='50'/>

:g:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/8-1.gif' width='50'/>

:h:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/7-1.gif' width='50'/>

:i:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/6-1.gif' width='50'/>

:j:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/5-1.gif' width='50'/>

:k:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/4-1.gif' width='50'/>

:l:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/3-1.gif' width='50'/>

:m:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/2-1.gif' width='50'/>

:n:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/1-1.gif' width='50'/>

:o:

<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/15-1.gif' width='50'/>

:p:

</b></center>

Keterangan :

Angka 50 width=Lebar dan hight=Tinggi, bisa anda sesuaikan sendiri,makin besar angkanya makin besar pula animasi gundamnya.dan sebaliknya,

Semoga bermanfaat,,:)

Cara Mengganti Tulisan Older Post, Newer Post, Home dengan Gambar

Older post, newer post, dan home. Tulisan ini biasanya berada pada bawah komentar, seperti gambar disamping. Jika kita ingin mengganti tulisan tersebut dengan gambar caranya cukup mudah

Caranya cukup mudah, begini langkah-langkahnya :

Masuk ke Template - Edit Html - centang pada expand template widget.
Lalu carilah kode-kode seperti yang berwarna merah (utk mempermudah pencarian pencet ctrl+F di keyboard aja biar muncul search box)

<data:newerPageTitle/>
ganti kode diatas dengan
<img src='ganti kode gambar panah kiri'/>

<data:olderPageTitle/>
ganti kode diatas dengan
<img src='ganti kode gambar panah kanan'/>

<data:homeMsg/>
ganti kode diatas dengan
<img src='ganti kode gambar rumah'/>

tulisan yang bercetak miring diatas gantilah dengan kode gambar yang diinginkan.

berikut contoh-contoh kode yang dapat anda ambil

________________________________________

kodenya : http://remoxp.hostzi.com/homes.png

kodenya : http://remoxp.hostzi.com/homes.png

kodenya: http://remoxp.hostzi.com/PREV.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgaLI70_Rw1Jgc2ycAZKFPCO0JLu749ZUlnp63eKW84E3jvgcmHEFTSXhY1dnpH_Qa0GQaLuPfCz7QjmPwGenoAanCKlijvNFEN2Za2w00QrHyNiqhoo2zoAm04YtBXLm0GtHgzKGbyhs/s1600/Copy+of+mail_forward.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIk5-cfvhVCx_pJ7HL0BZ0V4eiAfigYW2SFXazdRIMkwB0Tt9YWFOkgKJcM6GpuCVLhaAwvpaEZm8W04izkts_egmNGJmK2SG2825DG8UEzOMcxPtmBrJTFMa9Z9NANxJYYc2YWUfwmRe/s1600/home.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGscVQCl9KW4IlrgPDgMKAN3lgduTSdghi3uEvRVdhJudSaEAQ-7-spNOzVmn1HXb4dSENZtWcGzcOqvXpUprabPyx1iMof6KpYelDlIwqnQzbyjOQe0zt5aFO3iAwNKkxAN7J04qg8NVn/s1600/mail_forward.png

yang semula seperti ini

berubah jadi seperti ini

 

semoga bermanfaat.  

 

 Sumber :  Zamedaku Share

Cara Memodifikasi Blogger Label Dengan CSS3

CSS - Bosen dengan tampilan label yang biasa saja. Sekarang kamu bisa menghilangkan rasa bosan itu dengan tampil baru dan keren. Dengan CSS3 tampilan blogger label milik kamu jadi keren. Dan berikut cara memodifikasi nya. Di desain oleh stylifyyourblog.

1. Login ke blog kamu.
2. Pastikan kamu sudah memasang label nya.
3. Template > Edit HTML > Cari kode ]]></b:skin>
4. Letakan kode di bawah ini tepat di atas kode nomor 3.

.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
  border: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #6ea23b;
  color: #fff;
  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
  background-color: #b7fa66;
  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label-size:after{
  content: " ";
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size:25px;
  border-top: 1px solid #769e42;
  border-right: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #7eac46;
  border-radius: 3px 7px 3px 0;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  position:absolute;
  top: 3px;
  right: -12px;
  z-index:-3;
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg);  /* FF3.5+ */
        -ms-transform: rotate(45deg);  /* IE9 */
         -o-transform: rotate(45deg);  /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
  background-color: #b7fa66;
  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
  content: " ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color: #fcfdf5;
  border: 1px solid #83ab52;
  border-radius:5px;
  box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
  padding:2px 5px;
  border: 1px solid #9e5c26;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f5bf8c;
  background-color: #ed943f;
  text-shadow: 0px 1px 1px #000;
  margin-left: 10px;
  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}

Simpan dan lihat hasilnya.

Cara Memasang Popular Post Dengan Sembilan Warna Yang Berbeda

CSS - Popular Post sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting.

1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

#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}

4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.

Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.

5. Simpan dan lihat hasilnya.

Cara Membuat Tombol Cantik Dengan CSS3

CSS - Kali ini saya akan membahas bagaimana cara membuat tombol cantik, keren dengan CSS3 untuk blog. Mungkin sebagian dari kamu pingin membuat sebuah tombol yang menuju ke beberapa link dan kamu pingin tombol itu keren dan cantik. CSS by Lateshack.

1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode yang dicetak tebal di atas.

.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhda_CVSELTCVvUufjVQW8Xmp441mzs_KAXE7t2g_6nqeZaMdAksnrgqZlK7g8d02CoPcKgyGTPfGNMGjYhzQPHEDc4a7GeuAF9H3A9uw-gK6AXIG6cVRlilVHNLjkXWDoiXZXmj68fPgM/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }

Simpan Template.

Dan sekarang untuk membuat tombolnya. Disini ada beberapa ukuran ada yang besar, sedang dan kecil. Jadi pilih salah satu satu.

UKURAN BESAR

<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>

UKURAN SEDANG

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

UKURAN KECIL

<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>

Ganti kata LINK dengan URL yang dituju dan kata LINK NAME dengan nama yang kamu inginkan.

Cara Membuat Widget Tombol Sharethis di Blog

Kali ini saya akan membagikan artikel tentang cara membuat tombol share di blog/web, tapi saya tidak akan membagikan scripnya melainkan teman-teman atau sobat yang membuatnya sendiri,, jika sobat berminat untuk membuat tombol share sendri silahkan ikuti langkah-langkah berikkut ini :


1. Klick link berikut ini : sharethis.com
2. Pada halaman home atau beranda di halaman itu akan muncul gambar-gambar
web/blog dan pilih sesuai web/blog yang sobat pakai
3. Setelah itu sobat akan suguhkan dengan gambar atau widget share bermacam-macam karakter dan silahkan pilih sesuai keinginan sobat
4. Klick Go untuk memasangnya
5. Selesai


Selamat mencoba...

Cara Membuat Recent Post Dengan Efek Gambar Berputar

Cara membuat recent post dengan efek gambar berputar ketika kursor kita tujukan pada gambar ini sangat mudah dalam aplikasinya. Tapi syaratnya setiap anda posting jangan lupa untuk memasang gambar yang sesuai dengan tema postingannya, agar tampilan pada recent post kelihatan fresh. Widget ini dilengkapi pula dengan tanggal posting dan jumlah comment. Widget ini sangat cocok untuk anda yang pingin mempercantik tampilan blognya. Untuk mengetahui live demonya silahkan klik di sini, dan berikut tutorialnya:

1. Login ke blog anda >> Klik TATA LETAK / LAY OUT >> ADD GADGET

2. Copi kode di bawah ini

<style type="text/css" media="screen"> <!-- /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ #helperblogger-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #helperblogger-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #helperblogger-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUHQwV-MKHwyShp6UfeYFlV12bxKbKVLoBZSV-crcecb3px6HgkHQI0w33WKazYdgtcP_8bRjiTKECq5-ZAgWE1c7RyrL6n_AOozoEo-5w5hf4HnSKqcZX-aVpOVU2xOoE4lwKiOa-8U/s1600/helperblogger.com-post.jpg) repeat-x; border: 1px solid #ddd; } #helperblogger-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #helperblogger-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #helperblogger-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #helperblogger-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ --> </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgximr3DStc2JXkZ3I7zL1rFRyb-g_PKZ1jC6nCRUoVd5aZ5xZoEulDD7zTyniKZnzySgWF1ILpsvaw3TBuDN3LK8l7QpgRT1Whdek5cH5bbSVidf-w_6vviA1fLKUFM_74ohHFnzeKCYU/s1600/no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgximr3DStc2JXkZ3I7zL1rFRyb-g_PKZ1jC6nCRUoVd5aZ5xZoEulDD7zTyniKZnzySgWF1ILpsvaw3TBuDN3LK8l7QpgRT1Whdek5cH5bbSVidf-w_6vviA1fLKUFM_74ohHFnzeKCYU/s1600/no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgximr3DStc2JXkZ3I7zL1rFRyb-g_PKZ1jC6nCRUoVd5aZ5xZoEulDD7zTyniKZnzySgWF1ILpsvaw3TBuDN3LK8l7QpgRT1Whdek5cH5bbSVidf-w_6vviA1fLKUFM_74ohHFnzeKCYU/s1600/no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgximr3DStc2JXkZ3I7zL1rFRyb-g_PKZ1jC6nCRUoVd5aZ5xZoEulDD7zTyniKZnzySgWF1ILpsvaw3TBuDN3LK8l7QpgRT1Whdek5cH5bbSVidf-w_6vviA1fLKUFM_74ohHFnzeKCYU/s1600/no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgximr3DStc2JXkZ3I7zL1rFRyb-g_PKZ1jC6nCRUoVd5aZ5xZoEulDD7zTyniKZnzySgWF1ILpsvaw3TBuDN3LK8l7QpgRT1Whdek5cH5bbSVidf-w_6vviA1fLKUFM_74ohHFnzeKCYU/s1600/no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.URL BLOG ANDA.blogspot.com/"; limitspy=4; intervalspy=4000; </script> <div id="helperblogger-widget"> <script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script> </div>

Lalu paste pada kolom yang sudah ada, dan silahkan beri judul sesuai selera anda.

3. Ubah tulisan URL BLOG ANDA dengan URL anda sendiri

4. Klik save lalu lihat hasilnya. Selamat mencoba

Cara Memasang Widget Share Lintas Me

 
Cara Memasang Widget Share Lintas Me | Cara Pasang Tombol Share Lintas Me | Cara Memasang Lintaskan Lintas Me | Cara Memasang Widget Melintas Lintas Me.

Salahsatu teknik seo tentunya adalah mensubmit link url kita ke berbagai link yang memberikan submit link kita sehingga setidaknya url kita diketahui beberapa pengunjung dan tertarik untuk berkujung ke blog kita.

Tidak salah kali ini disini menggunakan link lintas.me.

Sesuai dengan topik kita kali ini adalah   Cara Memasang Widget Share Lintas Me  di blog. sebagai blogger pastinya sudah mengenal situs www.Lintas.me Bukan, salah satu situs direktori artikel terbesar di Indonesia, yang Sekarang berganti nama menjadi Lintas.me setelah sebelumnya memakai nama Lintasberita.com. 

Situs direktori artikel ini sangat banyak sekali di gunakan oleh para webmaster dan blogger, pada umumnya untuk membantu mendatangkan pengunjung ke blognya, karena dengan kita bisa men-submit artikel blog kita ke situs lintas.me, artikel di blog kita jadi akan semakin mudah untuk menempati peringkat teratas di hasil penelusuran atau pencarian google, karena memang situs lintas.me ini mempunyai Page Rank google yang cukup tinggi. Baik, sobat farhan di bawah ini farhan sudah persiapkan langkah-langkah atau cara memasang widget lintaskan di blog | lintas.me, di simak baik-baik ya.

1. Sobat Buka http://www.lintas.me/widget.

2. Sobat klik "Get LintasMe Widget". 

3. Selanjutnya sobat isi formulir dengan E-mail dan URL blog sobat, setelah itu Klik "GET IT!".

4. Langkah selanjutnya sobat tinggal copy pastekkan kode widget ke notepad.


5. Masuk ke blogger.

6. Pilih Tata Letak.

7. Add Gadget.

8. Pilih HTML/JavaScript.

9. Lalu sobat copy pastekkan kode yang tadi di notepad ke dalam box "konten" (HTML/JavaScript gadget).

10. Klik "Save" dan Selesai.

Cara Membuat Banner Animasi Gif

Cara Membuat Banner Animasi Gif - Iklan yang berberntuk banner memang lebih menarik dari pada iklan yang berbentuk text. Apalagi jika iklan banner tersebut bergerak / animasi semakin menarik para pengunjung melihat dan mengkliknya.

Banner beranimasi Gif mempunyai banyak kelebihan di bandingkan banner animasi Flash karena ukurannya tidak terlalu berat ditambah lagi ada Tag Alt yang semakin membuat iklan tersebut SEO friendly.

Ada banyak cara untuk membuat banner animasi Gif seperti menggunakan Photoshop & EasyGifAnimator tetapi pada tutorial ini saya akan menggunakan aplikasi pembuat Gif yang ada di internet.

Beberapa situs untuk Membuat Banner Animasi Gif :

• http://picasion.com
• http://www.loogix.com
• http://www.createagif.net
• http://gickr.com

Cara Membuat Banner Animasi Gif :
1. Siapkan beberapa gambar

2.Buka salah satu situs di atas ( Saya memakai http://picasion.com/ )
3.Browse Image / Gambar yang anda buat tadi

Keterangan:

Size: untuk mengatur ukuran gambar
Speed : Untuk mengatur kecepatan Slide Show

4.Klik "Create Animation"
5.Kemudian akan muncul tampilan

Keterangan:

Link to this page: Link untuk halaman gambar
Direct Link: Link tempat gambar
HTML code for Blog/Web: Kode HTML untuk menampilkan gambar di Blog/web
BBCode for forum/board: Kode untuk menampilkan gambar di forum

6.Selesai

Cara Membuat Tombol Back Top Keren V2

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

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

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
  
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

• Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Kalo loe gak punya gambar tombolnya ni gw sediain gan, ada yang animasi sama standar tinggal dipilih aja.

Animasi :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeu52avCIXl0UzWF8acuZvbCvjKLG_psTJlQUjAAtClctc7XkOl0VQvzbeaFEfNOH3YJVdPLBjWf_zU2MScS5Ytyo_ilupwpAVqGXEPi2cV0PrMggs74M6B3j9VO-xGNV_iV4wPDSTcHtg/s1600/back+to+top10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNF1YBQeWfTk8OEbpJZr3nj3zr0fMK2Ux-YNpX_cuRUysqbpWBMA8FF-YqWuGJEd3InBP3t6nQwXWtX2d0NVxlUpTBw2s-q927SDfLPWdJ18C7tvbbdQc7rc5APYVi-btNjLTgicottaj9/s1600/back+to+top4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtzN1ktzOZ3MVPW3pgoABscwd2v-wTnIUqseRGNgmx-aEoRHwk29YdNb4yPFGdZ2FlV1ulNJbPI3ljtm1SeuwYcgs78DVmjBqRIjVMSQGjCIQxE5T751rgtRtgFr0IYcsejJrBfSxeaRY/s1600/back+to+top7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8JPexGayxDrCUPYDdhS-4WO__uB961YR6bWhO8becXLWmxvn1J1NaZM6hiKx8KMFfSwtkoBH447nD3NGyDKCOD7TemrLGGaAGiye4AtmUAfBq8_GcdiZTlyxwc7ytpmtQGyLkBDXeR43U/s1600/back+to+top9.gif

Standar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIp6UaC60hyphenhyphenaynaQuoRtLAJV8ULkJo656IsJmiQxjQol8peuJTsF_of_CDvl0MMo4uxPeE8ZaHkZvMKFHvMmjIsEnRlEBH8HxTpkXUXwNeb37UtZCjeim-qjIz7tPE3EE0CZeAeWroqChN/s1600/back+to+top13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqUP5h0z_DfOfqEXlGSnLiXxBLux_NCfjPQ14uHMm46dpMDdPPdoP5M_ynyOHAsihHBLFpZVun5z0Vzc0bG0O5PI6YloggmmEPhYxPWp3vSIDfn14Y4867_vptBtzJRELZriLfhfkLNuh/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPXjl51x0YDyZkrP3zN_IJySOBfSHmlyITTy8pcChhqU-OlRvFa1mTweagH_ag27kLSY41P32xngGhd7vJQIstcwgUhgFVCQVSLnQnNP1roxoOGZ5vQgs_EzhbiuD12ORQB1haaAhBez3j/s1600/back+to+top15.png

Beres gan, gampang kan cara membuat tombol back to top di blognya. Ow ya kalo loe mau rubah kecepatan scrollnya bisa di edit aja scrollduration, semakin besar angkanya semakin lambat gerakan ke atasnya gan.


Sekian dulu yang bisa gw share tentang cara membuat tombol back to top, semoga bermanfaat