Tutorial | Ubah Rupa Linkwithin jadi Lebih Comel

Assalamualaikum, and hi.

Jadi harini Mai mahu ajar cara tukar bentuk linkwithin yang membosankan tu, petak je kan, untuk jadi lebih cute bulat, dah tu boleh ejas pula tukar colour border image tu lagi. Nak tahu tak camne? Teruskan pembacaan anda, ecewahhh.

Untuk yang belum ada linkwithin, aku cadangkan baik korang letak. Linkwithin ni macam magnet yang bertugas nak bagi readers blog korang stay lebih lama kat dalam blog sebab nanti dorang mungkin akan tertarik tengok post lain yang dorang nampak terpapar kat linkwithin tu kan. Haa nampak tak pentingnya linkwithin ni, so kalau nak pasang korang klik SINI dulu okay.


Haaa comel kan. Nak tak macam tu?
Okay kalau dah ada linkwithin dalam blog tu bolehlah teruskan untuk mengedit bentuknya pula. Senang je tau caranya. 

Dashboard > Template > Customize > Advance > Add CSS
Pastekan code dibawah dalam ruang itu.

.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 posts container */
}
.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 */
}
Dashboard > Template > Edit Html
Lepastu korang cari code ni:
]]></b:skin>
Lepastu paste code kat bawah pada  bahagian ATAS / SEBELUM code yang korang cari tadi tu.

.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 posts container */
}
.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 */
}
Good luck~! Aku harap korang buat menjadilah ye. Kalau jadi jangan lupa informkan aku korang guna cara yang mana satu, tau, thank you. Muah muah.
Previous
Next Post »

12 Comments

Click here for Comments
Wani Sukarno
admin
10/30/2016 8:14 AM ×

Kalau nak buat macam ni ..kod lama kena buang dulu ke

Reply
avatar
Noor Maizan
admin
10/30/2016 9:17 AM ×

Tak perlu usik coding asal. cuma tambah saja. :)

Reply
avatar
Unni Anje
admin
10/30/2016 10:17 AM ×

cara 1 paling mudah..wah. ty

Reply
avatar
10/30/2016 12:59 PM ×

Salam singah Mai
Wah macam best je
Nak kena belajar dulu lah ni
Orang lama lambat loading sikit Mai hehe

Reply
avatar
10/30/2016 3:33 PM ×

wow.... terbaik sharing ni. dah lama cari. yang basic tu tak lawa. yang terbaru ni lawa. thanks ya sobat. haha

Reply
avatar
Noor Maizan
admin
10/30/2016 4:13 PM ×

hihih senang kan...

Reply
avatar
Noor Maizan
admin
10/30/2016 4:14 PM ×

takpa slow2 akak, hihihi, senang aje ni

Reply
avatar
Noor Maizan
admin
10/30/2016 4:14 PM ×

kan bosan kan design lama, hihihi.

Reply
avatar
ayunie ramli
admin
10/30/2016 9:26 PM ×

Template mek skang ni ade rasenya :)

Reply
avatar
Noor Maizan
admin
10/30/2016 11:39 PM ×

senanglah kalau mcm tu. hihi

Reply
avatar
11/02/2016 2:10 PM ×

Memang comel pun..
Tapi kak sha tak pandai sangat nak ubah suai nie.. hehehe..

Reply
avatar
anzra rizal
admin
11/02/2016 2:27 PM ×

yunk jadi hehehe tq for tutorial

Reply
avatar

Tinggalkan pendapat/nota/surat cinta/amaran/soalan pada saya. Jika soalan saya akan menjawabnya, Jika nota cinta maka saya akan melawat blog anda semula.
Komen berbaur rasist, provokasi & lucah tidak akan dipublish. ConversionConversion EmoticonEmoticon