KODBLOGCUM | Kod Paylaşımı

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

Blogger Temaları blogger türkçe tema kişisel-blogger-temalari Responsive Blogger Teması Türkce Responsive Temalar son paylasilanlar Ücretsiz Responsive Temalar

KODBLOGCUM Salı, Ekim 20, 2015 12 Yorumlar

KODBLOGCUM

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

BLOGGER EKLENTİLERİ CSS CSS KODLARI css3 son paylasilanlar

KODBLOGCUM Pazartesi, Ekim 19, 2015 Yorum Yapmak İstermisiniz?

KODBLOGCUM

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

Blogger Temaları blogger türkçe tema kişisel-blogger-temalari Responsive Blogger Teması Türkce son paylasilanlar Türkçe Blogger Temaları Ücretsiz Responsive Temalar

KODBLOGCUM Salı, Ekim 06, 2015 2 Yorumlar

KODBLOGCUM

invertstyle-kisisel-blogger-teması-turkce

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)

BLOGGER EKLENTİLERİ blogger-form-olusturma google form son paylasilanlar

KODBLOGCUM Çarşamba, Eylül 30, 2015 7 Yorumlar

KODBLOGCUM

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.