DJogzs Blogger Template


Djogzs Blogger Template.apa sih itu DJogzs? Djogzs adalah sebutan unik untuk blog ini yang diambil dari nama belakang sendiri,"Johanes Djogan" xD. nah pada kesempatan kali ini,saya mau berbagi template lama dengan maskot Rikka waktu masih normal dari anime Chuunibyou~xD.karena tampilan blog saya yang sekarang sudah berganti(mungkin akan diganti lagi~xD) dan saya dengar juga banyak yang tertarik dengan template sederhana ini,maka saya bagikan secara free.


Bisa Dikatakan ini adalah template dasar dari semua template yang pernah saya buat.misal date alive,hatsunemiku,kurumi,devil survivor dan lainya.jika anda perhatikan/mencoba semua template yang pernah saya share,struktur dan css menu,autoreadmore footer selalu sama tidak ada bedanya.yang berbeda hanya tampilanya karena sudah dimodifikasi html dan css'a secara manual~xD

Mengenai template ini sendiri,hanya template sederhana dengan tampilan posting 3 kolom,dan 3 kolom footer,tetapi,sebenarnya footer itu juga adalah sidebar.jadi widget yang ada di footer,saat kita membuka halaman posting blog,secara otomatis akan menjadi sidebar~xD

Untuk teman" yang masih belajar,mungkin template ini cocok untuk belajar merubah tampilan blog agar lebih menarik.



Screenshot

Halaman depan


Halaman posting




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


Contoh:
<li><a href='http://www.facebook.com'>Facebook</a></li>



<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Deviantart</a></li>
<li><a href='#'>Pinterest</a></li>
</ul></li>
<li><a href='#'>Exchange link</a></li>
<li><a href='#'>Guest book</a></li>
<li><a href='#'>MediaFire</a></li>
<li><a href='#'>About Blog Johanes</a></li>
<li><a href='#'>Privacy Policy</a></li>


Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='dark_menu'> ....</ul>



2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


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



3. Mengganti gambar Header Blog
Buka edit HTML lalu cari url dibawah ini
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




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


Komentar

  1. waw.... aku sedot....

    Thanks ^_^

    BalasHapus
  2. mantep bang :') sebenernya aku ngincer PSDnya buat ambil render rikka :v muhaahahahahaha

    BalasHapus
  3. ini nih! gw demen banget sama template yang ngemudahin buat diedit. tnx bang jo xD

    BalasHapus
  4. Mantap gan, sy dari dulu udah iri nih xD

    BalasHapus
  5. Thanks jarang2 ada Template sama dengan Gratiss...
    Salam Heuw [peinchigo.blogspot.com]

    BalasHapus
  6. Izin Downloadddddddd bang Djogggggz :D

    BalasHapus
  7. keren bang jo ..... bang jo emang punya taste bagus buat cari gambar - gambar anime ... kawai semua......

    BalasHapus
  8. kaka jo, ko templetnya beda ama yg ini sih? XD

    BalasHapus
  9. Sugooooii..
    Ka Johanes, tolong cek blogku donx, kan pake templatemu, takut ada yg gak berkenan :))
    http://kurukiblog.blogspot.com

    BalasHapus
  10. wah sugoi mas johanes ,
    dengan make template bang johanes dan dengan corat coret edit psd mas johanes blog gue jadi begini :)

    http://ariandrinan.blogspot.com/

    BalasHapus
  11. mau tanya bang johanes kalo yang di halaman utama posting nya itu diganti sama yang kayak di template robot itu bisa gak ?

    BalasHapus
  12. yg versi responsivenya ada ga bang jo ? kyk yg bang jo pake :3

    BalasHapus
  13. 1dragonnandoblogspot (6/27/13 1:53:19 PM): 1. Banner Blog Anda Telah Saya Pasang Di 1DragonNando.blogspot.com
    1dragonnandoblogspot (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??


    BalasHapus
    Balasan
    1. .menujohanes {
      background: #222;
      width: 100%;
      padding: 0px;
      position: relative;
      margin: auto;
      }

      background: #222; ,tinggal ganti kode warnanya

      Hapus
    2. Itu Ganti Warna Backgroud apa Sobs?
      Klu 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 ]]><....

      Hapus
    3. warna biru:
      ul.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

      Hapus
  14. Bagus Templatenya
    Ijin Unduh Gan


    Nice Good Creative

    BalasHapus
  15. Mantep Banget bang template nya :)

    Visit Please >>>
    http://indraahmadrobani.blogspot.com/

    BalasHapus
  16. Makasih Tamplatenya bang :D
    Mohon Kunjungannya :)
    http://bazzh.blogspot.com/

    BalasHapus
  17. Bang johanes....saya mau nanya Gimana sih Caranya Mengganti backgroundnya ??? :)

    BalasHapus
    Balasan
    1. #casing {
      background: #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

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. KAlau Ganti Background Header bang ??? :)

      Hapus
  18. Bang KAlau Ganti Background Header bang ??? :)

    BalasHapus
  19. Kalo submenu yang diatas itu ditaruh dibawah header kira" bisa gak? '-')
    Kalo iya gimana caranya?

    BalasHapus
  20. gan... boleh request template OLshop blog ga nieh...??? :D

    BalasHapus
    Balasan
    1. maaf,kalau template ol shop berkaitan dengan pemasangan widget/js,saya hanya membuat template" dasar yang sederhana.

      silakan dilihat" dulu template" yang tersedia saat ini ^^

      Hapus
    2. klo gitu bsa ga yg template skyblue dtambah sama slider gambar... saya suka yg template itu...

      mohon bantuannya sankyuu...

      Hapus
  21. bang saya bingung deh buat fixnya -.- gak ngerti bang mau upload ulang tapi masang masang scriptnya males ~_~

    BalasHapus
  22. Bang Johanes, kok widget header untuk template ini gak ada di Tata Letak??, apa memang Bang Johanes memang gak naruh widget-nya di template ini??

    BalasHapus
  23. pa boss,, klo cara besarin kotak judul gmna..??
    http://1.bp.blogspot.com/-hjSWTyPhYXQ/UeoLv-5_0oI/AAAAAAAABMU/t9o7C4VqNqQ/s1600/judul.jpg

    http://z-sub.blogspot.com/

    BalasHapus
  24. Yang ini keren juga kak Jo,
    btw, 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

    BalasHapus
  25. thanks for Templatenya gan...

    >> http://rezpect25.blogspot.com/

    BalasHapus
  26. mas, bikin template blogger itu enaknya pake software apa? atau gmna enaknya? aku lagi belajar bikin template soalnya.... mohon dijawab.

    BalasHapus
    Balasan
    1. gapakai software apa",enaknya buat manual ketik sendiri sob~
      http://djogzs.blogspot.com/2013/07/video-styling-post-blogger-template.html

      Hapus
  27. thanks buat templatenya! izin redesign :D lagi belajar redesign udah itu bikin template :D

    http://sevenblog-s.blogspot.com/

    BalasHapus
  28. di demo kok templatenya jadi versi dark ??? padahal saya lebih suka yang putih

    BalasHapus
  29. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  30. bang jo, cara nambahin garis pembatas di atas tempat widget template ini gmn ya ? mohon dijawab :3

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

    BalasHapus
  31. kak, request template shiro & sora no game no life (grid)

    BalasHapus
  32. Bang 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 :)

    BalasHapus
  33. link not found where I can get it?

    BalasHapus
  34. Bang Di media Fire Filenya ga Ada Lagi. Bisa Dperbaiki?

    BalasHapus
  35. Artikel Yang Bagus Gan Mohon izin Comment nya ^_^

    BOLA PELANGI - BANDAR MIX PARLAY TERBESAR DI INDONESIA HANYA DENGAN 1 USER ID SUDAH BISA BERMAIN SEMUA GAME.
    Join US ! klik link di bawah ini ☟

    Prediksi Bola dan Togel
    Bola Online
    Mix Parlay
    Bola Jalan
    Bandar Bola

    Untuk Info Dan Bonus Menariknya Bisa Hubungi Kami Di Bawah Ini :
    WHATSAPP 1 : +6282143134681
    WHATSAPP 2 : +6281333472723

    Ayo buruann , mana tau kamu menjadi jutawan setelah bergabung dengan kami .. buruann !!!

    ♛ Group FB Prediksi Parlay = https://www.facebook.com/groups/346501502486292/
    ♛ Instagram = https://www.instagram.com/bolapelangi_01/Bola Pelangi
    ♛ Pinterest = https://id.pinterest.com/bolapelangilounge/ Bolapelangi Lounge
    ✆ WA = +6282143134681 || +6281333472723

    BalasHapus
  36. PERMAINAN ONLINE TERBESAR DI INDONESIA

    Website paling ternama dan paling terpercaya di Asia ^^
    Sistem pelayanan 24 Jam Non-Stop bersama dengan CS Berpengalaman respon tercepat :)
    Memiliki 8 Jenis game yang sangat digemari oleh seluruh peminat poker / domino

    - Adu Q
    - Bandar Q
    - Bandar Sakong
    - Bandar Poker
    - Poker
    - Domino 99
    - Capsa Susun
    - BANDAR66 / ADU BALAK ( GAME TERBARU )

    Permainan Judi online yang menggunakan uang asli dan mendapatkan uang asli ^^
    * Minimal Deposit : 20.000
    * Minimal Withdraw : 20.000
    * Deposit dan Withdraw 24 jam Non stop ( Kecuali Bank offline / gangguan )
    * Bonus REFFERAL 15 % Seumur hidup tanpa syarat
    * Bonus ROLLINGAN 0.3 % Dibagikan 5 hari 1 kali
    * Proses Deposit & Withdraw PALING CEPAT
    * Sistem keamanan Terbaru & Terjamin
    * Poker Online Terpercaya
    * Live chat yang Responsive
    * Support lebih banyak bank LOKAL
    * Link Alternatif :
    - sahabat2019.com
    - sahabat2019.net
    - sahabat2019.org
    - sahabat2019.info


    Contact Us

    Website SahabatQQ
    WA 1 : +85515769793
    WA 2 : +855972076840
    Telegram 1 :+85515769793
    Telegram 2 : +855972076840
    LINE : SAHABATQQ
    TWITTER : SahabatQQ
    Kami Siap Melayani anda 24 jam Nonstop
    daftar sahabatqq

    BalasHapus

Posting Komentar

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

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template