Kesulitan mengonversi simbol dan aksara khusus HTML menjadi kode? Pada awalnya, bagi Anda mungkin gampang untuk menuliskan simbol-simbol di dalam artikel alasannya Anda sanggup melaksanakan itu dengan cara copy-paste simbol ke lembar editor. Tapi kalau Anda sedang berurusan dengan file berupa HTML, simbol-simbol tersebut tidak sanggup ditempelkan begitu saja di dalamnya. Anda harus mengonversinya menjadi isyarat numerik/HEX:
| Simbol | Kode |
|---|---|
| ☮ | ☮ |
| ♔ | ♔ |
| ★ | ★ |
| ✉ | ✉ |
| ♫ | ♫ |
Text Symbols yaitu situs yang sempurna untuk mengatasi dilema aksara simbolis yang tidak lazim: http://text-symbols.com/tools/escape-chars/
Bukan hanya generator aksara khusus, di situ juga terdapat tautan-tautan menuju daftar simbol, Text Art dan semua hal yang berafiliasi dengan teks. Untuk mengonversi simbol, pertama-tama masuk dulu ke halaman daftar simbol (klik di sini).
Salin salah satu simbolnya, lalu tempelkan di formulir Enty pada Enty Tool (klik di sini). Terakhir klik tombol Convert. Nah, Sekarang simbol sudah berhasil dikonversi menjadi isyarat ☻
Banyak hal yang menciptakan Saya terkesan dengan hasil-hasil karyanya. Siapa yang tidak merasa kagum dengan ini:
``````¶0````1¶1_```````````````````````````````````````
```````¶¶¶0_`_¶¶¶0011100¶¶¶¶¶¶¶001_````````````````````
````````¶¶¶¶¶00¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0_````````````````
`````1_``¶¶00¶0000000000000000000000¶¶¶¶0_`````````````
`````_¶¶_`0¶000000000000000000000000000¶¶¶¶¶1``````````
```````¶¶¶00¶00000000000000000000000000000¶¶¶_`````````
````````_¶¶00000000000000000000¶¶00000000000¶¶`````````
`````_0011¶¶¶¶¶000000000000¶¶00¶¶0¶¶00000000¶¶_````````
```````_¶¶¶¶¶¶¶00000000000¶¶¶¶0¶¶¶¶¶00000000¶¶1````````
``````````1¶¶¶¶¶000000¶¶0¶¶¶¶¶¶¶¶¶¶¶¶0000000¶¶¶````````
```````````¶¶¶0¶000¶00¶0¶¶`_____`__1¶0¶¶00¶00¶¶````````
```````````¶¶¶¶¶00¶00¶10¶0``_1111_`_¶¶0000¶0¶¶¶````````
``````````1¶¶¶¶¶00¶0¶¶_¶¶1`_¶_1_0_`1¶¶_0¶0¶¶0¶¶````````
````````1¶¶¶¶¶¶¶0¶¶0¶0_0¶``100111``_¶1_0¶0¶¶_1¶````````
```````1¶¶¶¶00¶¶¶¶¶¶¶010¶``1111111_0¶11¶¶¶¶¶_10````````
```````0¶¶¶¶__10¶¶¶¶¶100¶¶¶0111110¶¶¶1__¶¶¶¶`__````````
```````¶¶¶¶0`__0¶¶0¶¶_¶¶¶_11````_0¶¶0`_1¶¶¶¶```````````
```````¶¶¶00`__0¶¶_00`_0_``````````1_``¶0¶¶_```````````
``````1¶1``¶¶``1¶¶_11``````````````````¶`¶¶````````````
``````1_``¶0_¶1`0¶_`_``````````_``````1_`¶1````````````
``````````_`1¶00¶¶_````_````__`1`````__`_¶`````````````
````````````¶1`0¶¶_`````````_11_`````_``_``````````````
`````````¶¶¶¶000¶¶_1```````_____```_1``````````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶0_``````_````_1111__``````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶01_`````_11____1111_```````````
`````````¶¶0¶0¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1101_______11¶_```````````
``````_¶¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0¶0¶¶¶1````````````
`````0¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1`````````````
````0¶0000000¶¶0_````_011_10¶110¶01_1¶¶¶0````_100¶001_`
```1¶0000000¶0_``__`````````_`````````0¶_``_00¶¶010¶001
```¶¶00000¶¶1``_01``_11____``1_``_`````¶¶0100¶1```_00¶1
``1¶¶00000¶_``_¶_`_101_``_`__````__````_0000001100¶¶¶0`
``¶¶¶0000¶1_`_¶``__0_``````_1````_1_````1¶¶¶0¶¶¶¶¶¶0```
`_¶¶¶¶00¶0___01_10¶_``__````1`````11___`1¶¶¶01_````````
`1¶¶¶¶¶0¶0`__01¶¶¶0````1_```11``___1_1__11¶000`````````
`1¶¶¶¶¶¶¶1_1_01__`01```_1```_1__1_11___1_``00¶1````````
``¶¶¶¶¶¶¶0`__10__000````1____1____1___1_```10¶0_```````
``0¶¶¶¶¶¶¶1___0000000```11___1__`_0111_```000¶01```````
```¶¶¶00000¶¶¶¶¶¶¶¶¶01___1___00_1¶¶¶`_``1¶¶10¶¶0```````
```1010000¶000¶¶0100_11__1011000¶¶0¶1_10¶¶¶_0¶¶00``````
10¶000000000¶0________0¶000000¶¶0000¶¶¶¶000_0¶0¶00`````
¶¶¶¶¶¶0000¶¶¶¶_`___`_0¶¶¶¶¶¶¶00000000000000_0¶00¶01````
¶¶¶¶¶0¶¶¶¶¶¶¶¶¶_``_1¶¶¶00000000000000000000_0¶000¶01```
1__```1¶¶¶¶¶¶¶¶¶00¶¶¶¶00000000000000000000¶_0¶0000¶0_``
```````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000010¶00000¶¶_`
```````0¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000¶10¶¶0¶¶¶¶¶0`
````````¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000000010¶¶¶0011```
````````1¶¶¶¶¶¶¶¶¶¶0¶¶¶0000000000000000000¶100__1_`````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶000000000000000000¶11``_1``````
`````````1¶¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000¶11___1_`````
``````````¶¶¶¶¶¶0¶0¶¶¶¶¶¶¶0000000000000000¶11__``1_````
``````````¶¶¶¶¶¶¶0¶¶¶0¶¶¶¶¶000000000000000¶1__````__```
``````````¶¶¶¶¶¶¶¶0¶¶¶¶¶¶¶¶¶0000000000000000__`````11``
`````````_¶¶¶¶¶¶¶¶¶000¶¶¶¶¶¶¶¶000000000000011_``_1¶¶¶0`
`````````_¶¶¶¶¶¶0¶¶000000¶¶¶¶¶¶¶000000000000100¶¶¶¶0_`_
`````````1¶¶¶¶¶0¶¶¶000000000¶¶¶¶¶¶000000000¶00¶¶01`````
`````````¶¶¶¶¶0¶0¶¶¶0000000000000¶0¶00000000011_``````_
````````1¶¶0¶¶¶0¶¶¶¶¶¶¶000000000000000000000¶11___11111
````````¶¶¶¶0¶¶¶¶¶00¶¶¶¶¶¶000000000000000000¶011111111_
```````_¶¶¶¶¶¶¶¶¶0000000¶0¶00000000000000000¶01_1111111
```````0¶¶¶¶¶¶¶¶¶000000000000000000000000000¶01___`````
```````¶¶¶¶¶¶0¶¶¶000000000000000000000000000¶01___1````
``````_¶¶¶¶¶¶¶¶¶00000000000000000000000000000011_111```
``````0¶¶0¶¶¶0¶¶0000000000000000000000000000¶01`1_11_``
``````¶¶¶¶¶¶0¶¶¶0000000000000000000000000000001`_0_11_`
``````¶¶¶¶¶¶¶¶¶00000000000000000000000000000¶01``_0_11`
``````¶¶¶¶0¶¶¶¶00000000000000000000000000000001```_1_11
Sumber https://www.dte.web.id/```````¶¶¶0_`_¶¶¶0011100¶¶¶¶¶¶¶001_````````````````````
````````¶¶¶¶¶00¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0_````````````````
`````1_``¶¶00¶0000000000000000000000¶¶¶¶0_`````````````
`````_¶¶_`0¶000000000000000000000000000¶¶¶¶¶1``````````
```````¶¶¶00¶00000000000000000000000000000¶¶¶_`````````
````````_¶¶00000000000000000000¶¶00000000000¶¶`````````
`````_0011¶¶¶¶¶000000000000¶¶00¶¶0¶¶00000000¶¶_````````
```````_¶¶¶¶¶¶¶00000000000¶¶¶¶0¶¶¶¶¶00000000¶¶1````````
``````````1¶¶¶¶¶000000¶¶0¶¶¶¶¶¶¶¶¶¶¶¶0000000¶¶¶````````
```````````¶¶¶0¶000¶00¶0¶¶`_____`__1¶0¶¶00¶00¶¶````````
```````````¶¶¶¶¶00¶00¶10¶0``_1111_`_¶¶0000¶0¶¶¶````````
``````````1¶¶¶¶¶00¶0¶¶_¶¶1`_¶_1_0_`1¶¶_0¶0¶¶0¶¶````````
````````1¶¶¶¶¶¶¶0¶¶0¶0_0¶``100111``_¶1_0¶0¶¶_1¶````````
```````1¶¶¶¶00¶¶¶¶¶¶¶010¶``1111111_0¶11¶¶¶¶¶_10````````
```````0¶¶¶¶__10¶¶¶¶¶100¶¶¶0111110¶¶¶1__¶¶¶¶`__````````
```````¶¶¶¶0`__0¶¶0¶¶_¶¶¶_11````_0¶¶0`_1¶¶¶¶```````````
```````¶¶¶00`__0¶¶_00`_0_``````````1_``¶0¶¶_```````````
``````1¶1``¶¶``1¶¶_11``````````````````¶`¶¶````````````
``````1_``¶0_¶1`0¶_`_``````````_``````1_`¶1````````````
``````````_`1¶00¶¶_````_````__`1`````__`_¶`````````````
````````````¶1`0¶¶_`````````_11_`````_``_``````````````
`````````¶¶¶¶000¶¶_1```````_____```_1``````````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶0_``````_````_1111__``````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶01_`````_11____1111_```````````
`````````¶¶0¶0¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1101_______11¶_```````````
``````_¶¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0¶0¶¶¶1````````````
`````0¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1`````````````
````0¶0000000¶¶0_````_011_10¶110¶01_1¶¶¶0````_100¶001_`
```1¶0000000¶0_``__`````````_`````````0¶_``_00¶¶010¶001
```¶¶00000¶¶1``_01``_11____``1_``_`````¶¶0100¶1```_00¶1
``1¶¶00000¶_``_¶_`_101_``_`__````__````_0000001100¶¶¶0`
``¶¶¶0000¶1_`_¶``__0_``````_1````_1_````1¶¶¶0¶¶¶¶¶¶0```
`_¶¶¶¶00¶0___01_10¶_``__````1`````11___`1¶¶¶01_````````
`1¶¶¶¶¶0¶0`__01¶¶¶0````1_```11``___1_1__11¶000`````````
`1¶¶¶¶¶¶¶1_1_01__`01```_1```_1__1_11___1_``00¶1````````
``¶¶¶¶¶¶¶0`__10__000````1____1____1___1_```10¶0_```````
``0¶¶¶¶¶¶¶1___0000000```11___1__`_0111_```000¶01```````
```¶¶¶00000¶¶¶¶¶¶¶¶¶01___1___00_1¶¶¶`_``1¶¶10¶¶0```````
```1010000¶000¶¶0100_11__1011000¶¶0¶1_10¶¶¶_0¶¶00``````
10¶000000000¶0________0¶000000¶¶0000¶¶¶¶000_0¶0¶00`````
¶¶¶¶¶¶0000¶¶¶¶_`___`_0¶¶¶¶¶¶¶00000000000000_0¶00¶01````
¶¶¶¶¶0¶¶¶¶¶¶¶¶¶_``_1¶¶¶00000000000000000000_0¶000¶01```
1__```1¶¶¶¶¶¶¶¶¶00¶¶¶¶00000000000000000000¶_0¶0000¶0_``
```````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000010¶00000¶¶_`
```````0¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000¶10¶¶0¶¶¶¶¶0`
````````¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000000010¶¶¶0011```
````````1¶¶¶¶¶¶¶¶¶¶0¶¶¶0000000000000000000¶100__1_`````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶000000000000000000¶11``_1``````
`````````1¶¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000¶11___1_`````
``````````¶¶¶¶¶¶0¶0¶¶¶¶¶¶¶0000000000000000¶11__``1_````
``````````¶¶¶¶¶¶¶0¶¶¶0¶¶¶¶¶000000000000000¶1__````__```
``````````¶¶¶¶¶¶¶¶0¶¶¶¶¶¶¶¶¶0000000000000000__`````11``
`````````_¶¶¶¶¶¶¶¶¶000¶¶¶¶¶¶¶¶000000000000011_``_1¶¶¶0`
`````````_¶¶¶¶¶¶0¶¶000000¶¶¶¶¶¶¶000000000000100¶¶¶¶0_`_
`````````1¶¶¶¶¶0¶¶¶000000000¶¶¶¶¶¶000000000¶00¶¶01`````
`````````¶¶¶¶¶0¶0¶¶¶0000000000000¶0¶00000000011_``````_
````````1¶¶0¶¶¶0¶¶¶¶¶¶¶000000000000000000000¶11___11111
````````¶¶¶¶0¶¶¶¶¶00¶¶¶¶¶¶000000000000000000¶011111111_
```````_¶¶¶¶¶¶¶¶¶0000000¶0¶00000000000000000¶01_1111111
```````0¶¶¶¶¶¶¶¶¶000000000000000000000000000¶01___`````
```````¶¶¶¶¶¶0¶¶¶000000000000000000000000000¶01___1````
``````_¶¶¶¶¶¶¶¶¶00000000000000000000000000000011_111```
``````0¶¶0¶¶¶0¶¶0000000000000000000000000000¶01`1_11_``
``````¶¶¶¶¶¶0¶¶¶0000000000000000000000000000001`_0_11_`
``````¶¶¶¶¶¶¶¶¶00000000000000000000000000000¶01``_0_11`
``````¶¶¶¶0¶¶¶¶00000000000000000000000000000001```_1_11
Buka tautan Life is Be U to Full pada sebuah Iframe dengan atribut name="frame-1".
<a href="//latitudu.blogspot.com" target="frame-1">Life is Be U to Full</a> <iframe name="frame-1" src=""></iframe>Jika sebuah situs tidak tampil pada iframe, itu artinya situs tersebut tidak memperbolehkan Anda untuk membuka halamannya di dalam iframe.
Beberapa waktu kemudian ada keluhan lewat email wacana tombol balas komentar di blogger yang tidak berfungsi. Disinggung dari artikel www.bungfrangki.com yang berjudul Komentar Blog Error, Tombol Reply Not Working, Apa Solusinya?. Di sini saya mencoba untuk mengecek ternyata memang betul bahwa tombol balas pada komentar Blogger tidak berjalan sebagaimana mestinya. Nah di sini saya galau kok bisa? Kemungkinan ada perubahan di blogger yang tidak saya ketahui.
Bagi teman yang mengalami hal ini di blognya khususnya untuk template yang sudah dioptimasi, Sobat dapat mengembalikan beberapa meningkatkan secara optimal tersebut ke semula ibarat pada postingan ini Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger. Makara bagi yang sebelumnya melaksanakan tips Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger dapat kembalikan ibarat semula.
Yang perlu teman lakukan yaitu mengembalikan semua aba-aba yang pernah dioptimasi ke semula.
Kode pembuka head
Ganti aba-aba ini
Dengan aba-aba ini
Kode untuk menyembunyikan CSS Reset
Ganti aba-aba ini
Dengan aba-aba ini
Ganti aba-aba ini
Dengan aba-aba ini
Kode epilog head
Ganti aba-aba ini
Dengan aba-aba ini
Kode epilog body
Ganti aba-aba ini
Dengan aba-aba ini
Namun teman tidak perlu mengganti aba-aba ini :
Dan ini
Sisanya diganti semua. Jika sudah mengembalikan CSS dan JavaScript bawaan blogger, Selanjutnya teman dapat melaksanakan hal ini untuk memperbaikinya.
Pertama buka Blogger > Klik sajian Tema > Klik tombol Edit HTML dan cari aba-aba ini :
Ganti markup tersebut dengan versi ini
Selanjutnya, tambahkan aba-aba CSS ini sebelum </head>
Jika sudah, klik tombol Simpan tema dan untuk melihat alhasil dapat mencoba menekan tombol balas komentar di blognya.
Dengan melaksanakan hal di atas, seharusnya sudah dapat teratasi dan juga komentar dari Google+ dapat teman aktifkan kembali.
Menurut saran saya salah satu solusi terbaik yaitu dengan beralih ke sistem komentar Disqus, ibarat pada postingan Pembaruan Komentar Disqus dengan Onclick Event. Karena Disqus mempunyai banyak kelebihan jikalau dibandingkan dengan sistem komentar bawaan Blogger, namun semua itu kembali ke pilihan sobat.
Oke, sekian untuk postingan kali ini, biar bermanfaat dan wassalam.
Bagi teman yang mengalami hal ini di blognya khususnya untuk template yang sudah dioptimasi, Sobat dapat mengembalikan beberapa meningkatkan secara optimal tersebut ke semula ibarat pada postingan ini Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger. Makara bagi yang sebelumnya melaksanakan tips Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger dapat kembalikan ibarat semula.
Yang perlu teman lakukan yaitu mengembalikan semua aba-aba yang pernah dioptimasi ke semula.
Kode pembuka head
Ganti aba-aba ini
<head>Dengan aba-aba ini
<head>Kode untuk menyembunyikan CSS Reset
Ganti aba-aba ini
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin> <style type='text/css'>Dengan aba-aba ini
<b:skin><![CDATA[Ganti aba-aba ini
</style>Dengan aba-aba ini
]]></b:skin>Kode epilog head
Ganti aba-aba ini
</head><!--<head/>-->Dengan aba-aba ini
</head>Kode epilog body
Ganti aba-aba ini
<!--</body>--></body>Dengan aba-aba ini
</body>Namun teman tidak perlu mengganti aba-aba ini :
<HTML>Dan ini
</HTML>Sisanya diganti semua. Jika sudah mengembalikan CSS dan JavaScript bawaan blogger, Selanjutnya teman dapat melaksanakan hal ini untuk memperbaikinya.
Pertama buka Blogger > Klik sajian Tema > Klik tombol Edit HTML dan cari aba-aba ini :
<b:includable id='comment_picker' var='post'>...</b:includable>Ganti markup tersebut dengan versi ini
<b:includable id='comment_picker' var='post'> <b:if cond='data:post.commentSource == 1'> <b:include data='post' name='iframe_comments'/> <b:elseif cond='data:post.showThreadedComments'/> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:includable>Selanjutnya, tambahkan aba-aba CSS ini sebelum </head>
<style type='text/css'> /* Fix Comments */ #comments h4,#comments h3{display:block;background:#fff;padding:10px 15px;border-radius:2px}#comment-holder{overflow:hidden}#comment-holder ol{margin:0;padding:0}#comment-holder li{background:#fff;margin-left:0;padding:15px;border-radius:5px}#comment-holder .comment-replies{background:#f7f7f7;margin:0}#comment-holder .datetime{float:right;font-size:11px;font-weight:normal}#comment-holder .datetime a{color:#999}#comment-holder .datetime a:hover{color:#000}#comment-holder .user{font-weight:500}#comment-holder .comment-reply{background:#e74c3c;text-align:center;color:#fff;font-weight:normal;padding:6px 10px;margin:0 auto 10px auto;border-radius:2px}#comment-holder .comment-actions a{display:inline-block;background:#e74c3c;text-align:center;color:#fff;font-weight:normal;padding:0 10px;margin:0 5px 10px auto;border-radius:2px}#comment-holder .comment-actions a:hover,#comment-holder .comment-reply:hover,#comment-holder .comment-actions a:focus,#comment-holder .comment-reply:focus{text-decoration:none;background:#c0392b;color:#fff}#comment-holder .comment-content{margin:0 0 5px 0;color:#222;word-wrap:break-word;padding:10px 0}#comment-holder .thread-count{display:table;margin:5px auto 0 auto;text-align:center}#comment-holder .thread-count a{background:#fff;font-size:12px;padding:3px 10px;color:#999;text-align:center}#comment-holder li:before,#comment-holder .thread-arrow,.comment-form p{display:none} </style>Jika sudah, klik tombol Simpan tema dan untuk melihat alhasil dapat mencoba menekan tombol balas komentar di blognya.
Dengan melaksanakan hal di atas, seharusnya sudah dapat teratasi dan juga komentar dari Google+ dapat teman aktifkan kembali.
Menurut saran saya salah satu solusi terbaik yaitu dengan beralih ke sistem komentar Disqus, ibarat pada postingan Pembaruan Komentar Disqus dengan Onclick Event. Karena Disqus mempunyai banyak kelebihan jikalau dibandingkan dengan sistem komentar bawaan Blogger, namun semua itu kembali ke pilihan sobat.
Oke, sekian untuk postingan kali ini, biar bermanfaat dan wassalam.
Kemarin ada yang request Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger. Sebenarnya caranya sangat mudah, namun bagi teman yang sudah mengetahui caranya tidak perlu lagi mengikuti cara ini alasannya yaitu teman sudah melaksanakan cara ini sebelumnya.
Bagi teman yang ingin menampilkan iklan baik itu iklan banner atau unit iklan AdSense khusus menyerupai In-article Ads di dalam postingan dapat ikuti cara di bawah ini.
Pertama buka dasbor Blogger > klik hidangan Tema dan Edit HTML > Cari arahan ini di dalam template
Atau menyerupai ini
Lebih tepatnya, cari arahan <data:post.body/> di dalam markup ini
Jika di dalam template teman mempunyai beberapa arahan <data:post.body/> cari arahan tersebut yang dibungkus dengan tag kondisional halaman postingan. Contohnya menyerupai ini
Bisa juga diganti dengan format Tag Kondisional Blogger Terbaru
Jika tidak ada, teman hanya perlu menambahkan arahan gres menyerupai ini
Selanjutnya tambahkan arahan di bawah ini untuk membungkus banner atau arahan iklannya
Ganti arahan yang ditandai dengan banner atau arahan iklan sobat. Contohnya menyerupai ini, di sini aku memakai arahan In-article AdSense
Tambahkan juga arahan CSS di bawah ini sebelum </head> atau </head><!--<head/>-->
Selesai, klik tombol Simpan tema di editor template.
Demikian tips dari perihal Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger. Semoga bermanfaat dan wassalam.
Bagi teman yang ingin menampilkan iklan baik itu iklan banner atau unit iklan AdSense khusus menyerupai In-article Ads di dalam postingan dapat ikuti cara di bawah ini.
Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan
Pertama buka dasbor Blogger > klik hidangan Tema dan Edit HTML > Cari arahan ini di dalam template
<data:post.body/>Atau menyerupai ini
<p><data:post.body/></p>Lebih tepatnya, cari arahan <data:post.body/> di dalam markup ini
<b:includable id='post' var='post'> .... .... <data:post.body/> .... .... </b:includable>Jika di dalam template teman mempunyai beberapa arahan <data:post.body/> cari arahan tersebut yang dibungkus dengan tag kondisional halaman postingan. Contohnya menyerupai ini
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if>Bisa juga diganti dengan format Tag Kondisional Blogger Terbaru
Jika tidak ada, teman hanya perlu menambahkan arahan gres menyerupai ini
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if>Selanjutnya tambahkan arahan di bawah ini untuk membungkus banner atau arahan iklannya
<b:if cond='data:blog.pageType == "item"'> <div class='kabaradd qu'> <!-- Your Ad Here --> </div> <data:post.body/> <div class='kabaradd'> <!-- Your Ad Here --> </div> </b:if>Ganti arahan yang ditandai dengan banner atau arahan iklan sobat. Contohnya menyerupai ini, di sini aku memakai arahan In-article AdSense
<b:if cond='data:blog.pageType == "item"'> <div class='kabaradd qu'> <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <data:post.body/> <div class='kabaradd'> <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </b:if>Tambahkan juga arahan CSS di bawah ini sebelum </head> atau </head><!--<head/>-->
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .kabaradd{margin:20px auto 0 auto} .kabaradd.qu{margin:20px auto} </style> </b:if>Selesai, klik tombol Simpan tema di editor template.
Demikian tips dari perihal Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger. Semoga bermanfaat dan wassalam.
Table of Contents yaitu daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan info bab pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan sesudah goresan pena kata pengantar atau inspirasi pokok dari sebuah artikel.
Baiklah, di sini akan menunjukkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.
Bagi teman yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan aba-aba CSS ini sebelum </head> atau </head><!--<head/>-->
Langkah selanjutnya, tambahkan aba-aba di bawah ini sebelum </body> atau <!--</body>--></body>
Klik tombol Simpan tema.
Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan aba-aba di bawah ini pada tab HTML (bukan Compose)
Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada aba-aba di atas. Misalnya ibarat ini
Tambahkan ID pada heading menjadi ibarat ini
Perhatikan aba-aba yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya
Kemudian tambahkan aba-aba ini di setiap simpulan paragraf tiap bagian
Maka kesannya menjadi ibarat ini
Setelah selesai, silakan klik tombol Publikasikan post dan lihat kesannya di blog sobat.
Dan ini rujukan Table of Contents yang sudah aku tambahkan pada template blog
Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.
Baiklah, di sini akan menunjukkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.
Bagi teman yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan aba-aba CSS ini sebelum </head> atau </head><!--<head/>-->
<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden} </style>Langkah selanjutnya, tambahkan aba-aba di bawah ini sebelum </body> atau <!--</body>--></body>
<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})}); //]]> </script>Klik tombol Simpan tema.
Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan aba-aba di bawah ini pada tab HTML (bukan Compose)
<div id="light-toc"> <div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div> <div id="toc"> <ol> <li><a href="#toc_1" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 5</a></li> </ol> </div> </div>Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada aba-aba di atas. Misalnya ibarat ini
<h4> Cara Membuat Table of Contents di Postingan Blogger</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Tambahkan ID pada heading menjadi ibarat ini
<h4 id="toc_1"> Cara Membuat Table of Contents di Postingan Blogger</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Perhatikan aba-aba yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya
<h4 id="toc_1"> Heading Bagian 1</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_2"> Heading Bagian 2</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_3"> Heading Bagian 3</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_4"> Heading Bagian 4</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_5"> Heading Bagian 5</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Kemudian tambahkan aba-aba ini di setiap simpulan paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>Maka kesannya menjadi ibarat ini
<h4 id="toc_1"> Heading Bagian 1</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>Setelah selesai, silakan klik tombol Publikasikan post dan lihat kesannya di blog sobat.
Dan ini rujukan Table of Contents yang sudah aku tambahkan pada template blog
Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.
Ada banyak cara perjuangan untuk mempercantik blog, salah satunya dengan Memasang Efek Preloading Keren di Blogger ini. Bagi yang penasaran, simak tipsnya di bawah ini.
Cara kerja dari Efek Preloading di Blogger ini yaitu transisi yang akan muncul otomatis ketika memuat halaman di blog dan akan hilang sesudah halaman tersebut termuat dengan penuh. Efek Preloading yang akan aku bagikan ini tidak akan mempengaruhi kecepatan blog alasannya yaitu sangat ringan murni CSS dan SVG tanpa gambar. Sebelumnya aku juga pernah menyebarkan postingan terkait di sini Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat. Berikut tips Cara Memasang Efek Preloading
Sebelum menambahkan instruksi yang akan aku bagikan ini, instruksi akan berjalan dengan baik pada jQuery library versi 1.7.1
Silakan ganti jQuery library yang sudah ada pada blog sahabat dengan versi di atas.
Buka Blogger > Tema > Klik tombol Edit HTML > Tambahkan instruksi ini sebelum </body> atau <!--</body>--></body>
jQuery
Kemudian tambahkan instruksi ini sempurna di bawah <body>
HTML
Selanjutnya tambahkan instruksi CSS ini sebelum </head> atau </head><!--<head/>-->
CSS
Setelah itu klik tombol Simpan tema dan lihat hasilnya.
Dan di sini aku juga telah menyediakan beberapa pilihan HTML dan CSS untuk imbas animasi preloading yang dapat sahabat sesuaikan dengan kebutuhan.
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
HTML
CSS
Demikian Cara Memasang Efek Preloading Keren di Blogger. Semoga bermanfaat dan wassalam.
Cara kerja dari Efek Preloading di Blogger ini yaitu transisi yang akan muncul otomatis ketika memuat halaman di blog dan akan hilang sesudah halaman tersebut termuat dengan penuh. Efek Preloading yang akan aku bagikan ini tidak akan mempengaruhi kecepatan blog alasannya yaitu sangat ringan murni CSS dan SVG tanpa gambar. Sebelumnya aku juga pernah menyebarkan postingan terkait di sini Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat. Berikut tips Cara Memasang Efek Preloading
Memasang Efek Preloading Keren di Blogger
Sebelum menambahkan instruksi yang akan aku bagikan ini, instruksi akan berjalan dengan baik pada jQuery library versi 1.7.1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Silakan ganti jQuery library yang sudah ada pada blog sahabat dengan versi di atas.
Buka Blogger > Tema > Klik tombol Edit HTML > Tambahkan instruksi ini sebelum </body> atau <!--</body>--></body>
jQuery
<script type='text/javascript'> //<![CDATA[ // Preloader $(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]> </script>Kemudian tambahkan instruksi ini sempurna di bawah <body>
HTML
<div id='preloader'> <svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'> <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/> </svg> </div>Selanjutnya tambahkan instruksi CSS ini sebelum </head> atau </head><!--<head/>-->
CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite} @keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}} .path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite} @keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}} @keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}} </style>Setelah itu klik tombol Simpan tema dan lihat hasilnya.
Opsi lain Animasi Preloading
Dan di sini aku juga telah menyediakan beberapa pilihan HTML dan CSS untuk imbas animasi preloading yang dapat sahabat sesuaikan dengan kebutuhan.
Bounce Dot
HTML
<div id='preloader'> <div id='container' class='spinner'> <div id='dot'></div> <div class='step' id='s1'></div> <div class='step' id='s2'></div> <div class='step' id='s3'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite} @-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #s1{animation:anim 1.8s linear infinite} #s2{animation:anim 1.8s linear infinite -.6s} #s3{animation:anim 1.8s linear infinite -1.2s} </style>Pacman
HTML
<div id='preloader'> <div class='loader spinner'> <div class='circles'> <span class='one'></span> <span class='two'></span> <span class='three'></span> </div> <div class='pacman'> <span class='top'></span> <span class='bottom'></span> <span class='left'></span> <div class='eye'></div> </div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#1C163A;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:#EFEFEF} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @keyframes animcircles{0%{transform:translate(0px,0px)}100%{transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:#FFFB16} .pacman .top::before{top:0;border-radius:60px 60px 0 0} .pacman .bottom::before{bottom:0;border-radius:0 0 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0 0 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @keyframes animtop{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-45deg)}} .pacman .bottom{animation:animbottom 0.5s infinite} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{transform:rotate(45deg)}} </style>Square
HTML
<div id='preloader'> <div class='loader spinner'> <div class='l_main'> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> </div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .loader{height:100%;width:100%} .loader .l_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} @media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}} @media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}} .l_square{position:relative} .l_square:nth-child(1){margin-left:0px} .l_square:nth-child(2){margin-left:44px} .l_square:nth-child(3){margin-left:88px} .l_square:nth-child(4){margin-left:132px} .l_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF} .l_square span:nth-child(1){top:0px} .l_square span:nth-child(2){top:44px} .l_square span:nth-child(3){top:88px} .l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in} .l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in} .l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in} .l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in} .l_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s} .l_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s} .l_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s} @keyframes animsquare1{0%,5%,95%,100%{transform:translate(0px,0px) rotate(0deg)}30%,70%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare2{0%,10%,90%,100%{transform:translate(0px,0px) rotate(0deg)}35%,65%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare3{0%,15%,85%,100%{transform:translate(0px,0px) rotate(0deg)}40%,60%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare4{0%,20%,80%,100%{transform:translate(0px,0px) rotate(0deg)}45%,55%{transform:translate(-40px,0px) rotate(-90deg)}} </style>Running Dot
HTML
<div id='preloader'> <div id='loader' class='spinner'> <div id='d1'></div> <div id='d2'></div> <div id='d3'></div> <div id='d4'></div> <div id='d5'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#55efc4;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{width:100px;height:40px;position:absolute;top:50%;left:50%;margin:-20px -50px} #loader div{width:10px;height:10px;background:#FFF;border-radius:50%;position:absolute} #d1{animation:animate 2s linear infinite} #d2{animation:animate 2s linear infinite -.4s} #d3{animation:animate 2s linear infinite -.8s} #d4{animation:animate 2s linear infinite -1.2s} #d5{animation:animate 2s linear infinite -1.6s} @-webkit-keyframes animate{0%{left:100px;top:0}80%{left:0;top:0}85%{left:0;top:-10px;width:10px;height:10px}90%{width:20px;height:15px}95%{left:100px;top:-10px;width:10px;height:10px}100%{left:100px;top:0}} </style>Circle
HTML
<div id='preloader'> <div class='spinner'> <div class='inner one'></div> <div class='inner two'></div> <div class='inner three'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px} .inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%} .inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA} .inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA} .inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA} @keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}} @keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}} @keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}} </style>Reversed Dot
HTML
<div id='preloader'> <div class='spinner'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite} .loading.reversed li:nth-child(1n){animation-delay:0s} .loading.reversed li:nth-child(2n){animation-delay:0.2s} .loading.reversed li:nth-child(3n){animation-delay:0.4s} .loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite} .loading li:nth-child(1n){left:-20px;animation-delay:0s} .loading li:nth-child(2n){left:0;animation-delay:0.2s} .loading li:nth-child(3n){left:20px;animation-delay:0.4s} @keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}} </style>Jelly Box
HTML
<div id='preloader'> <div id='loader' class='spinner'> <div id='shadow'></div> <div id='box'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px)} @keyframes loader{0%{left:-100px}100%{left:110%}} #box{width:50px;height:50px;background:#fff;animation:animate .5s linear infinite;position:absolute;top:0;left:0;border-radius:3px} @keyframes animate{17%{border-bottom-right-radius:3px}25%{transform:translateY(9px) rotate(22.5deg)}50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px}75%{transform:translateY(9px) rotate(67.5deg)}100%{transform:translateY(0) rotate(90deg)}} #shadow{width:50px;height:5px;background:#000;opacity:0.1;position:absolute;top:59px;left:0;border-radius:50%;animation:shadow .5s linear infinite} @keyframes shadow{50%{transform:scale(1.2,1)}} </style>Hourglass
HTML
<div id='preloader'> <div id='loader' class='spinner'> <div id='top'></div> <div id='bottom'></div> <div id='line'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#DB7769;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{animation:loader 5s cubic-bezier(.8,0,.2,1) infinite;height:40px;width:41px;position:absolute;top:calc(50% - 20px);left:calc(50% - 20px)} @keyframes loader{90%{transform:rotate(0deg)}100%{transform:rotate(180deg)}} #top{animation:top 5s linear infinite;border-top:20px solid #fff;border-right:20px solid transparent;border-left:20px solid transparent;height:0;width:1px;transform-origin:50% 100%} @keyframes top{90%{transform:scale(0)}100%{transform:scale(0)}} #bottom{animation:bottom 5s linear infinite;border-right:20px solid transparent;border-bottom:20px solid #fff;border-left:20px solid transparent;height:0;width:1px;transform:scale(0);transform-origin:50% 100%} @keyframes bottom{10%{transform:scale(0)}90%{transform:scale(1)}100%{transform:scale(1)}} #line{animation:line 5s linear infinite;border-left:1px dotted #fff;height:0;width:0;position:absolute;top:20px;left:20px} @keyframes line{10%{height:20px}100%{height:20px}} </style>Spring Line
HTML
<div id='preloader'> <div id='container' class='spinner'> <div id='loader'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)} #loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)} @keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}} </style>Square Loader
HTML
<div id='preloader'> <div class='spinner'> <span class='loader'><span class='loader-inner'></span></span> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #0984e3;top:50%;animation:loader 2s infinite ease} .loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#0984e3;animation:loader-inner 2s infinite ease-in} @keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}} @keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}} </style>Tech Loader
HTML
<div id='preloader'> <div class='loader spinner'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px} .loader > .dot{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:dot1 3s cubic-bezier(.55,.3,.24,.99) infinite} .loader > .dot:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:dot2} .loader > .dot:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:dot3} @keyframes dot1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}} @keyframes dot2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}} @keyframes dot3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}} </style>Spinner Ball
HTML
<div id='preloader'> <div class='spinner'> <span class='ball-1'></span> <span class='ball-2'></span> <span class='ball-3'></span> <span class='ball-4'></span> <span class='ball-5'></span> <span class='ball-6'></span> <span class='ball-7'></span> <span class='ball-8'></span> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)} [class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0} @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}} .ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)} .ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)} .ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)} .ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)} .ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)} .ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)} .ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)} .ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)} </style>8 Bit
HTML
<div id='preloader'> <div id='loader' class='spinner'></div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{animation:spin 1s linear infinite;height:10px;width:10px;position:absolute;top:50%;left:50%;margin:-5px} @keyframes spin{0%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}6.25%{box-shadow:0 -30px transparent,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}12.5%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}18.75%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}25%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}31.25%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}37.5%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px transparent,-10px -30px transparent}43.75%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px transparent}50%{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}56.25%{box-shadow:0 -30px #000,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}62.5%{box-shadow:0 -30px #000,10px -30px #000,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}68.75%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}75%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}81.25%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px #000,-20px -20px #000,-10px -30px #000}87.5%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px #000,-10px -30px #000}93.75%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px #000}100%{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}} </style>Swift
HTML
<div id='preloader'> <div class='spinner'> <span> <span></span> <span></span> <span></span> <span></span> </span> <div class='base'> <span></span> <div class='face'></div> </div> </div> <div class='longfazers'> <span></span> <span></span> <span></span> <span></span> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite} .spinner > span{height:5px;width:35px;background:#000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0} .base span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #000;border-bottom:6px solid transparent} .base span:before{content:"";height:22px;width:22px;border-radius:50%;background:#000;position:absolute;right:-110px;top:-16px} .base span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #000;border-bottom:16px solid transparent;top:-16px;right:-98px} .face{position:absolute;height:12px;width:20px;background:#000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px} .face:after{content:"";height:12px;width:12px;background:#000;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50% 50%;border-radius:0 0 0 2px} .spinner > span > span:nth-child(1),.spinner > span > span:nth-child(2),.spinner > span > span:nth-child(3),.spinner > span > span:nth-child(4){width:30px;height:1px;background:#000;position:absolute;animation:fazer1 .2s linear infinite} .spinner > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite} .spinner > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s} .spinner > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s} @keyframes fazer1{0%{left:0}100%{left:-80px;opacity:0}} @keyframes fazer2{0%{left:0}100%{left:-100px;opacity:0}} @keyframes fazer3{0%{left:0}100%{left:-50px;opacity:0}} @keyframes fazer4{0%{left:0}100%{left:-150px;opacity:0}} @keyframes speeder{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px,0px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}} .longfazers{position:absolute;width:100%;height:100%} .longfazers span{position:absolute;height:2px;width:20%;background:#000} .longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s} .longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s} .longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite} .longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s} @keyframes lf{0%{left:200%}100%{left:-200%;opacity:0}} @keyframes lf2{0%{left:200%}100%{left:-200%;opacity:0}} @keyframes lf3{0%{left:200%}100%{left:-100%;opacity:0}} @keyframes lf4{0%{left:200%}100%{left:-100%;opacity:0}} </style>Tron
HTML
<div id='preloader'> <div class='spinner'></div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:radial-gradient(#1f3a47, #0b1114);left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:30%;margin-left:-50px;left:45%;margin:auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),#000000 90%);transform-origin:50% 60%;transform:perspective(200px) rotateX(66deg);animation:spinner-wiggle 1.2s infinite} @keyframes spinner-wiggle{30%{transform:perspective(200px) rotateX(66deg)}40%{transform:perspective(200px) rotateX(65deg)}50%{transform:perspective(200px) rotateX(68deg)}60%{transform:perspective(200px) rotateX(64deg)}} .spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8) infinite,spinner-fade 1.2s linear infinite} .spinner:before{border-top-color:#66e6ff} .spinner:after{border-top-color:#f0db75;animation-delay:0.3s} @keyframes spinner-spin{100%{transform:rotate(360deg)}} @keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}} </style>Google Chrome
HTML
<div id='preloader'> <div class='spinner'> <div class='loader tri'></div> <div class='loader tri2'></div> <div class='loader tri3'></div> <div class='loader tri4'></div> <div class='loader circ'></div> <div class='loader circ2'></div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px} .tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2} .tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1} .tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1} .tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2} .circ{border:30px solid rgba(255,255,255,0.1)} .circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90} @-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} </style>Hexagon
HTML
<div id='preloader'> <div class='preloader loading spinner'> <span class='slice'></span> <span class='slice'></span> <span class='slice'></span> <span class='slice'></span> <span class='slice'></span> <span class='slice'></span> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} @keyframes preload-show-1{from{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-1{to{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-1{5%{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}10%,75%{transform:rotateZ(60deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}80%,100%{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-show-2{from{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-2{to{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-2{10%{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}15%,70%{transform:rotateZ(120deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}75%,100%{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-show-3{from{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-3{to{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-3{15%{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}20%,65%{transform:rotateZ(180deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}70%,100%{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-show-4{from{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-4{to{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-4{20%{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}25%,60%{transform:rotateZ(240deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}65%,100%{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-show-5{from{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-5{to{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-5{25%{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}30%,55%{transform:rotateZ(300deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}60%,100%{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-show-6{from{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-6{to{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-6{30%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}35%,50%{transform:rotateZ(360deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}55%,100%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-flip{0%{transform:rotateY(0deg) rotateZ(-60deg)}100%{transform:rotateY(360deg) rotateZ(-60deg)}} .preloader{position:absolute;top:50%;left:50%;font-size:20px;display:block;width:3.75em;height:4.25em;margin-left:-1.875em;margin-top:-2.125em;transform-origin:center center;transform:rotateY(180deg) rotateZ(-60deg)} .preloader .slice{border-top:1.125em solid transparent;border-right:none;border-bottom:1em solid transparent;border-left:1.875em solid #f7484e;position:absolute;top:0;left:50%;transform-origin:left bottom;border-radius:3px 3px 0 0} .preloader .slice:nth-child(1){transform:rotateZ(60deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.82s preload-hide-1 both 1} .preloader .slice:nth-child(2){transform:rotateZ(120deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.74s preload-hide-2 both 1} .preloader .slice:nth-child(3){transform:rotateZ(180deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.66s preload-hide-3 both 1} .preloader .slice:nth-child(4){transform:rotateZ(240deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.58s preload-hide-4 both 1} .preloader .slice:nth-child(5){transform:rotateZ(300deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.5s preload-hide-5 both 1} .preloader .slice:nth-child(6){transform:rotateZ(360deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.42s preload-hide-6 both 1} .preloader.loading{animation:2s preload-flip steps(2) infinite both} .preloader.loading .slice:nth-child(1){transform:rotateZ(60deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-1 linear infinite both} .preloader.loading .slice:nth-child(2){transform:rotateZ(120deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-2 linear infinite both} .preloader.loading .slice:nth-child(3){transform:rotateZ(180deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-3 linear infinite both} .preloader.loading .slice:nth-child(4){transform:rotateZ(240deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-4 linear infinite both} .preloader.loading .slice:nth-child(5){transform:rotateZ(300deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-5 linear infinite both} .preloader.loading .slice:nth-child(6){transform:rotateZ(360deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-6 linear infinite both} </style>Old Facebook
HTML
<div id='preloader'> <div id='status'> <div class='spinner'> <div class='rect1'></div> <div class='rect2'></div> <div class='rect3'></div> <div class='rect4'></div> <div class='rect5'></div> </div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px} .spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px} .spinner > div{background-color:#4267b2;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out} .spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s} .spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s} .spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s} .spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s} @-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}} @keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} </style>Circular
HTML
<div id='preloader'> <div id='loader'> <span class='spinner'></span> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear} @keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} </style>Perspective
HTML
<div id='preloader'> <div class='spinner'> <div class='preloader-box'> <div>L</div> <div>O</div> <div>A</div> <div>D</div> <div>I</div> <div>N</div> <div>G</div> </div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner > .preloader-box{position:absolute;width:345px;height:30px;top:50%;left:50%;margin:-15px 0 0 -150px;-webkit-perspective:200px} .spinner .preloader-box > div{position:relative;width:30px;height:30px;background:#CCC;float:left;text-align:center;line-height:30px;font-family:Verdana;font-size:20px;color:#FFF} .spinner .preloader-box > div:nth-child(1){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 0ms infinite alternate} .spinner .preloader-box > div:nth-child(2){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 75ms infinite alternate} .spinner .preloader-box > div:nth-child(3){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 150ms infinite alternate} .spinner .preloader-box > div:nth-child(4){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 225ms infinite alternate} .spinner .preloader-box > div:nth-child(5){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 300ms infinite alternate} .spinner .preloader-box > div:nth-child(6){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 375ms infinite alternate} .spinner .preloader-box > div:nth-child(7){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 450ms infinite alternate} .spinner .preloader-box > div:nth-child(8){background:#3366FF;-webkit-animation:movement 600ms ease 525ms infinite alternate} @-webkit-keyframes movement{from{-webkit-transform:scale(1.0) translateY(0px) rotateX(0deg);box-shadow:0 0 0 rgba(0,0,0,0)}to{-webkit-transform:scale(1.5) translateY(-25px) rotateX(45deg);box-shadow:0 25px 40px rgba(0,0,0,0.4);background:#3399FF}} </style>Moving Dot
HTML
<div id='preloader'> <div class='spinner'> <div class='loader'> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> </div> </div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white} .moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s} .moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s} .moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s} .moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s} .moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s} .moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s} @keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}} </style>Flying Letter
HTML
<div id='preloader'> <div id='load' class='spinner'> <div>G</div> <div>N</div> <div>I</div> <div>D</div> <div>A</div> <div>O</div> <div>L</div> </div>CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#27ae60;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #load{font-size:2rem;position:absolute;top:40%;left:0;right:0;bottom:0;margin:auto;text-align:center;max-width:600px;overflow:visible;user-select:none;cursor:default} #load div{position:absolute;width:20px;height:36px;opacity:0;animation:move 2s linear infinite;transform:rotate(180deg);color:#fff} #load div:nth-child(2){animation-delay:0.2s} #load div:nth-child(3){animation-delay:0.4s} #load div:nth-child(4){animation-delay:0.6s} #load div:nth-child(5){animation-delay:0.8s} #load div:nth-child(6){animation-delay:1s} #load div:nth-child(7){animation-delay:1.2s} @keyframes move{0%{left:0;opacity:0}35%{left:41%;transform:rotate(0deg);opacity:1}65%{left:59%;transform:rotate(0deg);opacity:1}100%{left:100%;transform:rotate(-180deg);opacity:0}} </style>SVG Animation
HTML
<div id='preloader'> <div class='spinner'> <svg id="loading"> <g> <path class="ld-l" fill="#39C0C4" d="M43.6,33.2h9.2V35H41.6V15.2h2V33.2z"/> <path class="ld-o" fill="#39C0C4" d="M74.7,25.1c0,1.5-0.3,2.9-0.8,4.2c-0.5,1.3-1.2,2.4-2.2,3.3c-0.9,0.9-2,1.6-3.3,2.2 c-1.3,0.5-2.6,0.8-4.1,0.8s-2.8-0.3-4.1-0.8c-1.3-0.5-2.4-1.2-3.3-2.2s-1.6-2-2.2-3.3C54.3,28,54,26.6,54,25.1s0.3-2.9,0.8-4.2 c0.5-1.3,1.2-2.4,2.2-3.3s2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8s2.8,0.3,4.1,0.8c1.3,0.5,2.4,1.2,3.3,2.2c0.9,0.9,1.6,2,2.2,3.3 C74.4,22.2,74.7,23.6,74.7,25.1z M72.5,25.1c0-1.2-0.2-2.3-0.6-3.3c-0.4-1-0.9-2-1.6-2.8c-0.7-0.8-1.6-1.4-2.6-1.9 c-1-0.5-2.2-0.7-3.4-0.7c-1.3,0-2.4,0.2-3.4,0.7c-1,0.5-1.9,1.1-2.6,1.9c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3 c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9c1,0.5,2.2,0.7,3.4,0.7c1.3,0,2.4-0.2,3.4-0.7 c1-0.5,1.9-1.1,2.6-1.9c0.7-0.8,1.3-1.7,1.6-2.7C72.4,27.4,72.5,26.3,72.5,25.1z"/> <path class="ld-a" fill="#39C0C4" d="M78.2,35H76l8.6-19.8h2L95.1,35h-2.2l-2.2-5.2H80.4L78.2,35z M81.1,27.9h8.7l-4.4-10.5L81.1,27.9z"/> <path class="ld-d" fill="#39C0C4" d="M98,15.2h6.6c1.2,0,2.5,0.2,3.7,0.6c1.2,0.4,2.4,1,3.4,1.9c1,0.8,1.8,1.9,2.4,3.1s0.9,2.7,0.9,4.3 c0,1.7-0.3,3.1-0.9,4.3s-1.4,2.3-2.4,3.1c-1,0.8-2.1,1.5-3.4,1.9c-1.2,0.4-2.5,0.6-3.7,0.6H98V15.2z M100,33.2h4 c1.5,0,2.8-0.2,3.9-0.7c1.1-0.5,2-1.1,2.8-1.8c0.7-0.8,1.3-1.6,1.6-2.6s0.5-2,0.5-3c0-1-0.2-2-0.5-3c-0.4-1-0.9-1.8-1.6-2.6 c-0.7-0.8-1.6-1.4-2.8-1.8c-1.1-0.5-2.4-0.7-3.9-0.7h-4V33.2z"/> <path class="ld-i" fill="#39C0C4" d="M121.2,35h-2V15.2h2V35z"/> <path class="ld-n" fill="#39C0C4" d="M140.5,32.1L140.5,32.1l0.1-16.9h2V35h-2.5l-11.5-17.1h-0.1V35h-2V15.2h2.5L140.5,32.1z"/> <path class="ld-g" fill="#39C0C4" d="M162.9,18.8c-0.7-0.7-1.5-1.3-2.5-1.7c-1-0.4-2-0.6-3.3-0.6c-1.3,0-2.4,0.2-3.4,0.7s-1.9,1.1-2.6,1.9 c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9 s2.2,0.7,3.4,0.7c1.1,0,2.1-0.1,3.1-0.4c0.9-0.2,1.7-0.5,2.3-0.9v-6h-4.6v-1.8h6.6v9c-1.1,0.7-2.2,1.1-3.5,1.5 c-1.3,0.3-2.5,0.5-3.9,0.5c-1.5,0-2.9-0.3-4.1-0.8s-2.4-1.2-3.3-2.2c-0.9-0.9-1.6-2-2.1-3.3s-0.8-2.7-0.8-4.2s0.3-2.9,0.8-4.2 c0.5-1.3,1.2-2.4,2.2-3.3c0.9-0.9,2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8c1.6,0,3,0.2,4.1,0.7s2.2,1.1,3,2L162.9,18.8z"/> </g> </svg> <svg width='182px' height='182px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ripple"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g> <animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g><g><animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g></svg> </div> </div>CSS
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} #loading{position:absolute;left:calc(50% - 100px);top:calc(50% - 25px);z-index:9999} .uil-ripple{position:absolute;left:calc(50% - 90px);top:calc(50% - 90px);opacity:.5;z-index:999} .ld-l{opacity:0;animation:ld-in 3s 0.0s ease infinite} .ld-o{opacity:0;animation:ld-in 3s 0.1s ease infinite} .ld-a{opacity:0;animation:ld-in 3s 0.2s ease infinite} .ld-d{opacity:0;animation:ld-in 3s 0.3s ease infinite} .ld-i{opacity:0;animation:ld-in 3s 0.4s ease infinite} .ld-n{opacity:0;animation:ld-in 3s 0.5s ease infinite} .ld-g{opacity:0;animation:ld-in 3s 0.6s ease infinite} @keyframes ld-in{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}Demikian Cara Memasang Efek Preloading Keren di Blogger. Semoga bermanfaat dan wassalam.
Langganan:
Postingan (Atom)