Ore no Imouto Blogger Template

By : NewB

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

1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

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

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

2. Setting SEO/Meta tag

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

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

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

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

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

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

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

0 Comments

Tag : Blogger Template,

Shingeki No Kyojin Blogger template

By : NewB

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

0 Comments

Tag : Blogger Template,

Hataraku Maou-sama!

By : NewB

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

0 Comments

Tag : Blogger Template,

Yui Blogger Template

By : NewB

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/AVvXsEi6KdJSlsIM6i5QrrcW1RO9MeGdbcbx0HG3-ZY9bXqHnyn-DL70rwLUwowsjm_WZlTtOXXdoOql3Vf1u6GaXhHqo-KI0doeSuNyX7U6F8jo9VSBRjgv-sj0hJGdZeJzRI2T7dmba9nDack/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/AVvXsEgdugyQRF7YSCVQ6t3oicAA8v9qwfkA3z1pizlYf5NDI5oSFrMKo_FW8wMYkRL55HYgAaX5P0uvL4-lC1CgEkTqRqCxl65g9yjvr1LOXJZJVTpyKv4nNyyhgcFcU24SC09vUh22xQkxDyo/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/AVvXsEgcAnrS9Y77bIcYja4oUoJN3WgK4RNadUyqjAqEp4HuMLRiLTGjg09J2KYXGzJpXei9HrJryMWMD2dgSdjm_9sU5ubGySW-qLhhTim9OPvKWv7eCI1oZ-lxfM7GWhmMGjnc0GvpyK0LVWk/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/AVvXsEjmdEm-MxaAH29U9VqxeEO1oGGJQPFt-mO0LkdLKxBsqVSY9XFf1f1RNnnboRYkgUlkaKddYvV6fKgAdoTDftt-Hswk2guShD6md6p1WHsKlwYw0ASVk3ldViF4T0oSCyU1iw2tRCQgsiw/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

0 Comments

Tag : Blogger Template,

CSS Dropdown Menu

By : NewB

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.

0 Comments

Tag : CSS,

Devil Survivor 2 Blogger Template

By : NewB

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

0 Comments

Tag : Blogger Template,

Kurumi Tokisaki Blogger Template

By : NewB

Hello teman-teman,pada kesempatan ini,akhirnya ada waktu luang untuk membuat template blogger lagi.Tema dari template ini adalah Kurumi Tokisaki yang merupakan tokoh karakter dalam sebuah Anime "Date A Live" dan juga kurumi merupakan tokoh favorite saya~xD
sedikit tentang kurumi;Kurumi sendiri mempunyai karakter yang bisa dibilang susah ditebak,bisa kawaii,psycho,Gothic Lolita dan kurumi adalah spirit yang paling berbahaya,karena diduga telah banyak menjatuhkan korban lebih dari 10.000 orang. wow xD

PV

Selanjutnya mengenai template ini,Template sederhana dengan 2 kolom posting,2 sidebar dan dilengkapi Popular post widget dengan thumbnail.
Pada template ini,seperti biasa saya selalu mencoba membuat style yang baru,keunikan itu terletak pada style posting yang jarang ditemui oleh blogger template lain.jika kita arahkan kursor pada posting,gambar pada posting akan membesar dengan efek transisi css3,dan deskripsi posting akan hilang lalu menampilkan tanggal posting,penulis blog,jumlah komentar dan kategori posting.awalnya pada template ini,backgroundnya menggunakan gambar/pattern,tetapi karena saya rasa tidak cocok,jadi saya menggunakan css3 gradient untuk diterapkan sebagai background pada template ini,bagi teman teman yang masih tidak tahu cara mengganti warna/jenis background(gambar,warna solid,gradient) bisa dibaca dibawah postingan ini.

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

4. Cara mengganti background gradient.

cari css dibawah ini

body {
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: rgb(226,220,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,220,222,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,220,222,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
font-family: 'Open Sans', sans-serif;
color: #222;
overflow-x: hidden;
font-size: 13px;
}

Jika kalian perhatikan 6 css background diatas,masing" mempunyai fungsi untuk browser tertentu,mengapa?karena tidak semua css dapat bekerja baik pada seluruh browser,oleh karena itu,jika klian ingin mengganti background,kalian bisa menggunakan cara dibawah ini,Contoh:

1. background warna solid:
dengan hexa:
background:#000;

dengan rgba:
background:rgba(255,255,255,1);

2. background dengan gambar:
background:url(http://alamatgambar.jpg);

3.Background dengan Gradient.
kalian bisa menggunakan css gradient generator.
http://www.colorzilla.com/gradient-editor/

-Lebih lanjut mengenai background,kalian bisa baca artikel ini:
http://djogzs.blogspot.com/2010/11/tips-memilih-warna-design-blog.html

-Mengenai rgba color
http://djogzs.blogspot.com/2012/01/tips-design-menggunakan-css3.html

Intinya,untuk mengganti warna,kalian hanya harus mengganti kode hexa warnanya,begitu juga paga rgba color :)

Download via MediaFire

Demo

*Bonus PSD File Header Kurumi~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

0 Comments

Tag : Blogger Template,

Animeindo

Selamat Datang Di Drg Animeindo

Popular Post

Ore no Imouto Blogger Template

Shingeki No Kyojin Blogger template

Hataraku Maou-sama!

Yui Blogger Template

CSS Dropdown Menu

Devil Survivor 2 Blogger Template

Kurumi Tokisaki Blogger Template

Blog Archive

About Me

Paling Dilihat

Labels