Advertise

Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Membuat Speak Buble dengan CSS3

Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger.

Seperti judul posting ini yaitu membuat Speak Buble dengan Css3. Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser.

Langsung saja pada penerapan dan koding css-y.
Sebagai contoh saya membuat speak buble untuk teks area.
contohnya bisa dilihat dibawah ini.

Pertama kita buat kode CSS Speak Buble-y seperti ini.

Selanjutnya untuk memanggilnya gunakan kode html seperti ini :

Cukup mudah bukan silahkan di custom sesuai selera blogger.
Untuk background bisa menggunakan background Gradient CSS3, Box shadow ataupun lain2nya biar lebih menarik. Selamat mencoba.

Hover Box Image Thumbnail Dengan CSS



Untuk postingan kali ini saya akan membuat galery imege dengan hover thumbnail hanya menggunakan CSS, Hover box image thumbnail ini sangat cocok buat blogger yang blognya mengkoleksi banyak gambar atau image.

Lihat Demo

Untuk kodenya bisa lihat di bawah ini :

CSS Code
.hoverbox{ cursor: default;list-style: none;}
.hoverbox a{ cursor: default;}
.hoverbox a .preview{ display: none;}
.hoverbox a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.hoverbox img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.hoverbox li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.hoverbox .preview{ border-color: #000;width: 200px;height: 150px;}

HTML Code

<ul class="hoverbox">

<li><a href="LinkAnda"><img src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/s1600/ironman3d.jpg" alt="description" /><img src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/s1600/ironman3d.jpg" alt="description" class="preview" /></a></li>
.............................
.............................
.............................
</ul>

NB : Warna merah untuk url gambar kecil (Small), warna Biru Untuk URL gambar hover Besar. Sedangkan warna hijau merupakan link yang ingin anda pasang.

Silahkan code css-y di custom sesuai selera blogger selamat mencoba.

Membuat Frame Content Pada Template Blogger

Sebelumnya saya mengucapkan SELAMAT TAHUN BARU 2011 buat blogger semua, semoga di awal tehun ini kita bisa menjadi lebih baik dari tahun kemarin. Mengawali posting di awal tahun ini saya akan membahas cara pembuatan frame Content pada area template blogger.

Frame Content ini bisa diterapkan pada bagian atas (top), bawah (Bottom) atau sidebar kiri dan kanan template bloger, dan untuk kali ini saya akan membuat frame content pada bagian atas template blogger.

Lihat Demo

Langsung pada cara pembuatan frame content :
Pertama masukan kode dibawah ini diatas kode ]]></b:skin>
#framecontent{
position: absolute;
top: 0; left: 0; width: 100%;
height: 90px;
overflow: hidden;
background: #6db3f2; }

#maincontent{
position: fixed;
top: 92px;
left: 0; right: 0; bottom: 0;
overflow: auto; background: #fff; }

.innertube{ margin: 15px; }

* html body{ /*IE6 hack*/
padding: 90px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/}

* html #maincontent{ /*IE6 hack*/
height: 100%; width: 100%;}

Lalu masukan juga kode dibawah ini dibawah kode <body>

<div id='framecontent'>
<div class='innertube'>
<h1>Frame Conten</h1>

<div id='maincontent'>
<div class='innertube'>

<div id='outer-wrapper'>
......................
......................
......................

Tambahkan tag penutup </div> di atas kode </body>

Silahkan pratinjau terlebih dahulu, kalau sudah cocok silahkan di simpan.
Selamat mencoba.

NB : Teks warna merah bisa anda ganti dengan logo blog ataupun dengan navigasi silahkan di custom saja sesuai dengan selera blogger.

Horizontal Navigasi Plus Search Box Simple And Cool

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image, kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background.
navigasi horizontal blue and black plus search box
Lihat Demo

Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat.
Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini :
<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Galery</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form></div></div>

Silahkan ganti alamat url-nya dengan url atau link yang blogger inginkan.
selamat mencoba.

Horizontal Navigasi Dengan Tab Pointer No Image

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah.

navigasi horizontal tab pointer
Demo Navigasi

Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini.

Kode CSS (Cascading Style Sheet)
.menu {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.menu li {
float:left; min-width:100px; }
.menu a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .menu a { width:100px; }
.menu a span {
display:block; color:#fff; background:#7cbc0a; border:1px solid #fff;
border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; }
* html .menu a span { width:100px; cursor:hand; w\idth:66px; }
.menu a b { display:block; border-bottom:2px solid #06a; }
.menu a em { display:none; }
.menu a:hover { background:#fff; }
.menu a:hover span { color:#fff; background:#08c; }
.menu a:hover em {
display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff;
border-width:6px 6px 0 6px; position:absolute; left:50%; margin-left:-6px; }

Kode HTML
<ul class="menu">
<li><a href="#"><b><span>Menu Satu</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu kedua</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu ketiga</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Empat</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Lima</span></b><em></em></a></li>
</ul>

Jenis Font Standar Untuk Blog "Font Style"

Penggunaan jenis font pada blog sangat penting sekali karena font merupakan bagian vital yang dilihat pertama kali oleh pengunjung blog. Untuk penggunaan Karakter atau jenis font memang tidak ada aturan yang baku,namun alangkah baiknya kalau kita menggunakan font yang bisa memberikan kenyamanan membaca bagi pengunjung.

Dibawah ini saya berikan contoh atau jenis font standar yang biasa digunakan pada blog ataupun website. Dengan melihat langsung jenis font anda dapat menimbang nimbang dan mimilah milah jenis font yang menurut anda cocok untuk blog anda.

font-family: arial;
Sample teks menggunakan font arial


font-family: courier;
Sample teks menggunakan font courier


font-family: georgia;
Sample teks menggunakan font georgia


font-family: lucida grande;
Sample teks menggunakan font lucida grande


font-family: times;
Sample teks menggunakan font times


font-family: trebuchet;
Sample teks menggunakan font trebuchet


font-family: verdana;
Sample teks menggunakan font verdana


font-family: webding;
Sample teks menggunakan font webding


font-family: century;
Sample teks menggunakan font century


NB : Tips untuk anda jika ingin menggunakan lebih banyak jenis font anda bisa menggunakan MS Word untuk melihat font dan juga model font standar yang bisa anda pasang pada blog anda. Smoga bermanfaat trimakasih.

Label Cloud Dengan Hover Background Ronded Corner

Kali ini saya coba memodifikasi tampilan dari label cloud dengan menambahkan hover background ronded corner pada setiap link label cloud tersebut, secara standar label cloud ataupun link akan mengikuti pengaturan tautan link standar dari template anda.

label cloud hover background

Langsung pada tutorial mengatur Label cloud dengan hover background caranya seperti berikut :

Pertama tambahkan label cloud terlebih dahulu pada blog anda
Tambah Gedget > Label > Cloud > Simpan.

Masuk pada Edit HTML masukan kode di bawah ini pada bagian CSS atau diatas kode ]]></b:skin&gt;

#Label1{
margin:0px;
padding:6px
}
#Label1 .widget-content{
line-hight:1.4em;
text-align:center;
margin:0px; padding:10px
}
#Label1 a{
text-shadow:1px 1px 0 rgba(255,255,255,0.8);
color:#000;
text-decoration:none; padding:4px;
}
#Label1 a:hover{
padding:1px 4px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px; border-radius:5px;
background:#a0a0a0; color:#fff;
}

Pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Untuk hover background saya menambahkan ronded corner dan juga teks shadow silahkan di rubah sesuai selera anda, anda juga bisa mengcustom padding dan margin agar lebih pas dengan template anda. Selamat mencoba.

Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke"

Stroke merupakan outline (garis luar) pada teks, Stroke ini biasanya digunakan untuk memperjelas dan mempertegas dari teks, penggunaan stroke ini ternyata bisa di aplikasikan pada kode css dan bisa di pasang pada teks di blog.

Untuk contoh lihat saya memasang Teks Stroke ini pada Judul Blog "H1" bisa dilihat contohnya disni atau gambar dibawah ini ::

teks stroke
Untuk membuat teks Stroke caranya cukup mudah, Teks Stroke ini mungkin hampir sama dengan Teks sahadow karena memang disini menggunakan Teks sahadow untuk membentuk sebuah Teks Stroke.

Untuk memasang teks stroke caranya cukup mudah.

Masuk pada Edit HTML
cari kode h1.title {
Masukan code css di bawah ini di bawah kode h1.title {

color:#000000;
text-shadow:
-1px -1px 0 #f3f3f3,
1px -1px 0 #f3f3f3,
-1px 1px 0 #f3f3f3,
1px 1px 0 #f3f3f3;

Silahkan di Preview terlebih dahulu, kalau cocok silahkan di save.

Silahkan di ganti warna teks dan warna stroke serta ketebalan dari stroke diatas, dengan merubah angka angka angka tersebut.

Teks Stroke ini bisa di pasang pada Judul Blog "H1" judul posting "H3" Judul Sidebar "H2" atau pada teks posting silahkan di sesuaikan saja, Selamat mencoba.

Mempercantik Tampilan Email Subscribe Dan RSS Feeds

Mempercantik tampilan blog merupakan salah satu tips membuat pengunjung nyaman diblog atau webblog. Banyak cara dilakukan unuk mempercantik tampilan blog dari pengaturan warna template, layout dan lain lain.

Salah satu cara mempercantik blog yaitu memasang Email Subscribe dan RSS Feeds, Dua subscribel ini memang sangat berguna sekali untuk pemilik blog tentunya Blogger sudah mengetahuinya.

kali ini saya coba membuat Email Subscribe dan RSS Feeds dengan menggunakan image dan Horizontal Rule atau kalau dalam bahasa coding-ya "hr".

Contoh di bawah ini :

Email
Subscribe Via Email

rss icon chugyRSS Feed
Subscribe Via RSS Feed


Untuk membuatnya caranya cukup mudah.

Pilih Tambah Gadget >> HTML/JavaScript.
Masukan kode di bawah ini.

<img src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/THT99f82oYI/AAAAAAAACKk/XMoR8x2gZQM/s400/email.png" alt="" style="float:left; vertical-align:middle;margin:0px; padding-right:10px;border:0" /> <span style="font-weight:bold;">Email</span><br />
<a href="http://feedburner.google.com/fb/a/mailverify?uri=chugygogog&amp;loc=en_US">Subscribe Via Email</a>
<hr style="color: #f1f1f1;font-size:1px;" />
<p></p>
<img src="http://4.bp.blogspot.com/_lh4qH1cW0XQ/THWX8C-ctbI/AAAAAAAACLE/2fTaT1ipmE0/s400/rss.png" alt="rss icon chugy" style="float:left;vertical-align:middle;margin:0px; padding-right:10px;border:0" /><span style="font-weight:bold;">RSS Feed</span><br />
<a href="http://chugygogog.blogspot.com/feeds/posts/default">Subscribe Via RSS Feed</a>
<hr style="color: #f1f1f1;font-size:1px;" />

  • Text warna merah merupakan image yang bisa diganti dengan image blogger.
  • Text Warna kuning silahkan ganti dengan alamat Email Subscribe dan Rss feeds blogger.
  • Text Warna Hijau merupakan style untuk Horizontal rule, bisa diganti dengan warna dan ketebalannya sesuai keinginan blogger.
Selamat mencoba.

Program CSS Editor Yang Cukup Mudah Digunakan

Untuk blogger yang suka Utak - atik template atau sering bergelut dengan coding CSS untuk blog atau Webblog tentu membutuhkan fasilitas yang dapat menunjang kebutuhan anda. Diantara dengan menggunakan Program CSS Editor. Ada banyak Program CSS Editor yang digunakan oleh desainer Blog atau Desainer Website Diantaranya program Dreamwever.

Dreamweaver merupakan program yang cukup terkenal bagi para desainer template karena fiturnya yang cukup lengkap. Tapi buat anda yang kurang menguasai dengan Program Dreamweaver anda bisa menggunakan pilihan Program CSS Editor yang simple dan mudah gunakan.

dibawah ini ada beberapa Program CSS editor yang bisa anda jadikan pilihan untuk megolah dan mengedit Code CSS.


Program diatas merupakan CSS Editor yang disediakan dari situs situs tersebut, jadi silahkan anda pilih yang menurut anda mudah digunakan. walaupun tidak semua CSS Editor di atas gratis. tapi anda bisa mencoba CSS Editor yang gratisannya. Selamat mencoba.

Cara Mudah Membuat Menu Navigasi Dengan CSS Tab Designer

Buat blogger yang tampilan blognya masih perlu penambahan menu navigasi sebagai sarana untuk mempermudah pengunjung melihat konten atau isi di blog anda, Tapi anda masih bingung ingin membuat menu navigasi seperti apa yang pas dan menarik ?

Disini saya akan memberikan alternative bagi anda yang belum mendapatkan menu navigasi yang sesuai dengan selera anda anda tidak perlu repot mendesain menu navigasi dari awal sampai akhir , anda cukup menggunakan program dari CSS Tab designer ini semuanya bisa dilakukan dengan sangat mudah.

Khusus bagi anda yang ingin membuat navigasi vertikal maupun horizontal yang super cepat dengan hasil yang bagus dan profesional anda bisa menggunakan program CSS Tab Designer V 2.0.

Program CSS Tab Designer V 2.0 ini akan membantu anda membuat berbagai macam navigasi baik vertical maupun horizontal dengan cara yang cukup cepat dan mudah kaena program CSS Tab Designer V 2.0 telah menyediakan beragam macam menu navigasi vertikal dan horizontal dengan banyak pilihan warna dan bentuk menu navigasi yang bisa anda gunakan.

Anda bisa lihat Screen Shoot gambar di bawah ini. yang merupakan tampilan dari program CSS Tab Designer. Silahkan di klik Full Image untuk melihat ukuran yang lebih besar.

(+) Full Image.


Bagi anda yang ingin menggunakan program ini silahkan anda ambil program CSS Tab Designer V 2.0 di link di bawah ini

http://www.4shared.com/file/ydlcuxlW/css_tab.html

File Size 1.35 MB Silahkn anda instal programnya di PC anda dan mulai memilih menu navigasi yang cocok dan pas dengan template blog anda.

Modifikasi Search Box Auto Hide Dengan Background

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan Auto Hide denga menambahkan backkground warna ataupun background image.

Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda.

Contoh search box auto hide seperti di bawah ini

Langsung saja pada pokok bahasan membuat atau me - modifikasi search box auto show hide.

Masuk ke Blogger
Pilih Tata Letak (Rancangan) - Tambah Gadget - HTML/JavaScript
Masukan Kode HTML di Bawah ini.

<style type="text/css">

#searchboxo{

background:#f3f3f3;
border:1px solid #6B7171 ;
width:240px;
height:25px;
margin:0px;
padding:4px;
}

#searchboxo form input.searchinput{

float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:140px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#fff;
}

#searchboxo form input.submitbutton{

float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}

</style>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}" onfocus="if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}" type="text" value="Type text to search" />
<input class="submitbutton" type="submit" value="Search" />
</form>
</div></div>


Jika sudah klik simpan.

Anda bisa meng custom tampilan dari search box auto hide ini. Saya coba menjelaskan sedikit kode HTML diatas.

#searchboxo{
ini kode paling dasar untuk background search box.

#searchboxo form input.searchinput{
Ini adalah kode dimana teks muncul pada kotak pencarian.

#searchboxo form input.submitbutton{
Ini adalah kode dimana pointer atau menyentuh kotak SEARCH.

Anda bisa mengganti ukuran lebarnya sesuai dengan blog anda. dan anda juga bisa mengganti background dengan warna lain ataupun dengan backgroung image.
Jika anda memahami kode HTML tentunya ini bukan hal sulit. Selamat mencoba.

Mengganti Judul posting Dengan Text Shadow

Untuk kali ini sya mencoba memberikan tips atau cara membuat teks shadow pada judul posting, mungkin blogger semua sudah mengenal atau mengetahui penggunaan teks shadow ini jadi saya cuma melengkapi saja. Langsung saja :

Langkah pertama masuk pada blog anda
lanjukan pada Tata Letak - Edit HTML
Cari kode seperti ini .post h3{
Lalu masukan kode text shadow di bawah ini di bawah kode .post h3{

text-shadow: 2px 1px 7px ;

hasil Text nya akan seperti ini.

Text shadow Pada Judul posting


Di bawah ada beberapa jenis atau model dari text shadow yang bisa anda gunakan.

text-shadow: 2px -2px 4px;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting


text-shadow: 2px 2px 0px;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting


text-shadow: -1px -1px white, 1px 1px #333;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting


Silahkan anda pilih beberapa jenis teks shadow yang ada di atas. Anda juga bisa Mengcustomize dari jenis text shadow sesuai keinginan anda. Trima kasaih

Membuat Navbar Menu Secara Online Dengan Graphic Navbar Generator

Navbar atau Navigasi Bar adalah sebuah Navigasi atau Menu yang di gunakan untuk menyimpan Link Link Menu pokok atau penting di Blog atau Website. Navigasi ini bisa berbentuk Vertical ataupun Horizontal. Navigasi Bar ini bisa dibuat dengan menggunakan image ataupun background warna saja dengan berbagai macam variasi.

Di Postingan sebelumnya saya pernah membahas bagaimana Cara Membuat Menu Horizontal Yang Simple dan Cantik.
silahkan di baca baca dulu untuk flash back memory anda. Kalau sudah silahkan lanjukan bacanya.

Untuk kali ini saya akan memberikan informasi cara membuat Navbar atau Menu Navigasi ini secara online, yaitu dengan menggunakan Pasilitas dari Graphic navbar Generator.

Graphic Navbar Generator ini menyediakan pasilitas pembuatan Navbar secara online, Sehingga Anda tidak perlu repot repot untuk membuat sebuah Navbar Menu. Baik Navbar verical maupun horizontal.

Anda tinggal memilih Navbar yang sudah disediakan dengan banyak pilihan yang menarik, lihat screen shoot gambar diatas yang di ambil dari situsnya langsung, kita juga bisa memodifikasi Tampilan Navbar ini sesuai selera anda.

Dan Untuk penggunaannya sangat mudah anda tinggal memilih navbar yang disediakan, Terus Mengisi alamat Link nya, Judul Link nya dan anda tinggal klik Create untuk mengambil kodenya Cukup mudah saya rasa.

Gimana Anda tertarik untuk membuat Navbar Menu secra Online, silahkan saja kunjungi situsnya langsung di http://www.free-webmaster-tools.com/toolbar-generator-gui.htm Silahkan klik saja linknya untuk nyampe di TKP.

Selamat mencoba.

Modifikasi Tampilan Template Dengan Ronded Corner

ronded cornerMembuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda.

Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com .

Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri.

Bagian Bagian Dasar dari Template :
  • Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template.
  • Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background.
  • yang ketiga Header - Main Wraper - Sidebar - Dan Footer : Ini merupakan lapisan paling atas dari sebuah template.
Header mempunyai posisi di bagian atas .
Main wraper mempunyai posisi di Bagian tengan untuk posting .
Side bar Biasanya disamping kiri atau kanan atau juga kiri dan kanan.
Dan fotter Ditempatkan paling bawah.

Untuk Tips kali ini saya mencoba memberikan tips membuat ronded corner pada bagian outer-wraper atau bagian diatas background dan di bawah main wraper .

Sekarang buka blog anda.
Masuk pada Tata Letak dan pilih Edit HTML.
Sekarang anda cari Kode html di bawah ini.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:1px solid #04B4AE;
width: 660px;
margin:15px auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}
Kode diatas merupakan kode standar dari template minima. sekarang anda ganti kode di atas dengan kode di bawah ini.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:8px solid #04B4AE;
-moz-background-clip:-moz-initial; -moz-background-origin:-moz-initial; -moz-background-inline-policy:-moz-initial; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px;
width: 660px;
margin:15px auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
}
Sekarang coba previwe atau pratinjau terlebih dahulu, Kalau sudah cocock silahkan di simpan.
Anda bisa merubah lebar atau widht-y , warna background ataupun border nya sesuai keinginan anda.Selamat mencoba.

Modifikasi Vertical Menu Dengan Ronded Corner

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner, Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini.

Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini.

seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja :

1. Masuk ke Blog anda.
2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman.
3. Tambah Gadget - Lalu pilih HTML/JavaScript.
4. Masukan Kode HTML di bawah ini :

<style type="text/css">

/* vertikal vertikal merah di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#vertikal-merah{

border-bottom-width: 0;
}

#vertikal-merah ul{
margin: 0px;
padding:0px;
font: normal 100% 'georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}
</style>


<!-- silahkan ganti dengan link milik anda -->

<div id="vertikal-merah">
<ul>
<a href="http://chugygogog.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://chugygogog.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blog</a>
<a href="http://chugygogog.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://chugygogog.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://chugygogog.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
<!-- untuk menambah link baru simpan di sini -->
</ul></div><p></p>

Ganti Link nya dengan link yang ingin anda gunakan.
Berikan judul untuk widget ini misalnya Menu Vertical atau apa saja terserah anda.
Jika sudah Simpan.

Tentunya anda sudah paham untuk merubah warna background ataupun warna teks jika kode di atas tidak sesuai dengan keinginan anda silahkan anda menggantinya....!!
Selamat mencoba.

Pasang Ikon Pada Judul Posting Dan Sidebar

Untuk Memasang image,ikon atau gambar di judul postinga dan di judul sidebar template anda, caranya cukup mudah anda tinggal menambahkan image yang telah anda simpan di tempat upload gambar pada bagian .post h3 { untuk Judul posting, dan h2 { untuk judul di sidebar. dan mengatur jarak antara padding dan margin saja. untuk lebih jelasnya silahkan ikuti caranya di bawah ini.

Menambah image sebelah kiri judul Posting :

Cari kode seperti dibawah ini:

.post h3 {
margin:.5em 0;
padding:0px 0px 0px 10px;
font-size:140%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;

Untuk lebih cepat silahkan anda Ganti kode tersebut dengan kode di bawah ini :

.post h3 {
background:url('http://lh6.ggpht.com/_pt7i0nbIOCY/SxDFV6RaXzI/AAAAAAAACaI/NEnqxysvPJo/icontexto-webdev-valentine%5B4%5D.png') no-repeat;
margin:.5em 0;
padding:0px 0px 05px 30px;
font-size:140%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;


Silahkan anda Pratinjau terlebih dahulu , jika sudah ok langsung save saja.

  • Menambah image sebelah kiri judul Sidebar :
caranya hampir sama dengan yang di atas, kalo di atas .h3 { sekarang anda cari kode .h2 { sebagai kode judul sidebar dan tambahkan kode seperti di atas, dan hasilnya akan seperti dibawah ini.

.h2 {
background:url('http://lh6.ggpht.com/_pt7i0nbIOCY/SxDFV6RaXzI/AAAAAAAACaI/NEnqxysvPJo/icontexto-webdev-valentine%5B4%5D.png') no-repeat;
padding:8px 8px 2px 40px;
margin-top:15px;
...........
...........
blablabla

Ganti URL gambar tersebut dengan URL gambar anda. Di atas hanya sebagai contoh gambar saja. Jika sudah klik simpan.
Selamat Mencoba....!!!

Cara Membuat Teks Berjalan (Marque)

Kali ini saya akan meberikan sebuah Tips yaitu membuat teks bergerak atau berjalan tanpa menggunakan sofwer animasi seperti flash ataupun yang lainnya, melainkan dengan menggunakan efek Marque Atau kode HTML yang mengatur pergerakan teks tersebut tersebut. Saya akan memberikan beberapa contoh efek marque yang biasa digunakan, dan saya juga menggunakan efek marque tersebut di bawah header blog ini.
Contoh efek marque dengan teks bergerak dari kiri kekanan :

<MARQUEE align="center" direction="right" height="100" scrollamount="2" width="100%">

tuliskan teks atau link kamu disini

</MARQUEE>

Hasilnya seperti ini :


tulis teks atau link kamu disini



Contoh efek marqu dengan teks bolak-balik ditambah dengan menggunakan bacground :

<div align="left">&ltFONT FACE="georgia" color="black"><B><MARQUEE BGCOLOR="yellow" width="100%" scrollamount="3" behavior="alternate">

tulis teks kamu disini

</MARQUEE></b></FONT></div>

Hasilnya seperti ini :



tulis teks kamu disini


Mungkin di atas hanya beberapa contoh teks berjalan dengan menggunakan efek marque....! Teman teman bisa memodifikasi kode teks marque tersebut atau mencari lagi infonya di blogger-blogger lainya yang khusus membahas tentang efek marque ini . Wassalam

Membuat Scrool Untuk di Blog

Kali ini saya akan memberikan tips bagaimana cara membuat Scrool pada SideBar diblog. Ada banyak keuntungan menggunakan Scrool pada sidebar diantaranya memperpendek tampilan blog pada side bar yang biasanya digunakan untuk judul posting ataupun link para blogger, jika blog blogger mempunyai postingan yang banyak tentunya judul postingan pun jadi banyak,jadi dengan menggunakan scroll judul postingan ataupun link blogger akan terlihat pendek,simple,dan rapih tentunya.

Tanpa basa basi lagi gimana kalau langsung saja pada pokok bahasan yaitu membuat Scrool untuk judul postingan pada side bar.

Langkah pertama yang harus blogger lakukan adalah buka terlebih dahulu browser internet blogger.dengan menggunakan Mozila .IE. Opera ataupun yang lainnya
ketikan blogger atau blogspot.com pada broser blogger.
Sign in blog Blogger>Pilih Tata Letak>Selanjutnya pilih Element halaman>Pilih add Widget yang ada pada sidebar>pilih HTML, dan masukan kode dibawah ini setelah itu klik simpan.

<div style="border: 1px solid rgb(238, 238, 238); padding: 8px; overflow: auto; width: 200px; height: 100px;"><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a><br /><a href="www.chugygogog.blogspot.com">Ganti alamat link ini dengan link anda</a></div>

Maka hasilnya akan terlihat seperti dibawah ini, Silahkan blogger sesuaikan ukuran lebar dan tingginya sesuai dengan tempat penempatannya. dengan cara ganti Width dan hight pada kode HTML diatas. dan jangan lupa ganti alamat linknya dengan alamat postinagan ataupun alamat linK yang diinginkan.


Gimana blogger cukup mudah bukan selamat mencoba...!