Archive for Februari 2013
Hello sobat,pada kesempatan kali ini,saya akan berbagi trik cara memasang Efek loading page dengan CSS3 Animasi hasil modifikasi saya sendiri full menggunakan CSS3 dan dan css3 keyframe animation dengan menggunakan timing yang tepat~xD
ScreenShot:
Awal mula membuat trik ini saya mendapat ide dari banner slider/photo slider yang dulu saya post.jadi saya punya ide untuk menggunakan efek loadingnya saja dan dibuat melayang pada blog kita pada tiap halamanya,ya sudah,saya hapus gambar slidenya,dan dibuat lebih simple dan menyisakan css loadernya saja.efek loadernya sendiri saya atur timing standart'a selama 15 detik dan efek fade-out/efek menghilangkan slider setelah waktu habis,dan jadilah PAGE LOADER palsu~xD. LOL
Mengapa saya sebut palsu?
karena menggunakan trik ini bukan benar" loading konten yang ada di blog kita,tetapi hanya membuat pengunjung bertahan selama kurang lebih dari 15 detik~xDD.
Oia,sebelumnya saya ingatkan,untuk memasang loader page ini,lebih baik diterapkan pada blog yang beban-nya belum terlalu berat,karena menggunakan trik ini akan menambah sedikit beban pada blog anda,dan itu juga tergantung pada konten" pada blog anda,dan jangan lupa untuk selalu membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan~
mau dicoba? ikuti langkah' dibawah ini :
CSS
Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
HTML
Sedangkan untuk Kode Html ini diletakan dibawah kode <body>
Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)
Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.
untuk lebih lengkapnya,bisa dibaca disini
#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.
Selamat mencoba,semoga bermanfaat,Arigatou gozaimasu minna-san~ xD
Note:
Sumber
Sumber
Template kali ini bertema Hatsune Miku(Favorit saya~xD)(Karena saya rasa template yang dahulu kurang rapih),yang merupakan Hasil Redesign dan perkembangan dari template Metrominimalist .Dengan Design Warna Dasar Hijau cerah dan soft,dilengkapi dengan kotak search,rss,twitter dan facebook.style Post thumbnail yang sederhana,tetapi menggunakan hover efek,sehingga posting yang tadinya simple,menjadi unik dengan efek hover css3 animasinya yang soft juga.pada halaman postingnya,tidak jauh beda dengan template sebelumnya,tetapi yang berbeda yaitu related post pada template ini,menggunakan thumbnail yang sebenarnya saya temukan dari hasil browsing di google.dan ujung" sumbernya yaitu dte.web.id.Jadi Tolong jangan menanyakan ke saya ini itu tentang widget ini,tanyakan ke pembuatnya =__=" .related post yang ada di template ini sebelumnya juga sudah saya edit,sehingga mungkin akan sedikit berbeda dengan dte.web.id.
Dan ternyata template ini tidak jauh beda dengan Template blog yui-indo,hampir mirip,tapi berbeda.kenapa mirip?
ini juga dimaksudkan untuk menghindari dan mencegah beberapa oknum/pelaku kejahatan (lol) yang ingin melakukan aksi penjiplakan dan pencurian design template, entah kenapa template yui-indo menjadi most wanted =___="
Contohnya:
Jadi Oleh karena itu saya jawab saja disini :
#Template yui-indo tidak untuk dibagikan / not for share. So,please don't be plagiarism. thx
Jadi,semoga template ini nanti dapat bermanfaat untuk semuanya. Arigatou Gozaimasu minna~
ganbatte~ ^^
Video Preview
HD: http://youtu.be/Bm-rNC9of-EDL: Download Video
#Biar greget~xD
ScreenShot
Hatsune Miku Blogger Template http://djogzs.blogspot.com/#ixzz2KYYi0VbS
Under Creative Commons License: Attribution
Hello lagi minna~ hari ini saya mau share template anime tapi minimalist juga,terutama pada bagian posting dan sidebar.Tema template menggunakan warna terang dan soft ini dari anime Oreshura,atau lengkapnya Ore no Kanojo to Osananajimi ga Shuraba Sugiru yang saat ini masih ongoing,kalau sudah menonton anime ini pasti tau Natsukawa~xD ,baiklah,saya tak perlu menceritakan karekter anime tersebut,karena blog saya bukan fansub~xD.
Nah,apa aja sih yang menarik dan unik dari template ini? pertama yang fitur yang belum ada pada web/blog lain yaitu posting/Sticky post dengan sytem dropdown menu .kenapa saya sebut begitu? itu karena awalnya saya mencoba" experimen menggabungkan system menu dropdown,yaitu saat kita mengarahkan kursor ke menu,maka menu akan keluar secara vertikal,nah,fungsi tersebut saya terapkan pada posting,jika kita mengarahkan kursor ke judul posting,maka akan keluar menu juga,tetapi menu tersebut juga sudah saya modif lagi terutama pada autoreadmorenya,sehingga kalau kalian perhatikan,disana ada thumbnail dan deskripsi posting,serta sudah ada tanggal,jumlah komentar dan kategori posting yang sudah saya atur sedemikian rupa agar strukturnya tidak hanya 1 kolom,tapi bisa 2 kolom dalam dropdown tersebut.
Dan yang kedua,Fitur accordion atau buka tutup pada sidebar menggunakan Accordion jquery UI yang saya rasa bebanya ringan karena codingan jquerry'a sederhana,penerapanya sudah saya sesuaikan otomatis pada setiap widget di sidebar,sehingga kita hanya memasukan widget seperti biasa,tidak perlu menambahkan kode html dari edit HTML.
Screenshot
1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.
Contoh:
2. Setting SEO/Meta tag
setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
3. Setting tanggal posting.
(CTRL+S)
Semoga bermanfaat untuk semuanya,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~
#Besok saya masih ada UAS .___.
Note:
Sumber
Hello lagi Minna-san,kali ini saya mau sharing template terakhir untuk bulan ini,kenapa?karena minggu depan saya UAS ,dan belum belajar sama sekali @___@.
Screenshot
Template kali ini Bertema Robotic notes,tentunya buat yang sudah nonton anime ini sudah tau siapa gunvarrel,robot mecha~xD.pada template ini,apa yang unik?kalau kalian sudah melihat demo/mencoba template ini langsung,saat pertama melihat template ini,mata akan tertuju pada header yang bertuliskan please wait,apakah itu? itu adalah css animasi loader yang saya modifikasi agar selalu ada di header hanya sekitar 10 detik,lebih lengkap'a bisa dilihat disini.
Screenshot
lalu apa lagi yang aneh dari template ini?yang pastinya Style postingnya,bentuknya tidak biasa,tetapi tetap rapih.dan lagi jika kalian perhatikan thumbnail pada posting ukuran gambar hanya sekitar 70px,tetapi ketika kita arahkan kursor ke thumbnail,maka gambar akan membersar,tetapi untuk lebar gambar max 600px dan min 200px,sedangkan untuk tingginya auto,sehingga tinggi gambar tidak akan selalu sama tergantung pada gambar yang kita pasang.
Screenshot
1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.
#menu1
#menu2
2. Setting SEO/Meta tag
setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
3. Setting Social media facebook,twitter,g+,Rss
Selamat mencoba,semoga bermanfaat,arigatou gozaimasu minna-san~
sampai jumpa bulan depan~
Download
Demo
Note:
Sumber
