Dian's File

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






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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBljGdxawA7IiFF174THm5Yr0JbngvtzONjjd4Vbxze5ubIUDLv8o5H80ILYOww2Q1Mwh-lp55JfsNvrS5sTBK72NKrJ2CXePmKi-Pse2gG6Hf861jd92u8-SraLevYbCv3N1JGtm9T90/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8YHn5TzI2L0oHjRXPLQvwIDWknO26zeuQK1IfA8SxGHz7eD7XanlhJEg4QAomw5IfuIm8bdZVeu5sMI9KQND6_hTs8Js3o-38d0hlgDtA-lItYXuKdGGvZkFxbNhcgSyW85u3F3Z7kTk/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbj2OuH-RsDSgaq4A1fGNQ_9L3pb26Uu8uFUWJOKmzhZ_6oDNSGLEM1w_WTMewvj3L0D7iAOcIUCUyPL659ZHQV5wB5SgygCzV_ugRsWC4TdOCLzh_fqjKHWsSBOcAzkK20UVn0FtYbU/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit57_yIBaot89sAaxhGQt-WatGiv9ZsS2ocnm-GjgSVDVslbhGyMc-g6-fNzzBJP43M7g3sf7v63j575Jwd7SJywiU7wIKG0F0EbDkNE8l4raLpfJOe6FShT70qwf9Qo1DdXcTNwBxj8o/s1600/hentai-ouji-icon.jpg'/>
<span>Hentai Ouji</span></a></li>
</ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MOazZ6LdiUGFFUP6kkYpodstsCFOen_f-j8kDCDvtU4spmSoRlb8je26CZ6o9T-gaAvWTD3URTafYTtKIuaMxQXFioSeStaA-aGQAU_vlgpLwOMIfuKdkS2qd197UVj78wgEjgVi-gs/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wZMH_b7fDlCHBNpNB8PAfxJ0jheoeQNH4F82ySFm9N2jXiZdgJmcLWxWqIJHA27j9joaZ36toHGJZpoN48HHhjxDdBCzN6NEyJtxM6ogEx5d31t005iEcpwL01dZLyffSCrzN5AiW-s/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV1uvn15_9-kUX1-28Nkvo1YnqdrVR6k09pM2WWCKuSBdC7NNtupTh73tsK5fepTjrmYONJWIb0tqZqCvFA3W4vu9nrAA9KNAkpjO2Voo4EgjUSs81SP0Xz_Aa5g4co8ECC75vtTm6dSA/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZml6z9si6neCpJvoNf346JE637SwGRUwcmm0TZ4OUKRpxrrWMbSaoKoKeQBgN7FrauHaT5P3Yq7SrK0rZ1o_CAJsdLTH66-MkW3v8gvZBdtiKB3edGxc3T31s3XrvfDxju7FGkDtco_A/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

Halo dunia, kali ini saya akan memberikan video demonstrasi dasar" cara merubah tampilan posting pada template lama saya DJOGZS.

Video ini dimaksudkan agar orang" dapat tahu,paham dan mengerti dasar" pengeditan template blogger,tetapi didalam video ini hanya dikhususkan pada bagian posting. Video ini juga akan menjawab pertanyaan anda misal :


Bagaimana sih cara merubah tampilan posting pada template "A" seperti tampilan posting template "B" ? apakah bisa diberikan kodenya/bagaimana caranya?

Caranya tentu saja tidak semudah yang dibayangkan,karena setiap template yang saya buat struktur HTMLnya sudah berubah meskipun beberapa nama CSSnya sama 100%, Saya hanya sebatas berbagi/sharing, jadi jika anda meminta saya untuk mengedit template, tolonglah untuk berusaha sendiri jangan selalu tergantung pada orang lain, be an single fighter , atau jika ingin mempunyai tampilan posting template "A" , silakan langsung mengganti template tersebut.

nah,pertama anda download Video dibawah ini,ukuranya sudah saya pecah menjadi 2 bagian.
satukan kembali/ JOIN dengan HJ split.









Tools

1. Browser Google Chrome versi terbaru. (Rekomendasi)

2. Template dasar :DJogzs Blogger Template


A. Review

Sebelum memulai penjelasan saya tentang video diatas,ada baiknya untuk mereview kembali secara SINGKAT DAN JELAS fungsi" HTML dibawah ini,perhatikan struktur html posting dibawah ini.

(klik untuk perbesar gambar)


1. Pada urutan terluar/layer pertama adalah:

<b:if cond='data:blog.pageType != &quot;item&quot;'>.... </b:if>
code di atas adalah html tag conditional yang berfungsi agar element yang ada didalamnya tidak tampil di hlalaman bacaan,bagaimana mengetahuinya? secara teori jika kita perhatikan data:blog.pageType !=.artinya data blog(posting) ditargetkan ke page/halaman negasi sama dengan(!=),jadi selama ada kode negasi(!) element didalamnya tidak akan menampilkan di halaman tersebut.penjelasan lebih lanjut dapat anda baca di sini

2. post hentry(saya kosongkan cssnya),jadi yang dipsakai adalah postright yang merupjakan element terpenting untuk mengatur posisi posting pada bagian akhir/luar.

<div class='post hentry'>
<div class='postright'>
...
...
</div></div>

3. Kode HTML auto readmore di bawah ini,berfungsi untuk menampilkan summary dan thumbnail secara otomatis dari postingan kita dengan pengaturan yang dapat diatur ukuran dan jumlah kata deskripsi atau summary posting.

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

ketika diterapkan,maka html akan otomatis berubah menjadi :

<div id="summary6704815413655614278">
<div class="crop">
<img src="http://gambar.jpg" width="270px;"></div>
<div class="posting">
deskripsi</div></div>

oleh karena itu setiap template saya,ketika di cek html gambar dan deskripsi template saya adalah .crop dan .posting,saya sengaja memberikan nama itu agar mudah diingat,crop=potong gambar,posting=deskripsi~xDD

4. setelah itu dibawah html autoreadmore diatas tadi,adalah html yang dapat menampilkan judul postingan kita.

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='&quot;Permanent Link to &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='&quot;Permanent Link to &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

5. Selanjutnya adalah html jomore,fungsinya hanya sebagai pembatas wilayah didalamnya yang berisi html yang berfungsi untuk menampilkan jumlah komentar dan tanggal default posting

<div class='jomore'>
<b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comment on &quot; + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
<b:if cond='data:post.dateHeader'>
<div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

6. html div style='clear:both' atau biasajuga menjadi div class='clear' atau sebagai pemanggil fungsi css clear:both; berfungsi sebagai break/ganti baris,page break.posisi float akan normal.

<div style='clear: both;'/> <!-- clear for photos floats -->

7. Html dibawah ini adalah html yang berisi link yang ditujukan ke alamat posting berfungsi menjadi tombol read more.

<div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a></div>

8. Dan yang terakhir ada html categ(categories) yang berfungsi untuk menampilkan tag/kategori posting tersebut.

<div class='categ'><b:if cond='data:post.labels'>Tag : <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=3&quot;' expr:title='&quot;View all posts in &quot; + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop></b:if></div>

Penjelasan Lain" mengenai HTML :
-mengenai pengenalan html class dan id

-mengenai dasar" html dan CSS

perlu saya tambahkan mengenai dasar" html dan CSS,
Intinya adalah HTML berfungsi sebagai pondasi atau kerangka template pada suatu website entah itu blog/forum/blog/wapsite.
sedangkan CSS dari singkatanya sudah dapat diketahui Cascading Style Sheets yaitu sebagai pengatur style yang ditujukan pada suatu element html tertentu.
misalkan saya membuat css class dan ID dengan nama :
.johanes{...} dan #johanes{...}

maka HTMLnya akan menjadi

<div class='johanes'>...</div> (untuk fungsi class)

dan

<div id='johanes'>...</div> (untuk fungsi ID)


HTML yang dibuat harus dibuat dengan awalan div dan diakhiri juga dengan slash div (/div)

atau bila html tersebut adalah single fighter/forever alone(bahasa gaulnya~xD)

posisi slash "/" akan berada di belakang,misal <div class='johanes'/>

pemasangan link: <a href='http://alamatyang dituju.html'>nama link</a>

untuk pemasangan gambar dengan html : <img src='http://alamatgambar.jpg'/>
#khusus untuk pemasangan gambar,karena cuma berfungsi untuk pemanggilan gambar,maka posisi slash harus berada diakhir,jika tidak,ketika anda menyimpan kedalam template biasanya akan terjadi error syntax atau html tidak valid.

2. Penjelasan pada video demo





Pada langkah pertama,yang saya lakukan yaitu merubah ukuran element/html posting bagian terluar,harus diatur ukuranya agar tepat menjadi 2 kolom dan tidak terjadi overflow jika di zoom-in/zoom-out.




Kedua yang saya lakukan adalah memunculkan kembali element deskripsi posting yang awalnya memang dihidden/sembunyikan dengan menghapus css display:none;,lalu diatur kembali css'a agar posisi deskripsi berada di sebelah kanan thumbnail posting.



setelah itu cara memindahkan judul posting ke atas thumbnail,caranya adalah memindahkan html tersebut,jadi bayangkan saja jika html itu adalah sebuah tumpukan batu bata,memindahkan dari layer bawah keatas bukanlah dengan css,karena fungsi html kalau menurut saya sendiri hanya sebuah pondasi/kerangka ,sedangkan css hanya untuk mengatur style pada suatu element html.
contoh gambaran:




pada menit ke 13 - 43 adalah membuat menu hover + = readmode dengan element lain yang akan di hover.





jika kalian perhatikan bagaimana bisa ketika element jomorelink ketika di hover, element jomore yang beranimasi?
triknya adalah memindahkan seluruh isi html jomore kedalam tombol menu readmore yang merupakan element dari jomorelink,possisinya menjadi seperti ini

<div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a>

<div class='jomore'>
<b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comment on &quot; + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
<b:if cond='data:post.dateHeader'>
<div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

</div>

element jomore berada di dalam jomore link,lalu selanjutnya penggunaan css

pertama,element jomore kita atur dahulu posisinya,misal pada video saya letakan tepat diatas thumbnail gambar dengan posisi absolute/bebas yang berada di dalam element postright agar tidak keluar batas dari wilayah element tersebut yang mempunyai posisi relativ,setelah itu kita sembunyikan dengan memberikan css opacity:0; pada jomorelink agar dapat disembunyikan juga;
setelah semuanya sudah tak terlihat,pertama kita buat hover efek pada tombol readmore agar dapat dimunculkan kembali ketika kita arahkan kursor ke posting dengan cara menambahkan css:

.postright:hover .jomorelink{opacity:1;}

arti css diatas adalah ketika kita arahkan kursor ke wilayah html postright,maka akan menampilkan efek hover pada element jomore link yaitu opacity menjadi 1.agar efek hovernya bisa halus,digunakanlah css3 transisi (transition: all 0.3s ease-in-out;)

setelahh berhasil menampilkan tombo menu readmore,selanjutnya adalah memuncukan kembali element jomore yang berada didalam element jomorelink dengan cara menambahkan css:

.jomorelink:hover .jomore {opacity:1}

setelah berhasil sampai disini,kita tinggal atur posisi,warna atau backround yang kita inginkan,untuk merubah posisi element jomore,akan sangat berpengaruh juga pada element html jomorelink,oleh karena itu pada video saya sedikit mengalami kendala untuk mengaturnya.

pada element jomore tersebut jika merasa sudah aman,kita bisa styleing lagi efek animasinya,seperti pada video,saya posisikan awal bottom:-65px,lalu efek hovernya ditambahkan bottom:0px;.jadi posisi nya akan berubah atau sliding ketika saya hover tombol readmorenya.



bila sudah dirasakan cukup rapih posisinya,barulah kita styling lagi seperti merubah warna/background pada judul,deskripsi ataupun footer posting tersebut. oia,apabila kita tambahkan border meskipun itu 1px,posisi bisa berubah,jadi ukuran element terluar haus diatur lagi lebarnya karena 1px sangat memperngaruhi.






Demikian penjelasan singkat cara Styling posting pada template dasar DJogzs,semoga bermanfaat ^^ dan mengerti setelah melihat video demo saya dan membaca dasar " tentang html dan css yang saya berikan. Selamat belajar,Indonesia semangat~
*Baca dan pahami,jangan pernah mau disuapi trus,cari tahu sendiri,informaasi beredar luas diinternet,teruslah berlatih praktek agar mudah dipahami sendiri untu belajar secara otodidak,setel lagu vocaloid/anime biar semangat meskipun ada miliyaran code" didepan anda.


Bagi yang mengalami kegagalan cuma muncul suaranya saja , silakan download tsc2 standalano.

http://techsmith.custhelp.com/app/answers/detail/a_id/3558/~/camtasia-studio-8%3A-download-the-tsc2-standalone-codec

thx to dian ardi ^^

atau instal dan download codec

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMohUTFV0vzJU_susexQzem25TcILmbW1s8ybyPVcKOli6cwU3RXM-K73Xs589ZwvkXgvQXhlU4M5bJRMYOzESlLpgVHsrTOdeG30RrVU8GitSh-lVAeoe7VVSWLrm2Qw3yy9j29PYGr4/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

Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD




Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.

Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD


Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Setelah itu letakan Jquery diatas ini tepat diatas kode </body>

Jquery

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.

Semoga bermanfaat,Arigatou Gozaimasu~

Ore no Imouto, atau yang biasa disebut Oreimo kependekan dari Ore no Imoto ga Konna ni Kawaii Wake ga Nai( My Little Sister Can't Be This Cute)adalah seri Japanese novel yang ditulis oleh Tsukasa Fushimi, dan diillustrasi oleh Hiro Kanzak.Seri manga ini sudah diadaptasi menjadi anime dan sudah mencapai Season 2 bulan kemarin.Ore no Imouto menceritakan tentang seorang adik perempuan yang bernama Kirino yang memiliki hobi akan eroge yang hanya diketahui oleh sang kakak yaitu Kyuosuke yang bertugas menjaga agar orang-orang tidak mengetahui hobi adiknya yang aneh..Kalau bagi kalian yang sudah nonton sampai S2 pasti sudah tahu.~xD
Lebih lanjut Mengenai anime ini dapat anda lihat di my animelist.



Template Cerah dengan warna dasar kuning biru muda ini juga masih sama seperti template Sebelumnya Hataraku maou-sama,yang berbeda yaitu style post thumbnail dengan 2 kolom,dan template ini menggunakan system responsive sehingga dapat menyesuaikan dengan ukuran layar dekstop.

Nah akhirnya selesai juga,cukup lelah juga loh membuat 2 template dalam waktu yang bersamaan dengan template TITAN.Untuk Tema template selanjutnya,saya tunggu pemilihan suara terbanyak di fan page saya DJOGZS karena saya sedang liburan kuliah,jadi punya waktu untuk mengisi liburan saya di depan laptop(forever alone) .___.,tetapi karena liburan juga terkadang saya tidak bisa online setiap hari dikarenakan ada sedikit urusan dengan perkuliahan dan urusan keluarrga yang mengharuskan saya bolak-balik setiap sabtu jakarta-Lippo cikarang.

Okay,semoga Harimu menyenangkan,ganbatte Kudasai~ ^^



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. Setting tanggal posting / 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 Template Ore no Imouto ini? 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

Shingeki No Kyojin atau biasa disebut Attack on Titan adalah sebuah serial manga dan anime Jepang yang saat ini masih airing sampai episode 25 .Anime ini Cukup Ramai dan Dikenal luas sejak pertama rilisnya pada sebuah anime,sama seperti sword art online yang heboh sekali,sampai" bisa dikatakan Cosplaynya sudah mainstream :v




Tema Template kali ini juga merupakan Hasil Voting terbanyak di fanspage minggu lalu bersamaan dengan template Oreimo.
Template ini mempunyai 1 kolom posting,sidebar,dan 3 kolom widget footer serta menggunakan warna dasar coklat gelap agar sesuai dengan tema pada header template ini.Featurenya masih sama dengan template" sebelumnya,yang berbeda adalah template ini menggunakan system responsive sehingga ukuran body template dapat otomatis menyesuaikan dengan ukuran layar dekstop.



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. Setting tanggal posting / 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 Template Shingeki No Kyojin ini? 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

Hello friends, template tema kali ini adalah Hataraku Maou-sama! yang merupakan hasil voting terbanyak dari Fanspage di facebook saya.


PV


yeah,meskipun Animenya sendiri sudah tamat,tapi masih banyak penggemarnya yang ingin menunggu season 2 nya.
Template sederhana ini dengan warna dasar biru cerah,logo header emilia yusa,maou dan Chiho chan.kawaii desu ne?? ne?? ne?? xDD
Dan template ini dilengkapi dengan social bar,page navi numbering,dan lightbox blogger yang sudah berfungsi /fix.
next mengenai Style posting di halaman utama pada template ini juga sedikit berbeda dengan yang lainya,yaitu ukuran gambar maksimal hanya 535px dan tinggi 330px.apabila gambar pada posting memiliki ukuran lebih dari 535px,maka deskripsi akan otomatis berpindah posisi tepat diatas gambar.dan apabila gambar pada posting memiliki ukuran kurang dari 415px,maka deskripsi posting akan otomatis menyesuaikan posisinya tepat disebelah gambar.

Serta jika postingan kita tidak memiliki content gambar,maka descripsi posting akan otomatis menyesuaikan ukuranya pada posting.jadi artikel yang ingin kita posting,dapat berubah" stylenya tergantung ukuran gambar yang kita terapan.untuk mengatur ukuran gambar,dapat ditentukan sendiri saat memposting sebuah artikel





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. Setting tanggal posting / 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 Template Hataraku Maou-sama! Template ini? 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 Hataraku Maou-sama!~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