Efek Animasi Page Loading Untuk Blog

Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efekanimasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Untuk itu blog saya akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, dengan memberikan efek animasi loading maka akan terlihat begitu indah dan keren ketika Anda atau pengunjung blog sedang berada pada blog Anda lalu berpindah halaman maka efek animasi loading page ini akan terlihat. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIwO43KCEVt6bekNGezXmhepnFXmCs-ecqakJ6McC5fphDka23mkDbFJqo4AspQtV-KutXHY4zmKdtbUz44y01b3OESQEHrRf9G1DDt1nEEWznydm5di0bHkMO0IwwQjKaTUaMphq7mYiQ/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. Setelah itu cari kode </body>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini di
http://preloaders.net.- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah ini.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkziSIx7CCc76_v3OB_9zudPhRVJi7y7MxCuEWlWSBTZ8WU2oTkcGC_mzWBKkOuX6HfEXHCiLI9u16_XfWFUEZg2510TYIDKFsnMjHAlofEB3UdObv_UdLDsDFsvHq78QC0r8ZhsQVdA/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVJ6BLifVqxV9R28chmMb2FIzHs8NOYQR5P0FkSa5DY6FcGt1HCYghr4dJRr9vfT-5iw-FUK3GxYNeDIlBm0wRdxwLrLoQn9GeYIXH33qSM6t3faZGZIfhZv58jCUkAlfzYR9mnzWots/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDEuMBc-Gju6n9Se-4egGi-EyPt2xK_2hh88WqBZBOtUlcEwAy1jl0lbV9UHNL3XlWouLAA1vzlz_JBf9Z3R05JfOwYw5nzg71rYb0jJSlaKAlNxS0nv28QrfZBBQjcCZfhNihyphenhyphenyIbG8/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTznr3HGUUoB6ndnNIJXX7-5I7t04uKcSHufSKwjkLhSfI1hbB93djQ1yFS_o7XP1dvYwAqVI63hblpC9dzVImx9uukWrT4ypaIS3K4hhpOaXLU7MlScY2jYKJGsqkotEgzwRGXYc5Fs/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChO1iyzHige2qiDsJiXV7kzlRCpBi-HgOai7EmNE2F5QbSjjAofKqYYJYKv98r2dL11IQUrTlhq5Gu1lM-M0DkfVH9ZnRt3uC5484nVew7tHhliSf1mdmYnP60OAMvQrkihefhUSjweo/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CePD00uyAUfFncge2edYpKdywx88gkgNXx9RIqcW2CSlPwBcRYVNmH_1CcLqvZ5O2YhRa9lSNqfBcpBEzGicBWWAmeSKQ8v-nJJMM0pZKGaJx7lvpMJbFiHvmW-LZ-Re5FD0wr5hjqY/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiZn5BuT-cD2U4GNV5PxrpevgiCU5696q0KvnHZVb6-SOF0n0FYil_dISQkPEWS_ueeiPo6LwXSuSPhwYYgl8I6WdN43DoAyIovE9bqGx4XfMtT4eIHKmsSjX3e_9FduqvRIpQlaZCYE/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWMSUqKT42CjXwsmvSkudwM9McfCiwLKu8jHV1erGNZQqXAX0iqnnAvQewhaOXsIfDV-AA_kvbgTeSVhH-Zd1RxRo2XZy_8WRbOIw1YmBTnt_KN4HqpNhaqn1M4388ZR5aPoWiMOiWw4/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDWib8wLFeq0oZQ74IbifLsGAxtzC3BmSTBslHuE5I4DK9Jl1vmZbVZesLMhZVQIRgXYZOaHVUTS1dMd0ubbg-vgu2kDuOPmWJT4Tlarq1yCfpY7x9qe6e7woXpCnHBccqNefjHajGwvI/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYemN7oM-VBqg0dpO-7KZLBRQvw3fxVqsnocDZeDwvprabvvie0XiQt4H88wFlUHfq8kqu5WHMitnPfhK1g9b6Iv4NW4UJy6wHJyW2QU7U0ll5_IhCTHlTYdAqOA2IzwOukdgRLDwJfo/w128-h40-no/Loading10.GIF



Sekian artikel mengenai Cara Membuat Efek Animasi Page Loading di Blog. Kurang lebihnya mohon maaf.

Semoga Bermanfaat

"Aku Cinta Kamu” dalam 50 Bahasa

Ada banyak hal yang dapat Anda lakukan untuk memastikan bahwa pasangan Anda merasa dicintai, tetapi cara terbaik adalah dengan mengatakan 3 kata sederhana: “Aku cinta kamu”. Di dunia ini ada banyak bahasa, karena itu ada banyak juga cara untuk mengucapkan “Aku cinta kamu”. Di sini Anda dapat menemukan kalimat “Aku cinta kamu” dalam 50 bahasa yang berbeda. Setiap bahasa ini terdengar berbeda dan juga tergantung pada intonasi pengucapannya, karena itulah, kalimat “Aku cinta kamu” bisa terdengar lembut atau bahkan agak kasar. Ungkapan “Aku cinta kamu” memiliki panjang yang berbeda dalam bahasa lain. Ada yang hanya satu kata atau lebih dari empat atau lima kata. Setiap orang akan senang mendengar kata-kata “Aku cinta kamu” dari seseorang yang dekat dengan dia. Mengungkapkan kalimat “Aku cinta kamu” untuk pasangan Anda dalam 50 bahasa yang berbeda pasti akan membuat dia bahagia.

Berikut ini adalah beberapa terjemahan yang paling umum dari kalimat “Aku cinta kamu” dalam 50 bahasa yang berbeda :

1. Dalam bahasa Bulgaria : Obicham te

2. Dalam bahasa Belarusia: Ya tabe kahayu

3. Dalam bahasa Bangladesh – Aamee tuma ke bhalo aashi

4. Dalam bahasa Cina Kanton – Ngo oiy ney a

5. Dalam bahasa Catalan (Catalonia, Spanyol) : T`estimo

6. Dalam bahasa Cheyenne (Indian) : Ne mohotatse

7. Dalam bahasa Chichewa (Negara-negara di selatan benua Afrika) : Ndimakukonda

8. Dalam bahasa Creole (perpaduan bahasa Spanyol, Perancis dan Prtugis yang banyak digunakan di selatan benua Amerika) – Mi aime jou

9. Dalam bahasa Kroasia : Volim te

10. Dalam bahasa Ceko (Cekoslowakia) : Miluji te

11. Dalam bahasa Denmark : Jeg elsker dig

12. Dalam bahasa Belanda : Ik hou van jou

13. Dalam bahasa Esperanto (negara-negara eks Rusia) : Mi amas vin

14. Dalam bahasa Estonia : Ma armastan sind

15. Dalam bahasa Ethiopia : Afgreki`

16. Dalam bahasa Farsi (Iran, Tajikistan, Afganistan dan Uzbekistan) : Doset daram

17. Dalam bahasa Tagalog (Filipina) : Mahal kita

18. Dalam bahasa Finlandia : Mina rakastan sinua

19. Dalam bahasa Perancis : Je t`aime / Je t`adore

20. Dalam bahasa Jerman : Ich liebe dich

21. Dalam bahasa Yunani : S`agapau

22. Dalam bahasa Gujarat (India) : Hoo thunay prem karoo choo

23. Dalam bahasa Hawai : Aloha wau ia oi

24. Dalam bahasa Yahudi : Ani ohev otah (diucapkan kepada perempuan) dan Ani ohev et otha (diucapkan kepada laki-laki)

25. Dalam bahasa Hindi (India) : Hum tumhe pyar karte hae

26. in Hmong (Tiongkok) : Kuv hlub koj

27. Dalam bahasa Hopi (Suku Indian di Amerika) : Nu` umi unangwa`ta

28. Dalam bahasa Hongaria : Szeretlek

29. Dalam bahasa Islandia : Eg elska tig

30. Dalam bahasa Inggris : I love you

31. Dalam bahasa Irlandia : Taim i`ngra leat

32. Dalam bahasa Italia : Ti amo

33. Dalam bahasa Jepang : Aishiteru

34. Dalam bahasa Kanada : Naanu ninna preetisuttene

35. Dalam bahasa Korea : Sarang heyo

36. Dalam bahasa Latin : Te amo

37. Dalam bahasa Latvia : Es tevi miilu

38. Dalam bahasa Melayu / Indonesia : Aku cinta kamu

39. Dalam bahasa Cina Mandarin : Wo ai ni

40. Dalam bahasa Navaho (suku Indian di Amerika) : Ayor anosh`ni

41. Dalam bahasa Norwegia : Jeg elsker dek

42. Dalam bahasa Persia : Doo-set daaram

43. Dalam bahasa Pig Latin (bahasa Inggris prokem) : Lay ovlay ouyay

44. Dalam bahasa Polandia : Kocham Ciebie

45. Dalam bahasa Portugis : Eu tea mo

46. Dalam bahasa Rumania : Te ubesk

47. Dalam bahasa Rusia : Ya tebya liubliu

48. Dalam bahasa Serbia : Volim te

49. Dalam bahasa Slovenia : Ljubim te

50. Dalam bahasa Spanyol : Te quiero / Te amo

Jadi, sekarang Anda dapat membuat kejutan kepada pacar/istri/suami, atau ibu, ayah, sahabat Anda atau kepada siapa pun. Ucapan “Aku cinta kamu” akan membuat orang yang Anda cintai merasa jauh lebih baik. Mengungkapkannya dalam 50 bahasa yang berbeda akan membuatnya merasa bahwa Anda benar-benar mencintainya. Ingatlah bahwa untuk menjaga cinta tetap hidup, Anda harus memberikan beberapa kejutan kecil setiap hari dan tidak ada kejutan yang lebih baik daripada mengatakan “Aku cinta kamu” kepadanya.

Semoga Bermanfaat

Code Warna Untuk Blog

Cara Sembunyikan Fans Page FB diBlog

Haiii sobat....
Kalian mau fans page kalian seperti yang digambar. Ikuti cara berikut ini..

Dari dashboard > design > edit HTMLMenggunakan fungsi find, (ctrl + F), cari kod </head>Copy dan paste kod di bawah SEBELUM kod </head>

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

Langkah 2:

Dari dashboard > design > page element > add a gadget > HTML/javascript
Copy dan paste kode di bawah dalam ruangan HTML/javascript yang anda telah buka

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://hasbi-94.blogspot.com/2014/10/cara-sembunyikan-fans-page-fb-diblog.html">Tutorial Here</a></span></div></div>
   

Nah, ganti tulisan berwarna merah dengan URL fan page kamu..

Save dan Lihat hasilnya...

^ Semoga Bermanfaat ^

Cara Membuat Persentase pada Scrollbar di Blog

Masih di Variasi Blogger share Cara Membuat Persentase pada Scrollbar di Blog cekidot , Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

silahkan log in terlebih dahulu di blog sobat ,

klik Template >> 

klik Edit HTML >> 

kemudian cari kode ]]></b:skin> 

Kemudian Copy Paste kode Script dibawah ini dan simpan di atas kode tadi

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: rgb(51, 51, 51);
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: rgb(51, 51, 51);
}

Jika sudah Cari kembali kode </head> dan simpan kode dibawah ini sesudah kode tadi

<div id='scroll'></div>

satu langkah lagi silahkan cari kode </body> dan simpan kode script dibawah ini di atas kode tadi

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template dan lihat hasilnya , Semoga bermanfaat.

Memasang Tombol Animasi Sosial Bookmark

Banyak blogger yang suka memasang tombol sosial bookmark. Ya, karena widget ini berupa animasi dengan bentuk setengah lingkaran. Tombol ini akan memunculkan shorcut ke beberapa sosial bookmark yang lagi trend saat ini semacam : Pinterest, Google+, Facebook, Twitter, Tumblr dan juga Email. 

Jika anda ingin mengetahui "penampakan" hasilnya, silakan klik tombol "view demo" di bawah ini atau bisa liat diblog saya :

Cara menambahkan Tombol Animasi Sosial Bookmark ke Template Blogger

Langkah 1. Login ke akun blogger anda >> template >> EDIT HTML (centang expand widget template).

Jangan lupa untuk selalu melakukan backup Template anda lebih dulu sebelum melakukan perubahan apapun pada script html template. 

langkah 2. Cari kode berikut ini : (Gunakan tombol Ctrl+F untuk membantu pencarian)

</body>

Langkah 3. Copy dan Paste kode berikut ini tepat di atas / sebelum kode </body>

<div class='shr_ss shr_publisher'>

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://pasartokoonline.blogspot.com/2012/06/pasang-tombol-animasi-sosial-bookmark.html'>Animated Social Gadget</a> - <a href='http://pasartokoonline.blogspot.com/'>Blogger And Wordpress Tips</a></small>

<!-- End Shareaholic Sassy Bookmarks script -->

Step 4. Preview hasilnya dulu, jika tidak ada masalah, Simpan /Save Template.

Jika langkah -langkah tersebut dilakukan dengan benar, dan tidak ada crash dengan script lain pada template bawaan anda, seharusnya tombol animasi sosial bookmark sudah bisa muncul pada blog anda.

Selamat mencoba

Cara Mengganti Kursor untuk Blog

Mau ganti kursor berbeda?
Silahkan dipilih dibawah ini.

Death Note Series
Bleach Series
K-On! Series
Gundam Series
Naruto Series

dan lain sebagainya.. dipilih saja di websitenya..
cara memasangnya :

1. Pilih kursor yang di suka.

2. Copy code seperti contoh


3. Dasbor > rancangan > elemen > tambah gadget

4. Pate code cursor

5. Simpan dan lihat hasilnya