0
Kayıt Ol

blogger temasını düzenlemek ve html kodu eklemek

6

●

266

  • 26-06-2024, 13:56:12
    #1
    Gokaaa
    Gokaaa
    İyi günler, ben bir blogger sitesinde yazdığım bir html kodunu tema olarak çalışmasını istiyorum. temanın sadece header kısmı dursun. geri kalan kısımda yazdığım kod olsun ve çalışsın istiyorum fakat hata alıyorum. html kodunun işlevi basit butona basınca sağa sola giden bir top var. Bunu nasıl yapabilirim. alternatif olarak bu kod tek bir sayfada çalışsa da olur hatta daha iyi olur.
    Derdimi karmaşık anlatmadım umarım.
  • 26-06-2024, 14:03:33
    #2
    TURUS
    TURUS
    Buyrun hocam boş blogger teması. HTML kodlarınızı body etiketleri arasına ekleyin. Sayfada sadece sizin kodlarınız çalışacaktır.

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="tr" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/*  ]]></b:skin>
<style id="css">

<!-- CSS kodlarını buraya ekleyin. -->

</style>
</head>
<body>

<!-- HTML kodlarını buraya ekleyin. -->

</body>
<b:section class="bos" id="bos" showaddelement="no" />
</html>
  • 26-06-2024, 15:59:40
    #3
    Gokaaa
    Gokaaa
    TURUS adlı üyeden alıntı: mesajı görüntüle
    Buyrun hocam boş blogger teması. HTML kodlarınızı body etiketleri arasına ekleyin. Sayfada sadece sizin kodlarınız çalışacaktır.

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="tr" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/*  ]]></b:skin>
<style id="css">

<!-- CSS kodlarını buraya ekleyin. -->

</style>
</head>
<body>

<!-- HTML kodlarını buraya ekleyin. -->

</body>
<b:section class="bos" id="bos" showaddelement="no" />
</html>
    hocam yardımınız için öncelikle teşekkür ederim css kısmı çalıştı html kısmını yapınca hata veriyor. Eklemek istediğim kod bu nerede hata yapıyor olabiirim?
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Hareketi</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 20px;
align-items: center;
background-color: #ecf0f1;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter {
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
.colorLabel {
margin-right: 10px;
font-size: 1em;
}
button, select, input[type="color"] {
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button {
background-color: #3498db;
color: white;
}
button:hover {
background-color: #2980b9;
}
select {
background-color: #bdc3c7;
color: #2c3e50;
}
input[type="color"] {
border: none;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="ball"></div>
<div id="controls">
<label class="colorLabel" for="colorPickerBall">Top Rengi</label>
<input type="color" id="colorPickerBall" title="Top Rengi Seç">

<label class="colorLabel" for="colorPickerBg">Arka Plan Rengi</label>
<input type="color" id="colorPickerBg" title="Arka Plan Rengi Seç">

<button id="startStopButton">Durdur/Başlat</button>
<select id="speedSelector" title="Hız Seç">
<option value="1">Hız 1</option>
<option value="2">Hız 2</option>
<option value="3">Hız 3</option>
<option value="4">Hız 4</option>
<option value="5">Hız 5</option>
<option value="6">Hız 6</option>
<option value="7">Hız 7</option>
<option value="8">Hız 8</option>
<option value="9">Hız 9</option>
<option value="10">Hız 10</option>
</select>
<p class="counter" id="movementCounter">0</p>
<p class="counter" id="setCounter">Set: 0</p>
</div>

<script>
const ball = document.getElementById('ball');
const colorPickerBall = document.getElementById('colorPickerBall');
const colorPickerBg = document.getElementById('colorPickerBg');
const startStopButton = document.getElementById('startStopButton');
const speedSelector = document.getElementById('speedSelector');
const movementCounterDisplay = document.getElementById('movementCounter');
const setCounterDisplay = document.getElementById('setCounter');

let posX = window.innerWidth / 2 - 25;
let direction = 1;
let movementCounter = 0;
let setCounter = 0;
let intervalId = null;

const minDuration = 2000; // En düşük hız için (1 kademe) bir tam hareketin süresi 2 saniye
const maxDuration = 500; // En yüksek hız için (10 kademe) bir tam hareketin süresi 0.5 saniye
const stepDuration = (minDuration - maxDuration) / 9; // Diğer kademeler için süre farkı

function calculateVelocity(speedLevel) {
const duration = minDuration - (speedLevel - 1) * stepDuration;
const interval = 1000 / 60; // 60 FPS
return (window.innerWidth - 50) / (duration / interval);
}

ball.style.left = `${posX}px`;

function moveBall() {
const velocityX = calculateVelocity(Number(speedSelector.value));
posX += velocityX * direction;
if (posX <= 0 || posX + 50 >= window.innerWidth) {
direction *= -1;
if (direction === 1) {
movementCounter++;
movementCounterDisplay.textContent = movementCounter;
}
}
ball.style.left = `${posX}px`;
}

function changeBallColor() {
const selectedColor = colorPickerBall.value;
ball.style.backgroundColor = selectedColor;
}

function changeBgColor() {
const selectedColor = colorPickerBg.value;
document.body.style.backgroundColor = selectedColor;
}

function updateSpeed() {
if (intervalId) {
clearInterval(intervalId);
intervalId = setInterval(moveBall, 1000 / 60);
}
}

function startStop() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
posX = window.innerWidth / 2 - 25;
ball.style.left = `${posX}px`;
setCounter++;
setCounterDisplay.textContent = `Set: ${setCounter}`;
} else {
intervalId = setInterval(moveBall, 1000 / 60);
}
}

colorPickerBall.addEventListener('input', changeBallColor);
colorPickerBg.addEventListener('input', changeBgColor);
startStopButton.addEventListener('click', startStop);
speedSelector.addEventListener('change', updateSpeed);

</script>
</body>
</html>
  • 26-06-2024, 16:51:15
    #4
    TURUS
    TURUS
    Bunu deneyin hocam. Scriptte hata var onu da düzenlemeniz gerekiyor.
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='tr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/*  ]]></b:skin>
<style id='css'>
 
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 20px;
align-items: center;
background-color: #ecf0f1;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter {
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
.colorLabel {
margin-right: 10px;
font-size: 1em;
}
button, select, input[type=&quot;color&quot;] {
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button {
background-color: #3498db;
color: white;
}
button:hover {
background-color: #2980b9;
}
select {
background-color: #bdc3c7;
color: #2c3e50;
}
input[type=&quot;color&quot;] {
border: none;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
 
</style>
</head>
<body>
 
<div id='ball'/>
<div id='controls'>
<label class='colorLabel' for='colorPickerBall'>Top Rengi</label>
<input id='colorPickerBall' title='Top Rengi Seç' type='color'/>
 
<label class='colorLabel' for='colorPickerBg'>Arka Plan Rengi</label>
<input id='colorPickerBg' title='Arka Plan Rengi Seç' type='color'/>
 
<button id='startStopButton'>Durdur/Başlat</button>
<select id='speedSelector' title='Hız Seç'>
<option value='1'>Hız 1</option>
<option value='2'>Hız 2</option>
<option value='3'>Hız 3</option>
<option value='4'>Hız 4</option>
<option value='5'>Hız 5</option>
<option value='6'>Hız 6</option>
<option value='7'>Hız 7</option>
<option value='8'>Hız 8</option>
<option value='9'>Hız 9</option>
<option value='10'>Hız 10</option>
</select>
<p class='counter' id='movementCounter'>0</p>
<p class='counter' id='setCounter'>Set: 0</p>
</div>
 
 <script>

<!-- js kodları buraya gelecek. -->

</script>

</body>
<b:section class='bos' id='bos' showaddelement='no'/>
</html>
  • 26-06-2024, 23:13:46
    #5
    Gokaaa
    Gokaaa
    TURUS adlı üyeden alıntı: mesajı görüntüle
    Bunu deneyin hocam. Scriptte hata var onu da düzenlemeniz gerekiyor.
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='tr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[/*  ]]></b:skin>
<style id='css'>
 
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
overflow: hidden;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 20px;
align-items: center;
background-color: #ecf0f1;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.counter {
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
.colorLabel {
margin-right: 10px;
font-size: 1em;
}
button, select, input[type=&quot;color&quot;] {
padding: 10px;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button {
background-color: #3498db;
color: white;
}
button:hover {
background-color: #2980b9;
}
select {
background-color: #bdc3c7;
color: #2c3e50;
}
input[type=&quot;color&quot;] {
border: none;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
 
</style>
</head>
<body>
 
<div id='ball'/>
<div id='controls'>
<label class='colorLabel' for='colorPickerBall'>Top Rengi</label>
<input id='colorPickerBall' title='Top Rengi Seç' type='color'/>
 
<label class='colorLabel' for='colorPickerBg'>Arka Plan Rengi</label>
<input id='colorPickerBg' title='Arka Plan Rengi Seç' type='color'/>
 
<button id='startStopButton'>Durdur/Başlat</button>
<select id='speedSelector' title='Hız Seç'>
<option value='1'>Hız 1</option>
<option value='2'>Hız 2</option>
<option value='3'>Hız 3</option>
<option value='4'>Hız 4</option>
<option value='5'>Hız 5</option>
<option value='6'>Hız 6</option>
<option value='7'>Hız 7</option>
<option value='8'>Hız 8</option>
<option value='9'>Hız 9</option>
<option value='10'>Hız 10</option>
</select>
<p class='counter' id='movementCounter'>0</p>
<p class='counter' id='setCounter'>Set: 0</p>
</div>
 
 <script>

<!-- js kodları buraya gelecek. -->

</script>

</body>
<b:section class='bos' id='bos' showaddelement='no'/>
</html>
    iyi akşamlar hocam. öncelikle forumda yardım ettiğiniz için teşekkür ederim. Ben hala bir sonuca ulaşamadım her seferinde kod hata veriyor. kodun son hali bu bir türlü yapamadım nerede hata yapıyorum js ekleyince hep hata veriyor. İzninizle kodun son halini burada sizinle paylaşmak istiyorum. Yardımcı olursanız sevinirim.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Hareketi</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #BBBBBB;
            overflow: hidden;
            flex-direction: column;
            font-family: 'Arial', sans-serif;
        }
        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FF0000;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .button {
            background-color: #04AA6D;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 5px 10px;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #3a8267;
        }
        #homeButton {
            position: absolute;
            top: 10px;
        }
        #copyrightButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #controls {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #ffffff;
            padding: 10px 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            gap: 15px; /* Increased gap between elements */
        }
        .counter, #speed-controls div {
            margin: 0;
            font-size: 1em;
            font-weight: bold;
            padding: 5px 10px;
            background-color: #ecf0f1;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .settings-panel {
            display: none;
            position: absolute;
            bottom: 80px;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            flex-direction: column;
        }
        .settings-panel p {
            margin: 5px 0;
            font-weight: bold;
        }
        .settings-panel .color-options {
            display: flex;
            gap: 10px;
        }
        .color-options div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #000000;
            cursor: pointer;
        }
        #speed-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        @media (max-width: 600px) {
            #controls {
                flex-direction: column;
                padding: 10px;
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <button id="homeButton" class="button">Ana Sayfa</button>
    <button id="copyrightButton" class="button"><i class="fa-solid fa-copyright"></i> Telif</button>
    <div id="ball"></div>
    <div id="controls">
        <div id="timer" class="counter">00:00</div>
        <div class="counter"><span id="passesCounter">0</span></div>
        <div class="counter">Set: <span id="setsCounter">0</span></div>
        <button id="startStopButton" class="button"><i class="fa-solid fa-play"></i></button>
        <button id="resetButton" class="button"><i class="fa-solid fa-redo"></i></button>
        <div id="speed-controls">
            <label><strong>Hız</strong></label>
            <button id="speedMinus" class="button"><strong>-</strong></button>
            <div id="speedLevel">5</div>
            <button id="speedPlus" class="button"><strong>+</strong></button>
        </div>
        <button id="settingsButton" class="button"><i class="fa-solid fa-cog"></i></button>
    </div>
    <div id="settingsPanel" class="settings-panel">
        <p>Top Rengi:</p>
        <div class="color-options" id="ballColors">
            <div style="background-color: #00008B;" data-color="#00008B"></div>
            <div style="background-color: #2bd768;" data-color="#2bd768"></div>
            <div style="background-color: #FFD700;" data-color="#FFD700"></div>
            <div style="background-color: #FF0000;" data-color="#FF0000"></div>
        </div>
        <p>Arka Plan Rengi:</p>
        <div class="color-options" id="bgColors">
            <div style="background-color: #BBBBBB;" data-color="#BBBBBB"></div>
            <div style="background-color: #7F7F7F;" data-color="#7F7F7F"></div>
            <div style="background-color: #FFFFFF; border: 1px solid #000000;" data-color="#FFFFFF"></div>
            <div style="background-color: #FCE9EB;" data-color="#FCE9EB"></div>
        </div>
    </div>

    <script>
        const ball = document.getElementById('ball');
        const startStopButton = document.getElementById('startStopButton');
        const resetButton = document.getElementById('resetButton');
        const speedMinus = document.getElementById('speedMinus');
        const speedPlus = document.getElementById('speedPlus');
        const settingsPanel = document.getElementById('settingsPanel');
        const settingsButton = document.getElementById('settingsButton');
        const ballColors = document.getElementById('ballColors');
        const bgColors = document.getElementById('bgColors');
        const timerDisplay = document.getElementById('timer');
        const passesCounter = document.getElementById('passesCounter');
        const setsCounter = document.getElementById('setsCounter');
        const speedLevel = document.getElementById('speedLevel');
        const homeButton = document.getElementById('homeButton');
        const copyrightButton = document.getElementById('copyrightButton');

        let posX = window.innerWidth / 2 - 25;
        let direction = 1;
        let passes = 0;
        let sets = 0;
        let intervalId = null;
        let startTime = null;
        let elapsed = 0;

        const minDuration = 2000;
        const maxDuration = 500;
        const stepDuration = (minDuration - maxDuration) / 9;

        const calculateVelocity = (speedLevel) => {
            const duration = minDuration - (speedLevel - 1) * stepDuration;
            return (window.innerWidth - 50) / (duration / (1000 / 60));
        };

        const moveBall = () => {
            const velocityX = calculateVelocity(Number(speedLevel.textContent));
            posX += velocityX * direction;
            if (posX <= 0 || posX + 50 >= window.innerWidth) {
                direction *= -1;
                if (direction === 1) passesCounter.textContent = ++passes;
            }
            ball.style.left = `${posX}px`;
            updateTimer();
        };

        const updateTimer = () => {
            if (startTime) {
                const now = Date.now();
                elapsed = now - startTime;
                const seconds = Math.floor(elapsed / 1000);
                const minutes = Math.floor(seconds / 60);
                timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
            }
        };

        const toggleSettingsPanel = () => {
            settingsPanel.style.display = settingsPanel.style.display === 'none' || settingsPanel.style.display === '' ? 'flex' : 'none';
        };

        const changeColor = (event, callback) => {
            const color = event.target.dataset.color;
            if (color) callback(color);
            settingsPanel.style.display = 'none';
        };

        const changeBallColor = (color) => ball.style.backgroundColor = color;
        const changeBgColor = (color) => document.body.style.backgroundColor = color;

        const updateSpeed = (increment) => {
            let speed = Number(speedLevel.textContent);
            speed = Math.max(1, Math.min(10, speed + increment));
            speedLevel.textContent = speed;
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = setInterval(moveBall, 1000 / 60);
            }
        };

        const startStop = () => {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
                startTime = null;
                startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
                posX = window.innerWidth / 2 - 25;
                ball.style.left = `${posX}px`;
            } else {
                startTime = Date.now() - elapsed;
                intervalId = setInterval(moveBall, 1000 / 60);
                startStopButton.innerHTML = '<i class="fa-solid fa-stop"></i>';
                setsCounter.textContent = ++sets;
            }
        };

        const reset = () => {
            clearInterval(intervalId);
            intervalId = null;
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
            direction = 1;
            passes = sets = 0;
            passesCounter.textContent = setsCounter.textContent = 0;
            timerDisplay.textContent = '00:00';
            startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
            startTime = null;
            elapsed = 0;
        };

        ballColors.addEventListener('click', (event) => changeColor(event, changeBallColor));
        bgColors.addEventListener('click', (event) => changeColor(event, changeBgColor));

        startStopButton.addEventListener('click', startStop);
        resetButton.addEventListener('click', reset);
        speedMinus.addEventListener('click', () => updateSpeed(-1));
        speedPlus.addEventListener('click', () => updateSpeed(1));
        settingsButton.addEventListener('click', toggleSettingsPanel);
        homeButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
        copyrightButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL

        window.addEventListener('resize', () => {
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
        });

        ball.style.left = `${posX}px`;
    </script>
</body>
</html>

        ball.style.left = `${posX}px`;
    </script>
</body>
</html>
  • 26-06-2024, 23:41:35
    #6
    TURUS
    TURUS
    Gokaaa adlı üyeden alıntı: mesajı görüntüle
    iyi akşamlar hocam. öncelikle forumda yardım ettiğiniz için teşekkür ederim. Ben hala bir sonuca ulaşamadım her seferinde kod hata veriyor. kodun son hali bu bir türlü yapamadım nerede hata yapıyorum js ekleyince hep hata veriyor. İzninizle kodun son halini burada sizinle paylaşmak istiyorum. Yardımcı olursanız sevinirim.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Hareketi</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #BBBBBB;
            overflow: hidden;
            flex-direction: column;
            font-family: 'Arial', sans-serif;
        }
        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FF0000;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .button {
            background-color: #04AA6D;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 5px 10px;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #3a8267;
        }
        #homeButton {
            position: absolute;
            top: 10px;
        }
        #copyrightButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #controls {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #ffffff;
            padding: 10px 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            gap: 15px; /* Increased gap between elements */
        }
        .counter, #speed-controls div {
            margin: 0;
            font-size: 1em;
            font-weight: bold;
            padding: 5px 10px;
            background-color: #ecf0f1;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .settings-panel {
            display: none;
            position: absolute;
            bottom: 80px;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            flex-direction: column;
        }
        .settings-panel p {
            margin: 5px 0;
            font-weight: bold;
        }
        .settings-panel .color-options {
            display: flex;
            gap: 10px;
        }
        .color-options div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #000000;
            cursor: pointer;
        }
        #speed-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        @media (max-width: 600px) {
            #controls {
                flex-direction: column;
                padding: 10px;
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <button id="homeButton" class="button">Ana Sayfa</button>
    <button id="copyrightButton" class="button"><i class="fa-solid fa-copyright"></i> Telif</button>
    <div id="ball"></div>
    <div id="controls">
        <div id="timer" class="counter">00:00</div>
        <div class="counter"><span id="passesCounter">0</span></div>
        <div class="counter">Set: <span id="setsCounter">0</span></div>
        <button id="startStopButton" class="button"><i class="fa-solid fa-play"></i></button>
        <button id="resetButton" class="button"><i class="fa-solid fa-redo"></i></button>
        <div id="speed-controls">
            <label><strong>Hız</strong></label>
            <button id="speedMinus" class="button"><strong>-</strong></button>
            <div id="speedLevel">5</div>
            <button id="speedPlus" class="button"><strong>+</strong></button>
        </div>
        <button id="settingsButton" class="button"><i class="fa-solid fa-cog"></i></button>
    </div>
    <div id="settingsPanel" class="settings-panel">
        <p>Top Rengi:</p>
        <div class="color-options" id="ballColors">
            <div style="background-color: #00008B;" data-color="#00008B"></div>
            <div style="background-color: #2bd768;" data-color="#2bd768"></div>
            <div style="background-color: #FFD700;" data-color="#FFD700"></div>
            <div style="background-color: #FF0000;" data-color="#FF0000"></div>
        </div>
        <p>Arka Plan Rengi:</p>
        <div class="color-options" id="bgColors">
            <div style="background-color: #BBBBBB;" data-color="#BBBBBB"></div>
            <div style="background-color: #7F7F7F;" data-color="#7F7F7F"></div>
            <div style="background-color: #FFFFFF; border: 1px solid #000000;" data-color="#FFFFFF"></div>
            <div style="background-color: #FCE9EB;" data-color="#FCE9EB"></div>
        </div>
    </div>

    <script>
        const ball = document.getElementById('ball');
        const startStopButton = document.getElementById('startStopButton');
        const resetButton = document.getElementById('resetButton');
        const speedMinus = document.getElementById('speedMinus');
        const speedPlus = document.getElementById('speedPlus');
        const settingsPanel = document.getElementById('settingsPanel');
        const settingsButton = document.getElementById('settingsButton');
        const ballColors = document.getElementById('ballColors');
        const bgColors = document.getElementById('bgColors');
        const timerDisplay = document.getElementById('timer');
        const passesCounter = document.getElementById('passesCounter');
        const setsCounter = document.getElementById('setsCounter');
        const speedLevel = document.getElementById('speedLevel');
        const homeButton = document.getElementById('homeButton');
        const copyrightButton = document.getElementById('copyrightButton');

        let posX = window.innerWidth / 2 - 25;
        let direction = 1;
        let passes = 0;
        let sets = 0;
        let intervalId = null;
        let startTime = null;
        let elapsed = 0;

        const minDuration = 2000;
        const maxDuration = 500;
        const stepDuration = (minDuration - maxDuration) / 9;

        const calculateVelocity = (speedLevel) => {
            const duration = minDuration - (speedLevel - 1) * stepDuration;
            return (window.innerWidth - 50) / (duration / (1000 / 60));
        };

        const moveBall = () => {
            const velocityX = calculateVelocity(Number(speedLevel.textContent));
            posX += velocityX * direction;
            if (posX <= 0 || posX + 50 >= window.innerWidth) {
                direction *= -1;
                if (direction === 1) passesCounter.textContent = ++passes;
            }
            ball.style.left = `${posX}px`;
            updateTimer();
        };

        const updateTimer = () => {
            if (startTime) {
                const now = Date.now();
                elapsed = now - startTime;
                const seconds = Math.floor(elapsed / 1000);
                const minutes = Math.floor(seconds / 60);
                timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
            }
        };

        const toggleSettingsPanel = () => {
            settingsPanel.style.display = settingsPanel.style.display === 'none' || settingsPanel.style.display === '' ? 'flex' : 'none';
        };

        const changeColor = (event, callback) => {
            const color = event.target.dataset.color;
            if (color) callback(color);
            settingsPanel.style.display = 'none';
        };

        const changeBallColor = (color) => ball.style.backgroundColor = color;
        const changeBgColor = (color) => document.body.style.backgroundColor = color;

        const updateSpeed = (increment) => {
            let speed = Number(speedLevel.textContent);
            speed = Math.max(1, Math.min(10, speed + increment));
            speedLevel.textContent = speed;
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = setInterval(moveBall, 1000 / 60);
            }
        };

        const startStop = () => {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
                startTime = null;
                startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
                posX = window.innerWidth / 2 - 25;
                ball.style.left = `${posX}px`;
            } else {
                startTime = Date.now() - elapsed;
                intervalId = setInterval(moveBall, 1000 / 60);
                startStopButton.innerHTML = '<i class="fa-solid fa-stop"></i>';
                setsCounter.textContent = ++sets;
            }
        };

        const reset = () => {
            clearInterval(intervalId);
            intervalId = null;
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
            direction = 1;
            passes = sets = 0;
            passesCounter.textContent = setsCounter.textContent = 0;
            timerDisplay.textContent = '00:00';
            startStopButton.innerHTML = '<i class="fa-solid fa-play"></i>';
            startTime = null;
            elapsed = 0;
        };

        ballColors.addEventListener('click', (event) => changeColor(event, changeBallColor));
        bgColors.addEventListener('click', (event) => changeColor(event, changeBgColor));

        startStopButton.addEventListener('click', startStop);
        resetButton.addEventListener('click', reset);
        speedMinus.addEventListener('click', () => updateSpeed(-1));
        speedPlus.addEventListener('click', () => updateSpeed(1));
        settingsButton.addEventListener('click', toggleSettingsPanel);
        homeButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
        copyrightButton.addEventListener('click', () => window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL

        window.addEventListener('resize', () => {
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
        });

        ball.style.left = `${posX}px`;
    </script>
</body>
</html>

        ball.style.left = `${posX}px`;
    </script>
</body>
</html>
    Javascript kodlarının içindeki
    & karakterini &amp;
    " karakterini &quot;
    ' karakterini &apos;
    < karakterini &lt;
    > karakterini &gt; ile değiştirmelisiniz hocam kaydedebilmek için.

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='no' b:js='no' lang='tr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.title/></title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css' rel='stylesheet'/>
<b:skin><![CDATA[/*  ]]></b:skin>
<style id='css'>
 
body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #BBBBBB;
            overflow: hidden;
            flex-direction: column;
            font-family: 'Arial', sans-serif;
        }
        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FF0000;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .button {
            background-color: #04AA6D;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 5px 10px;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #3a8267;
        }
        #homeButton {
            position: absolute;
            top: 10px;
        }
        #copyrightButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #controls {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #ffffff;
            padding: 10px 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            gap: 15px; /* Increased gap between elements */
        }
        .counter, #speed-controls div {
            margin: 0;
            font-size: 1em;
            font-weight: bold;
            padding: 5px 10px;
            background-color: #ecf0f1;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .settings-panel {
            display: none;
            position: absolute;
            bottom: 80px;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            flex-direction: column;
        }
        .settings-panel p {
            margin: 5px 0;
            font-weight: bold;
        }
        .settings-panel .color-options {
            display: flex;
            gap: 10px;
        }
        .color-options div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #000000;
            cursor: pointer;
        }
        #speed-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        @media (max-width: 600px) {
            #controls {
                flex-direction: column;
                padding: 10px;
                gap: 5px;
            }
        }
</style>
</head>
<body>
<div id='ball'/>
<div id='controls'>
<label class='colorLabel' for='colorPickerBall'>Top Rengi</label>
<input id='colorPickerBall' title='Top Rengi Seç' type='color'/>
 
<label class='colorLabel' for='colorPickerBg'>Arka Plan Rengi</label>
<input id='colorPickerBg' title='Arka Plan Rengi Seç' type='color'/>
 
<button id='startStopButton'>Durdur/Başlat</button>
<select id='speedSelector' title='Hız Seç'>
<option value='1'>Hız 1</option>
<option value='2'>Hız 2</option>
<option value='3'>Hız 3</option>
<option value='4'>Hız 4</option>
<option value='5'>Hız 5</option>
<option value='6'>Hız 6</option>
<option value='7'>Hız 7</option>
<option value='8'>Hız 8</option>
<option value='9'>Hız 9</option>
<option value='10'>Hız 10</option>
</select>
<p class='counter' id='movementCounter'>0</p>
<p class='counter' id='setCounter'>Set: 0</p>
</div>
<script>

        const ball = document.getElementById('ball');
        const startStopButton = document.getElementById('startStopButton');
        const resetButton = document.getElementById('resetButton');
        const speedMinus = document.getElementById('speedMinus');
        const speedPlus = document.getElementById('speedPlus');
        const settingsPanel = document.getElementById('settingsPanel');
        const settingsButton = document.getElementById('settingsButton');
        const ballColors = document.getElementById('ballColors');
        const bgColors = document.getElementById('bgColors');
        const timerDisplay = document.getElementById('timer');
        const passesCounter = document.getElementById('passesCounter');
        const setsCounter = document.getElementById('setsCounter');
        const speedLevel = document.getElementById('speedLevel');
        const homeButton = document.getElementById('homeButton');
        const copyrightButton = document.getElementById('copyrightButton');
 
        let posX = window.innerWidth / 2 - 25;
        let direction = 1;
        let passes = 0;
        let sets = 0;
        let intervalId = null;
        let startTime = null;
        let elapsed = 0;
 
        const minDuration = 2000;
        const maxDuration = 500;
        const stepDuration = (minDuration - maxDuration) / 9;
 
        const calculateVelocity = (speedLevel) =&gt; {
            const duration = minDuration - (speedLevel - 1) * stepDuration;
            return (window.innerWidth - 50) / (duration / (1000 / 60));
        };
 
        const moveBall = () =&gt; {
            const velocityX = calculateVelocity(Number(speedLevel.textContent));
            posX += velocityX * direction;
            if (posX &lt;= 0 || posX + 50 &gt;= window.innerWidth) {
                direction *= -1;
                if (direction === 1) passesCounter.textContent = ++passes;
            }
            ball.style.left = `${posX}px`;
            updateTimer();
        };
 
        const updateTimer = () =&gt; {
            if (startTime) {
                const now = Date.now();
                elapsed = now - startTime;
                const seconds = Math.floor(elapsed / 1000);
                const minutes = Math.floor(seconds / 60);
                timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
            }
        };
 
        const toggleSettingsPanel = () =&gt; {
            settingsPanel.style.display = settingsPanel.style.display === 'none' || settingsPanel.style.display === '' ? 'flex' : 'none';
        };
 
        const changeColor = (event, callback) =&gt; {
            const color = event.target.dataset.color;
            if (color) callback(color);
            settingsPanel.style.display = 'none';
        };
 
        const changeBallColor = (color) =&gt; ball.style.backgroundColor = color;
        const changeBgColor = (color) =&gt; document.body.style.backgroundColor = color;
 
        const updateSpeed = (increment) =&gt; {
            let speed = Number(speedLevel.textContent);
            speed = Math.max(1, Math.min(10, speed + increment));
            speedLevel.textContent = speed;
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = setInterval(moveBall, 1000 / 60);
            }
        };
 
        const startStop = () =&gt; {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
                startTime = null;
                startStopButton.innerHTML = '<i class='fa-solid fa-play'/>';
                posX = window.innerWidth / 2 - 25;
                ball.style.left = `${posX}px`;
            } else {
                startTime = Date.now() - elapsed;
                intervalId = setInterval(moveBall, 1000 / 60);
                startStopButton.innerHTML = '<i class='fa-solid fa-stop'/>';
                setsCounter.textContent = ++sets;
            }
        };
 
        const reset = () =&gt; {
            clearInterval(intervalId);
            intervalId = null;
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
            direction = 1;
            passes = sets = 0;
            passesCounter.textContent = setsCounter.textContent = 0;
            timerDisplay.textContent = '00:00';
            startStopButton.innerHTML = '<i class='fa-solid fa-play'/>';
            startTime = null;
            elapsed = 0;
        };
 
        ballColors.addEventListener('click', (event) =&gt; changeColor(event, changeBallColor));
        bgColors.addEventListener('click', (event) =&gt; changeColor(event, changeBgColor));
 
        startStopButton.addEventListener('click', startStop);
        resetButton.addEventListener('click', reset);
        speedMinus.addEventListener('click', () =&gt; updateSpeed(-1));
        speedPlus.addEventListener('click', () =&gt; updateSpeed(1));
        settingsButton.addEventListener('click', toggleSettingsPanel);
        homeButton.addEventListener('click', () =&gt; window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
        copyrightButton.addEventListener('click', () =&gt; window.location.href = 'https://www.ornekwebsitesi.com'); // Replace with your desired URL
 
        window.addEventListener('resize', () =&gt; {
            posX = window.innerWidth / 2 - 25;
            ball.style.left = `${posX}px`;
        });
 
        ball.style.left = `${posX}px`;
</script>
</body>
<b:section class='bos' id='bos' showaddelement='no'/>
</html>
  • 27-06-2024, 00:11:28
    #7
    Gokaaa
    Gokaaa
    TURUS adlı üyeden alıntı: mesajı görüntüle
    Javascript kodlarının içindeki
    & karakterini &amp;
    " karakterini &quot;
    ' karakterini &apos;
    < karakterini &lt;
    > karakterini &gt; ile değiştirmelisiniz hocam kaydedebilmek için.
    Hocam muhteşemsiniz sonunda oldu. kaç saatir uğraşıyorum kendim çözmek için yazamadım da. çok mutlu oldum. geriye tek bir sorum olacak hocam fa iconları nasıl entegre ederim? Buna da cevap verirseniz çok müteşekkir olurum.