Blogger ve Wordpress Disqus Son Yorumlar Eklentisi - Bu yazımızda çekici tasarımlı ve hızlı yüklenen Disqus son yorumlar widget'ini Blogger bloguna ve Wordpress web sitesine ekleme ile ilgili basit ipuçları paylaşacağım. Bu widget ziyaretçilerinize blogunuzda yapılan yorum sohbetleri hakkında bilgi verir. Bu sitenizin en son Disqus yorumlarını bir sayfada, bir yayında veya widget'te görüntülemenize olanak tanır. Blogunuz çok aktifse ve soru, görüş ve öneri gibi bir çok konuda ilgili yayınına yapılan yorumlar ziyaretçilerin ilgisi çekecektir.
Blogger ve Wordpress Web Sitelerine Disqus Son Yorumlar Widget'ı Nasıl Eklenir?
Son yorum, yorumlar ile popüler yayınları ve yorum ekleyen kullanıcıları bir araya getiren Disqus widget kombinasyonunu eklemek için aşağıdaki adımları takip edin.
Blogger için Disqus Son Yorumlar Widget Eklentisi
1- Blogger'a Disqus son yorumlar widget'ini eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Yerleşim > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada aranan kodları bulmak için CTRL+F arama kombinasyonunu kullanın.
2- Aşağıdaki CSS kodlarını blogunuzun şablon kodları arasında bulunan </head> konun bir satır üzerine ekleyin ve şablonu kaydedin.
<style type="text/css">
#disqus_recent_comments_widget ul.dsq-widget-list::-webkit-scrollbar-track {
background: #eee;
}
#disqus_recent_comments_widget ul.dsq-widget-list::-webkit-scrollbar-thumb {
background: #bdbdbd;
transition: all 400ms ease-in-out;
border-radius: 2px;
}
#disqus_recent_comments_widget ul.dsq-widget-list::-webkit-scrollbar {
width: 12px;
height: 12px;
}
#disqus_recent_comments_widget.dsq-widget {
border-radius: 2px;
padding: 0;
max-width: 300px;
margin: 60px auto;
text-align: center;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
#disqus_recent_comments_widget {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
}
#disqus_recent_comments_widget ul.dsq-widget-list {
text-align: left;
max-height: 400px;
overflow: auto;
}
#disqus_recent_comments_widget img.dsq-widget-avatar {
margin: 3px 10px 7px 0;
width: 32px;
height: 32px;
padding: 0;
float: left;
border-radius: 3px;
clear: both;
display: block
}
#disqus_recent_comments_widget p.dsq-widget-meta {
clear: both;
font-size: 80%;
margin-top: 5px;
font-weight: 400
}
#disqus_recent_comments_widget p.dsq-widget-meta a {
display: inline-block;
width: 48%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #aaa
}
#disqus_recent_comments_widget p.dsq-widget-meta a:hover {
color: #f19595
}
#disqus_recent_comments_widget li.dsq-widget-item {
margin: 0;
padding: 5px 5px 5px 10px;
list-style-type: none;
clear: both;
border-bottom: 1px solid #eee;
color: #f19595;
font-weight: 600
}
#disqus_recent_comments_widget li.dsq-widget-item:last-child {
border-bottom: none
}
#disqus_recent_comments_widget a.dsq-widget-user {
display: table;
color: #2e9fff;
font-weight: 600;
}
#disqus_recent_comments_widget a.dsq-widget-user:hover {
color: #999;
}
#disqus_recent_comments_widget span.dsq-widget-comment {
display: block;
clear: both;
margin-top: 5px;
}
#disqus_recent_comments_widget .dsq-widget-comment p {
display: inline-block;
font-size: 92%;
margin: 0;
font-weight: 400;
color: #444;
max-width: 100%;
}
.dsq-widget-comment a {
color: #65bc9c;
}
#disqus_recent_comments_widget .dsq-widget-item pre {
position: relative;
background: #ffe4ad;
padding-top: 0;
border-radius: 4px;
transition: all .3s
}
#disqus_recent_comments_widget .dsq-widget-item pre:hover {
background: #ffe4ad;
}
#disqus_recent_comments_widget .dsq-widget-item pre code {
color: #908575;
font-size: 82%
}
#disqus_recent_comments_widget .dsq-widget-item pre:before {
content: '';
position: absolute;
padding: initial;
font-size: initial;
text-indent: initial;
left: initial;
color: initial;
top: 0;
right: 0;
width: 1.2em;
height: 1.2em;
background-color: #ebd099
}
#disqus_recent_comments_widget .dsq-widget-item pre:after {
content: '';
font-size: initial;
padding: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 1.2em 1.2em 0;
border-color: transparent #fff transparent transparent
}
</style>3- Aşağıdaki HTML+javaScript kodlarını eklemek için blogunuzun kumanda panelinde bulunan Yerleşim > Gadget ekle > HTML/javaScript ekle yolunu takip ederek bir widget oluşturun. Oluşturulan widget içerisine aşağıdaki HTML+javaScript kodlarını ekleyin ve kaydedin.
Disqus Son Yorumlar Tasarımı 1
<div id="disqus_recent_comments_widget" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggerekibi.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#disqus_recent_comments_widget a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>Disqus Son Yorumlar Tasarımı 2
<div id="disqus_recent_comments_widget" class="dsq-widget">
<script type="text/javascript" src="http://bloggerekibi.disqus.com/recent_comments_widget.js?num_items=12&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=100"></script>
</div>Disqus Son Yorumlar Eklentisi Yapılandırma Bilgileri - Aşağıdaki açıklamaları verilen kodlar yukarıdaki javaScript kodları içerisinde bulunmaktadır.
| Kod Adı | Varsayılan Ayarlar | Açıklama |
| num_items | 5 | Gösterilmesi gereken öğe/yorum sayısı (Tüm öğeleri içerir). |
| hide_mods | 0 | Moderatör yorumlarını gizlemek için '1' olarak ayarlayın. |
| excerpt_length | 100 | Yorumların metin uzunluğunu ayarlama. |
| hide_avatars | 0 | Avatarları görüntülemek istemiyorsanız '1' olarak ayarlayın. |
| avatar_size | 32 | Kullanıcı avatar boyutu ayarlama. |
Wordpress için Disqus Son Yorumlar Widget Eklentisi
Disqus, Wordpress web sitelerinde eklenen yorumları denetleme imkanı da sunan muazzam bir eklenti, ancak Wordpress için eksik olan şey son yorumlar widget'ini kenar çubuğunda görüntüleme imkanının olup olmadığı. WordPress sitesine Disqus son yorumlar eklentisini eklemek için aşağıdaki adımları takip edin.
WordPress'de Disqus Son Yorumlar için Widget Oluşturma ve Kurulumu
1- WordPress yönetim panelinde eklenti kurulumu yaparak yada /wp-content/plugins/ dizinine klasör yükleyerek kurulum yapabilirsiniz. Sitenize eklentiyi kurmak için yönetim panelinizin sol tarafında bulunan yönetici menüsünden Eklentiler > Yeni Ekle tıklayın. Eklenti yükleme sayfasında "Disqus latest comments addon" arayın ve bu eklentiyi indir/yükle ve etkinleştirin.
2- Yine yönetici menüsünden Yorum > Disqus Latest Comments tıklayın. Açılan sayfada "Disqus Son Yorumlar Seçenekleri" yer almaktadır. Bu sayfada aşağıdaki ayarları/seçenekleri sitenize uygun olarak değiştirin;
- Disqus adınızı (Disqus shortname) ekleyin.
- Avaratarı (Hide avatars) görünür yada gizli yapma.
- Avatar görüntü boyutunu (Avatar size) ayarlama.
- Widget üzerinde görünmesini istediğiniz yorum uzunluğunu (Excerpt length) belirleyin.
- Önbelleğe alma (Bypass Cache).
- Disqus kullanıcı sayfalarını yeni pencerede (target='_blank') açma.
3- Disqus son yorumlar eklentisini görünmesini istediğiniz sayfa, yayın veya widget'ınıza [disqus-latest] kodunu ekleyin. Bu kodu nerye eklerseniz Disqus son yorumlarını eklediğiniz yerde görünecektir.
4- Disqus son yorumlar eklentisinin daha düzenli görünmesi için özel CSS stil kodlarınızı oluştururken aşağıdaki örnek CSS stil kodlarından faydalanabilirsiniz.
.dsq-widget-list {
display: block;
}
.dsq-widget-item {
position: relative;
}
.dsq-widget-item:hover {
background: #f6f6f6;
}
.dsq-widget-avatar {
display: block;
}
.dsq-widget-user {
display: block;
}
.dsq-widget-comment {
display: block;
}
.dsq-widget-meta {
display: block;
}
.dsq-widget-metaa:nth-child(1) {
font-weight: 800;
}Örnek sayfada Disqus son yorumlar eklentisi için çok fazla düzenleme yapmadık, sadece eklentinin görüntülenmesi için örnek olarak ekledik. Siz yukarıdaki CSS kodlarını kullanarak daha düzenli bir widget oluşturabilirsiniz.
Yorum Gönder