Recent Post
RemIcy Anime WordPress Theme

RemIcy Anime WordPress Theme


kalau sebelumnya saya share theme buatan saya type streaming, kali ini aink share theme fanshare tapi bukan buatan aink :v buatan Masga Ex yang dishare lewat group C-Studio, dan saya udah ijin buat share di blog saya.. buat sobat yang lagi membutuhkan theme wordpress.. ^_^
sedikit catatan tolong sobat kiranya jangan menghapus link credit yang ada di footer.. theme wordpress lebih susah dari pada blogger

theme ini buatan Masga Ex, yang di share di group C-Studio dan saya share ulang di blog saya (tak lupa juga saya meminta izin sama author), terima kasih

  • FeaturesFree

  • Responsive

  • SEO Ready

  • Custom Post Type

  • Search Box Advanced

  • Genre Navigation

  • Custom Configure

  • Protected File

  • Support RTL

  • Support Editing

  • Delete Credit
Template version Created Template : 12 April 2017
Author : Masga Ex
Latest Version : 1.0
Silahkan Baca FAQ sebelum menggunakan template ini :) Please Read FAQ before using template :)
Log version /* Log v.1.0 */ - Realease Template/Themes
Coming Soon
Coming Soon

Usagistream Wordpress Theme

Usagistream Wordpress Theme

yup kemarin saya udah share theme telatsubs, sekarang saya rilis hasil desain saya. theme yang saya buat yaitu untuk stream anime. tema dengan warna gelap ya lumayan susah mendesain warna gelap kebanding warna terang -_-. btw warnanya hasil curry each :v wakakka males utak atik warna lagih... dah

terima kasih juga buat Age cuk yang udah perbolehin curry copy admin panel dari theme c-animebatch, dan terima kasih buat referensi kode seperti wp_query dan taxonomy dari Masga Ex. tanpa referensi saya munkin bisa buat berbulan bulan -_-.

dah itu aja :v silahkan di donlot atau cek demonya, jangan lupa lihat docs ya sebelum bertanya.... saya udah siapin docs khusus wordpress.
terima kasih

buat sobat yang mengalami "PCLZIP_ERR_BAD_FORMAT (-10)" pada saat upload themes, silahkan sobat mengekstrak ulang file usagistream.rar yang ada di folder themes, menjadi file berformat .zip. intinya sobat harus mengganti format file .rar menjadi file .zip!!

NOTE : for friend get error "PCLZIP_ERR_BAD_FORMAT (-10)" here solution http://stackoverflow.com/questions/17771578/wordpress-theme-upload-error-pclzip-err-bad-format, extract again file .rar be .zip in folder theme > usagistream.rar

DOWNLOAD BOX ERROR, PLEASE SEE TAB UPDATE FOR FIX THAT BUG

  • FeaturesFree

  • Responsive

  • SEO Ready

  • Custom Post Type

  • Search Box Advanced

  • Hot Update

  • Custom Widget

  • Widget Post Tooltip

  • Stream Tab

  • Custom Configure

  • Protected File

  • Support RTL

  • Support Editing

  • Delete Credit
Template version Created Template : 11 April 2017 Latest Version : 1.1
Silahkan Baca FAQ sebelum menggunakan template ini :) Please Read FAQ before using template :)
Log version
/* Log v.1.0 */
- Realease Template/Themes
Coming Soon
Fix Download Box Error
this fix download box error
1. go to wp-admin
2. Appreance Editor tempo.php
3. Select all code and replace with this code (download tempo.php)
(intinya sobat harus mengganti kode tempo.php yang ada di theme anda dengan kode tempo.php baru diatas)
download, usagilabs, usagistream

Telatsubs Wordpress Theme

Telatsubs Wordpress Theme

lama tak jumpa sob, kali ini saya akan share theme buatan teman saya, dengan desain elegant dan fitur yang melimpah cocok untuk blog fansub. thema ini merupakan theme dari fansubnya yaitu telatsubs. nah bagi sobat yang sedang mencari theme wordpress untuk fansub sobat, tidak ada salahnya sobat mencoba theme yang satu ini. dan catatan untuk sobat tidak dapat mengedit footer.php karena udah terproteksi untuk menghindari orang yang menghapus creditnya. ingat theme wordpress lebih susah kebanding blogger.

saya juga tidak menyediakan demo, maaf buat sobat yang ingin melihat.
sobat bisa menyobanya lewat xampp silahkan cari info di google

  • FeaturesFree

  • Responsive


  • SEO Ready


  • Anime List


  • Movie List


  • Batch List


  • Search Box


  • Download Box


  • Streaming Include


  • Safelink


  • Post Type


  • Share on Post


  • Back to Top


  • Threaded Comments with Emotion


  • Remove Credit

Template version Created Template : 11 April 2017 Latest Version : 1.0
Silahkan Baca FAQ sebelum menggunakan template ini :) Please Read FAQ before using template :)
Log version /* Log v.1.0 */ - Realease Template/Themes
Coming Soon
Coming Soon

Fanstrap Anime Blogger Template v.3.0

Fanstrap Anime Blogger Template v.3.0

after such a long time want to reshare template of cmonfrozen, finally release as well; v. I share this template is Fanstrap Anime Blogger Template version 3.

the final version in the blog cmonfrozen is version 2.2 to version reshare but for this I consider to version 3 for the new prefix my old template. because a lot of changes in the structure therein html form particularly design like different from before. such as color, header image, and there are also some features that I add. such as the widget blogs, recent post with slider, and finally back to top.

fanstrap blogger template is my first template that uses bootstrap css framework. besides accelerating create templates blogger, boostrap also facilitate template be responsive so I will not linger long to edit the point saves time because the bootstrap is already providing features that are needed, like you can make the Menu Tab without the need to look again at google, buttons spoiler or called Collapse, menu tooltip, and so forth.

fanstrap version 3 have color brown that follows the header image, previous versions of blue, gray color for body background, and white for the wrapper. features a search box with the effect pop-up that appears when you click the search button located in the navigation, carousel bootstrap manual that must be edited via an HTML editor, it is not automatic, widget recent post specific label anime under carousel that uses carousel multiple items, just below the recent post there is an information box, button style grid or list that is next to the title of recent anime useful substitute style post of the grid to list or vice versa, there is the main content led to the release of the last blog, widget recent specific label pv with style 3 column grid, in the sidebar widgets are useful for the progress bar shows the status of anime in the works, popular post 2 column grid, and label and follow email widget that has been modified. on page there is a box post share facebook, twitter, and google plus, underneath there is a related post with style list, and a comment box that could lead emoji.

NOTE : there are some errors in responsive related post, to fix the little buggy please click the tab "Update" below this.
setelah sekian lama mau reshare template dari cmonfrozen, akhirnya rilis juga ;v. template yang saya share ini yaitu Fanstrap Anime Blogger Template versi ke 3.

versi terakhir di blog cmonfrozen yaitu versi ke 2.2 tapi untuk versi reshare ini saya anggap versi ke 3 untuk awalan baru template lama saya. karena banyak perubahan struktur html didalamnya terutama bentuk desainnya yang agag berbeda dengan sebelumnya. seperti warna, gambar header dan ada beberapa fitur juga yang saya tambahkan. seperti widget info blog, recent post dengan slider, dan terakhir back to top.

fanstrap blogger template merupakan template pertama saya yang menggunakan framework css bootstrap. selain mempercepat membuat template blogger, boostrap juga memudahkan template menjadi responsive sehingga saya tidak perlu berlama lama mengedit intinya menghemat waktu karena bootstrap sudah menyediakan fitur-fitur yang sangat dibutuhkan, seperti sobat bisa membuat Menu Tab tanpa perlu mencari lagi di google, tombol spoiler atau disebut Collapse, tooltip menu dan lain sebagainya.

fanstrap versi ke 3 berwarna coklat yang mengikuti gambar header, versi sebelumnya berwarna biru, warna abu abu untuk background body, dan putih untuk wrapper. memiliki fitur kotak pencarian dengan efek pop up yang akan muncul ketika mengklik tombol search yang berada di navigasi, carousel bootstrap manual yang harus di edit lewat Editor HTMl, tidak otomatis, widget recent post spetifik label anime yang berada dibawah carousel yang menggunakan carousel multiple item, tepat dibawah recent post ada kotak informasi, tombol style grid atau list yang berada di samping judul recent anime yang berguna mengganti style post dari grid ke list atau sebaliknya, ada main konten yang memunculkan rilisan terakhir blog, widget recent spetifik label pv dengan style 3 column grid, pada bagian sidebar terdapat widget progress bar yang berguna untuk memperlihatkan status anime yang sedang dikerjakan, popular post grid 2 column, dan label, dan widget follow email yang sudah dimodifikasi. pada halaman post terdapat kotak share facebook, twitter, dan google plus, dibawahnya terdapat related post dengan style list, dan kotak komentar yang bisa memunculkan emoji.

NOTE : ada beberapa kesalahan pada responsive related post, untuk memperbaiki bugnya silahkan klik tab "Update" dibawah ini.

  • FeaturesFree

  • Responsive


  • RTL


  • Full Documented


  • Mobile Friendly


  • Search Box


  • Custom Recent Post Thumbnail


  • Grid 2 Column


  • Carousel / Slider


  • Widget Notice


  • Share on Post


  • Back to Top


  • Threaded Comments with Emotion


  • Remove Credit

Template version Created Template : 23 March 2017 Latest Version : 3.0
Silahkan Baca FAQ sebelum menggunakan template ini :) Please Read FAQ before using template :)
Log version /* Log v.1.0 */ - Realease Template/Themes
Coming Soon
Fix Related Post Responsive [v.3]
1. Sign in to Blogger
2. YourBlog Theme Edit HTML
3. Put CSS below just above the code ]]></b:skin> atau </style>
@media screen and (max-width:480px){.recent-thumb{display:block;float:none;margin:0 auto 15px}.recent-thumb img{width:100%}#related_img>div{border-bottom:1px solid #ddd;padding-bottom:10px}}

How to create animated preloader with Jquery PreloadMe

How to create animated preloader with Jquery PreloadMe

Hi Everyone...a few weeks ago I was busy making new Theme for my blog so that I have not had time to share a tutorial. and this is the result now, how in your opinion ?? hehehe certainly more awesome ; v of the previous design that is less unsightly.

so on this occasion I will discuss how to create the effect preloader page use jquery PreLoadMe and loaders.css for a animation Loading very cool and I prepared other effect which I think is nice.. this jquery highly responsive can run on all types of mobile devices and desktop browsers.

This preloader displays a loading animation until the browser fetched the whole web content and will fade out the moment the page has been completely cached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.

How to Create a Preloader Effect on blog

1. Sign in to Blogger
2. YourBlog Theme Edit HTML
3. Search code </head>
4. Put HTML below just above the code </head>
<b:if cond="data:blog.url == data:blog.homepageUrl"><script type="text/javascript">
//<![CDATA[
// PreLoadMe https://github.com/niklausgerber/PreLoadMe
$(window).on("load",function(){var a=350;$("#status").delay(a).fadeOut(),$("#preloader").delay(a).fadeOut("slow")});
//]]>
</script></b:if>
6. Search code ]]></b:skin> atau </style>
7. Put CSS below just above the code ]]></b:skin> atau </style>
/* PreLoadMe - Usagilabs */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#7EC169;z-index:99}
#status{width:130px;height:130px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;text-align:center}
#status .loader-img{width:100%;}
#status b{margin:15px auto;display:block;font-family:'Roboto','Open Sans','Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#FFF;text-align:center;}
/* Effect by loader.css */
/* Default */
@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-clip-rotate > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:26px;width:26px;background:transparent!important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite}
8. Search code <body>
9. Put HTML below just under the code <body>
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://1.bp.blogspot.com/-nCAISkaZVtY/WNAMDVS7JWI/AAAAAAAAAnw/fVTmHs32Xhw-ODpTF7mc5ZJnpkVcGuZ5gCLcB/s150/chibi_yoshino_by_kurama_chan.png'/>
    <b>Loading</b>
    <div class='loader-inner ball-clip-rotate'><div></div></div>
  </div>
</div></b:if>
10. Save Theme

and for the results please see below

Other loader style

Ball Scale Multiple
CSS
add css below just after /* Effect by loader.css */
/* Ball Scale Multiple */
#status .ball-scale-multiple{margin:auto;width:0;margin-top:40px}@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple > div:nth-child(2){-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.ball-scale-multiple > div:nth-child(3){-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.ball-scale-multiple > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}
HTML
for HTML please replace the first code (under the code <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://3.bp.blogspot.com/-RBlLsvSinm0/WNAMEMFS7HI/AAAAAAAAAn0/iHu3ixTZMFYHcR-t4EMGsK5D9f3kQZQbgCLcB/s150/nekopoi_kawai.png'/>
    <b>Loading</b>
    <div class="loader-inner ball-scale-multiple"><div></div><div></div><div></div></div>
  </div>
</div></b:if>
Ball Square Spin
CSS
add css below just after /* Effect by loader.css */
/* Ball Square Spin */
#status .square-spin{margin:auto;width:55px;margin-top:20px}
@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin > div{-webkit-animation-fill-mode:both;animation-fill-mode:both;width:50px;height:50px;background:#fff;-webkit-animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite;animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite}
HTML
for HTML please replace the first code (under the code <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-ILQZOTTaVnE/WNAMC_o_V_I/AAAAAAAAAns/r_5Jc3d-nb0hawJutEiriaYPpCOVPj-wwCLcB/s150/nekopoi_pret.png'/>
    <b>Loading</b>
    <div class="loader-inner square-spin"><div></div></div>
  </div>
</div></b:if>
Pacman Style
CSS
add css below just after /* Effect by loader.css */
/* Pacman Style */
#status .pacman{margin:auto;width:0px;margin-top:20px}
@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman > div:nth-child(2){-webkit-animation:pacman-balls 1s -0.99s infinite linear;animation:pacman-balls 1s -0.99s infinite linear}.pacman > div:nth-child(3){-webkit-animation:pacman-balls 1s -0.66s infinite linear;animation:pacman-balls 1s -0.66s infinite linear}.pacman > div:nth-child(4){-webkit-animation:pacman-balls 1s -0.33s infinite linear;animation:pacman-balls 1s -0.33s infinite linear}.pacman > div:nth-child(5){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear}.pacman > div:first-of-type{width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_up 0.5s 0s infinite;animation:rotate_pacman_half_up 0.5s 0s infinite;position:relative;left:-30px}.pacman > div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_down 0.5s 0s infinite;animation:rotate_pacman_half_down 0.5s 0s infinite;margin-top:-50px;position:relative;left:-30px}.pacman > div:nth-child(3),.pacman > div:nth-child(4),.pacman > div:nth-child(5),.pacman > div:nth-child(6){background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:70px}
HTML
for HTML please replace the first code (under the code <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-GDzylzDpGHw/WNAMEb1wlsI/AAAAAAAAAn4/P5y8c-N3h74x9Ij2vJ8TEURVaIgIDPqogCLcB/s150/nekopoi_wtf.png'/>
    <b>Loading</b>
    <div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div>
  </div>
</div></b:if>
Hai Minna... beberapa minggu kemarin saya sedang sibuk dengan membuat Theme baru untuk blog saya sehingga saya belum sempat share tutorial. dan inilah hasilnya sekarang, gimana menurut pendapat sobat?? hehehe tentunya lebih mantap jiwa ya ;v dari pada desain sebelumnya yang kurang enak diliat, tapi kouta ane ikut habis juga buat nyari referensi desainnya wkwkwkw.

sehingga pada kesempatan ini saya akan membahas cara membuat efek halaman preloader menggunakan jquery PreLoadMe dan loaders.css untuk animasi Loading yang sangat keren saya sudah sediakan beberapa effect yang menurut saya bagus.. jquery ini sangat responsif dapat dijalankan pada semua jenis device desktop dan mobile browser.

Preloader ini yaitu efek animasi loading, ketika sobat baru membuka blog maka efek loading muncul dan akan hilang ketika konten blog sudah terload, jquery preloader juga dapat di modifikasi sesuai kreatif sobat.

Cara Membuat Efek Preloader di blog

1. Masuk ke Blogger
2. Blogmu Theme Edit HTML
3. Cari kode </head>
4. Masukan HTML dibawah ini tepat diatas kode </head>
<b:if cond="data:blog.url == data:blog.homepageUrl"><script type="text/javascript">
//<![CDATA[
// PreLoadMe https://github.com/niklausgerber/PreLoadMe
$(window).on("load",function(){var a=350;$("#status").delay(a).fadeOut(),$("#preloader").delay(a).fadeOut("slow")});
//]]>
</script></b:if>
6. Cari kode ]]></b:skin> atau </style>
7. Masukan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* PreLoadMe - Usagilabs */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#7EC169;z-index:99}
#status{width:130px;height:130px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;text-align:center}
#status .loader-img{width:100%;}
#status b{margin:15px auto;display:block;font-family:'Roboto','Open Sans','Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#FFF;text-align:center;}
/* Effect by loader.css */
/* Default */
@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-clip-rotate > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:26px;width:26px;background:transparent!important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite}
8. Cari kode <body>
9. Masukan HTML dibawah ini tepat dibawah kode <body>
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://1.bp.blogspot.com/-nCAISkaZVtY/WNAMDVS7JWI/AAAAAAAAAnw/fVTmHs32Xhw-ODpTF7mc5ZJnpkVcGuZ5gCLcB/s150/chibi_yoshino_by_kurama_chan.png'/>
    <b>Loading</b>
    <div class='loader-inner ball-clip-rotate'><div></div></div>
  </div>
</div></b:if>
10. Simpan Theme

dan untuk hasilnya silahkan lihat dibawah ini

Desain Loader lainnya

Ball Scale Multiple
untuk CSS
tambahkan css dibawah ini tepat sesudah /* Effect by loader.css */
/* Ball Scale Multiple */
#status .ball-scale-multiple{margin:auto;width:0;margin-top:40px}@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple > div:nth-child(2){-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.ball-scale-multiple > div:nth-child(3){-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.ball-scale-multiple > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://3.bp.blogspot.com/-RBlLsvSinm0/WNAMEMFS7HI/AAAAAAAAAn0/iHu3ixTZMFYHcR-t4EMGsK5D9f3kQZQbgCLcB/s150/nekopoi_kawai.png'/>
    <b>Loading</b>
    <div class="loader-inner ball-scale-multiple"><div></div><div></div><div></div></div>
  </div>
</div></b:if>
Ball Square Spin
untuk CSS
tambahkan css dibawah ini tepat sesudah /* Effect by loader.css */
/* Ball Square Spin */
#status .square-spin{margin:auto;width:55px;margin-top:20px}
@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin > div{-webkit-animation-fill-mode:both;animation-fill-mode:both;width:50px;height:50px;background:#fff;-webkit-animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite;animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-ILQZOTTaVnE/WNAMC_o_V_I/AAAAAAAAAns/r_5Jc3d-nb0hawJutEiriaYPpCOVPj-wwCLcB/s150/nekopoi_pret.png'/>
    <b>Loading</b>
    <div class="loader-inner square-spin"><div></div></div>
  </div>
</div></b:if>
Pacman Style
untuk CSS
tambahkan css dibawah ini tepat sesudah /* Effect by loader.css */
/* Pacman Style */
#status .pacman{margin:auto;width:0px;margin-top:20px}
@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman > div:nth-child(2){-webkit-animation:pacman-balls 1s -0.99s infinite linear;animation:pacman-balls 1s -0.99s infinite linear}.pacman > div:nth-child(3){-webkit-animation:pacman-balls 1s -0.66s infinite linear;animation:pacman-balls 1s -0.66s infinite linear}.pacman > div:nth-child(4){-webkit-animation:pacman-balls 1s -0.33s infinite linear;animation:pacman-balls 1s -0.33s infinite linear}.pacman > div:nth-child(5){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear}.pacman > div:first-of-type{width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_up 0.5s 0s infinite;animation:rotate_pacman_half_up 0.5s 0s infinite;position:relative;left:-30px}.pacman > div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_down 0.5s 0s infinite;animation:rotate_pacman_half_down 0.5s 0s infinite;margin-top:-50px;position:relative;left:-30px}.pacman > div:nth-child(3),.pacman > div:nth-child(4),.pacman > div:nth-child(5),.pacman > div:nth-child(6){background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:70px}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-GDzylzDpGHw/WNAMEb1wlsI/AAAAAAAAAn4/P5y8c-N3h74x9Ij2vJ8TEURVaIgIDPqogCLcB/s150/nekopoi_wtf.png'/>
    <b>Loading</b>
    <div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div>
  </div>
</div></b:if>

Download Box Generator v3

Download Box Generator v3

for those who have tried the previous tools may still many shortcomings, well this time I will release version 2.0 is better from before.
this version I added some functions such as the "Alway on Top", and also you can rename the file hosting and you can save the name file hosting on tools. so you do not have to bother to change it again because there is a save feature that stores the name of the host file...

The third version has been released, I added a few features such as 360p and limit 3 column file hosting. and latest design is very elegant and nice views
Bagi yang sudah mencoba tools saya sebelumnya munkin masih banyak kekurangan dalam tools, nah kali ini saya akan merilis versi v2.0 yang lebih baik dari sebelumnya, versi ini saya menambahkan tombol "Always on Top" bertujuan tools akan muncul selalu walau menekan aplikasi lain. dan juga fitur untuk mengganti nama hosting dengan fitur save..

versi ke 3 sudah rilis pada 3/19/2017, saya menambahkan beberapa fitur baru hasil request mas Royman yaitu Kualitas 360P, dan 3 Kolom file hosting. dan dengan tampilan terbaru hasil utak atik ane.. cari referensi hehehe.

Articles related : How to make Download Box Responsive

Tools Download Box

ver 3.0 (now)
Usagilabs, Usagiproject, Usagi Tools, Tools Generator
Usagilabs, Usagiproject, Usagi Tools, Tools Generator
ver 2.0
Download Box Usagilabs, Usagilabs

Template version
Created Tools : 19 November 2016
Latest Version : 3.0
Support Tools : Iori Kyun Blogger Template, AnimeForest Blogger Template, AnimeTango Blogger Template

how to use this tool you can see the video below

how interested??

Latest Tutorial