Stay Connected

Read latest headlines in your favorite news reader
Fellow Readers
Sign up for our email news letter

PILIH WARNA YANG ANDA SUKA

Rabu, 22 Agustus 2012

1 Membuat Widget Entri Populer Tampil Lebih Keren dan Oke

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Entri Populer Cantik
Tampilan Widget Entri Populer
Pada kesempatan kali ini saya mau berbagi tentang cara membuat widget entri populer yang seperti terpasang di sidebar blog saat ini. Sebenarnya widget ini merupakan widget kepunyaan Blogger sendiri yang ditambahkan kode css tertentu agar tampak lebih menarik dan lain dari pada yang lain.


Bagaimana cara membuatnya? Silakan disimak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau-kalau nanti terjadi kesalahan dalam pengeditan.

4. Silakan cari kode ]]></b:skin>.

5. Letakkan kode berikut di bawah kode ]]></b:skin>.


<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:50px 0px 0px 50px;
float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;
border: 1px solid #444;
overflow: hidden;
box-shadow: 0px 0px 1px #333;
font-style: normal;
font-weight:bold;
width: 100%;
height:60px;
border-radius:35px 5px 5px 35px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
overflow: hidden;
color: #414141;
width: 100%;
height:60px;
border: 1px solid #ffffff;
box-shadow: 0px 0px 2px #ffffff;
}
.PopularPosts ul li img {
padding:1px ;
margin:1px;
margin-top:3px;
border-radius:35px 35px 35px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 1px solid #333;
height: 50px;width:50px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:1px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
</style>
 
6. Klik tombol Pratinjau ,jika berhasil kemudian SIMPAN TEMPLATE
 Selamat mencoba & Semoga bermanfaat :D

Selasa, 21 Agustus 2012

0 Cara Membuat Scroll Bar di Postingan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Cara Membuat Scroll Bar di Posting Blog - Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi Fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat, intinya tampilan posting blog kita jadi singkat dan dinamis.

Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog.

Berikut Kode Script Scroll Bar Posting Blog
<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'>

LETAKKAN TULISAN SOBAT ATAU APAPUN DISINI.
(Tulisan ditulis di COmpose, sedangkan Kode di Tulis pada mode Edit HTML)

</div>


Catatan:

  1. Ingat, Sobat Tulis pada mode Edit HTML, bukan Compose.!!!
  2. Untuk melihat dan mengecek berhasil atau tidak, silahkan sobat klik Compose.
  3. height:200px; adalah ukuran lebar atas bawah kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
  4. width: auto; adalah ukuran otomatis lebar samping kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
  5. border:1px solid adalah ukuran tebal garis kotak scroll, silahkan sobat ganti nilainya, seperti yang sobat inginkan.
  6. #000000 adalah Kode warna pada garis kotak scroll, silahkan sobat ganti Kode warnanya seperti yang sobat inginkan
selamat mencoba dan semoga bermanfaat :D

0 Membuat Bubble tooltip di dalam posting

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
tooltip menggunakan css memungkinkan lebih cepatnya loading tanpa script pemanggil, yg biasanya tulisan pada tooltip akan muncul ketika loading pemanggil script selesai,Jika tertarik buat mencobanya silahkan mengikuti langkah berikut ini

O iya yg belum mengerti apa sih tooltip itu?
Tooltip adalah tulisan yang muncul ketika kursor berhenti diatas ling yg diberi tooltip atau semacam petunjuk dan penjelasan ya begitu lah kira2

Dengan ditambahkan backgroud bubble lebih terlihat cantik, Untuk membuatnya Copy css dibawah ini



/*---------- bubble tooltip oce-modifblog.blogspot.com-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJz-3bCXG8OaXC4xNgzbVqEIeMRZ38TW3EYbhP2YNToY3fqB2dhq2CwqAQDEtC_C2y0TwEmEA4AcJsDhWdpNSM58OGtC8M5alhDQZuLJ36O4GqzbRfiPBc1LyK-HPcpL1YFkjnIJPieE/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeD2l-Z5EBE5ZAY0-42DGXRdqDbMT8qNglxLjOl-OD4_qSBB1D2y1_SAKTkdsVLLC1Fy7xRjpIaWCexK4x9NuA3y93WCTKfkF6aXv2af-3r3EeE3j6Trv7sQrPeTDgpLiUWMwwQAHCYKc/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJz-3bCXG8OaXC4xNgzbVqEIeMRZ38TW3EYbhP2YNToY3fqB2dhq2CwqAQDEtC_C2y0TwEmEA4AcJsDhWdpNSM58OGtC8M5alhDQZuLJ36O4GqzbRfiPBc1LyK-HPcpL1YFkjnIJPieE/s320/bubble-712378.gif) no-repeat bottom;
}
Nah setelah di copy selanjutnya login blogger> tataletak> edit html> cari tag ]]></b:skin> paste code css yg udah di copy tadi di atasnya dan save Template. Untuk format penulisan link pada posting yg di beri tooltip seperti ini

<a href="#" class="tt">nama link disini<span class="tooltip"><span class="top"></span><span class="middle">keterangan atau tulisan pada tooltip disini</span><span class="bottom"></span></span></a> 

selmat mencoba :D

Sabtu, 11 Agustus 2012

2 Widget Hari Kemerdekaan (HUT RI ke 67) di blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
Sob  kali ini saya posting  Widget Hari Kemerdekaan (HUT RI ke 67) di blog. Dalam rangka menyambut HUT kemerdekaan Republik Indonesia yang ke 67, saya juga ingin ikut serta menunjukkan kecintaan saya pada tanah air Indonesia ini dengan memeasang Widget Hari Kemerdekaan (HUT RI ke 67) di blog.

Untuk memasangnya mudah kok sob tinggal ikuti saja langkah di bwah ini :

1. Login ke blogger.
2. Dasbor >> Rancangan >> Edit Laman >> Tambah Widget.
3. Cari dan pilih Html/JavaScript dan silahkan pilih widget dibawah ini.
4. kemudian masukkan scriptnya pada kolom konten.
5. klik Simpan.

Catatan:
1. width="300" ubah angka "300" dengan angka/ukuran lebar yang sesuai dengan ukuran widget blog.
2. height="250" ubah angka "250" dengan ukuran tinggi yang sesuai dengan di widget blog.
Langsung saja=>=>
1. Gambar Indonesia Merdeka ke 67 dengan bendera Merah Putih di bambu runcing

codenya:
<a
href="http://tiadawarnaindahtanpasemile.blogspot.com" target="_blank"><img alt="HUT RI
Ke 67" height="250"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSft7vtdxvqwhcRr_NSvpeJPe9fuCg1acxRwD9_40XysCZRQGPKwoTmoRLlau3pThU3jboR-IqZi4etMHqIlUiERjE7OZ6PA07kLGRX7cm7SXn4dVddy2zyEgIab78cSelCMkK_GailUoF/s1600/Dirgahayu+HUT+RI+67.png"
 title="HUT Republik Indonesia" width="300"
/></a>

2. Banner Dirgahayu Republik Indonesia ukuran 720x90:
codenya:
<a
href="http://tiadawarnaindahtanpasemile.blogspot.com" target="_blank"><img alt="HUT RI
Ke 67" height="90"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuzDhjR-MJLjxHwL_SB5HDaIqm_xS3UDt1yUJEgEXApfhaDbEspBGTS1Pf6HN5uPrjaADakegYd8DhBhwfsf8LLmAXz4duEvPXKQzzw8WdazbpdzYCEGZ4yMyn_hK5SlAeWZCNQneRToXt/s1600/BANNER+HUT+RI+67.png"
 title="HUT Republik Indonesia" width="720"
/></a>

3.67 Tahun Indonesia Merdeka versi (desain) KDRI  yang ane modifikisa sedikit (ukuran 300x250) :

codenya:
<a href="http://tiadawarnaindahtanpasemile.blogspot.com" target="_blank"><img alt="HUT RI Ke 67" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWZgz2-wl7FJZXhXLLkZ5zZl73Hv1K3AEJHqzfua_fOuGmq3IYQvH6nXuM0NMi9hvKeaKp1iun8Hi3DSMX2Tu_CkPCX6XYvafBkuu-VJDHQ50jCtKyYT8Joi-j1CTAJQOWnjuJv09obZh/s400/lOGO+hut+RI+67.png" title="HUT Republik Indonesia" width="300" /></a>

4.Logo Dirgahayu Kemerdekaan Republik Indonesia ke 67 (resmi) :

codenya:
<a
href="http://tiadawarnaindahtanpasemile.blogspot.com" target="_blank"><img alt="HUT RI
Ke 67" height="250"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7fXyDpu2FcLs22Rb2mSWmd6dTJZiudjtNVTdTXQgDrGD1g4TETxILAtHT6q_vH3aQh3gZSspXF1TI0nkhx1n7uoA9pmaLKeD_CwZraOLePr7HfIM7m1f1blsqdSAe1QQknZQwfQ_E6hs/s1600/logo67.jpg"
 title="HUT Republik Indonesia" width="300"
/></a>

5.Gambar Bendera Merah Putih Bergerak
 codenya:
<a href=”http://tiadawarnaindahtanpasemile.blogspot.com” mce_href=”http://tiadawarnaindahtanpasemile.blogspot.com”> <img src=”http://i1185.photobucket.com/albums/z344/dtujuh/indonesia.gif” mce_src=”http://i1185.photobucket.com/albums/z344/dtujuh/indonesia.gif” /> </a>

Semoga bermanfaat dan menjadikan blog anda lebih keren :D

Jumat, 20 Juli 2012

0 Kumpulan Kata2 Di Bulan Ramadan

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
  1.  ·  Bila dalam kata perbuatan tergores salah & khilaf, dgn segala kerendahan hati terucap mhn maaf setulus2nya. Selamat menunaikan ibadah puasa Ramdhan.
  2. ·  Ya Allah, muliakan & sayangilah saudaraku ini, bahagiakan keluarganya, berkahi rizkinya, kuatkan imannya. Berikanlah kenikmatan ibadahnya, jauhkan dari segala fitnah. amiin. "AHLAN WASAHLAN YA RAMADHAN" mohon maaf lahir dan batin
  3. ·  Selembut embun dipagi hari, tengadah tangan sepuluh jari, ucapkan salam setulus hati, selamat menunaikan ibadah puasa di bulan Ramadhan, mohon maaf lahir bathin
  4. ·  Marhaban yaa Ramadhan, pucuk selasih bertunas menjulang dahannya patah tolong betulkan, puasa Ramadhan kembali menjelang, salah dan khilaf mohon dimaafkan. Selamat Menunaikan Ibadah puasa
  5. ·  Hari berlalu begitu cepat segudang aktivitas telah menguras tenaga & pikiran kita, hingga tanpa terasa hanya dalam hitungan berapa puluh jam lagi kita akan songsong fajar suci ramadhon yang akan mencuci lahir dan batin kita selama 1 tahun. Tapi sebelumnya dengan segala kerendahan hati, saya mohon maaf lahir dan batin, sebelum akhirnya kita akan berserah diri pada Allah SWT. Amin...
  6. ·  Assalamualaikum Wr..Buka hati dapat CINTA
    buka fikiran .... dapat ILMU
    buka mata.......cari Rizki...
    & buka Handphone 1 pesan diterima
    "selamat menjalankan ibadah puasa, wish Allah give U the Best lives. I Pray... N Mohon dimaafin segala ksalahan2 Pancallok ya? Tq Marhaban Ya Ramadhan
Baca selengkapnya »
Langganan: Komentar (Atom)
Related Posts Plugin for WordPress, Blogger...

close
cbox
Blorinet education on
Add Me
Follow Me
Add and Follo Me
Add Me
Add Me
Langganan Gratis
KontesSEO