April 2010

Home → Arsip Untuk April 2010

Simple Style

Simple Style Blogger Template memang sebuah template blogger yang saya design dengan sangat sederhana, baik dari bentuk maupun pewarnaan. Template ini hanya memiliki beberapa fitur, seperti 2 kolom termasuk postingan dan sidebar yang terletak disisi kanan. Kemudian menu horizontal sederhana termasuk juga search widget didalamnya, dan 3 kolom dibagian footer membuat semakin banyak tempat untuk meletakkan widget yang saat ini semakin banyak dan bagus.

Warna dasar adalah putih dan sedikit sentuhan abu-abu dibagian header dan footer. Silahkan sobat lihat langsung di demo template-nya, semoga bermanfaat dan bisa digunakan untuk segala jenis blog.

Border-Radius : Membuat Garis Lengkung Dengan CSS

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

Syntax untuk border-radius

Mozilla Equivalent	Browser Opera 10.5	Webkit Equivalent (Safari 3)
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.

Semoga bermanfaat ya.

Negocios Template

Negocios adalah sebuah template blogger yang saya ambil dari bahasa spanyol yang artinya bisnis. Template ini memang menampilkan gambar bayangan 2 orang yang tampak seperti bisnis man, ya menurut saya sih. Dan ada tampilan bayangan menarik lainnya dibagian header yaitu peta dunia dengan warna biru sedikit efek tenggelam.

Template ini mempunyai 2 kolom dan sidebar yang terletak disisi kanan. Warna dasar adalah putih dan merah, untuk yang lain bentuk dan fitur saya rasa tidak ada yang terlalu istimewa dari template ini. Hanya image pada header yang sangat menarik, sehingga sangat cocok untuk blog dengan tipe bisnis atau finansial.

Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

Baiklah langsung menuju lokasi pengeditan template-nya.

Silahkan login ke blogger.
Tuju Tata Letak.
Pilih tab Edit HML.
Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
Letakkan kode css berikut ini diatas kode ]]></b:skin>

/* �- Top --*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {

background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB81sBvVAdHnOHgRRY7wY0_Go-BsBkq1UInN3licESSNepxDVf10XygR83BbLM1bY0f7bjZ19xlmhVhwlKhfMNKlUsQWx203uvYi4aN5oGvQrT8W3smySDj3iRtJI7K6era-9vVrLVhAHV/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}
Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
</b:section>

</div>
Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Simpan Template.

Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.

Launching Blog : Sang Merak

SangMerak - Adalah sebuah nama dari blog saya yang saya jadikan sebagai catatan pribadi, cerita tentang kehidupan Saya , pengalaman, kisah dan kejadian-kejadian dalam hidupku tertulis blog itu

SangMerak - Journal Blog dari "Anasku" yang akan saya jadikan media Saya sharing-sharing.. "Bukan tentang blogger" tetapi tentang pernak-pernik kehidupan Saya.. so.. buat Anda para blogger silahkan mengunjungi blog saya tersebut dan kita dapat saling berbagi disitu... bebas untuk tukar-tukar pengalaman dan hal lainya...

Kunjungi ya kawan-kawan > > http://sangmerak.blogspot.com

terima kasih
"Anas Luqman"

Leaf Shape Template

Leaf Shape Blogger Template adalah sebuah template blogger yang banyak menggunakan efek atau gambar daun, sehingga saya beri nama Leaf Shape. Memiliki 2 kolom dan letak sidebar disisi kanan tempate. Di bagian header saya tambahkan image daun yang sedikit membentuk gambar abstrak, begitu pula dibagian footer-nya atau link kredit. Sedangkan disisi kanan atau sidebar, saya tambhakan juga efek daun sehingga membuatnya sedikit bervariasi.

Warna hitam, ya ini satu-satunya template warna gelap yang saya buat, sedikit berubah haluan karena saya sendiri sebenarnya anti sekali dengan warna gelap, tapi atas permintaan teman lewat email akhirnya saya gunakan warna hitam untuk Leaf Shape. Semoga tertarik untuk menggunakannya !

Cara Membuat Dan Mempercantik Blockquote

Ada pertanyaan dari salah seorang sobat pada postingan membuat navigasi horizontal 2 baris yang menanyakan tentang modifikasi blockquote. Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog. Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.

Blockquote Gambar

Sama seperti yang ada di blog ini, kode css-nya :

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4YhRWU8HT4W5KUcKFrDfUjWixqCF55y5MnBn8ipNoRU2rm9-ogwPXHejcOwysJkv5bE4gQWl1TVgn4qv25wc71EoRgFDGYDBYrYq-Be5wgk9GHUxlcBwJO5bROzpjv2PUSC9H0x_905c/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}

Hasilnya :

Keterangan :

#F9F9F9 adalah warna background.
padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

Blockquote Border dan Warna

Kode css :

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

Hasilnya :

Blockquote Tulisan Besar Pada Baris Pertama

Kode css :

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;

}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;

}
.post blockquote p:first-line {
font-variant: small-caps;

}

Hasilnya :

Blockquote Warna dan Model Tulisan

Kode css :

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

Hasilnya :

Berikut cara pemasangannya :

Login ke blogger.
Tuju Tata Letak.
Pilih Edit HTML.
Cari kode .post blockquote { ��dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
Jangan Lupa Simpan Template.

Mudah-mudahan bermanfaat ya.

Membuat Navigasi Horizontal 2 Baris

Sebelumnya saya sudah pernah membahas cara membuat navigasi horizontal, sama halnya dengan yang dulu, namun kali ini saya menambahkan navigasinya menjadi 2 baris. Contohnya bisa sobat lihat pada gambar berikut, dimana saya menggunakan navigasi 2 baris dengan warna yang berbeda dan plus widget search engine sebagai bonus.

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

Login ke blogger.
Masuk ke Tata letak.
Klik Edit HTML.
Sebaiknya backup template sobat terlebih dahulu.
Letakkan kode berikut sebelum kode ]]></b:skin>

/*-- Nav --*/

#nav {
width:980px;
float:left;
background:#444;
height:33px;
border-bottom:1px solid #fff;
padding:0;
}

#nav-left {
float:left;
display:inline;
width:700px;
}

#nav-right {
float:right;
display:inline;
width:200px;
}

#nav ul {
position:relative;
overflow:hidden;
font:1em verdana,Helvetica,sans-serif;
font-weight:700;
font-size:13px;
margin:0;
padding:0;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#f9f9f9;
text-decoration:none;
margin:0;
padding:9px 10px;
}

#nav ul li a:hover {
color:#B40404;
background-color:#fff;
margin:0;
padding:9px 10px;
}

#search {
background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
border:1px solid #b3b3b3;
float:right;
height:20px;
width:160px;
margin-top:5px;
margin-right:5px;
padding-top:2px;
}

* html #search {
margin-right:5px;
}

#search input {
font-family:Arial,Helvetica,sans-serif;
background:transparent;
border:0;
color:#000;
float:left;
font-size:12px;
width:120px;
padding-left:27px;
margin:0;
}

/*-- Nav2 --*/

#nav2 {
float:left;
display:inline;
width:980px;
background:#46040C;
height:30px;
clear:both;
margin:0 auto;
padding:0;
}

#nav2 ul {
position:relative;
overflow:hidden;
font:1em Verdana,Arial,Helvetica,sans-serif;
font-weight:500;
margin:0;
padding:0;
}

#nav2 ul li a,#nav2 ul li a:visited {
display:block;
color:#fff;
text-decoration:none;
margin:0;
padding:8px 10px;
}

#nav2 ul li a:hover {
color:maroon;
background-color:#fff;
margin:0;
padding:8px 10px;
}

#nav ul li,#nav2 ul li {
float:left;
list-style:none;
}
Kemudian cari kode yang mirip seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section>
</div>
Letakkan kode berikut tepat setelah kode diatas :

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML70' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<div id='search'>
<input id='search' maxlength='150' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='nav2'>
<b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav2'>
<ul>
<li><a href='http://www.blog-zone.info'>blogger news</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Ganti tulisan yang berwarna merah dengan link yang sobat ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 sobat isi.
Simpan Template.

Keterangan :

width:980px --->> lebar dari navigasi, sesuaikan dengan lebar template sobat.
width:700px --->> lebar dari navigasi utama (tidak termasuk widget search engine).
Contoh : jika sobat mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.
Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog sobat, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :

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

Semoga berhasil dan bermanfaat tentunya.

Memasang Widget Top Komentator Cloud

Mungkin sudah banyak sobat yang memasang widget top komentator, tapi tentunya dengan bentuk yang standard. Sama halnya dengan label cloud, widget top komentator ini juga berbentuk cloud atau menyerupai awan. Buat sobat yang menggunakan atribut nofollow, mungkin bisa berbagi sedikit backlink dengan memasang widget ini.

Dengan menggunakan atribut nofollow dan memasang widget top komentator ini, sobat tidak terlalu banyak memberikan backlink seperti halnya blog dofollow, tapi akan mengundang pengunjung untuk memberikan komentar sebanyak-banyaknya di blog sobat.

Widget ini saya dapatkan dari blogger sentral, sobat bisa mengunjungi langsung situsnya jika ingin tau lebih jelas. Dibawah ini cara pemasangan widget top komentatornya.

Login ke blogger.
Silahkan tuju ke Tata Letak.
Klik tab Elemen Halaman.
Tambah Gadget (Add Gadget) �-> pilih yang HTML/Javascript.
Kemudian masukkan kode script dibawah ini :


<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloggersentral.blogspot.com
&Exclusions=Anonymous,Greenlava
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
</div>

Keterangan :

Hapus tulisan yang berwarna merah jika sobat tidak ingin menampilkan jumlah komentar.
Silahkan ganti http://bloggersentral.blogspot.com dengan alamat url blog sobat tanpa diakhiri dengan slash ( / ).
Anonymous,Greenlava adalah nama komentator yang tidak ingin sobat tampilkan, biasanya nama pemilik blog, ganti saja dengan nama sobat (nama pada user blogger dan besar kecilnya huruf juga berpengaruh).
Angka 20 adalah banyak komentator yang ingin ditampilkan.
alphabet adalah urutan top komentator berdasarkan abjad atau huruf, silahkan ganti dengan "frequency" jika ingin mengurutkannya berdasarkan banyaknya komentar.

Semoga bisa bermanfaat, selamat mencoba !

sumber : http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html

Fialova Template

Fialova Blogger Template merupakan bahasa asing yang saya sendiri lupa diambil dari bahasa apa, artinya kurang lebih ungu. Baiklah kita lupakan saja tentang nama template ini, sedikit penjelasan tentang template ini : memiliki 3 kolom, dimana sidebar terletak disisi kanan semua, dengan ukuran kecil dan besar. Jelas sekali untuk warnanya adalah ungu, terdapat 3 kolom bagian footer juga, kemudian widget ready di bagian header dengan ukuran 468x60.

Template ini mempunyai fitur auto read more dengan panjang artikel yang cukup pendek dihalaman depan, saya rasa itu saja beberapa penjelasan mengenai Fialova, silahkan sobat lihat langsung pada demo-nya. Saya sangat senang jika sobat mau menggunannya.

Floating Box Cocok Untuk Adsense

Oh betapa kangenya Saya untuk mengupdate blog Saya yang agak gak keurus ini, dikarenakan minimnya ide-ide untuk menulis sebuah artikel untuk memperbarui posting di blog ini. Eh kok malah curhat ya, he. . he . . *Back To Topic* Membuat Floating Box yang biasanya dipasang di blogger yang biasanya diisi content Ads ini. Coba lihat deh Shoot layar yang aku ambil dari blog Saya yang Saya buat dengan niat iseng-iseng ini.

Coba kita lihat box yang berwarna kuning diatas, itulah element box floating yang akan tetap di pojok kanan atas jika scroll di geser-geser kebawah atau keatas.

Saya menemukan script ini bermula dari browsing-browsing untuk tips yang cocok untuk memasang adsense di blog dan akhirnya Saya menemukan script ini di Dynamicdrive dan saya akan mengulas ulang di blog Saya ini agar Anda dapat menggunakanya dengan mudah. Monggo..

Pertama yang Anda lakukan adalah Log In ke blogger lalu masuk menu "Layout" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian di Save dulu ukkay kawan.

Dan masuk pada bagian "Layout -> Page Elements"

Pilih tempat Gadget yang kamu ingini (terserah karena box ini akan melayang) dan klik "Add a gadget" Masukkan code dibawah ini

<div id="topbar">

MASUKKAN CODE SCRIPT ADS / LAINYA DISINI

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget yang kamu ingini.

Kalau sudah. . . SAVE deh...

Selesai..

Yapzz semoga bermanfaat nie tutorial dari pengalaman Saya.

Google Update PageRank

Hal yang di tunggu-tunggu blogger datang juga, setelah 3 bulan terhitung sejak tutup tahun 2009 google update pagerank. Setelah melakukan pengecekan, hanya 2 blog saya yang mengalami perubahan termasuk blog ini. Bagaimana dengan blog sobat, apakah mengalami perubahan?

Buat yang pageranknya naik, saya ucapkan selamat. Dan buat yang turun jangan kecewa. Naik pagerank jangan senang dulu, karena ini belum stabil. Bisa saja google melakukan update lagi dalam waktu dekat, karena hal ini pernah google lakukan tahun 2009 dengan mengupdate pagerank sebulan kemudian setelah update rutin 3 bulanan.

Sekali lagi saya ucapkan selamat buat yang pageranknya naik.

CSS Border Style

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

border-style: dotted
border-style: solid
border-style: groove
border-style: inset

border-style: dashed
border-style: double
border-style: ridge
border-style: outset

Berikut ini contoh dari border yang bisa sobat gunakan :

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

dotted dotted dotted dotted dotted

</div>

dotted dotted dotted dotted dotted

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

solid solid solid solid solid

</div>

solid solid solid solid solid

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

dashed dashed dashed dashed dashed

</div>

dashed dashed dashed dashed dashed

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

groove groove groove groove groove

</div>

groove groove groove groove groove

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

double double double double double

</div>

double double double double double

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

inset inset inset inset inset

</div>

inset inset inset inset inset

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

outset outset outset outset outset

</div>

outset outset outset outset outset

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

ridge ridge ridge ridge ridge

</div>

ridge ridge ridge ridge ridge

Border Campur Aduk

<div style="border-style:dotted dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

dotted dashed double outset

</div>

dotted dashed double outset

Keterangan :

border:5px adalah tebal dari border.
#08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
width:500px adalah lebar dari kotak.
padding:20px adalah jarak antara tulisan dengan border.
background:#FFF adalah warna latar.

Semoga bermanfaat.

Variasi List-Style-Type

Mungkin sebagian blogger belum banyak yang mengerti fungsi dari list-style-type. List-style-type sendiri berfungsi sebagai penanda bullet icon blog, sobat bisa melihat contohnya pada icon panah warna kuning yang ada di sidebar blog saya. Beberapa pertanyaan muncul yang menanyakan cara membuat icon warna kuning seperti di blog saya.

Saya pernah membahas sebelumnya di postingan cara memasang icon tab di sidebar blog, namun pada saat itu contoh yang saya gunakan menggunakan image icon dengan url atau icon yang sudah di simpan sebelumnya di hosting. Saya akan berikan beberapa kode dari list-style-type yang bisa sobat gunakan.

list-style-type: disc;

list-style-type: lower-greek;

list-style-type: circle;

list-style-type: hewbrew;

list-style-type: square;

list-style-type: armenian;

list-style-type: decimal-leading-zero;

list-style-type: georgian;

list-style-type: lower-roman;

list-style-type: cjk-ideographic;

list-style-type: upper-roman;

list-style-type: hiragana;

list-style-type: upper-alpha;

list-style-type: katakana;

list-style-type: lower-alpha;

list-style-type: hiragana-iroha;

list-style-type: none;

list-style-type: inherit;

Silahkan login ke blogger.
Tuju Tata Letak.
Klik Edit HTML.
Cari kode "list-style-type", jika list-style-type tersebut terletak di bagian css sidebar, maka yang akan sobat ubah adalah icon bullet pada sidebar.
Contohnya seperti ini :
#sidebar ul { padding:0; margin:0; color:#FFF }
#sidebar ul li { list-style-type:square; padding-left:5px; margin:8px 0 0 20px }
Ubah dan sesuaikan dengan keinginan sobat, contohnya di ubah menggunakan decimal-leading-zero, maka ganti hasilnya menjadi :
#sidebar ul { padding:0; margin:0; color:#FFF }
#sidebar ul li { list-style-type:decimal-leading-zero; padding-left:5px; margin:8px 0 0 20px }
Simpan Template.

Untuk list-style-type: square bisa sobat lihat pada bagian bawah blog ini. sobat bisa melihat icon kotak kecil yang tampil sebelum isi dari recent post di bawah.

Semoga bermanfaat.

Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Simple Style

Border-Radius : Membuat Garis Lengkung Dengan CSS

Negocios Template

Membuat Widget 3 Kolom Dibawah Header

Launching Blog : Sang Merak

Leaf Shape Template

Cara Membuat Dan Mempercantik Blockquote

Membuat Navigasi Horizontal 2 Baris

Memasang Widget Top Komentator Cloud

Fialova Template

Floating Box Cocok Untuk Adsense

Google Update PageRank

CSS Border Style

Variasi List-Style-Type

About Me

Followers

Sample Text

Sample text

Daily Categories

Test Footer 1

Test Footer

Comment

Stay connected

Random Post

Template Information

Test Footer

Ads 468x60px

Entri Populer

Social Icons

Blog Archive

Featured Posts

list-style-type: disc;	list-style-type: lower-greek;
list-style-type: circle;	list-style-type: hewbrew;
list-style-type: square;	list-style-type: armenian;
list-style-type: decimal-leading-zero;	list-style-type: georgian;
list-style-type: lower-roman;	list-style-type: cjk-ideographic;
list-style-type: upper-roman;	list-style-type: hiragana;
list-style-type: upper-alpha;	list-style-type: katakana;
list-style-type: lower-alpha;	list-style-type: hiragana-iroha;
list-style-type: none;	list-style-type: inherit;