Dicky Berbagi: Template

Tampilkan postingan dengan label Template. Tampilkan semua postingan

Minggu, 09 Maret 2014

Download Template Dark Red

Halo sobat blogger. Untuk pertama kalinya Ricki Berbagi kali ini akan sharing template blogger yang keren-keren. Disamping keren-keren, tidak lupa template yang Ricki Berbagi akan sharing juga disertai bumbu racik SEO agar kencang dipencarian Google.

Untuk mengawali posting pertama tentang Template Blogger, akan saya awali dengan Template Dark Red buatan Johannes yang didesain ulang oleh RezzaDz yang sangat rapih dan keren.

Silahkan dicek Template Dark Red :

Fitur template :

- 2 widget dibawah header
- Coment facebook di homepage
- Auto readmore
- Permalink
- Backlink auto hide
- CSS
- Warna yg bikin greget (Pastinya)
- Dll

Untuk melihat demonya silahkan - Klik disini

Bagaimana? keren bukan? Jika minat download, silahkan.

PLEASE SHARE

Download Template Windows 8

Download Blogger Templates Windows 8

Halo sobat blogger. Kali ini saya akan sharing template blog yang menyerupai dengan tampilan Windows 8. Template blog yang saya temukan ini adalah template blog buah karya dari Mas Coki Widodo. Karena terlihat mengesankan templatenya, maka saya share template ini untuk kalian pengunjung setia SONZBLOG.

Dan untuk kalian para pencita Windows 8, template ini sangat cocok untuk menghiasi blog yang kalian punya. Dengan menggunakan template ini, maka tampilan blog kalian akan terasa indah dan rapih.

Adapun Beberapa fitur blog yang ada :

1. Tampilhan Homepage Animasi Slide Menu

2. Menu Post App

3. Mempunyai Fitur Reply Komentar

5. Slide Menu right

6. Dapat Digunakan Untuk Custom Post

7. dll

NB: Untuk Mengaktifkan Tread Comment Silahkan Cari Kode https://www.blogger.com/comment.g?blogID=

untuk lebih cepatnya tekan CTRL+F dan ganti denga id blog anda.

DEMO | DOWNLOAD

Password: SONZBLOG

Selamat menggunakan Template ini ^_^

PLEASE SHARE

Download Template Dynamo Multimedia

Live Demo Download

Dynamo is essentially professional and far high quality 3 column Blogger Template designed for technology blogs, Magazine and news portal. This theme is second version of our famous theme new mashable. We have named it dynamo to give a respect to world's best Magician "Steven Frayne". This theme also has some dynamic features.

Key Features

Retina Ready: All images, text and icon in this theme is stretchable and user can see it clearly, We have added a jquery plugin to this theme which automatically resize thumbnail according to their surrounding.
Social Media Icons: Some real high quality Social plugins are added by default. You can see them on the main header, below post title, and many other high quality places.
Related Post: We have added morden related post widget to this theme which don't stretch images and make it look worst.

Customize Drop Down Menu

We have added multi-level drop down menu to this theme beside header, to customize its text and link follow below steps:

Go to blogger dashboard
Click on template tab
now click on Edit Html button and then using ctrl +f find <ul class="menus menu-secondary">
just below it you will find this code:

<ul class="menus menu-secondary">

<li><a href="/">Home</a></li>

<li><a href="#">Business</a>

<ul class="children">

<li><a href="#">Internet</a></li>

<li><a href="#">Market</a></li>

<li><a href="#">Stock</a></li>

</ul>

</li>

<li><a href="#">Downloads</a>

<ul class="children">

<li><a href="#">Dvd</a></li>

<li><a href="#">Games</a></li>

<li><a href="#">Software</a>

<ul class="children">

<li><a href="#">Office</a>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Tech</a>

<ul class="children">

<li><a href="#">Child Category 1</a>

<ul class="children">

<li><a href="#">Sub Child Category 1</a></li>

<li><a href="#">Sub Child Category 2</a></li>

<li><a href="#">Sub Child Category 3</a></li>

</ul>

</li>

<li><a href="#">Child Category 2</a></li>

<li><a href="#">Child Category 3</a></li>

<li><a href="#">Child Category 4</a></li>

</ul>

</li>

<li><a href="#">Featured</a></li>

<li><a href="#">Health</a>

<ul class="children">

<li><a href="#">Childcare</a></li>

<li><a href="#">Doctors</a></li>

</ul>

</li>

</ul>

Finally replace all # with links and to change its text edit green one.

Add Labeled Post on 3rd Column

Go to blogger dashboard
Click on layout tab and add gadget on 3rd column and select Html/JavaScript.

Now paste below code in Html/JavaScript.

<div id='featurebottom1'><h2 class='headingfeature'>Technology</h2>

<div class='left-corner-canvas'/>

<script src='/feeds/posts/summary/-/technology?max-results=9&orderby=published&alt=json-in-script&callback=recentthumbs&' type='text/javascript'/>

<a class='readmoretopic' href='/search/label/technology'>Browse More</a>

</div>

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

Now replace technology with the label you want to show post of in 3rd column.

Fix Your Blog Header

We highly recommend you to use image logo as blog header but if you want to show text in your blog header instead of img then your blog header will look creapy, To fix it follow below steps:

Go to blogger dashboard
Click on Template tab
Now click on Edit HTML button
Paste below code above </head> tag.

<style>
.header-right {
margin-top: -48px !important;
}
</style>

Click on save button.

NOTE

We highly recommend you to use image logo as blog header.
Don't Show more than 7 post on home page.
We recommend users to show popular post on 1st column at top most position.
Don't remove our credit link or it will redirect your blog here.

PLEASE SHARE

Download Template Vube Tube

*Vubetube* is blogger template that is new and designed for video sharing blogs.This template automatically creates a thumbnail from the uploaded video.This is 2 column responsive template that currently supports you tube and vimeo.Related videos in every post and 3 column footer are other features of this template.

Download | Demo

PLEASE SHARE

*Gagism* is a new blogger template that is well suited for gags websites.This is also one of the blogger template for photographers.This theme makes blogger platform more powerful and simple for those who cannot afford self hosted blogs.This is a three column template with left and right sidebar,4 column footer and lot of other new premium features.

Download | Demo

PLEASE SHARE

Minimanga is a simple minimal blogger template that is free to download.This template has 2 column layout style that comes with right sidebar,a smooth image carousel fr featured post below the header and many other essentially required features.

Download | Demo

PLEASE SHARE

Download Template Sung Agung

Bagaimana kabarnya kawan..? Pasti baik dong?! Baiklah Yuk Kita Lihat Dahulu Seperti apa Template nya.. :D

1. Custom Mobile Template

Template Keren

Keunggulan utama dari template ini adalah adanya fitur custom mobile template. Dengan fitur ini blog sobat akan memiliki tampilan versi seluler tersendiri seperti yang nampak pada screenshot di atas. Kita tahu, sekarang ini internet bisa diakses kapan dan dimana saja melalu perangkat mobile. Nah, dengan adanya fitur ini akan sangat membantu sekali untuk mengoptimalkan blog sobat agar pengunjung semakin betah berlama-lama di blog sobat meskipun hanya mengakses melalui perangkat mobile.

Selain itu, tampilan versi mobile ini juga bisa dimonetize dengan memasang mobile ads atau iklan versi mobile. Sobat bisa lihat sendiri contohnya di blog ini melalui perangkat mobile atau bisa juga dengan mengakses URL www.mas-sugeng.com/?m=1 melalui layar desktop.

2. Desain Elegant dan Fast Loading

Template Simple

Dengan mengunakan warna dasar abu-abu, tampilan template ini begitu elegant dan enak dipandang mata. Selain itu, untuk urusan loading juga terbilang cepet karena tidak menggunakan background gambar dan juga tidak terlalu banyak menggunakan pernak-pernik yang tidak penting.

3. Valid HTML5
Template Valid HTML5

Salah satu kelebihan lain dari template ini adalah memiliki struktur kode valid HTML5 dan CSS3. ya, meskipun valid seperti ini bukanlah hal yang begitu wajib, tapi ini cukup berpengaruh terhadap kompatibilitas browser. Dengan memiliki struktur kode yang valid seperti ini akan mengurangi terjadinya error di berbagai browser yang berbeda-beda.

4. Anti Duplikat Konten

Seperti yang kita ketahui, blogspot memiliki kelemahan dalam hal SEO yaitu rawan sekali mengalami duplikat konten. Yang paling serting terjadi adalah duplikat konten yang dihasilkan oleh URL versi mobile. Nah, untuk mengatasi permasalahan itu, template ini sudah dilengkapi kode anti duplikat konten. Kode anti duplikat konten ini hanya sekedar permainan kode conditional tag yang diatur sedemikian rupa sehingga dapat mengurangi terjadinya duplikat konten.

Selain kelebihan-kelebihan di atas, template ini juga masih mempunyai banyak lagi fitur dan kelebihan lain. Di antaranya sebagai berikut:

Rich Snippet Ready. Author, Review and Breadcrumb
Dinamic Tag Heading
Auto Readmore with Thumbnail
Pure CSS3 Dropdown Menu
Breadcrumb Navigation
Share Button
Related Post with Thumnail
Custom CSS Threaded Comment
Facebook Comment Ready
Mobile Ads Ready

Mari Kita Downloadnya di sini , Semoga Bermanfaat ya kawan..

PLEASE SHARE

Beberapa fitur/kelebihan template ini:

SEO Ready pastinya
Desain sederhana saja
Loading lumayan cepet
Sudah Auto readmore
Ada Artikel Terkait
Tombol share juga
Widget news ticker
Pagination
Dan lainnya

Cara Setting Template Ini:

Ada beberapa penyesuaian yang perlu dilakukan pada template ini agar fitur-fitur pada template ini bisa berjalan dengan normal. Di antarnya adalah:

1. Menu Navigasi
Masuk ke dashboard > pilih blog sobat > Template > Edit HTML. Setelah itu cari kode ini:

<ul id='navigation'>
<li><a href="/">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

Silakan sobat ganti tanda # (tanda pagar) dengan URL yang ingin sobat tuju.

2. Widget News Ticker
Masuk ke dashboard > pilih blog sobat > Template > Edit HTML. Setelah itu cari URL ini

http://wolestemplate.blogspot.com/feeds/posts/default

dan ganti yang berwarna merah sesuai dengan alamat blog sobat.

3. Lain-Lain
Masuk ke dashboard > pilih blog sobat > Template > Edit HTML. Setelah itu cari dan ganti YOUR-FACEBOOK-ID dengan ID facebook milik sobat.

DOWNLOAD

PLEASE SHARE

Download Template JKT48

Hallo !
di postingan kali ini saya akan memposting Template blog yang mirip dengan template JKT48.com , setelah saya bersurfin di internet ber-jamjam dan menggunakan wifi yang sangat lemot hahah :D saya menemukan template ini , template ini di posting petama sama mkr-site.blogspot.com

Fitur-fitur pada template JKT48 ini adalah sbb:

Terdiri dari 3 kolom dengan 2 sidebar kanan dan kiri pada bagian beranda lalu berubah menjadi kiri pada bagian posting dan halaman
SEO lebih baik dari template blogger umumnya walaupun belum sepenuhnya sempurna
Terdapat slider dengan menggunakan Nivoslider pada bagian home atau beranda(cara penggunaan ada didalam zip)
Auto recent post/artikel terbaru dengan menggunakan Jcarousel pada bagian selain Home
Breadcrumbs berdasarkan label pada halaman posting
Header Banner, Navigasi pada bagian atas dengan dropdown menu
Hasil pencarian berdasarkan JSON (script milik Mas Taufik DTE) dengan tampilan sesuai template
Efek lightbox sudah dimodif dengan Pirobox 1.3
Emoticon pada bagian komentar(script milik Mas Taufik DTE)
Tab Widget dan Slider Widget pada bagian sidebar
Artikel terkait(script milik mas Hendriono Blogger Tune-up)

Silahkan Download secara gratis

DEMO

DOWNLOAD

Template JKT48 Merah

Template JKT48 Biru

Template JKT48 Hijau

PLEASE SHARE

Download Template Hatsune Miku

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

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

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>

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.

PLEASE SHARE

Download Template Date A Live

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

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

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

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.

PLEASE SHARE

Download Template Devil Survivor 2

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

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.

PLEASE SHARE

Download Template Kurumi Tokisaki

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

PLEASE SHARE

Download Shingeki Ko Kyojin

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>

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

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.

PLEASE SHARE

Ore no Imouto Blogger Template

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>

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.

PLEASE SHARE