Advertise

Tampilkan postingan dengan label Tutorial And Tips. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial And Tips. Tampilkan semua postingan

Background Stripers And pattern Dengan CSS3 No Image

Selamat sore Brader Blogger semua akhirnya kembali membuat postingan walaupun sekarang jarang update tapi alhamdulilah disisa waktu luang ini akhirnya bs kembali update. Untuk sekarang saya akan share seputar tutorial CSS3 yang lama juga tidak ada info yang baru. Apalagi bang Hendro sesepuh CSS3 juga udah jarang ngebahas CSS3 hehehe.... gimana ni bang Hendro kabarnya kayanya lg asyik dengan koding-koding di weblognya.

background pattern full css3 tanpa image
Langsung saja pada pokok pembahasan. tutorial CSS3 kali ini akan membahas pembuatan background dengan texture/pattern full CSS3 seperti gambar diatas, dimana semua itu dilakukan menggunakan koding CSS3 tanpa image.

Untuk Demo livenya bisa lihat pada link di bawah.

Demo Live

Dan untuk codingnya dibawah.

Angled Pattern
.angled {
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}


Horizontal Pattern
.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

Vertical Pattern

.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

Checkered Pattern
.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}

Diatas hanya beberapa saja background pattern dengan css3 silahkan Anda berekplorasi lagi. 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.

Merubah Warna Background Dasar Blog Secara Otomatis

jika tutorial blog sebelumnya membahas cara modifikasi label-tag seperti menu navigasi ala wordpress, dan untuk tutorial blog kali ini akan membahas cara mengganti warna background dasar blog secara otomatis tanpa harus mengdit html template anda.

Cara merubah warna background dasar blog ini bisa dilakukan secara otomatis dengan menambahkan sedikit script yang bisa ditempatkan pada bagian widget blog anda.

Lihat DEMO

Cara pembuatannya seperti berikut :

Masuk pada dasbor blog anda
Pilih Rancangan >> Add widget Template >> Pilih HTML/Javascript
Masukan script merubah background outomatis dibawah ini :
<div style="overflow:auto; width:100%; height:100%;margin-top:16px">
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
Pilih Warna Latar
<table border="1" width="300" height="20">
<tr> <td
onclick="bgChange('')" bgcolor="white">
</td> <td
onclick="bgChange('#FAFAD2')" bgcolor="#FAFAD2">
</td> <td
onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">
</td> <td
onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
</td> <td
onclick="bgChange('#98FB98')" bgcolor="#98FB98">
</td> <td
onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
</td> <td
onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
</td> <td
onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
</td> <td
onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">
</td> <td
onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
</td> <td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">
</td> </tr>
</table>
</div>

Jika sudah silahkan Klik Simpan.
dan lihat hasilnya.

NB :: Anda bisa merubah warna-warna background yang ada di script diatas dengan mengganti kode warna sesuai selera anda. selamat mencoba.

Modifikasi Label - Tag Seperti Menu Navigasi Ala WordPress

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger, Modifikasi label, Tag Ala Wordpress. dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi.

Lihat screen shoot gambar dibawah ini :

Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini ::

Pertama Masuk pada Edit HTML - Expand Template Widget
Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body.

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut :

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

div.tag{font-size:11px;padding-top:5px; color:#999999; margin-top:10px;}
.post-tag{font-family:Georgia; font-size:12px; margin-top:15px;}
.post-tag a:link, .post-tag a:visited{color:#444; font-style:italic;}
.post-tag a:hover {color:#ff0000; font-style:italic;}

Masukan kode di atas, pada bagian body tepatnya diatas kode ]]></b:skin>

Selanjutnya cari koda <data:post.body/>
Masukan kode di bawah ini, dibawah kode <data:post.body/>

<div class='post-tag'> <b style='background:#ff0000; -moz-border-radius:5px; -webkit-border-radius:5px; padding:8px 10px; color:#fff; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=5&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:8px; margin-right:8px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
<b:if cond='data:post.allowComments'>
<a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b style='font-style:normal; padding:0px; font-size:16px;margin:0px;'><data:post.numComments/></b></a>
</b:if>
</div>

Sekarang pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Anda bisa mengcustom tampilan tag navigasi ini pada bagian kode diatas sesuai selera anda. selamat mencoba.

Klasik Readmore Tidak Sempurna Di Browser Google Crome

Akhirnya tampilan template blog ini bisa sedikit rapih dibuka pada browser Google Crome, setelah sebelumnya mengalami masalah pada bagian readmore di postingan yang kadang muncul full di halaman depan atau homepage.

Sebelumnya Saya ucapkan terimakasih untuk Mas ALamathuR d'hileudjapanist II yang telah memberikan informasi mengenai tampilan blog ini yang terkesan seperti gado gado kalau di buka di browser Google Crome karena beberapa posting terlihat full di halaman depan.

Sebenarnya masalah ini sudah saya ketahui sudah lama namun memang belum menemukan solusinya jadi saya biarkan saja, hingga akhirnya saya menemukan juga solusi mengatasi tampilan postingan di browser google crome.

Ternyata permasalahannya ada pada penggunaan readmore yang saya pasang di blog ini, kebetulan blog ini masih menggunakan readmore jadul dan setelah saya cek dengan blog saya yang lain yang menggunakan readmore jadul, ternyata permasalahan yang sama pun terjadi tampilannya tidak sempurna pada beberapa postingan.

Dan untuk mengatasinya saya coba memasang auto readmore di blog ini, dan ternyata setelah di cek di browser google crome, auto readmore ini tampil sempurna dalam menampilkan penggalan readmore disetiap postingan.

Sebenarnya saya kurang menyukai auto readmore ini karena untuk penggalan artikel suka tidak pas dan juga thumbnail gambar yang terkesan memaksakan sehingga terlihat kurang nyaman, tapi apalah daya tangan tak sampai hehehehe akhirnya saya pasang juga auto readmore di blog ini.

Buat temen temen blogger yang menggunakan readmore klasik mungkin bisa cek tampilan blognya di browser google crome apakan tampilannya sudah baik atau mengalami hal yang sama seperti blog ini, yaitu beberapa postingan kadang tampil full di halaman depan.

Dan kalau blogger ingin migrasi dari klasik readmore menjadi auto readmore ya silahkan saja karena memang auto readmore tidak bermasalah di buka di browser google crome, silahkan klik disini jika ingin memasang auto readmore pada postingan.

Untuk blogger yang tahu solusi mengatasi readmore klasik agar bisa sempurna tampilannya di browser google crome mungkin bisa memberikan solusinya untuk saya dan rekan rekan blogger semua yang mengalami hal yang sama pada readmore klasik ini trimakasih.

Membuat tombol share Dengan CSS3 "Button Share CSS3 Style"

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark).

Sekarang saya coba membuat share button dengan CSS3, share button ini menggunakan ikon dan teks secara horizontal dan juga teks shadow, background gradient dengan CSS3.

Contoh Tombol Share dengan CSS3 seperti dibawah ini.
Button Share CSS3 Style
Tombol share ini saya coba pasang dibawah postingan, tapi anda bisa saja memasang di bagian yang anda inginkan.

Untuk cara pembuatan tombol share dibawah posting seperti berikut :

Masuk pada Edit HTML > Expand Template Widget
Masukan kode dibawah ini sebelum kode ]]></b:skin>

#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }

#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }

Lalu cari kode <data:post.body/>
Masukan kode tombol share di bawah ini setelah kode <data:post.body/>

<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>

<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>

<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>

Jika sudah silahkan disimpan.

Untuk tombol share ini saya hanya menggunakan lima (5) Button share yang paling populer dan banyak digunakan diantaranya yaitu :
1. Button Share Facebook
2. Button Share Twitter
3. Button Share Digg It
4. Button Share Del.ici.us
5. Button share Stumble

Jika ingin menambahkan button share lainnya silahkan masukan di bagian kode button share diatas. Jangan lupa untuk share postingan ini dengan menekan tombol share button di bawah ok. Selamat mencoba.

Membuat Buttom Next Page,Home,Back Page dengan CSS3

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3, untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah.

next page buttom css3 style

Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3.

Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu :

"Membuat Tombol Dengan CSS3 - Buttom CSS3 Style"

Sekarang masuk pada Edit HTML > Expand Template Widget
Cari kode seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>Home Page</a>

</div>

Untuk lebih cepat gunakan [Ctrl + F] untuk menemukan kode diatas.
Setelah itu hapus kode diatas dan ganti dengan kode di bawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<p><a class='buttom' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a></p>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<p><a class='buttom' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a></p>
</span>
</b:if>

<p><a class='buttom' expr:href='data:blog.homepageUrl'>Home Page</a></p>

</div>

Pratinjau terlebih dahulu, kalau sudah cocock bisa langsung disimpan.
selamat mencoba.

Membuat Tombol Dengan CSS3 "Button CSS3 Style"

Kali ini saya mencoba membuat tombol atau buttom dengan CSS3 dengan menggabungkan ronded corner, Gradient linear CSS3 dan Box shadow CSS3 agar lebih menarik tampilan dari button ini. Button ini bisa di aplikasikan pada link di postingan maupun pada bagian template yang anda inginkan.

Contoh Button menggunakan CSS3

Untuk membuatnya silahkan ikuti langkahnya dibawah ini.
Masuk pada Edit HTML masukan kode dibawah ini, diatas kode ]]></b:skin>

.buttom{
padding: 8px;padding-top:6px; padding-bottom:6px;
margin-right:3px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
background-color:#fff;
}

.buttom a, .buttom:hover {
padding: 8px;padding-top:6px; padding-bottom:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
text-decoration: none;
color:#000;
}

Silahkan dismpan terlebih dahulu.

Kode diatas merupakan pengaturan untuk Button dengan CSS3, untuk mengaplikasikannya kita tinggal memanggil selector button diatas yaitu dengan menambahkan class="buttom pada link yang akan dipasang

Contoh kode link sebelum menggunakan class="buttom, seperti ini :
<a href="linkanda.blogspot.com">Judul link anda</a>

Contoh link yang telah dipasangkan class="buttom, seperti ini.
<a href='linkanda.blogspot.com' class="buttom">Judul link anda</a>

Sekarang coba anda buat link pada postingan atau sidebar, tambahkan kode class="buttom seperti contoh diatas, dan lihat hasilnya. Selamat mencoba

NB :: Pembuatan Button ini mungkin hanya sebagai contoh sederhana, untuk pengembangannya silahkan dipelajari lebih lanjut. Sukses selalu.

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.

Mengatur Jumlah Posting Yang Tampil Pada Label Part 2

Melengkapi tutorial blogger sekaligus memberikan altenatife pengaturan pada label yang kemarin - kemarin telah diposting diantaranya Mengatur label cloud dengan hover background, dan juga cara manual mengatur jumlah posting pada label, dan untuk melengkapinya saya memberikan alternative lain cara mengatur jumlah posting yang ditampilkan pada label dengan mengedit secara langsung di HTML.

Kelebihan meng-edit langsung jumlah label pada bagian HTML yaitu setiap label yang dipasang baik mode Daftar maupun Cloud, maka jumlah posting yg tampil akan sama sesuai dengan angka / jumlah label yang diinginkan.

Langsung pada tutorial cara mengatur jumlah posting pada label :

Masuk Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Sekarang Cari kode seperti dibawah ini :

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

Biasanya ada dua kode yang sama seperti diatas, tempatnya sedikit kebawah dari kode yang pertama. Kalau tidak ada satu juga tidak masalah.

Silahkan diganti kode tersebut dengan kode dibawah ini:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'>

Angka 5 merupakan jumlah posting yang akan ditampilkan ketika label di klik. silahkan diganti sesuai dengan keinginan anda.

Jika sudah silahkan simpan, selamat mencoba.

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.

Hover Background Transitions CSS3

Transitions dalam CSS3 bisa diartikan sebagai perubahan warna yang bisa kita gunakan untuk merubah warna background pada bagian element halaman tertentu. Transition ini mungkin hampir sama dengan hover pada tautan link yaitu ketika mouse menyentuh link maka link tersebut bisa berubah warna, teks, ataupun backgroundnya sesuai dengan pengaturan tautan link anda.

Saya coba membuat Transitions CSS3 ini pada bagian Body komentar, untuk contoh silahkan arahkan kursor mouse anda pada bagian body komentar di blog ini. Pada saat kursor menyentuh bagian body comentar, background body comentar akan berubah warna.

Untuk cara pembuatan Transitions CSS3 ini bisa langsung ikuti caranya di bawah ini.

Pertama masuk pada Edit HTML
Cari kode seperti dibawah ini

#comments-block .comment-body {
background-color: #DEB887;
margin:.25em 0 0;
}

Tambahkan kode Transitions CSS3 seperti ini.

background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
}

Lanjutkan dengan menambahkan kode Hover Transitions nya seperti di bawah ini. letakan tepat dibawah kode di atas.

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Maka hasil kode keseluruhan akan seperti ini.

#comments-block .comment-body {
background-color: #DEB887;
-o-transition-property: background-color;
-o-transition-duration: 1s;
margin:.25em 0 0;
}

#comments-block .comment-body:hover { background-color:#b0b0b0; }

Jika sudah silahkan di save dan anda lihat hasilnya.

Transitions ini bisa juga di terapkan pada bagian bagian posting, sidebar, foter dll. untuk caranya hampir sama dengan diatas.

NB : Silahkan ganti kode warna untuk background dasar comments-block dan hover transitions dengan mengganti teks yang di cetak tebal.
Bagian -o-transition-duration: 1s; merupakan pengaturan untuk mengatur cepat lambat pergantian transition , silahkan dirubah pada bagian "1s" semakin besar angkanya maka akan semakin lambat pergerakannya.

Hover Tab Menu CSS3 Tanpa Javasript

Akhirnya bisa beres juga mengganti tampilan template blog ini, walaupun cukup lama dalam pengeditan dan koneksi inet yang lagi ngadat tapi alhamdullilah akhirnya beres juga dan bisa kembali menulis postingan lagi, sebelumnya saya meminta maaf kalau pengunjung blog ini dibuat tidak nyaman dengan tampilan blog ini.

Masih seputar CSS3, Untuk sekarang saya akan membahas cara membuat Hover Tab Menu CSS3 tanpa Javasript. Tab menu mungkin sudah tidak asing lagi untuk blogger karena dari sekian blog yang pernah saya singgahi hampir 50% memasang tab menu.

hover tab menu css3

Lihat demo Hover Tab Menu CSS3 tanpa Javascript

Tab menu ini cukup simple dan menarik dan saya rasa belum banyak yang memansang tab menu seperti ini. Tab Menu CSS3 ini di buat oleh www.kamikazemusic.com jadi silahkan blogger langsung ke situsnya untuk melihat atau mencoba membuat hover tab menu CSS3 tanpa Javascript.

Langsung pada Tutorial pembuatan Hover Tab Menu CSS3

Bikin Menu Dengan CSS3 Style "Free CSS3 Menu Maker"

Kayanya masih seputar CSS3 yang akan di bahas untuk postingan sekarang, mudah mudahan tidak bosan ya. Untuk kali ini saya akan memberikan info cara membuat Menu CSS3 Style simple nan cantik dengan bantuan program dari CSS Menu yaitu Free CSS3 Menu Maker.

Postingan sebelumnya seputar CSS3 bisa lihat di bawah ini.
(+) Buat Box Shadow dengan CSS3
(+) Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke"

Free CSS3 Menu Maker,menu navigasi CSS3

Program Free CSS3 Menu Maker ini bisa di download secara gratis, Free CSS3 Menu Maker akan memudahkan anda untuk membuat menu navigasi dengan gaya CSS3.

Lihat Demo
Link Download


Buat Box Shadow dengan CSS3

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke, walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow.

Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3.

Beberapa sample Box Shadow bisa dilihat di bawah ini:

-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: 0px 20px 10px -10px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: inset 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;


Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" bisa di custom sesuai selera masing masing.

Box shadow ini bisa digunakan untuk membuat Teks area atau juga bisa dipasang pada background tamplate Blogger dll. 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.

Jadi No 1 Di Search Engine "Gunakan Black Hat SEO Di Blog"

Melanjutkan postingan yang sebelumnya yang membahas Metode Black Hat SEO yang ternyata masih Ampuh untuk mendongkrak blog masuk pada posisi teratas di mesin pencari (search engine). dan sekarang saya coba menerapkan atau mengaplikasikan Metode Black Hat SEO pada halaman blog.

Silahkan baca postingan sebelumnya mengenai Black Hat SEO.
" Metode Black Hat SEO Masih Ampuh "

Berikut ini cara penerapan atau pemasangan Metode Black Hat SEO di blog ::

Pilih Rancangan → Edit HTML → Cari ]]></b:skin>
Masukan Kode Di bawah ini di atas kode ]]></b:skin>

#target-seo {
float:left;
margin:-4500px;
padding:-3000px;
}

div id="target-seo">
<h1>
<a href="http://linktarget.com/"title="keyword">keyword</a>
</h1>
</div>

Pratinjau terlebih dahulu,kalau tidak Eror silahkan di Simpan.

Pilih Rancangan → Edit HTML → Cari ]]></b:skin>
Masukan Kode Di bawah ini di atas kode ]]></b:skin>

<a name="top"></a>
<div align=left><font face-verdana,arial size=1>

<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |
<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |
<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |
<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |
<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |
<a href="http://www.judulpostingbloganda.blogspot.com/"title="keyword">keyword</a> |

Pratinjau terlebih dahulu,kalau tidak Eror silahkan di Simpan.

Metode ini kita menggunakan Baner exchane untuk menyembunyikan keyword yang ditargetkan.

<!-- star baner -->
<a href="http://blogkamu.blogspot.com"><img border="0" alt="keyword" src="http://alamat penyimpanan gambar.jpg"/></a>
<noscript><a href="http://blogkamu.blogspot.com" title="target_keyword"><b>target_keyword</b></a></noscript>
<!--end banner -->


Jika sudah silahkan anda sebarkan baner exchange yang telah anda masukan keyword tersebut.

NB :: Ganti teks yang berwarna hijau dengan alamat postingan di bog anda dan juga Keyword yang ingin ditargetkan.
Untuk Teks warna merah ganti dengan alamat penyimpanan baner anda.

Mudah mudahan dengan menerapkan Black Hat SEO Blog anda akan menjadi No 1 Di Search Engine . Selamat mencoba.

Metode Black Hat SEO Masih Ampuh

Untuk postingan kali ini saya mencoba sedikit share pengetahuan saya yang masih minim dalam dunia SEO.dan saya mencoba membuat postingan seputar Black Hat SEO. Mungkin untuk sebagian blogger khususnya yang bergelut di Bidang SEO sudah tidak asing lagi dengan tehnik Black Hat SEO yang merupakan salah satu metode yang banyak di gunakan dalam dunia blogging.

Saya coba mengulas sedikit tentang Black Hat SEO dan memberikan contoh pemasangan dan penggunaan Black Hat SEO pada blog, karena Metode Black Hat SEO Masih Ampuh dan terbukti banyak blogger yang masih menggunakan metode ini.

Black Hat SEO merupakan metode yang digunakan untuk memaksimalkan atau mengoptimalkan konten dari blog anda dengan menyembunyikan keyword atau kata kunci yang di targetkan pada blog.

Balck Hat SEO sering dipahami sebagai tehnik SEO yang kurang baik jadi gunakanlah metode ini sebaik baiknya dan jangan terlalu berlebihan dalam penerapannya supaya aman.

Metode Black Hat SEO yang biasa di gunakan diantaranya:
  • Metode Hidden Keyword Frase :
    Metode ini dipasang pada template blog dengan menyelipkan frase kata kunci (Keyword) tanpa di ketahui oleh pembaca.

  • OnPage Hidden Keyword :
    Metode ini hampir sama dengan metode Metode Hidden Keyword Frase namun kita bisa menambahkan atau memasukan beberapa keyword sekaligus.

  • OffPage Hidden Keyword :
    Metode ini mengoptimalkan kekuatan SEO dari luar area blog. contohnya dengan memasukan keyword pada baner, atau lebih dikenal dengan baner exchange

Selanjutnya saya akan membahas cara penerapan ke tiga metode Black Hat SEO Pada blog, di postingan selanjutnya .

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.