Bu blogda şimdiye kadar yayınlanmış tüm gönderilerin bağlantılarını gösteren, otomatik olarak güncellenen bir içerik tablosu sayfası oluşturduğumu gördünüz. Bu widget, tüm gönderilerinizi kategori bazında görüntüler ve gerçekten zaman kazandırır. Daha önce Blogger Hileleri sayfasına yeni bağlantıları manuel olarak ekliyordum, ancak bu harika widget'ı öğrenir öğrenmez hemen kullanmaya başladım. Bu widget ayrıca ziyaretçilere hangi gönderilerin yeni, hangilerinin eski olduğunu da gösterecek. Blogunuzun görünümüne uyması için CSS'yi değiştirdim.
Lütfen önce bir Demo İçindekiler Sayfası inceleyin ve widget'ı neden bu kadar heyecan verici bulduğunuzu görün.
Blogunuz için bir İçindekiler sayfası oluşturmak için aşağıdaki adımları izleyin
- Git Blogger > Design > Edit HTML
- Şablonunuzu yedekleyin
- Bukodu bulun ]]></b:skin>
- Ve hemen üstüne aşağıdaki CSS kodunu yapıştırın,
Kodu buraya /*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}yapiştir...
6. Give Your new Page a relevant title like “XYZ Table Of Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.mybloggertricks.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
Şimdi http://www.mybloggertricks.com adresini Blog URL'nizle değiştirin ve kaydet'e tıklayın. Yeni sayfanızı görüntüleyin ve güzel bir açılır menü efektiyle güzel bir İçindekiler Tablosu görün.
Varsayılan olarak, Kategori arka planını aşağıda gösterildiği gibi mavi ve etkin olmayan modda koyu gri olarak görünecek şekilde etkin renk modunda tuttum.
Aktif modun rengini değiştirmek isterseniz, #9dc2e7 ve #438cd2 değerlerini değiştirmeniz yeterlidir. Burada #9dc2e7 daha açık bir tonu, #438cd2 ise daha koyu bir tonu ifade eder. Dolayısıyla, kullanmak istediğiniz renk ne olursa olsun, #438cd2 değerini tercih ettiğiniz renkle, #9dc2e7 değerini ise tercih ettiğiniz rengin daha açık bir tonuyla değiştirmeniz yeterlidir.
Renk Oluşturma Aracımızı renk seçimi yaparken faydalı bulacaksınız.
İşte bu kadar!
Umarım gerçekten faydalı bulursunuz. Anlaşılmayan bir şey olursa, yardım istemekten çekinmeyin. Hoşça kalın! :)
Post a Comment