WMT Yeni forum temamız aktif.
Değerli WebmasterTakimi.com ziyaretçileri ve üyeleri.Forumumuza hoşgeldiniz.Yeni temamız artık kullanılabilir durumda.Eksiklikler ve hataların giderilmesi için gördüğünüz hataları buradan bize bildirmenizi rica ediyoruz.Tema hakkında yorum yapmak isterseniz burada bulunan konuya yorum yapabilirsiniz.
Reklam
Blogger’da Javascript/JQuery kodlarını Kullanarak Tema Tasarlamak

Büyük ölçekli JavaScript web uygulamanızı barındırmak için bir web sunucusuna mı ihtiyacınız var? O zaman Hostgator ve Bluehost, uygulamanızı hızlıca birkaç saniye içinde yükleyebileceğiniz en iyi web barındırma şirketlerinden birkaçıdır.

Açısal ve Karşıt JavaScript’i (2018), geliştiricilerin çoğunun uygun güvenlik kimlik doğrulaması ile gerçek zamanlı bir web uygulaması oluşturmak için kullandığı bir gerçektir.

Fakat, web sitesi geliştirme işine yeni başlıyorsanız, ve yakın zaman kodlamaya başladıysanız, kodlarınızı yazabileceğiniz ücretsiz bir web barındırma sunucusu arıyor olabilirsiniz. Hiç şüphe yok ki Hostinger, sitenizi barındırabileceğiniz çok yaygın bir web sağlayıcı sağlayabilir.

Bu yazımızda yazacağımız JavaScript uygulamamızı nasıl ücretsiz bir şekilde blogger’da barındıracağımızı sizlere gösreteceğim.

Bir ‘Yapılacaklar Listesi Uygulaması’ yaptım ve böylece sizlere nasıl bu uygulamanın blogger’da ücretsiz olarak yazılacağını sizlere göstereceğim.

İlk olarak, bloğunuza giriş yapın ve ardında Tema Bölümü ve oradan da HTML’i Düzenle bölümüne gelin. Ve sonra bütün kodu silin. Alttaki resme bak.



Ve sonra içine aşağıdaki temel “söz dizimi” kodlarını yapıştırın.

Kod:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
<style>

<!-- your CSS codes -->

</style>
</head>
<body>
<div id='app'>
 <!-- your html codes start -->

 <!-- your html codes close -->
</div>

<b:section id='fixelements' showaddelement='no'/>

<!-- your javascript code starts -->

<!-- your javascript codes close -->
</body>
</html>
Daha sonra yukarıdaki sözdizimi üzerinde bazı yorumları görebilirsiniz. Bu yorumlar arasında kodunuzu eklemeniz gerekiyor. Sadece aşağıdaki kodu ekleyin ('Yapılacaklar listesi uygulamasını barındırmak için).
Aşağıdaki CSS kodunu hemen stil etiketlerinin altına ekle

Kod:
#addTask,#taskName{border:1px solid #eee}#addTask,#del,.fa-trash-o{cursor:pointer}.container{font-size:18px;max-width:400px;text-align:center;padding:15px;background:#fbfbfb;margin:50px auto 0;box-shadow:0 0 1px #333}#del{width:14px;height:14px}.completed{text-decoration:line-through}.incompleted{text-decoration:none}#taskName{padding:6px 12px;box-shadow:0 0 4px #eee;width:60%}#addTask{background:#2251a7;color:#fff;padding:6px 10px;border-radius:0 4px 4px 0}#task-list{margin-top:25px;font-size:16px;text-align:left}table{border-collapse:collapse}table,td,th{border:1px solid #d8d8d8;padding:8px}
Ve aşağıdaki HTML kodlarını ise HTML ile belirtilmiş yere yapıştırın:

Kod:
<div class='container'>
        <input id='taskName' name='task-name' type='text'/><input id='addTask' type='submit' value='Add!'/>
        <div id='task-list'>
        </div>
</div>
Son olarak JavaScript kodunuzu Javascript için ayrılmış kısma yapıştırın

Kod:
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script src='https://cdn.rawgit.com/vishalchopra13/todolist-purejs/25acf8c5/todotask/module.js?x=1'></script>
<script>
//<![CDATA[
    displayData();
    // Add tasks
    $('#addTask').click(function(){
        var input = $('#taskName').val();
        // if the user did not enter the value into the field, return and exit the function.
        if(input === null || input === ''){
            return false;
        }
        _todo.addTask(input); // if the user entered the value into the field then do then add task to the list.
        displayData(); // display teh data realtime.
        _todo.log(); //log the task into the console.
    });     
        
    // tasks status
    $('#task-list').on('click', '#del', function(){
        var name = $(this).attr('data-id');
        var status = $(this).attr('data-status');
        if(status === 'completed'){
            _todo.incomplete(name);
        } else {
            _todo.complete(name);
        }
        displayData();
    });
        
    // delete the task event
    $('#task-list').on('click', '#delme', function(){
        var data = $(this).attr('data-id');
        _todo.delete(data);
        displayData();
    });
                
    // display data function realtime
    function displayData(){
        var counter = 0;
        var listData = _todo.displayData();
        var html = '';
        html += "<table width='100%'>";
        for(var i = 0; i < listData.length; i++){
            html += "<tr><td id='counter' width='10%'>" + counter++ + "</td><td id='del' class='" + listData[i].status + "' data-status='" + listData[i].status + "' data-id='" + listData[i].name + "'>" + listData[i].name + "</td><td id='delme' data-id='" + listData[i].name + "' width='10%'><i class='fa fa-trash-o'></i></td></tr>";
        }
        html += "</table>";
        $('#task-list').html(html);
    }
//]]>
</script>
İşte bu kadar. Şimdi bu şablonu kaydedin ve oluşturduğunuz temayı kullanmaya başlayın.



DEMO UYGULAMA


« önceki Konuya git | sonraki Konuya git »

Şuan bu sayfada bulunan kişiler: 1 kişi (0 üye ve 1 ziyaretçi)
 
Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok
BB kodu Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Seçenekler
Stil



Tüm Zamanlar GMT +2 Olarak Ayarlanmış. Şuanki Zaman: 23:43.

Bize Yazin - Webmaster Forumu - Arşiv - Yukarı git
Powered by vBulletin™ Version 3.8.9 Beta 1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.
Yemek tarifleri