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


    Akhirnya selesai juga template kedua bulan ini dari hasil voting di fan page saya Djogzs. tema Anime kali ini adalah To Aru Kagaku no Railgun dari anime yang saat ini masih airing. Singkatnya Toaru Kagaku no Railgun adalah cerita sampingan berdasarkan cerita asli Kamachi. Bertempat di Kota Akademi, sebuah kota di mana sekitar 80% dari 230.000 penduduknya adalah pelajar. Cerita ini mengenai petualangan Misaka Mikoto sebagai pemeran utamanya, salah satu dari psikis Level 5 yang dapat mengeluarkan listrik.



    Template ini menggunakan dasar warna biru agak tua, hampir sama tampilanya dengan template yang sebelum"nya,tetapi hanya saja tampilan posting pada template ini paling berbeda dari semua template yang pernah saya buat. yaitu karena penggunaan CSS3 :nth-child() Selector yang baru saja coba-coba.CSS3 :nth-child() biasanya cuma digunakan pada widget-widget tertentu,tapi saya coba terapkan pada posting maka hasilnya adalah ukuran posting,warna,atau stylenya dapat dibedakan sesuai urutan posting tersebut.Posting pertama pada template ini menggunakan ukuran full 100% dan tinggi gambar auto, posting ke 2-5 ukuran setengahnya yaitu 47,7% sehingga jadi 2 kolom posting, dan posting urutan ke 6 dan seterusnya tidak memiliki gambar alias sticky seperti tampilan posting Shiroi agar dapat sedikit hemat gambar dan lebih simple~xD

    Template ini tidak menggunakan slider ataupun accordion ,tetapi ditambahkan menu kedua dibawah header dan footer dengan 3 kolom.

    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 url/alamat link yang ingin dituju,dan ganti juga nama linknya.

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


    Menu2
    <div id='menujohanes'>
    <ul>
    <li><a class='menu' href='#'>Menu1</a></li>
    <li><a class='menu' href='#'>Menu2</a></li>
    <li><a class='menu' href='#'>Menu3</a></li>
    <li><a class='menu' href='#'>Menu4</a></li>
    <li><a class='menu' href='#'>Menu5</a></li>
    <li><a class='menu' href='#'>Menu6</a></li>
    </ul>
    </div>



    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. Bagaimana cara 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 To Aru Kagaku no Railgun Blogger Template? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.







    Bonus PSD File Header To Aru Kagaku no Railgun~xDD






    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






    Sebelum bertanya tentang pengeditan template, silakan baca Frequently asked questions terlebih dahulu dan berusaha sendiri mencari tahu apabila ada yang ingin diedit, Terima kasih.


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

    1. apakah halaman static-nya juga udah di setting ??

      BalasHapus
      Balasan
      1. masih standart
        http://toarukagaku-bt.blogspot.com/p/tes.html

        Hapus
    2. wah bagus mas bagi tutor css posting nya dong ;P
      oh ya bang, gara - gara bang jo aku jadi suka dengerin lagu vocaloid tanggung jawab dong bang kasih tahu lagu vocaloid yang bagus apa aja bang

      BalasHapus
      Balasan
      1. klo itu juga ga bisa asal kasih css trus tinggal copy paste,html'a juga harus diatur .__.

        yes,akhirnya kena racun vocaloid juga :v

        http://djogzs.blogspot.com/p/friend-chat.html

        Hapus
      2. oke deh bang ... tumben nih langsung di jawab .. oh ya bang aku mau buat blog aku ,,, terinspirasi blog bang jo dari latar background ama warna dan pengaturan widget tapi lainnya aku atur sendiri nanti di creditnya aku kasih deh bang boleh ya bang .... boleh tengok di blog aku simpelstars.blogspot.com....
        mohon di preview ya bang kalau ada saran ama kritik dari abang nanti coba aku gubang lagi ...

        Hapus
      3. jangan banyak ditiru lahh template k jo,, kan udah kejadian pada minta template kaya k jo,, nanti k jo marah lagi lo + pasti k jo ganti" template dan akhirnya '.......' (pasti tau jawabannya).. :P

        Hapus
      4. iya aku tahu makanya aku tanya ; )
        kalau bang jo ngak berkenan ama latar atau apanya nanti aku ganti biar beda gitu ... .. aku masih ngedit terus soalnya.. moga bang jo bersedia menjawab.. aku juga ngak mau sama persis ma bang jo kan kasihan bang jo dah susah mikirin bentuk template ,aku aja dah hampir 3 bulan ngak bisa mikirin bentuk template yang beda dan unik .. aku sebenarnya suka ama style pengaturan widgetnya aja terlihat rapi dan simple sesuai judul blog aku kalau background nanti bisa aku ganti kalau bang jo ngak berkenan

        Hapus
    3. Thanks ya buat template nya.. :)
      Nanti w coba pake di blog,, klo sekarang lagi ngedit template blog black rock shooter pake tutorial video styling.. :D

      Sekalian mau nanya,, klo cara besarin gambar post + kasih jarak gmna ya di template black rock shooter..?? soalnya di video stlying gampang, tinggal ganti nilai margin..

      BalasHapus
      Balasan
      1. nihh k ss nya.. http://3.bp.blogspot.com/-QeoIcBt5H8M/UfEhOwL4k7I/AAAAAAAABM0/WxEFNrOFTQg/s1600/2.jpg

        http://z-sub.blogspot.com

        Hapus
    4. Keren Bang.
      Lanjutkan Kreasimu.

      Visit yok.

      www.sederetanime.blogspot.com

      BalasHapus
    5. bang bisa yang buat postnya di benerin gak.?? soalnya di blog saya kalo judul postnya kepanjangan postnya gak rapi -.-

      BalasHapus
      Balasan
      1. bisa aja sih tinggi judul postnya dibatesin tingginya biar sama semua, ditunggu aja ya,blum sempet cek lagi .__.

        Hapus
      2. update~
        http://djogzs.blogspot.com/p/frequently-asked-questions.html

        baca no 12

        Hapus
    6. Bang Jo Ane ada masalah. di tata letak.
      pas mau tambah widget gax bisa. gax ada tangan nya.???

      BalasHapus
    7. bang jo,, boleh request template kaya www.wardhanime.net ga,, bagus tuhh tempat postingnya + ada tag nya.. tolong ya bang di buatin,, template animenya terserah bang jo,, tapi w maunya kaya postingan www.wardhanime.net.. :D

      BalasHapus
      Balasan
      1. maaf,saya ga pernah mau ngiutin blog orang lain.

        Hapus
      2. ohh gitu,, saya cuma tertarik ama tampilan postnya,, maaf ya k jo..

        Hapus
    8. Keren banget bang Templatenya ^_^
      Saya izin download ya mau koleksi dulu
      BTW Bang Jo, cara agar blog muncul di search engine itu gimana sih?
      Saya sudah mengisi meta content
      Tapi, kok belum muncul juga ya
      Saya juga sudah menambahkan URL blog saya ke Google dan Yahoo

      Saya Masih Blogger Pemula
      Jadi Mohon Bantuannya ^_^

      BalasHapus
      Balasan
      1. ditunggu aja,memang ga secepat itu~

        Hapus
      2. Betul bang........
        Blog saya udah mulai muncul di search engine

        Makasih bang......

        Hapus
    9. Mas johanes cara buat widget google translate seperti di djogzs.blogspot.com gimana ya (yang melayang di pinggir kanan atas) saya menggunakan template metrominimalis buatanya mas johanes,dan yang mau saya tanyakan lagi, saya ingin menambah tombol share g+ di widget minishare yang ada di template metrominimalist, caranya gimana ya
      Thanks

      BalasHapus
      Balasan
      1. tinggal buat widget biasa,trus di edit html tambahin css
        #Translate1 {
        position: fixed;
        top: 0px;
        right: 0px;
        }

        klo tombolkan,tinggal ganti gambar icon google+ sama url linknya.

        Hapus
    10. Bang kalu mau melebarkan halaman posting nya bisa nggak ya?

      Sebelum nya terima kasih :D

      BalasHapus
      Balasan
      1. http://djogzs.blogspot.com/2013/07/video-styling-post-blogger-template.html

        Hapus
      2. http://djogzs.blogspot.com/2013/07/video-styling-post-blogger-template.html

        Hapus
    11. k jo,, klo cara mindahin menu horizontal dari atas ke bawah gmna..??
      http://1.bp.blogspot.com/-6CnoGkPf-EE/UfVhfIDViWI/AAAAAAAABNU/F2Vos7-t5bI/s1600/menu.jpg

      sekalian mau minta menu horizontal dari hatsune miku,, tolong ya k jo di balas,, klo comment saya yang diatas ga dibls juga gpp,, please ya yg ini di bls soalnya udh klop ama templatenya,.. TY.. :)
      http://z-sub.blogspot.com/

      BalasHapus
      Balasan
      1. pindahin html menunya ke bawah html header.
        contoh
        div id='header'
        ...
        ...
        ...
        /div
        disini

        Hapus
      2. aduhh k,, ko malah jadi berantakan ya,, jadi harus ulang dari awal.. T_T

        tolong ka di coba ama kk,, tapi pake menu yang hatsune miku,, klo ga berantakan saya minta scrip nya ya.. :)

        ohh iya mau tanya lagi,, klo di template robotic notes ko ga keluar statistiknya,, cara biar keliatan angkanya gmna..??

        Hapus
    12. Kakk Jo Template Ini Ada Responsive nya gk Kak JO ..

      BalasHapus
    13. Cara Pakenya Gimana Senpai...... Ane Masih Nubi......... Plz blz Cepet, Saya Tunggu.........

      BalasHapus
      Balasan
      1. http://djogzs{dot}blogspot.com/p/frequently-asked-questions.html

        Hapus
    14. Sipp bang jo... Langsung Coba...

      Lain kalo share PSDnya di pack (zip/rar/7z) dulu aja biar hemat sedikit... Hehehe....

      BalasHapus
      Balasan
      1. Bang, search.nya kalo masuk post/page ngilang... bisa dibetulkan g?

        sementara aku kyk gni... (^.^)
        http://subonly.blogspot.com/

        Hapus
      2. ilang gimana?
        aku cek disini
        http://subonly.blogspot.com/p/staff.html
        msh ada kq search'a .__.

        Hapus
      3. oh iya,baru sadar,kotak seachbarnya memang ga muncul di halaman statik .__.

        Hapus
      4. cari ini:


        <form action='/search' id='search' method='get'>
        <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form></b:if></b:if>

        ganti jadi begini


        </b:if></b:if>
        <form action='/search' id='search' method='get'>
        <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form>

        Hapus
    15. KK tolong donk minta covernya yang belum ada animenya please...

      BalasHapus
    16. Bang mau nanya, di blog aku postnya kenapa ngga bisa jd banyak ya? pdhl sudah diset 6 post tp yg keluar cuma 2, itu gimana cara perbaikannya?
      coba dilihat di blogku kyk gini
      kazuechanworld.blogspot.com

      arigatou!

      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 -