Follow Blog Tips Blogger
Ketika kamu mengKlik link tersebut maka
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)
-Webkit-Border-Radius (Untuk Safari)
Border-Radius (Support Opera 10.5)
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.
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.
/* –- 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/AVvXsEj4Y2sRFtcV2N4_nijPKx9DnfRvDwBGpZYU75MxXWQrixXrSS4fYXBXmB9f02EzSWU_DcAwAbt1dUqx2a1V7XSr_Ww-xDGiUpdtU0rG0d3VLKKahp2R4bMygnmfLNW5GfEzwvdoqKADFHYj/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;
}
<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>
<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>
Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.
Download:
Download Avira Premium 10
Download Avira Security Suite 10
Keys:
Update: Key Avira Premium 10 Valid Hingga 05-04-2011
Download Key Avira Security Suite 10
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 :
Hasilnya :
Keterangan :
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 :
Hasilnya :
Blockquote Tulisan Besar Pada Baris Pertama
Kode css :
}
.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 :
Hasilnya :
Berikut cara pemasangannya :
Mudah-mudahan bermanfaat ya.
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.
/*-- 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 :
<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.
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.
<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<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>
<!-- Top Commentators Cloud End -->
Keterangan :
Semoga bisa bermanfaat, selamat mencoba !
sumber : http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html