LinkWithin, aynı kategoriye/etikete veya etikete ait gönderileri getirerek ilgili hikayeleri görüntülemek için hem Wordpress hem de Blogger'a entegre edilebilen mükemmel bir eklentidir. Gerçekten hızlı yüklenir ve okuyucuların daha fazla okuma etkileşimini artırmaya ve sayfa görüntülemelerini artırmaya yardımcı olur. Aylar önce, varsayılan stil sayfasını geçersiz kılarak bu eklentinin görünümünü ve hissini özelleştirebileceğiniz bir yöntem sunmuştuk. !important özelliğini kullanarak herhangi bir Sınıf veya Kimliği geçersiz kılabilirsiniz.
Sunduğumuz özel CSS kodu, kullanıcıların metin başlığının yazı tipi renklerini değiştirmesine, küçük resim boyutlarını, kenarlıkları düzenlemesine ve bir resimle arka planı değiştirmesine olanak tanıyordu. Bugün, blogumuzda kullanılan linkWithin ilgili gönderi widget'ının Siyah renk teması için stil sayfasını paylaşıyorum. Basit stiller ve efektler kullanarak kodladık. Ziyaretçileri daha fazla çekiyor ve bazı şık ve temiz öneriler sunuyor. Adımlar gerçekten kolay, o yüzden onu şık hale getirelim!
Özel kod olmadan gadget, şu kadar donuk ve gri görünüyor:
1. Adım: LinkWithin Widget'ını Ekleme
Bu görünümü uygulamak için öncelikle linkWithin widget'ını blogunuza yüklemeniz gerekir. Aşağıdaki eğitim, bu eklentiyi BlogSpot bloglarınıza eklemenize yardımcı olacaktır. Eklenti yalnızca gönderi sayfalarında görünecek ve ana sayfada gizli kalacaktır.
Okuyun: Blogger'a linkWithin Kurulumu
2. Adım: Siyah Görünümü Uygulama
Şimdi, siyah görünümü yüklemek ve widget'ın tüm donuk ve gri görünümünü değiştirmek için aşağıdaki kolay adımları izlemeniz yeterli.
- Blogger > Şablon'a gidin
- Şablonunuzu yedekleyin
- HTML'yi Düzenle > Devam'a tıklayın
- Şu stil etiketini arayın:
5. Hemen üstüne aşağıdaki büyük kod parçasını yapıştırın:
/*---Related Posts---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;
margin: 0 0 20px 0!important;
}
.linkwithin_outer {
margin: 1px 0px !important;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5Nj2fYK6Ja975Xj9bMEgDmP40mLJ62zxze64hKXRNzjaxBD6uAAXAi4CE4Xjfpcj1kU3J0Tpx4n0jpdLl5uPLS9Tr6tuPMA5BzFq_weKGlDxTU2bkUxKplHwiLSP3K7n6XuDYj_0CWI/s400/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
height: 260px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
.linkwithin_inner {
width:590px!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;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}
.linkwithin_posts a {
border-right:0px!important;
margin: 10px 0px 10px 20px !important;
}
.linkwithin_posts a:hover {
border-right:0px!important;
margin: 10px 0px 10px 20px !important; background:none!important;
}
#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 {
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 70px !important;
margin-right: 20px !important;
overflow: hidden;
background:#666!important;
}
.linkwithin_img_0:hover {
border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
width: 100px !important;
height: 70px !important;
}
.linkwithin_title {
color: rgb(255, 255, 255) !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 {
text-decoration:underline!important;
}
6. Kaydet'e tıklayın ve işte bu kadar!
Kusursuz çalıştığını görmek için herhangi bir gönderi sayfanızı ziyaret edin. Yeni renklerin tadını çıkarın. :)
Post a Comment