shad0w-share

Membuat Template 3D, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada bagian template tersebut. Ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Kita bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. Contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.




Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus sobat lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :
   
   

   #sidebar1 .widget {
   margin: 0px 0px 5px 0px;
   padding: 5px 5px 5px 5px;
   background: #0000c0; /*-Background = Biru --*/
   border-top: 10px solid #6666ff; /*-Border atas = Biru Muda-*/
   border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
   border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
   border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
   }

   
   
   
2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :

#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 5px solid #ff7070; /*-Border atas = Merah Muda--*/
border-bottom: 5px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 5px solid #b00000; /*-Border kiri = Merah Tua-*/
border-right: 5px solid #b00000; /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini :



Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan Sobat coba praktekkan tips ini pada template Sobat. Dan bila Sobat berminat dengan template 3D karya Kang Fatur, Sobat bisa lihat contoh templatenya dan mendownloadnya disini. Saya rasa cukup sekian dulu postingan Saya tentang cara membuat tampilan template 3D kali ini.

Untuk para sobat yang perlu kode warana V3 silahkan klik disini

Selamat mencoba semoga dapat bermanfaat dan salam Blogger mania.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Selama ini, Sobat dapat membuat teks berjalan di area blog dengan marquee, seperti teks pada side bar, footer, header, atau judul postingan. Namun untuk membuat judul blog berjalan di bagian title bar pada browser, Sobat harus menggunakan bantuan Javascript tersendiri karena marquee hanya bisa berjalan (digunakan) di area blog saja.

Dengan tips ini, mungkin akan membuat blog Kita akan tampil beda dan yang pasti lebih hidup dan menarik. Jika tertarik, silakan ikuti tipsnya berikut ini:

Langkah-langkah membuat judul blog bergerak di title bar pada browser adalah sebagai berikut.

1. Seperti biasa Login ke Blogger hingga masuk dasbor, rancangan (design), edit HTML.

2. Kemudian cari kode <title>&lt;data:blog.pageTitle/&gt;</title> yang letaknya di bagian awal.

3. Kemudian ganti kode tersebut dengan kode di bawah ini:

<script language="JavaScript"><br />var txt="<data:blog.pagetitle/>";<br />var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;<br />txt=txt.substring(1,txt.length)+txt.charAt(0);<br />segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>

4. Sebelum Anda simpan, klik pratinjau terlebih dahulu untuk melihat hasilnya.

5. Jika sudah berjalan dengan baik kemudian Simpan Template.

6. Selesai.

Selamat mencoba dan semoga bermanfaat


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pada postingan sebelumnya sudah saya bahas tentang Kotak Komentar mulai dari Modifikasi Kotak Komentar, Cara Membuat Pesan di Bawah Poskan Komentar dan yang terakhir adalah Cara Memasang Nomor Urut Komentar. Berhubung kemarin ada dua orang sobat yang menanyakan cara Membuat Kotak Komentar di Bawah Postingan melalui obrolan di Facebook karena permintaan itulah saya sempatkan untuk membuat postingan ini.

Kotak komentar merupakan fitur yang penting dalam sebuah blog. Dengan kotak komentar ini kita bisa berinteraksi dengan pengunjung blog kita, dan juga berdiskusi tentang artikel tersebut. Oleh karena itulah banyak blogger yang meletakan kotak komentar ini di bawah postingannya untuk memudahkan pengunjung memberikan komentarnya. Sebenarnya sudah banyak kok artikel tentang cara membuat kotak komentar di bawah postingan ini.

Lalu bagaimanakah Membuat Kotak Komentar di Bawah Postingan Blog? Berikut ini caranya :

1. Seperti biasa LogIn ke Blogger sobat
   
2. Pada halaman Dasbor klik Pengaturan/Setting --> klik tab Komentar. Kemudian ganti Penempatan Formulir Komentar menjadi Disemat di bawah entri. Lihat Gambar di bawah :
   
   
   
   
3. Kemudian scroll ke bawah, klik SIMPAN SETELAN
   
   Sekarang coba sobat lihat blog sobat dan coba di klik salah satu postingan sobat kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yang dibawah postingan atau belum. Kalau sudah berarti langkah kita cukup sampai disini. Kalau belum ikuti langkah-langkah berikut ini.
   
   
   CATATAN
   Ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yang lama atau ngambil dari luar ada yang belum dan ada juga yg sudah.
   
   
   
4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
   
5. Beri tanda centang kotak "Expand widget templates".
   
6. Trus cari kode berikut ini :
   
   

   <p class='comment-footer'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <data:postCommentMsg/></a>
   </p>
   </b:if>

   
   
   
7. Kemudian ganti kode tersebut dengan kode dibawah ini:
   
   

   <p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>
   <b:include data='post' name='comment-form'/>
   <b:else/> <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <data:postCommentMsg/></a>
   </b:if> </b:if> </p> </b:if>

   
   
   
8. Lalu simpan template sobat.

Lihat deh hasilnya, coba sobat klik salah satu postingan sobat, maka di bawahnya akan muncul kotak komentar seperti punya saya ini.

Selamat mencoba mudah-mudahan berhasil dan dapat bermanfaat.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI