Modern Blogger Sohbet ve Blog Teması | SEO Uyumlu Web Tasarım
Yayın: | Kategori: Web Tasarım, Blogger Tema, Sohbet Sitesi
Modern Blogger Tabanlı Sohbet ve Blog Sistemi
Bu proje, Blogger altyapısı üzerine geliştirilmiş modern bir sohbet ve blog temasıdır. Tailwind CSS, Font Awesome ve dinamik widget yapıları kullanılarak kullanıcı dostu bir arayüz tasarlanmıştır.
Amaç, klasik blog sistemlerini daha interaktif hale getirerek kullanıcıların hem içerik okumasını hem de sohbet etmesini sağlamaktır.
SEO Uyumlu ve Hızlı Yapı
Tema tamamen SEO uyumlu olarak yapılandırılmıştır. Başlık hiyerarşisi (H1, H2, H3), meta yapı ve semantik HTML kullanılarak Google arama motorları için optimize edilmiştir.
- Hızlı yüklenen modern tasarım
- Mobil uyumlu responsive yapı
- Schema.org Article desteği
- Temiz ve okunabilir kod yapısı
Sohbet ve Kullanıcı Giriş Sistemi
Tema içerisinde yer alan giriş paneli sayesinde kullanıcılar rumuz ile sisteme bağlanabilir. Bu yapı klasik IRC mantığını modern bir arayüz ile birleştirir.
Kullanıcı adı ve şifre alanları, sade ve dikkat çekici bir tasarım ile sunulmuştur. Bu sayede ziyaretçiler hızlı bir şekilde sohbet sistemine dahil olabilir.
Blog ve İçerik Yönetimi
Blogger’ın güçlü “Blog1” widget sistemi kullanılarak içerikler dinamik olarak listelenmektedir. Yazılar grid sisteminde kart yapısı ile sunulur.
Her yazı:
- Başlık
- Öne çıkan görsel
- Özet içerik
- Devamını oku bağlantısı
Yan Panel (Sidebar) Özellikleri
Sidebar bölümü kullanıcı deneyimini artırmak için özel olarak tasarlanmıştır. Burada sohbet odaları, etiketler ve popüler içerikler yer alır.
Bu yapı sayesinde ziyaretçiler site içinde daha fazla vakit geçirir ve içerikler arasında kolayca gezinebilir.
Sticky Müzik ve Canlı Yayın Sistemi
Sayfanın alt kısmında yer alan sabit müzik oynatıcı, kullanıcıya kesintisiz bir deneyim sunar. Canlı yayın göstergesi ile siteye radyo ve eğlence platformu hissi kazandırılmıştır.
Mobil Uyum ve Performans
Tema tamamen mobil uyumludur. Menü sistemi, grid yapısı ve butonlar tüm ekran boyutlarına göre optimize edilmiştir.
Bu sayede hem masaüstü hem mobil cihazlarda yüksek performans elde edilir.
Sonuç
Bu Blogger teması, yalnızca bir blog sistemi değil; aynı zamanda modern bir sohbet ve topluluk platformudur. SEO uyumlu yapısı sayesinde arama motorlarında üst sıralara çıkmaya uygundur.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsversion='3' 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>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<!-- CSS Entegrasyonu -->
<script src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<b:skin><![CDATA[
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Poppins:wght@700;900&display=swap');
:root {
--deep-purple: #1a0b35;
--soft-purple: #3d2179;
--gradient-primary: linear-gradient(90deg, #ff8c00 0%, #ff1493 100%);
--glass-bg: rgba(255, 255, 255, 0.05);
--lavender-main: #a855f7;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f8f9ff;
color: #2d3748;
margin: 0; padding: 0;
overflow-x: hidden;
scroll-behavior: smooth;
}
h1, h2, h3, .font-heading { font-family: 'Poppins', sans-serif; }
.btn-gradient {
background: var(--gradient-primary);
color: white;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 25px -5px rgba(255, 20, 147, 0.4);
}
.btn-gradient:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 35px -5px rgba(255, 20, 147, 0.5);
}
.hero-section {
background: radial-gradient(circle at 70% 20%, #4c1d95 0%, #1a0b35 100%);
position: relative;
}
.glass-box {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.post-card {
background: white;
border-radius: 32px;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
}
.post-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px -12px rgba(168, 85, 247, 0.15);
}
.blob-frame {
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
overflow: hidden;
border: 10px solid rgba(255, 255, 255, 0.05);
}
/* Float Animasyonu */
.animate-float { animation: float 5s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Blogger Widget Reset */
.main-posts-area .widget { margin-bottom: 0; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#back-to-top {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
}
]]></b:skin>
</head>
<body class='text-gray-800'>
<!-- Navigasyon -->
<header class='bg-white/80 sticky top-0 z-[100] border-b border-gray-100 backdrop-blur-md'>
<div class='container mx-auto px-4 py-3 flex justify-between items-center'>
<div class='flex items-center gap-3'>
<div class='w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl font-black shadow-lg shadow-purple-200'>W</div>
<a class='text-xl font-black tracking-tight' expr:href='data:blog.homepageUrl'>WEB<span class='text-purple-600'>YAZİLİMCİNİZ</span></a>
</div>
<b:section class='hidden lg:flex items-center gap-4' id='main-nav' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='Menu' type='LinkList' version='2' visible='true'>
<b:includable id='main'>
<nav class='flex gap-2'>
<b:loop values='data:links' var='link'>
<a class='px-4 py-2 text-sm font-bold text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-xl transition' expr:href='data:link.target'><data:link.name/></a>
</b:loop>
</nav>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='flex gap-3'>
<button class='lg:hidden w-10 h-10 flex items-center justify-center bg-gray-50 rounded-lg' id='mobile-btn'><i class='fas fa-bars'/></button>
<a class='btn-gradient px-7 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hidden sm:block' href='#join-chat'>Anasayfa</a>
<a class='btn-gradient px-7 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hidden sm:block' href='#join-chat'>Gizlilik Politikası</a>
<a class='btn-gradient px-7 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hidden sm:block' href='#join-chat'>İletisim</a>
<a class='btn-gradient px-7 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hidden sm:block' href='#join-chat'>BAĞLAN</a>
</div>
</div>
<div class='hidden lg:hidden bg-white border-t border-gray-100 p-4 absolute w-full shadow-2xl' id='mobile-menu'>
<b:section id='mobile-links' showaddelement='yes'/>
</div>
</header>
<!-- Ultimate Hero Section -->
<section class='hero-section pt-16 pb-28 text-white' id='join-chat'>
<!-- Dekoratif Objeler -->
<div class='absolute top-20 right-[15%] w-32 h-32 bg-orange-500/20 rounded-full blur-[80px] animate-pulse'/>
<div class='absolute bottom-40 left-[10%] w-48 h-48 bg-purple-500/20 rounded-full blur-[100px]'/>
<div class='container mx-auto px-4'>
<div class='flex flex-wrap items-center justify-between gap-16'>
<!-- Login Kutusu -->
<div class='w-full lg:w-[45%]'>
<div class='bg-[#2d115e]/80 backdrop-blur-xl p-10 md:p-14 rounded-[50px] shadow-[0_30px_100px_rgba(0,0,0,0.3)] border border-white/5 relative z-10'>
<h2 class='text-4xl md:text-5xl font-black mb-6 uppercase tracking-tight leading-tight'>SOHBETE <br/> ŞİMDİ <span class='text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-pink-500'>BAŞLA</span></h2>
<p class='text-gray-300 text-sm mb-10 leading-relaxed font-medium'>Türkiye'nin en seviyeli sohbet odalarına katılmak için bir rumuz yazman yeterli.</p>
<form action='/p/sohbet.html' class='space-y-6' method='get'>
<div class='relative'>
<i class='fas fa-user-circle absolute left-6 top-1/2 -translate-y-1/2 text-orange-400 text-xl'/>
<input class='w-full bg-white/5 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white placeholder:text-gray-400 outline-none focus:ring-2 ring-pink-500 transition-all text-lg' name='nick' placeholder='Kullanıcı Adınız' type='text'/>
</div>
<div class='relative'>
<i class='fas fa-key absolute left-6 top-1/2 -translate-y-1/2 text-orange-400 text-xl'/>
<input class='w-full bg-white/5 border border-white/10 rounded-2xl py-5 pl-14 pr-6 text-white placeholder:text-gray-400 outline-none focus:ring-2 ring-pink-500 transition-all text-lg' name='pass' placeholder='Şifreniz (Varsa)' type='password'/>
</div>
<button class='w-full btn-gradient py-5 rounded-2xl font-black text-xl uppercase tracking-widest mt-4 shadow-2xl flex items-center justify-center gap-3' type='submit'>
BAĞLAN <i class='fas fa-arrow-right text-sm'/>
</button>
</form>
</div>
</div>
<!-- Görsel ve mIRC Kısmı -->
<div class='w-full lg:w-[48%] grid grid-cols-1 md:grid-cols-2 gap-10 items-center'>
<div class='animate-float'>
<div class='blob-frame w-full aspect-square relative shadow-2xl'>
<img alt='Sohbet' class='w-full h-full object-cover' src='https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2070'/>
</div>
</div>
<div class='space-y-6'>
<div class='glass-box p-8 rounded-[35px] text-center group hover:bg-white/10 transition duration-500'>
<div class='w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mx-auto mb-6'>
<img alt='mIRC' class='w-10 h-10 group-hover:scale-110 transition' src='https://www.mirc.com/favicon.ico'/>
</div>
<h4 class='font-bold mb-6 text-sm text-gray-200'>Masaüstü mIRC <br/> Programını İndirin</h4>
<a class='btn-gradient block py-4 rounded-xl text-xs font-black shadow-lg uppercase tracking-widest' href='#'>mIRC İNDİR</a>
</div>
</div>
</div>
</div>
<!-- Mobil App Tanıtım -->
<div class='mt-24 pt-16 border-t border-white/10'>
<div class='flex flex-col md:flex-row items-center justify-between gap-12'>
<div class='text-center md:text-left'>
<h3 class='text-3xl md:text-4xl font-black mb-4 leading-tight'>Mobil Sohbetin Keyfini Çıkarın</h3>
<p class='text-gray-400 text-base max-w-xl font-medium'>En yeni teknolojilerle dilediğiniz yerde sohbet edin. Lavanta mobil uygulaması çok yakında sizlerle!</p>
</div>
<div class='flex flex-wrap justify-center gap-4'>
<a class='btn-gradient px-8 py-5 rounded-3xl flex items-center gap-4 font-bold' href='#'>
<i class='fab fa-google-play text-3xl'/>
<div class='text-left'><span class='text-[10px] block opacity-80'>Yükle</span>Play Store</div>
</a>
<a class='btn-gradient px-8 py-5 rounded-3xl flex items-center gap-4 font-bold' href='#'>
<i class='fab fa-apple text-3xl'/>
<div class='text-left'><span class='text-[10px] block opacity-80'>Yükle</span>App Store</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- İçerik Alanı -->
<main class='container mx-auto px-4 py-24'>
<div class='flex flex-col lg:flex-row gap-16'>
<!-- Yayınlar (Blog1 Widget) -->
<div class='lg:w-2/3'>
<div class='flex items-center justify-between mb-12'>
<h2 class='text-3xl font-black text-gray-900 flex items-center gap-3'>
<span class='w-2 h-10 bg-purple-600 rounded-full'/> Gündemdeki Yazılar
</h2>
</div>
<b:section class='main-posts-area' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='commentLabel'>comments</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>WebYazilimciniz</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>3</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='showInlineAds'>true</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- LİSTE SAYFASI -->
<b:if cond='data:view.isMultipleItems'>
<div class='grid grid-cols-1 md:grid-cols-3 gap-10'>
<b:loop values='data:posts' var='post'>
<article class='group glass rounded-[3rem] overflow-hidden hover:border-primary transition-all duration-500 border border-white/5'>
<!-- RESİM FIX -->
<div class='aspect-video overflow-hidden'>
<b:if cond='data:post.featuredImage'>
<img class='w-full h-full object-cover transition duration-500 group-hover:scale-105' expr:src='resizeImage(data:post.featuredImage, 600, "16:9")'/>
<b:elseif cond='data:post.firstImageUrl'/>
<img class='w-full h-full object-cover transition duration-500 group-hover:scale-105' expr:src='data:post.firstImageUrl'/>
<b:else/>
<img class='w-full h-full object-cover' src='https://via.placeholder.com/600x400?text=Resim+Yok'/>
</b:if>
</div>
<div class='p-10'>
<h3 class='text-xl font-black mb-4 group-hover:text-primary transition-colors uppercase tracking-tight'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</h3>
<p class='text-gray-400 text-sm leading-relaxed line-clamp-2 mb-6'>
<data:post.snippet/>
</p>
<a class='text-[10px] font-black text-primary uppercase tracking-[0.2em] flex items-center gap-2' expr:href='data:post.url'>
OKUMAYA DEVAM ET
<i class='w-4 h-4' data-lucide='arrow-right'/>
</a>
</div>
</article>
</b:loop>
</div>
<!-- TEK YAZI SAYFASI -->
<b:else/>
<b:loop values='data:posts' var='post'>
<div class='max-w-3xl mx-auto bg-white/5 p-10 md:p-20 rounded-[4rem] border border-white/10 shadow-2xl'>
<h1 class='text-4xl md:text-5xl font-black font-poppins mb-10 leading-tight text-white tracking-tighter uppercase'>
<data:post.title/>
</h1>
<div class='post-body'>
<data:post.body/>
</div>
<!-- YORUMLAR AKTİF -->
<div class='mt-16'>
<b:include data='post' name='commentPicker'/>
</div>
</div>
</b:loop>
</b:if>
</b:includable>
<b:includable id='aboutPostAuthor'>
<div class='author-name'>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span>
<data:post.author.name/>
</span>
</a>
</div>
<div>
<span class='author-desc'>
<data:post.author.aboutMe/>
</span>
</div>
</b:includable>
<b:includable id='addComments'>
<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:message name='messages.postAComment'/>
</a>
</b:includable>
<b:includable id='blogThisShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='bylineByName' var='byline'>
<b:switch var='data:byline.name'>
<b:case value='share'/>
<b:include cond='data:post.shareUrl' name='postShareButtons'/>
<b:case value='comments'/>
<b:include cond='data:post.allowComments' name='postCommentsLink'/>
<b:case value='location'/>
<b:include cond='data:post.location' name='postLocation'/>
<b:case value='timestamp'/>
<b:include cond='not data:view.isPage' name='postTimestamp'/>
<b:case value='author'/>
<b:include name='postAuthor'/>
<b:case value='labels'/>
<b:include cond='data:post.labels' name='postLabels'/>
<b:case value='icons'/>
<b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
</b:switch>
</b:includable>
<b:includable id='bylineRegion' var='regionItems'>
<b:loop values='data:regionItems' var='byline'>
<b:include data='byline' name='bylineByName'/>
</b:loop>
</b:includable>
<b:includable id='commentAuthorAvatar'>
<div class='avatar-image-container'>
<img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='commentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentFormIframeSrc' var='post'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>
<b:includable id='commentItem' var='comment'>
<div class='comment' expr:id='"c" + data:comment.id'>
<b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
<div class='comment-block'>
<div class='comment-author'>
<b:if cond='data:comment.authorUrl'>
<b:message name='messages.authorSaidWithLink'>
<b:param expr:value='data:comment.author' name='authorName'/>
<b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
</b:message>
<b:else/>
<b:message name='messages.authorSaid'>
<b:param expr:value='data:comment.author' name='authorName'/>
</b:message>
</b:if>
</div>
<div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>
<data:comment.body/>
</div>
<div class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>
</div>
</b:includable>
<b:includable id='commentList' var='comments'>
<div id='comments-block'>
<b:loop values='data:comments' var='comment'>
<b:include data='comment' name='commentItem'/>
</b:loop>
</div>
</b:includable>
<b:includable id='commentPicker' var='post'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threadedComments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:include name='commentsTitle'/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<b:include cond='data:post.comments' data='post.comments' name='commentList'/>
</div>
<b:if cond='data:post.commentPagingRequired'>
<div class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:messages.oldest/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:messages.older/>
</a>
</b:if>
<span class='comment-range-text'>
<data:post.commentRangeText/>
</span>
<b:if cond='data:post.hasNewerLinks'>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:messages.newer/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:messages.newest/>
</a>
</b:if>
</div>
</b:if>
<div class='footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</a>
</b:includable>
<b:includable id='commentsLinkIframe'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='commentsTitle'>
<h3 class='title'><data:messages.comments/></h3>
</b:includable>
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: "display: block;"'>
<b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:includable>
<b:includable id='emailPostIcon'>
<span class='byline post-icons'>
<!-- email post links -->
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='!data:view.isPost'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments and data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:messages.subscribeTo/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:widgets.Blog.first.footerBylines'>
<b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
<b:if cond='not data:region.items.empty'>
<div expr:class='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (data:i + 1)' var='regionName'>
<b:include data='region.items' name='bylineRegion'/>
</b:with>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='googlePlusShare'>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:widgets.Blog.first.headerByline'>
<div class='post-header'>
<div class='post-header-line-1'>
<b:with value='"header-1"' var='regionName'>
<b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
</b:with>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='homePageLink'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:messages.home/>
</a>
</b:includable>
<b:includable id='iframeComments' var='post'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='inlineAd' var='post'>
<b:if cond='!data:view.isPreview'>
<b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
<!-- Ad -->
<div class='inline-ad'>
<b:if cond='data:this.adCode != ""'>
<data:this.adCode/>
<b:else/>
<b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
</b:if>
</div>
</b:if>
<b:else/>
<div class='inline-ad'>
<div class='inline-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'>
<b:with value='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/>
</a>
</b:includable>
<b:includable id='otherSharingButton'>
<span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
<b:with value='{key: "sharingOther"}' var='platform'>
<b:include name='sharingPlatformIcon'/>
</b:with>
<span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
</span>
</b:includable>
<b:includable id='platformShare'>
<a expr:class='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' expr:title='data:platform.shareMessage' target='_blank'>
<span class='share-button-link-text'>
<data:platform.shareMessage/>
</span>
</a>
</b:includable>
<b:includable id='post' var='post'>
<div class='post'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postJumpLink'/>
</b:if>
<b:include data='post' name='postFooter'/>
</div>
</b:includable>
<b:includable id='postAuthor'>
<span class='byline post-author vcard'>
<span class='post-author-label'>
<data:byline.label/>
</span>
<span class='fn'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl'/>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span><data:post.author.name/></span>
</a>
<b:else/>
<span><data:post.author.name/></span>
</b:if>
</span>
</span>
</b:includable>
<b:includable id='postBody' var='post'>
<!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
</div>
</b:includable>
<b:includable id='postBodySnippet' var='post'>
<b:include data='post' name='postBody'/>
</b:includable>
<b:includable id='postCommentsAndAd' var='post'>
<article class='post-outer-container'>
<!-- Post title and body -->
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<!-- Comments -->
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
<!-- Show ad inside post container, after comments, if single item. -->
<b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
</article>
<!-- Show ad outside post container (between posts) for feed pages. -->
<b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
</b:includable>
<b:includable id='postCommentsLink'>
<b:if cond='data:view.isMultipleItems'>
<span class='byline post-comment-link container'>
<b:include cond='data:post.commentSource != 1' name='commentsLink'/>
</span>
</b:if>
</b:includable>
<b:includable id='postFooter' var='post'>
<div class='post-footer'>
<b:include name='footerBylines'/>
<b:include data='post' name='postFooterAuthorProfile'/>
</div>
</b:includable>
<b:includable id='postFooterAuthorProfile' var='post'>
<b:if cond='data:post.author.aboutMe and data:view.isPost'>
<div class='author-profile'>
<b:if cond='data:post.author.authorPhoto.url'>
<img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
<div class='author-about'>
<b:include data='post' name='aboutPostAuthor'/>
</div>
<b:else/>
<b:include data='post' name='aboutPostAuthor'/>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postHeader' var='post'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='postJumpLink' var='post'>
<div class='jump-link flat-button'>
<a expr:href='data:post.url fragment "more"' expr:title='data:post.title'>
<b:eval expr='data:blog.jumpLinkMessage'/>
</a>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'><data:byline.label/></span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</span>
</b:includable>
<b:includable id='postLocation'>
<span class='byline post-location'>
<data:byline.label/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</span>
</b:includable>
<b:includable id='postMeta' var='post'>
<b:include data='post' name='postMetadataJSON'/>
</b:includable>
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
"width": 206,
"height": 60
}
},
</b:includable>
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
<b:includable id='postReactions'>
<!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='postShareButtons'>
<div class='byline post-share-buttons goog-inline-block'>
<b:with value='data:sharingId ?: ((data:widget.instanceId ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + data:post.id)' var='sharingId'>
<!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
</b:with>
</div>
</b:includable>
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<data:post.date/>
</time>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<data:messages.newerPosts/>
</a>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:include name='sharingPlatformIcon'/>
<span class='platform-sharing-text'><data:platform.name/></span>
</span>
</b:includable>
<b:includable id='sharingButtonContent'>
<div class='flat-icon-button ripple'>
<b:include name='shareIcon'/>
</div>
</b:includable>
<b:includable id='sharingButtons'>
<div class='sharing' expr:aria-owns='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + data:sharingId' role='button'>
<b:include name='sharingButtonContent'/>
</button>
<b:include name='sharingButtonsMenu'/>
</div>
</b:includable>
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>
<b:includable id='sharingPlatformIcon'>
<b:include data='{ iconClass: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threadedCommentJs' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<b:template-script inline='true' name='threaded_comments'/>
<script type='text/javascript'>
blogger.widgets.blog.initThreadedComments(
<data:post.commentJso/>,
<data:post.commentMsgs/>,
<data:post.commentConfig/>);
</script>
</b:includable>
<b:includable id='threadedComments' var='post'>
<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:include name='commentsTitle'/>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:if cond='data:post.showManageComments'>
<b:include data='post' name='manageComments'/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='tooltipCss'>
<!-- LINT.IfChange -->
<style>
.post-body a.b-tooltip-container {
position: relative;
display: inline-block;
}
.post-body a.b-tooltip-container .b-tooltip {
display: block !important;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-20%, 1px);
visibility: hidden;
opacity: 0;
z-index: 1;
transition: opacity 0.2s ease-in-out;
}
.post-body a.b-tooltip-container .b-tooltip iframe {
width: 200px;
height: 198px;
max-width: none;
border: none;
border-radius: 20px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
.post-body a.b-tooltip-container:hover .b-tooltip {
visibility: visible;
opacity: 1;
}
}
</style>
<!-- LINT.ThenChange(//depot/google3/java/com/google/blogger/b2/layouts/widgets/v2-style.css) -->
</b:includable>
</b:widget>
</b:section>
</div>
<!-- Sağ Panel -->
<aside class='lg:w-1/3 space-y-12'>
<b:section id='sidebar' showaddelement='yes'>
<b:widget id='HTML301' locked='false' title='Sohbet Odaları' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='bg-white p-10 rounded-[40px] shadow-2xl shadow-purple-900/5 border border-purple-50'>
<h4 class='text-xl font-black mb-8 flex items-center gap-3'><span class='w-1.5 h-6 bg-pink-500 rounded-full'/> <data:title/></h4>
<div class='space-y-4'>
<a class='flex justify-between items-center p-5 rounded-2xl bg-gray-50 hover:bg-purple-600 hover:text-white transition group font-bold' href='#'>
<span class='group-hover:text-white text-gray-800 text-sm'>#Sohbet</span>
<span class='text-[10px] bg-purple-600 text-white px-3 py-1.5 rounded-xl group-hover:bg-white/20 group-hover:text-white font-black tracking-tighter'>1.2k+</span>
</a>
<a class='flex justify-between items-center p-5 rounded-2xl bg-gray-50 hover:bg-purple-600 hover:text-white transition group font-bold' href='#'>
<span class='group-hover:text-white text-gray-800 text-sm'>#Radyo</span>
<span class='text-[10px] bg-pink-500 text-white px-3 py-1.5 rounded-xl group-hover:bg-white/20 group-hover:text-white font-black tracking-tighter'>ACTIVE</span>
</a>
<a class='flex justify-between items-center p-5 rounded-2xl bg-gray-50 hover:bg-purple-600 hover:text-white transition group font-bold' href='#'>
<span class='group-hover:text-white text-gray-800 text-sm'>#Oyun</span>
<span class='text-[10px] bg-gray-200 text-gray-500 px-3 py-1.5 rounded-xl group-hover:bg-white/20 group-hover:text-white font-black tracking-tighter'>245</span>
</a>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Label301' locked='false' title='Etiket Bulutu' type='Label' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='bg-gray-900 p-10 rounded-[40px] shadow-2xl text-white'>
<h4 class='text-xl font-black mb-8 flex items-center gap-3'><span class='w-1.5 h-6 bg-purple-500 rounded-full'/> <data:title/></h4>
<div class='flex flex-wrap gap-2.5'>
<b:loop values='data:labels' var='label'>
<a class='text-[10px] font-black uppercase tracking-[0.1em] bg-white/5 hover:bg-purple-600 transition px-4 py-2.5 rounded-xl border border-white/5' expr:href='data:label.url'><data:label.name/></a>
</b:loop>
</div>
</div>
</b:includable>
<b:includable id='cloud'>
<b:loop values='data:labels' var='label'>
<span class='label-size'>
<b:class expr:name='"label-size-" + data:label.cssSize'/>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</span>
</b:loop>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display + "-label-widget-content"'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' name='cloud'/>
</div>
</b:includable>
<b:includable id='list'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</aside>
</div>
</main>
<!-- Footer -->
<footer class='bg-[#0f0724] text-gray-500 pt-24 pb-12 border-t border-white/5'>
<div class='container mx-auto px-4'>
<div class='flex flex-col items-center text-center'>
<div class='flex items-center gap-3 mb-8'>
<div class='w-12 h-12 bg-purple-600 rounded-2xl flex items-center justify-center text-white text-2xl font-black shadow-2xl shadow-purple-900'>W</div>
<span class='text-3xl font-black text-white tracking-tight'>WEB<span class='text-purple-600'>YAZİLİMCİNİZ</span></span>
</div>
<p class='text-sm leading-relaxed max-w-2xl mb-12 font-medium'>
Sohbet, kullanıcılarına en kaliteli ve seviyeli sohbet ortamını sunmayı amaçlayan profesyonel bir topluluk platformudur. 7/24 kesintisiz müzik ve eğlenceli odalarla buradayız.
</p>
<div class='flex gap-6 mb-16'>
<a class='w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-purple-600 hover:text-white transition' href='#'><i class='fab fa-facebook-f text-lg'/></a>
<a class='w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-purple-600 hover:text-white transition' href='#'><i class='fab fa-twitter text-lg'/></a>
<a class='w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-purple-600 hover:text-white transition' href='#'><i class='fab fa-instagram text-lg'/></a>
</div>
<div class='w-full border-t border-white/5 pt-10 flex flex-col md:flex-row justify-between items-center gap-6'>
<p class='text-[10px] font-bold uppercase tracking-[0.3em]'><data:blog.title/> - TÜM HAKLARI SAKLIDIR</p>
<div class='text-[10px] font-bold uppercase tracking-[0.3em]'>
TASARIM: <a class='text-purple-600 hover:text-orange-400 transition' href='https://www.webyazilimciniz.net/'>WEBYAZİLİMCİNİZ.NET</a>
</div>
</div>
</div>
</div>
</footer>
<!-- LUCIDE ICONS -->
<script src='https://unpkg.com/lucide@latest'/>
<!-- STICKY PLAYER -->
<div class='fixed bottom-0 left-0 right-0 z-[60] bg-black/95 backdrop-blur-3xl border-t border-white/10 px-8 py-6 flex items-center justify-between shadow-2xl'>
<!-- SOL -->
<div class='flex items-center gap-5 w-1/3'>
<img class='w-16 h-16 rounded-2xl object-cover shadow-2xl border border-white/10' src='https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070'/>
<div class='hidden sm:block truncate'>
<h4 class='text-lg font-black text-white uppercase tracking-tighter leading-none'>
Midnight Grooves
</h4>
<p class='text-[9px] text-red-500 font-black uppercase tracking-[0.2em] flex items-center gap-2 mt-2'>
<span class='w-2 h-2 bg-red-500 rounded-full animate-pulse'/>
CANLI YAYIN
</p>
</div>
</div>
<!-- ORTA PLAY -->
<div class='flex flex-col items-center flex-1'>
<button class='w-16 h-16 bg-white text-black rounded-full flex items-center justify-center hover:scale-110 active:scale-95 transition-all shadow-xl'>
<i class='w-8 h-8' data-lucide='play'/>
</button>
</div>
<!-- SAĞ -->
<div class='flex items-center justify-end gap-10 w-1/3 text-gray-400'>
<!-- VOLUME -->
<div class='hidden lg:flex items-center gap-3 w-40'>
<i class='w-5 h-5' data-lucide='volume-2'/>
<div class='flex-1 h-1 bg-white/10 rounded-full overflow-hidden'>
<div class='h-full w-2/3 bg-white'/>
</div>
</div>
<!-- ICONS -->
<div class='flex gap-6'>
<i class='w-6 h-6 hover:text-white cursor-pointer' data-lucide='list-music'/>
<i class='w-6 h-6 hover:text-white cursor-pointer' data-lucide='maximize'/>
</div>
</div>
</div>
<!-- ICON AKTİF -->
<script>
lucide.createIcons();
</script>
<!-- Yukarı Çık Butonu -->
<button class='w-12 h-12 rounded-2xl bg-purple-600 text-white shadow-2xl flex items-center justify-center hover:bg-purple-500 transition' id='back-to-top' title='Yukarı Çık'>
<i class='fas fa-chevron-up'/>
</button>
<script>
// Mobil Menü
const menuBtn = document.getElementById('mobile-btn');
const mobileMenu = document.getElementById('mobile-menu');
if(menuBtn && mobileMenu) {
menuBtn.addEventListener('click', (e) => {
e.stopPropagation();
mobileMenu.classList.toggle('hidden');
});
document.addEventListener('click', () => mobileMenu.classList.add('hidden'));
}
// Yukarı Çık Butonu Fonksiyonu
const backToTop = document.getElementById('back-to-top');
window.onscroll = function() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
backToTop.style.display = "flex";
} else {
backToTop.style.display = "none";
}
};
backToTop.addEventListener('click', () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});
</script>
</body>
</html>