nah kali ini saya mau berbagi template keren yang dishare oleh sobat" blogger.
dan kenapa saya cuma share 9 template,karena rata" banyak sekali yang mengirimkan template yang belum rapih,saya hanya mencari template yang sesuai dengan kriteria:
1. Template blogger hasil design/redesign sendiri.
2. Tema bebas tapi tetap mempunyai konsep.(ga boleh ecchi/hen*ai)
3. Rapih.
4. Murni hasil kreasi sendiri,tidak menjiplak.
5. Beda dari template yang lain (tidak pasaran).
6. logo/gambar/background tidak asal (bila ada).
7. Nyaman/tidak terlalu berat dan tidak berlebihan menggunakan css3.
8. Friendly (mudah digunakan secara umum)
Oleh karena itu saya hanya memilih 9 template yang rapih.bagi yang belum beruntung,jangan berkecil hati,saya tetap menghargai hasil usaha kalian,silakan coba lagi nanti.
Semoga template" yang saya share dibawah ini,bermanfaat dan menjadi inspirasi untuk mengembangkan template kalian,cari ide yang kreatif dan lebih inovatif,let's make your template design. thx
1. Css ♥ Blogazine
Nama :Achmad Azhar Rifan Nugroho
Blog: http://azhar-war3.blogspot.com
Tema template :Css ♥ Blogazine
Kategori :Css3,blogazine
Demo :http://azhar-war3.blogspot.com/
Link Download :http://www.mediafire.com/?xl40kauduhfn3nx
Deskripsi Blog :Blog ini bertemakan Blog magazine,tetapi berbeda
dengan Blog magazine kebanuakan,di karenakan blog ini Full Css3,yang
di ringkas secara gamblang secara minimalis secara segar dan tidak
monoton.
Pengaturan Blog:Pengaturannya mudah,seperti blog magazine
kebanyakan,tetapi blog ini lebih simple lebih rapi,lebih mengutamakan
ke inginan pengunjung.
1.Kreasi Css Yang harus di tambah di Halaman depan
-Matahari : Dapat Di pilih sendiri di Postingan Css ♥ Blogazine
-Loading : Dapat Di pilih sendiri di Postingan Css ♥ Blogazine
-Menu Bundar : Dapat Di pilih sendiri di Postingan Css ♥ Blogazine
2.Pengaturan Pada halaman Posting
-"MASUKKAN KODE CSS DI BAWAH INI"
<style type="text/css">
pre.code {
margin:20px 25px;
border:1px solid;
border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
position:relative;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.08);
box-shadow:0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
font-family:sans-serif;
font-weight:bold;
font-size:13px;
color:#4b555c;
position:absolute;
left:1px;
top:16px;
text-align:center;
width:60px;
}
pre.code code {
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
display:block;
margin:0 0 0 60px;
padding:15px 16px 14px;
border-left:1px #E5EAEE solid;
overflow-x:auto;
font-size:13px;
line-height:19px;
color:#333;
}
pre.code-css code {
color:#D84400;
}
pre.code-html code {
color:#4576D5;
}
</style>
<pre class="code code-css"><label>POSTING</label><code>"POSTINGAN KALIAN DI SINI"</code></pre>
<pre class="code code-html"><label>POSTING</label><code>"POSTINGAN KALIAN DI SINI"</code></pre>
3.Cara Merubah Background Di Setiap Posting
-"MASUKKAN KODE CSS DI BAWAH INI"
<style type="text/css">
body {
width: 100%; height: 100%;
background: url"URL BACKGROUND KALIAN";
</style>
2. Blunique
Nama : Septian D Chandra
Blog: http://zepuutou.blogspot.com
Tema template : Blunique
Kategori : Simple Blogger Template
Demo : http://blunique-template.blogspot.com
Link Download : http://www.mediafire.com/?lz82sx87uzbua5c
Deskripsi Blog : Template minimalis dengan warna dominan biru tua. Konsep desain sederhana yang ditambah beberapa efek CSS3 dan sedikit resource gambar, sehingga terlihat menarik walaupun dengan size yang kecil. Menu navigasi yang unik, efek slide pada posting di halaman utama, efek emboss yang menggunakan pengaturan CSS border (sidebar) & trik gambar 1x1 pixel (footer), serta threaded system comment dengan admin highlight. Didesain untuk blog yang mengedepankan kualitas konten, karena itu desainnnya dikembalikan ke fungsi semula (header, navigasi, sidebar, dan footer) tanpa menambah fasilitas yang kurang perlu.
Pengaturan Blog: Linknya menyusul di postingan selanjutnya di blog http://zepuutou.blogspot.com
3. Berusaiyu
Nama : Renadel / Nyann Nyann xD
Blog: http://deezsign.blogspot.com
Tema template : Berusaiyu
Kategori : Anime, CSS template.
Demo : berusaiyu-bloggertemplate.blogspot.com
Link Download : https://docs.google.com/open?id=0B3ZmXzgFtZm7RzJyN1VvR1BnTEE
Deskripsi Blog : template redesign dari Sword Art Online Blog Johanes. tampil dengan warna putih simple dan tak bisa dibilang biasa dengan menampilkan dua karakter berbeda sebagai icon blog.dan sudah saya atur untuk bagian menu dengan mode fixed. komponen ringan dan enak dipandang membuat template ini saya ajukan untuk ikut berpatisipasi dalam 'Submit Your blogger template here' - Djogzs. semoga diterima dengan baik xD
Pengaturan Blog:
-PENGATURAN MENU:
Find This Kode
<div class="navijohanes">
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">Home</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">About me</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">Tutorials</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">Articles</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">Download</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4121325713133844233#">Inspiration</a></li>
<div id="whois">
Other Content Here</div>
</ul>
</div>
ganti tanda '#' dengan link kamu.
dan untuk kode
<div id="whois">
Other Content Here</div>
bisa di edit sesuai keinginan.
Khun Hrap..
4. Sasuke X-1
Nama : Dimas Setya Aji
Blog: http://skycyber4rt.blogspot.com
Tema template : Sasuke X-1
Kategori : Template Anime Naruto
Demo : http://dimas4rtbloggy.blogspot.com
Link Download : http://www.mediafire.com/?3494umns997ep0j
Deskripsi Blog : Template ini hanya saya yang punya hehehehe, Terdapat fitur Threaded Comment yang gak kalah menarik, Tampilan gambarnya cukup menarik, halaman depan dengan blog berbeda gambarnya, Template yang agak transparan. dan template nya kurang bagus daripada template ka djogzs hehehe, dan tampilan lebih bagus menggunakan web browser google chrome. besar filenya karena terdapat gambar sebagai wallpaper.
Pengaturan Blog : Lagu yang ada di homepage bisa diganti dengan cara mencari dan mengganti link ini http://cdn.x.indowebster.com/download-vip/69/p16fo77csoff9u023cdj8bfk4.mp3/[www.indowebster.com]-No_Regret_Life_-_Nakushita_Kotoba_.mp3 dengan link mp3 kesukaan sobat
kalau mau mengubah menu nya cari atau ctrl+f --->
nah disitu ada nama keterangan bisa diedit/ diubah sendiri, kalau untuk linknya yang bertanda pagar/# ganti link sesuai dengan yang dikehendaki misal http://djogzs.blogspot.com/ hehehehe, jika ingin merubah backgound silahkan cari link berikut
http://sasuke-myblog.googlecode.com/ di ctrl+f
misalnya untuk header blog http://sasuke-myblog.googlecode.com/files/sasuke_bydimas.jpg bisa diganti dengan gambar kesukaan kalau backgroundnya cari dengan hal yang sama misal http://sasuke-myblog.googlecode.com/files/sasuke_dimascyber4rt.jpg untuk background halaman depan blog. Selanjutnya bisa diedit sesuka hati sesuai dengan keinginan dan kemauan hehehehe.
5. Blog Design
Nama : Muhammad Latief
Blog: http://blogcybercorp.blogspot.com
Tema template : Blog Design
Kategori : Blogger Template
Demo : http://blogcybercorp.blogspot.com
Link Download : http://www.ziddu.com/download/20235117/Blog-CyberCorporationTemplatePart2.rar.html
Deskripsi Blog : Sebenarnya Template Ini Adalah Template Yang Saya Modifikasi Dari Template Lama Yang Jarang Dipakai Orang.
Pengaturan Blog:
Feature:Setting Template:
-Super Seo Friendly
-Auto Read More
-Permalink + Download File Di Bawah Posting
-Breadcrumb Diatas Judul Posting
-Kotak Komentar FB Ready
-Menu Atas 2 Bagian
-Fitur Artikel Terkait + Scroll bar
-Widget Like And Share Dibawah Posting
-Breaking News
-Komentar Admin Beda Dengan Pengunjung
-Tombol Reply Comment
Menu:
<div class='topmenu'>Ubah Link,ganti dengan link Menu Kamu
<div class='topbar'>
<ul>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Blogger%20Tips'>Blogger Tips</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Templates'>Free Templates</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Domain'>Free Domain</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Software'>Free Software</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Game'>Games</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Game%20Mostwanted'>Game Mostwanted</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/Editing'>Editing</a></li>
<li><a href='http://blogcybercorp.blogspot.com/search/label/LostSaga'>Lost  Saga</a></li>
<li><a href='http://blogcybercorp.blogspot.com/2012/07/backlink-gratis-dari-blog-cybercom.html'>Tukar Link</a></li>
<li><a href='http://blogcybercorp.blogspot.com/2012/08/encode-decode-generator-blog-cyber.html'>Parse HTML</a></li>
</ul>
</div>
Cari Link http://feeds.feedburner.com/blogcybercom ,lalu ubah dengan Link Feedburner Kamu
Ubah Semua Link http://blogcybercorp.blogspot.com Dengan Link Blog Kamu
6. Personal Blog Template
Nama : Aditya Subawa
Blog: http://www.bloggerbelog.com
Tema template :Personal Blog Template
Kategori : 2 column, Silver, silver dark
Demo : http://bbelog-karmilachrome.blogspot.com/
Link Download : https://www.box.com/s/c358c6fe4a04459b34ac
Deskripsi Blog : Bbelog - Karmila Chrome is a personal style blogger template for personal news blog. It's a blogger template with 2 Columns, dark silver color, dropdown menu, Threaded Comment, Social Bookmarking, Breadcrumb Navigation, Search Form. This template designed for personal news blog with daily updates, SEO friendly and good being a Monetized Blog.
Asal-usul nama Karmila Chrome, karmila adalah seorang tokoh sinetron ketika saya membuat template ini, malah sibuk menyaksikan karmila menangis. LOL. kebetula dia saat itu dia memakai warna silver gelap dan celana garis-garis biru. akhirnya saya terapkan pada template sederhana ini. template ini saya sertai dengan otomatis search query form, dropdown horisontal menu. breadcrumb label navigasi, social bookmarking, related post dan threaded comment.
Pengaturan Blog: pengaturan blog sudah saya posting dengan singkat disini gan: http://www.bloggerbelog.com/2012/08/bbelog-karmila-chrome-blogger-templates.html
7. Blogazine
Nama :Qhiy
Blog: http://claz-mild.blogspot.com
Tema template :Blogazine
Kategori :Costum Post/Blogazine
Demo : http://syn48.blogspot.com/
Link Download : http://www.mediafire.com/?joojz6gfu4zpur3
Deskripsi Blog :Template ini cocok di buat costum post.
Pengaturan Blog:
Navigasi :
<nav id='nav'>
<ul>
<li><a href='/'>Beranda</a></li>
<li><a href='/'>Tentang</a></li>
<li><a href='/'>Blog</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Kontak</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Follow</a></li>
</ul>
</nav>
Untuk Pengaturan Halaman depan :
<b:if cond='data:blog.url == data:blog.homepageUrl'>Yang warna merah bisa di ganti dengan URL gambar.
<b:if cond='data:blog.pageType == "index"'>
<center><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_x0L20eI32fNZnXvnT8OszXwy8c9so4K-m1y3nPiHHtjUvMtOb6w-NIeigP-BZDz8kfwZ9K75XIf3W2Ie51hSW6YhN7KXlE1OQXr923sGpQ05CNnr4rSAmUhKX4xq4kCHz4wyBZ_5-js/s1600/Halaman+depan.png'/></center>
<style>
@-webkit-keyframes semelau{from{-webkit-transform:translate(0px,-1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}@-moz-keyframes semelau{from{-moz-transform:translate(0px,-1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}@-ms-keyframes semelau{from{-ms-transform:translate(0px,-1000px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}}@keyframes semelau{from{transform:translate(0px,1000px);opacity:0}to{transform:translate(0px,0px);opacity:1}}
@-webkit-keyframes laso{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}@-moz-keyframes laso{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}@-ms-keyframes laso{from{-ms-transform:translate(0px,1000px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}}@keyframes laso{from{transform:translate(0px,1000px);opacity:0}to{transform:translate(0px,0px);opacity:1}}
@keyframes earn
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes earn
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes earn
{
from{opacity:0;}
to{opacity:10;}
}
#nav{-webkit-animation:laso 3s;-moz-animation:laso 3s;-ms-animation:laso 1s;animation:laso 3s}
#temanku, #credit-wrapper{-webkit-animation:semelau 3s;-moz-animation:semelau 3s;-ms-animation:laso 1s;animation:semelau 3s}
img{-webkit-animation:earn 3s;-moz-animation:earn 3s;-ms-animation:earn 1s;animation:earn 3s}
body {
background:black;
}
#footer-wrapper, .titleposting h2 a, .titleposting h2 a:first-letter, #headace, #post {display:none;}
#homepok{
display:block;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#39f;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
</style>
</b:if> </b:if>
<div class='clear'/>
Jika ada yang kurang jelas tanya ke saya lagi ya
8. Minimalist
Nama : Yusril Ibnu
Blog:
http://yuzsite.blogspot.com
http://plustutorial.blogspot.com
Tema template : Minimalist
Kategori : CSS and SEO
Demo : http://prely-maxseo.blogspot.com/
Link Download : https://www.box.com/s/c7a33cf5a8d2264797b7
Deskripsi Blog : CSS and SEO Friendly Template, Minimalist Design
Fitur :
- Super SEO frendly
- Lebih Validasi HTML , ini penting untuk SEO
- Memiliki header yang memudahkan pengunjung disertai back to top
- Kotak komentar dilengkapi tombol Reply dan memiliki penomoran pada setiap komentar yang secara urut berdasarkan tanggal/ waktu pemberi komentar; (seperti wordpress) dan juga kotak komentar admin berbeda
- Memiliki related post/artikel terkait pada saat single post, dimana artikel terkait tersebut diambil dari label posting blog;
- Memiliki dinamic meta tag yang ampuh, ini sangat berpengaruh terhadap seo blog kita.
- Dilengkapi dengan Ratting bintang yang tampil dalam search engine google, ini yang sedang populer saat ini dan anda tidak perlu susah-susah lagi kesana kemari mencari tahu bagaimana membuat ratting bintang
- Mempunyai senjata ampuh Dynamic tag heading h1 dan h2, ini yang menjadi salah satu rahasia para pemenang kontes seo.
- Breadcrumbs dibawah judul posting yang sangat baik juga untuk mendukung seo.
- Home Page Blog lebih SEO.
- Lebih ringan dan tidak membutuhkan Loading yang lama karena background, menu, header, footer tidak memakai gambar hanya memakai css yang sudah di compress jadi sangat ringan.
- Sudah ada fitur read more , seperti memakai gambar padahal tidak hanya memakai css jadi ringan
- Efek hover yang keren dengan memaki fitur fade
- Gaya keren dan warna serasi pas di mata pengunjung
- Memakai Navigasi nomor yang memudahkan pengunjung.
- Tombol search posisinya pas dan memudahkan pengujung untuk mencari artikel
- Dilengkapi "Sexy sharing" untuk memudahkan pengunjung me share artikel kita
- Menganti tulisan "post a comment' dengan tulisan bergerak
- Scrool telah diedit jadi lebih pas dengan tema (hanya support Chrome dan Maxton)
- Sudah terdapat script tag ALT otomatis, ini penting untuk SEO
- Lebih mudah untuk diedit karena telah di pasang tag
- Widget Pas untuk Slot Iklan
- Dan masih banyak lagi.
Pengaturan Blog:
1. Ganti tulisan
Ganti tulisan 6923543532765500668 dan _BlogID_ dengan ID blog anda
Ganti tulisan Dekripsi awal Anda
Ganti tulisan JUDUL BLOG ANDA
Ganti tulisan DESKRIPSI BLOG ANDA
Ganti tulisan DESKRIPSI HALAMAN POSTING ANDA
Ganti tulisan KEYWORD HALAMAN POSTING ANDA
Ganti tulisan ? 2010 DOMAIN ANDA.blogspot.com
Ganti tulisan Nama Anda
Ganti tulisan KODE VERIFIKASI BING WEBMASTER ANDA
Ganti tulisan KODE VERIFIKASI GOOGLE WEBMASTER ANDA
Ganti tulisan KODE VERIFIKASI ALEXA ANDA
Ganti tulisan URL BLOG ANDA
Masukan widget alexa di MASUKKAN WIDGET ALEXA DISINI
Masukan widget pagerank di TEMPATKAN WIDGET PAGERANK ANDA DISINI
Masukan widget histats di TEMPATKAN WIDGET HISTATS ANDA DISINI
2. Mengkonfigurasi headers atas
<div class='bf_footer'> <a class='bf_left' href='#'><span><span style='color: white;'>menu1 </span></span></a>Ganti # dengan url yang anda mau, ganti menu1,menu2 dsb dengan judul url tadi
<a class='bf_left' href='#'><span><span style='color: white;'>menu2</span></span></a>
<a class='bf_left' href='#'><span> <span style='color: white;'>menu3</span></span></a>
<a class='bf_left' href='#'><span><span style='color: white;'>menu4</span></span></a>
<a class='btop' href='#' onclick='MGJS.goTop();return false;'><span style='color: white;'>|<strong> ^ </strong></span></a>
<a href='#'><strong><span style='color: white;'>m5 kanan</span></strong></a>
<a href='#'><span style='color: white;'>m6 kanan</span></a>
<a href='#'><span style='color: white;'>m7 kanan</span></a>
<a href='#' target='_blank'><span style='color: white;'>m8 kanan</span></a>
</div>
*Jika ingin ada tombol yang berfungsi untuk back to top jangan ganti
<a class='btop' href='#' onclick='MGJS.goTop();return false;'><span style='color: white;'>|<strong> ^ </strong></span></a>
3. Jika Anda Mengalami Masalah Pada Widget
Masukan kode dibawah ini di bawah kode ]]></b:skin>
<style type='text/css'>
.sidebar h2 {
color: #ffffff;
font-size:14px;
margin-left:0px;
padding-right:5px;
padding-left:5px;
margin-right:px;
padding-top:5px;
padding-bottom:5px;
background:#000000 repeat-x;
</style>
9. Kaito Kid Template
Nama : Yoshua Marchiano
Blog: http://dmarchiano.blogspot.com
Nama Template : Kaito Kid Template
Tema template : Anime
Kategori : Anime template
Demo : http://kaitokid-template.blogspot.com/
Link Download : https://docs.google.com/open?id=0B7p5UgSzatNIN2c5aUhlekd0blU
Deskripsi Blog : template redesign fairy tail templatenya bang anes sebenernya mau ambil css postnya aja ^^V
Pengaturan Blog:
Pengaturan Menu
Buka blogger=>template=>edit HTML
cari kode di bawah ini :
<div class='navi'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About me</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Articles</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Inspiration</a></li>
</ul>
</b:if>
</div>
ganti tanda # dengan url kamu
1 komentar:
gan no 4 Sasuke itu link downloadnya error tolong di perbaiki
ReplyPosting Komentar