<!DOCTYPE html>
<HTML>
<head>
<title>Blogger AB Çerez Bildirim Çubuğu</title>
<style type='text/css'>
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
background-color:#f5f5f5;
font-family:'Roboto', sans-serif;
margin:0;
padding:0
}
* {
margin:0;
padding:0
}
a{
text-decoration:none
}
.cookie-choices-info{
background-color:#fff!important;
position:fixed!important;
line-height:normal!important;
left:0!important;
right:0!important;
bottom:0!important;
font-family:inherit!important;
box-shadow:0 -3px 16px -3px rgba(0,0,0,.75);
-webkit-transform:translateZ(0)
}
#cookieChoiceInfo .cookie-choices-inner{
margin:auto!important;
padding:16px!important;
text-align:center!important
}
.cookie-choices-info .cookie-choices-text{
font-size:12px!important;
color:#222!important;
margin-bottom:16px;
line-height:1.5
}
.cookie-choices-buttons{
margin-left:0!important;
text-transform:uppercase
}
.cookie-choices-info .cookie-choices-button{
color:#fff!important;
font-size:13px!important;
margin-left:5px!important;
padding:3px 6px!important;
background-color:#438afe!important;
border-radius:2px;
transition:all .6s linear
}
.cookie-choices-info .cookie-choices-button:nth-child(2){
background-color:#ef690f!important;
transition:all .6s linear
}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:focus{
background-color:#3c7ce5!important;
text-decoration:none!important;
transition:all .1s linear
}
.cookie-choices-info .cookie-choices-button:nth-child(2):hover,.cookie-choices-info .cookie-choices-button:nth-child(2):focus{
background-color:#d65f00!important
}
@media only screen and (max-width:640px){
.cookie-choices-info .cookie-choices-text{
display:block
}
.cookie-choices-buttons{
margin-left:0!important
}
.cookie-choices-info .cookie-choices-button{
margin-left:0!important
}
.cookie-choices-info .cookie-choices-button:nth-child(2){
margin-left:5px!important
}
}
/*]]>*/
</style>
</head>
<body>
<div id="cookieChoiceInfo" class="cookie-choices-info singleton-element">
<div class="cookie-choices-inner">
<span class="cookie-choices-text">This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.</span><span class="cookie-choices-buttons"><a href="https://www.blogger.com/go/blogspot-cookies" target="_blank" class="cookie-choices-button" rel="nofollow noopener" title="Learn More">Learn More</a><a id="cookieChoiceDismiss" href="#" class="cookie-choices-button">Got it!</a></span>
</div>
</div>
</body>
</HTML>
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Yeni Yayınlar Widget'ı
CSS javaScript Widget<!DOCTYPE html>
<html>
<head>
<title>Blogger Son Yayınlar Widget'ı</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
body {font-family:'Roboto', sans-serif;line-height:1.5}
#recent_article .widget-content,#recent_article ul{max-width:300px;padding:0;margin:0 auto;display:block}
#recent_article a:link,#recent_article a:visited{font-weight:normal}
#recent_article ul li{background:#fff;margin:0 auto!important;padding:8px 10px!important;list-style:none;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:#fe8f04;font-size:92%;text-align:left!important}
#recent_article ul li:nth-child(1){border-top-width:1px!important}
#recent_article ul li a{font-weight:400!important;display:block;color:#444!important;text-decoration:none!important;line-height:1.4em!important;padding-right:8px!important}
#recent_article ul li a:hover{color:#028271!important}
#recent_article ul li:before,#recent_article ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none}
</style>
</head>
<body>
<div id='recent_article' class='recent_article'><ul id="recent-posts"></ul></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='https://bloggereklentileri.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</body>
</html>
Blogger Öne Çıkan Yayın Widget Tasarımı
CSS Widget<!DOCTYPE html>
<html>
<head>
<title>Blogger Öne Çıkan Yayın Widget'ı Tasarımı</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {font-family: 'Roboto', sans-serif;font-size:16px;color:#222}
h3.title{text-transform:uppercase;}
a {cursor:pointer;text-decoration:none}
.image{width:100%}
.FeaturedPost{width:300px;margin:auto;padding:0 8px 8px 8px;border-radius:2px;border:1px solid #ddd}
.FeaturedPost .post-summary:after{content:no-close-quote;position:absolute;bottom:0;width:100%;height:150px;overflow:hidden;margin:0;background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.75))}
body.dark-skin .FeaturedPost:after{width:88.4%}
.FeaturedPost .post-summary h3{position:absolute;font-size:16px;line-height:20px;padding:0 15px;bottom:70px;color:#fff;z-index:1}
.FeaturedPost h3 a{color:#fff;line-height:25px}
.FeaturedPost .post-summary{display: grid;margin:0;position:relative;overflow:hidden;padding-top:0!important}
.FeaturedPost p{position:absolute;bottom:16px;color:#a9a9a9;height:50px;padding:0 15px;z-index:1;font-size:14px;overflow:hidden;font-family:sans-serif;line-height:22px}
</style>
</head>
<body>
<div class="widget FeaturedPost" id="FeaturedPost1">
<h3 class="title">Öne Çıkan Yayın</h3>
<div class="post-summary">
<h3><a target="_blank" href="https://plus.google.com/u/0/collection/gdNMSE" title="Orjinal Resimler" rel="nofollow noopener">Orjinal Resimler</a></h3>
<p>Blogger Eklentileri, bir birinden farklı en güzel blog resimlerini sizin için hazırladı...</p>
<img class="image" alt="Orjinal Resimler" src="https://lh3.googleusercontent.com/dVJTPD-XUEQxRD63Mc5Grygrne_581HKyxjO6o0lX2nC2iT8gGhs2L2JD-Fp7dLXeZF05jDNwmNpQA=w818-h584-rw-no"/>
</div>
</div>
</body>
</html>
Tanıtım Reklamları İçin Reklam Kutusu Oluşturma
CSS CSS3 HTML HTML5<!DOCTYPE html>
<HTML>
<head>
<title>Tanıtım Reklamları İçin Reklam Kutusu Oluşturma</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
.banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}
.banner_box:nth-child(1),.banner_box:nth-child(3){margin-right:16.6666666667px}
.banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px}
.banner_box a{position:relative;display:block;z-index:2}
.banner_box img{object-fit:cover}
.banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.banner_300{width:300px;height:250px;}
.banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;}
.banner_box_ads.box_widget{padding:0;}
.banner_300:before{content:"300x250";}
.clear{clear:both;}
</style>
</head>
<body>
<div class="banner_box_ads box_widget">
<div class="banner_box banner_300">
<!-- 300x250 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/04/blogger-sayfalar-widget-ile-sabit.html" target="_blank" rel="nofollow noopener" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH33ajFvMNVgyJpv50DHzxYqUtyDrHGQ1ra8O2nPY6XMRuifSM1aFLdpVKaBHUc_w2irPXZlijGywV_BY6olQZkDcj365GXgcMnldwvY8V74iFC-bUrKpGqKj7QXJk-FeLeZxj-5s8I1Ni/s1600/sabit-sayfa-navigasyonu.png" alt="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" height="250" width="300"/></a>
</div>
<div class="clear"/>
</div>
<div class="banner_box_ads">
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/03/blog-metinlerini-css-ile-renklendirme.html" target="_blank" rel="nofollow noopener" title="Blog Metinlerini CSS ile Renklendirme">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPQvrkk9O7Evxa8unsVVj3hiioTRgpW2u8BVaT58eN3-ADyueTlwWuepDnE0bqqXeBg4h5fsBdUz5qEY-yIXytogV___paj4vDrhDH23B9JcCT5Cqdzj1ClDo5PuTxpCu8QuQ7qB2BdM8/s1600/css-gradients.png" alt="Blog Metinlerini CSS ile Renklendirme" title="Blog Metinlerini CSS ile Renklendirme" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-yldz-derecelendirme-widget.html" target="_blank" rel="nofollow noopener" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1OOAj8h4Sn4zU-iOCnwhm6q5EkjMe3YbHl60QARhyUfTLuFDx4M1M4bB-CnBLbfmTGGfgiT3hcYBybUDN30rI95mhuCUQ64gwkHlzEDaIJ-fjLny12Ki8sMbEVI7erPrnf0LddCMFeFP/s1600/yildiz+derecelendirme.png" alt="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-css-ve-svg-sosyal-paylasm.html" target="_blank" rel="nofollow noopener" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZe1M-qs3RHZFqwpMZwu_qtIYZ0hJwtGXx_p4STeNjIEGXJcPJeuhk7h-d476s6L032nSggNUNxCQB30I44ol7d06w5190YzdJrgZbQNEzPhedY4-_wq5diNmoawHkog8e2DvVASBqTD_/s1600/sosyal-paylasim.png" alt="Blogger CSS ve SVG Sosyal Paylaşım Butonları" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-ozel-adstxt-icerigi-nasl.html" target="_blank" rel="nofollow noopener" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7BP_6rkQdpg8v3REagUFHAluUq9IObdGuZ4PN3k5giZRZrCbmp07kvDZh3tmtQNMJqRgiHYw39GrRAOcbpQ8lt_EJ3qOSUctVAqaE3gtbaHtjBgNzXlM9hVDSbB6MbLQPYHVpUbJof22/s1600/ads.png" alt="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" height="125" width="125"/></a>
</div>
<div class="clear"/>
</div>
</body>
</HTML>
CSS Material Buton Tasarımı
CSS CSS3<HTML>
<head>
<style>
.btn{position:relative;display:block;margin:30px auto;padding:0;overflow:hidden;border-width:0;outline:none;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.6);background-color:#2ecc71;color:#ecf0f1;transition:background-color .3s}
.btn:hover,.btn:focus{background-color:#27ae60}
.btn > *{position:relative}
.btn span{display:block;padding:12px 24px}
.btn:before{content:"";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(236,240,241,.3);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.btn:active:before {width:120%;padding-top:120%;transition:width .2s ease-out, padding-top .2s ease-out}
*, *:before, *:after {box-sizing:border-box}
html {position:relative;height:100%}
body {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#ecf0f1;color:#34495e;font-family:Trebuchet,Arial,sans-serif;text-align:center}
h2 {font-weight:normal}
.btn.orange {background: #e67e22}
.btn.orange:hover,.btn.orange:focus {background: #d35400}
.btn.red {background: #e74c3c}
.btn.red:hover, .btn.red:focus {background:#c0392b}
</style>
</head>
<body>
<h1>Material Buton Tasarımı</h1>
<h2>Sadece CSS kodları ile tasarlanmış Metarial efekli butonlar.</h2>
<button class="btn"><span>Yeşil Buton</span></button>
<button class="btn orange"><span>Turuncu Buton</span></button>
<button class="btn red"><span>Kırmızı Buton</span></button>
</body>
</HTML>
Blog Yayınlarını Sayfalara Ayrıma Eklentisi
CSS HTML jQuery<HTML>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;padding:20px}
.post-body-nav{padding-top:20px}
.post-body-nav button{background:transparent;cursor:pointer}
.post-body-nav button{padding:6px 12px;display:inline-block;color:#222;border:2px solid #eee;margin:4px;transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}
.post-body-nav button.active {border:2px solid #888}
.post-body-nav button:hover,.post-body-nav button:focus{border:2px solid #888;color:#222}
img{width:100%;height:auto}
a:-webkit-any-link {color:#2e9fff;cursor:pointer;text-decoration:none}
</style>
</head>
<body>
<div class='post-body entry-content'>
<div itemprop='articleBody'>
<h2>Blog Yayınlarını Sayfalara Ayrıma</h2>
<div class="post-body-page">
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blog Sitesini Google Aramalarında Üst Sıralara Çıkarmanın En İyi Yolları" border="0" data-original-height="450" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2b5XM_Dxvb4AENJwUoKifyacPEWeWq1v0lRmOAh-bkFRlj9u8_mQTH7zirFl4g6CG7UMZ8a-uFkH1mROHfE57wR5ZVZH26s87KUVRNQvIYxEFFh281qR6L7GgBXSrhO20XpjnmuYveEpW/s1600/Google-Search.png" title="Blog Sitesini Google Aramalarında Üst Sıralara Çıkarmanın En İyi Yolları"></div>
<br>
Tüketicilerin internet alış-veriş yapma tutumları çok değişti. Özellikle son zamanlarda tüketiciler bir ürünü satın almadan önce internet üzerinden araştırma ve karşılaştırma yapmadan kesinlikle satın almıyor.<br>
<br>
Arama motorları aracılığıyla web sitelerini sorgulamak bir alışkanlık haline geldi. Bu nedenle, Google ve diğer arama motorlarının blog yayınlarınızı daha iyi sıralayarak blog sitenizin iyi bir durumda gelmesi için SEO (Arama Motoru Optimizasyonu) tekniklerini nasıl kullanacağınızı bilmek çok önemlidir.<br>
<br>
Blog ve blog yayınları arama motorlarının ilk üç sayfasında görünür olması veya olmaması durumu, blog performansının başarılı veya başarısız olduğunu belirler. Blog için önemli olan uygulanacak SEO teknikleri ve izlenecek yol, organik ziyaretçi çekmeye yardımcı olacak faktörleri de içermelidir.<br>
<br>
SEO tekniklerini uygulayarak, arama sonuçları ile alakalı içeriklerin görüntülenme sayısını artırmak mümkün. SEO ile çalışmanın en büyük avantajı, teknik bilgiler için herhangi bir ücret ödenmemesi ve organik olarak uygulanmasıdır.<br>
<br>
<h2><b>Google Arama Sonuçlarında Üst Sıralara Çıkmanın Yolları Nelerdir?</b></h2>
<br>
Google ve diğer arama motorlarında sıralama iyileştirmeye yönelik bazı önemli faktörler aşağıda belirtilmiştir.
</div>
<div class="post-body-page">
<b>Anahtar kelimeleri araştırma</b>
<br>
<br>
Arama motorlarında blog konumunu teyit edebilmek için, anahtar kelşmelerin alaka düzeyini araştırmanız ve anlamanız gerekir. Bu tetikleyiciler üzerinde çalışmak blogun arama sonuçlarındaki sırasını çok belirgin bir şekilde yükseltir. Google, en iyi şartları bulmaya yardımcı olmak için ücretsiz araçları kullanma olanağı sağlıyor.<br>
<br>
Google Trendler veya Google AdWords gibi planlayıcı araçlar sayesinde, yayın içeriğine en uygun anahtar kelimeleri bulabilirsiniz. Anahtar kelimeler, Google'da sıralama yükseltmek için kullanılan SEO tekniklerinden biridir. Anahtar kelimeler ile arama yapmadan blog içeriğinizin ziyaret edilmesi ile dikkate değer bir TO elde etmek imkansızdır.<br>
<br>
<b>İçerik başlığının oluşturulması</b><br>
<br>
Belirgin ve ilk ipucu olan anahtar kelimenin yayın başlığına eklenmesi gerekir. Google kısa başlıkları daha iyi sıralar, çekici olması ve 50 ile 67 karakter uzunluğunda olması gerekir. Başlığı oluşturacak kelimelerin seçimini düşünmek, blog içeriğinin arama motorlarında yerini belirlemek için gereklidir.<br>
<br>
İçerik alaka düzeyini tanımlayan ve sıralayan Google algoritması, yayını Google aramalarının en üstüne koymanın başlıca faktörlerinden biri olarak başlığı alır. Bir arama yapılırsa ve tarafınızca seçilen anahtar kelimeyle ilgili herhangi bir sonuç bulunmazsa, Google'da sıralanmak için hiç bir yarar sağlamaz ve arama motorlarındaki optimizasyon işe yaramaz olacaktır.<br>
<br>
İyi bir başlık oluşturmak arama motoru konumunu iyileştirerek içeriği daha hızlı bir şekilde çekmenize ve bulmanıza yardımcı olur. Eğer, kötü bir başlık konumlandırılmışsa pek fazla tıklama almaz. Bu nedenle, anahtar kelimeyi ve başlığı düşünmek içeriği daha iyi sıralamaktadır.
</div>
<div class="post-body-page">
<b>Meta açıklama etiketleri kullanma</b><br>
<br>
Meta açıklama etiketleri, sayfa içeriğinin kısa bir tanımlamasıdır ve maksimum 153 karaktere sahip olmalıdır ve içerik hakkında kısaca açıklama olacak şekilde oluşturmalısınız. Kısa metnin ortasına anahtar kelimenizi koymanız çok önemlidir.<br>
<br>
Özellikle Blogger bloglarında arama açıklaması Google'ın en üst sıralamasındaki faktörlerden birini oluşturur. Aynı durumu WordPress blogları için söyleyemeyiz. İçerikle alakalı özetlenme, odaklanma ve sıralama yerleşimi gibi faktörleri pek etkilemez. Fakat, Blogger blogları için, arama motorlarından daha fazla ziyaretçi çekebilmek için arama açıklaması ve meta etiketleri en önemli faktörlerdir. Meta açıklamaları olabildiğince ilgi çekici ve en önemli anahtar kelimelerinizden olmalıdır.<br>
<br>
Bknz: <a href="https://bloggereklentileri.blogspot.com/2017/03/blogspot-sitesinde-neden-iki-acklama.html" target="_blank" title="Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?" rel="noopener">Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?</a>
<br>
<br>
<b>Arama ve bağlantı oluşturmaya önem verme</b>
<br>
<br>
Bağlantı kurma bir sanattır. Bir SEO çalışmasının her zaman en zor kısmıdır, aynı zamanda <u>başarı için kritik önem taşıyan noktası</u>dır. Bu çalışma, sayfanıza bağlantılar oluşturarak arama sonuçlarında görüntülenen ilgili sitelere dahil edilmenizi sağlar. Faydalı olabilecek iki türlü bağlantı oluşturma tekniği vardır.
<br>
<br>
<ul style="text-align: left;">
<li>Dahili bağlantılar (İç linkleme yani iç bağlantılar)</li>
<li>Harici bağlantılar (Dış bağlantılar)</li>
</ul>
<br>
<b>Dahili bağlantılar</b><br>
<br>
Blog kullanıcılarının genelde iç linkleme olarak bilgdiği, sitenizdeki başka bir sayfaya yönlendiren bu tür bağlantılar çok önemlidir. Sitenize ait bağlantılardan oluştuğu ve tam yetki sahibi olduğunuz için sitede bulunan sayfara bağlantılar ekleyebilir veya kaldırabilirsiniz.<br>
<br>
Dahili bağlantılar ile sayfalarınızın alaka düzeyini artırabilir ve ziyaretçilerin sitede daha fazla zaman geçirmesini sağlayabilirsiniz. Bu tekniği dikatlice kullanmanın, bir içeriğe aşırı bağlantı eklemek ters etki gösterebilir, bu da içerik bütünlüğünün kaybolmasına neden olur ve ziyaretçiler sayfayı terk etmek zorunda kalabilir.<br>
<br>
<b>Harici bağlantılar</b><br>
<br>
İçerikle olan ilişkiye göre, yalnızca bir konuda karşılıklı olarak bağlantıların paylaşıldığı teknik türüdür. Daha basit anlatmak gerekise, bu tür ortaklıklardan oluşan ve kazanılan bağlantılara harici bağlantı denir.<br>
<br>
Bu tekniği kullanmanın en kolay ve doğru yolu, içeriğinizle ilgilenenlerle bilgi alışverşinde bulunmak ve her iki içeriğin ilgisini artıran <u>karşılıklı açıklama taktiği</u>ni uygulamak üzere harici bağlantılar kazanmak için ortaklıklar oluşturmaktır.
</div>
<div class="post-body-page">
<b>Kullanılabilirlik ve erişilebilirlik gibi faktörleri düşünün</b>
<br>
<br>
Kullanılabilirliği ve erişebilirliği iyi olan bir web sitesinin arama motorlarında bulunması kolaydır. Bunun için, web sitenizin oluşturulması sırasında iyi bir düzen (site içi planlaması) oluşturmanız ve pratik olarak birlikte SEO üzerinde çalışmanız gerekir.<br>
<br>
Sonuçta, ziyaretçilerin sitenizi tercih etmemesi veya kullanmaması, düzenli ve işlevsel olmadığı için iyi bir web sitesi izlenimi vermez. Aynı şekilde, kullanılabilir ve erişilebilir bir düzene sahip olmayan ve arama motoru optimizasyonu yapılmayan bir web sitesinin iyi durumda olması mantıklı değildir.<br>
<br>
Google'da iyi bir sıralama elde etmek için bir ipucu, sitenizin tıklanma sonucunda sayfalarınızın kısa sürede yüklenmesi ve içeriğinize kolaylıkla erişebilmesi için, web sitenizin yüklenmesini engelleyen unsurların avantajları ve dezavantajları düşünün. Çünkü, bir web sitesinin sadece dizine eklenmesini önemli bir faktör olarak gören daha iyi bir sıralamayı engelleyebilir.<br>
<br>
Bknz: <a href="https://bloggereklentileri.blogspot.com/2017/09/blogger-sitelerinin-krk-baglantlarn.html" target="_blank" title="Blogger Sitelerinin Kırık Bağlantılarını Bulma ve Yönlendirme" rel="noopener">Blogger Sitelerinin Kırık Bağlantılarını Bulma ve Yönlendirme</a><br>
<br>
<b>İçerik boyutu</b><br>
<br>
Google, kısa metinleri çok iyi derecelendirmiyor, içeriğin arama motorlarında daha üst sıralara çıkması için en az 300 kelime olmalıdır. 500, 1000 yada daha fazla kelimeyle yazılmış metinler daha iyi bir sıralamaya sahip olur. Çünkü, kapsanan konular hakkında daha detaylı bilgiler sunar.
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('b 2(){c d=4.a("f");d.g="7:9/8;e,k+m+n+h",4.l.i(d)}0.3?0.3("j",2,!1):0.5?0.5("6",2):0.6=2;',24,24,'window||downloadJSAtOnload|addEventListener|document|attachEvent|onload|data|javascript|application|createElement|function|var||base64|script|src|IiksJCgiLnBvc3QtYm9keS1wYWdlIikuaGlkZSgwKSwkKCIucG9zdC1ib2R5LXBhZ2UiKS5maXJzdCgpLmZhZGVJbigpLCQoIi5wb3N0LWJvZHktbmF2IGJ1dHRvbiIpLmZpcnN0KCkuYWRkQ2xhc3MoImFjdGl2ZSIpfQ0KJCgiLnBvc3QtYm9keS1uYXYgYnV0dG9uIikuY2xpY2soZnVuY3Rpb24oKXtpZighJCh0aGlzKS5oYXNDbGFzcygiYWN0aXZlIikpe3ZhciBlPWV2YWwoJCh0aGlzKS5hdHRyKCJkYXRhLXRhcmdldCIpKTskKCIucG9zdC1ib2R5LXBhZ2UiKS5oaWRlKCkucmVtb3ZlQ2xhc3MoImFjdGl2ZSIpLCQoIi5wb3N0LWJvZHktcGFnZSIpLmVxKGUpLmZhZGVJbigpLmFkZENsYXNzKCJhY3RpdmUiKSwkKCIucG9zdC1ib2R5LW5hdiBidXR0b24iKS5yZW1vdmVDbGFzcygiYWN0aXZlIiksJCh0aGlzKS5hZGRDbGFzcygiYWN0aXZlIiksJCgiaHRtbCxib2R5IikuYW5pbWF0ZSh7c2Nyb2xsVG9wOiQoIi5wb3N0LWJvZHktcGFnZS5hY3RpdmUiKS5vZmZzZXQoKS50b3B9LCJub3JtYWwiKX19KX0pOw0K|appendChild|load|LyohIGpRdWVyeSB8IGh0dHBzOi8vYmxvZ2dlcmVrbGVudGlsZXJpLmJsb2dzcG90LmNvbSAqLw0KJChmdW5jdGlvbigpe2lmKCQoIi5wb3N0LWJvZHkgLnBvc3QtYm9keS1wYWdlIikubGVuZ3RoPjApe3ZhciBhcnRpY2xlQm9keT0kKCIucG9zdC1ib2R5IikscGFnZXM9IiI7YXJ0aWNsZUJvZHkuZmluZCgiLnBvc3QtYm9keS1wYWdlIikuZWFjaChmdW5jdGlvbihpKXtwYWdlcys9IjxidXR0b24gZGF0YS10YXJnZXQ9JyIraSsiJz4iK2V2YWwoaSsxKSsiPC9idXR0b24|body|In0pLGFydGljbGVCb2R5LmFwcGVuZCgnPGRpdiBjbGFzcz0icG9zdC1ib2R5LW5hdiI|JytwYWdlcysiPC9kaXY'.split('|'),0,{}))
//]]>
</script>
</body>
</HTML>
CSS ile Metin Renklendirme
CSS CSS3<!DOCTYPE html>
<HTML>
<head>
<title>Metin Renklendirme</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Acme');
body {font-family: 'Acme', sans-serif;}
.gradient-text{
background: #c21500;
background: -webkit-linear-gradient(to right, #ffc500, #c21500);
background: linear-gradient(to right, #ffc500, #c21500);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
text-align: center;
}
.gradient-text2{
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
text-align: center;
}
.gradient-text3{
background: #40E0D0;
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
text-align: center;
}
.gradient-text4{
background: #DA22FF;
background: -webkit-linear-gradient(to right, #9733EE, #DA22FF);
background: linear-gradient(to right, #9733EE, #DA22FF);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
text-align: center;
}
.gradient-text5{
background: #e52d27;
background: -webkit-linear-gradient(to right, #b31217, #e52d27);
background: linear-gradient(to right, #b31217, #e52d27);
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
text-align: center;
}
h3 {font-size:48px}
</style>
</head>
<body>
<h3 class="gradient-text">Metin Renklendirme</h3>
<h3 class="gradient-text2">Metin Renklendirme</h3>
<h3 class="gradient-text3">Metin Renklendirme</h3>
<h3 class="gradient-text4">Metin Renklendirme</h3>
<h3 class="gradient-text5">Metin Renklendirme</h3>
</body>
</HTML>
Etiket Duyarlı ve Sıralı Blog Arşiv Eklentisi
CSS javaScript<!DOCTYPE html>
<html lang="tr">
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto');body {font-family:'Roboto', sans-serif;}a{text-decoration:none}#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
</head>
<body>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://bloggereklentileri.blogspot.com';cat_numb=10;cat_pre='Geri';cat_nex='İleri';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
</body>
</html>
Renkli Kod Paylaşım Eklentisi
CSS javaScript<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: monospace;font-size:16px}
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282828}
.hljs,.hljs-subst{padding:20px;margin: 0;color:#ebdbb2}
.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}
.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}
.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}
.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}
.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}
.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}
.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}
.hljs-comment{color:#928374}
.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}
.hljs-comment,.hljs-emphasis{font-style:italic}
.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}
::-webkit-scrollbar{width:10px;height:10px;background:#f1f1f1}
::-webkit-scrollbar-thumb {background:#c1c1c1}
</style>
</head>
<body>
<pre><code><style type="text/css">
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282828}
.hljs,.hljs-subst{color:#ebdbb2}
.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}
.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}
.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}
.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}
.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}
.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}
.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}
.hljs-comment{color:#928374}
.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}
.hljs-comment,.hljs-emphasis{font-style:italic}
.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}
</style></code></pre>
<br>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><b:if cond='data:view.isPost'>
<script>
// <![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/jquerycods/javascript/master/code.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
// ]]>
</script>
</b:if></code></pre>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script src='https://rawgit.com/jquerycods/javascript/master/code.js' type='text/javascript'></script>
</body>
</html>
Blogger Yayın Araç Gereçleri
CSS HTML<!DOCTYPE html>
<HTML lang="tr">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{font-family:'Roboto',sans-serif;padding:20px;font-size:16px;line-height:1.7}
a{text-decoration:none}
#post_link{position:relative;line-height: 1.4}
#post_link a{color:rgb(3,169,244);margin:0 3px 0 30px;cursor:pointer;text-decoration:none;position:relative}
#post_link a:before{background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM0NDQiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0zLjkgMTJjMC0xLjcxIDEuMzktMy4xIDMuMS0zLjFoNFY3SDdjLTIuNzYgMC01IDIuMjQtNSA1czIuMjQgNSA1IDVoNHYtMS45SDdjLTEuNzEgMC0zLjEtMS4zOS0zLjEtMy4xek04IDEzaDh2LTJIOHYyem05LTZoLTR2MS45aDRjMS43MSAwIDMuMSAxLjM5IDMuMSAzLjFzLTEuMzkgMy4xLTMuMSAzLjFoLTRWMTdoNGMyLjc2IDAgNS0yLjI0IDUtNXMtMi4yNC01LTUtNXoiLz48L3N2Zz4=);content:'';position:absolute;width:24px;height:24px;margin:-2px 0 0 -30px}
#post_link a:hover:after{background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwM0E5RjQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDE5SDVWNWg3VjNINWEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3pNMTQgM3YyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDFMMTkgNi40MVYxMGgyVjNoLTd6Ii8+PC9zdmc+);content:'';position:absolute;width:18px;height:18px;margin:1px 0 0 3px}
.post-body .fact{background-color:#f5f5f5;border-bottom:none;border-top:none;min-height:initial;padding:16px}
.post-body .tip{background:#fff;min-height:initial;padding:16px 16px 16px 56px;border:1px solid #e0e0e0;position:relative}
.post-body .tip:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAABHElEQVRIx2NgGGjwv4GB6f9eFqv/B1gz/x9gq/y/nzXl/342HeoYvpfF6f8B9jv/D7L/x8AH2I7938OmRZ7BDAyMQIOnYjUYBbP9/L+fvYB0Cw6yNRM2HMWiMOIN38OgBNTwizQL2J/9X8XASazr60k0HOaLICItYN9JlgX7WXuI9cEZsiw4wDafOAsOsG0mzwdsLcRaUEuWBfvYvYmzYD+DDBmp6B4oxxOfVA+wlZGQev7+38/iQEZOZu0lwvBfQHWx5JdFB9j340857JMoK+wI5Qli0z6euFhLIIjqKfWBKtCQamAab8DE7CX/tzGIMgx6AHRtBFYfHGBxpI4FB9mW4Aj/cupYsJNBERjZVSiuP8he/H8Hg9CgCGIAiPxM1oDU6gkAAAAASUVORK5CYII=);content:'';height:24px;margin-left:-40px;position:absolute;width:24px}
.post-body .alert{background-color:#fff9c4;border-bottom:none;border-top:none;color:#212121;min-height:initial;padding:16px 16px 16px 56px;;position:relative}
.post-body .alert:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA1ElEQVR42uXQMQ4BQRTG8ckmIlup6CipqbmAC3AALsABuAAH4AIcgB41NSUdlUqxiTxf8SbZjKyZnX0aJvklL5OX+Sej/uvQJt9myhUPTnJwgiPP4oEhEBtIB0pw1wGei5KBOZBhJhVowNMM8F1dIrADSrDNGugCWXR8AyFcjMcUo5gzhD6BMZAtwEZpAxV4uAZ4t5wmsARyDbCFa6AF5KlpCwRwyBDYQ/Ap0NfLHl+k9ZICBbgJBK781ltgCiRkYgZqEAkGIqjGA2sgYSsd+JrfCLwA/0ZbYCEaYycAAAAASUVORK5CYII=);content:'';height:24px;margin-left:-40px;position:absolute;width:24px}
.post-body .example{background-color:#fff;border:1px solid #e0e0e0;min-height:initial;padding:16px}
</style>
</head>
<body>
<div class="post-body">
<b>İpucu</b><br><br>
<div class="tip">Piyasanın amiral gemilerinin en populerlerinden biride şüphesiz Samsung Galaxy S serisidir, Samsung Galaxy S serisinin en son çıkan sürümü S8 beklenen sesi getirmişti, şimdi ise akıllarda S9 un ne zaman çıkacağı soruları merak uyandırıyor.</div>
<br>
<b>Bağlantı</b><br><br>
<div id="post_link">
<a href="#" title="Samsung Galaxy S9 Ne Zaman Çıkıyor" target="_blank">Samsung Galaxy S9 Ne Zaman Çıkıyor</a>
</div>
<br>
<b>Destek</b><br><br>
<div class="fact">
<strong>IP65/68</strong> sertifikasıyla suya karşı da dayanıklı olacağı dile getirilen telefonlarda 16 megapiksel çift arka ve 12 megapiksel çift ön kamera olacağı iddia ediliyor. Yüz tanıma teknolojisinin daha gelişmiş olacağı belirtilen telefonlarda kulaklık girişinin olmayacağı ifade ediliyor. Galaxy S8 ve Galaxy S8+’ta kulaklık tercihi yapan Samsung’un yeni Galaxy S9 serisinde kulaklık girişi kullanmayacağı söyleniyor.</div>
<br>
<b>Uyarı</b><br><br>
<div class="alert">Samsung bu teknolojiyi gerçeğe dönüştürmeyi başarırsa, pil ömrü anlamında büyük bir adım atabilir. Böyle bir durumda firma, amiral gemisi telefonunun sadece Exynos sürümünü üretmeye karar verebilir.</div>
<br>
<b>Örnek</b><br><br>
<div class="example">
<div>
<h4>Samsung Galaxy S9 Ne Zaman Çıkıyor</h4>
<p>Piyasanın amiral gemilerinin en populerlerinden biride şüphesiz Samsung Galaxy S serisidir, Samsung Galaxy S serisinin en son çıkan sürümü S8 beklenen sesi getirmişti, şimdi ise akıllarda S9 un ne zaman çıkacağı soruları merak uyandırıyor.</p>
<p>Teknoloji dünyası tarafından merakla beklenen Samsung Galaxy S9 ve Galaxy S9+’ın önümüzdeki yılın şubat veya mart ayında gün ışığına çıkması bekleniyor.</p><p>IP65/68 sertifikasıyla suya karşı da dayanıklı olacağı dile getirilen telefonlarda 16 megapiksel çift arka ve 12 megapiksel çift ön kamera olacağı iddia ediliyor. Yüz tanıma teknolojisinin daha gelişmiş olacağı belirtilen telefonlarda kulaklık girişinin olmayacağı ifade ediliyor. Galaxy S8 ve Galaxy S8+’ta kulaklık tercihi yapan Samsung’un yeni Galaxy S9 serisinde kulaklık girişi kullanmayacağı söyleniyor.</p>
<ul>
<li>Gelelim beklenen özelliklerine, Galaxy S9 Snapdragon ve Exynos olmak üzere iki farklı işlemci ile kullanıma sunulacak, 5.8 inçlik bir ekrana sahip olunacağı ön görülmekte, s9 işlemcileri 8 çekirdekli olacak.</li>
<li>Bununla birlikte Samsung Galaxy S9, Adreno 630 grafik birimi özelliğiyle gelecek.</li>
<li>Ayrıca devrim niteliğinde olacağı düşünülen parmak izi okuyucularında ekrana entegreli bir şekilde geleceği beklenmekte. Çerçeve kalınlığının azaltılacağı düşünülüyor.</li>
<li>Samsung, Galaxy S8'i bu sene 29 Mart'ta özel bir etkinlikte tanıtmıştı. 21 Nisan'da ise bir çok yerde piyasaya sürülmüştü. Samsung, önümüzdeki sene Galaxy S9 için aynı zaman aralığına bağlı kalabilir.</li>
<li>Yeni bir rapora göre Samsung, yeni bir PCB teknolojisi üzerinde çalışıyor. Bu teknoloji, yonga üreticilerinin anakartı büyütmeden, karta ek bileşen katmanları eklemelerine izin verecek. Böylece pil için daha büyük bir alan ayrılmış olacak. İddianın kaynağı ETNews, bu teknolojinin Galaxy S9'un Exynos işlemcili sürümü için geçerli olacağını, Qualcomm Snapdragon sürümünde olmayacağını söylüyor.</li>
<li>Samsung bu teknolojiyi gerçeğe dönüştürmeyi başarırsa, pil ömrü anlamında büyük bir adım atabilir. Böyle bir durumda firma, amiral gemisi telefonunun sadece Exynos sürümünü üretmeye karar verebilir.</li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
Material Tasarımlı Ripple Efekti
CSS javaScript<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif}
.bg--red{background:#e74c3c}
.tx--red{color:#e74c3c}
.bg--blue{background:#00f}
.tx--blue{color:#00f}
.bg--green{background:#2ecc71}
.tx--green{color:#2ecc71}
.bg--white{background:#fff}
.tx--white{color:#fff}
body{color:#777;text-align:center;padding:0 0 0 0;margin:0 0 0 0}
button{border:none;padding:20px;margin:10px;font-size:14px;outline:0;box-shadow:0 2px 4px 0 #000;border-radius:4px}
button:active{box-shadow:0 2px 6px 0 #000}
[ripple]{position:relative;overflow:hidden}
[ripple] .ripple--container{position:absolute;top:0;right:0;bottom:0;left:0}
[ripple] .ripple--container span{transform:scale(0);border-radius:100%;position:absolute;opacity:0.75;background:#fff;animation:ripple 1000ms}
@-moz-keyframes ripple{to{opacity:0;transform:scale(2)}}
@-webkit-keyframes ripple{to{opacity:0;transform:scale(2)}}
@-o-keyframes ripple{to{opacity:0;transform:scale(2)}}
@keyframes ripple{to{opacity:0;transform:scale(2)}}
</style>
</head>
<body>
<header>
<h1>ripple</h1>
</header>
<div class="content">
<button class="bg--red tx--white" ripple="ripple">İndir</button>
<button class="bg--blue tx--white" ripple="ripple">Bilgi</button>
<button class="bg--green tx--white" ripple="ripple">Kaydet</button>
</div>
<script>
//<![CDATA[
(function(){var cleanUp,debounce,i,len,ripple,rippleContainer,ripples,showRipple;debounce=function(func,delay){var inDebounce;inDebounce=undefined;return function(){var args,context;context=this;args=arguments;clearTimeout(inDebounce);return inDebounce=setTimeout(function(){return func.apply(context,args);},delay);};};showRipple=function(e){var pos,ripple,rippler,size,style,x,y;ripple=this;rippler=document.createElement('span');size=ripple.offsetWidth;pos=ripple.getBoundingClientRect();x=e.pageX-pos.left-(size / 2);y=e.pageY-pos.top-(size / 2);style='top:'+y+'px; left: '+x+'px; height: '+size+'px; width: '+size+'px;';ripple.rippleContainer.appendChild(rippler);return rippler.setAttribute('style',style);};cleanUp=function(){while(this.rippleContainer.firstChild){this.rippleContainer.removeChild(this.rippleContainer.firstChild);}};ripples=document.querySelectorAll('[ripple]');for(i=0,len=ripples.length;i<len;i++){ripple=ripples[i];rippleContainer=document.createElement('div');rippleContainer.className='ripple--container';ripple.addEventListener('mousedown',showRipple);ripple.addEventListener('mouseup',debounce(cleanUp,2000));ripple.rippleContainer=rippleContainer;ripple.appendChild(rippleContainer);}}());
//]]>
</script>
</body>
</html>
Blogger Sitelerine ICON Ekleme ve Kullanma
CSS<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
body {font-family: 'Fira Sans Condensed', sans-serif}
.icon-responsive,.icon-style{padding:20px;text-align:center}
.icon-style{border: 1px solid #ddd;border-radius: 3px;text-align: center;padding: 30px;}
.icon-style span{padding:20px}
.style1{font-size:50px;color:#B8D30B}
.style2{font-size:50px;color:#2DAEBF;text-shadow:0 1px 0 #0092b3,0px 2px 0 #0087a6,0px 3px 0 #008099,0px 4px 0 #00758c,0px 5px 0 #555,0px 6px 0 #006a80,0px 0 0 #006073,0px 8px 7px #005566}
.style4{font-size:50px;text-shadow:0 1px 3px rgba(0,0,0,0.25);color:#A9014B}
.style3{font-size:50px;color:#E33100;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #E33100,0 0 30px #E33100,0 0 40px #E33100,0 0 50px #E33100,0 0 75px #E33100}
.style5{font-size:50px;color:rgba(245,159,26,0.8);text-shadow:1px 4px 6px #FFF,0 0 0 #000,1px 4px 6px #FFF}
</style>
</head>
<body>
<center><p>Normal icon kullanımı örnekleri</p></center>
<div class="icon-responsive">
<span><i class="fa fa-heart"></i></span>
<span><i class="fa fa-refresh"></i></span>
<span><i class="fa fa-bullseye"></i></span>
<span><i class="fa fa-file-text"></i></span>
<span><i class="fa fa-sun-o"></i></span>
</div>
<center><p>CSS ile yeniden tasarlanmış olan icon kullanımı örnekleri</p></center>
<div class="icon-style">
<span><i class="fa fa-heart style3"></i></span>
<span><i class="fa fa-refresh style1"></i></span>
<span><i class="fa fa-bullseye style4"></i></span>
<span><i class="fa fa-file-text style2"></i></span>
<span><i class="fa fa-sun-o style5"></i></span>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 11
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0;padding:20px}
a{text-decoration:none}
.PopularPosts{width:300px;margin:auto;border:1px solid #eee;padding:20px}
#PopularPosts1{margin:auto;display:table}
#PopularPosts1 h2{background:#222;color:#fff;letter-spacing:2px;margin:0 0 20px;padding:13px 0;text-transform:uppercase;text-align:center;font-size:12px}
#PopularPosts1 h2:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #222;content:"";display:block;height:0;left:50%;margin:0 0 0 -5px;position:relative;top:18px;width:0;z-index:10}
#PopularPosts1 ul{counter-reset:popularcount;padding:0;margin:0}
#PopularPosts1 ul li:first-child{width:100%;max-height:100%}
#PopularPosts1 ul li:nth-child(even){}
#PopularPosts1 ul li{list-style:outside none none;box-sizing:border-box;position:relative;width:50%;margin:0;padding:0;overflow:hidden;float:left;transition:all 0.31s ease 0s}
#PopularPosts1 ul li:hover{opacity:1}
#PopularPosts1 .item-thumbnail{margin:0;width:100%}
#PopularPosts1 .item-thumbnail a{display:flex}
#PopularPosts1 .item-thumbnail::after{background:rgba(0,0,0,0.85) none repeat scroll 0 0;color:#fff;font-size:18px;font-weight:bold;content:counter(popularcount,decimal);counter-increment:popularcount;height:30px;line-height:30px;left:0;list-style-type:none;position:absolute;text-align:center;top:0;width:30px;z-index:4}
#PopularPosts1 ul li img{box-sizing:border-box;width:100%;height:100%;object-fit:cover;padding:0}
#PopularPosts1 .item-content:hover .item-title a,#PopularPosts1 .item-thumbnail-only:hover .item-title a{background:rgba(0,0,0,0.1) none repeat scroll 0 0;visibility:visible;opacity:1}
#PopularPosts1 .item-title a{bottom:0;color:#fff;left:0;font-weight:bold;opacity:0;padding:10px;position:absolute;right:0;text-align:center;visibility:hidden}
#PopularPosts1 .item-snippet{display:none}
a img:hover{filter:saturate(250%)}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<h2>POPÜLER YAYINLAR</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 10
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0;padding:20px}
a{text-decoration:none}
.PopularPosts{width:300px;margin:auto;border:1px solid #eee;padding:20px}
.PopularPosts h2{font-size:16px;letter-spacing:normal;font-weight:600;text-transform:uppercase;display:block;overflow:hidden;margin:0;padding-bottom:15px}
.popular-posts ul{margin:0;padding:0;counter-reset:count}
.popular-posts li{display:block;overflow:hidden;margin-bottom:15px;position:relative}
.popular-posts li:before{counter-increment:count;content:counter(count);width:25px;height:32px;font-size:13px;line-height:25px;background:#69ad46;color:#fff;text-align:center;position:absolute;left:10px;margin-top:0;z-index:2;-webkit-clip-path:polygon(0 0,100% 1%,100% 100%,48% 78%,0 100%);clip-path:polygon(0 0,100% 1%,100% 100%,48% 78%,0 100%)}
.popular-posts li:last-child{border:0;margin:0;padding:0}
.item-thumbnail-only{position:relative}
.popular-posts li .item-thumbnail{height:180px;background-color:#111}
.PopularPosts ul li img{box-sizing:border-box;width:100%;height:100%;object-fit:cover;padding:0}
.popular-posts li .item-content{margin:0;padding:0;border:1px solid #eee;border-top:0}
.popular-posts li .item-title{font-size:15px;padding:15px;padding-bottom:5px;font-weight:600;line-height:21px;max-height:42px;overflow:hidden}
.popular-posts li .item-title a{color:#222}
.popular-posts li .item-snippet{display:inline-block;font-size:13px;font-weight:300;color:#222;padding:15px;padding-top:5px;letter-spacing:.02em;line-height:24px;margin-top:5px}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<h2>POPÜLER YAYINLAR</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 9
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0;padding:20px}
a{text-decoration:none}
#PopularPosts1{width:300px;margin:auto;border:1px solid #eee;padding:20px}
.PopularPosts h2{font-size:18px;margin:0 0 20px 0;padding:0}
.popular-posts ul{margin:0;padding:0}
.popular-posts ul li{border-bottom:1px solid #eee;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 0;font-size:20px;font-weight:bold;color:#949494;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #eee}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#444;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;text-transform:none}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<h2>POPÜLER YAYINLAR</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 8
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0;padding:20px}
a{text-decoration:none}
#PopularPosts1{width:300px;margin:auto;border:1px solid #eee;padding:20px}
.PopularPosts h2{line-height:20px;color:#fff;font-size:14px;text-transform:capitalize;background:#333;border:2px solid #333;margin:0 0 0.3em 0;padding:0 10px;display:table;font-weight:normal}
.PopularPosts ul{position:relative;padding:0;list-style:none;display:block;margin:auto;height:auto}
.PopularPosts img{width:100%;object-fit:cover;padding:0!important;height:100%!important}
.PopularPosts .item-thumbnail{float:left;width:100%;height:100px;min-width:75px;min-height:75px;border-radius:100%;margin-right:0!important;margin:0!important}
.PopularPosts .item-snippet{height:31px;overflow:hidden;font-size:12px;line-height:16px;margin-top:2px;color:#868686;display:none!important}
.PopularPosts .item-title{background-color:rgba(0,0,0,0.43);position:absolute;text-align:start;margin-top:0;height:100px;width:100%;display:table-cell;vertical-align:middle;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;line-height:22px;font-size:15px;padding:0;height:100px;color:#fff;margin:auto;text-align:center;display:table-cell;vertical-align:middle}
.PopularPosts .item-thumbnail img:hover{opacity:.8}
.PopularPosts{transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.PopularPosts .widget-content ul li{position:relative;display:-webkit-box;padding:0.3em 0!important}
.PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0!important}
.PopularPosts .widget-content ul li:hover .item-title{background-color:rgba(0,0,0,0.85)}
.PopularPosts .item-title a{font-weight:600;color:#fff;padding:28px;text-align:center;display:block}
.PopularPosts .item-title a:hover{color:#fff}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<h2>POPÜLER YAYINLAR</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 7
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{background:#efefef;color:#000;font-family:'Fira Sans Condensed',sans-serif;margin:0;padding:20px}
.PopularPosts{position:relative;overflow:visible;box-sizing:border-box;margin:auto}
.PopularPosts.widget{background:#fff;width:320px;box-shadow:2px 2px 3px rgba(0,0,0,.05)}
.widget-content{padding:0 20px 20px 20px}
.PopularPosts h2{font-size:20px;font-weight:400;letter-spacing:1px;color:#222;-ms-box-shadow:0 3px 7px rgba(0,0,0,.07);-o-box-shadow:0 3px 7px rgba(0,0,0,.07);-webkit-box-shadow:0 3px 7px rgba(0,0,0,.07);box-shadow:0 3px 7px rgba(0,0,0,.07);padding:15px 20px;margin:0;border-bottom:1px solid #eee;z-index:2;position:relative}
#PopularPosts1 .item-thumbnail::after{background:#ff3c36 none repeat scroll 0 0;border:0;border-radius:0;color:#f6f6f6;content:counter(popularcount,decimal);counter-increment:popularcount;height:2.5em;line-height:2.5em;left:0;font-weight:bold;list-style-type:none;position:absolute;text-align:center;top:0;width:1.5em;z-index:4}
#PopularPosts1 ul{counter-reset:popularcount;margin:0;padding:0}
.PopularPosts ul{margin:0;padding:0;list-style:none}
.PopularPosts ul li{position:relative;margin:20px 0 0}
.PopularPosts ul li img{display:block;width:100%;height:170px}
.PopularPosts .item-title{position:absolute;bottom:0;padding:30px}
.PopularPosts .item-title{padding:0 20px 15px}
.PopularPosts .item-title{background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);width:100%;box-sizing:border-box}
.PopularPosts .item-title a{font-size:18px;color:#fff;text-decoration:none}
.PopularPosts .item-thumbnail a:before{content:'';transition:opacity .4s ease;position:absolute;bottom:0;left:0;right:0;top:0;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);opacity:.8}
.PopularPosts .item-thumbnail a:hover:before{opacity:.6}
.PopularPosts .item-snippet{font-size:14px;line-height:1.5em;padding:20px 0;border-bottom:1px solid #ddd;display:none}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<h2>POPÜLER YAYINLAR</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 6
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');body{font-family:'Oswald',sans-serif;margin:0;padding:20px}
a{color:#222;text-decoration:none}
.widget{position:relative;overflow:visible;box-sizing:border-box;width:320px;margin:auto;border:1px solid #eee;padding:0}
ul{list-style:none;margin:0 0 0;padding:0 0 0}
.widget h2{background:#fff;border-bottom:4px solid #fbc701;color:#eb1914;display:inline-block;font-size:20px;font-weight:600;letter-spacing:-0.8px;line-height:21px;margin-bottom:10px;margin-left:15px;padding:3px 0;position:absolute;text-align:left;top:-15px;word-spacing:3px}
h2{margin:0}
.widget-content{color:#333;font-size:15px;margin-top:22px}
.widget-content{padding-left:15px;padding-right:15px;padding-bottom:13px}
.PopularPosts .item-thumbnail img{padding-right:0!important;height:auto;width:120px}
.PopularPosts ul li:first-child .item-thumbnail{float:none;position:relative;margin:0}
.PopularPosts ul li:first-child .item-title a{bottom:17px;color:white!important;font-size:20px;font-weight:600;line-height:22px;padding:0 14px;position:absolute}
.PopularPosts .widget-content ul li:last-child .item-thumbnail{margin-bottom:0!important}
.opin .opall:nth-last-of-type(1) .opp{margin-bottom:0}
.PopularPosts ul li:first-child .item-thumbnail img{width:100%}
.PopularPosts .widget-content ul li{padding:14px 0 6px!important;counter-increment:popularcount;display:grid;position:relative;border-bottom:1px solid #ededed}
.popular-posts ul li a{color:#222;font-size:13px;font-weight:600;line-height:17px;display:block;position:relative;text-decoration:none}
.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding-top:5px!important}
.PopularPosts ul li:first-child .item-thumbnail:before{background:rgba(0,0,0,0) linear-gradient(to bottom,transparent 0,rgba(13,13,13,0.93) 100%) repeat scroll 0 0;bottom:0;content:"";display:block;height:100px;left:0;position:absolute;right:0;width:100%;z-index:9}
.PopularPosts .item-title{position:relative;z-index:9}
.PopularPosts .widget-content ul li:first-child:before{content:counter(popularcount);font-size:60px;padding:10px 12px}
.PopularPosts .widget-content ul li:before{border-radius:2px;color:rgba(255,255,255,0.52);content:counter(popularcount);font-size:40px;font-weight:600;line-height:5px;padding:12px;position:absolute;top:28px;z-index:9}
.PopularPosts .item-thumbnail{float:left;margin:0 5px 5px 0}
.PopularPosts .item-thumbnail{margin:0 15px 5px 0}
.PopularPosts .item-snippet{display:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0!important}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<div class="widget-title">
<h2>POPÜLER YAYINLAR</h2>
</div>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 5
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');body{font-family:'Oswald',sans-serif;margin:0;padding:20px}
a{color:#222;text-decoration:none}
.widget{position:relative;overflow:visible;box-sizing:border-box;width:320px;margin:auto;border:1px solid #eee;padding:20px}
ul{list-style:none;margin:0 0 0;padding:0 0 0}
.PopularPosts .quickedit > img{height:19px!important;width:22px!important}
h2{font-size:17px;color:#222;font-family:'Oswald',sans-serif;font-weight:normal;text-transform:uppercase;border-bottom:4px solid #222;background-position:0 50%;background-repeat:repeat-x;font:normal normal 16px Oswald;margin-bottom:5px;margin-top:0;padding:0 0 10px 0;text-transform:uppercase}
.PopularPosts .item-thumbnail img{padding:0;height:150px;width:100%;display:block;object-fit:cover}
.PopularPosts .item-thumbnail{margin:0 5px 0 0}
.PopularPosts .item-title{font-family:'Oswald',sans-serif;font-weight:normal;padding-bottom:.2em;text-shadow:0 1px 0 #fff}
#side .PopularPosts .widget-content{padding:10px 20px}
.PopularPosts li{display:block;padding:10px 0!important;border-bottom:1px solid #eee}
.PopularPosts li:last-child{border-bottom:none}
.PopularPosts li .item-thumbnail{width:100%;height:150px;margin-bottom:10px}
.PopularPosts li .item-title{font-size:15px}
.PopularPosts li .item-title a:hover{color:#555}
.PopularPosts li .item-snippet{font-size:12px;line-height:1.5em;margin:10px 0 0 0;display:none}
.PopularPosts li .item-title a{color:black}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<div class="widget-title">
<h2>POPÜLER YAYINLAR</h2>
</div>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Popüler Yayınlar Widget Tasarımı 4
CSS Widget<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');@import url('https://fonts.googleapis.com/css?family=Montserrat');body{background:#ececec;font:normal bold 14px 'Montserrat';margin:0;padding:20px}
a{color:#222;text-decoration:none}
.widget{position:relative;overflow:visible;box-sizing:border-box;width:320px;margin:auto}
ul{list-style:none;margin:0 0 0;padding:0 0 0}
.item-snippet{color:#555;line-height:1.5em}
#PopularPosts1 img,#PopularPosts2 img{float:left;margin:0;width:100%;height:auto;min-height:72px}
.PopularPosts .item-thumbnail{width:320px;height:180px;overflow:hidden;position:relative}
#PopularPosts1 .item-title{line-height:1.2em}
.PopularPosts .widget-content ul li{list-style-type:none;margin:0}
.PopularPosts .widget-content{padding-bottom:5px}
.PopularPosts .item-control{display:none}
.PopularPosts .widget-content li .item-title a{line-height:1.2em;color:#fff;width:80%;position:absolute;top:120px;left:15px;text-shadow:1px 1px 0 rgba(0,0,0,0.9)}
.PopularPosts .item-thumbnail>a:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);-webkit-transition-duration:1.0s;-moz-transition-duration:1.0s;-o-transition-duration:1.0s}
.PopularPosts .item-thumbnail a:hover:before{background:none}
.PopularPosts .item-thumbnail{width:100%;height:180px;position:relative}
.PopularPosts .item-thumbnail:hover,.PopularPosts .widget-content ul li:hover .item-title a{color:#ffcc00;text-shadow:1px 1px 0 rgba(0,0,0,0.9)}
.PopularPosts .item-snippet{line-height:1.5em;color:#555;padding:15px;font-size:12px;font-weight:normal}
.PopularPosts .widget-content ul li{background:#fff;margin-top:15px;padding:0;position:relative;-moz-box-shadow:1px 1px 2px #cccccc;-webkit-box-shadow:1px 1px 2px #ccc;-o-box-shadow:1px 1px 2px #ccc;-ms-box-shadow:1px 1px 2px #ccc}
.PopularPosts .widget-content ul li:nth-child(1){margin-top:0}
.PopularPosts .widget-content ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#fc0;text-align:center;top:3px;left:12px;margin:9px 0;font-size:16px;padding:0;font-weight:normal;line-height:normal;transition:all .3s;z-index:1}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005'}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006'}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006'}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006'}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006'}
</style>
</head>
<body>
<div class="widget PopularPosts" id="PopularPosts1">
<div class="widget-title">
<h2>POPÜLER YAYINLAR</h2>
</div>
<div class="widget-content popular-posts">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">
<img alt="Disqus Bağlantı Butonları" title="Disqus Bağlantı Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gEAPqtB9-wq2rrf63YHOllDSRa92Wa7Jc1sA8XkQGcQ-W3ww2ej6opHMPeFDBf7OjQxjztvlgyssmZgruToHZRsuSdN3HzJDQRJtf4C-P-t3rYx-cl0BLNW9NgZSGGiSb7NHlvWjpuM-/s1600/disqus-buttons.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/disqus-baglant-butonlar.html">Disqus Bağlantı Butonları</a></div>
<div class="item-snippet">Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizle...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">
<img alt="WhatSapp Paylaşım Ve Sohbet Butonları" title="WhatSapp Paylaşım Ve Sohbet Butonları" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg5O551Zgzmg0fMipv4Mx9nS2jKMMGmabUiT8zO7QsxUPUnF7WjBq1YfuYwtqVS3TIF4KoWfxXuWT2ihvOjxY3lD_dFMy5ddoHt0ixdY4C0HhLv7gE9VvKlCvAU0-_AB9rtbFn6CBlVF0/s1600/whatsapp.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/whatsapp-paylasm-ve-sohbet-butonlar.html">WhatSapp Paylaşım Ve Sohbet Butonları</a></div>
<div class="item-snippet">WhatSapp'ın paylaşım butonu ve sohbet butonlarını herhangi bir kodlama yada javaScript kullanmadan nasıl oluşturacağın ile ilgili bi...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">
<img alt="Blogger'da Site Haritası Sayfası Oluşturma" title="Blogger'da Site Haritası Sayfası Oluşturma" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcw0UpfIaf5k_l4ByEMlYRNaLJa8LA35eafkvMyDBPRKOtiiKWcFNBbrHpeNBkCRFWpU57JsT4ubJMLHW-_QGOCCw8sYJ7UtsYMyRPOfDHc4lTmwdjEjDcFaaPzhM198AlWjsXSx86jwF/s1600/sitemap.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/10/bloggerda-site-haritas-sayfas-olusturma.html">Blogger'da Site Haritası Sayfası Oluşturma</a></div>
<div class="item-snippet">Bu yazımızda blog sitesinde site haritası oluştuşturmayı ve site haritasının özelliklerini paylaşacağım. Öncelikle, neden blog sitelerin...</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">
<img alt="Blog Yazılarını Sütunlara Bölme Eklentisi" title="Blog Yazılarını Sütunlara Bölme Eklentisi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUSIzLWN3rUiUB7N5IUjUGlcPdpGOyiUiF56JLd0BntRXD_ByGs00eSPlYvpDSHfmmL46BQirsECY2bT-Lj_wsSCL1zp5W3j0p949FW1808Yq0Ty9nA04hGdfWvTkw_V9IagxA9cqt95m/s1600/column.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/blog-yazlarn-sutunlara-bolme-eklentisi.html">Blog Yazılarını Sütunlara Bölme Eklentisi</a></div>
<div class="item-snippet">Bu yazımızda blog yazılarının yan yana sütunlar halinde bölmesi ile ilgili bilgiler paylaşacağım.</div>
</div>
<div class='clear'></div>
</li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">
<img alt="Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" title="Google+'da Uygunsuz İçeriği Rapor Etme ve EngellemeGoogle+'da Uygunsuz İçeriği Rapor Etme ve Engelleme" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQvy4mVsmsOznYhJxqLiTMophBb72WywN-PhDJf6rn7alUEJ7u0eGfnC3uwQOsTw-WuAwgbZyyU5-sFTzSbo5OtfpKQLbL-PkygNu8Vbnr-pipT2rq-ahR5bgGNfXOenTwlIOBV1eCw27/s1600/google-plus.png"/>
</a>
</div>
<div class="item-title">
<a href="https://bloggereklentileri.blogspot.com.tr/2017/11/googleda-uygunsuz-icerigi-rapor-etme-ve.html">Google+'da Uygunsuz İçeriği Rapor Etme ve Engelleme</a></div>
<div class="item-snippet">Google+'da uygun olmayan içerikleri filtreleme imkanı maalesef bulunmuyor. Bu nedenle, kullanıcılar tarafından uygunsuz içerik olara...</div>
</div>
<div class='clear'></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)