Blog sitelerinde bulunan Disqus yorum formuna yapılan yorumlar, Disqus en son yapılan yorumlar Widget'ında görüntülenir. Şimdi bu Widget'ı blog sitelerinin sağ üst köşesinde bulunan çan singesine tıklandığında slayt efekti açılan ve kapatma simgesine tıklandığında yine slayt efekti ile kapanan Widget tasarımını paylaşıyorum.
Disqus veya Blogger yorum formlarında bulunan yorumları blog ziyaretçileri merak ediyor. Blog yayınlarına yapılan yorumları daha basit bir şekilde takip edebilmek için aşağıdaki adımları takip edin.
Disqus Son Yorumlar Widget'ı Nasıl Eklenir?
Birinci adım: Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.
İkinci adım: Aşağıdaki CSS kodlarını şablon editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.
CSS
<style type='text/css'>
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
.cover-body{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.cover-body h4{font-size:18px;float:left;color:#fff}
.cover-body img{float:right}
.viewport-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.viewport-show:hover{background:#2e9eff;animation:rubberBand 1s}
#drawer-nav{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s}
#drawer-nav.active{right:0}
#viewport.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}
#drawer-nav .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#drawer-nav .icon-cancel{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff}.disqus-logo {height:20px;width:110px}
#drawer-nav .icon-cancel:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#777;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#5cb767;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#687a86}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color: #546673;;line-height:1.5}
#RecentComments .dsq-widget-item pre{position:relative;background:#f8cf83;color:#222;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#222}
#drawer-nav.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width:1366px){#drawer-nav{width:35%}}
@media screen and (max-width:640px){#drawer-nav{width:100%}#drawer-nav .icon-cancel{background:#494E58;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#drawer-nav .close-text{display:none}}
</style>Üçüncü adım: Aşağıdaki her iki kodu da şablon editör sayfasında bulunan </body> kodunun bir satır üzerine sırasıyla ekleyin.
HTML ve javaScript
<a class='viewport-show' href='javascript:;'><svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z" fill="#fff"/></svg></a>
<div id='viewport'/>
<div id='drawer-nav'>
<a class='icon-cancel' href='javascript:;' title='Kapat'>×<span class='close-text'>Kapat</span></a>
<div class='cover-body'><h4>Yorumlar</h4><img class='disqus-logo' alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5QydB2r3Edi_LlDL7Wrmb-gH5J7xKW918dvSedV5aF_7anTj1OFqbD_hjwM3OL8gVhRm9g5VksUorq-KASr8LiHfOq4WFaNoP-dAIYrQmKN19OGqFyXMowSx09h1K9Yys3uuIXW_qDPKH/s1600/Disqus.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<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=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>
</div>
</div>Yukarıdaki kod içerisinde belirtilen yere kullanmış olduğunuz Disqus adınızı ekleyin.
| Değerler | Açıklama |
|---|---|
| num_items=20 | Görüntülenen yorum sayısı |
| hide_mods=0 | Yönetici yorumlarını gizlemek için 0 yerine 1 ekleyin |
| hide_avatars=0 | Avatarları gizlemek için 0 yerine 1 ekleyin |
| avatar_size=32 | Avatar resim boyutlandırma |
| excerpt_length=180 | Görüntülenen yorumların karakter sayısı |
javaScript
<script >
$(function(){$(".viewport-show").on("click",function(){$("#drawer-nav").addClass("active").focus()});$(".icon-cancel").on("click",function(){$("#drawer-nav").removeClass("active")})});
$(function(){$(".viewport-show").on("click",function(){$("#viewport").addClass("active").focus()});$(".icon-cancel").on("click",function(){$("#viewport").removeClass("active")})});
</script>Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin. Aşağıdaki butona tıklayarak Widget eklentisini inceleyebilirsiniz.
Bu yazımızda blog siteleri için slayt tasarımlı Disqus son yorumlar Widget'ını ve nasıl kurulduğu ile ilgili bilgiler paylaştık. Yeni eklentileri de en kısa sürede blog sitemizde yayınlayacağım. Bu yazımızda paylaşmış olduğumuz Widget tasarımı ile ilgili görüşlerinizi yorum yaparak paylaşmanızı bekliyorum.
Yorum Gönder