15 Aralık 2014

Yeni Yıl HTML Kodları ( Blogunuzu Süsleyin)

Merhaba pisicikler aslında bugün paylaşım yapak gibi bir düşüncem yoktu ama bir blogger arkadaşımız kod konusunda bir şey sorunca burada da paylaşmak istedim. Yeni yıl yaklaşıyor. Belki blogunuza biraz renk katarsınız ya da farklı görseller için kullanabilirsiniz. Ben iki tane kod vereceğim. Kodda kırmızı renkle belirtiğim yeri değiştirerek. Blogunuza ekleyebilirsiniz. Sağ üst köşe de gördüğünüz görsel ya da blogu kıpırdatınca sağ alt köşe de çıkan ağaç gibi.

Birinci Kod: Bu kod sağ alt köşede ki ağacın kodu. Kırmızı renkle belirttiğim kodu silerek. Bu mavi süslerle süslenmiş ağaç yerine başka ağaç gif URL kodunu yapıştırıp kullanabilirsiniz. Bu kod ayrıca yukarıya çıkma kodu. En aşağıya indiğinizde resmin üzerine çıktığınızda hızlı bir şekilde sayfanın başına sizi götürür. Kod dostundan yararlanmıştım bu kod için. Ben sadece görsel html kodunu değiştirdim. Karmaşık gibi gelse de çok basit. Hepiniz kolaylıkla yapabilirsiniz. İşte kodun tamamı:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script-
* Modified
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://img0.liveinternet.ru/images/attach/c/0//52/578/52578721_1261124590_0_174ed_5a1df0ca_orig.gif" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Sayfa Başına Dön'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

</script>



İkinci Kod: Bu kod da blogun sağ üst köşesinde görselin çıkmasını sağlayan kod. Süsün kodu aynı şekilde kodda kırmızı renkli kısmı silip bloga koymak istediğiniz görselin URL kodunu yapıştırarak kullanabilirsiniz. 




<div style="position: fixed; top: 0px; right: 2px;"><br /><embed pluginspage
src="http://nsm05.casimages.com/img/2010/11/26//10112612593677697194801.gif" wmode="transparent" type="application/x-shockwave-flash" quality="high" height="170" width="100"></embed></div>

Kırmızı renkli alanı silerken hem başındaki hem sonundaki tırnak işaretlerini silmeyin. Yeni yapıştırdığınız kod ikisinin arasında olmalı. Yoksa kod çalışmaz.

Bu da Bonus: Blogunuza kar yağdırın. Benim sağ taraf gaget kısmına bakarsanız. Orada kar yağıyor. Beyaz arka plan olduğu için pek belli olmuyor mavi renkli karların dışında. Koyu arka planlı bloglar da daha çok belirgin olacaktır. Üstteki iki kodu hangi gagete eklediğiniz önemli değil ama kar kodunu hangi gagete eklerseniz oraya kar yağıyor. Blogun yazı kısmına yağmasını istiyorsanız en üst kısımdaki gagetlere ekleyeceksiniz kodu.

<script type='text/javascript'>
//<![CDATA[
var snowmax=300
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff","#BFE4FF")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=30
var snowminsize=10
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}
function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}

//]]>
</script>

Peki bu HTML KOD ları nereye ekleyeceğiz derseniz.

Yerleşim- Gaget ekle- HTML kod kısmına kodu yapıştırıp- Kaydet 
dediğiniz zaman kodu yerleştirmiş olursunuz. Bu kadar basit. Sadece yapmanız gereken yeni yıl gifleri diye google aratmanız ve beğendiğiniz görselin urlsini yapıştırmanız. Görüşmek üzere.

Sahipsiz Cümleler

19 yorum:

  1. özlemcim çok güzel öneriler :)
    ben de blog url sinin yanına simge nasıl konuluyor onu soracaktım :)
    hani seninkinde kedi var ya onu nasıl yapıyoruz?

    YanıtlaSil
    Yanıtlar
    1. Yerleşime girdiğinde. Sık kullanılan simge diye yer var üst kısımda. Orada düzenleyi tıklıyorsun. Bulduğun iconu seçip yüklüyorsun. İlk başta olmuyor gibi gözükebilir. Ben olmadı ya demiştim ama sabah baktığımda ertesi gün eklediğim kedi iconu çıkmıştı. İconların boyutu önemli bir de. İcon diye arartırsan bulursun.

      Sil
    2. http://www.iconarchive.com/search?q=cat&page=2

      Sil
    3. bilgi için çok teşekkür ederim, yapmaya çalıştım bakalım :)

      Sil
    4. Ben diğer blogunkini de yaptım kelebek şeklinde http://ozlemanarsi.blogspot.com.tr/ sana verdiğim icon adresinden buldum. Beğendiğin icona tıkladığın zaman orada boyutları çıkıyor. Sondan ikinci, veya üçüncüyü seçtim. Çok iri boyutları kabul etmiyor blog. Bir de eklediğimde bir gün sonra görünmeye başladı. Olmadı diye düşünme hemen çıkmayabiliyor.

      Sil
  2. İkisi de çok güzel :)) inşallah yeni yılda güzel olur hepimiz için

    YanıtlaSil
    Yanıtlar
    1. Hepimiz kocaman mutluluk, sağlık ve aşkı olmayanlara da aşk getirsin :)

      Sil
  3. teşekkürler hepsini aldım kullandım.. daha sonra bu kodları mesela sevgililer günü için görsel URL'si ile değiştirebilirmiyiz mesela?

    YanıtlaSil
    Yanıtlar
    1. Bir şey değil. Tabi ki. Kırmızı renkle gösterdiğim gif urls'ini silip bulduğunuz gifin, görselin urls'ini eklemeniz/ ( Kopyalayıp yapıştırmanız) yeterli.

      Sil
    2. tekrar merhaba sevgililer günü için ikonlar buldum ama bunların html kodlarını bulamadım
      http://www.iconarchive.com/show/valentine-icons-by-designbolts/Happy-valentines-day-icon.html bunların html kodları yok mu acaba?

      Sil
    3. Merhaba
      HTML koduna gerek yok. Görselin üzerine sağ tıklayıp URL'sini kopyalayıp. Benim yukarı da anlattığım işlemi yapanız yeterli. Kırmızı renkli yeri silip bulduğunuz iconun URL'sini yapıştıracaksınız. Fakat bazı iconların URL'si kodla uyum sağlayamayabiliyor. Tek sorun o.

      Bu arada bana da güzel bir fikir vermiş oldunuz. Ben de küçük bir değişiklik yapayım. İyi günler. :)

      Sil
  4. Benim yardımcı meleğimmmmmmm bitanesinn!! :*

    Bu arada baby sağ üstteki gözükmüyor :(

    YanıtlaSil
    Yanıtlar
    1. Sen de bitanesin! Benim blogum için diyorsan ben onu kaldırdım. Ama senin blogun için ise bilmiyorum. audrey'in blogunda gözüküyor sağ üst köşedeki kodda bir sorun yok yani. Senin şablondan olabilir. Hazır şablonlar da bazen öyle oluyor.

      Sil
    2. Bir de farklı bir gif bulup kullandıysan kod içinde bazı gifler de çalışmıyor. O da olabilir, deneyerek bulacaksın.

      Sil
    3. Yaptım baby oldu. Süpersin :*

      Sil
  5. Ah Özlem ahh 2015 e az kaldı. Yaşlanıyoruz.. :(

    YanıtlaSil
    Yanıtlar
    1. Sizler yaşlanın ben yaşlanmıyorum :)

      Sil
  6. Nerden buluyosun bunları, ben hiç bilmiyorum vallahi. Çok şirin olmuş hepsi. Yenı yıl heyecanı var burda :)

    YanıtlaSil
    Yanıtlar
    1. Kafasına taktığı şeyi öğrenirim, bulurum. :)

      Sil