croatianstyle

Berikut template sebeulum di edit dan sesudah diedit :






Screenshot video

720 (836mb- 5jam)

#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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfPub3L27mFVUOipZk2DFBvgTZLrzKpBO4RUa_PNBaaiJrO9lQuxhD7NjzcziYjpCYKZtoqUA2Rz_VG0EYNg79ttqoGFoL_VR97ZTa_WQ6XMiZBwEmIFnFZ01pcZIVXpsy4ZZLp-MNISQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfPub3L27mFVUOipZk2DFBvgTZLrzKpBO4RUa_PNBaaiJrO9lQuxhD7NjzcziYjpCYKZtoqUA2Rz_VG0EYNg79ttqoGFoL_VR97ZTa_WQ6XMiZBwEmIFnFZ01pcZIVXpsy4ZZLp-MNISQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfPub3L27mFVUOipZk2DFBvgTZLrzKpBO4RUa_PNBaaiJrO9lQuxhD7NjzcziYjpCYKZtoqUA2Rz_VG0EYNg79ttqoGFoL_VR97ZTa_WQ6XMiZBwEmIFnFZ01pcZIVXpsy4ZZLp-MNISQ/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 :)

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>

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJADXkGNkXjWU9JCjYNIQxUEvOoKJS3AooZFVbDzO6jZ0tPtzRPPAHJgLBzzEBMKulZ_W-EC_Z70Y7XLoGlw71aYYAuj0aqguZE4Sv-HN-mAh0JEE84yTrbCgQ0CN-kal7s2W8ZcWhJo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmfsYZjIWj8phjcBnTQpvtEOVbD7PEODSKrAjTgG_E0sNuxhkH-f-HZl1-ukwO2Jgy6bTSBWcKtf61gXBvmfoORNh_imnV2EAj2B5pWMnORJyJHDT2dO_2cFFAfnfkNCHyOUYBZj6JM4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0W7g9_LFpIbaEkm-5ThzXENrG5X7RahuCNupl0h3iU-9Pfmfy7H44eaTRSizGVmNQy4nGRVFHgQbrolHka6pB8IPkJxqXHJSo8ANQIhb2JFajQnZNRpD7xJuaVeGzKyXzbVwVqv_pWOI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmDN4o_PX7kLCKrLnASjtbV3KTnj6qTRYW9rLJmuv7sosVqlVHcB2ryXwFr25To1CkttBOFug9aA2dG3_plG8EYWHnFDNOR3Kyquvcpf_3KYl92MFqj21BopNeuuzWhyphenhyphenQGgMHL3HGQ-4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnlbr89-7up7aG4BYtBA4DqU6U5ymmpaclzzlKRZl8d3QOFQmppHNpwhMPo4M1QuXHGbx_OelwG2jqEUDSHpcmK5jpSs-vPmGRV5V23zCKzY8y-GZcyV5SLbfX8z-Mq90VwL0_9yMQ4A/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.