Yeni bir Blog tasarımı eklentilerinden biri olan özelleştirilmiş Blogger Blog Pager gezinme seçeneklerini ister bir sonraki yayına geçişte ister Ana sayfaya dönmek için kullanılan ve son olarak bir öğnceki yayına geçmek isterseniz işte tamda size göre olan bir özelleştirilmiş Blogger Blog Pager gezinme seçeneklerini biridir.
Şimdi özelleştirilmiş Blogger Blog Pager gezinme seçeneklerini blog sitenize eklemek istiyorsanız aşağıdaki adımları takip edin.
Öncelikle Blogger hesabınıza giriş yapın ve eklemek istediğiniz blog sitenizin yönetim panelinde bulunan Tema sekmesine tıklayın. Açılan sayfada Tema editör sayfanıza erişmek için HTML'yi Düzenle seçeneğine tıklayın.
Not: Aşağıdaki adımları blog sitenizde uygulamadan önce temanızın yedeğini alın veya mevcut kodları tamamen silmeden bilgisayarınız Not Defterine kopyalayın.
Adım #1
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<b:includable id='nextprev'>
.................................
.................................
.................................
</b:includable>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bu bulmuş olduğunuz kodu aşağıdaki kod ile değiştirmeniz gerekmektedir.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><svg viewBox='0 0 448 512'><path d='M448 208v96c0 13.3-10.7 24-24 24H224v103.8c0 21.4-25.8 32.1-41 17L7 273c-9.4-9.4-9.4-24.6 0-34L183 63.3c15.1-15.1 41-4.4 41 17V184h200c13.3 0 24 10.7 24 24z' fill='#1c7ed6'/></svg></a>
</span>
<b:else/>
<span class='newer-link-frist-page' id='blog-pager-newer-link'><svg viewBox='0 0 448 512'><path d='M448 208v96c0 13.3-10.7 24-24 24H224v103.8c0 21.4-25.8 32.1-41 17L7 273c-9.4-9.4-9.4-24.6 0-34L183 63.3c15.1-15.1 41-4.4 41 17V184h200c13.3 0 24 10.7 24 24z' fill='#1c7ed6'/></svg></span>
</b:if>
<span id='home-link'>
<h5><a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a></h5>
</span>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><svg viewBox='0 0 448 512'><path d='M0 304v-96c0-13.3 10.7-24 24-24h200V80.2c0-21.4 25.8-32.1 41-17L441 239c9.4 9.4 9.4 24.6 0 34L265 448.7c-15.1 15.1-41 4.4-41-17V328H24c-13.3 0-24-10.7-24-24z' fill='#1c7ed6'/></svg></a>
</span>
<b:else/>
<span class='older-link-last-page' id='blog-pager-older-link'><svg viewBox='0 0 448 512'><path d='M0 304v-96c0-13.3 10.7-24 24-24h200V80.2c0-21.4 25.8-32.1 41-17L441 239c9.4 9.4 9.4 24.6 0 34L265 448.7c-15.1 15.1-41 4.4-41-17V328H24c-13.3 0-24-10.7-24-24z' fill='#1c7ed6'/></svg></span>
</b:if>
</div>
<div class='clear' />
</b:includable>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Adım #2
Aşağıdaki CSS kodlarını tema editör sayfanızda bulunan </head> kodunun bir satır üzerine ekleyin.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<style>
/*<![CDATA[*/
#blog-pager,.blog-pager{
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
#blog-pager-newer-link,#home-link,#blog-pager-older-link{
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.newer-link-frist-page svg,.older-link-last-page svg{
opacity:0.5
}
#blog-pager-older-link a,#blog-pager-newer-link a,#home-link a,.older-link-last-page,.newer-link-frist-page{
background:rgba(0,0,0,0.1);
height:35px;
padding:0 8px;
border-radius:2px;
overflow:hidden
}
#blog-pager a{
font-size:14px;
color:#495057;
font-weight:bold;
text-transform:uppercase;
justify-content:center;
align-items:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
#home-link{
margin:0 16px
}
#home-link a{
padding:0 16px
}
#blog-pager svg{
width:28px;
height:28px;
vertical-align:middle
}
/*]]>*/
</style>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
0 Yorumlar