Cara Membuat Menu di Blog

Cara Membuat Menu di Blog - Selamat malam, hadir kembali disini, kali ini saya memposting karena permintaan salah satu teman saya yang sangat bawel yaitu Fadil S Hardy. Dia minta dibuatkan Menu yang keren katanya, karena saya hanya bisa begini yaudah saya buat yang seperti ini, lihat tutorial Cara Membuat Menu di Blog dan demonya dibawah sini :

1. Silahkan copas code berikut ini dan taruh di atas code ]]></b:skin>
   

   /* -----------------------------
   Created by : Fahmi Athailla
   ------------------------------ */
   #menu_fahmi{
   width:1000px;
   height:auto;
   background-image: linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -o-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
   padding:5px;
   font-family:Arial;
   font-size:13px;
   text-shadow:1px 1px 1px #000;
   }
   #menu_fahmi ul li{
   display:inline;
   padding:18px;
   }
   #menu_fahmi a{
   color:#fff;
   text-decoration:none;
   }
   .tombol:hover, #menu_fahmi li:hover{
   box-shadow:0 0 2px #777;
   }
   .tombol:active, #menu_fahmi li:active{
   box-shadow:inset 5px 2px 10px rgb(255,167,117);
   background:rgb(255,201,153)
   }
   .kotak-search{
   float:right;
   position:relative;
   top:-5px;
   right:20px;
   }
   .tombol{
   background:rgb(241,139,83);
   border:none;
   color:#fff;
   font-family:Arial;
   font-size:13px;
   text-shadow:1px 1px 1px #000;
   padding:5px;
   border-radius:5px;
   cursor:pointer;
   }
   .tempat-text{
   width:50px;
   border:none;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   .tempat-text:focus{
   width:250px;
   }
   

2. Kalau sudah jangan disave dulu, karena kita belum memberikan code pemanggilan css tersebut, code pemanggilan css tersebut seperti ini :
   

   <div id='menu_fahmi'>
   <ul>
   <li><a href='#'>Beranda</a></li>
   <li><a href='#'>Kontak</a></li>
   <li><a href='#'>Arsip</a></li>
   <li><a href='#'>Facebook</a></li>
   <li><a href='#'>Twitter</a></li>
   <span class='kotak-search'>
   <form action='http://nama-blog-anda.blogspot.com/search' method='get'>
   <input class='tempat-text' name='q' size='30' type='text'/>
   <input value='Cari Disini' class='tombol' name='submit' type='submit'/></form>
   </span>
   </ul>
   </div>

3. Simpan saja code tersebut diatas <div id='header-wrapper'> atau diatas Header anda sendiri.
4. Lalu terakhir save template anda, dan coba lihat perubahannya.
   

Perhatian : Perhatikan Code yang berwarna merah "http://nama-blog-anda.blogspot.com/search" silahkan ganti dengan Url blog anda, contoh seperti ini "http://alkian.blogspot.com/search" .

Lalu background juga bisa disesuaikan, ganti saja code ini :

background-image: linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -o-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -moz-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);
background-image: -ms-linear-gradient(bottom, rgb(241,139,83) 0%, rgb(255,167,117) 61%, rgb(255,201,153) 100%);

Jika anda ingin menggantinya menjadi warna merah seperti ini

background:red;

Biru (blue) dan lain-lain.
Dan jika ingin menggunakan gambar caranya seperti ini :

background:url(urlgambar.jpg)no-repeat;

Mudah bukan? selamat berkreasi, Demikianlah sedikit ulasan saya yang mengenai Cara Membuat Menu di Blog, semoga dapat berguna dan bermanfaat.

Read More

Cara Membuat Widget Share Horizontal Fixed dengan CSS

Cara Membuat Widget Share Horizontal Fixed dengan CSS - Setelah tadi membuat yang versi Vertikal kali ini saya coba yang versi Horizontal + Fixed Position. Tenang aja sob, demonya ada kok tapi Linknya ada dipaling bawah artikel, Berikut adalah Cara Membuat Widget Share Horizontal Fixed dengan CSS :

1. Seperti biasa anda Harus ke Rancangan
2. Tambah Gadget/Add Gadget 
3. Pilih HTML/Javascript
4. Silahkan copy code dibawah ini lalu pastekan didalam HTML/Javascript :
   

   <style>
   #sosial{
   background:#fff;
   border:solid 1px #ddd;
   padding:10px;
   height:auto;
   width:100%;
   border-radius:5px;
   font-family: Courier New, Courier, monospace;
   font-size:15px;
   color:#000;
   letter-spacing:-1px;
   position:fixed;
   bottom:0;
   left:0;
   z-index:999;
   }
   #sosial li{
   list-style:none;
   line-height:25px;
   display:inline;
   padding:15px;
   }
   #sosial a{
   color:#000;
   text-decoration:none;
   }
   #sosial .facebook{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
   }
   #sosial .facebook:hover{
   background:#3B5998;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   #sosial .subs a:hover, #sosial .gplus a:hover, #sosial .facebook a:hover{
   color:#fff;
   }
   /* Twitter */
   #sosial .twitter{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
   }
   #sosial .twitter:hover{
   background:#51C9D4;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Google Plus */
   #sosial .gplus{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
   }
   #sosial .gplus:hover{
   background:#DB3636;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Subscribe */
   #sosial .subs{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://cdn2.iconfinder.com/data/icons/feedicons-v2/subscribe_16.png)no-repeat left;
   }
   #sosial .subs:hover{
   background:#EA7E37;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Youtube */
   #sosial .youtube{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(https://images.hanover.edu/www/site/college-youtube.png)no-repeat left;
   }
   #sosial .youtube:hover{
   background:#950000;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Yahoo*/
   #sosial .yahoo{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://www.findinternettv.com/images/yahoo_16.png)no-repeat left;
   }
   #sosial .yahoo:hover{
   background:#72108A;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   #sosial .yahoo a:hover{
   color:#fff;
   }
   /* Stumbleupon */
   #sosial .stumbleupon{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   background:url(http://www.johnrutter.com/wp-content/themes/johnrutter/images/16x16/stumbleupon.png)no-repeat left;
   }
   #sosial .stumbleupon:hover{
   background:#5CC04F;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   </style>
   <div id='sosial'>
   <li class='facebook'><a href='http://www.facebook.com/FahmiSetiawand' target='_blank'>Facebook</a></li>
   <li class='twitter'><a href='http://www.twitter.com/DiaryFakta' target='_blank'>Twitter</a></li>
   <li class='gplus'><a href='https://plus.google.com/u/0/106878855473022374434' target='_blank'>Google</a></li>
   <li class='subs'><a href='http://alkian.blogspot.com/atom.xml' target='_blank'>Subscribe</a></li>
   <li class='youtube'><a href='#'>Youtube</a></li>
   <li class='yahoo'><a href='#'>Yahoo!</a></li>
   <li class='stumbleupon'><a href='#'>Stumbleupon</a></li>
   </div>
   

5. Setelah itu Simpan dan Lihat Hasilnya.
6. Klik disini untuk Demo

Tambahan : Gantilah beberapa Url yang tercantum dengan Url yang bersangkutan dengan Facebook/Twiiter anda.

Demikianlah sedikit ulasan saya yang mengenai Cara Membuat Widget Share Horizontal Fixed dengan CSS, semoga dapat berguna dan bermanfaat.

Read More

Cara Membuat Widget Share di Sidebar dengan CSS

Cara Membuat Widget Share di Sidebar dengan CSS - Balik lagi nih, Fahmi abis Experimen kecil-kecilan malah jadi Widget Share.
Tapi gak apa-apalah sedikit-sedikit lama-lama menjadi bukit siapa tahu aja nanti fahmi bisa bikin experimen yang "WOW" hahaha...

Widget Share tentunya sangat penting untuk menshare segala artikel anda ke Sosial Bookmark tersebut, banyak lho web-web besar yang pasang widget share, entah dia boleh copas atau buat sendiri. Contohnya saja seperti G+, Facebook, Twitter hehehe...

ok deh kali ini Fahmi mau coba bikin yang namanya "Cara Membuat Widget Share di Sidebar dengan CSS". Contohnya seperti apa?, nanti link Demonya ada dibawah langsung aja nih tutorial Cara Membuat Widget Share di Sidebar dengan CSS dibawah ini :

1. Langkah pertama ke Rancangan.
2. Tambah Widget/Gadget.
3. Pilih HTML/Javascript.
4. Kalau udah silahkan copypaste code dibawah ini :
   

   <style>
   #sosial{
   background:#fff;
   border:solid 1px #ddd;
   padding:10px;
   height:auto;
   width:200px;
   border-radius:5px;
   font-family: Courier New, Courier, monospace;
   font-size:15px;
   color:#000;
   letter-spacing:-1px;
   }
   #sosial li{
   list-style:none;
   line-height:25px;
   }
   #sosial a{
   color:#000;
   text-decoration:none;
   }
   #sosial .facebook{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   border-radius:5px;
   background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
   }
   #sosial .facebook:hover{
   width:180px;
   background:#3B5998;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   #sosial .subs a:hover, #sosial .gplus a:hover, #sosial .facebook a:hover{
   color:#fff;
   }
   /* Twitter */
   #sosial .twitter{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   border-radius:5px;
   background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
   }
   #sosial .twitter:hover{
   width:180px;
   background:#51C9D4;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Google Plus */
   #sosial .gplus{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   border-radius:5px;
   background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
   }
   #sosial .gplus:hover{
   width:180px;
   background:#DB3636;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   /* Subscribe */
   #sosial .subs{
   padding-left:20px;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   border-radius:5px;
   background:url(http://cdn2.iconfinder.com/data/icons/feedicons-v2/subscribe_16.png)no-repeat left;
   }
   #sosial .subs:hover{
   width:180px;
   background:#EA7E37;
   -moz-transition:all 0.5s ease 0s;
   -webkit-transition:all 0.5s ease 0s;
   -o-transition:all 0.5s ease 0s;
   -ms-transition:all 0.5s ease 0s;
   transition:all 0.5s ease 0s;
   }
   </style>
   <div id='sosial'>
   <li class='facebook'><a href='http://www.facebook.com/FahmiSetiawand' target='_blank'>Facebook</a></li>
   <li class='twitter'><a href='http://www.twitter.com/DiaryFakta' target='_blank'>Twitter</a></li>
   <li class='gplus'><a href='https://plus.google.com/u/0/106878855473022374434' target='_blank'>Google</a></li>
   <li class='subs'><a href='http://alkian.blogspot.com/atom.xml' target='_blank'>Subscribe</a></li>
   </div>

5. Kalau sudah di Copy paste'kan lah didalam HTML/Javascipt tersebut, jangan lupa di Save.
6. DEMO disini

Sedikit Tambahan : Silahkan ganti beberapa Url Facebook, Twitter, Google +, dan Subscribe di HTML diatas dengan Url Facebook, Twitter, Google + , dan Subscribe anda.

Demikianlah sedikit ulasan saya mengenai Cara Membuat Widget Share di Sidebar dengan CSS, semoga dapat berguna dan bermanfaat.

Read More

Red Button CSS #1 untuk Blogazine

Cara Membuat Tombol Download dari CSS #1 - Red Button CSS#1 untuk Blogazine - Hallo semuanya apa kabar nih?, di sharing kali ini fahmi mau share beberapa hasil karya ciptaan fahmi sendiri yang didorong oleh beberapa teman-teman blogger, kali ini fahmi Mau bikin Tombol Download dari CSS #1 - Red Button CSS#1 Blogazine, "#1" artinya masih versi pertama, nanti fahmi akan buat versi-versi atau part-part lainnya. Langsung saja deh ke tutorial dibawah ini :

1. Copy Code dibawah ini dan taruh di atas ]]></b:skin>

.tombol_mengkilat{
font-family:Arial Black;
font-size:25px;
background-image: linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(bottom, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
width:250px;
height:auto;
padding:5px;
text-align:center;
border-radius:5px;
border:solid 2px #ddd;
}
.tombol_mengkilat a{
color:#fff;
text-decoration:none;
}
.tombol_mengkilat:hover{
box-shadow:0 1px 5px #000;
background-image: linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -o-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -moz-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -webkit-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
background-image: -ms-linear-gradient(top, rgb(211,7,29) 6%, rgb(254,33,56) 53%);
}
.tombol_mengkilat:active{
background:rgb(211,7,29);
border:solid 1px #888;
text-shadow:1px 1px 1px #000;
box-shadow:inset 0 0 5px #000;
position:relative;
top:2px;
}

2. Kalau sudah simpan template saja dulu, nah berikut ini adalah code pemanggilan css tersebut
   

   <div class='tombol_mengkilat'>Download</div>

3. Kalian bisa mengganti tulisan "Download" dengan tulisan lain.
4. Selamat berkarya, salam bloggers
5. Untuk Demo silahkan Klik Disini

Demikianlah sedikit ulasan saya yang mengenai Cara Membuat Tombol Download dari CSS #1 - Red Button CSS#1 untuk Blogazine, semoga dapat berguna dan bermanfaat.

Read More

Tutorial Cara Mudah Mengganti Background Blog 2012

Tutorial Cara Mudah Mengganti Background Blog 2012 - Cara Simple Mengganti Background Blogger 2012 - Cara Mengganti Background Blog.

Tutorial Cara Mudah Mengganti Background Blog 2012 - Terkadang kita bosan dengan background blog yang itu-itu aja, mau ganti tapi bingung cara menggantinya seperti apa. Tapi sekarang tenang aja sob, Fahmi sudah siapkan Tutorial Cara Mudah Mengganti Background Blog 2012. Silahkan ikuti Tutorial Cara Mudah Mengganti Background Blog 2012 :

1. Login Blogger
   Pergi ke Rancangan (Design)
2. Edit HTML
3. Cari code CSS body{ cara mencarinya cukup dengan menekan Ctrl + F atau F3.
4. Kalau sudah ditemukan masukan properly css dibawah ini.
5. background:hex warna css; hex warna css adalah sebutan code warna css, anda bisa mencarinya disini. Contoh hex warna css seperti ini "#000" ini menandakan warna hitam dan "#fff" menandakan warna putih, atau anda bisa dengan langsung menyebutkan warnanya seperti ini background:white; atau background:black;, oiya anda juga bisa memasukan background gambar. Seperti ini
   background:url(urlgambar.jpg); url gambar bisa berformat jpg, png, gif, jpeg, dll.
   anda juga bisa mengatur posisi gambar tersebut seperti ini background:url(urlgambar.jpg)left bottom; anda bisa memasukan kata left, bottom, right, top, fixed, no-repeat, repeat-y, repeat-x.
   Repeat menandakan mengulang, fixed menandakan Melayang, dan no-repeat menandakan tidak Mengulang gambar. Contoh mengubah warna background seperti ini.
6. body{
   background:red;
   }
   dan contoh background gambar seperti ini
   body{
   background:url(http://noupe.com/img/wallpaper-3.jpg)no-repeat;
   }
   Kalau sudah jangan lupa disave.
7. dan kalau masih bingung jangan malu tuk bertanya, malu bertanya cepirit dijalan :p .

Itulah sedikit ulasan saya mengenai Tutorial Cara Mudah Mengganti Background Blog 2012 - Cara Simple Mengganti Background Blogger 2012 - Cara Mengganti Background Blog. semoga dapat berguna dan bermanfaat.

Read More

Cara Memuat Footer menjadi 3 Kolom

Cara Memuat Footer menjadi 3 Kolom - Cara Menambah Footer Menjadi 3 Kolom - Cara Simple Membuat Footer Menjadi 3 Kolom

Cara Memuat Footer menjadi 3 - Banyak sekali teman-teman facebook yang menanyakan cara membuat footer supaya menjadi 3 atau lebih, Dan dikesempatan kali ini saya membuat artikel tentang Cara Memuat Footer menjadi 3, Bagaimana Caranya? Caranya cukup simple... anda cuma diharuskan mengikuti Tutorial yang saya berikan dibawah ini, ikutilah tutorial dibawah ini dengan benar jika ada kesusahan silahkan berkomentar Insya Allah saya akan langsung Merespon, Ok langsung saja tutorialnya :

1. Login Blogger
2. Klik Rancangan/Design
3. Masuk ke Menu Edit HTML
4. Copy Code dibawah ini dan letakan diatas code ]]></b:skin>

/* this footer area */
#footer{
width:100%;
height:auto;
margin:0 auto;
padding:30px 0 30px 0;
font-size:14px;
float:left;
border-top:solid 10px #e2e2e3
}
#footer h2{
font-family:Arial;
font-size:20px;
color:#000;
text-align:center;
border-bottom:dashed 1px #2b384a
}
.footer_child{
background:#fff;
padding:5px;
height:250px;
width:250px;
float:left;
margin-top:5px;
margin-left:50px;
border-radius:10px;
font-family:Arial;
font-size:15px
}
.footer_child a{
color:#25aae1
}

5. Jika Sudah diletakan langkah selanjutnya, Menempatkan Cara pemanggilan sifooter tersebut, Letakan code dibawah ini diatas code </body>

<!-- Begin Footer -->
<div id='footer'>
<div class='footer_child'>
<b:section class='footer1' id='footer1' showaddelement='yes'>
</b:section>
</div>
<div class='footer_child'>
<b:section class='footer2' id='footer2' showaddelement='yes'>
</b:section>
</div>
<div class='footer_child'>
<b:section class='footer3' id='footer3' showaddelement='yes'>
</b:section>
</div>
</div>
<!-- End Footer -->

6. Kalau sudah Silahkan Simpan/Save Template
7. Lihat Hasilnya

NB: jika anda sudah mempunyai footer, hapus/tiban saja code css dan html footer yang ada ditemplate anda dengan code css yang saya berikan diatas, Jika kurang mengerti dan paham silahkan bertanya, "Malu Bertanya Sesat dijalan".
Semoga artikel Cara Memuat Footer menjadi 3 Kolom - Cara Menambah Footer Menjadi 3 Kolom - Cara Simple Membuat Footer Menjadi 3 Kolom ini Bermanfaat.

Read More

Cara merubah warna Text pada saat diseleksi

Cara merubah warna Text pada saat diseleksi - Merubah Warna Text saat diblock - Merubah Warna Text saat diblock - Mengertikah anda dengan maksud kata "diseleksi" ?, kalau belum mengerti akan saya jelaskan sedikit. Maksud dari kata diseleksi adalah, apa bila ada teks yang anda ingin "copas" pasti teks tersebut berwarna hitam dan berbackground biru, seperti gambar berikut :


Dan gambar dibawah ini adalah, yang sudah memaikai CSS Selection :

Dan dikesempatan kali ini, saya akan membahas tentang Cara merubah warna Text pada saat diseleksi. Bagaimana caranya?, Caranya cukup simple kalian hanya diharuskan mengikuti step by step dibawah ini :

Taruh code dibawah ini diatas code ]]></b:skin>

/* hack block selection */
::selection {
background:#000;
color: #fff
}
::-moz-selection {
background: #000;
color: #fff
}
::-webkit-selection {
background: #000;
color: #fff
}
::-o-selection {
background: #000;
color: #fff
}

Setelah ditaruh diatas code ]]></b:skin>, silahkan disave.

Simple bukan?, coba anda seleksi teks yang ada di artikel blog anda apa ada yang berubah?

Note : Anda bisa menyesuaikan warna teks seleksi tersebut, caranya anda tinggal mengganti "#000" dan "#fff" yang berada dicss selection, yang tadi anda taruh di ]]></b:skin> code warna Disini.

Read More

Cara Menghilangkan Navbar Bawaan Blogger

Cara Menghilangkan Navbar Bawaan Blogger - Cara Menghapus Navbar Blogger

Berikut ini saya akan memposting tentang Cara Menghilangkan Navbar Bawaan Blogger, Sebenarnya ada banyak cara untuk menghilangkan Navbar, salah satunya adalah dengan Memberikannya Properly:value display:none;

Mari langsung saja kita lompat ketutorialnya, simak tutorial Simple berikut :
Navbar Blogger itu mempunyai sebuah ID, #navbar-iframe.
Jadi kesimpulannya adalah dengan cara meletakan code display:none;di ID selektor #navbar-iframe

Seperti ini :

#navbar-iframe {
display:none!important;
}

taruh saja code diatas diatas ]]></b:skin>
Dan kalau anda ingin menghilangkan navbar secara PERMANENT silahkan ikuti langkah dibawah :

Tambahkan code ini. diatas code <body> atau dibawah code </head>

<!--<body><div></div>-->

kurang lebih penempatannya seperti ini :

</head>
<!--<body><div></div>-->
<body>

Simpan template, Biasanya kalau sudah disimpan akan ada bacaan


Pilih aja Delete Widget.
Mudah bukan cara menghilangkan Navbar?.

Note: Untuk template yang Bawaan dari Blogger, Ada cara yang lebih simple, Template Bawaan blogger ada HTML Navbarnya tersendiri jadi memudahkan anda untuk menghapus :-)

Selamat Mencoba, Semoga postingan Cara Menghilangkan Navbar Bawaan Blogger Bermanfaat ...

Read More

Membuat Kotak Search diblog

Dipagi Hari ini saya Selaku Admin Alkian (Fahmy Athailla Al Majid), akan memposting sebuah tutorial simple mengenai Cara Membuat Kotak Search ala Fahmy Athailla, Kaya gimana bentuk kotak Searchnya penasaran ya? ok langsung saja simak tutorial dibawah ini :

Langkah pertama pastekan code dibawah ini diatas ]]></b:skin> :

.button_search{
font-family:Arial;
color:#000;
background-image: linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -o-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -moz-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-linear-gradient(bottom, 
rgb(33,199,197) 13%, rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -ms-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-gradient(
linear,left bottom,left top,
color-stop(0.13, rgb(33,199,197)),
color-stop(0.57, rgb(60,239,237)),
color-stop(0.79, rgb(90,255,255)));
border:solid 1px #555;
border-radius:5px;
box-shadow:1px 1px 1px #000;
}
.button_search:active{
box-shadow:inset 1px 1px 1px #000;
position:relative;
top:1px;
}
.button_search:hover{
background-image: linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -o-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -moz-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-linear-gradient(top, 
rgb(37,194,191) 13%, rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -ms-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-gradient(
linear,right top,right bottom,color-stop(0.13, rgb(37,194,191)),
color-stop(0.57, rgb(60,239,237)),color-stop(0.79, rgb(90,255,255)));
}
.textinput{
border:solid 1px #555;
width:50px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-o-transition:all 500ms linear;
-ms-transition:all 500ms linear;
transition:all 500ms linear;
}
.textinput:focus{
width:200px;
}
.textinput:hover{
border:solid 1px #D8C46B;
}

Selanjutnya Pastekan code dibawah ini didalam widget jangan lupa untuk memilihnya dibagian tab HTML/Javascript.

<form action='http://nama-blogmu.blogspot.com/search' method='get'>
<input class='textinput' name='q' size='30' type='text'/>
<input value='Search' class='button_search' name='submit' type='submit'/>
</form>

Info : Ganti URL http://nama-blogmu.blogspot.com/search, dengan Nama blog anda, contoh seperti ini.

<form action='http://alkian.blogspot.com/search' method='get'>
<input class='textinput' name='q' size='30' type='text'/>
<input value='Search' class='button_search' name='submit' type='submit'/>
</form>

Contohnya seperti ini :

Warna bisa disesuaikan ^_^, bagi yang kurang mengerti silahkan bertanya dikolom komentar, Insya allah Fast Respon :D.

Read More