KODBLOGCUM | Kod Paylaşımı

İnvision Responsive Blogger Teması Türkçe

2016-01-07T20:20:00.001+02:00

Selamlar arkadaşlar ,

bu yayınımda Arlina Design'in 2016 yılında ücretsiz olarak paylaştığı bir temadan bahsedeceğim.Sade ve zarifliği ile kullanabileceğiniz blogger teması.

Temanın Özellikleri
Responsive
SEO Dostu
Mobile Uyumlu
Dinamik Şablon
Adsense Uyummlu
Kişisel Blog İçin İdeal
Disqus Yorum Sistemi
Otomatik Devamını Oku Eklentili
Responsive Menü
Yukarı Çık Eklentili
Abone Ol Widget Eklentili
İletişim Formu Eklentili

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

İvonesia Kişisel Blogger Teması Türkçe

2015-12-28T10:02:00.004+02:00

Selamlar herkese uzun zaman sonra yeni bir temayla karşınızdayım.İvonesia blogger teması sadeliği ile kullanabiliceğiniz bir tema olabileceğini düşünüyorum.

Temanın Özellikleri

-Responsive Kişisel Tema

-Hazır Slider Eklentili

-Hazır Reklam Alanları

-Adsense Reklam Yerleşime Uygun

-Turuncu ve Beyaz Ağırlıklı

-Temaya Özel Abone Ol Eklentisi

-Kişisel Alanlarda kullanılabilir.

Tema Kurulumu ve Eklentileri İndirdiğiniz Dosyada Mevcuttur.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

Minima Colored Blogger Teması Türkçe(İstek Tema Üzerine)

2015-11-22T03:48:00.000+02:00

Selamlar arkadaşlar,

bu yayınımda istek tema üzerine gelen minima colored 3 temasını sunacağım.Tema yine bir Arlina tasarımı sade ve çok hoş bir tema ve temada yayın içi kullabileceğimiz güzel eklentileri de mevcut lafı fazla uzatmadan temanın özelliklerini sunayım.

Temanın Özellikleri

-Responsive Türkçe Tema

-Mavi ve Beyaz Ağırlıklı

-Adsense Uyumlu

-Reklam Alanı için Widget Uyumu

-Kişisel Alanlar için kullanılabilir.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;
-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Temanın Eklentileri İndirdiğiniz Dosyada Mevcuttur.(İletişim Sayfası,Sitemap,Demo ve Download Butonu,Mesaj Kutuları,Temaya Özel Kod Penceresi Kodları)

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

3 Stil Popüler Yayınlar Eklentisi

2015-11-08T17:48:00.000+02:00

Merhaba arkadaşlar bu yayınımda sizlere yine güzel bir blogger eklentisinden bahsedeceğim.Popüler yayınlarınızın daha havalı durmasını sağlayacak üç stil kendinize uygun olanı seçip kullanabilirsiniz.

İlk önce nasıl kurulacağından bahsedeyim her bir stil için css kodlarını]]><b:skin>veya </style>kodlarının üstüne ekliyoruz.

Stil1:


/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

Stil 2:

/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

Stil 3:

/* Popular Post Style 3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

Şimdi stiller için javascript kodlarını ekliyoruz.Kodları </body> kodunun üstüne ekliyoruz.
Stil 1:


<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

Stil 2:

<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Stil 3:


<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

Widget Ayarı:

Hepsi bu kadar

Yardım için yoruma yazabilirsiniz..Sağlıcakla Kalın...

Kaynak:http://goo.gl/IMkLuH

Blogger Site Haritası Oluşturma(Sitemap)

2015-10-29T20:36:00.001+02:00

Selamlar herkese bu yayınımda sizlere blogger da sitemap oluşturmadan bahsedeceğim.Blog ziyaretçilerin daha kolay dolaşması için hazırlanmış hoş görünmlü güzel bi eklenti.

Nasıl kurulacağından bahsedeyim

Blogger Panel den > Sayfalar > Yeni Sayfa diyerek HTML kısmına aşağıdaki kodu yapıştıyoruz.

<style scoped="" type="text/css">
#head-tab{background:#51a8e9;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #51a8e9}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#51a8e9;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>

<div id="head-tab">
Site Haritası</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
    blogUrl: "blog adresiniz", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "Yeni!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " <em style='color:#F2784B;'>Yeni</em>" // HTML for the "Yeni!" text
};
</script>
<script async="async" src="https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js"></script>

Yukarıda blog adresiniz yazan yere kendi adresinizi yazın.
Mavi renk yerine kendi istediğiniz renk ile değiştirmek için kodlardan 51a8e9kodunu aratın ve yerine kendi renk kodunuzu girin.

Demo

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Kaynak:http://goo.gl/wZJg31

Blogger Otomatik Slider Manşet Eklentisi

2015-10-27T23:34:00.000+02:00

Merhaba arkadaşlar,

bu yayınımda sizlere güzel bi otomatik slider manşet eklentisinden bahsedicem.

Kurulumu:

Blogger Yerleşimden Gadget Ekle > Html /JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Daha sonra blog adresiniz yazan yere kendi blog adresinizi yazıyorsunuz bu kadar.

<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"blog adresiniz",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Demo

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

MinimaStylo Kişisel Blogger Teması Türkçe

2015-10-20T17:00:00.001+03:00

Merhaba arkadaşlar,

bu yayınımda sade güzel bir blogger temasından bahsedeceğim.Minima Stylo blogger teması hemen temanın özelliklerinden bahsedeyim.

Temanın Özellikleri

-Responsive Blogger Teması

-Blogger Türkçe Tema

-Hazır Reklam Alanı

-Demo & İndir Eklentili

-Sade ve Hızlı

-Adsense Uyumlu

-Kişisel alanda kullanılabilir.

Tema Kurulumu
-Temayı aşağıdan indirdikten sonra;
-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Kod Penceresi Oluşturma

2015-10-19T18:31:00.000+03:00

Merhaba arkadaşlar,bu yayınımda sizlere bloğunuzda kullanabileceğiniz kod pencerelerini sunacağım.

Eğer bloğunuzda yayınlarda html,css,javascript gibi kodlar paylaşıyorsanız ve bunları pencere içine almak istiyorsanız aşağıdaki adımları uygulayın.

Adım 1:Aşağıdaki css kodunu ]]><b:skin> veya </style> kodunun üstüne ekliyoruz.

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Adım 2:Aşağıdaki JavaScript kodunu</body> kodunun hemen üstüne ekleyin.


<script type="text/javascript">
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>
');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Adım 3:Şimdi ise kullanım şeklini göstereyim hangi şekilde kullanmak istiyorsak aşağıdaki koddan seçiyoruz.

<pre class='code code-html'><label>HTML</label><code>...Html kod için</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Css kod için ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... JavaScript kod için ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... jQuery kod için  ...</code></pre>


Demo Görüntü

Sağlıcakla kalın...


 Kaynak:http://goo.gl/XVZPjs

İnvert Kişisel Responsive Blogger Teması Türkçe

2015-10-06T01:51:00.000+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere Arlina Design'in yeni paylaştığı tema olan İnvert Style temasını sunacağım.

Gerçekten yine bir tasarım harikası temada bir çok eklenti mevcuttur.

Temanın Özellikleri

-Responsive Blogger Teması

-Açık Renk Tasarım

-Türkçe Tasarım

-Yeni Sidebar Görünümü

-Renkli Menü Tasarımı

-Demo ve İndir Eklentili

-İletişim Sayfa Eklentili

-Kişisel Alan için ideal

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Temadaki bazı eklentiler indirdiğiniz dosyada mevcuttur.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger İletişim Formu Oluşturma(Google Form ile)

2015-09-30T21:04:00.002+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere blogger kullanırken çok güzel ve pratik bi eklenti diyebileceğimiz Google'dan faydalanarak bloggerımıza iletişim sayfası oluşturabileceğiz.Blogger kullanan kullanıcıların en çok ihtiyaç duyduğu sayfa olan iletişim sayfasını oluştuma için aşağıdaki adımları uyguluyoruz.

RESİMLİ ANLATIM

Adım 1:

İlk önce https://www.google.com/intl/tr_tr/forms/about/ adresine giriyoruz ve Google Formlar'a git diyoruz.

Adım 2:

Tıkladığımız ekranda aşağıdaki yer açılacaktır.Resimdeki gibi formu oluşturuyoruz.

Adım 3:

Formu oluşturduktan sonra tasarım kısmına geliyoruz "Temayı Değiştir" alanına geliyoruz.

Adım 4:

Özelleştir kısmından yazıların rengini,üst resmi,arkaplan vs. yerlerini düzenliyoruz.

Adım 5:

Daha sonra Yanıtları Görüntüle diyoruz ve ordan Araçlar sekmesinden "Bildirim Kuralları"ndan mesaj geldiğinde e-posta adresinize hemen mi yoksa 24 saat içerisinde mi bildirimini ayarlıyoruz.

Adım 6:

Daha sonra Form sekmesine gelip Formu Web Sayfasına Yerleştir diyoruz ve aşağıdaki resimlerdeki adımları uyguluyoruz.

Adım 7:

Tıkladıktan sonra aşağıdaki gibi bi ekran açılacaktır.Aşağıdaki ekrandaki yerde formun geniş ve yüksekliğini ayarlıyoruz ve kodu kopyalıyoruz.

Adım 8:

Şimdi Blogger Admin Panel'ine gelip Sayfalardan Yeni Sayfa diyoruz ve kodu html kısma yapıştırıyoruz ve kaydediyoruz.

Adım 10:

Daha blogdan iletişim sayfasına bakıyoruz herşey tamamdır...

Evet arkadaşlar Google'dan faydalanarak istediğimiz tarzda iletişim formunu oluşturuyoruz.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Grid Responsive Blogger Teması Türkçe

2015-09-27T19:51:00.001+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere Grid Style Responsive Blogger Temasını sunacağım.Dergi vb. temalar için çok iyi bir tema Seo konusunda güzel bir tema.Güzel ve kullanışlı bir admin paneli mevcuttur.

Temanın Özellikleri

-Responsive Türkçe Tema
-Seo Destekli
-Kolay Admin Panel
-Yeni Haberler Eklentili
-Sekmeli Widget
-Yeni Sosyal Simgeler
-Reklam Yerleşimi Düzgün
-Dergi,Kişisel vb. alanlarda kullanılabilir.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

-Slider i kurmak için Yerleşim > Craousel adlı widgete tıklayıp içine recent yazmanız yeterli...

Sliderin altındaki 3 adet widgeti kullanmak için gadgetlerin içine görünmesini istediğiniz etiketimizi yazıyoruz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

HotMag Magazin Blogger Teması Türkçe

2015-09-06T16:04:00.000+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere ThemeXpose nin paylaştığı güzel bir temayı sizlere sunacağım.Bmag temasına baya benziyor fakat temada birkaç değişmeyle bu halini almış.Tema teknoloji,oyun,kişisel,magazin,dergi,galeri vb.alanlarda kullanabileceğiniz,sade renk uyumu ve kullanıcıların ziyaret oranını artıracak görselliği bu temayı seçmeniz için iyi seçenek.

Temanın Özellikleri

-Responsive Blogger Tema

-Türkçe Blogger Tema

-Slider Eklentili

-Güzel Sosyal Ağ Eklentili

-Sade Renk Uyumu

-Reklam Yerleşime Uygun

-Magazin,Teknoloji,Oyun,Kişisel,Dergi,Genel vb. aslında her alanda kullanılabilir.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

InvertGrid Kişisel Blogger Teması Türkçe

2015-09-01T18:58:00.002+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere ArlinaDesign'in yeni paylaştığı tema olan InvertGrid temasını sunacağım.Her alanda kullanabileceğiniz güzel bir tema.

Temanın Özellikleri

-Responsive Blogger Teması

-Türkçe Responsive Tema

-Slider Eklentili

-Sosyal Medya Eklentili

-Hazır Reklam Alanları

-Kişisel,Galeri,Magazin alanında kullanabilirsiniz.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Slider Kurulumu

-Blogger kodlarından cat1 = 'Android'; kodunu bulun ve Android yerine orada görünmesini istediğiniz etiketteki yayınları görmek için o etiketin ismini yazın.

Demo
İndir

Diğer bazı eklentiler indirme dosyasının içinde mevcuttur.

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz...Sağlıcakla Kalın...

RedXCode Blogger Apk Teması Türkçe

2015-08-07T19:50:00.004+03:00

Herkese selamlar,

bu yayınımda sizlere Arlina Design den değişik bir tema paylaşımından bahsedeceğim.Redxcode Blogger Apk Teması , gerçekten çok hoş bir tasarım insanın içinden apk blog sitesi açası geliyor.Hemen temanın özelliklerinden bahsedeyim.

Temanın Özellikleri

-Responsive Blogger Teması

-Türkçe Responsive Blogger Teması

-Sosyal Paylaşım Eklentili

-Slider Eklentili

-Yukarı Çık Buton Eklentisi

-Hazır Reklam Alanları

-Apk Blogger Teması Türkçe

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Slider kurulumu

-Blogger kodlarından Ctrl + F tuşlarına basarak NivoSlider ı arayın.Aşağıdaki resimdeki yere gelin.

-Slider kodlarından;

src=' ' yazan yere slider resimlerinin url adreslerini ekliyoruz

href=' ' yerine resme tıklandığında hangi adrese gitmesini istiyorsak o adresi yazıyoruz

title=' ' yazan yerede resmin üzerine gelince hangi yazının görünmesini istiyorsak onu yazıyoruz

<img alt=' ' yazan yere ise bloga eklediğiniz resmin açıklamasını yazıyoruz seo açısından önemlidir

Width ve height değerleriyle oynamanıza gerek yok en uygun ayarda yapılmıştır.

Temayı kurduktan sonra soldaki widgetin görünmesi için ;

kodlardan Tavsiye Edilen yazarak aşağıdaki resimde olan yere geliyoruz ve Sosyal yazan yere orda gözükmesini istediğimiz etiketin ismini yazıyoruz ben Sosyal etiketini kullandım siz istediğinizi kullanabilirsiniz ve bu şekilde widgetin gözükmesini sağlayabilirsiniz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz....Sağlıcakla Kalın..

BlanterCraft Kişisel Blogger Teması Türkçe

2015-08-04T19:59:00.001+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere çok güzel bir responsive kişisel blogger temasınından bahseceğim.Blanter Craft temada olan farklı özellikler gerçekten bir tasarım harikası.

Temanın Özellikleri

-Responsive Blogger Teması

-Türkçe Blogger Teması

-Hazır Reklam Alanları

-Aç / Kapa Menü Özellikli

-Sosyal Paylaşım Eklentili

-Yukarı Çık Eklentili

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz....Sağlıcakla Kalın..

ViennaLite2 Kişisel Blogger Teması Türkçe

2015-08-03T13:34:00.001+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere Arlina design den güzel bir temayı sunacağım.Geçen günlerde ViennaLite temasını paylaşmıştım şimdi ise bunun ikinci versiyonunu sunacağım.ViennaLite 2 Responsive Kişisel Blogger Teması.

Temanın Özellikleri

-Responsive Blogger Tema

-Türkçe Tema

-Hazır Reklam Alanları

-Sosyal Medya Butonları

-Mavi ve Beyaz Ağırlıklı

-Kişisel,Magazin alanda kullanılabilir.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz....Sağlıcakla Kalın..

TechWorld Teknoloji Blogger Teması Türkçe

2015-07-29T19:32:00.002+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere TechWorld Responsive teknoloji blogger temasından bahsedeceğim.Sade ve hızlı olan tema kullanabileceğiniz temalar arasında yerini alsın.

Temanın Özellikleri

-Responsive Blogger Teması

-Türkçe Tema

-Sade ve Hızlı

-Hazır Slider Sistemi

-Hazır Reklam Alanı

-Seo Destekli

-Hızlı ve Sade

-Teknoloji,Magazin alanda kullanılabilir.

Tema Kurulumu

-Temayı aşağıdan indirdikten sonra;

-Blogger Admin Panel > Şablon > Yedekle/Geri Yükle > Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.Temadaki slider otomatik olduğu için sadece bunları yapmanız yeterli...

Demo
İndir

Temayı kurarken problem yaşarsanız yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın..

Blogger Hazır Sosyal Paylaşım Eklentisi - 12

2015-07-29T02:33:00.001+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere yeni bir blogger sosyal paylaşım eklentisinden bahseceğim.Kullanışlı zarif oluşu bloğunuza güzel bir hava oluşturacaktır.Üzerine geldiğimizde rengi değişen bu eklentiyi anlatayım.

Nasıl Eklenir?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.


<style>#sosmed{margin:16px auto 5px;}
#sosmed li:hover{background-color:#414b5e;}
#sosmed li{line-height:30px;font-weight:400;margin:auto;margin-bottom:3px;border-radius:5px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
#sosmed li a{padding:5px 5px 3px 14px;display:block;color:#fff;}
#sosmed li i{border-right:1px solid rgba(0,0,0,.2);padding-right:5px;margin-right:5px;width:15px;}
.bg-fb{background:#5772bb;}
.bg-tw{background:#3494e5;}
.bg-gp{background:#e34242;}</style>

<div>
<nav id="sosmed">
<ul>
<li class="bg-fb"><a href="#"><i class="fa fa-facebook"></i> Facebook'ta Takip Et</a></li>
<li class="bg-tw"><a href="#"><i class="fa fa-twitter"></i> Twitter'da Takip Et</a></li>
<li class="bg-gp"><a href="#"><i class="fa fa-google-plus"></i> Google+'da Takip Et</a></li>
</ul>
</nav></div>

# ile olan yerlere sosyal medya adreslerimizi yazıyoruz.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Phantom Kişisel Blogger Teması Türkçe

2015-07-16T03:02:00.001+03:00

Merhaba arkadaşlar,

bu yayınımda sizlere Phantom Kişisel Responsive Blogger Temasından bahsedeceğim.Üç bölümü sade kişisel alanlar için zarif ve responsive tema.

Temanın Özellikleri

-Responsive Blogger Tema

-Türkçe Tema

-Hazır Reklam Alanları

-Sosyal Medya Eklentili

-Zarif ve Sade

-Kişisel,Güncel Konu için muhteşem bir tema

Demo
İndir

Temayı kurarken problem yaşarsanız yoruma yazabilirsiniz....Sağlıcakla Kalın..

En Çok Tercih Edilen Fontlar 100 Adet

2015-07-14T16:37:00.000+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere photoshop kategorisinden yeni bir konudan bahsedeceğim.Bir önceki photoshop yazımda en çok tercih edilenleri koyarsanız daha iyi olur diyen kullanıcılarım olmuştu bende bu sebepten internette font sitelerinden en çok indirilen 100 yazı fontunu sizlere sunacağım.Bu yazı fontları en az 1 milyon kez indirilen yazı fontlarının bir kaç resmi aşağıda bakabilirisiniz...

İndir

Photoshop 5000 Adet Yazı Fontu

2015-07-12T16:15:00.000+03:00

Merhaba Arkadaşlar,

Bu yayınımda sizlere uzun zamandır paylaşmadığım photoshop kategorisinden yeni bir konu paylaşacağım.Photoshop 5000 adet yazı fontu içerisinde a'dan z'ye kadar bulabileceğiniz muhteşem fontlar mevcut.Tasarım konusunda işinize yarayacak font tipleri ,boyutu 147 Mb tamamı ttf formatındadır.

İndir

Hazır Sosyal Paylaşım Eklentisi - 11

2015-07-11T01:19:00.000+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere yeni bir sosyal paylaşım eklentisinden bahsedeceğim.Sade ve şık bir eklenti üzerine gelince renk değiştiren güzel bir eklenti.

Nasıl Eklenir?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.

-Gerekli düzenlemeleri aşağıda belirttim.

<style>
.social-wrap {
margin:0;
padding:0;
}
.social-wrap ul li{
list-style:none;
border-bottom:none;
margin:0;
padding:0;
}
.social-wrap li a {
margin:0 5px;
padding:0;
width:60px;
height:60px;
float:left;
text-indent:-99999px;
background: #fff;
border:solid 1px #eee;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.social-wrap li a.facebook {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHKG4_GW1__u4ISvAgwPAF-A_bsDrSDzNHQKwAkrknIbAXLP99vGfBQ17kOfTgu28v58kDPYm9_ScBt_-pf3cY40kUFuoP15BjIMFAYAtk5MQSudSvRcs8u_1dkHKy4cL3OPGmW8sGg/s1600/facebook.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHKG4_GW1__u4ISvAgwPAF-A_bsDrSDzNHQKwAkrknIbAXLP99vGfBQ17kOfTgu28v58kDPYm9_ScBt_-pf3cY40kUFuoP15BjIMFAYAtk5MQSudSvRcs8u_1dkHKy4cL3OPGmW8sGg/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTacP7wX4lJy70vLEoe_XQk8YkxszSPuyb8XRqnNkrujIhTXWoZuKIZBQ7sqUMOD3iCGsJ9oPdFrhjQIKrWfu9VEobOsFGeQYm-6de83-CFhoRnHPToQw2vEYsv9oC71gLLoqWZ76Jw/s1600/twitter-1.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTacP7wX4lJy70vLEoe_XQk8YkxszSPuyb8XRqnNkrujIhTXWoZuKIZBQ7sqUMOD3iCGsJ9oPdFrhjQIKrWfu9VEobOsFGeQYm-6de83-CFhoRnHPToQw2vEYsv9oC71gLLoqWZ76Jw/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUK6yUfLvoio3auOJ6I_6T0ES7oFEqalUHjr7dX4apIAFwATnQ3zT2v88fR3UnXxi4dL5xGwTKwovMt4p6hH9P55dQpv4cHymgOBN2VElmVVR4wUsgBcqDKmaC0NZPgCKnMz8u1Io9Q/s1600/google.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUK6yUfLvoio3auOJ6I_6T0ES7oFEqalUHjr7dX4apIAFwATnQ3zT2v88fR3UnXxi4dL5xGwTKwovMt4p6hH9P55dQpv4cHymgOBN2VElmVVR4wUsgBcqDKmaC0NZPgCKnMz8u1Io9Q/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJp6H1mWiF6zOTSLEeH8eXZ4ZTRv9oSqj8RshP5qlNXga2km9uVno18I2fbV_ifwe9qp_IYOjqI-IlqU-RV0TpfoEM0sxDhLUH-hF30X9KjeusEID-KPzTd7O2hTtjm-vyaW9MvIXbiQ/s1600/twitter.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJp6H1mWiF6zOTSLEeH8eXZ4ZTRv9oSqj8RshP5qlNXga2km9uVno18I2fbV_ifwe9qp_IYOjqI-IlqU-RV0TpfoEM0sxDhLUH-hF30X9KjeusEID-KPzTd7O2hTtjm-vyaW9MvIXbiQ/s1600/twitter.png) no-repeat -0px -0px;
}</style>

<div class='social-wrap'>
<ul>
<li><a class='facebook' href='http://www.facebook.com/#' target='_blank'>Facebook</a></li>
<li><a class='twitter' href='http://twitter.com/#' target='_blank'>Twitter</a></li>
<li><a class='google-p' href='https://plus.google.com/#' target='_blank'>Google Plus</a></li>
<li><a class='rss' href='#' target='_blank'>Rss</a></li>
</ul>
</div>

# yazan yerlere sosyal medya adreslerimizi yazıyoruz...

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Vienna Kişisel Blogger Teması Türkçe

2015-07-10T17:19:00.002+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere Vienna Lite kişisel responsive blogger temasının sunacağım.

Kişisel alanda çok iyi olabilecek tasarım.

Temanın Özellikleri

-Responsive Blogger Tema

-Türkçe Tema

-Hazır Reklam Alanları

-Hazır Sosyal Menü Eklentili

-Seo Destekli

-Sade ve Kullanışlı

-Kişisel alanda kullanılabilir

Demo
İndir

Temayı kurarken problem yaşarsanız yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın..

Hazır Sosyal Paylaşım Eklentisi - 10

2015-07-01T14:07:00.001+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere blogger için hazır sosyal paylaşım eklentilerinden onuncusunu göstereceğim.Bir nevi yalancı bir eklenti de diyebiliriz çünkü eklentinin üzerinde takip sayısını kendimiz ayarlayabiliyoruz.Mesela Facebook için 2k+ şeklinde veya istediğimiz takipçi sayısını yazıyoruz.Güzel ve kullanışlı bir eklentidir.

Nasıl Kurulur?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Düzeltmemiz gereken yerleri aşağıda belirttim.

<style>
.btrix-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px; 
    padding: 12px;
}
.btrix-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.btrix-social-slide a {
    text-decoration: none !important; 
   }
.btrix-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.btrix-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>

<div class="btrix-social-slide">
    <ul>
        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/kodblogcum"><p>17</p>Facebook </a></li>
        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/kodblogcum"><p>50+</p>Twitter</a></li>
        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/#"><p>40+&nbsp;</p>Google+</a></li>
        <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/kodblogcum"><p>20+&nbsp;</p>Pinterest</a></li>
        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/kodblogcum"><p>11+</p>RSS</a></li>
    </ul>
</div>

-Yukarda kodblogcum yazan yerlere kendi sosyal medya adreslerimizi yazıyoruz.
-# ile olan yerede Google Plus adresimizi yazıyoruz.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Sayfada Aşağı İnince Sağda Çıkan Sosyal Medya Eklentisi

2015-07-01T13:34:00.001+03:00

Merhaba Arkadaşlar,

bu yayınımda sizlere değişik bir sosyal medya eklentisinden bahsedeceğim.Sayfada aşağı doğru indikçe sağ altta çıkan sosyal medya.Bu eklenti kullanıcınında dikkatini çekecektir sayfalarda dolaşırken sürekli karşısına çıkması sizi sosyal medyada takip etmeye yönlendirir.

Nasıl Kurulur?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapışıtırıyoruz düzeltmemiz gereken yerleri renkli olarak gösterdim.

Bu eklentiyi herhangi bir gadgete ekleyebiliriz illaki sağdaki gadget olacak diye bir şey yok.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtFra9gDN8AT_mmmMboQOLKI1RnJi2ptJmertLZxUm9hQyoBQZFRvpXrU8WV1lMZbvomYZktirqNdwFno_dbeoPMxk_GfomGCjRQLwqg-yRy-oBMqpy1ZG4pUBcodQJdg9v22JQdMi2Q/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div id="socialslide" style="display: none;">
<a href="javascript:void(0);" onclick="return closesocialslide();" style="color: #555555; font-size: 10px; font-weight: bold; position: absolute; right: 10px; top: 14px;">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Sosyal Medyada Takip Et!</span><br />
<div style="float: left; margin: 15px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="float: left; margin: 15px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkodblogcum&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" style="border: none; height: 21px; overflow: hidden; width: 80px;"></iframe></div>
<div style="float: left; margin: 15px;">
<a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/kodblogcum">Takip Et @kodblogcum</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="clear">
</div>

-Yukarda kodblogcum yazan yerlere sosyal medya kullanıcı adreslerimizi yazıyoruz.