Blogger Eklentileri Değerlendirme Oluşturma Kodu
Blogger ile oluşturmuş olduğunuz film ve ya teknoloji içerikli blogunuzda rahatlıkla kullana bileceğiniz değerlendirme eklentisi.
Bir çok içerik oluşturucusunun tercihi olan blogger bazı eksikleri olmasına rağmen çok başarılı tema ve eklentiler sayesinde popülerliğini hala korumakta. Bu gün sizlerle paylaşacağım Blogger Eklentisi ile oluşturduğunuz içerikleri kullanıcılarınıza görsel şölen ve açıklamalar ile suna bileceksiniz. Peki bu eklenti nerelerde kullanılır. Hangi içerik türlerinde kullanabilirsiniz. Eğer bir film, fragman, dizi vb içerikleriniz varsa, teknoloji, cep telefonu modelleri, tablet, bilgisayar, televizyon vb içeriklerinizi derecelendirmek için kullana bileceksiniz.
Bu Blogger Değerlendirme Eklentisi Nasıl kuracağımızı anlatayım.
Blogger kontrol paneline ulaşıyoruz, sırasıyla Tema --> Özellikler --> HTML'yi Düzenle dedikten sonra CTRL+F tuşu ile ]]></b:skin>
kodunu aratıyoruz. Aşağıda paylaşmış olduğum kodları ]]></b:skin> hemen üzerine eklemeniz ve kaydet diyerek ilk aşamayı başarı ile bitirmiş olduğumuz anlamına gelmektedir. /*Review Widget */ .BSReview-summary{position:absolute;z-index:2;bottom:0;font-size:14px;left:14px;right:14px} .BSReview-summary{opacity:1} .BSReview-summary p,.BSReview-summary h3{margin:0} .BSReview-summary h3{font-size:20px} .BSReview-summary p{padding:10px} .BSReview-summary a{color:#FFF} .bs-review{border:1px solid #E7E7E7;margin-bottom:15px} .review-item,.item-summary:first-child{border-bottom:1px solid #E7E7E7} .review-item{padding:12px} .review-item:last-child{border-bottom:0} .rev-value-outer{background-color:rgba(0,0,0,0.10);overflow:hidden;box-shadow:inset 0 0 4px rgba(0,0,0,0.2)} .rev-value{height:10px;background-color:#E74C3C;box-shadow:0 0 5px rgba(0,0,0,0.3)} .review-circle{padding-bottom:5px;overflow:hidden;font-size:14px} .review-circle span{font-weight:400;float:right} .review-box {width:75%} .review-box{display:review-box;vertical-align:middle;margin-top:0;margin-bottom:0;float:left;margin:10px 0;margin-right:2%} .review-wrapper .review-box{display:block; width:20%} .item-summary{overflow:hidden;text-align:justify} .item-summary h4{margin:0 0 10px;display:inline-block;padding:3px 8px;background-color:#E74C3C;color:#FFF;text-transform:uppercase;font-size:16px} .item-summary span{display:block} .review-circle-place{padding:10px 12px;vertical-align:top} .review-wrapper{border-left:1px solid #E7E7E7;width:140px;text-align:center;font-weight:600;padding:10px 10px 20px;vertical-align:bottom;background-color:rgba(0,0,0,0.03)} .rev-score{font-size:50px} .srev-place{position:absolute;top:0;right:0;color:#E74C3C;font-size:30px;font-weight:600;width:50px;height:50px;text-align:center;line-height:50px;background-color:rgba(255,255,255,0.50)} .items .srev-place{right:auto;left:0;font-size:17px;width:30px;height:30px;line-height:30px} .c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto,auto,auto,auto)} .c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid #E74C3C;width:0.84em;height:0.84em;clip:rect(0em,0.5em,1em,0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)} .pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} .c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 15px 10px;border:9px solid #dcdcdc;border:9px solid rgba(0,0,0,0.1)} .c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} .c100 > .rev-score{position:absolute;width:100%;z-index:1;left:-0.28em;top:-0.28em;width:3.35em;line-height:3.35em;font-size:0.3em;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out} .c100:after{position:absolute;top:0.08em;left:0.08em;display:block;content:" ";-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:transparent;width:0.85em;height:0.85em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in} .c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em,1em,1em,0.5em);top:-0.074em;left:-0.074em} .c100:hover{cursor:default} .c100:hover > .rev-score{color:#E74C3C;-webkit-transform:scale(1.35)} .c100:hover:after{top:0.04em;left:0.04em;width:0.92em;height:0.92em} .top-revscrore{float:left;width:150px;text-align:center;height:150px;margin-right:10px;font-weight:600}Bu eklentinin içeriklerinizde görünmesi için aşağıda paylaştığım kodları istediğiniz yazıya düzenlemeleri gerçekleştirerek eklemeniz yeterli olacaktır.
<div class="bs-review"> <div class="review-item"><div class="review-circle">Düzenle 1<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div> <div class="review-item"><div class="review-circle">Düzenle 2<span>7</span></div><div class="rev-value-outer"><div class="rev-value" data-value="7" style="width:70%"></div></div></div> <div class="review-item"><div class="review-circle">Düzenle 3<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div> <div class="review-item"><div class="review-circle">Düzenle 4<span>9</span></div><div class="rev-value-outer"><div class="rev-value" data-value="9" style="width:90%"></div></div></div> <div class="item-summary"><div class="review-circle-place review-box"><h4>Açıklama</h4><span>Bu alanı açıklama olarak kullana bilirsiniz. Değerlendirmeyi hangi kriterlere göre gerçekleştirdiğinizi paylaşa bilirsiniz. </span></div> <div class="review-wrapper review-box"><div class="overall-inner"><div class="c100 p75"><div class="rev-score">8.5</div><div class="slice"><div class="fill"></div><div style="transform: rotate(270deg);" class="bar"></div></div></div><span>Puan Ortalaması</span></div></div></div> </div>Kodlar üzerinde yapacağınız değişiklikler kolaylaştırmak için başlıklarını Düzenle 1, Düzenle 2 Düzenle 3, Düzenle 4 olarak ayarladım.
Puanlama bölümdünde yapacağınız düzeltmeler ise içeriğiniz için vermiş olduğunuz Düzenle 1 alanına diyelim ki 9 puan vereceksiniz, kod içerisinde şu an "8" ile oluşturulmuş alanı ve yanında ki "%80" olan alanı "%90" olarak düzeltmeniz yeterli olacaktır.
Tüm değerlendirme puanlarının ortalamasını yayınladığımız alanı vermiş olduğunuz puanların 4'de bölümü ile ulaştığınız rakamı yazmanız gerekecek.
Değerlendirme Oluşturma Kodu ile ilgili düşüncelerinizi ve ya sorularınızı yorum bölümünü kullanarak bize ilete bilirsiniz.
Uyarı 1
İçerik bölümüne ekleyeceğiniz kodlarda düzenleme yapmanız gerekiyor. Yapmanız gereken düzenlemeri aşağıda açıklıyorum.
Uyarı 2
Bu eklentiyi her içeriğiniz için farklı düzenlemeler yaparak kullanabilirsiniz.
Uyarı 3
Eklentimizi kodlarınız arasına entegre etmeden önce lütfen site kodlarınızın yedeğini almayı unutmayın.
- Blogger Site Hızlandırma Kodları
- Mobil Sayfa Özel Reklam Alanı
- Bedava Backlink Alınacak Siteler
- Seo Uyumlu Link Yapısı Nasıl Olur
Bu eklentiler sayesinde blogger siteniz daha modern, daha hızlı ve seo açısından artılar kazandıracak. Eklentilerin kurulumu hakkında sormak istediğiniz soruları her eklentinin yorum bölümünü kullanarak bize iletirseniz en kısa sürede sizle iletişime geçip yardımcı olacağız.
