Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!

Blogunuz için yazı yazmanın dışında görsel açıdan güzelleştirmeniz gerekir. Bu sayede ziyaretçilerin ilgisini çekebilir, blogunuzun görselliğini artırabilirsiniz. Ben de biraz araştırma yaptım ve araştırma sonucunda derlediğim 4 adet eklentiyi sizler için paylaşıyorum. Belki de aralarından hoşlandıklarınız olabilir ve kullanmaya başlayabilirsiniz. Haydi geçelim mi o eklentilere?

1. Filmleriniz İçin Puanlama

İzlediğiniz ya da yorumladığınız herhangi bir filmi ve diziyi bu eklenti sayesinde puanlayabilirsiniz. Ayrıca hemen altında da ufak bir açıklama yapabileceğiniz bu eklenti sizler için biçilmiş kaftan olacaktır.

• Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
• ]]></b:skin> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.

[/*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}] 

• Son olarak aşağıda vermiş olduğum kodu yazılarınızı yazdığınız bölümde bulunan HTML kısmına tıklayın ve istediğiniz yere yapıştırın.

[<div class="bs-review"> <div class="review-item"><div class="review-circle">Hardware<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">Design<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">Graphics<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">Sound<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>Summary</h4><span>HTC ONE X9 is another budget phone announced in 2016. This phone has got stylish looks and elegant design. This Smartphone’s body is averagely slim because the thickness is only 8mm which is good for grip. HTC ONE X9 is a 4G supported LTE phone with 5.5 inch capacitive touch screen.</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>Overall Score</span></div></div></div> </div>]

2. Mobil Uyumlu Paylaşım Butonları

Toplam paylaşım sayısının bulunduğu, mobil uyumlu olan ve bir o kadar da şık bir paylaşım butonlarına sahip olmak ister miydiniz? Ufak bir kod sayesinde sahip olabilirsiniz ayrıca buradaki siteye gidip kendinize göre düzenleyip de kullanabilirsiniz.

• Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına <data:post.body/> yazıp Enter tuşuna tıklayın.
• <data:post.body/> kodunun bir alt satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.

[<div class="don-share" data-style="icons" data-limit="4"> <div class="don-share-total"></div> <div class="don-share-facebook"></div> <div class="don-share-twitter"></div> <div class="don-share-google"></div> <div class="don-share-linkedin"></div> <div class="don-share-pinterest"></div> <div class="don-share-tumblr"></div> <div class="don-share-stumbleupon"></div> <div class="don-share-reddit"></div> <div class="don-share-hackernews"></div> <div class="don-share-buffer"></div> <div class="don-share-xing"></div> <div class="don-share-pocket"></div> <div class="don-share-fancy"></div> <div class="don-share-yummly"></div> <div class="don-share-scoopit"></div> <div class="don-share-weibo"></div> <div class="don-share-vk"></div> <div class="don-share-mailru"></div> <div class="don-share-odnoklassniki"></div> <div class="don-share-hatena"></div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script>]

Ayrıca şunu da belirteyim  <data:post.body/> kodu birden fazla bulunmaktadır. İlk denediğiniz yer olmazsa deneme yanılma ile diğer <data:post.body/> kodunun altına kodları yapıştırmayı deneyiniz.

3. Animasyonlu Popüler Yazılar

Göz alıcı bir animasyonla birlikte gelen ve minimalist tasarıma sahip alternatif bir popüler yazılar eklentisidir. Kullanmadan öncesi Popüler Yayınlar widget'ında küçük resim seçeneğinin aktif olmasına dikkat edin.

• Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
• ]]></b:skin> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.

[.sidebar .PopularPosts .item-content {font-family:Raleway;position: relative;float: left;max-height: 310px;width: 100%;text-align: center;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);font-size: 20px;margin: 0px auto;background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;} .sidebar .PopularPosts .item-content * {-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content img {max-width: 100%;position: relative;top: 0;left: 0;} .item-content .item-title {position: absolute;top: 50%;left: 30px;right: 30px;line-height: 1.6em;-webkit-transform: rotate(0deg) translateY(-50%) scale(1);transform: rotate(0deg) translateY(-50%) scale(1);-webkit-transform-origin: center 0;transform-origin: center 0;} .item-content .item-title a {top: 50%;letter-spacing: -1px;color: #ffffff;text-transform: uppercase;padding: 10px 0;margin: 0;font-weight: 400;} .item-content .item-title a:hover {color: #fff;} .item-content .item-title:before,.item-content .item-title:after {background-color: rgba(255, 255, 255, 0.8);width: 100%;height: 2px;position: absolute;content: "";display: block;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content .item-title:before {left: 0;top: 0;} .item-content .item-title:after {bottom: 0;right: 0;} .item-content:hover .item-title,.item-content.hover .item-title {-webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);transform: rotate(-29deg) translateY(-50%) scale(0.9);} .item-content:hover .item-title:before,.item-content.hover .item-title:before,.item-content:hover .item-title:after,.item-content.hover .item-title:after {width: 200%;} .sidebar .widget{clear:both} .sidebar .PopularPosts .item-snippet {display: none;} .sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child {width: 100%;max-height: 100%;opacity: 0.9;} .sidebar .PopularPosts ul li:nth-child(even) {margin-right: 2%;} .sidebar .PopularPosts ul li:nth-child(2) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(3) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(4) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(5) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(6) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(7) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(8) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(9) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(10) .item-content {font-size: 12px} .sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow: hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;} .sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 123px;object-fit: cover;padding: 0; }]

Daha sonra Kontrol Paneli'nde bulunan Yerleşim seçeneğine tıkladıktan sonra herhangi bir Gadget ekle seçeneğine tıklayın. Popüler Yayınlar widget'ını seçtikten sonra yukarıda da dediğim gibi küçük resim seçeneğini işaretleyip kaydedin.

4. Yazı İçerisinde HD Twitter İkonları

Blogunuzun her kısmında kullanabileceğiniz HD twitter ikonlarıdır. Yalnızca yüz ifadeleri ile sınırlı kalmayıp, yüzlerce ikonu da barındırmaktadır.

• Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına </body> yazıp Enter tuşuna tıklayın.
• </body> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.

[<script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/master/twemoji2a2.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>]

Örneğin yazı içerisine ikon eklemek istiyorsanız, buradan istediğiniz ikonun kodunu kopyalayıp yazının HTML kısmına yapıştırınız.

Son Sözler

Gönül ister ki, buraya onlarca eklenti yazayım ve sizlerle paylaşayım, sizler için daha iyi olsun. Fakat hepsini bir anda paylaşırsam başka günlere ne kalır? Bu sebeple azar azar sizlerle paylaşacağımdan emin olabilirsiniz. Peki sizler bu eklentiler hakkında neler düşünüyorsunuz, beğendiniz mi?

Blogger'da Youtube Videoları Mobil Uyumlu Hale Nasıl Getirilir?

Birçok Blogger kullanıcısı yazı içeriğinde Youtube videoları kullanmış ve kullanmaya devam etmektedir. Fakat bu videolar mobil uyumlu olmadığı taktirde, görünümü göze hitap etmeyen bir şekilde olacaktır. Bu sebeple göze hitap etmesi için mobil uyumlu hale getirmek gerekir. Aşağıda vereceğim birkaç satırlık kodu gerekli yere yapıştırdığınız zaman videolarınız mobil uyumlu hale gelecektir. Anlatmaya çalıştığım olayı aşağıdaki ekran görüntülerinden daha iyi anlayabilirsiniz.

Görselden de anlaşıldığı üzere Youtube videoları mobil uyumlu olmadığı zaman, Youtube görseli tam olarak çıkmıyor ve en-boy oranında ise orantısızlık oluşuyor. Mobil uyumlu hale getirdiğiniz taktirde bu sorunu ortadan kaldıracak ve daha iyi görüntüleyebileceksiniz. Yazımı çok fazla uzatmadan kısaca yapmanız gerekenlere geçeyim ben.

• Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayıp gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
• ]]></b:skin> kodunu bulup bir üst satırına aşağıda vermiş olduğum CSS kodunu yapıştırın.

[/* CSS Only */ .post-body iframe{width:100%!important;} @media screen and (max-width:960px){ .post-body iframe{max-height:90%}} @media screen and (max-width:768px){ .post-body iframe{max-height:75%}} @media screen and (max-width:600px){ .post-body iframe{max-height:60%}} @media screen and (max-width:480px){ .post-body iframe{height:auto!important;max-height:auto!important}}]

• Son  olarak Şablonu Kaydet seçeneğine tıklayın

Böylece Youtube videolarını mobil uyumlu görüntüleyebilirsiniz. Varsa sorularınız sorabilirsiniz. Ayrıca yapamayanlar için de yardımcı olurum. Peki sizler bu eklenti hakkında neler düşünüyorsunuz?

Blogger'da Logo veya Blog Başlıklarınıza Efekt Ekleme Eklentisi

Uzun zamandan beri Blogger için eklenti paylaşmadım galiba. Geçen gün bir Arap blogunda karşılaştığım muhteşem eklentiden bahsetmek istedim. Kendim hemen kullanmaya başladım ve sizlerin de beğeneceğinizi düşünerek hemen paylaşmaya karar verdim. Pek önemli bir eklenti olmasa da bloguna azıcık görsellik katmak isteyenler için iyi bir eklenti olduğunu düşünüyorum.

Belki de fark edeniniz vardır. Logonun (biliyorum çok dandik) üzerine geldiğinizde şekil şukul bir eklenti beliriyor. İşte ben de bu eklentiden bahsedeceğim, beğenen varsa da kendi blogunda kullanır. Hemen belirteyim, çok fazla uğraş gerektirecek bir şey de değil. Aşağıda bulunan birkaç satır kodu gerekli yere yapıştırın ve kullanın. Lafı çok fazla uzatmadan yapmanız gerekenlere geçeyim ben.

• Blogger Kontrol Paneli'nde sol tarafta bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayıp CTRL+F tuşlarına tıklayın. 
• Gelen arama kısmına ]]></b:skin> yazıp Enter'a tıklayın ve ]]></b:skin> kodunun bir üst satırına aşağıda görmüş olduğunuz kodu yapıştırın.

[#header h1 a:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}#header img:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}  }]

Son Sözler

Yapacaklarınız bu kadardı. Artık blog başlıklarınızın veya logolarınızın mouse ile üzerine gelindiğinde hoş bir animasyon belirecektir. Animasyonun nasıl olduğunu öğrenmek için benim logomun üzerine gelmeniz yeterlidir. Umarım bu küçük eklentiyi sizler de beğenmişsinizdir. Az daha unutuyordum, blog başlıklarınızdan kastım H1 yani blogunuzun adının olduğu başlıktır. Fikirlerinizi yorum olarak belirtebilirsiniz ya da beğendiyseniz aşağıdaki butonlara tıklayarak paylaşabilirsiniz.

Blogger'da Yazıların İlk Harfi Gazetelerdeki Gibi Nasıl Yapılır?

Her blog yazarı yazılarını ziyaretçiye daha güzel göstermek ister. Şimdi bahsedeceğim şey ise Blogger'da yazıların ilk harfini büyük göstermek olacaktır. Bildiğiniz üzere gazetelerde bulunan haberlerin ilk harfi çoğunlukla daha kalın ve büyük olur. Bu büyük harfler "drop caps" ya da "first letter (character)" olarak bilinirler. Şu anda benim de kullanmış olduğum bu eklenti sayesinde yazılarınız daha çok dikkat çekecektir diye düşünüyorum. Özellikle hikaye, şiir vb. yazılar yazanlar için faydalı bir eklenti olacaktır. Hemen aşağıya bir örnek görsel ekliyorum.

Drop Caps Örneği

Nasıl Yapılır?

• Harfi drop caps olarak göstermek istediğiniz yayının düzenleme kısmına geliniz.
• Yayın düzenleme kısmının üst kısmında bulunan "HTML" seçeneğine tıklayınız.

Yayının HTML kısmı

• Aşağıda vermiş olduğum HTML kodunu yazınızın ilk kelimesinin ilk harfini sildikten hemen sonra yapıştırınız.

Yapacağınız işlemler bu kadardı. Artık yazınızın ilk harfi istediğiniz gibi gözükecektir. HTML kodundan hemen sonra ise kod içerisinde düzenlenebilir yerlerden bahsedeceğim.

[<span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">A</span>]

Kod İpuçları 

1. float: left; (Bu kısım büyük gösterilecek harfin sağda mı yoksa soldamı olduğunu belirtmek içindir. Yani arap blog yazarları için "left" yerine "right" yazması gerekir.)

2. font-size: 70px; (Bu kısım büyük gösterilecek harfin boyutu ile ilgilidir. px değerini isterseniz yükseltebilir ya da alçaltabilirsiniz.)

3. font-weight: bold; (Bu kısım büyük gösterilecek harfin stili ile ilgilidir. Kalın harf için "bold", eğik harf için "italic", altı çizili olması için "underline" yazabilirsiniz.)

Diğer kısımlarda büyük görünen harfin diğer harf ile arasındaki boşluk değerleri vs. var. Onları çok da kurcalamaya gerek yoktur herhalde. Yapamadığınız durumlarda çekinmeden söyleyebilir, sorularınızı sorabilirsiniz.

Blogger ve Diğer Platformlar İçin Harika Hizmetler Sağlayan GetSiteControl ve Kullanımı

GetSiteControl, aralarında Blogger'ın da bulunduğu birçok platform için faydalı eklentiler sağlamaktadır. İletişim formu, soru-cevap, anket, duyuru, e-posta üyeliği, takip etme butonları, paylaşma butonları ve online chat eklentilerini barındıran bu site, her Blogger kullanıcısının arzu ettiği bir sitedir. GetSiteControl basit arayüzü, kullanım kolaylığı, eklenti istatistiklerini panelden önizleme, eklentileri düzenleyebilme gibi birçok işleme de olanak sağlıyor.

Eklentileri ister popup olarak isterseniz de sabit olarak görüntüleyebilirsiniz. Tüm bu eklentileri kullanabilmeniz için; siteye kayıt olup giriş yaptıktan sonra size verdiği Javascript kodunu gerekli yere yapıştırmak ve panelden istediğiniz eklentiyi eklemektir. Şu anda blogum üzerinde kullandığım anket eklentisini de bu siteden elde ettiğimi belirtmek isterim.

Kurulumu ve Kullanımı

• İlk olarak GetSiteControl resmi sitesine gidiniz.

GetSiteControl

• Sağ üst tarafta bulunan "Sign up" butonuna tıklayıp kayıt olunuz.
• Giriş yaptıktan sonra ise karşınıza aşağıdaki gibi bir panel gelecektir.

GetSiteControl Yönetici Paneli

• Ardından "Site settings" seçeneğine ve daha sonra "Install" seçeneklerine tıklayınız.
• Karşınıza gelen kodları kopyalayınız ve ardından Blogger panelinden Şablon > HTML'yi Düzenle seçeneklerine tıklayınız.
• Kodların bulunduğu alana bir kez tıkladıktan sonra Ctrl+F tuşlarına basıp aramaya </body> yazıp Enter'a tıklayınız.
• </body> kodunun bir üst satırına kopyaladığınız kodları yapıştırınız.

• [message]
• ##exclamation## Dikkat
• İşlemleri yapmadan öncesi ne olur ne olmaz blogunuzun yedeğini almanızda fayda vardır. 

Artık kodlarla işinizi bitirmiş bulunmaktasınız. Şimdi yapmanız gereken şey, GetSiteControl panelinize gitmektir.

• Daha sonra sol üst kısımda bulunan "Create widget" ve daha sonra oluşturmak istediğiniz widget seçeneklerine tıklayınız.

"Create widget" butonuna tıkladıktan sonra karşınıza aşağıdaki gibi bir sayfa gelecektir. Bu sayfadan oluşturmak istediğiniz eklentinin yazı tipi, rengi, yazısı, konumu, pop-up ya da sabitliği, hangi süre içerisinde çıkacağı vb. birçok özelliğini değiştirebilirsiniz. Bu sayfadan sonra, yukarıdaki "Content", "Success page" gibi seçeneklere tıklayarak düzenlemeye devam edebilirsiniz. İşlemleriniz bittiğinde ise aşağıda bulunan "OK" butonuna basınız ve gelen ekrandan eklentiyi aktif etme düğmesine tıklayınız.

GetSiteControl Eklenti Düzenleme

• [message]
• ##globe## Widget Çevirileri
• Subscribe: e-posta üyeliği, Contact: iletişim formu, Promo: Duyuru, Survey: anket, Follow: takip etme butonları, Share: paylaşım butonları, Chat: online mesajlaşma

Son Sözler

Umarım sizler de bu servisi beğenmişsinizdir. Yapamadığınız ya da sıkıntı yaşadığınız bir yer olduğunda sormaktan çekinmeyiniz. Birçok Blogger kullanıcısının bu eklentiden faydalanacağını düşünüyorum. Sizler de düşüncelerinizi yorum olarak belirtebilirsiniz.

Blogger İçin Sayfa Kaydırma Efekti

Bu eklenti sayesinde blogunuzda sayfayı kaydırırken hoş bir efekt belirecektir. Böylece hem ziyaretçi hem de sizler adına blogunuz hoş bir görünüme kavuşacaktır. Ufak bir eklenti gibi görünse de görsellik adına zengin bir eklentidir. İsterseniz benim blogumda herhangi bir sayfayı aşağıya-yukarıya kaydırarak efektin nasıl olduğuna göz atabilirsiniz. Çok uzatmadan bu efekti nasıl blogunuzda kullanabileceğinizi anlatayım.

• Blogger panelinde sol tarafta bulunan menüden önce "Şablon" daha sonra "HTML'yi Düzenle" seçeneklerine tıklayınız.
• Kodların bulunduğu alana bir defa tıkladıktan sonra "Ctrl+F" tuşlarına tıklayarak arama yerine "</body>" yazıp "Enter" tuşuna tıklayınız.
• "</body>" kodunun bir üst satırına aşağıda vermiş olduğum kodları yapıştırıp kaydediniz.

[<script type='text/javascript'>
      //<![CDATA[
      !function(e){jQuery.scrollSpeed=function(n,o){var t=e(document),i=e(window),l=e("html, body"),r=i.height(),u=0,a=!1;return window.navigator.msPointerEnabled?!1:void i.on("mousewheel DOMMouseScroll",function(e){return a=!0,(e.originalEvent.wheelDeltaY<0||e.originalEvent.detail>0)&&(u=u+r>=t.height()?u:u+=n),(e.originalEvent.wheelDeltaY>0||e.originalEvent.detail<0)&&(u=0>=u?0:u-=n),l.stop().animate({scrollTop:u},o,"default",function(){a=!1}),!1}).on("scroll",function(){a||(u=i.scrollTop())}).on("resize",function(){r=i.height()})},jQuery.easing["default"]=function(e,n,o,t,i){return-t*((n=n/i-1)*n*n*n-1)+o}}(jQuery);
      $(function() {
        jQuery.scrollSpeed(100, 800);
      });
      //]]>
</script>]

Anlatımıma rağmen hala yapamadıysanız bana ulaşabilirsiniz. Böylece sizlere elimden gelen yardımı edeceğimden şüpheniz olmasın. Peki sizlerin bu eklenti hakkında düşünceleriniz nedir?

Blogunuz İçin SumoMe Paylaşım Butonları

SumoMe, blogunuz için mobil dostu ve görselliğin tavan olduğu paylaşım butonlarıdır. En iyi özelliklerinden birisi de toplam paylaşım sayısını göstermesidir. Bu paylaşım butonlarını basit bir şekilde Blogger veya diğer platformlara entegre edebilirsiniz. Ben de yabancı bir blog sayesinde ulaştım. Bakalım sizler beğenecek misiniz?

Geçen günlerde kullanmaya başladığım bu paylaşım butonlarını fark edeniniz elbet vardır. Ben de görüp beğenenler için paylaşayım dedim. Son olarak belirtmek isterim ki tamamen ücretsizdir.

PC ve Laptop'da yukarıdaki gibi gözükmektedir. İsterseniz konumunu kendiniz belirleyebilirsiniz. (sol tarafta bulunan paylaşım butonları)

Mobil cihazlarda ise yukarıdaki gibi gözükmektedir. Dilerseniz butonların konumunu kendinize göre belirleyebilirsiniz.

Bu eklenti ile paylaşım butonlarının yerlerini değiştirebilir (Örn. Facebook en başa yanına ise Twitter gelecek şekilde düzenleyebilirsiniz), boyutlarını küçültüp büyültebilir, diğer platformların paylaşım butonlarını ekleyebilirsiniz. Yazıyı çok fazla uzatmadan Blogger'a nasıl ekleyebileceğinizi anlatayım.

Nasıl Yapılır?

• İlk olarak https://sumome.com/ adresine giderek kayıt olup giriş yapınız.
• Karşınıza gelen sayfadaki ADD NEW SITE seçeneğine tıkladıktan sonra gelen boşluğa sitenizin adresini yazıp ADD SITE seçeneğine tıklayınız.
• Karşınıza gelen kodları kopyalayınız.
• Blogger panelinde soldaki menüden Şablon daha sonra HTML'yi Düzenle seçeneklerine tıklayınız. Kodların bulunduğu alana bir kez tıkladıktan sonra Ctrl+F tuşlarına tıklayarak aramaya <head> yazıp Enter tuşuna tıklayınız.
• <head> yazan yerin bir alt satırına kopyalamış olduğunuz kodu yapıştırınız.
• Şablonu Kaydet seçeneğine tıklayarak işlemleri bitiriniz.

İşlemler henüz bitmiş değil, şimdi de diğer yapacaklarınıza geçelim.

• Blogunuzun ana sayfasına gidiniz.
• Daha sonra sağ en üstte yer alan küçük mavi kısma tıklayınız.
• Kayıt olduğunuz adres ile şifreyi yazarak giriş yapınız.
• Karşınıza gelen ekrandaki Sumo Store seçeneğine tıklayınız.
• Biraz aşağıya kaydırıp Share olan uygulamaya tıklayınız.
• Sağ üstte bulunan Free seçeneğine tıkladıktan sonra gelen Open seçeneğine tıklayınız.
• Karşınıza gelen 4 paketten Free olanını seçiniz.

Böylelikle paylaşım butonlarını Blogger üzerinden kullanabileceksiniz. Fakat siz gerekli düzenlemeleri Settings, Layout gibi seçeneklere tıklayarak yapabilirsiniz. İşlemler bittiğinde sağ üstteki X işaretine tıklayabilirsiniz.

Son Sözler

SumoMe paylaşım butonlarını yapamayıp yapmak isteyenler için yardımcı olurum. Peki sizler bu paylaşım hakkında ne düşünüyorsunuz? Anlatımı biraz uzun oldu değil mi?

Blogger İçin Mobil Chrome Uygulamasında Sekme Rengini Özelleştirme

Başlığa bakınca pek de bir şey anlaşılmıyor galiba, ama ne yapayım yazacak başka bir şey bulamadım. Her neyse yazıyı okudukça ne anlatmak istediğimi anlayacaksınız.

Mobil cihazlarda en popüler tarayıcı Google Chrome'dur. Herhangi bir siteyi, blogu vs. ziyaret ettiğiniz zaman en üstte yer alan sekme bilindiği üzere beyaz renktedir. Fakat bazı blog veya sitelerde sekme renginin farklı olduğunu fark etmişsinizdir. Eğer aranızda mobil Chrome uygulamasından blogumu ziyaret eden varsa fark etmiştir ki lacivert renktedir. 

İsterseniz ben bir ekran görüntüsü paylaşayım;

Bu eklenti için baya bir araştırma yapmış ve olumsuz bir sonuç almıştım. Geçenlerde şans eseri yabancı bir blogdan bulup kullanmaya başladım. Sizce de böyle daha güzel gözükmüyor mu? Yapmanız gereken 1 satır bile olmayan kodu gerekli yere yapıştırmak ve istediğiniz rengi belirlemektir. Yazıyı çok fazla uzatmadan nasıl yapıldığını anlatayım.

<meta content='#2c3e50' name='theme-color'/>

Nasıl Yapılır?

Yukarıdaki HTML kodunu kopyalayınız. Daha sonra blogunuzun kontrol panelindeki soldaki menüden Şablon ve daha sonra HTML'yi Düzenle seçeneklerine tıklayınız. Kodların bulunduğu alana bir kez tıklayıp Ctrl+F tuşlarına basınız. Arama yerine <head> yazdıktan sonra Enter tuşuna tıklayınız. Son olarak <head> kodunun bir alt satırına yukarıdaki kopyaladığınız kodu yapıştırdıktan sonra Şablonu Kaydet seçeneğine tıklayınız.

Kod İpuçları

Kod içerisinde bulunan #2c3e50 renk kodunu istediğiniz renk kodu ile değiştirebilirsiniz.

Son Sözler

Görsellik açısından biraz da olsa iyileştirme yapmak isteyenler için güzel bir eklentidir. Bu sayede temanıza göre sekme renginizi belirleyerek bir bütün halinde gösterebilirsiniz. Konu ile ilgili varsa sorularınız, sorabilirsiniz.

Blogger Sayfa Kaydırma Çubuğu Nasıl Değiştirilir?

Blogun hemen sağ tarafında bulunan ve normalinden biraz farklı görünen kaydırma çubuğudur. Bildiğiniz üzere kaydırma çubukları gri renkte ve biraz kalın bir şekilde gözükmektedir. Birkaç satır kodla bu çubuğun rengini, kalınlığını vs. değiştirebilirsiniz.

Nasıl Yapılır?

• Blogger panelinde soldaki menüden Şablon > HTML'yi Düzenle seçeneklerine tıklayınız.
• Kodların bulunduğu alana bir kez tıkladıktan sonra Ctrl+F tuşlarına tıklayınız. Daha sonra arama yerine ]]></b:skin> yazıp Enter tuşuna tıklayınız.
• ]]></b:skin> kodunun bir satır üzerine aşağıda vermiş olduğum CSS kodunu yapıştırınız ve Şablonu Kaydet seçeneğine tıklayınız.

CSS Kodu

 ::-webkit-scrollbar {
width:4px;
height:4px;
}
::-webkit-scrollbar-track {
background:#FFF;
}
::-webkit-scrollbar-thumb {
background:#1abc9c;  
}
::-webkit-scrollbar-thumb:hover {
}
::-webkit-scrollbar-thumb:active {
background:#2c3e50;  
}

CSS Kodu Kavramları

height: çubuğun kalınlığıdır ve width değeri ile aynı olmak zorundadır.
#FFF: çubuğun dışında kalan beyaz renktir.
#1abc9c: çubuktaki turkuaz renktir.
#2c3e50: çubuk basılı tutulduğunda görünen  lacivert renktir.
Dilerseniz, renk kodlarını ve px değerlerini istediğiniz gibi değiştirebilirsiniz.

Blogger İletişim Formu Sayfası Nasıl Yapılır?

Bir blog veya web sitesinde olması gereken şeylerden birisi de iletişim formudur. Bu sayede ziyaretçiler blog yazarıyla iletişim kurarak, soru, istek, şikayet gibi durumlarını bildirebilirler. Sizler de bir iletişim sayfası yapmak istiyorsanız, yazımı okumaya devam ediniz. 

Nasıl Yapılır

• Blogger ana sayfasından iletişim sayfası eklemek istediğiniz bloga tıklayınız.
• Soldaki menüden Sayfalar seçeneğine ve daha sonra Yeni Sayfa seçeneğine tıklayınız.
• Karşınıza boş bir yazı yazma sayfası gelecektir. Yukarıdaki Oluştur seçeneğinin yanındaki HTML seçeneğine tıklayınız.
• Son olarak aşağıda vermiş olduğum HTML Kodunu karşınıza gelen boş yere kopyalayıp yapıştırınız. Bu sırada başlık olarak İletişim yazabilirsiniz.
• Yayınla seçeneğine tıklayarak da sorunsuz bir şekilde kullanabilirsiniz.

HTML Kodu

<span style="font-family: &quot;trebuchet ms&quot; , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> E-posta Adresi</span><span style="color: #666666; font-weight: 700;"> <span style="color: #1abc9c; font-family: &quot;trebuchet ms&quot; , sans-serif; font-size: x-small; font-weight: bold;">zorunlu</span></span>

<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span style="font-family: &quot;trebuchet ms&quot; , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> İletilmek İstenen Mesaj</span><span style="color: #666666; font-weight: 700;"> <span style="color: #1abc9c; font-family: &quot;trebuchet ms&quot; , sans-serif; font-size: x-small; font-weight: bold;">zorunlu</span></span>

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />  

<div style="max-width: 100%; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager {display:none;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#1abc9c;box-shadow:0 0 5px #1abc9c}

#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #1abc9c 0%, #1abc9c 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}

#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#1abc9c;}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width:100%;margin-top:48px;}

.contact-form-error-message-with-border {background:#1abc9c;border:none;box-shadow:none;color:#fff;padding:5px 0;}

.contact-form-success-message {background:#1abc9c;border:none;box-shadow:none;color:#fff;}

img.contact-form-cross {line-height:40px;margin-left:5px;}

</style>

Blogger'a Youtube Tarzı Sayfa Yüklenme Çubuğu

Blogger'a Youtube Tarzı Sayfa Yüklenme Çubuğu

Bu eklenti sayesinde az da olsa blogunuza görsellik katabilirsiniz. Böylece bu küçük eklenti ile blogunuzu daha güzel gösterebilirsiniz. 

Bildiğiniz üzere Youtube sitesine giriş yaptığınız sırada sitenin en üst tarafında kırmızı bir çubuk belirir ve sayfa yüklenene kadar eş zamanlı olarak ilerler. Dikkat ettiniz mi pek bilmiyorum ama mutlaka blogunda böyle  bir yüklenme çubuğu olmasını isteyen birisi olmuştur diye düşünüyorum. Böylece ufak bir araştırma sonucunda benzeri bir eklentiyi buldum ve sizlerle paylaşmaktayım. 

Şimdi bu eklentiyi nasıl blogunuza uygulayabileceğinize geçelim;

• Blogger ana sayfasına giderek eklentiyi uygulamak istediğiniz bloga tıklayınız.
• Soldaki menüden Şablon ve daha sonra HTML'yi Düzenle seçeneklerine tıklayınız.
• Karşınıza gelen kodların bulunduğu alana bir kez tıkladıktan sonra aynı anda Ctrl ve F tuşlarına basınız.
• Sağ üst tarafta çıkan arama yerine </head> yazdıktan sonra Enter tuşuna tıklayınız.
• </head> kodunun bir üst satırına aşağıda vermiş olduğum Javascript kodunu yapıştırınız.
• Daha sonra arama yerine ]]></b:skin> yazıp Enter tuşuna basınız.
• ]]></b:skin> kodunun bir üst satırına aşağıdaki CSS kodunu yapıştırınız.
• Şablonu Kaydet seçeneğine tıkladıktan sonra sorunsuz bir şekilde bu eklentiyi kullanabilirsiniz.

Javascript

<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>

CSS 

.pace .pace-progress { background: #e14e42; position: fixed; z-index: 2000; top: 0; left: 0; height: 2px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } .pace-inactive { display: none; }

NOT: CSS kodu içerisindeki #e14e42 renk kodunu istediğiniz gibi değiştirebilirsiniz.