Tales of Zestiria mengambil setting sebuah benua fiksi bernama Greenwood. Greenwood terpisahkan oleh dua negara yang masuh bertikai, Highland Kingdom, yang diperintah oleh sebuah kerajaan berbasis konstitusi, dan Laurence Empire. Di sepanjang Greenwood, dikenal kotoran yang dipicu oleh emosi negatif manusia, yang berujung pada terciptanya monster bernama Hyoma, yang kini menjadi ancaman manusia.
Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi" .nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).
Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.
Sedangkan untuk Kode Html ini diletakan dibawah kode <body>
*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada. kemungkinan template body anda menggunakan class,misal <body class='home blog'>
<div id='notifjo'> <span> <h2><b>Notifikasi :</b> <p>1. Text Kamu.</p> <p>2. Naruto shippuden tamat.</p> <p>3. Gintama ceritanya mulai ngawur xD.</p> <p>4. Hello world.</p> </h2> </span> </div>
Untuk menambah baris notif baru,tambahkan:
<p>text kamu</p>
di antara:
<h2> .... </h2>
1. Pengaturan posisi notifikasi.
Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.
Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)
#notifjo { ... ... right: 10px; /* posisi di paling kanan */ top: 10px; /* posisi di paling atas */ ... ... }
Contoh :
Atas,kanan. right: 10px; top: 10px;
Bawah,kanan. right: 10px; bottom: 10px;
Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.
top:atas bottom:bawah right:kanan left:kiri
Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)
Untuk setting lainya seperti background(menggunakan rgba color) baca disini, border-radius baca disini dan contohnya disini ,dan selebihnya dapat anda lihat pada comment css yang saya sertakan diatas.
Baiklah,Sekian penjelasan saya mengenai Notifikasi sederhana dengan CSS3 yang saya buat sendiri,semoga bermanfaat minna-san~ arigatou gozaimasu~ :v
Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .
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.
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.
Oia,berkaitan dengan Video Preview diatas,Template ini menggunakan 2 Sidebar,tetapi dijadikan menjadi 1 kolom.berdasarkan gambar layout dibawah ini,sidebar bagian atas tidak menggunakan Fitur Accordion/tutup-buka,sedangkan sidebar bagian bawah menggunaan fitur accordion/tutup buka widget.
Tertarik dengan Template hatsune Miku Versi 2013 ini? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.
*Jika ada masalah pada sidebar yang tidak berfungsi accordion'a/tutup-bukanya,masalah umum selalu terletak pada javascriptnya. Solusi: download/ganti Js dibawah ini,lalu upload sendiri pada hostingan js kalian,misal di code.google.com atau https://sites.google.com
update template 12-02-2013 fix : -fix sidebar -add no image thumbnail -related post no image
update template 16-05-2013 -fix bullet and numbering post
*Jika anda sudah menggunakan template ini,silakan download kembali,dan update template anda.terima kasih.
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~
Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.
Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
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.
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:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.
Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
Hai minna-san,hari ini saya mau sharing tentang Content Slider CSS3 yang sama dengan di template Fansuber Otaku,karena ternyata banyak yang membutuhkan slider ini.
Oia,Slider ini Sebenarnya hasil Editan saya,aslinya kamu bisa lihat di web ini :Iamceege.com. Apa sih bedanya? yang berbeda yang pasti stylenya,teruama pada judul slide,kecepatan animasi,jumlah photo yang ditampilkan,dan penambahan deskripsi pada slider,serta penambahan efek filter blur pada animasi.dan sebenarnya juga untuk pemasangan slider ini sudah pernah saya post pada banner lider,kalau yang itu cuma dibuat khusus agar cocok dengan banner.kelebihan dari slider ini yaitu ringan,tidak memerlukan javascript ataupun jquery,animasi dapat kita atur sendiri,dan cssnya mudah untuk disetting.
Sedangkan untuk Kode Html ini diletakan diantara kode <body> ... </body> tergantung dimana anda ingin meletakanya dimana.
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slider3'> <div id='mask1'> <ul><li> <span><h2>Tamako Market</h2></span> <a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXRE5_GeCBjL4iu2nqaSwxIhOlInCWbKb88hIHh3Nyor7oJH5qtn4suQY0FwhggRA23k5aSFLwEb41UlJ-f0F_7NGF8ugbad9lnjXf_N2ycvptBYm1uI9WIGbpnnz10_opSuDkKAmhQiBv/s1600/4.jpg'/></a> <div class='baka'><h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town's bustling Tama-ya shopping district.</h3></div> </li> <li> <span><h2>Vividred Operation</h2></span> <a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepx9CLEn1QjP_oE5ohx6H6Maw39VT08uBUopqIXbHgTFjhD2uskgeBkWtjEBDAtJ1O36aC_D3eGuixpmslqwqanb1M2R9e4iaw-PjbQmKET8kiQvoz4Z410rOC1Wo7UvEk30hNR3-VLFD/s1600/3.jpg'/></a> <div class='baka'><h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (示現エンジン Jigen Enjin?), which solved an energy crisis five years prior.</h3></div> </li> <li> <span><h2>Ore no Kanojo to Osananajimi ga Shuraba Sugiru</h2></span> <a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj493_EOomrWNvddgm61HCwraKMarQPl6kNwykN6WtKPFu1LGdCI9TCO15_i8I6jfpyAmozlacelpcw05JfvKEnEBbM7FI_6emjVkAnOrc9gei5oq8jq0pDlQVBS-OpaxC49x-3nndxVAWc/s1600/Untitled-1.jpg'/></a> <div class='baka'><h3>Eita Kidō enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div> </li> <li> <span><h2>Maoyuu Maou Yuusha</h2></span><a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMc-6xhj6-01KOuAd8q_HHvT06HfkigQxr6cfhKfkYyD8Tfsher8WNU-SxNDQ0kYZbF83GGr1wokIJQXughi8ymcUeVGttlxvUT0lYWpjBdfKrfnMV06B03DGsDikOWGtiDPkksaL1MU8M/s1600/2.jpg'/></a> <div class='baka'><h3>The story is set in a world embroiled by war between Humans and Demons. The Humans' greatest hero invades the Demon King's castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div> </li> </ul> </div> <div id='overlay1'> </div><div id='pause1'> </div></div></b:if>
Text bewarna Orange : Judul Slider Text bewarna merah : Alamat situs/Link/url web Text bewarna ungu : Url Gambar Text bewarna biru : Deskripsi
Oia,aya mau menambahkan lagi,apabila kamu ingin mengubah ukuran lider ini,kamu haru setting sendiri secara manual. Slider ini sudah saya atur dengan ukuran standart 610px,jadi artinya seluruh content pada slider ini selebar 610px,termasuk pergerakan animasi dan ukuran gambar pada slider ini sendiri,jadi bila anda ingin mengganti ukuran slider ini,misalkan 650px,berarti seluruh css lebarnya juga harus 650px agar susunanya rapih dan efek animasinya juga tepat,terumama untuk css animasi keyframenya,
saya ambil contoh dari postingan banner slider,karena sebelunya sudah dijelaskan.
perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.
1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.
2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.
3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu? itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px. begini perhitungan dan teorinya:
-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka
0-468 = -468
digeser ke arah kiri lagi menjadi
-468-468 = -936
digeser ke arah kiri lagi menjadi
-936-468 = -1404
lalu di timing 100% kembali ke posisi awal yaitu 0.
nah,jadi bagaimana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.
jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD
karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.
perhitungan diatassama saja dengan content slider ini,hanya saja nilainya berbeda karena ukuranya lebih lebar content slider ini.
Sekian penjelasan saya tentang Content slider CSS3, Semoga bermanfaat ^^ #meskipun senin depan ujian,kegiatan blogging susah untuk dihentikan~xD http://205.196.121.10/4784bn9qrucg/tqd877okjqgdc77/%5BUn%5Dcertain+happiness.mp3
