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

Postingan ini dibuat atas permintaan sahabat saya yaitu Habil'zz� melalui kotak komentar, dia menanyakan agar diblognya bisa kelihatan "Photo Komentar". Sebelumnya saya mohon maaf padah Habil'zz� karena saya baru bisa menjawab pertanyaan sobat.

Atas pertanyaan itulah pada kesempatan ini saya mengetengahkan postingan yang berjudul "Menampilkan Poto Avatar Pada Komentar". Mungkin postingan seperti ini bagi para sobat sudah tidak asing lagi khususnya para master-master blogger.

Tutorial "Menampilkan Poto Avatar Pada Komentar" ini sudah saya pake sejak lama dan Alhamdulillah selain untuk melihat Photo sahabat kita yang berkomentar tapi juga tampilan komentar kitapun lebih cantik.




Sebelum kita memulai tutorial ini, pertama-tama dan yang paling utama pastikan settingan untuk Photo komentar para sobat sudah benar. Cara penyettingannya adalah sebagai berikut :

1. Pastikan sobat sudah Login ke Akun/Dasbor
   
2. Pilih Pengaturan?Setting
   
3. Kemudian masuk ke tab Komentar dan scroll sampai kebagian paling bawah, dan berikan tanda centang pada Tampilkan gambar profil dalam komentar?
   
4. Kemudian klik tombol Simpan Setelan

Kalau Settingan komentar sudah benar kita lanjut ke tahap selanjutnya yaitu Menampilkan Photo Avata Pada Komentar.

1. Seperti biasa sobat harus dalam keadaan Login
   
2. Masuk ke Rancangan , kemudian pilih menu Edit HTML
   
3. Alangkah baiknya BackUp dulu sebelum mulai mengedit, untuk sekedar berjaga-jaga. Dengan cara klik "Download Template Lengkap".
   
   
   
   
4. Kemudian beri tanda centang pada link "Expand Template Widget"
   
5. Selanjutnya cari kode ini ]]></b:skin>
   
6. Setelah ketemu simpan kode berikut tepat diatas kode ]]></b:skin>
   
   

   .avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
   .avatar-image-container img { background:transparent url(http://photoserver.ws/images/qoyS4cc437164683f.jpg)no-repeat;width:40px; height:40px;}

   
   
   
7. Masih lanjuut, sekarang cari kode seperti ini <dl id='comments-block'> atau kalau tidak ada cari kode ini <div id='comments-block'>
   
   
8. Jika Element Template sobat memakai kode ini <dl id='comments-block'> gantilah dengan kode berikut :
   
   

   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

   
   
   
9. Jika Elemen Template Sobat memakai kode ini <div id='comments-block'> maka gantilah dengan kode berikut :
   
   

   <div expr:class='data:post.avatarIndentClass' id='comments-block'>

   
   
   
10. Masih lanjut sob detik-detik terakhir, cari kode seperti ini <a expr:name='data:comment.anchorName'/>
    
    
11. Setelah ketemu kemudian ganti kode tersebut dengan kode berikut :
    
    

    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

    
    
    
12. Setelah langkah-langkah diatas rill, sekarang saatnya kita klik Simpan/Save, dan lilhat hasilnya

Selamat mencoba semoga berhasil dan tanpa ada kendala apapun selama menjalankan langkah demi langkah di atas, dan mudah-mudahan tutorial ini dapat bermanfaat di hati para sobat. Amiin



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pada postingan sebelumnya Kang Fatur pernah mengetengahkan Postingan yang berjudul Cara Memodifikasi Kotak Komentar Blogger. Kali ini lagi-lagi Kang Fatur akan membahas masalah Kotak Komentar. Namun, yang akan kita bahas kali ini sedikit berbeda yaitu tentang Cara MEmbuat Pesan di Bawah Poskan Komentar.

Baik kali ini saya tidak akan panjang lebar menjelaskannya mungkin Parasobat semua juga sudah paham tentang hal ini OK.

Cara pembuatannya gampang tinggal sobat ikutin langkah-langkah sebagai berikut :

1. Masuk ke account Blogger anda sendiri sehinggan masuk ke Dasbor.
   
2. Pilih Tata Letak/Edit HTML.
   
3. Jangan lupa beri tanda centang pada kotak kecil "Expand Template Widget"
   
   
   
   
4. Cari kode dibawah ini :
   
   

   <p><data:blogCommentMessage/></p>

   
   
5. Kemudian taruh pesan anda di bawah kode diatas
   
6. Simpan Template

Setelah sobat berhasil mengikuti langkah langkah di atas. Maka hasilnya akan seperti pada gambar dibawah ini :




Selamat mencoba semoga berhasil dan dapat bermanfaat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pada kesempatan pagi yang cerah ini saya sebelum brangkat kerja menyempatkan diri untuk menjawab salah satu pertanyaan sahabat dekat saya yaitu Seri Bahasa. Yang isi pertanyaannya :



Dengan pertanyaan itulah saya membuat postingan ini yang berjudul Modifikasi Kotak Komentar Blogger. Selain untuk menjawab pertanyaan seri tadi mudah-mudahan tips atau postingan ini juga dapat bermanfaat bagi sobat-sobat yang lain.

Baik jika para sobat pingin liat seperti apa screenshotnya seperti di bawah ini :



Baik berhubung waktu sudah semakin siang kita lagsung aja ke langkah-langkah cara pembuatannya :

1. Seperti biasa Sobat LogIn ke blog masing-masing
   
2. Klik Rancangan --> Edit HTML
   
3. Beri tanda chacklist pada tulisan "Expand Template Widget"
   
4. Cari Kode berikut :
   
   

   <div class='comment-form'>
   

   
   
   
5. Setelah ketemu ganti kode tersebut dengan kode seperti ini
   
   

   <div id='ib-form'>

   
   
   
6. Kemudian tambahkan kode berikut di atas kode ]]></b:skin>
   
   
   

   #ib-form iframe{
   background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
   border:7px solid #C7C7C7;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:95%;height:250px;}
   #ib-form iframe:hover{
   background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
   border:7px solid #7EB2AC;}
   #ib-form a{
   color:#7EB2AC;}
   

   
   
   
7. Setelah semua langkah-langkah di atas selesai klik tombol Save. dan lihat hasilnya
   
   Semoga bermanfaat
   
   
   
   KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pada postingan sebelumnya saya pernah membahas tentang Tiga Kolom/Elemen Halaman Widget di Bawah Header dan Cara Menambah Dua Elemen di Bawah Header, tapi kali ini kita akan coba membahas tentang Menambah Kolom di Luar Content Blog.

Menambah kolom diluar content blog maksudnya adalah menambah kolom pada elemen template akan tetapi penempatannya diluar template aslinya. Contohnya adalah pada gambar berikut :


Pada tambahan kolom tersebut, anda dapat menggunakannya untuk berbagai hal. seperti menaruh script iklan atau yang lainnya.

Cara Membuat Kolom Diluar Content Blog adalah sebagai berikut :

1. Setelah anda login di blogger, langsung menuju ke "Rancangan >> Edit HTML".
   
2. Cari code #outer-wrapper, perhatikan berapa width code tersebut.
   
3. Tambahkan code CSS berikut dan letakkan di atas code #outer-wrapper :
   
   

   /* Luar-Wrapper */
   #luar-wrapper {
   background:#ccc;
   width:1350px;
   }
   
   /* Luar-Kiri */
   #luar-kiri {
   margin-left:10px;
   width:180px;
   float:left;
   }
   /* Luar-Kanan */
   #luar-kanan {
   margin-right:10px;
   width:180px;
   float:right;
   }

   
   
   
   
4. Kemudian cari code </body> , letakkan code berikut dibawahnya :
   
   <div id='luar-wrapper'>
   
   
5. Letakkan code penutup berikut diatas </body> :
   
   </div>
   
   
6. Cari lagi code <div id='luar-wrapper'> dan letakkan code berikut tepat dibawahnya :
   
   <b:section class='luar' id='luar-kiri' preferred='yes'>
   <b:section class='luar' id='luar-kanan' preferred='yes'>
   
   
7. Simpan Template

Silahkan sesuaikan nilai width untuk #luar-wrapper, #luar-kiri dan #luar-kanan agar sesuai dengan lebar template yang anda gunakan.

Resensi :
Masisir | http://www.tutorialmasisir.co.cc/

Lagi lagi sore ini kita akan membahas tentang Dsain Blog, tidak ada habis habisnya ya tutorial hehehe, karena demi teman yang baru gabung di dunia blogger alias yang masih awam seperti saya, makanya gak mao henti henti untuk memberikan tips dan trik kepada sobat semua. sama seperti saya kalau punya keinginan pingin cepat terkabulkan, disinilah saya akan mengabulkan keinginan-keinginan sobat, karena dulu perna salah satu sahabat saya minta di postingkan cara Nambah Elemen Halam,an Widget di bawah Header.

Sebelumnya saya pernah posting cara menambah Dua Kolom/Elemen Widget di Bawah Header, sekarang saya tambah lagi satu elemen. jadi judulnyapun menjadi Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header.

Baik saya tidak akan panjang lebar lagi ngomongnya hehe, kita langsung aja ke TKP, di bawah ini gambar tampilan yang kita bahas sekarang ini :



Caranya sangat mudah dansimpel saya yakin bagi pemula juga pasti bisa OK. berikut langkah langkahnya :

1. Seperti biasa Login dulu ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti gambar diatas.

Gampang dan Simpel Khaaann??

Se;amat Mencoba semoga berhasil dan mudah mudahan tips ini bermanfaat di hati sobat Amiin..

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Tutorial kali ini kembali kita akan belajar dsain template, sebelumnya saya pernah membahas tentang "Menambah Elemen Halaman Widget di Bawah Header" Nah sekarang kita akan belajar tentang Cara Menambah Dua Kolom/Elemen di Bawah Header menjadi dua kolom. Hal ini hanya semata untuk menyediakan tempat Widget/Aksesoris di tempat kita apalagi template sobat yang fasilitasnya tidak memadai.

Baik kalau para sobat (pemula) yang belum paham apa yang akan kita bahas kali ini lihat gambar seperti dibawa ini :



Caranya sangat mudah, dan simpel tinggal sobat ikuti langkah - langkah berikut ini :

1. Seperti biasa Log In ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

3. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode berikut tepat diatasnya :

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

4. Selanjutnya simpan Template dan lihat hasilnya di bagian elemen halaman, jika sobat berhasil maka akan melihat ambah gadget 2 di bawah header seperti pada gambar di atas.

Selamat mencoba semoga bermanfaat, Amiin

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Dengan di temaninya sebungkus rokok dan segelas kopy plus martabak akhirnya Alhamdulillah kang fatur bisa jalan jalan di dunia tidaknyata alias Internet. Dan Alhamdulillah saya mendapat oleh-oleh dari salah seorang hali bloger orang Arab Saudi untuk dibagikan kepada para sobat semua.

Oleh-oleh yang saya dapatkan dan yang saya akan bagikan pada malam ini yaitu tentang Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :



Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.


1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML


2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :



Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Sekian dulu dari saya, insya Allah postingan selanjutnya menyusul, mau nerusin ngopy dulu takut keburu dingin.

Semoga bermanfaat! Thanks to Dinamic Drive

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Dulu saya pernah membahas tentang Menambah Elemen di Atas Dua Kolom, kali ini saya mao bagi bagi lagi yaitu tentang Menambah 2 Kolom Elemen di Bawah Sidebar Utama, sebenarnya tidak jauh berbeda dengan postingan yang lalau, boleh dibilang postingan kali ini kebalikannya dari postingan yang lalu hehe.

OK. Kali ini saya tidak akan ngomong ke sana kemari, alis tidak akan panjang lebar, kita langsung aja berikut cara Menambah 2 kolom Elemen di Bawah Sidebar Utama, yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template defalut blogger yaitu minima..

Tampilan awal template minime yaitu seperti di bawah ini :



Bagai mana cara Menambah cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti pada gambar di bawah ini :



Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

1. Login ke blogger dengan id sobat
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template sobat, klik Download Template Lengkap
5. Sekarang cari kode ini :

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

6. Ganti nilai width 220px; dan properti float: $startSide; dengan nilai sidebar sobat. Misalnya:
Kalau untuk template minima 220 dibagi menjadi dua hasilnya sangat kecil karena itu saya pilih 350, setelah dibagi dua dan memperhitungkan margin atau jarak antara kedua sidebar baru maka untuk setiap kolomnya (sidebar kanan dan kiri) lebarnya menjadi 170 dan float: right;
Maka kode diatas jadi seperti ini:

#sidebar-wrapper {
width: 350px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

7. Sekarang tambahkan kode berikut di bawah kode tadi

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

8. Secara keseluruhan kodenya menjadi seperti ini :

#sidebar-wrapper {
width: 350px;
float: right;
$startSide
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

9. Sekarang kita akan membuat kode HTML untuk sidebar left dan sidebar right tersebut. Cari kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>

10. Sisipkan kode berikut di bawah <b:widget id= blablabla.... :

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

11. Sehingga secara keseluruhan menjadi seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= blablabla....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

12. Nah agar sidebar yang telah dibuat tidak melorot jumlah yang kita tambahkan pada sidebar utama tadi tambahkan pula pada 3 elemen halaman template anda yaitu

* Elemen Header
* Elemen Outer
* Elemen Footer

Lebar sidebar utama setelah dirubah - lebar sidebar asli = jumlah yang anda harus tambahkan pada lebar header, outer dan footer (350-220 =130).
Kode masing masing elemen seperti ini:

* Untuk Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

* Untuk Wrapper

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

* Untuk Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Tulisan berwarna merah adalah yang harus anda ganti angkanya dengan menambahkannya dengan jumlah penambahan pada sidebar utama. Dari contoh diatas maka perhitungannya 660+130=790
13. Sekarang klik tombol SIMPAN TEMPLATE. Selesai deeehh

Untuk melihat hasilnya klik Elemen halaman! Semoga berhasil, dan semoga bermanfaat!

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Untuk menepati janji saya pada postingan sebelumnya dengan tema Menambah 3 Kolom/Elemen Halaman di Atas Footer, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer sesuai dengan janji saya pada postingan sebelumnya.

Elemen Halaman selain memprcantik dan menambah berbagai asesoris di blog kita, juga merupakan fasilitas untuk memperkaya wawasan dan penampilan blog itu sendiri. seperti pemasangan label, arsip, shoubox, daftar link, photo, video dan lain-lain.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:



1. Seperti biasa Login ke blogger dengan id Sobat
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Selanjutnya tambahkan kode CCS berikut di atas ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Kang Fatur --- */
#lower {
border-top:10px solid #F781F3;
margin:0 0 10px 0;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

#lower-wrapper {
margin:auto;
padding: 0px 0px 20px 0px;
width: 960px;
background: #FBEFF5;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}

#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
width: 25%;
text-align: justify;
font-size:100%;
color:#333;
line-height: 1.6em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.lowerbar {
margin: 0;
padding: 0;
}

.lowerbar .widget {
margin: 0;
padding: 10px 20px 0px 20px;
}

.lowerbar h2 {
background:#F781F3;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
margin: -10px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: center;
color:#fff;
font-size:16px;
font-weight:bold;
text-transform:lowercase;
}

.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom:1px dotted #DF0101;
}

.lowerbar a {
color: #FA58F4;
text-decoration: none;
}

.lowerbar a:hover {
text-decoration: underline;
color: #F7BE81;
}

.lowerbar a:visited {
text-decoration: none;
color: #5858FA;
}
/* ---Modefied: http://www.coretan-guru-komputer.co.cc--*/
/* --- End Lower--- */

6. Selanjutnya cari kode berikut <div id='footer-wrapper'>
7. Kemudian Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

8. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.

PENTING Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.

Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.

Untuk mengganti kode warna silahkan lihat tabel kode warna disini.

Selamat mencoba semoga berhasil dan bermanfaat. Amiin.

Sumber : amatullah83.blogspot.com

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Salam blogger sepeti biasa selalu saya ucapkan di awal pembicaraan saya. Para shahabat blogger semuanya khususnya pada blogger pemula (awam) pada kesempatan ini saya akan membagikan satu buah tips sederhana namun berguna.

Kali ini saya akan bagikan (posting) tentang 'Membuat 3 Kolom di Atas Footer' pernah ada yang nanyain kepada saya gimana katanya cara membuat 3 kolom di bawah seperti yang punya Kang Fatur. Kali ini saya akan bahas tentang cara pembuatannya yang sederhana dan simpel tapi membuahkan hasil yang maksimal wkwkwk. Kalau sobat pingin liat seperti apa itu 3 Kolom Elemen di Atas Footer di bawah ini gambarnya



OK, sya tidak akan panjang lebar lagi cerita cerita kaya orang tua ja sebelum bobo cerita dulu wkwkwkwk. Baik kita lanjut ke TKP

1. Seperti biasa Login ke blogger dengan id Sobat
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode yang mirip seperti ini :

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi :

/* bottom
----------------------------------------------- */
#bottom {
width:900px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:1px solid #333;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#bottom ul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:200px;
float:left;
padding-left:15px;
}
#center-bottom {
width:200px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:420px;
float:right;
padding-right:15px;
}

7. Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode seperti ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

8. Tambahkan kode berikut di atas kode tadi :

<div id='bottom'>
<b:section class='bottom' id='left-bottom' preferred='yes'/>
<b:section class='bottom' id='center-bottom' preferred='yes'/>
<b:section class='bottom' id='right-bottom' preferred='yes'/>
</div> <!-- end bottom -->

9. Sekarang klik timbol simpan template
10. Selesai dan lihat hasilnya. sekarang Sobat mempunyai 3 elemen di atas footer


PENTING Sesuaikan ukuran lebar (width) footer dengan template Sobat dan lebar elemen yang akan ditambahkan sesuaikan selera Sobat dengan memperhatikan jarak marginnya.

Postingan lainnya tentang Elemen Widget adalah cara Menambah Elemen di Atas Dua Kolom. Jika Sobat ingin mencoba silahkan klik Disini

Selamat mencoba semoga berhasil! jangan lupa comennya!!

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Waktu Blog walking atau silaturahmi ke tempat sahabat diantara beberapa blog teman saya terliat dibawah headernya sebelum postingan banyak aksesoris aksesoris, ragam salam sapa tuk pengunjunglah, bannerlah, iklanlah dan lah lah lainnya deh. Bermula dari awal ketertarikan itulah (lah lagi?), timbul hasrat saya tuk exsperimen kecil. Saya penasaran kok di template saya ngga ada dibagian elemen halaman kolom untuk menambah gadget dibawah header ya?
Maka mulailah saya selancar dengan browsing, nanya ke Mr Google. Akhirnya nemu deh caranya, dipraktekkanpun langsung jadi karena rupanya tidak terlalu sulit, hanya butuh ketelitian dan kesabaran dikit ja Alhamdulillah hasilnya bisa memuaskan hati saya.

Nah berikut saya akan bagikan tutorialnya kepada kawan or sobat semua :

Bagaimana cara menambah Elemen Widget di Bawah Header, dibawah ini contoh gambar yang kita bahas sekarang :



Langkah langkahnya sebagai berikut :
1. Seperti biasa Log In ke blogger Sobat
2. Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda. Kalau saya langsung aja, he2.
3. Jangan lupa untuk mencentang kotak kecil Expand Template Widget.
4. Copi kode warna merah berikut, paste diatas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

5. Cari Kode seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

6. Paste kode warna merah berikut tepat di bawah kode di atas

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

7. Langkah terakhir tinggal save tempalte. Selesai gampang khan??

Selamat Mencoba, dan Semoga Bermanfaat Amiiin

Sumber : amatullah83.blogspot.com

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Indahnya berbagi itu kata orang yang selalu berbagi seperti Kang Fatur ini wkwkwkwk, pada kesempatan ini saya akan berbagi kepada sahabat sahabat blogger semua yang selalu setia mampir di tempat Kang Fatur yang sederhana dan penuh sampah ini.

Para sahabat blogger kali ini saya posting tentang Menambah Elemen di Atas Dua Kolom, trik ini sangat tidak asing lagi mungkin bagi para sahabat blogger kelas tinggi, namun mudah mudahan tips ini bermanfaat bagi para sahabat / pengunjung saya yang masih baru di dalam dunia blogger.

Bagaimana trik atau caranya jika elemen yang ditambahkan diatas dua kolom? Caranya mudah dan sangat simpel walaupun bagi yang awam seperti saya. di bawah ini gambar yang pada kesempatan ini kita bahas.



Baik kalai para sobat telah mengamati gambar di atas dan telah mengerti apa itu Elemen di Atas 2 Kolom kita langsung pembahasan. Langkah langkahnya adalah sebagai berikut :

1. Pertama dalam keadaan loggin pastinya, klik TATA LETAK => EDIT HTML.
2. Carilah kode seperti berikut: (lebar atau width tentu berbeda sesuai lebar kolom pada template sobat)

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Kalau sudah ketemu tambahkan kode berikut diatas kode tadi

#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}

Keterangan widht: 440px adalah penjumlahan dari dua kolom elemen yang telah ada pada sidebar template minima percobaan saya jadi sobat sesuaikan jumlahnya dengan menjumlahkan lebar dua kolom pada sidebar sobat!
4. lengkap kodenya jadi seperti ini:

#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

4.Langkah selanjutnya,anda cari kode berikut:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

5. setelah ketemu letakkan kode berikut, dibawah kode tadi:

<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'>
</b:section>
</div>

6. Sehingga kodenya jadi seperti berikut:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'/>
</div>

7. Selesai. jangan lupa simpan template. Lihat hasilnya pada elemen halaman kalau sudah ada kolom elemen baru diatas dua kolom seperti screenshot diatas berarti berhasil.

Selamat Mencoba. dan semoga bermanfaat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Halo para sobat bloger khususnya kang fatur dateng lagi nie mao bagi bagi dengan sobat tercinta, pernah ada sobat yang meminta pada kang fatur tolong kang katanya saya ajarin cara membuat Background berbeda-beda seperti Backgrounnya kang fatur!!. Demi permintaan sobat akhirnya kang fatur bikin postingin yang berjudul "Bikin background yang berbeda untuk setiap halaman blog". Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya O.K.

O.K. Jangan banyak banyol bentar lagi hari semakin malam, duduk udah pegal, kopi udah abis, rokok tinggal sebatang, perut udah laper, sebaiknya kita lanjutkan aja O.K.

Persiapan :

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://alamat-gambar-sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

2. Gantilah http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.

3. Kode center no-repeat; (hijau) bisa sobat ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh sobat hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh.

5. Kalau sudah selesai ngeditnya , balik lagi ke blog sobat. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan sobat tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, sobat sudah bisa melihat perubahan background blog sobat, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("
<style type="text/css">
body {background-image: url("http://alamat-gambar sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center">
Visit InfoServe for <a href="http://ade-tea.blogspot.com/" target="_blank">Blog Kang Fatur</a>.</div>

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti http://alamat-gambar-sobat (kode yang berwarna merah ) dengan url gambar sobat

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.

e. Kode no-repeat; bloeh sobat hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini. yuuuu ...

Seperti biasa :

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Terus Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.

<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... yuuuuuk ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya kang fatur uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>

4. Save dan view blog untuk melihat hasilnya.

Selamat mencoba semoga sukses dan bermanfaat di hati sobat :


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Halo para sobat blogger yang bae-bae dihari minggu yang cerah ini akhirnya kang fatur meluangkan waktu untuk berbagi ilmu kepada sobat koe yang bae, kali ini kang fatur hanya untuk mengambulkan permintaan dari para sobat yang meminta "Supaya Blog Transparan"

O.K sesuai janji kang fatur untuk memposting cara membuat blog transparan, ini tipsnya. Bagi yang memerlukan silahkan di coba. Walaupun ini adalah tip's yang tergolong mudah tapi siapa tahu sobat memerlukannya....

O.K kita langsung aja ikuti langkah-langkah berikut ini :

1. Seperti biasa login ke blog sobat
2. Dashboard/dasbor
3. Layout/tataletak
4. Edit HTML, centang "EXPAND TEMPLATE WIDGET" dan download lengkap template buat berjaga-jaga jika terjadi kesalahan.

Terus cari setiap kata :

background

contoh :

background: #000000;

Lalu ganti kode warnanya (teks yang tercetak merah) menjadi transparent, atau kurang lebi seperti ini

background: transparent;

atau sobat bisa juga melakukan dengan cara kedua yaitu buang saja value warna merah yang ada sehingga menjadi seperti ini :

background: ;

Cari di setiap posisi dimana sobat ingin posisi tsb terlihat bening/Transparan.
Contoh bagian Header, body, side bar, post footer, lower dll.
Nah mudah bukan ? setelah itu klik Save/simpan perubahan, dan lihat hasilnya....
Semoga tip's ringan ini bermanfaat bagi para sobat semua !!

Selamat mencoba ......,

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Alhamdulilah walapun kerjaan banyak, di sekolah sibuk dan gak bisa liburan akhirnya kang fatur selesai juga membuat tips sederhana ini, demi teman khususnya buat para sobat blogger, kali ini kang fatur postting tentang cara "Mengatur Judul Sidebar"

Penampilan judul sidebar dapat sobat percantik dengan melengkapi kode-kode yang diperlukan agar penampilannya berbeda dengan sebelumnya (maksudnya kaya yang punya kang fatur gitu looch).

Kode awal untuk judul sidebar adalah .sidebar h2 { yang dibawahnya dapat sobat tambahkan kode-kode lain sesuai keperluan atau yang diinginkan.
O.K dech jangan ngomel-ngomel terus, yuk..sama-sama kita pelajari kode-kode yang dapat ditambahkan pada judul sidebar.
Jika para sobat ingin melalukan pengeditan pada judul sidebar, seperti biasa sobat harus melakukan langkah-langkah standar yaitu :

Masuk ke Blogger dengan ID sobat
Pilih Tata Letak
Pilih Edit HTML
Download Template Lengkap dengan tujuan jika hasil yang diharapkan tidak sesuai dengan keinginan sobat, template dapat dikembalikan pada keadaan semula.
Cari kode diatas tadi yaitu : .sidebar h2 {
Perhatikan kode tersebut pada bagian bawahnya, apakah sudah memiliki penambahan kode atau belum. Jika belum atau masih standar , coba sobat perhatikan kode sidebar dibawah ini yang telah dilengkapi dengan berbagai kode

PERHATIKAN YAA???

.sidebar h2 {

font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#6df466;

padding;5px;

}

Mari Kita bahas satu persatu :

• Kode font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat sobat ganti sesuai keinginan
• Kode font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat sobat ganti dengan normal jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.
• Kode text-transform:uppercase; : menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Sobat dapat mengganti dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).
• Kode text-align:right; : Letak judul sidebar di bagian kanan. Sobat dapat mengganti dengan left jika ingin berada dikiri atau center jika ingin berada di tengah.
• Kode border: 1px solid #000; : berfungsi untuk menampilkan garis di sekeling judul sidebar. Sobat dapat mengganti ukuranya dan warna dari garis tersebut.
• Kode background:#6df466; : untuk menampilkan warna latar dari judul sidebar. Ganti kode warnanya dengan warna kesukaan sobat. Selain dengan menampilkan warna sobat juga dapat menampilkan sebuah image sebagai background judul sidebar. Perhatikan cara meletakan alamat image agar tampil sebagai background

background:url(http://www.alnect.net/blogcontest/banner_blog_contest.gif)no-repeat top left;

• Ganti alamat image diatas dengan alamat image kepunyan para sobat. Kalau para sobat belum punya gambarnya atau gak mao repot repot silahkan sobat pake aja gambar hasil karya kang fatur di bawah ini, tinggal pilih sesuai keinginan sobat.
  
  
  
  
  Alamatnya ini :
  
  http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif
  
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/side1.gif
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/side3.gif
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/header.gif
  
  
  
• Kode padding;5px; : untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.
• Silahkan sobat coba untuk mengatur penampilan judul sidebar pada blog kesayangan sobat
• Jangan lupa setelah selesai klik Simpan Template.

Lihat hasilnya, selamat mencoba semoga bermanfaat buat sobat-sobat koe, jangan lupa comentnya O.K.

Halo para sobat, lagi-lagi kang fatur dateng lagi nie mao ngasih tips baru buat para sobat dan trik ini pernah ada yang minta sama kang fatur, kalau ga salah begini "Kang fatur gimana ya caranya mengganti Background blog saya seperti blognya kang fatur", kali ini kang fatur baru sempat posting trik ini karena banyak kesibukan soalnya komputer rentalan teman kang fatur banyak yang rusak hehe, jadi kang fatur di suruh nyervis dech, jadi cerita nie hehe. O.K para sobat khusunya sama yang pernah minta trik ini ma kang fatur kali ini kang fatur insyaAllah akan memberikan atau menjelaskan lngkah-langkahnya sampai dengan selesai.

Kang fatur tidak akan panjang lebar kita langsung aja ke pokok pembahasan O.K.

Seperti biasa masuk ke account blogger sobat Dashboard/dasbor Layout/tataletak, Edit HTML "JANGAN di CENTANG " Expand template widget nya ok!!
Lakukan backup dengan "download lengkap template" takut ada kekeliruan.
kemudian cari kode dibawah ini :

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background : #000000;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

url(http://ALAMAT URL GAMBAR SOBAT);

dan jangan lupa tambahkan pula kode yang ada di bawah ini

background-attachment: fixed;

dan letakan di bawah kode tersebut, atau kurang lebih akan terlihat seperti ini :

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: #ff0000 url(http://ALAMAT URL GAMBAR ANDA);
background-attachment: fixed;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

dan jangan lupa klik tombol Save/Simpan Perubahan!! lihat hasilnya
Nah, mungkin hanya itu saja tips kali ini dari kang fatur mudah-mudahan bermanfaat di hati para sobat khusunya kepada yang pernah meminta. jangan lupa komentarnya O.K kang fatur mao nerusin nyervis lagi....

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI