Popular Post

Recent post


 
Internetan dan browsing yang cepat merupakan idaman setiap orang ya. Kalo ngeliat internet ngos-ngosan tuh kayaknya pengen dibanting aja laptopnya. Nah apabila kamu merupakan pengguna setia dari Google Chrome, ada triknya nih biar aktifitas internetan kamu jadi semakin cepat dan gesit dari sebelumnya. Gak harus install aplikasi macem-macem kok, cukup mengatur beberapa setting di dalam browser dan semuanya siap untuk digunakan.

Tapi ingat, step-by-step berikut ini perlu penanganan yang serius pula mengingat kamu akan memodifikasi Flags dari Google Chrome. Perlu diketahui pula bahwa poin-poin di bawah tidak harus diimplementasikan semua, melainkan hanya untuk setting yang kamu perlukan saja. Untuk mengakses fitur Flags di Google Chrome, kamu hanya perlu mengetik chrome://flags pada kolom address bar. Setelah halaman Flags terbuka, kamu lebih baik menggunakan fitur find dengan kombinasi tombol Ctrl+F agar pencarian setting lebih mudah.

Maximum Tiles

 
Fitur pertama yang akan kita ulik adalah fitur Maximum tiles for interest area. Di halaman Flags, kamu hanya perlu search dengan keyword maximum tiles, kemudian tekan tombol Enter. Klik menu dropdown yang ada dan ubah Default menjadi 512. Fitur ini berfungsi untuk memperbesar kuota Chrome terhadap akses RAM.

Raster Threads

 
Jika kamu ingin membuat Google cepat untuk me-load dan me-render gambar, kamu hanya perlu mencari setting bernama Number of raster threads. Ubah setting-nya dari Default menjadi 4.

Enable Experimental Canvas Features

Apakah kamu pernah mengalami, ketika sedang berpindah antar tab di chrome, kamu melihat kotak-kotak abu putih sebelum halaman di-load sempurna? Fitur tersebut dapat dimatikan untuk meningkatkan waktu loading dan meningkatkan performa. Akses setting bernama Enable experimental canvas features, dan tekan tombol Enable.

Enable Touch Events

Chrome memang kurang maksimal ya untuk layar sentuh. Namun kamu bisa memperbaikinya dengan mengaktifkan fitur Enable touch events, dan ubah Automatic menjadi Enabled.

Enable Fast Tab

 
Dengan mengaktifkan fitur ini, kamu akan dapat menutup tab atau window dengan lebih cepat dari sebelumnya. Akses setting Enable fast tab/window close, dan tekan tombol Enable.
Apabila semua atau beberapa setting di atas telah kamu lakukan, restart Google Chrome untuk merasakan hasilnya.

5 Cara Hack Google Chrome Kamu Biar Makin Ngebut

 
Mayoritas pengguna Android khususnya di Indonesia saat ini mungkin merasa kesulitan ketika ingin #jajanonline. Apa itu #jajanonline? Antara lain kegiatan membeli aplikasi, game, maupun item lainnya yang dijual secara online, dalam hal ini di Google Play. Sulitnya akses untuk membeli aplikasi tersebut bisa jadi malah membuat kita lebih memilih mendapatkan aplikasi dengan cara ilegal yang dikenal dengan istilah aplikasi bajakan. Padahal, aplikasi bajakan dan yang resmi memiliki perbedaan ketika digunakan.
Seringkali ada fitur-fitur yang tidak bisa gunakan dengan sempurna ketika kita menggunakan aplikasi bajakan sehingga mengurangi kepuasan kita saat menggunakannya. Namun dengan kemudahan membeli aplikasi menggunakan pulsa, kita bisa meninggalkan kebiasaan menggunakan aplikasi bajakan dan mulai beralih ke aplikasi resmi.

Beli Aplikasi Bisa Pakai Pulsa

Apapun konten yang ingin kamu beli, mulai dari aplikasi, game, e-book, majalah, hingga video, semua bisa dilakukan dengan satu cara mudah, yakni menggunakan pulsa. Saat ini pembelian aplikasi di Google Play dengan menggunakan pulsa bisa dilakukan menggunakan operator Telkomsel. Bagaimana sistem pembayarannya?
Ada dua syarat utama untuk melakukannya. Pertama, pastikan kamu menggunakan operator Telkomsel. Jika kamu menggunakan smartphone dengan dukungan dual-SIM, pastikan slot SIM Card pertama menggunakan operator Telkomsel. Kedua, kamu harus memiliki pulsa aktif yang mencukupi dengan harga aplikasi yang ingin kamu beli.
Jika baru pertama kali menggunakan cara ini, kamu bisa mendaftar terlebih dahulu. Pendaftaran ini cukup dilakukan pertama kali dan hanya sekali saja. Caranya yakni masuk ke Google Play, lalu pilih aplikasi mana yang ingin kamu beli, klik tombol beli dan pilih metode pembayaran menggunakan Telkomsel billing. Selanjutnya kamu tinggal memasukkan nama, nomor telepon, dan alamat. Lanjutkan proses pembelian dan aplikasi yang kamu inginkan sudah bisa didapat dengan mudah.

#jajanonline Item dalam Game jadi Makin Gampang

Selain bisa beli aplikasi dan game, kamu juga bisa memanfaatkan cara ini untuk membeli item-item di dalam game lho. Sudah jadi rahasia umum kalau mayoritas game saat ini adalah game free-to-play. Maksudnya, game bisa didapat secara gratis, namun kamu harus membayar untuk membeli item yang dijual di dalam game tersebut guna memuluskan jalan kamu untuk memenangkan permainan.
Yap, game apapun yang kamu mainkan, apapun item yang mau kamu beli, bisa juga kamu dapatkan langsung menggunakan pulsa. Dengan begitu, kamu tidak perlu repot lagi menunggu mendapatkan item secara gratis dalam waktu lama kalau kamu sudah bisa membelinya dengan mudah. So, kamu nggak perlu bingung lagi kalau mau #jajanonline seperti beli gems di Clash of Clan, gold di Clash of King, atau ruby di Summoners War.

Hello sobat,akhirnya saya ada waktu juga untuk merekam proses editing template dengan kualitas video yang lumayan dan tidak kaku,karena dari dahulu masih banyak yang penasaran bagaimana saya bisa membuat template ini itu,nah video ini akan menjadi salah satu project template yang pernah saya rekam.
di video ini nanti jika kalian menyaksikan sampai selesai,akan menampilkan layar dekstop saya selama kurang lebih 5 jam.yang saya tunjukan didalam video ini adalah proses atau demonstrasi cara saya untuk merombak template shinpuru v2.3 yang belum dishare dan menjadi template sword art online v2 yang sederhana secara santai tapi tepat~.di video ini menunjukan beberapa tutorial yang mungkin sudah ada beberapa yang sudah tau dan mungkin juga ada yang belum tahu dan terjawab selama ini yang selalu anda pertanyakan kepada saya tetapi tidak saya pernah jawab,karena jika hanya dijelaskan teori saya rasa akan kurang paham dan mengerti,jadi semoga video ini cukup membantu untuk yang masih belum mengerti dalam hal dasar pengeditan template secara manual seperti mengganti warna text,background,gambar header,merubah tampilan posting dll.software yang diperlukan hanya browser google chrome.dan colorpicker untuk membantu capture code hex warna.dan yang terpenting dalam hal pengeditan template yaitu pengalaman dan pengetahuan dasar tentang css dan html serta memahami betul struktur template,jangan pernah takut salah atau error dalam pengeditan template,suatu masalah pasti selalu ada jalan untuk memperbaikinya.
oia,selama 5 jam ini juga ada musik" ost anime,yui,akb48,ikimonogakari,supercell,vocaloid dan masih banyak lagi agar tidak terlalu bosan menyaksikanya~xD,tapi tetaplah fokus agar anda mengerti apa yang sedang saya lakukan di dalam video ini.

Berikut template sebeulum di edit dan sesudah diedit :


Before

After



Screenshot video




720 (836mb- 5jam)









Link baru




#untuk file yang dibagi menjadi 5 part dan 24 part JOIN menggunakan Softwarehjsplit

Cara Join hjsplit :
http://flashboyz.wordpress.com/download/cara-gabung-file-dengan-hj-split/
http://www.downloadfilem.com/cara-menggabungkan-file-dengan-hj-split.html



Trik Memasang Avatar penulis blog,Mungkin sobat sering melihat avatar" atau foto penulis blog yang penulis blognya berbeda,dan mempunyai avatar'a masing" yang berbeda seperti template Anime" orang luar negeri yang tiap design'a menggunakan sistem postingan seperti itu.sebenarnya Ini trik lama dan untuk memasang'a sangat simple,tapi trik saya kali ini agak berbeda dengan yang lain ,karena trik yang saya berikan valid HTML dan penempatan CSS'a yang benar.penggunaan css Inline Styles yang salah contoh'a seperti dibawah ini.



<div style="color=#fff;background:#fff;">...</div>

Sebisa mungkin hindari penggunaan inline style seperti diatas. Lebih baik menggunakan stylesheet bawaan blogger,diantara <b:skin> isi css </b:skin>. cara ini akan sangat memudahkan kamu pada saat mengedit CSS'a.

Untuk mencoba trik ini saya sarankan untuk membackup template kamu agar tidak terjadi hal yang tidak diinginkan.sebenarnya cara'a cukup simple dan sudah umum menurut saya.
Fungsi avatar'a itu sendiri menggunakan tag Conditional data:post.author yang memungkinkan untuk menampilkan konten dari author/penulis tersebut



ok langsung saja,pertama buka blogger=>rancangan=>edit HTML,lalu centang Expand Widget Templates.

Setelah saya coba,ternyata tidak semua template sama,oleh karena itu disini ada 2 cara:
tapi saya sarankan coba yang cara2 ,karena tingkat keberhasilan'a lebih tinggi daripada cara1 :)

Cara 1
kemudian Cari kode HTML seperti dibawah ini
<div class='post hentry uncustomized-post-template'>


#Note bila kamu menemukan kode html yang sama seperti diatas,pastikan dibawah kode html itu ada kode:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>


Cara2

Cari kode Html yang mirip" seperti dibawah ini


<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>




<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>






Setelah itu,copy paste Kode HTML dibawah ini


<div class='admin'>
<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>


Cara1
copy paste kode html diatas tadi tepat dibawah kode:
(<div class='post hentry uncustomized-post-template'> )

Atau


Cara2
copy paste kode html diatas tadi seperti dibawah ini.

<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>

<div class='admin'>
<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>


Setelah itu,copy paste CSS Dibawah ini,diatas kode ]]></b:skin>


.admin {
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
margin-left: 10px;
margin-top: 40px;
}

.admin img {width:68px;height:68px}



Pada CSS .Admin,untuk mengatur posisi gunakan margin.
CSS Diatas sama dengan Template saya Another dan Guilty Crown

pada CSS .admin img digunakan untuk mengatur lebar dan tinggi gambar/avatar itu sendiri

CSS Dibawah ini cuma Hiasan background gradient dan border radius CSS3,kamu bisa merubah warna atau sudut bulatnya.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);

//Ada kemungkinan sesudah kamu menyimpan'a,posisi'a tidak beraturan,karena itu gunakan margin-left,margin-right,margin-top dan margin-bottom untuk mengatur posisi avatar tersebut.//

lalu simpan dan lihat hasilnya.



Pengaturan Tambahan


Untuk Avatar,sama seperti template Another dan Template Guilty Crown kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v

Pertama,buka blogger=>rancangan=>edit HTML=> Centang Expand Widget Templates
Lalu carikode html seperti dibawah ini

<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>


kode html Diatas ini,saya cuma beri 1 jenis avatar untuk 1 author blog.
cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia.untuk menambahkan avatar'a,yang kamu perlu lakukan cuma copas HTML diatas,tepat dibawahnya,lalu ganti nama penulis dan url gambar avatar'a.

text bewarna merah:ganti dengan Username kamu.
text bewarna biru :ganti dengan Url gambar avatar kamu.Ukuranya 136px x 190px.

kalau tidak tahu username kamu,sebenar'a mudah aja,tinggal copas dari nama profil di blog kamu,atau bila ada banyak penulis tapi tidak tahu username'a,cara'a:
buka blogger=>setting=>izin/permission.

Contoh:

Lalu kamu akan melihat beberapa nama penulis dan admin disana.tinggal copy paste deh nama'a


//Saya Sudah mencobanya di berbagai template,dan hasilnya ada beberapa yang bisa menggunakan cara 1 dan juga ada yang bisa menggunakan cara2.//



Selesai deh.jadi dengan ini saya harapkan sobat bisa lebih kreatif dalam hal CSS dan HTML,jangan ngikutin style orang lain,apalagi punya orang luar negeri.ciptakan style kita sendiri,kreasi kita sendiri,dan hasil tangan kita sendiri.Ini Style ku,apa style mu?Indonesia harus kreatif.Arigatou Gozaimasu,semoga bermanfaat :)




Apa kabar sobat,kali ini saya mau sharing tips dan trik cara memasang @font face atau biasa disebut cufon font seperti template blogger saya Retropop v2 atau blog saya sendiri.mungkin banyak dari kalian yang mungkin agak kesulitan saat menggunakan font ini.harus uploadlah,inilah itulah,tapi disini saya akan kasih trik mudah'a menggunakan cufon font.

tapi sebelum trik,saya jelaskan dulu tipsnya.

Tips menggunakan Cufon font
-Saya Sarankan jangan menggunakan cufont lebih dari 2 jenis font.
-Terapkan cufon font HANYA pada Header text.misal judul blog,judul posting,judul sidebar,dan Readmore.
-Jangan terapkan cufon font pada seluruh halaman blog.
-Sebaiknya upload font pada hosting local / hosting yang koneksinya cepat dan lancar seperti https://sites.google.com/

ini kumpulan JS milik saya
https://sites.google.com/site/djogzs/js

keunggulan menggunakan cufon font yaitu:
-Text lebih jelas
-Tipografi sangat sempurna
-Text'a tidak dapat di copy paste seperti text biasa karena menggunakan elemen HTML <canvas> .
-Tipe/style font bisa kamu dapatkan darimana saja.
-Hampir Mendukung semua browser
-Mudah digunakan/diterapkan sama seperti google font.

Kekurangan menggunakan Cufon font yaitu:
-Koneksi internet harus cukup cepat.
-Agak berat saat pertama kali loading/rendering font.

Kalau udah mengerti,langsung saja saya kasih triknya nih :)

Triknya yaitu,sobat tidak perlu mengunjungi http://cufon.shoqolate.com/generate/ yang cara'a agak rumit karena banyak pengaturanya,harus cari" font'a dululah,upload,convert font TTF,OTF menjadi cufonfont dan sebagainya.

kamu cukup mengunjungi web yang sudah menyediakan file cufon font untuk langsung digunakan.
web yang saya rekomendasikan: http://www.cufonfonts.com




Setelah itu,kamu akan melihat diweb itu sudah tersedia macam" variasi font yang menarik seperti pada contoh diatas,kamu pilih salah satu lalu klik "CUFON FILE DOWNLOAD"






lalu,kamu akan melihat tipe font dan Character Set font'a.gunakan saja sesuai keperluan.setelah itu scroll ke halaman yang paling bawah


misalkan saya memlih tipe font Titillium


Klik "FONT DOWNLOAD AS CUFON"
Setelah itu simpan file cufonnya ke dekstop.

Selanjutnya kamu upload fontnya.(misal di https://sites.google.com/)
Setelah itu Copas semua Javascript'a seperti gambar diatas.

lalu,sobat login ke blogger - Rancangan - Edit HTML.
paste semua script tadi di bawah code ]]></b:skin>

Setelah itu jangan disimpan dahulu ya ==v

pertama,kamu perhatikan script yang seperti dibawah ini:
<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="titillium-text.cufonfonts.js" type="text/javascript"></script>

http://cufon.shoqolate.com/js/cufon-yui.js

alamat link diatas diganti dengan milik saya,karena sudah diupload ke sites.google
https://sites.google.com/site/djogzs/js/cufon-yui.js

Js diatas ini sangat penting agar cufont font dapat diterapkan

titillium-text.cufonfonts.js

Diganti dengan Url cufon yang tadi kamu upload


Kemudian,perhatikan js dibawah ini:

<script type="text/javascript">
Cufon.replace('.titilliumtext22l_thin', { fontFamily: 'TitilliumText22L-Thin', hover: true });
Cufon.replace('.titilliumtext22l_light', { fontFamily: 'TitilliumText22L-Light', hover: true });
Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('.titilliumtext22l_medium', { fontFamily: 'TitilliumText22L-Medium', hover: true });
Cufon.replace('.titilliumtext22l_bold', { fontFamily: 'TitilliumText22L-Bold', hover: true });
Cufon.replace('.titilliumtext22l_xbold', { fontFamily: 'TitilliumText22L-XBold', hover: true });
</script>


Disini menurut saya kita gunakan tipe font yang normal saja,jadi yang lain kita hapus saja menjadi seperti ini:

<script type="text/javascript">
Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true })
</script>

(Tiap font berbeda",ada yang tipe'a cuma 1 ada juga yang banyak (bold,light,thin,dan sebagai'a)
Setelah itu,perhatikan text diatas yang saya beri warna merah.

.titilliumtext22l_regular diganti dengan Css yang akan kamu ganti font'a.

Misalkan kita mau menggantinya untuk judul blog yg css'a #Header1 (tiap blog css'a bisa berbeda)

kita ganti menjadi seperti ini:

<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });

</script>

Setelah itu sobat simpan.
atau yang ga mau ribet,coba tes script ini dari tutorial diatas.

<script src="https://sites.google.com/site/djogzs/js/cufon-yui.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/djogzs/js/titillium-text.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });

</script>


Setelah itu simpan dan lihat hasilnya.
Bila berhasil,kita masuk ketahap tambahan~xDD
tadi sudah berhasil mengganti judul blog.lalu bagaimana cara menerapkan font'a ke text lainya?mudah saja,copy paste script css dibawahnya.
misal:


<script type="text/javascript">
Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#HTML1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#Profile1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#post-header h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
Cufon.replace('#sidebar h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });

dan seterusnya.....

</script>





CONTOH CUFON DARI TUTORIAL DIATAS

SUCCESS :)

Selesai deh,simple bukan? ga terlalu ribet" banget.saya udah jelasin sedetail mungkin tuh~xDD
sebelum dan sesudah,maaf kalau da kata" yang kurang jelas atau emang gajelas ==v #Plakk
selamat mencoba,happy coding and semoga bermanfaat.Arigatou Gozaimasu~

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.






CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#slider3 {
width: 610px;
height: 298px;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #ddd;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin:auto;
margin-bottom: 30px;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover ul, #slider3:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#slider3 img {-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;}
#slider3 img:hover {filter: saturate(1.2);
-webkit-filter: saturate(1.2);
-moz-filter: saturate(1.2);
-o-filter: saturate(1.2);
-ms-filter: saturate(1.2);}
#pause1 {
width: 610px;
height: 255px;
position: absolute;
top: 45px;
opacity: 0;
pointer-events: none;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
background: url("http://3.bp.blogspot.com/-DFS55asVVus/UQvKQ4zqL5I/AAAAAAAAFWg/789uf-FO-WU/s1600/paused+copy.png") no-repeat;
left: 560px;

}

#overlay1 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade1 35s infinite;
-webkit-animation:overlay-fade1 35s infinite;
}
#slider3 ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation1 35s infinite;
-webkit-animation:slide-animation1 35s infinite;
position:relative;
left:0px;
}
#slider3 li {
display:inline;
width:610px;
height:235px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span:hover {background: #7776B2;}
#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE;
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}

#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa;
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-moz-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-webkit-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}/* Blog johanes djogzs.blogspot.com */
@-moz-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;
font-weight:normal;
text-shadow:1px 1px 1px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */
#slider3 ul li .baka h3 {
font-size:13px;
line-height:25px;
color:#222;
font-weight:normal;
}/* Blog johanes djogzs.blogspot.com */



HTML

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='http://4.bp.blogspot.com/-weWC8gPWOeU/UPU-c1YHBeI/AAAAAAAAEmA/i9GCIMN1JJQ/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&#39;s bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<span><h2>Vividred Operation</h2></span>
<a href='#' title='#'><img src='http://3.bp.blogspot.com/-5vBY85FV8M4/UPU-c6tc7EI/AAAAAAAAEmE/H73kv9AH2E8/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 (&#31034;&#29694;&#12456;&#12531;&#12472;&#12531; 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='http://3.bp.blogspot.com/-H5jqqN1s9vE/UPU-fElKoQI/AAAAAAAAEmQ/Ue6SFazCiyo/s1600/Untitled-1.jpg'/></a>
<div class='baka'><h3>Eita Kid&#333; 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='http://3.bp.blogspot.com/-z39qB-brCS8/UPU-Z7mtXJI/AAAAAAAAEl4/6VIIxQIBVuw/s1600/2.jpg'/></a>
<div class='baka'><h3>The story is set in a world embroiled by war between Humans and Demons. The Humans&#39; greatest hero invades the Demon King&#39;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





Setting CSS Judul slider.


#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE; (warna background dapat diganti.)
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}


Setting CSS deskripsi Slider


#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa; (warna background dapat diganti)
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}





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.

(contoh pada css banner slider)
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

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.

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:
<li><a href='http://www.facebook.com'>Facebook</a></li>


<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li data-role='dropdown'><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>



2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


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~

Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

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

<div class='menujohanes'><ul class='dark_menu'>
<li><a class='selected' href='#' title='Rss'>Rss</a></li>
<li><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
</ul></div>

#menu2

<ul class='dark_menu1'>
<li><a class='selected1' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='selected2' href='#' title='Home'>Contact</a></li>
<li><a class='selected3' href='#' title='Home'>About</a></li>
<li><a class='selected4' href='#' title='Home'>Sitemap</a></li>
<li><a class='selected5' href='#' title='Home'>Download</a></li>
</ul>



2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


3. Setting Social media facebook,twitter,g+,Rss

<ul id='tbisose'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'/></li>
<li><a class='icon twitter' href='http://twitter.com/username/'/></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'/></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'/></li>
</ul>

Selamat mencoba,semoga bermanfaat,arigatou gozaimasu minna-san~
sampai jumpa bulan depan~





Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.


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>

#sliderloadingwrapper {width:100%;height:100%;
position:fixed;z-index: 999999999999999999999999999999;
background: rgba(95, 130, 187, 0.2);top: 0px;
left: 0px;-webkit-animation: fadeOut 15s linear forwards;
-moz-animation: fadeOut 15s linear forwards;
-o-animation: fadeOut 15s linear forwards;
-ms-animation: fadeOut 15s linear forwards;
animation: fadeOut 15s linear forwards;}
/* Blog johanes djogzs.blogspot.com */
#sliderloader {
width: 500px;
height: 85px;
overflow: hidden;
background-color: #8CA5CE;
border: 1px solid #5F82BB;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-bottom: 1px solid #222;
margin: auto;
margin-top: 200px;}
#progressbg {
width:460px;
margin:auto;
height:5px;
background-color:#ddd;
top:65px;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#johanesloader {
width:1px;
height:5px;
background-color:#ffd000;
-moz-animation:johanesloader 70s infinite;
-webkit-animation:johanesloader 70s infinite;
position:relative;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li a {
display:block;
text-decoration:none;}
#sliderloader li span {
display: block;
width: 460px;
padding: 10px 20px;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
float: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;letter-spacing: 1px;
font-weight:normal;
text-shadow:1px 1px 2px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */

@-webkit-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-moz-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-o-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-ms-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px;}
90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; transform: translateY(0px);top:0px;}
99% { opacity: 0; transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px; }
}






HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

<div id='sliderloadingwrapper'><div id='sliderloader'>
<ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
<div id='progressbg'><div id='johanesloader'>
</div></div></div></div>



Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)
#sliderloadingwrapper{

yang diganti :
background: rgba(95, 130, 187, 0.2);

dan

#sliderloader {

yang diganti :
background-color: #8CA5CE;


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.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
Isi HTML
</b:if>

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

Hello minna~ ^^
Template kali ini akan menambah daftar nama tema template blogger vocaloid,yaitu Gumi megpoid yang merupakan karakter suara synthesizer dari software vocaloid2 sama halnya seperti Hatsune Miku. karakter ini mempunyai suara yang khas dan unik, dan bisa saya katakan suaranya paling bagus dan stabil, oleh karena itu banyak sekali lagu" yang dicoba covering oleh Gumi,dan hasilnya sangat bagus sekali,misalkan lagu cover dari Kyary Pamyu Pamyu yang berjudul Candy-candy.

Next,mengenai template ini sendiri menggunakan warna dasar Hijau dan orange,karena Gumi Dikarakterkan seperti wortel,sama halnya seperti hatsune miku si daun bawang :v. lalu untuk mengenai Headernya, saya terapkan header dan slider(shiroi) menjadi satu. kenapa,karena awalnya jika saya pikir" kalau udah ada gambar header besar lalu ditambah slider takutnya bisa berat, oleh karena itu header saya buat posisinya diatas slide (melayang/position:absolute;). sehingga Slider itu sendiri dapat dianggap sebagai header, tetapi disini hanya digunakan 3 slide beserta deskripsinya juga,tombol navigasinya pun dibuat menjadi sederhana. bisa saja sih kalau mau nambah slide menjadi 4-100. tetapi saya sarankan untuk tidak menambahkan slide lagi karena bisa terlalu berat.
jadi saya rasa 3 slide saja sudah cukup~xD



Screenshot


Responsive mode


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.

<div id='menujohanes'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='menu' href='#'>Download</a>
<ul>
<li><a href='#'>Naruto</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Date A Live</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Devil Survivor2</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menu' href='#'>Contact</a>
<ul>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Google plus</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Multi sub</a>
<ul>
<li><a href='#'>Episode 1</a>
<ul>
<li><a href='#'>Episode 2</a>
<ul>
<li><a href='#'>Episode 3</a></li>
<li><a href='#'>Episode 4</a></li>
</ul>
</li>
<li><a href='#'>Episode 5</a></li>
</ul>
</li>
<li><a href='#'>Episode 6</a></li>
<li><a href='#'>Episode 7</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Clients</a></li>
<li><a class='menu' href='#'>Email</a></li>
</ul>

pengaturan lebih lanjut mengenai menu ini,silakan baca di postingan ini :
http://djogzs.blogspot.com/2013/06/css-dropdown-menu.html


2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini


3. Setting Social media : facebook, Twitter, google,Pinterest.
*ganti url linknya

<div class='jorib'>
<a href='#' target='_blank'><div class='googlejo'/></a>
<a href='#' target='_blank'><div class='twitterjo'/></a>
<a href='#' target='_blank'><div class='facebookjo'/></a>
<a href='#' target='_blank'><div class='pinterestjo'/></a>
</div>




4. Pengaturan Slide header
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'/></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'/></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'/></li></ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='http://3.bp.blogspot.com/-L_OUn6rxvuw/Ue5QdBC9ubI/AAAAAAAAG4U/yHphnsPYW1s/s1600/slide1.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://2.bp.blogspot.com/-mW7lkiyRE_E/Ue9NfAM3FdI/AAAAAAAAG64/_NWmWeNR3E8/s1600/slide2.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://3.bp.blogspot.com/-a5sDLqSy5Uo/Ue9NdzxvpcI/AAAAAAAAG6w/_nQwEEe0coA/s1600/slide3.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div></div></div>
*Keterangan :
Merah: Judul Slider
Biru : Deskripsi(yang kecil )
Orange : Ganti tanda pagar # dengan alamat link yang ingin dituju
Hijau : Url gambar slider


Tertarik dengan Gumi Blogger Template? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.






Bonus PSD File Header Gumi Vocaloid~xDD






Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~ :)


Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sumber : Blog Johanes

Gumi Vocaloid Blogger Template


Template terakhir bulan ini yaitu L-On Blogger template,tema yang diambil dari Anime K-ON (けいおん! Keion) yang bercerita mengenai empat siswi Sekolah Menengah Atas Sakuragaoka di Jepang yang bergabung dengan kegiatan ekstrakurikuler klub music pop, diantaranya adalah Yui Hirasawa, Ritsu Tainaka, Mio Akiyama, Tsumugi Kotobuki dan Azusa Nakano .cerita lebih lengkapnya dapat dibaca disini

Sama seperti template sebelumnya To Aru Kagaku no Railgun Blogger Template menggunakan system posting CSS3 :nth-child() Selector yang memungkinkan ukuran posting dapat berbeda-beda ,posisinya saya sudah atur sedemikian rupa agar posting urutan ke 1,4 dan 7 mempunyai ukuran paling besar dan posisinya berada ditengah, dan untuk urutan posting ke 2,3,5,6,8 dan 9 berada di sebelah kiri dengan ukuran yang sama dengan sidebar. dan untuk urutan posting ke 10 dan seterusnya ukuran full 100% tanpa gambar (default).




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 url/alamat link yang ingin dituju,dan ganti juga nama linknya.

Menu1
<div id='menujohanes'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='menu' href='#'>Download</a>
<ul>
<li><a href='#'>Naruto</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Date A Live</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Devil Survivor2</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menu' href='#'>Contact</a>
<ul>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Google plus</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Multi sub</a>
<ul>
<li><a href='#'>Episode 1</a>
<ul>
<li><a href='#'>Episode 2</a>
<ul>
<li><a href='#'>Episode 3</a></li>
<li><a href='#'>Episode 4</a></li>
</ul>
</li>
<li><a href='#'>Episode 5</a></li>
</ul>
</li>
<li><a href='#'>Episode 6</a></li>
<li><a href='#'>Episode 7</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Clients</a></li>
<li><a class='menu' href='#'>Email</a></li>
</ul>


Menu2
<div id='menujohanes'>
<ul>
<li><a class='menu' href='#'>Menu1</a></li>
<li><a class='menu' href='#'>Menu2</a></li>
<li><a class='menu' href='#'>Menu3</a></li>
<li><a class='menu' href='#'>Menu4</a></li>
<li><a class='menu' href='#'>Menu5</a></li>
<li><a class='menu' href='#'>Menu6</a></li>
</ul>
</div>



pengaturan lebih lanjut mengenai menu ini,silakan baca di postingan ini :
http://djogzs.blogspot.com/2013/06/css-dropdown-menu.html


2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini


3. Setting Social media : facebook, Twitter, google,Pinterest.
*ganti url linknya

<div class='jorib'>
<a href='#' target='_blank'><div class='googlejo'/></a>
<a href='#' target='_blank'><div class='twitterjo'/></a>
<a href='#' target='_blank'><div class='facebookjo'/></a>
<a href='#' target='_blank'><div class='pinterestjo'/></a>
</div>

4. Bagaimana cara mengatasi undefined?

Buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :



Date header format:


Timestamp Format


Comment Timestamp Format


Tertarik dengan K-ON Blogger Template? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.






Bonus PSD File Header K-ON!!~xDD





Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~ :)


Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sumber : Blog Johanes




- Copyright © 2013 Surya Dhe Cheaterz - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -

Google+ Badge

My FaceBook Profile