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


    hello again guys, pada kesempatan ini,Sudah lama ga buat templatie Minimalist, jadi saya membuat template dengan tema minimalist yang bernama shiroi,apa itu shiroi? shiroi berasal dari bahasa jepang yang bernama shiro,bukan nama anjingnya shinchan loh~xD ini karena saya tidak tahu harus memberi nama apa pada template ini .___. lol


    Template responsive yang sederhana ini menggunakan warna dasar hitam,putih dan hijau miku~
    Pada sidebar diberikan fungsi buka/tutup seperti template hatsune miku dan diberikan fitur Featured content slider yang agak" mirip dengan slider saya,slider original dapat dilihat disini .tidak boleh sama,nanti terlalu mainstream~xDD

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

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

    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. Pengaturan Slider

    <div id='wrapper'>
    <div id='featured'>
    <ul class='ui-tabs-nav'>
    <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'>
    <img alt='' src='http://3.bp.blogspot.com/--q9C3sj00Vw/UeWicMxf-iI/AAAAAAAAGyQ/PMFH4fDu07U/s1600/kurumi-tokisaki-icon.jpg'/>
    <span>Kurumi Tokisaki</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'>
    <img alt='' src='http://1.bp.blogspot.com/-wqnn_Cfv-4A/UeWibzM6AVI/AAAAAAAAGyA/YEgvrdodl6M/s1600/Date-A-Live-icon.jpg'/>
    <span>Date A Live</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'>
    <img alt='' src='http://4.bp.blogspot.com/-40eSpcTLPXo/UeWicqqhD2I/AAAAAAAAGyU/noEoeYNVxZI/s1600/miku-icon.jpg'/>
    <span>Hatsune Miku</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'>
    <img alt='' src='http://1.bp.blogspot.com/-J20o5_SVDrc/UeWicL-_0DI/AAAAAAAAGyE/NI_VKQ10jcw/s1600/hentai-ouji-icon.jpg'/>
    <span>Hentai Ouji</span></a></li>
    </ul>
    <div class='ui-tabs-panel' id='fragment-1' style=''>
    <img alt='' src='http://1.bp.blogspot.com/-YTEc5wsuz6w/UeWRmGkQkEI/AAAAAAAAGxM/xx_uiENacfs/s1600/slide1.jpg'/>
    <div class='info'><h2><a href='#'>Kurumi Tokisaki</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
    <img alt='' src='http://2.bp.blogspot.com/-VkM4yqTpv4g/UeWRmXxw1qI/AAAAAAAAGxQ/OJ8jH0rfChc/s1600/slide2.jpg'/>
    <div class='info'><h2><a href='#'>Date A Live</a></h2>
    <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit.</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
    <img alt='' src='http://1.bp.blogspot.com/-8aKJ4VSlXks/UeWRnNnRnkI/AAAAAAAAGxc/JEpVfn31moE/s1600/slide3.jpg'/>
    <div class='info'><h2><a href='#'>Hatsune Miku</a></h2>
    <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare.</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
    <img alt='' src='http://4.bp.blogspot.com/-RsWAv1AxPZw/UeWRovA9WaI/AAAAAAAAGxk/V-e4ZpwcN6A/s1600/slide4.jpg'/>
    <div class='info'><h2><a href='#'>Hentai Ouji</a></h2>
    <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
    </div></div></div>
    *Merah: Judul Slider bagian kanan.
    Biru : alamat gambar Thumbnail (yang kecil )
    Orange : Deskripsi
    Hijau : Url gambar slider
    Ungu muda : Ganti tanda pagar '#' yang bewarna ungu dengan alamat link yang dituju.
    *Ungu tua  : Judul slider bagian slide di kiri.


    *Note : Judul Disamakan berdasarkan urutan.



    Tertarik dengan Shiroi 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.






    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


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

    1. PERTAMAX mas DJO :D hahahha :3 keren Bang lanjutkan :)

      BalasHapus
    2. mantap juga, stylenya hampir sama dengan blog abang johanes, tapi keren juga boleh di coba ^^

      Moe Anime Fansclub : romi25.blogspot.com

      BalasHapus
    3. Keren templatenya. Tapi kayaknya kurang cocok buat blog personal, ya?

      BalasHapus
    4. tut....tut...
      wuih... masih pagi udh banyak yg komen :v

      BalasHapus
    5. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    6. thanks gan...

      btw tolong gan buat template,, temanya Danganronpa: The Animation.. soalnya ane suka ma animenya... arigatou gozaimasu :)

      BalasHapus
    7. Bagus tuhh template,, tapi masih bagus yg black rock shooter.. :D
      (menurut w)

      ka Johanes,, klo cara ngehapus yg di garis merah gimana..??
      http://1.bp.blogspot.com/-ahE2ifw6DvE/UeYlr0191NI/AAAAAAAABME/I4b-DlYisb0/s1600/hapus.JPG

      Soalnya yg followers mau dihapus tapi jadi kosong dibawahnya,, tolong solusi nya ya k.. :)
      http://z-sub.blogspot.com

      BalasHapus
      Balasan
      1. klo cara edit older post gmna..??
        cara ganti stile nya..??

        Hapus
    8. Mantap,
      Penghuni Setia Blog djogzs nih
      Izin Download bang djo

      BalasHapus
    9. bang, di firefoxku slidernya ga sempurna ._.

      BalasHapus
    10. Bang, Slidernya bisa lebih dari empat gak?

      BalasHapus
    11. idih makin dahsyat aja bang :D

      di tunggu lah requestnya theme one piece n eyeshield 21 ^^

      http://fachrul-gallery.blogspot.com

      BalasHapus
    12. ada yang templates one piece gak min?//

      BalasHapus
    13. wawakawkkaw slidernya baru

      tapi wallpaper miku nya ga ada yg baru

      BalasHapus
    14. Pertamax gan visit balik gan blog ane sob ;3
      https://www.facebook.com/Uchihasai48 tolong like statusnya eaaaa

      BalasHapus
    15. Tem como vocĂȘ postar apenas o slide?

      BalasHapus
    16. keren banget bang sumpah!
      btw cara bikin template "responsive" itu gimana ya?
      http://primacheat311.blogspot.com/

      BalasHapus
      Balasan
      1. http://artofhacks.binushacker.net/2013/04/cara-membuat-template-blog-responsive.html

        Hapus
    17. sob tolong share cara bikin Slider kayak di template shiroi

      BalasHapus
      Balasan
      1. ditunggu aja ya,soalnya masih ada sedikit kekurangan.

        Hapus
    18. Awesome template!!
      Hmm... How did you learn to make templates? I would like to start creating my own designs.

      BalasHapus
    19. Gan bisa Ganti Via Downloadnya medianya loadnya lama bener gak mau connect Drive aja lah

      BalasHapus
    20. makasih infonya mas saya share di blog dlo

      BalasHapus
    21. oke udah bisa MF nya Ty gan .. Demo Juga bisa liat di blog saya :v http://obasaka.blogspot.com

      BalasHapus
    22. 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
    23. ini dia bang jones yang ganteng tapi ngenes XD~~
      Saya cari yang ada slidernya hehehe pas habis ronda buka blog bang jones eh ada template yang ada slidernya pas beruntung nih saya makasih bang jones :D
      anda Selalu Membuat hati pengungjung menjadi gembira hahahahaha

      BalasHapus
    24. keren-keren templatenya...semua template djogzs saya share di wvw.ketemplate.c0m. and silahkan submit template kalian to cari traffic visitor :)

      BalasHapus
    25. Gan, template Steins;Gate kapan ada...?

      BalasHapus
    26. Izin sedot ya soalnya keren banget sih :D

      kunjungi blog saya freetemplateanime.blogspot.com

      BalasHapus
    27. bang jo ga ada PSD header nya lagi ya ? :'(

      BalasHapus
    28. Bang, kalo cara ngilangin slidernya gimana? Hehe ._.

      BalasHapus
    29. mas cara non-aktifkan sidebar buka-tutup gmn mas ?
      pliss reply

      BalasHapus
      Balasan
      1. apus script ini

        <script src='https://sites.google.com/site/djogzs/js/accordion-menu.js' type='text/javascript'/>
        <script type='text/javascript'>
        $(function() {
        $(&#39;.main2 .widget-content&#39;).hide();
        $(&#39;.main2 h2:first&#39;).addClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
        $(&#39;.main2 h2&#39;).click(function() {
        if($(this).next().is(&#39;:hidden&#39;)) {
        $(&#39;.main2 h2&#39;).removeClass(&#39;active&#39;).next().slideUp(&#39;slow&#39;);
        $(this).toggleClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
        }
        });
        });
        </script>

        Hapus
    30. cara mengganti gambar headernya gimana yak

      BalasHapus
      Balasan
      1. headernya ga ada gambar kq,klo yang kamu maksud slider'a,baca lagi pengaturan slider di halaman ini.

        Hapus
    31. bang jo cara buat slider kayak gitu gimana?
      share dong bang ^_^

      BalasHapus
    32. bang jo saya pake Template Accel World. Tapi malah di fungsi tata letak gx bisa di klik gimana tuh bang. makanya saya pake template shiroi aja

      BalasHapus
    33. bang, cara ngasih background gimana ? tapi cuma pinggirnya aja .. biar ga polos semua

      BalasHapus
    34. cara ngurangin menunya apany sih yg di hapus ?

      BalasHapus
    35. Bagaimana cara hapus slider nya gan ? Soalnya bikin ribet.

      BalasHapus
    36. bang kalau bagian post di kasih cuplikan isinya gimana?

      BalasHapus
    37. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    38. bang kalo yang 'pinterestjo' biar connect nya jadi e-mail bukan pinterest gimana ? dirubah jadi apa ? 'emailjo' ?

      BalasHapus
    39. Permisi, saya mau lapor.
      BUG REPORT!!
      Bang ane mau melaporkan adanya bug di template ini. Yang bagian menu, itu lokasinya ada dibawah slider. Jadi kalo ada submenu atau submenunya submenu, yang lewat dibawah slider (yang ada di sebelah kanan, yang ada kayak avatar terus teks judul) pasti ketutupan jadi gabisa di klik.

      BalasHapus
    40. cara memasukan gambar ram&rem seperti itu kayag mana bang

      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 -