CSS KODLARI etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS KODLARI etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Blogger Kod Penceresi Oluşturma

Pazartesi, Ekim 19, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
blogger-kod-penceresi-olusturma

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>
Sağlıcakla kalın...
 Kaynak:http://goo.gl/XVZPjs

Otomatik Slider Eklentisi (Css ile)

Cumartesi, Mayıs 16, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg


Merhaba arkadaşlar,
bu yayınımda sizlere blogunuza ekleyebileceğiniz otomatik geçen slider eklentisiden bahsedeceğim.
Otomatik olarak geçen slider manşet eklentisini gadget olarak da kullanabilirsiniz.Ben Gadget olarak denedim ama Gadget deilde blogda da kullanabilirsiniz blog kodlarından koymak istediğiniz yere koyalabilirsiniz.

Kullanımı

ADIM 1: Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve sonra Ctrl + F tuşlarına basarak ]]></b:skin> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırın.





ADIM 2 :Eklemek istediğiniz yere aşağıdaki kodları ekliyoruz ben Gadget olarak ekledim.
Gadget olarak eklemek için Blogger Admin Panel'inden Yerleşim > Gadget Ekle diyoruz.




yukarıda http://kodblogcum.blogspot.com olan yere kendi blogunuzu yazarak uygulayabilirsiniz.

Memuat...

Blogger Slider Manşet Eklentisi Otomatik

Pazar, Mart 08, 2015 16 Yorumlar icon18_edit_allbkg

Merhaba Arkadaşlar,bu yayınımda sizlere blogunuzda kullanabileceğiniz slider manşet eklentisini sunacağım.Biraz bahsedeyim bu eklentiden aşağıda anlatmış olduğum adımları uyguladıktan sonra kendisi otomatik olarak resimleri üzerindeki yazıları otomatik olarak ekliyor.Güzel ve kullanışlı bir eklentidir.Blogunuzda şık duracağını düşünüyorsanız ekleyebilirsiniz.
Eklemek için adımları uygulayınız.

Adım 1:Öncelikle css kodunu ekliyoruz Şablon > Html'yi Düzenle diyip ]]></b:skin> kodunu aratıp buluyoruz ve aşağıdaki kodu hemen üstüne ekliyoruz.



Adım 2:Daha sonra yine şablonda </head> kodunu aratıyoruz ve aşağıdaki kodları hemen üstüne ekliyoruz.


Adım 3:En son işlem ise HTML kodlarını ekliyiceğiz yanlız bu kodu siz sliderin nerde gözükmesini istiyorsanız oraya ekliyiniz eğer blogunuzda blog yayınlarının hemen üstünde görmek istiorsanız şablon da  main-wrapper kodunu aratıp blog kayıtlarının hemen üstüne kodblogcum.blogspot.com yazan yere kendi site adresinizi yazıyorsunuz.



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