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
http://1.bp.blogspot.com/-dOs60P0v14c/UU8O3NLjZtI/AAAAAAAAF7Y/x9J_tvL-4fw/s1600/logoblogjohanes2.jpg
lalu ganti dengan Url gambar yang and inginkan.
* New Update Djogzs Blogger template 7/13/2013
Fixed post height and position.
Cara memperbaiki/How to fix
Cari CSS:
.jomore{isi css;}
lalu tambahkan:
height: 30px;
overflow: hidden;
setelah itu cari CSS lagi:
.post h2 {isi css;}
lalu tambahkan:
height: 14px;
overflow: hidden;
Tujuanya yaitu agar tinggi posting memiliki ukuran yang sama sehingga posisi posting akan sejajar.
*Update Link Download template
bagi yang sudah terlanjur menggunakan template ini,silakan download dan upload kembali template ini untuk mengupdate css template ini atau dapat lakukan cara diatas,mohon maaf atas kekuranganya, terima kasih.
*Bonus PSD File Header Djogzs~xD
.jpg)
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
{ 54 comments... read them below or Comment }
"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"
"Sorry your comment will not be replied, because this blog has been inactive. Thank you"
Translate
waw.... aku sedot....
BalasHapusThanks ^_^
whehehe, keren template nya :D
BalasHapusmantep bang :') sebenernya aku ngincer PSDnya buat ambil render rikka :v muhaahahahahaha
BalasHapusini nih! gw demen banget sama template yang ngemudahin buat diedit. tnx bang jo xD
BalasHapusMantap gan, sy dari dulu udah iri nih xD
BalasHapusizin sedot mas djogzs
BalasHapusThanks jarang2 ada Template sama dengan Gratiss...
BalasHapusSalam Heuw [peinchigo.blogspot.com]
Izin Downloadddddddd bang Djogggggz :D
BalasHapuskeren bang jo ..... bang jo emang punya taste bagus buat cari gambar - gambar anime ... kawai semua......
BalasHapusbang anes is the best :D
BalasHapuskaka jo, ko templetnya beda ama yg ini sih? XD
BalasHapusya iyalah,ga mungkin sama tampilan'a :v
Hapus@Johames djogan : Buka PM Chatango Sobs
Hapuskirain aja mirip ._.
HapusSugooooii..
BalasHapusKa Johanes, tolong cek blogku donx, kan pake templatemu, takut ada yg gak berkenan :))
http://kurukiblog.blogspot.com
wah sugoi mas johanes ,
BalasHapusdengan make template bang johanes dan dengan corat coret edit psd mas johanes blog gue jadi begini :)
http://ariandrinan.blogspot.com/
mau tanya bang johanes kalo yang di halaman utama posting nya itu diganti sama yang kayak di template robot itu bisa gak ?
BalasHapusbisa aja sih,tapi harus dirombak juga html'a .__.
Hapusbisa nggak minta tolong
Hapusyg versi responsivenya ada ga bang jo ? kyk yg bang jo pake :3
BalasHapusPakai ya bang
BalasHapus1dragonnandoblogspot (6/27/13 1:53:19 PM): 1. Banner Blog Anda Telah Saya Pasang Di 1DragonNando.blogspot.com
BalasHapus1dragonnandoblogspot (6/27/13 1:54:45 PM): 2. Gimana Cara Ganti Warna Menu Header Pada Template Robotic Note
1dragonnandoblogspot (6/27/13 1:55:19 PM):
3. Sobs, klu mau menghapus scrip yg ada di (]]>) Menu Dropwown Template Robotic....
]]>
#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;}
Yang dihapus scrip yg mana sobs??
.menujohanes {
Hapusbackground: #222;
width: 100%;
padding: 0px;
position: relative;
margin: auto;
}
background: #222; ,tinggal ganti kode warnanya
Itu Ganti Warna Backgroud apa Sobs?
HapusKlu Maksut saya itu gimana cara ganti warna Backgroud Menu Ke 2 Pada Robotic Notes Yang disampingkiri Header yg warnanya Biru,Putih itu..
Terus Gimana Cara Menghapus Skrip Menu Paling atas pada Template Robotic Notes
Yang Kodenya diletakkan pada ]]><....
warna biru:
Hapusul.dark_menu1 li .selected2 {
padding: 16px;
width: 125px;
background: #88ECFB url(http://3.bp.blogspot.com/-3X4IWJdnWXI/TwiBnphz_qI/AAAAAAAAAz0/yczeKzs-YJA/s1600/pattern.png) repeat top center;
float: left;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-left: 7px ridge #ddd;
background-size: 4px;
}
warna putih:
ul.dark_menu1 li .selected1 {
padding: 16px;
width: 125px;
background: #fff url(http://3.bp.blogspot.com/-3X4IWJdnWXI/TwiBnphz_qI/AAAAAAAAAz0/yczeKzs-YJA/s1600/pattern.png) repeat top center;
float: left;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-left: 7px ridge #88ECFB;
background-size: 4px;
}
script'a ga boleh diapus,ntar templatenya jd ancur
Bagus Templatenya
BalasHapusIjin Unduh Gan
Nice Good Creative
Mantep Banget bang template nya :)
BalasHapusVisit Please >>>
http://indraahmadrobani.blogspot.com/
Makasih Tamplatenya bang :D
BalasHapusMohon Kunjungannya :)
http://bazzh.blogspot.com/
Bang johanes....saya mau nanya Gimana sih Caranya Mengganti backgroundnya ??? :)
BalasHapus#casing {
Hapusbackground: #fff;
width: 100%;
max-width: 1000px;
padding: 20px 0px;
z-index: 9;
margin: auto;
}
sama
body {
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: #fff;
font-family: 'Open Sans', sans-serif;
color: #fafafa;
overflow-x: hidden;
font-size: 13px;
}
tinggal ganti kode hex pada background
Komentar ini telah dihapus oleh pengarang.
HapusKAlau Ganti Background Header bang ??? :)
HapusBang KAlau Ganti Background Header bang ??? :)
BalasHapusKalo submenu yang diatas itu ditaruh dibawah header kira" bisa gak? '-')
BalasHapusKalo iya gimana caranya?
gan... boleh request template OLshop blog ga nieh...??? :D
BalasHapusmaaf,kalau template ol shop berkaitan dengan pemasangan widget/js,saya hanya membuat template" dasar yang sederhana.
Hapussilakan dilihat" dulu template" yang tersedia saat ini ^^
klo gitu bsa ga yg template skyblue dtambah sama slider gambar... saya suka yg template itu...
Hapusmohon bantuannya sankyuu...
bang saya bingung deh buat fixnya -.- gak ngerti bang mau upload ulang tapi masang masang scriptnya males ~_~
BalasHapusBang Johanes, kok widget header untuk template ini gak ada di Tata Letak??, apa memang Bang Johanes memang gak naruh widget-nya di template ini??
BalasHapuspa boss,, klo cara besarin kotak judul gmna..??
BalasHapushttp://1.bp.blogspot.com/-hjSWTyPhYXQ/UeoLv-5_0oI/AAAAAAAABMU/t9o7C4VqNqQ/s1600/judul.jpg
http://z-sub.blogspot.com/
Yang ini keren juga kak Jo,
BalasHapusbtw, kgk ditambahin fitur kyk no image gitu?
soalnya kalo postnya gak ada gambar, ancur di home nya :v
http://testhaikaruuuuu.blogspot.com/
hasil campuran dari sana-sini :v
thanks for Templatenya gan...
BalasHapus>> http://rezpect25.blogspot.com/
mas, bikin template blogger itu enaknya pake software apa? atau gmna enaknya? aku lagi belajar bikin template soalnya.... mohon dijawab.
BalasHapusgapakai software apa",enaknya buat manual ketik sendiri sob~
Hapushttp://djogzs.blogspot.com/2013/07/video-styling-post-blogger-template.html
thanks buat templatenya! izin redesign :D lagi belajar redesign udah itu bikin template :D
BalasHapushttp://sevenblog-s.blogspot.com/
di demo kok templatenya jadi versi dark ??? padahal saya lebih suka yang putih
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusbang jo, cara nambahin garis pembatas di atas tempat widget template ini gmn ya ? mohon dijawab :3
BalasHapusilustrasi: https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1932325_740252486067672_1285340731822105492_n.jpg?oh=eaf009c22a3d17a91b42d2bb3d55e72e&oe=54DA3F29&__gda__=1423107424_0966bd08b9d560128b1bca8f2f2f8b61
kak, request template shiro & sora no game no life (grid)
BalasHapusBang Jo, maaf saya pengguna baru blogger jadi saya mau tanya kok Tata Letaknya gak bisa di edit ya setelah pake Template ini ? tolong dijawab ya :)
BalasHapuslink not found where I can get it?
BalasHapuslink ): pls
BalasHapusBang Di media Fire Filenya ga Ada Lagi. Bisa Dperbaiki?
BalasHapusAgen Winenlose || Agen Judi Winenlose || Agen judi Online Winenlose
BalasHapusWinenlose
Bonus Winenlose
Register Winenlose
Deposit Winenlose
Withdraw Winenlose
Peraturan Winenlose
Livescore Winenlose
Panduan Winenlose
Prediksi Winenlose
PREDIKSI DENMARK VS JERMAN 07 JUNI 2017