NEWS
Loading...
  • Posted by : Johanes Djogan 15 Jul 2013


    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


    { 51 comments... read them below or Comment }

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

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

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

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

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

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

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

      BalasHapus
    8. 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
    9. mau tanya bang johanes kalo yang di halaman utama posting nya itu diganti sama yang kayak di template robot itu bisa gak ?

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

      BalasHapus
    11. 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
    12. Bagus Templatenya
      Ijin Unduh Gan


      Nice Good Creative

      BalasHapus
    13. Mantep Banget bang template nya :)

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

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

      BalasHapus
    15. 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
    16. Bang KAlau Ganti Background Header bang ??? :)

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

      BalasHapus
    18. 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
    19. bang saya bingung deh buat fixnya -.- gak ngerti bang mau upload ulang tapi masang masang scriptnya males ~_~

      BalasHapus
    20. 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
    21. 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
    22. 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
    23. thanks for Templatenya gan...

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

      BalasHapus
    24. 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
    25. thanks buat templatenya! izin redesign :D lagi belajar redesign udah itu bikin template :D

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

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

      BalasHapus
    27. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    28. 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
    29. kak, request template shiro & sora no game no life (grid)

      BalasHapus
    30. 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

    "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

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -