TUTORIAL: customize linkwithin

 Cik Tomo kite tanya beta,

Maka di sini beta menjawab. 

Pada anda yang belum memilik linkwithin boleh klik SINI untuk dapatkan widget tersebut. 

Bila anda dapat widget tu, dia simple as kotak. so untuk dia bulat macam ni,

nampak lain kan dari asal? 

and step untuk jadikan dia bulat ni. 

1. Pergi ke >>TEMPLATE >> EDIT HTML

2. Expandkan <b:skin>....<b:skin> anda 

3. CTRL+F cari  ]]></b:skin>  tag

4. Paste kan code di bawah, atas ]]></b:skin>

.linkwithin_div {

background: #EEEEEE; /* Background color for the related posts container */

padding: 0 10px;

border-top: 1px solid #DBDBDB;  /* Top border for the related posts container */

border-bottom: 1px solid #DBDBDB;  /* Bottom border for the related posts container */

}

.linkwithin_text {

font-family: Cambria,Georgia,sans-serif;

font-size:18px; /* Size for the related posts title */

color:#898989; /* Color for the related posts title */

}

a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {

display:none;

}

.linkwithin_posts {

width: 500px !important; /* Width for the related post containers  */

}

.linkwithin_posts a {

border: 0 !important;

padding-right: 10px !important;

}

.linkwithin_posts a:hover {

background: #F5F5F5 !important; /* Background color on mouseover */

}

.linkwithin_img_0 {

background: #F5F5F5;

border: 1px solid #C1C1C1;

padding: 2px !important;

transition:all .2s linear;

 -o-transition:all .5s linear;

-moz-transition:all .2s linear;

-webkit-transition:all .2s linear;

}

.linkwithin_img_0:hover {

background: #ffffff;

padding: 2px !important;

opacity:.6;

filter:alpha(opacity=60)

}  

.linkwithin_img_0 div, div.linkwithin_img_0,

.linkwithin_img_1 div, div.linkwithin_img_1,

.linkwithin_img_2 div, div.linkwithin_img_2,

.linkwithin_img_3 div, div.linkwithin_img_3,

.linkwithin_img_4 div, div.linkwithin_img_4,

.linkwithin_img_5 div, div.linkwithin_img_5,

.linkwithin_img_6 div, div.linkwithin_img_6,

.linkwithin_img_7 div, div.linkwithin_img_7,

.linkwithin_img_8 div, div.linkwithin_img_8,

.linkwithin_img_9 div, div.linkwithin_img_9,

.linkwithin_img_10 div, div.linkwithin_img_10,

.linkwithin_img_11 div, div.linkwithin_img_11,

.linkwithin_img_12 div, div.linkwithin_img_12,

.linkwithin_img_13 div, div.linkwithin_img_13,

.linkwithin_img_14 div, div.linkwithin_img_14,

.linkwithin_img_15 div, div.linkwithin_img_15,

.linkwithin_img_16 div, div.linkwithin_img_16,

.linkwithin_img_17 div, div.linkwithin_img_17,

.linkwithin_img_18 div, div.linkwithin_img_18,

.linkwithin_img_19 div, div.linkwithin_img_19,

.linkwithin_img_20 div, div.linkwithin_img_20 { 

-webkit-border-radius: 100px; 

-moz-border-radius: 100px; 

border-radius: 100px; 

}

.linkwithin_title {

color: #242424 !important; /* Color for titles */

font-family: Cambria,Georgia,sans-serif;

font-size: 12px !important; /* Font size of posts titles */

line-height: 24px !important;

text-align:center;

text-decoration: none;

}

.linkwithin_title:hover {

color: #000 !important; /* Color of posts titles on mouseover */

}

5. Save template.

Tara~ siap! 

Takut x jadi? awak2 boleh preview dulu. 

senang x? 

Kalau korang rasa tak faham, boleh rujuk, 

CR: tutorial sebenar daripada helpblogger. 

-SEKIAN-

aienienka