Tutorial Cara Membuat Efek Loading Warna Warni di Blog

Efek loading warna warni di blog - Pada kesempatan kali ini saya akan membuat blog kalian lebih keran dengan memberikan tutorial cara membuat efek loading di blog. Sebelum kita lanjut ke tutorialnya sebaiknya kalian mengetahui terlebih dahulu apa itu efek loading di blog. Loading blog merupakan suatu proses membuka suatu halaman di blog tersebut. Pada default blog tidak memiliki efek loading, namun karena berjalannya waktu sekarang banyak tamplate yang memiliki fitur efek loading pada template blognya. Ada banyak macam efek loading blog seperti rubik, circle, animasi dan masih banyak lagi. Namun tampilan seperti itu menurut pandangan saya membuat blog kita seakan melambat. Di sini saya akan membagikan efek loading warna warni di blog yang tidak membuat blog kita terasa lembat. Pernahkah kalian mengunjungi blog arlina design dan kalian melihat loading di bawah navigasi atas, itulah bentuk efek loading warna warni di blog. Bagaiaman cara membuatnya ? simak tutorial di bawa

Cara Membuat efek loading warna warni di blog

1. Pertama kalian masuk ke dashbord blogger > tamplate > edit html.
2. Setalah masuk di dalam menu edit html kalian masukan script ini dibawah kode <b:skin><![CDATA[

.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::before,myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:&#39;&#39;}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::before{right:50%}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Baca Juga : Tips Menentukan Niche Blog Yang Tepat Untuk Pemula

3. Setelah itu kalian masukan kode di bawah terserah mau di pasang di mana

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
  <form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>

4. Masukan kode di berikut tepat di atas lode </body>

<script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

5. Setelah itu kalian bisa save tamplate, dan lihat hasilnya.

Itulah ulasan mengenai cara membuat efek loading warna warni di blog, apabila ada yang eror saat menyimpan silahkan cek dan ulangi lagi step by step, apabila loading blog warna warni tidak muncuk silahkan lihat apa ada yang salah dalam penempatan kode html.

Cara Posting Artikel di Blog

Membuat artikel.- Membuat artikel di blog mungkin sangatlah mudah. Namun bagi anda yang masih pemula mungkin ada yang belum mengerti caranya. Setelah anda berhasil membuat blog langkah selanjutnya yaitu anda membuat artikel dan di posting di blog anda. Untuk cara atau langkah-langkah memposting artikel akan saya bahas di artikel ini.

Blog tanpa ada artikel ibaratkan mobil tanpa ada roda. Nggak akan bisa jalan blog tanpa ada artikel atau postingan. Di artikel sebelumnya saya sudah membahas mengenai panduan lengkap cara mengganti template. Setelah anda mengganti template dengan template yang cocok bagi anda anda. Langkah selanjutnya yaitu membuat artikel atau memposting sebuah postingan di blog anda. Ada pun caranya akan saya jelaskan berikut ini.

Cara Posting Artikel di Blog

Untuk kali ini saya akan membahas mengenai bagaimana cara membuat postingan di blog berplatform blogger. Untuk yang wordpress mungkin lain waktu akan saya buatkan artikelnya. Langsung saya simak langkah demi langkah berikut ini :

- Log in terlebih dahulu ke blog anda
- Klik tulisan entri baru yang berada dibawah tulisan semua postingan
- Kemudian anda akan di alihkan ke sebuah halaman
- Setelah itu anda bebas menulis apa saya.
- Setelah anda selesai menulis silahkan anda publikasi. Klik tulisan publikasi di samping tulisan simpan.
- Done

Jika anda kurang jelas atau kurang mengerti, anda bisa melihat screenshot yang sudah saya sediakan di bawah ini.

entri baru

ketik artikel dan publikasi

Mungkin itu saja yang bisa saya jelaskan mengenai cara posting artikel di blog. Semoga bermanfaat dan jangan lupa untuk meninggalkan komentar. Kritik dan saran sangat saya harapkan demi berkembangnya blog ini.

Cara Menambah Gambar Di Postingan Blogger Dengan Mudah

Menambahkan Gambar.- Gambar merupakan salah satu hal yang penting dalam pembuatan artikel. 1 gambar mewakili 1000 kalimat. Oleh karna itu di setiap artikel sebaiknya diberikan minimal satu gambar. Menambahkan gambar dalam artikel blog sebenarnya sangatlah mudah dilakukan. Tapi tidak ada salahnya membuat artikel ini. Bisa saja bagi pemula yang baru awal awal membuat blog belum mengerti caranya. Maka dari itu di artikel ini saya akan membahas bagaimana cara menambah atau memasukan sebuah gambar di dalam artikel atau postingan blog.

Sebelum saya membahas bagaimana caranya. Perlu kalian ketahui. Gambar pada postingan blog memiliki peran yang sangatlah penting. Selain dapat memperkaya atau memperindah artikel, cernyata gambar juga dapat mempengaruhi pengunjung blog. Karena gambar yang kita taruh di artikel bisa jadi terindex di google image.  Dari situlah kemungkinan kita bisa meningkatkan pengunjung blog kita. Selain itu Gambar juga dapat menambahkan keyword atau menaruh keyword dan dari gambar kita dapat memperjelas apa yang kita tulis. Tapi itu tergantung gambar kita relevan sama artikel atau tidak.

Menambah gambar di artikel

Upload gambar di artikel blogger

Sebelum anda menambahkan gambar di artikel. Sebaiknya anda mempersiapkan dulu gambar yang ingin di upload di artikel tersebut. Dan jangan lupa untuk mempersiapkan artikelnya juga. Berikut caranya :

1. Log in terlebih dulu di blogger.
2. Siapkan artikel yang ingin di tambah gambar atau anda bisa coba dulu dengan membuat entri baru untuk coba coba.
3. Siapkan gambar yang ingin di unggah atau bisa cari di google terlebih dahulu.
4. Masuk ke pengeditan artikel atau entri baru.
5. Klik icon yang berada di kanan tulisan link yang berbentuk seperti foto dan jika di sentuh lama akan muncul tulisan insert image.
6. Kemudian klik tulisan pilih file.
7. Cari file foto atau gambar yang akan anda tambahkan pada artikel tersebut dan klik gambar tersebut kemudiang open.
8. Tunggu beberapa saat untuk upload gambarnya.
9. Setelah selesai upload gambar silahkan di klik gambarnya hingga muncul garis biru di sekeliling gambar dan klik add selected.
10. Selesai.

Jika anda kurang jelas dengan penjelasan yang saya berikan. Anda dapat melihat screenshot di bawah ini agar lebih jelas dan paham.

entri baru atau edit artikel 

pilih icon yang di kotak merah

klik pilih fie

klik gambar dan open

klik gambar dan add selected

Kesimpulan

Unuk menambahkan gambar di artikel sebaiknya anda melihat sebearapa penting gambar yang akan anda tambahkan. Jika memang gambar tersebut sangatlah penting dan bergua maka tambahkan saja. Jika tidak terlalu penting jangan di tambahkan. 

Setiap artikel sebaiknya ada satu gambar. Maka dari itu jika menurut anda artikel yang anda buat tidak memerlukan gambar tapi tetap saja sebaiknya anda kasih satu gambar. Agar lebih terlihat berkualitas artikelnya.

Selain itu kira harus memperhatikan seberapa besar file foto tersebut. Jika terlalu besar maka akan memberatkan blog kita dan akan berakibatkan blog lambat serta menghabiskan banyak kuota untuk mengakses blog. Salah satu cara yang bisa kita lakukan yaitu mengubah format gambar yang JPG menjadi PNG. Untuk tutorial anda bisa membaca artikel di blog ini tentang cara mengubah format foto JPG menjadi PNG.

Mungkin itu saja yang bisa saya berikan kali ini. Semoga bermanfaat dan jangan lupa baca artikel yang lainnya. Jika artikel ini bermanfaat anda bisa share ke teman-teman anda atau jika ada kritik dan saran yang membangun bisa berikan di kolom komentar atau bisa hubungi saya dengan cara melihat di lama kontak.

Cara Menambahkan Pesan Komentar Di Blogger

Pesan di atas komentar blog.- Menambahkan pesan komentar di atas kolom komentar adalah salah satu hal yang wajib kita lakukan. Di blog besar besar lainnya juga menaruh pesan komentar kepada para pembaca. Karena dengan itu, kita bisa menginformasikan kepada para pembaca di blog kita yang ingin memberikan komentar terkait peraturan yang sudah diberikan dalam blog kita. Selain itu, juga beguna sebagai peringatan agar pengunjung blog tidak memberikan komentar yang mengandung unsur negatif maupun spaming komentar.

Membuat pesan komentar di atas kolom komentar blog sebenarnya cukup gampang. Tapi, masih saya jumpai di forum blogger indonesia yang bertanya mengenai cara memberikan pesan komentar tersebut. Oleh sebab itu artikel ini saya buat dengan tujuan untuk membantu teman teman sekalian yang belum mengerti cara memasangnya. Terutama bagi pemula yang belum lama main blog.

Cara Menambahkan Pesan Komentar Di Blogger

Memasang pesan komentar di blog yang berplatform bologger tidaklah sulit. Karena pihak blogger sudah memberikan fitur tersendiri. Jadi disini saya akan memeberikan tutorial cara memasangnya. Tidak menggunakan script apa pun. Jadi bisa dibilang cukup mudah. Simak tutorialnya berikut ini.

1. Log in di blogger
2. Klik opesi Setelan
3. Setelah itu muncul list di bawahnya
4. Klik Tulisan [Pos, Komentar, dan Berbagi]
5. Scroll kebawah dan cari tulisan [Pesan Formulir Komentar]
6. Klik tulisan tambahkan di bagian kanannya
7. Isi pesan komentar 
8. Kemudian simpan setelan di bagian pojok kanan atas
9. Selesai

Jika anda kurang paham dengan tutorial yang hanya tulisan di atas anda bisa lihat sreenshot di bawah ini yang sudah saya sediakan. Tingal di pahami betul betul caranya.

menambahkan pesan komentar

Kesimpulan

Intinya memasang pesan komentar di atas kolom komentar blog itu sangatlah penting dan akan membantu blog kita untuk kedepannya. Mungkin itu ssaja yang bisa saya jelaskan mengenai bagaimana cara memasang atau menambahkan pesan komentar di atas kolom komentar blog. Jangan lupa untuk selalu suport saya dan membantu dengan meninggalkan komentar yang relavan. Jangan lupa membaca artikel yang lain.

Cara Mudah Memasang Widget Di Blog

Memasang widget di blog.- Salah satu properti yang sangatlah penting di blog yaitu widget. Widget merupakan sebuah alat atau fitur yang di pasang pada web atau blog yang biasanya terbentuk dari beberapa kode. Widget biasanya berupa atau berbentuk gambar, flash, video, ataupun yang lainnya. Kita bisa mendapatkan berbagai macam widget yang sudah disediakan situs-situs di google. Biasanya berupa sebuah script (kode).

Setelah anda mendapatkan widget yang ingin anda gunakan anda tinggal memasang pada template blog anda.  Untuk memasang widget pada blogger ada berbagai cara yang bisa kita gunakan. Di artikel kali ini saya akan menjelaskan mengenai bagaimana cara menambahkan atau memasang widget di blog.

Bila anda belum mengerti cara memasang template di blog silahkan baca artikel di blog ini terlebih dahulu mengenai panduang lengkap cara mengganti template blog. Jika anda sudah mengerti cara memasang template, baru anda melanjutkan membaca artikel ini. Bila belum baca artikel yang saya rekomendasikan dulu. Karena sama sama penting, dan memasang widget merupakan langkah selanjutnya setelah anda memasang template.

Cara Mudah Memasang Widget Di Blog

Menambah widget di blog

Mungkin bagi para pakar blogger atau yang sudah berpengalaman di blog untuk memasang widget sudahlah sangat paham. Tapi disini saya berniat membantu para blogger pemula yang mungkin belum mengerti cara memasang widget. Dulu saya awalnya juga tidak mengerti bagaimana caranya tapi akhirnya juga mengerti caranya.

Sebelum saya menjelaskan cara pemasangannya. Widget pada blogger sebenarnya ada dua jenis. Yaitu:

• widget bawaan dari blogger
• widget tambahan menggunakan script (kode)

Dari kedua jenis widget tersebut pemasangannya berbeda cara. Oleh sebab itu, saya disini akan memberi dua cara pemasangan widget. Pertama pemasangan widget bawaan dari blogger, kedua pemasangan widget tambahan menggunakan script (kode)

Memasang widget bawaan dari blogger

Mungkin ada yang belum tau widget bawaan dari blogger itu seperti apa. Ada berbagai macam widget yang sudah disediakan oleh pihak blogger, diantaranya = entri yang diunggulkan, penelusuran blog, profil. arsip blog, header halaman dan lain-lain.

Untuk widget yang akan menjadi contoh, saya menggunakan widget pengikut google+. Berikut tutorialnya :

1. Buka blog anda
2. Klik opsi tata letak
3. Cari tulisan tambahkan gadget kemudian diklik
4. Scroll kebawah dan cari widget pengikut google+
5. kemudian klik tanda plus (+) warna biru
6. Jika ingin diatur lebar dan tingginya silahkan klik tulisan tentukan secara manual dan masukan ukuran lebar tingginya widget dalam bilangan pixel
7. Jika sudah maka klik simpan
8. Selesai

Bila anda belum jelas silahkan lihat screenshot yang saya sediakan dibawah ini. Jika anda ingin menggunakan widget yang lain silahkan karna yang di atas hanya sebagai contoh. Anda bisa mencoba-coba menggunakan widget yang lainnya.

pemilihan penempatan widget

pemilihan widget

pengaturan widget

Memasang widget blogger dengan script (kode)

Selain kita bisa memasang widget dengan widget yang sudah disediakan blogger. Kita juga bisa memasang widget yang lainnya menggunakan script (kode). Yang akan saya contohkan kali ini yaitu dengan menggunakan sciript like box facebook. Langsung saja ikutin langkah-langkah berikut ini :

1. Log in terlebih dahulu di blogger
2. Klik opsi tata letak
3. Cari tulisan tambahkan gadget kemudian diklik
4. Cari tulisan HTML/JavaScript
5. Klik icon plus (+) di sebelah kanan tulisan
6. Kasih judul [Like Fandpage]
7. Copy script yang sudah saya sediakan di bawah
8. Paste di kolom konten
9. Ganti Tulisan yang saya warnain biru menjadi fandpage anda
10. Kemudian simpan
11. Selesai

Contoh

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.8";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/indobloogger/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/indobloogger/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/indobloogger/">Indoblogger</a></blockquote></div>

Bila kurang jelas anda bisa melihat screenshot yang saya sediakan dibawah ini. Script like fandpage facebook di atas hanya sebagai contoh saja. Anda dapat menggunakan script yang lain. Untuk mendapatkan script yang lain anda bisa mencarinya di google.

memilih widget dengan memasuk html/javascript

memasukan script

Untuk pemasangan widget yang menggunakan script, anda juga bisa memasang widget tersebut langsung di script templatenya. Tapi caranya sedikit rumit dan berisiko template mengalamai error atau lain sebagainya. Jika anda ingin mencoba memasang widget pada script templatenya langsung. Jangan lupa untuk membackup template terlebih dahulu.Untuk cara backup template anda bisa membaca artikel di blog ini mengenai cara backup template.

Kesimpulan

Memasang widget merupakan salah satu hal yang wajib dimengerti oleh setiap blogger. Mungkin hal ini hanya hal sepele tapi sangat beguna sekali. Dalam menambahkan widget sebaiknya kita melihat fungsi widget tersebut. Jika tidak terlalu penting sekali sebaiknya jangan dipasang. Contohnya blog-blog besar seperti blog nya mas sugeng hanya memasang widget yang sangat sedikit. Intinya lihat seberapa penting widget yang akan anda pasang diblog anda. 

Cara Backup Template Blogger Dengan Mudah 2017

Cara membackup template blogger.- Sesuai judul artikelnya, saya akan membahas mengenai bagaimana cara back up template blogger. Back up template atau men-cadangkan template merupakan salah satu hal yang harus dilakukan sebelum anda melakukan pengeditan pada template anda, apa lagi yang bersangkutan dengan script HTML. Karena agar ketika anda melakukan pengeditan anda bisa mengembalikan seperti semula jika terjadi kesalahan yang fatal ketika proses pengeditan dan berakibat pada tampilan blogger.

Dikarenakan hal ini merupakan hal yang sudah wajib bagi para blogger agar tidak terjadi apa-apa kedepannya, maka sebaiknya kita mengerti bagaimana cara back up template blogger. Mungkin hal ini sangat sederhana tapi sangatlah penting untuk blog kita, terutama untuk yang masih sering optimasi SEO onpage. Selain itu ketika kita ingin mengganti template blog sebaiknya juga backup templatenya terlebih dahulu. Karena kita tidak bisa menjamin template yang akan anda ganti itu mengalami error atau tidak. Bila ada yang belum mengerti cara mengganti template silahkan baca artikel panduan lengkap cara mengganti template blogger di blog ini.

Mungkin hal ini sering terjadi dikalangan blogger indonesia. Saya pribadi pernah mengalami template error dan sudah susah payah pengeditannya tapi saya lupa back up templatenya. Alhasil saya harus mengulangi pengeditan dari awal. Agar pengalaman saya tidak terulang lagi oleh saya sendiri dan oleh blogger indonesia. Maka saya membuat artikel ini dengan tema cara membackup atau mencadangkan template blog.

cara membackup template blogger

Backup template blogger

Untuk cara membackup template sebenarnya ada dua cara yang bisa kita lakukan. Cara pertama yaitu dengan download template kita atau cadangkan template kita dengan menggunakan fitur yang sudah tersedia atau dengan cara copy paste script template blog kita.

Kedua cara itu bisa kita lakukan tapi menurut saya yang paling mudah yaitu dengan cara mendowolodnya. Tapi disini akan menjelaskan dengan cara download saja. Karena agar lebih mudah dan praktis. Berikut cara backup template blog :

1. Log in terlebih dahulu ke akun blogger anda
2. Kemudian klik pada pengaturan TEMA (bagi yang menggunakan bahasa indonesia)
3. Setelah itu cari tulisan backup/ pulihkan yang terletak di pojok kanan atas
4. Selanjutnya silahkan download tema anda dan tunggu proses download selesai
5. Selesai

Cukup gampangkan dan simpel cara backup templatenya. Jika ada yang kurang paham bisa lihat screenshot di bawah ini.

cara membackup template blogger

cara membackup template blogger

Kesimpulan

Mungkin cara ini sangatlah sederhana dan mudah. Tapi sangat bermanfaat dan berguna bila mana anda ingin melakukan pengeditan template pada blog anda. Oleh sebab itu lakukan cara ini sebelum anda mengedit template agar tidak terjadi hal yang tidak diinginkan. Mungkin itu yang bisa saya bagi saat ini mengenai cara backup template blogger.