RETIRED

SIMP

2021-02-19T12:55:00.001+07:00

Page Preloading

2014-10-27T17:39:00.000+07:00

Hi World, saya akan membagikan tutorial tentang cara membuat efek halaman page preloader menggunakan animasi CSS dan SVGs untuk diterapkan pada blogger. Trik semacam ini dapat menjadi cara kreatif untuk pengunjung yang bosan nunggu loading, tetapi tentunya juga ga akan membebani.Contohnya pada blog saya sendiri djogzs.com yang saya gunakan saat ini.

Pre Loader ini menggunakan CSS3 pada animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG animasi Loader,serta javascript agar dapat menentukan timing preloader saat proses loading data/progress yang sudah selesai upada suatu halaman dan menutup preloadernya kembali.

Singkat mengenai SVG : SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML. masih agak sulit untuk dipahami, tetapi untuk kedepanya dipastikan lebih kompleks untuk membuat object / animasi daripada CSS3.

Sebelum menggunakan trik preloader, saya ingatkan dahulu untuk membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan.

langkah pertama adalah login ke account blogger anda => Template => Edit HTML , lalu pilih 1 tema dari 3 preloader yang saya sediakan. pilih salah satu dan copy paste diatas code :

]]></b:skin>.

1. Glasshour

/* HourGlass THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #505050 url(http://3.bp.blogspot.com/-mQ_lrcu74q8/VE4Q3CXlgtI/AAAAAAAAIAY/ahW6ISKyJMY/s1600/hourglass.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #13BAFA; /* Warna garis circle saat loading */
}

2. Kurumi

DEMO

/* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(http://3.bp.blogspot.com/-682R5tf_wjo/VE4L6PigwSI/AAAAAAAAIAI/-_dKBUtsA2k/s1600/kurumi.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #DB2209; /* Warna garis circle saat loading */
}

3. Nisekoi

DEMO

/* NISEKOI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #23B0E8 url(http://4.bp.blogspot.com/-keYxDGcv-3g/VE3_Wp__oFI/AAAAAAAAH_4/-94XWoGIby8/s1600/Nisekoi.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #FFFF2A; /* Warna garis circle saat loading */
}

Copy-paste juga semua CSS dibawah ini setelah css tema tadi.

/* Pre-Loader main */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}
.ip-loader {
bottom: 20%;
}
.ip-header .ip-inner {
display: block;
margin: 0 auto;
}
.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}

/* Animasi */
.loading .ip-loader {
opacity: 1;
-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .ip-loader {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

@-webkit-keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}

.loaded .ip-loader {
opacity: 1;
}

.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Animasi header ketika loading selesai */
.loaded .ip-header {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}
.layout-switch .ip-header {
position: absolute;
}
/* End Preloader */

Selanjutnya, Copy-paste semua kode HTML dibawah ini tepat dibawah <body>

atau

<body class ...>

<div class='ip-container' id='ip-container'>
<div class='ip-header'>
<div class='ip-loader'>
<svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
<path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
<path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>

Kemudian letakan kode Js dibawah ini tepat diatas kode </head>

<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>

dan letakan ketiga Js dibawah ini tepat diatas kode </body>

<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>

Simpan template dan buka halaman blog anda dan lihat hasilnya.

Trik pre-loader ini juga dapat kamu kreasikan sendiri seperti mengganti warna,logo,dan warna circle loader
caranya :

Cari CSS seperti dibawah ini, lalu ganti url/alamat gambar milik kamu yang saya tandai pada text warna merah.

untuk warna background, ganti kode hex yang saya tandai warna biru.

/* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(http://3.bp.blogspot.com/-682R5tf_wjo/VE4L6PigwSI/AAAAAAAAIAI/-_dKBUtsA2k/s1600/kurumi.gif) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}

Untuk bagian Loadernya, ganti warna hex pada variabel Stroke

.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #DB2209; /* Warna garis circle saat loading */
}

Java script alternatif (sama aja)

<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/modernizr.custom.js' type='text/javascript'></script>

<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/classie.js' type='text/javascript'></script>
<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/pathLoader.js' type='text/javascript'></script>
<script src='http://tympanus.net/Tutorials/PagePreloadingEffect/js/main.js' type='text/javascript'></script>

Selamat mencoba dan berkreasi, terima kasih :)

Mengenai kode hex dan lain", silakan menuju halaman FAQ's

Unbreakable Machine Doll Blogger template

2013-10-11T16:38:00.001+07:00

Unbreakable Machine Doll ,atau dalam bahasa jepangnya yaitu Kikō Shōjo wa Kizutsukanai yang berasal dari light novel series yang ditulis oleh Reiji Kaitō dan diillustrasikan oleh Ruroo,tetapi musim ini sudah meluncur episode pertama animenya tanggal 7 oktober kemarin.jadi singkat ceritanya ada dalang/Puppeteer dari jepang yang datang ke akademi di inggris yang mempelajari bidang machine art engineering+ sihir.nah dalam cerita ini si puppeter memiliki automatonya,mesin boneka gadis hidup yang dibuat agar dapat bertarung dengan tangan kosong.Storylinenya saya rasa sangat menarik,jadi nyesel sekali kalau belum nonton anime'a atau membaca novel'a~

PV

Screenshot

baiklah,setelah sekian lama hiatus dari dunia blogger, mulai sekarang saya akan melanjutkan pembuatan template,tetapi mungkin akan ada jeda waktu untuk pembuatan templatenya, karena masih sibuk kuliah .__.
Mengenai Template ini, yaitu template yang sudah saya kembangkan dari versi-versi sebelumnya, dan saya sudah mempunyai template dasar/basic yang baru (dari template djogzs*update) ,anda dapat melihatnya disini :

http://testdesu23.blogspot.com/

Contoh demo blog diatas akan menjadi dasar untuk template yang akan saya buat selanjutnya,tetapi saya belum bisa share,karena masih banyak yang harus ditutupi lagi kekuranganya.
Tidak terlalu banyak perbedaanya,saya hanya membuat template ini dari awal dan lebih teratur susunan CSSnya ,tetapi struktur html dan cssnya masih sama dengan template sebelumnya,dan fitur Sharing default dari blogger sudah dapat diaktifkan dengan normal.

Template dengan tema Unbreakable Machine Doll, saya ambil warna dasar'a merah dan hitam yang terang,dengan fitur search-bar,drop-downmenu, 1 sidebar,3 kolom footer dan tampilan posting ya
ng unik : posting urutan pertama dengan ukuran 100% dan thumbnail paling besar dari semua post, posting urutan ke 2-4 dengan ukuran masing" 223px sehingga membuat posisinya menjadi 3 kolom.lalu urutan ke 5 dan seterusnya menjadi ukuran normal.yah intinya saya tidak terlalu banyak menambahkan css yang aneh", cukup sederhana saja.

Peringatan!

Sebelum anda mencoba template ini,saya ingin menginformasikan sesuatu,yaitu SOLUSI untuk menyelesaikan masalah pengaturan jumlah posting pada template yang menggunakan fitur autoreadmore, contoh : disaat kita menentukan jumlah posting sebanyak 10, tapi yang muncul hanya 5 atau kurang dari yang kita tentukan.

Solusinya yaitu : insert jump break pada seluruh artikel di blog anda,cara'a dengan menekan icon seperti gambar dibawah ini:

jika sudah akan muncul garis berwarna abu-abu yang menandakan sebagai pembatas summary blog anda jika defaultnya tidak fitur autoreadmore.tidak akan ada pengaruh dengan jumlah summary autoreadmore,tetapi jumlah posting dapat kembali menjadi normal.
Selain menggunakan cara diatas,anda juga dapat menambahkan/menyisipkan kode html dibawah ini di tiap artikel anda,dengan editorial HTML,bukan compose :

.

dan cara diatas sudah terbukti di blog saya sendiri :)

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>

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. Buka Edit HTML blogger anda lalu cari code sperti dibawah dan ganti keterangan judul dan deskripsi blog anda.
*ganti text yang berwarna merah

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

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Deskripsi blog kamu</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>

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

3. Setting Social media : facebook, Twitter dan google plus
*gantitanda pagar '#' (tlanpa tanda petik) dengan alamat link account facebbok,twitter dan google plus anda.

<div class='social-network'>
<a href='#' target='_blank'><div class='facebookjo'/></a>
<a href='#' target='_blank'><div class='twitterjo'/></a>
<a href='#' target='_blank'><div class='googlejo'/></a>
</div>
</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 Unbreakable Machine Doll Blogger template ini?
Silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.

Download via MediaFire

Demo

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.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.

Hyperdimension Neptunia Blogger Template

2013-08-10T23:27:00.001+07:00

Hyperdimension Neptunia the Animation blogger template,template kali ini tema'a diambil dari tema Anime Hyperdimension Neptunia yang awalnya merupakan seri game ps3 dan masih 1 perusahaan dengan anime Date a Live.Hyperdimension neptunia menceritakan tentang sebuah Gamindustri (Geemugyoukai). Dimana ada Makhluk yang disebut Dewi penguasa negara di dunia yang tak nyata. 4 Dewi penjaga negara: Planeptune, Lastation, Lowee dan Leanbox yang sudah membuat perjanjian untuk bekerja sama.

Karakter utama pada anime ini yaitu Neptune, vert, Noire dan Blanc. Anime ini sendiri saya rasa ceritanya sudah di skip jauh sekali sampai karakter-karakter dari Hyperdimension Neptunia mk2 ada di animenya yaitu Nepgear, Uni, Ram, dan Rom. lebih lengkap mengenai neptunia dapat dibaca Wikipedia atau PV dibawa ini :

PV :

Mengenai template ini,karakter yang saya gunakan Adalah neptune dan sisternya nepgear dengan warna dasar ungu, putih dan pink .___.

tentu saja mungkin template tidak terlalu cocok untuk laki-laki karena terlalu kawaii & moe~xD ,tetapi karena inilah jarang ada template seperti ini~ lol

Dasar pada template ini masih sama dengan template sebelumnya K-ON ,tetapi tidak responsive. Tampilan postingnya saya buat lebih sederhana dengan kotak search, social media, 1 menubar, 1 sidebar dan 3 kolom footer, pada postingan teratas memiliki ukuran full 100% dan urutan posting ke dua dan seterusnya memiliki ukuran 50% sehingga menjadikan posting dengan 2 kolom. Feature pada template ini, masih sama pula, hanya saja pada bagian related post widget pada halaman posting saya ganti dengan link list sederhana. karena related post dengan thumbnail terkadang tidak muncul pada blog" tertentu dan masih belum tau apa masalahnya karena ada yang bisa dan ada yang tidak bisa, entah pengaruh dari setting blogger atau template itu sendiri yang saya rasa tidak pernah ada masalah .__.

feature lainnya yaitu tombol back to top.

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 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>

<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>

Timestamp Format

Comment Timestamp Format

Tertarik dengan Hyperdimension Neptunia 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.

Download via MediaFire

Demo

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.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.

K-ON!! Blogger Template

2013-07-31T16:29:00.000+07:00

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

atau bisa lihat trailernya dibawah ini :

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).

<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>

<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>

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.

Download via MediaFire

Demo

Bonus PSD File Header K-ON!!~xDD

Download PSD File

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.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.

To Aru Kagaku no Railgun Blogger Template

2013-07-25T19:37:00.000+07:00

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.

Template ini menggunakan dasar warna biru agak tua, hampir sama tampilanya dengan template yang sebelum"nya,tetapi hanya saja tampilan posting pada template ini paling berbeda dari semua template yang pernah saya buat. yaitu karena penggunaan CSS3 :nth-child() Selector yang baru saja coba-coba.CSS3 :nth-child() biasanya cuma digunakan pada widget-widget tertentu,tapi saya coba terapkan pada posting maka hasilnya adalah ukuran posting,warna,atau stylenya dapat dibedakan sesuai urutan posting tersebut.Posting pertama pada template ini menggunakan ukuran full 100% dan tinggi gambar auto, posting ke 2-5 ukuran setengahnya yaitu 47,7% sehingga jadi 2 kolom posting, dan posting urutan ke 6 dan seterusnya tidak memiliki gambar alias sticky seperti tampilan posting Shiroi agar dapat sedikit hemat gambar dan lebih simple~xD

Template ini tidak menggunakan slider ataupun accordion ,tetapi ditambahkan menu kedua dibawah header dan footer dengan 3 kolom.

Screenshot

<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>

<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>

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.

Download via MediaFire

Demo

Bonus PSD File Header To Aru Kagaku no Railgun~xDD

Download PSD File

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.

Gumi Vocaloid Blogger Template

2013-07-24T15:11:00.000+07:00

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.

penasaran suaranya seperti apa/ silakan putar musik dibawah ini :

Dan yang satu ini salah satu lagu favorite saya yang di buat oleh 40mp yang berjudul Kamera Boy.

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>

<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.

Download via MediaFire

Demo

Bonus PSD File Header Gumi Vocaloid~xDD

Download PSD File

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.

Shiroi Blogger Template

2013-07-17T06:16:00.000+07:00

hello again guys, pada kesempatan ini,Sudah lama ga buat templatie Minimalist, jadi saya membuat template dengan tema minimalist yang bernama shiroi,apa itu shiroi? shiroi berasal dari bahasa jepang yang bernama shiro,bukan nama anjingnya shinchan loh~xD ini karena saya tidak tahu harus memberi nama apa pada template ini .___. lol

Template responsive yang sederhana ini menggunakan warna dasar hitam,putih dan hijau miku~
Pada sidebar diberikan fungsi buka/tutup seperti template hatsune miku dan diberikan fitur Featured content slider yang agak" mirip dengan slider saya,slider original dapat dilihat disini .tidak boleh sama,nanti terlalu mainstream~xDD

Screenshot

<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>

<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 Slider

<div id='wrapper'>
<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'>
<img alt='' src='http://3.bp.blogspot.com/--q9C3sj00Vw/UeWicMxf-iI/AAAAAAAAGyQ/PMFH4fDu07U/s1600/kurumi-tokisaki-icon.jpg'/>
<span>Kurumi Tokisaki</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'>
<img alt='' src='http://1.bp.blogspot.com/-wqnn_Cfv-4A/UeWibzM6AVI/AAAAAAAAGyA/YEgvrdodl6M/s1600/Date-A-Live-icon.jpg'/>
<span>Date A Live</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'>
<img alt='' src='http://4.bp.blogspot.com/-40eSpcTLPXo/UeWicqqhD2I/AAAAAAAAGyU/noEoeYNVxZI/s1600/miku-icon.jpg'/>
<span>Hatsune Miku</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'>
<img alt='' src='http://1.bp.blogspot.com/-J20o5_SVDrc/UeWicL-_0DI/AAAAAAAAGyE/NI_VKQ10jcw/s1600/hentai-ouji-icon.jpg'/>
<span>Hentai Ouji</span></a></li>
</ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='http://1.bp.blogspot.com/-YTEc5wsuz6w/UeWRmGkQkEI/AAAAAAAAGxM/xx_uiENacfs/s1600/slide1.jpg'/>
<div class='info'><h2><a href='#'>Kurumi Tokisaki</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://2.bp.blogspot.com/-VkM4yqTpv4g/UeWRmXxw1qI/AAAAAAAAGxQ/OJ8jH0rfChc/s1600/slide2.jpg'/>
<div class='info'><h2><a href='#'>Date A Live</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://1.bp.blogspot.com/-8aKJ4VSlXks/UeWRnNnRnkI/AAAAAAAAGxc/JEpVfn31moE/s1600/slide3.jpg'/>
<div class='info'><h2><a href='#'>Hatsune Miku</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://4.bp.blogspot.com/-RsWAv1AxPZw/UeWRovA9WaI/AAAAAAAAGxk/V-e4ZpwcN6A/s1600/slide4.jpg'/>
<div class='info'><h2><a href='#'>Hentai Ouji</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>

*Merah: Judul Slider bagian kanan.
Biru : alamat gambar Thumbnail (yang kecil )
Orange : Deskripsi
Hijau : Url gambar slider
Ungu muda : Ganti tanda pagar '#' yang bewarna ungu dengan alamat link yang dituju.
*Ungu tua : Judul slider bagian slide di kiri.

*Note : Judul Disamakan berdasarkan urutan.

Tertarik dengan Shiroi 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.

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Video Styling Post Blogger Template

2013-07-16T10:43:00.002+07:00

Halo dunia, kali ini saya akan memberikan video demonstrasi dasar" cara merubah tampilan posting pada template lama saya DJOGZS.

Video ini dimaksudkan agar orang" dapat tahu,paham dan mengerti dasar" pengeditan template blogger,tetapi didalam video ini hanya dikhususkan pada bagian posting. Video ini juga akan menjawab pertanyaan anda misal :

Bagaimana sih cara merubah tampilan posting pada template "A" seperti tampilan posting template "B" ? apakah bisa diberikan kodenya/bagaimana caranya?

Caranya tentu saja tidak semudah yang dibayangkan,karena setiap template yang saya buat struktur HTMLnya sudah berubah meskipun beberapa nama CSSnya sama 100%, Saya hanya sebatas berbagi/sharing, jadi jika anda meminta saya untuk mengedit template, tolonglah untuk berusaha sendiri jangan selalu tergantung pada orang lain, be an single fighter , atau jika ingin mempunyai tampilan posting template "A" , silakan langsung mengganti template tersebut.

nah,pertama anda download Video dibawah ini,ukuranya sudah saya pecah menjadi 2 bagian.
satukan kembali/ JOIN dengan HJ split.

Download Via Media Fire 2 part

Part 1

Part 2

Tools

1. Browser Google Chrome versi terbaru. (Rekomendasi)

2. Template dasar :DJogzs Blogger Template

A. Review

Sebelum memulai penjelasan saya tentang video diatas,ada baiknya untuk mereview kembali secara SINGKAT DAN JELAS fungsi" HTML dibawah ini,perhatikan struktur html posting dibawah ini.

(klik untuk perbesar gambar)

1. Pada urutan terluar/layer pertama adalah:

<b:if cond='data:blog.pageType != "item"'>.... </b:if>
code di atas adalah html tag conditional yang berfungsi agar element yang ada didalamnya tidak tampil di hlalaman bacaan,bagaimana mengetahuinya? secara teori jika kita perhatikan data:blog.pageType !=.artinya data blog(posting) ditargetkan ke page/halaman negasi sama dengan(!=),jadi selama ada kode negasi(!) element didalamnya tidak akan menampilkan di halaman tersebut.penjelasan lebih lanjut dapat anda baca di sini

2. post hentry(saya kosongkan cssnya),jadi yang dipsakai adalah postright yang merupjakan element terpenting untuk mengatur posisi posting pada bagian akhir/luar.

<div class='post hentry'>
<div class='postright'>
...
...
</div></div>

3. Kode HTML auto readmore di bawah ini,berfungsi untuk menampilkan summary dan thumbnail secara otomatis dari postingan kita dengan pengaturan yang dapat diatur ukuran dan jumlah kata deskripsi atau summary posting.

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

ketika diterapkan,maka html akan otomatis berubah menjadi :

<div id="summary6704815413655614278">
<div class="crop">
<img src="http://gambar.jpg" width="270px;"></div>
<div class="posting">
deskripsi</div></div>
oleh karena itu setiap template saya,ketika di cek html gambar dan deskripsi template saya adalah .crop dan .posting,saya sengaja memberikan nama itu agar mudah diingat,crop=potong gambar,posting=deskripsi~xDD

4. setelah itu dibawah html autoreadmore diatas tadi,adalah html yang dapat menampilkan judul postingan kita.

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Permanent Link to " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Permanent Link to " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

5. Selanjutnya adalah html jomore,fungsinya hanya sebagai pembatas wilayah didalamnya yang berisi html yang berfungsi untuk menampilkan jumlah komentar dan tanggal default posting

<div class='jomore'>
<b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='"Comment on " + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
<b:if cond='data:post.dateHeader'>
<div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

6. html div style='clear:both' atau biasajuga menjadi div class='clear' atau sebagai pemanggil fungsi css clear:both; berfungsi sebagai break/ganti baris,page break.posisi float akan normal.

<div style='clear: both;'/>

7. Html dibawah ini adalah html yang berisi link yang ditujukan ke alamat posting berfungsi menjadi tombol read more.

<div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a></div>

8. Dan yang terakhir ada html categ(categories) yang berfungsi untuk menampilkan tag/kategori posting tersebut.

<div class='categ'><b:if cond='data:post.labels'>Tag : <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=3"' expr:title='"View all posts in " + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != "true"'/>
</b:loop></b:if></div>

Penjelasan Lain" mengenai HTML :
-mengenai pengenalan html class dan id

-mengenai dasar" html dan CSS

perlu saya tambahkan mengenai dasar" html dan CSS,
Intinya adalah HTML berfungsi sebagai pondasi atau kerangka template pada suatu website entah itu blog/forum/blog/wapsite.
sedangkan CSS dari singkatanya sudah dapat diketahui Cascading Style Sheets yaitu sebagai pengatur style yang ditujukan pada suatu element html tertentu.
misalkan saya membuat css class dan ID dengan nama :
.johanes{...} dan #johanes{...}

maka HTMLnya akan menjadi

<div class='johanes'>...</div> (untuk fungsi class)

dan

<div id='johanes'>...</div> (untuk fungsi ID)

HTML yang dibuat harus dibuat dengan awalan div dan diakhiri juga dengan slash div (/div)

atau bila html tersebut adalah single fighter/forever alone(bahasa gaulnya~xD)

posisi slash "/" akan berada di belakang,misal <div class='johanes'/>

pemasangan link: <a href='http://alamatyang dituju.html'>nama link</a>

untuk pemasangan gambar dengan html : <img src='http://alamatgambar.jpg'/>
#khusus untuk pemasangan gambar,karena cuma berfungsi untuk pemanggilan gambar,maka posisi slash harus berada diakhir,jika tidak,ketika anda menyimpan kedalam template biasanya akan terjadi error syntax atau html tidak valid.

2. Penjelasan pada video demo

Pada langkah pertama,yang saya lakukan yaitu merubah ukuran element/html posting bagian terluar,harus diatur ukuranya agar tepat menjadi 2 kolom dan tidak terjadi overflow jika di zoom-in/zoom-out.

Kedua yang saya lakukan adalah memunculkan kembali element deskripsi posting yang awalnya memang dihidden/sembunyikan dengan menghapus css display:none;,lalu diatur kembali css'a agar posisi deskripsi berada di sebelah kanan thumbnail posting.

setelah itu cara memindahkan judul posting ke atas thumbnail,caranya adalah memindahkan html tersebut,jadi bayangkan saja jika html itu adalah sebuah tumpukan batu bata,memindahkan dari layer bawah keatas bukanlah dengan css,karena fungsi html kalau menurut saya sendiri hanya sebuah pondasi/kerangka ,sedangkan css hanya untuk mengatur style pada suatu element html.
contoh gambaran:

pada menit ke 13 - 43 adalah membuat menu hover + = readmode dengan element lain yang akan di hover.

jika kalian perhatikan bagaimana bisa ketika element jomorelink ketika di hover, element jomore yang beranimasi?
triknya adalah memindahkan seluruh isi html jomore kedalam tombol menu readmore yang merupakan element dari jomorelink,possisinya menjadi seperti ini

<div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a>

<div class='jomore'>
<b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='"Comment on " + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
<b:if cond='data:post.dateHeader'>
<div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

</div>

element jomore berada di dalam jomore link,lalu selanjutnya penggunaan css

pertama,element jomore kita atur dahulu posisinya,misal pada video saya letakan tepat diatas thumbnail gambar dengan posisi absolute/bebas yang berada di dalam element postright agar tidak keluar batas dari wilayah element tersebut yang mempunyai posisi relativ,setelah itu kita sembunyikan dengan memberikan css opacity:0; pada jomorelink agar dapat disembunyikan juga;
setelah semuanya sudah tak terlihat,pertama kita buat hover efek pada tombol readmore agar dapat dimunculkan kembali ketika kita arahkan kursor ke posting dengan cara menambahkan css:

.postright:hover .jomorelink{opacity:1;}

arti css diatas adalah ketika kita arahkan kursor ke wilayah html postright,maka akan menampilkan efek hover pada element jomore link yaitu opacity menjadi 1.agar efek hovernya bisa halus,digunakanlah css3 transisi (transition: all 0.3s ease-in-out;)

setelahh berhasil menampilkan tombo menu readmore,selanjutnya adalah memuncukan kembali element jomore yang berada didalam element jomorelink dengan cara menambahkan css:

.jomorelink:hover .jomore {opacity:1}

setelah berhasil sampai disini,kita tinggal atur posisi,warna atau backround yang kita inginkan,untuk merubah posisi element jomore,akan sangat berpengaruh juga pada element html jomorelink,oleh karena itu pada video saya sedikit mengalami kendala untuk mengaturnya.

pada element jomore tersebut jika merasa sudah aman,kita bisa styleing lagi efek animasinya,seperti pada video,saya posisikan awal bottom:-65px,lalu efek hovernya ditambahkan bottom:0px;.jadi posisi nya akan berubah atau sliding ketika saya hover tombol readmorenya.

bila sudah dirasakan cukup rapih posisinya,barulah kita styling lagi seperti merubah warna/background pada judul,deskripsi ataupun footer posting tersebut. oia,apabila kita tambahkan border meskipun itu 1px,posisi bisa berubah,jadi ukuran element terluar haus diatur lagi lebarnya karena 1px sangat memperngaruhi.

Demikian penjelasan singkat cara Styling posting pada template dasar DJogzs,semoga bermanfaat ^^ dan mengerti setelah melihat video demo saya dan membaca dasar " tentang html dan css yang saya berikan. Selamat belajar,Indonesia semangat~
*Baca dan pahami,jangan pernah mau disuapi trus,cari tahu sendiri,informaasi beredar luas diinternet,teruslah berlatih praktek agar mudah dipahami sendiri untu belajar secara otodidak,setel lagu vocaloid/anime biar semangat meskipun ada miliyaran code" didepan anda.

Bagi yang mengalami kegagalan cuma muncul suaranya saja , silakan download tsc2 standalano.

http://techsmith.custhelp.com/app/answers/detail/a_id/3558/~/camtasia-studio-8%3A-download-the-tsc2-standalone-codec

thx to dian ardi ^^

atau instal dan download codec

DJogzs Blogger Template

2013-07-15T21:19:00.000+07:00

Djogzs Blogger Template.apa sih itu DJogzs? Djogzs adalah sebutan unik untuk blog ini yang diambil dari nama belakang sendiri,"Johanes Djogan" xD. nah pada kesempatan kali ini,saya mau berbagi template lama dengan maskot Rikka waktu masih normal dari anime Chuunibyou~xD.karena tampilan blog saya yang sekarang sudah berganti(mungkin akan diganti lagi~xD) dan saya dengar juga banyak yang tertarik dengan template sederhana ini,maka saya bagikan secara free.

Bisa Dikatakan ini adalah template dasar dari semua template yang pernah saya buat.misal date alive,hatsunemiku,kurumi,devil survivor dan lainya.jika anda perhatikan/mencoba semua template yang pernah saya share,struktur dan css menu,autoreadmore footer selalu sama tidak ada bedanya.yang berbeda hanya tampilanya karena sudah dimodifikasi html dan css'a secara manual~xD

Mengenai template ini sendiri,hanya template sederhana dengan tampilan posting 3 kolom,dan 3 kolom footer,tetapi,sebenarnya footer itu juga adalah sidebar.jadi widget yang ada di footer,saat kita membuka halaman posting blog,secara otomatis akan menjadi sidebar~xD

Untuk teman" yang masih belajar,mungkin template ini cocok untuk belajar merubah tampilan blog agar lebih menarik.

Screenshot

Halaman depan

Halaman posting

<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><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='#'>Deviantart</a></li>
<li><a href='#'>Pinterest</a></li>
</ul></li>
<li><a href='#'>Exchange link</a></li>
<li><a href='#'>Guest book</a></li>
<li><a href='#'>MediaFire</a></li>
<li><a href='#'>About Blog Johanes</a></li>
<li><a href='#'>Privacy Policy</a></li>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='dark_menu'> ....</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'/>

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

3. Mengganti gambar Header Blog
Buka edit HTML lalu cari url dibawah ini

http://1.bp.blogspot.com/-dOs60P0v14c/UU8O3NLjZtI/AAAAAAAAF7Y/x9J_tvL-4fw/s1600/logoblogjohanes2.jpg

lalu ganti dengan Url gambar yang and inginkan.

* New Update Djogzs Blogger template 7/13/2013
Fixed post height and position.

Cara memperbaiki/How to fix

Cari CSS:
.jomore{isi css;}

lalu tambahkan:
height: 30px;
overflow: hidden;

setelah itu cari CSS lagi:

.post h2 {isi css;}

lalu tambahkan:
height: 14px;
overflow: hidden;

Tujuanya yaitu agar tinggi posting memiliki ukuran yang sama sehingga posisi posting akan sejajar.

*Update Link Download template
bagi yang sudah terlanjur menggunakan template ini,silakan download dan upload kembali template ini untuk mengupdate css template ini atau dapat lakukan cara diatas,mohon maaf atas kekuranganya, terima kasih.

Download via MediaFire

Demo

*Bonus PSD File Header Djogzs~xD

Download

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Lightbox Blogger dengan Jquery

2013-07-14T22:46:00.000+07:00

Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD

Contoh

Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.

Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD

Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Setelah itu letakan Jquery diatas ini tepat diatas kode </body>

Jquery

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.

Semoga bermanfaat,Arigatou Gozaimasu~

Ore no Imouto Blogger Template

2013-07-13T21:30:00.000+07:00

Ore no Imouto, atau yang biasa disebut Oreimo kependekan dari Ore no Imōto ga Konna ni Kawaii Wake ga Nai( My Little Sister Can't Be This Cute)adalah seri Japanese novel yang ditulis oleh Tsukasa Fushimi, dan diillustrasi oleh Hiro Kanzak.Seri manga ini sudah diadaptasi menjadi anime dan sudah mencapai Season 2 bulan kemarin.Ore no Imouto menceritakan tentang seorang adik perempuan yang bernama Kirino yang memiliki hobi akan eroge yang hanya diketahui oleh sang kakak yaitu Kyuosuke yang bertugas menjaga agar orang-orang tidak mengetahui hobi adiknya yang aneh..Kalau bagi kalian yang sudah nonton sampai S2 pasti sudah tahu.~xD
Lebih lanjut Mengenai anime ini dapat anda lihat di my animelist.

Template Cerah dengan warna dasar kuning biru muda ini juga masih sama seperti template Sebelumnya Hataraku maou-sama,yang berbeda yaitu style post thumbnail dengan 2 kolom,dan template ini menggunakan system responsive sehingga dapat menyesuaikan dengan ukuran layar dekstop.

Nah akhirnya selesai juga,cukup lelah juga loh membuat 2 template dalam waktu yang bersamaan dengan template TITAN.Untuk Tema template selanjutnya,saya tunggu pemilihan suara terbanyak di fan page saya DJOGZS karena saya sedang liburan kuliah,jadi punya waktu untuk mengisi liburan saya di depan laptop(forever alone) .___.,tetapi karena liburan juga terkadang saya tidak bisa online setiap hari dikarenakan ada sedikit urusan dengan perkuliahan dan urusan keluarrga yang mengharuskan saya bolak-balik setiap sabtu jakarta-Lippo cikarang.

Okay,semoga Harimu menyenangkan,ganbatte Kudasai~ ^^

Ore no Imouto

<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>

<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. Setting tanggal posting / 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 Template Ore no Imouto ini? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Shingeki No Kyojin Blogger template

2013-07-12T20:31:00.000+07:00

Shingeki No Kyojin atau biasa disebut Attack on Titan adalah sebuah serial manga dan anime Jepang yang saat ini masih airing sampai episode 25 .Anime ini Cukup Ramai dan Dikenal luas sejak pertama rilisnya pada sebuah anime,sama seperti sword art online yang heboh sekali,sampai" bisa dikatakan Cosplaynya sudah mainstream :v

Tema Template kali ini juga merupakan Hasil Voting terbanyak di fanspage minggu lalu bersamaan dengan template Oreimo.
Template ini mempunyai 1 kolom posting,sidebar,dan 3 kolom widget footer serta menggunakan warna dasar coklat gelap agar sesuai dengan tema pada header template ini.Featurenya masih sama dengan template" sebelumnya,yang berbeda adalah template ini menggunakan system responsive sehingga ukuran body template dapat otomatis menyesuaikan dengan ukuran layar dekstop.

Screenshot

<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>

<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>

Timestamp Format

Comment Timestamp Format

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

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hataraku Maou-sama!

2013-07-05T14:47:00.001+07:00

Hello friends, template tema kali ini adalah Hataraku Maou-sama! yang merupakan hasil voting terbanyak dari Fanspage di facebook saya.

PV

yeah,meskipun Animenya sendiri sudah tamat,tapi masih banyak penggemarnya yang ingin menunggu season 2 nya.
Template sederhana ini dengan warna dasar biru cerah,logo header emilia yusa,maou dan Chiho chan.kawaii desu ne?? ne?? ne?? xDD
Dan template ini dilengkapi dengan social bar,page navi numbering,dan lightbox blogger yang sudah berfungsi /fix.
next mengenai Style posting di halaman utama pada template ini juga sedikit berbeda dengan yang lainya,yaitu ukuran gambar maksimal hanya 535px dan tinggi 330px.apabila gambar pada posting memiliki ukuran lebih dari 535px,maka deskripsi akan otomatis berpindah posisi tepat diatas gambar.dan apabila gambar pada posting memiliki ukuran kurang dari 415px,maka deskripsi posting akan otomatis menyesuaikan posisinya tepat disebelah gambar.

Serta jika postingan kita tidak memiliki content gambar,maka descripsi posting akan otomatis menyesuaikan ukuranya pada posting.jadi artikel yang ingin kita posting,dapat berubah" stylenya tergantung ukuran gambar yang kita terapan.untuk mengatur ukuran gambar,dapat ditentukan sendiri saat memposting sebuah artikel

Screenshot

<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>

<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>

Timestamp Format

Comment Timestamp Format

Tertarik dengan Template Hataraku Maou-sama! Template ini? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.

Download via MediaFire

Demo

*Bonus PSD File Header Hataraku Maou-sama!~xD

Download

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Yui Blogger Template

2013-06-27T00:00:00.000+07:00

Template Yui Orange Garden pop,Template yang sebelumnya digunakan pada blog partner saya yaitu Yui-karaoke. Tetapi karena sudah berganti template lagi,maka template ini sudah didak dipakai dan sudah diperbolehkan untuk dibagikan, tetapi mungkin akan sedikit berbeda karena saya sudah melakukan beberapa perbaikan pada template ini dan yang pasti kata/logo yui-karaoke sudah dihapus.Template ini saya buat dua versi yaitu versi lama dan versi baru .bedanya versi baru ini hanya ada penambahan slider dan tampilan widget sidebar,header yang berbeda dengan versi lama.Versi baru ini sebenarnya sudah lama saya kerjakan, tetapi baru selesai tadi karena dari dahulu tidak sempat untuk memperbaikinya .__.

Template ini cukup sederhana dengan warna dasar orange dan putih.pada template versi baru,slider hanya tampih pada halaman depan saja serta penambahan page numbering yang sederhana.

Old Version

New Version

<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='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Anime</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 / 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

4. Setting Slider

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='slider3'>
<div id='mask1'>
<ul><li>
<a href='#' title='#'><img src='http://4.bp.blogspot.com/-XkVm5jkBwaY/UcxlUyCxUwI/AAAAAAAAGcU/AGKHgZPUmUA/s1600/slide1.jpg'/></a>
<div class='baka'>
<span><h2>Kurumi</h2></span>
<h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town's bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='http://1.bp.blogspot.com/-fI3qaIXn-Is/UcxlUgmMJZI/AAAAAAAAGcQ/11g3At-fTgs/s1600/slide2.jpg'/></a>
<div class='baka'>
<span><h2>Tohka</h2></span>
<h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (示現エンジン Jigen Enjin?), which solved an energy crisis five years prior.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='http://1.bp.blogspot.com/-qcrPXWpQX_Q/UcxlVBKF5LI/AAAAAAAAGcg/jYhtrA2Nxwc/s1600/slide3.jpg'/></a>
<div class='baka'>
<span><h2>Snow Miku</h2></span>
<h3>Eita Kidō enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='http://1.bp.blogspot.com/-nZnn2XTIhgs/UcxlWctS9NI/AAAAAAAAGco/XWV77ju8r5g/s1600/slide4.jpg'/></a>
<div class='baka'>
<span><h2>Tsukiko</h2></span>
<h3>The story is set in a world embroiled by war between Humans and Demons. The Humans' greatest hero invades the Demon King's castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div class='overlay1'>
</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

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

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

CSS Dropdown Menu

2013-06-08T14:24:00.001+07:00

Hello,kali ini saya akan berbagi Widget CSS Dropdown Menu,yaitu Menu dengan css yang sederhana yang dilengkapi dengan fungsi Dropdown dan Sub menu .Penggunaanya sangat praktis dan mudah untuk dimodifikasi.Contohnya kalian bisa melihat langsung dibawah ini.Ohh,saya ingatkan sebelum mencoba widget ini,ada baiknya membackup/download template kamu agar tidak terjadi sesuatu yang diinginkan.

DEMO :

Untuk memasang menu seperti diatas,pertama login ke account blogger kamu,lalu pilih menu template,pilih edit html, lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#menujohanes{
width: 100%; /* panjang menu */
margin: auto; /* posisi menu auto */
background: #fafafa; /* warna background */
height: 49px; /*tinggi menu*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid #ddd;
text-transform: uppercase; /* Huruf besar */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index: 99;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; /* panjang menu */
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover{
background:#557FFF; /* warna background ketika diarahkan*/
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}
#menujohanes ul li a:hover {
color:#fafafa;} /* warna text ketika diarahkan */
#menujohanes ul li a{
color: #666; /* warna text */
padding: 0 10px;
line-height:25px;
font-size:11px; /* ukuran text */
display:block;
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
#menujohanes ul li ul li{float: none;position: relative;}
#menujohanes ul li ul{
position: absolute;
top:49px;
left:0;
display: none;
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
width:150px;
border-radius: 0px 0px 5px 5px;
background: #fff;}
#menujohanes ul li:hover > ul{display: block;}
#menujohanes ul li ul li a{line-height:25px;}
#menujohanes ul li ul li ul{
position: absolute;
top:0; left:150px;
display: none;
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px;
width:150px;
background: #fff;}
#menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}

Selanjutnya,copy-paste HTML dibawah ini diantara kode <body>...</body> tergantung anda ingin meletakan posisi menu ini.

HTML

<div id="menujohanes">
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a 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 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 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 href="#">Clients</a></li>
<li><a href="#">Email</a></li>
</ul></div>

*Ganti tanda pagar dengan url link,dan namae link'a

Setelah selesai, simpan,dan lihat hasinya.jika sudah berhasil,tahap selanjutnya adalah mengatur isi menu dan link url pada menu anda.

Setting HTML

1. Normal menu.

Anime

<li><a href="#">Anime</a></li&gt

;

2. Drop down menu.

Download

<li><a href="#">Download</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>

3. Sub menu.

Download
- Naruto

<li><a 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>
</ul>
</li>

4. Multi Sub menu.

Download
- Naruto

<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a><ul>
<li><a href="#">Anime</a><ul>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>

Selamat mencoba dan semoga bermanfaat,terima kasih.

Devil Survivor 2 Blogger Template

2013-05-25T22:24:00.002+07:00

Template kali ini,adalah template dengan tema devil survivor 2 yang merupakan film anime series dari the Shin Megami Tensei: Devil Survivor 2 video game oleh Atlus.Animenya sendiri saat ini baru mencapai episode 8,buat yang belum tahu anime ini,segera tonton supaya tidak penasaran,meskipun monsternya mirip" (sama persis) dengan anime persona,tapi menurut saya yang satu ini wajib bagi para otaku~xDD.

Next mengenai template ini,template sederhana warna dasar htam-biru,posting 3 kolom dan 1 sidebar,layout template ini hampir sama dengan template yang baru saya buat sebelumnya "Kurumi tokisaki",bedanya template ini hanya menggunakan 1 sidebar dan ditambahkan fitur accordion/buka-tutup dan dengan style post yang sedikit berbeda~xD.

Screenshot

<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='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Anime</a></li>
</ul>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='dark_menu'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</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='#'>Lorem Ipsum</a></li>
</ul></li>

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, Rss,Pinterest.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>
<a href='http://www.pinterest.com/id%20kamu'><div class='pinterestjo'/></a>

Tertarik dengan Template Devil Survivor 2 Blogger Template?
Silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.Terima kasih

Download via MediaFire

Demo

*Bonus PSD File Header Devil Survivor 2~xD

Download

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hentai Ouji to Warawanai Neko Blogger Template

2013-04-02T00:48:00.002+07:00

Hello guys,Template yang saya buat kali ini adalah template yang tema'a di ambil dari Anime/Komik Manga Hentai ouji to warawanai neko ,yang menjadi salah satu anime yang ditunggu tahun ini.apalagi pembuat illustrasi karakter anime ini adalah kantoku sensei seorang mangaka dan illustrator yang cukup terkenal dijepang,pasti yang otaku,suka gambar manga pasti taukan? karena gambarnya yang bagus dan punya karakternya sendiri.lolicon~xD

PV :

Hentai ouji to warawanai neko/The "Hentai" Prince and the Stony Cat:The Perverted Prince and the Cat Who Won't Smile,pertama kali mendengar kata hentai,pasti sudah pada negatif,tapi jangan salah sangka,meskipun dari judulnya hentai,bukan berati ceritanya juga hentai 100%,tetapi hanya sebatas ecchi,tapi lebih banyak comedynya.genre:Comedy, Ecchi, Harem, Romance, School Life, Seinen, Supernatural~xD .Animenya akan diriis bulan April 2013 nanti,wah,jadi tidak sabarkan~

Next,mengenai template ini,masih sama seperti sebelumnya,tetapi saya tetap membuat blog ini beda dan mempunyai keunikan tersendiri yang beda daripada template yang lain, yang pertama yaitu jquery masonry yang fungsinya akan membuat posting otomatis tersusun dengan rapih/floating,lalu jika kita arahkan kursor ke judul posting,maka akan menampilkan label,judul post dan tanggal posting default.Template sederhana ini menggunakan warna dasar gelap: hijau tua tapi tetap soft,1 sidebar dan 3 kolom footer dan social icon facebbok,twitter dan rss.navigasinya pun saya modifikasi dengan fungsi hover,dan kalau diperhatikan sejauh ini,baru template ini yang menggunakan trik ini~xD.lalu pada bagian halaman posting sudah dilengkapi dengan related post widget otomatis,dan sharing via social media.

Screenshot

<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='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</a></li>
</ul>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</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='#'>Lorem Ipsum</a></li>
</ul></li>

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, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

4. Mengatasi Js Masonry yang tidak aktif/broken link js
Jika ada masalah pada susunan posting yang hancur atau tidak semestinya,masalahnya bisa terletak pada javascript,solusinya,silakan download dan re-upload 3 javascript dibawah ini.

https://sites.google.com/site/djogzs/js/modernizr-2.5.3.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
https://sites.google.com/site/djogzs/js/jquery.masonry.min.js

Tertarik dengan template Hentai Ouji ini?
Silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.Terima kasih

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

SkyBlue Blogger Template

2013-03-11T22:45:00.002+07:00

Hello lagi sobat,template kali ini adalah template minimalist+responsive dengan jquery mansory dengan warna dasar biru langit dan putih,yang merupakan template dasar blog saya sendiri.

Preview

<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='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</a></li>
</ul>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</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='#'>Lorem Ipsum</a></li>
</ul></li>

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 tanggal posting / 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

4. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

Tertarik dengan template SkyBlue ini?silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.terima kasih

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Date A Live Blogger Template

2013-03-10T10:53:00.000+07:00

Hello guys,maaf kalau menunggu lama,karena semester ini kuliah saya sangat padat,jadi selalu tidak sempat untuk membuka blog,nah template yang akan saya share kali ini tema'a saya ambil dari anime Date A Live yang belum aired,tetapi kalau dilihat dari previewnya,mungkin anime ini sangat ditunggu" rilisannya pada tanggal 30 maret, 2013 yang artinya bulan depan nanti.maka dari itu template kali ini saya buat semenarik
mungkin temanya,tetapi saya tetap mempertahankan penggunaan CSS3 dari pada gambar,kecuali pada bagian headernya yang ukuranya cukup besar.CSS3 loading system 10s hasil kreasi ini yang saya terapkan hanya ada pada halaman depan blog,bisa anda lihat screenshot dibawah,saat pertama membuka demo template ini,yang tampil hanya bagian header dan muncul loader yang beranimasi dan akan menampilkan isi content pada blog ,ditambah lagi penggunaan jquery Accordion(tutup-buka sidebar) dan Jquery Mansory yang memungkinkan post pada halaman depan akan responsive terhadap tinggi posting yang berbeda",maka akan sorting dengan otomatis.responsive di template ini bukan berarti template ini yang responsive,tetapi hanya pada bagian posting saja.mungkin kalau untuk komputer yang kecepatan internetnya kurang cepat,mungkin akan terasa berat,tetapi karena disini saya merasa normal" saja(tested browser mozilla,chrome,safari),jadi saya rasa tidak masalah.
Untuk Contohnya kalian bisa melihat pada screenshot dibawah ini atau kamu bisa melihat demo'a langsung.

Screenshot

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='menusjohanes'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'/></li>
<li class='jolor' data-role='dropdown'><a href='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li class='jolor' data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li class='jolor' data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li class='jolor'><a href='#'>Report</a></li>
<li class='jolor'><a href='#'>Watch</a></li>
</ul>

Jika kamu inin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam html <ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</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='#'>Lorem Ipsum</a></li>
</ul></li>

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'/>

Timestamp Format

Comment Timestamp Format

Mengenai Sidebar,sama seperti template hatsune miku, Template ini menggunakan 2 Sidebar,tetapi dijadikan menjadi 1 kolom.berdasarkan gambar layout dibawah ini,sidebar bagian atas tidak menggunakan Fitur Accordion/tutup-buka,sedangkan sidebar bagian bawah menggunaan fitur accordion/tutup buka widget.

4. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

*Jika ada masalah pada sidebar yang tidak berfungsi accordion'a/tutup-bukanya,masalah umum selalu terletak pada javascriptnya.
Solusi:
download/ganti Js dibawah ini,lalu upload sendiri pada hostingan js kalian,misal di code.google.com atau https://sites.google.com

https://sites.google.com/site/djogzs/js/accordion-menu.js

Tertari dengan template date A Live ini?silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.terima kasih

Download via MediaFire

Demo

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Notifikasi Sederhana dengan CSS3

2013-02-18T13:16:00.004+07:00

Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi"
.nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).

Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

Screenshot

CSS

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

#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>

Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>

1. Pengaturan posisi notifikasi.

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

Atas,kanan.
right: 10px;
top: 10px;

Bawah,kanan.
right: 10px;
bottom: 10px;

Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.

top:atas
bottom:bawah
right:kanan
left:kiri

Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)

Untuk setting lainya seperti background(menggunakan rgba color) baca disini, border-radius baca disini dan contohnya disini ,dan selebihnya dapat anda lihat pada comment css yang saya sertakan diatas.

Baiklah,Sekian penjelasan saya mengenai Notifikasi sederhana dengan CSS3 yang saya buat sendiri,semoga bermanfaat minna-san~ arigatou gozaimasu~ :v

Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hatsune Miku Blogger Template

2013-02-10T00:04:00.003+07:00

Apa kabar sobat,tetap semangat membuat template, tidak tanggung" saya membuat video preview-nya juga saking niatnya~xD

Video Preview

HD: http://youtu.be/Bm-rNC9of-E
DL: Download Video
#Biar greget~xD

Template kali ini bertema Hatsune Miku(Favorit saya~xD)(Karena saya rasa template yang dahulu kurang rapih),yang merupakan Hasil Redesign dan perkembangan dari template Metrominimalist .Dengan Design Warna Dasar Hijau cerah dan soft,dilengkapi dengan kotak search,rss,twitter dan facebook.style Post thumbnail yang sederhana,tetapi menggunakan hover efek,sehingga posting yang tadinya simple,menjadi unik dengan efek hover css3 animasinya yang soft juga.pada halaman postingnya,tidak jauh beda dengan template sebelumnya,tetapi yang berbeda yaitu related post pada template ini,menggunakan thumbnail yang sebenarnya saya temukan dari hasil browsing di google.dan ujung" sumbernya yaitu dte.web.id.Jadi Tolong jangan menanyakan ke saya ini itu tentang widget ini,tanyakan ke pembuatnya =__=" .related post yang ada di template ini sebelumnya juga sudah saya edit,sehingga mungkin akan sedikit berbeda dengan dte.web.id.

Dan ternyata template ini tidak jauh beda dengan Template blog yui-indo,hampir mirip,tapi berbeda.kenapa mirip?

ini juga dimaksudkan untuk menghindari dan mencegah beberapa oknum/pelaku kejahatan (lol) yang ingin melakukan aksi penjiplakan dan pencurian design template, entah kenapa template yui-indo menjadi most wanted =___="

Contohnya:

Jadi Oleh karena itu saya jawab saja disini :
#Template yui-indo tidak untuk dibagikan / not for share. So,please don't be plagiarism.

ScreenShot

<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='#'>About</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='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</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='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</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'/>

Timestamp Format

Comment Timestamp Format

4. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat feed rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman fan page facebook'><div class='facebookjo'/></a>

Oia,berkaitan dengan Video Preview diatas,Template ini menggunakan 2 Sidebar,tetapi dijadikan menjadi 1 kolom.berdasarkan gambar layout dibawah ini,sidebar bagian atas tidak menggunakan Fitur Accordion/tutup-buka,sedangkan sidebar bagian bawah menggunaan fitur accordion/tutup buka widget.

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

*Jika ada masalah pada sidebar yang tidak berfungsi accordion'a/tutup-bukanya,masalah umum selalu terletak pada javascriptnya.
Solusi:
download/ganti Js dibawah ini,lalu upload sendiri pada hostingan js kalian,misal di code.google.com atau https://sites.google.com

https://sites.google.com/site/djogzs/js/accordion-menu.js

Download via MediaFire

Demo

update template 12-02-2013
fix :
-fix sidebar
-add no image thumbnail
-related post no image

update template 16-05-2013
-fix bullet and numbering post

*Jika anda sudah menggunakan template ini,silakan download kembali,dan update template anda.terima kasih.

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

Note:

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Content Slider dengan CSS3

2013-02-02T13:30:00.000+07:00

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'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 (示現エンジン 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ō 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' greatest hero invades the Demon King's castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div id='overlay1'>
</div><div id='pause1'>
</div></div></b:if>

Text bewarna Orange : Judul Slider
Text bewarna merah : Alamat situs/Link/url web
Text bewarna ungu : Url Gambar
Text bewarna biru : Deskripsi

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.

Sekian penjelasan saya tentang Content slider CSS3, Semoga bermanfaat ^^
#meskipun senin depan ujian,kegiatan blogging susah untuk dihentikan~xD
http://205.196.121.10/4784bn9qrucg/tqd877okjqgdc77/%5BUn%5Dcertain+happiness.mp3

Solusi memperbaiki Tombol Reply yang hilang.

2013-01-30T19:48:00.003+07:00

Sejak kemarin dan beberapa hari sebelumnya saya rasa tidak ada masalah pada beberapa template yang saya kemarin,tapi hari ini , Selasa 30 januari,ada keanehan pada blog saya,saya sendiri bingung dan kaget.entah kenapa tiba" tombol reply/balas menghilang dan digantikan dengan tombol delete.padahal sebelumnya baik" saja.tetapi tiba" saja berubah seperti gambar dibawah ini,setelah saya cek,ternyata tombol delete menutupi tombol reply,sehingga tombol reply/balas tidak terlihat dan tidak dapat diklik,padahal
sebelumnya seingat saya tombol delete sudah saya sembunyikan~xD,mungkin karena ada perubahan sytem thread comment pada blogger,maka beberapa struktur css dan html ada yang berubah juga.

Setelah saya cek,Semua kejanggalan ini hanya terjadi pada template dibawah ini secara global :

Metrominimalist

Robotic Notes

Fansuber Otaku

Solusi

Buka Account Blogger kamu => Template =>Edit HTML , lalu cari css dibawah ini:

.comments .comment .comment-actions a {

dibawah css tersebut, ganti position:absolute

menjadi :

position:relative;

lalu dibawahnya hapus css ini juga.

left: -80px;
width: 40px;
top: 58px;

lalu simpan template anda,dan lihat hasilnya,tombol reply anda akan kembali normal.

Template" yang bermasalah pada bagian komentar akan segera saya perbaiki dan re-upload ,bila ada keanehan/bug lain pada template saya,anda bisa melaporkanya,terima kasih.

MetroMinimalist Blogger Template

2013-01-27T07:45:00.000+07:00

Template kali ini bertema minimalist,dan terinsprasi dengan konsep style Metro UI dari windows 8.karena saya rasa sudah ada yang membuat template metro UI untuk blogger dan terlalu mainstream,karena itu saya membuat dengan cara saya sendiri dan kreasi style saya sendiri dengan warna dasar putih,blueDark dan color-blueLight dan css yang digunakan pun sederhana,tentunya membuat template ini ringan dan fast
loading.yang paling indentik dengan metro style pada template ini terletak pada Tipografi font ini sendiri yang sama dengan windows 8 ,Segoe UI Light.dan pada bagian posting gambar auto readmore,saya berikan juga CSS3 Filter saturasi dan di beri nilai 0.0 agar warna pada gambar menjadi hilang,tetapi menggunakan hover efek dan diberi nilai 1.1 agar warnanya timbul kembali,lalu pada bagian descripsi,dibuat hover efek juga,dan akan menampilkan tanggal,jumlah comment,author dan label posting.

Screenshot

*jika menggunakan browser Mozilla,efek filter saturasi tidak akan berfungsi karena belum mendukung kemampuan 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 Social media facebook,twitter,g+,Rss
*ganti url linknya

<ul id='jocial'>
<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>

3. 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'/>

Semoga bermanfaat,terima kasih ^^

Download via Dropbox

Download via Google Drive

Demo

Note:

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

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html