Cara Mempercantik Tampilan Related Posts Linkwithin
Diposting oleh
Unknown
Label:
Trick Blog
di
18.44
Cara mempercantik related post linkwithin
- linkwithin memang sudah menjadi banyak bahasan para blogger dalam hal
pemberian jasa related post secara gratis dan perlu sobat ketahui
related post yang menggunankan gambar sudah teruji ampuh agar pengunjung
menklik post yang terdapat pada related post. related post merupakan
salah satu SEO tips untuk meningkatkan jumlah pageview blog dan sudah terbukti ampuh untuk mengurangi bounce rate .
jika pada artikel saya yang sebelumnnya cara membuat related post dari
linkwithin yang saya kali ini saya bahas adalah trik untuk mempercantik
tampilan related post agar lebih menarik dan terlihat cantik di mata
pengunjung
NOTE: Sebelum melakukan langkah ini harap membaca part 1 cara membuat related post linkwithin
Related Posts Linkwithin Series
Part2: Cara Memeprcantik tampilan related post linkwithin
Memasang css untuk mempercantik related post linkwithin
mungkin sobat sudah tahu bahwa tampilan related post bawaan dari
linkwithin tidak terlihat menarik dan elegan. pada tahap dibawah ini
saya akan memberikan sentuhan CSS untuk lebih mempercantik tampilan related post dari yang biasa.
Related post linkwithin dengan efek gambar berputar
1. login blogger
2. template >> edit Html
3. cari kode ]]></b:skin>
4. copy css dibawah ini dan paste tepat diatas ]]></b:skin>
/*---Related Posts by depermana12---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer {
margin: 1px 0px !important;
height: 260px;
width:598px!important;
padding-top: 10px !important;
}
.linkwithin_inner {
width:598px!important;
}
.linkwithin_text {
margin: 0px !important;
padding: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif;
font-size: 1.35em;
color: rgb(255, 255, 255);
font-weight: 700;
line-height: 1.35em;
background-color: #242729;
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
box-shadow: 0px 2px 4px #666;
}
.linkwithin_posts a {
border-right:0px!important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
background:none!important;
}
#linkwithin_logo_0 {display:none;
}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 100px !important;
margin-right: 10px !important;
overflow: hidden;
background:#000!important;
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.linkwithin_img_0:hover {
cursor:pointer;
border: 1px solid #666!important;
-moz-transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);
-o-transform:scale(1.2) rotate(360deg);
-ms-transform:scale(1) rotate(-360deg);
transform:scale(1.2) rotate(360deg);
-moz-box-shadow:4px 4px 4px #1eff25;
-webkit-box-shadow:4px 4px 4px #1eff25;
box-shadow:41px 4px 4px #1eff25;
border-radius:5px;
moz-border-radius:5px
webkit-border-radius:5px
}
.linkwithin_img_0 div {
width: 100px !important;
height: 100px !important;
}
.linkwithin_title {
color: #666 !important;
font-size: 1.1em !important;
display: block;
padding:0px 10px 0px 0px !important;
font-weight: 700 !important;
line-height: 1.45em !important;
margin-top: 10px !important;
font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
text-decoration:none!important;
width:120px!important;
}
.linkwithin_title:hover{
color:#333;
}
Note :
- tulisan yang berwarna biru adalah lebar keseluruhan dari related posts
Anda sedang membaca artikel tentang Cara Mempercantik Tampilan Related Posts Linkwithin dan anda bisa menemukan artikel ini dengan url https://mafiaboypc.blogspot.com/2013/07/cara-mempercantik-tampilan-related.html. Jika anda ingin menyebarluaskan artikel ini mohon cantumkan link sumbernya! Terima kasih.
Posting Komentar