Surya Log

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/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/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/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/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/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/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/AVvXsEhGHHCZ-tNuh6ZeMIchyAJWNoQDxAyu2onBHkUofrWv6QJHvzkA06nKvjrVax_tAARJqvDjdezd88-uJL671JVDMeI1jqI_LtzAjixweMD7vxg70Ej4suVgr9WlYMqzeYJhT5zEE-YQE6zh/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/AVvXsEgKOVp0mQOwfDIaBJGaVvtqTeF_9qGnpsOkMyxBP09NuSdZn66oUzQjD_-FPyGR8AF9jeSamCwvZk-rdBDoOxCCiGD6U6OBdEngKnmWbdnSc-J8EEUskwxrt733arsq3hWI0KUzBasGMVjn/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/AVvXsEhyqItjTJkthyjcXgeCtjURk9uPj2yPX3CBx_D9ueVeI3-2unZbPGi4f_hrb8p65ks3rz5-Hq0PgATENFCP6AToHh4HsMTtwt3ofzftfjhPxqES7ZphSJW4jACTHIM-kh-H6WNFnGPTm2hf/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/AVvXsEi9YAbNILuAxKLmieRgpFbscmwXe80qwDdSXDMstwTDW_0HEAijQI1y9roGZvdAPfxi2wzQTDsznp5Bms_qPSyqXYOeTHN47dYvI1h4RXa_U77cQTTJJcpSm4h2qL-qPMCygCgQhxsV1byO/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/AVvXsEif2DlRdiqVzXh3s9m3etvz6c04cyNZQczLa4gLEicuG6-7L2S4zdzB1r7_-IcEbJES-cVcbLHfU3GR4GmuM_riJ1bTQCCGS6Q5IHE4KuMTyRcGFSpKp_mKD5VgziKEIt5Qzpl0axJ4gVN0/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.

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.





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







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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20sjB4rL5ijAQ2JMgOlNsKxVZYMHj_p5lyJZdTi9tbt8aodohj1tfEkYJeqlgVDsuy21UPuW-TwgRGpUOjKgSKLbI_N9iDiOrtqgn-Wm1BLCYq5D3sPmqqOYV4sqnEMXw-c5iPGgJzWc/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEveLsNlqIDznyf4rbB7E30usFb9N9zCAACDwvzQLI9HvevlUjW7slJc-pgbXXRd7yaphSWpbX1dwubZtSOxGUkT31GH472NVrk7rqua7zkqrAex_f9UgsxTniFRtU4w3ARZcSafpJVrY/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUKEivsZ2qxpdN0fvaixDTgiK05I30rWe6A55BqFXb_nW9GmrMoLCkWaKsELZWA3PDjYUTxnOKJ-chiK7mcLtgAa2F4RSBGX-7IAVBwlsx8dFsaRo4xHEWniVIHifqKQ3CvRqmnGz-as/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

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

Akhirnya selesai juga template kedua bulan ini dari hasil voting di fan page saya Djogzs. tema Anime kali ini adalah To Aru Kagaku no Railgun dari anime yang saat ini masih airing. Singkatnya Toaru Kagaku no Railgun adalah cerita sampingan berdasarkan cerita asli Kamachi. Bertempat di Kota Akademi, sebuah kota di mana sekitar 80% dari 230.000 penduduknya adalah pelajar. Cerita ini mengenai petualangan Misaka Mikoto sebagai pemeran utamanya, salah satu dari psikis Level 5 yang dapat mengeluarkan listrik.







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 To Aru Kagaku no Railgun 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 To Aru Kagaku no Railgun~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