ANIGAME-SUB

Senin, 15 Juli 2013

DJogzs Blogger Template

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yt5k4ElKFo2xZ_vOxFrQLb7VFuj7cWtGgXQi2aCFacI1yUDHq89McRwZmwfqgmqxcBIT_8wif_g3dA0B0_1ddKQlJYLm7iR8pclDswvl6vG7A2yjQ5Z6R9iDnudabyEXm7qQUaZblzc/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

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

Lightbox Blogger dengan Jquery

08.46 Jquery No comments

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

07.30 template No comments

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>

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

2. Setting SEO/Meta tag

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

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

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

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

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

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

06.31 template No comments

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>

Date header format:

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!

00.47 template No comments

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>

Date header format:

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

10.00 template No comments

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNAspA25Zp8RXKJHRiDRaD_qEDc5lB3Ew6OUoDek_JfpB5P0H8J4s4axMOXFcpxBIjqeGEJAeh5UzMeQxxnBl75fwmph8Z5tjlFSXsiaKowSkuGRWM0JPwm7aBkphZ6juIEOtrA_PjezE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgej-DBy_aKbT_L6C7z2_7KHPrdAE3Kd0tg1czNQ3vx_5kiC8OLdrGYIGVjaoK7rVHlm8IXC9zu6Uai0Tr9_kMWCd518OUeeoZNNMhEPekGjlxGnJI5ZK8WhMw9-Y71xJejEpn1ryJ6yHQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0UhRjRMckRigKTBm9ZVGIZriSRR5NnusTN7BpOaSEF-TPgS_FMwkReYXazJIdM2c-bMU0ypgE_wo_lmwESFw6FmdYrZ3QLVTMAY0TxS2F8tudY-yUMpbVeglxLSYYXoEI0J_5Jdhqig/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gnhv2_YOt4g4whyxFl9I5vl1AeylOTLbPPvDA9hXPchgzLxx0-ELySBwac_j0QDm1YBME5CSxGDHM23T9CvU9iyYTm8w3bPpqHVi_mCYBhH184vf2nEisgQxuvJt-Ao8eksMUdVKr2c/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

00.24 CSS No comments

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.

ANIGAME-SUB

Tales Of Zestiria PC Games

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Senin, 15 Juli 2013

DJogzs Blogger Template

Minggu, 14 Juli 2013

Lightbox Blogger dengan Jquery

Sabtu, 13 Juli 2013

Ore no Imouto Blogger Template

Jumat, 12 Juli 2013

Shingeki No Kyojin Blogger template

Jumat, 05 Juli 2013

Hataraku Maou-sama!

Rabu, 26 Juni 2013

Yui Blogger Template

Sabtu, 08 Juni 2013

CSS Dropdown Menu

Visitor

Kotak Berlangganan

Feedburner

My Blog

My Blog List

About Me

Followers

Labels

Blog Archive

Blogger templates

Blogger news

Blogroll

Senin, 15 Juli 2013

Minggu, 14 Juli 2013

Sabtu, 13 Juli 2013

Jumat, 12 Juli 2013

Jumat, 05 Juli 2013

Rabu, 26 Juni 2013

Sabtu, 08 Juni 2013

Social Profiles

Visitor

Kotak Berlangganan

Feedburner

My Blog

My Blog List

About Me

Followers

Labels

Blog Archive

Blogger templates

Blogger news

Blogroll