1
0
Home  ›  Blogger  ›  CSS  ›  HTML  ›  JavaScript  ›  Video

Blogger'da Video Oynatıcı Nasıl Eklenir?

 

Blogger'da Video Oynatıcı Nasıl Eklenir? | Serkan Kod Editörü-1

Merhaba Arkadaşlar bugün sizlere Blogger sitenize Video oynatıcı nasıl eklenir onu anlatmaya çalışacağım.

Öncelikle aşağıda ki CSS kodlarını temamızda ]]></b:skin> kodunu bulalım ve stil kodlarını üzerine gelecek şekilde yükleyelim.


1234567891011
/* Video Player */ .vidBdy{width:100%;border-radius:10px;margin-bottom:26px;background:#ebf5fc;box-shadow: -6px -6px 20px rgba(255,255,255,1), 6px 6px 20px rgba(178,178,178,.60);border-radius:15px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-mos-box-sizing:border-box;margin-bottom: 1.66rem;} .name{padding:0 0 0 66px;background-color:#6001d3;border-radius:8px;position:relative;display:flex;justify-content:space-between} .ttl-name{width:100%} .name h2{color:#fff!important;font-size:16px;margin-left:-40px!important;padding:0} .vidBd{padding:10px} .vidBd h1{font-size:30px;margin:2px;line-height:1em} .vidBdCate,.vidBdCate a{font-size:12px;color:#ffc119;padding-top:5px;position:relative} .vidBdCate span{color:#2a2a2a} .vidBdCate,.vidBdCate a{font-size:12px;color:#ffc119;padding-top:5px;position:relative} .vidInf{padding-top:5px;padding-bottom:2px} .vidNteWtch{position:relative;text-align:center} .dwnldVid{padding-top:15px;position:relative} .vidNteWtch{position:relative;text-align:center} .vidBd_report{position:absolute;right:0;bottom:0} .vidBd_watch{margin:20px 0} .vidBodyWtchCnt{position:relative} .vidBodyWtchCnt{margin:10px 0} .plyVid{position:relative;padding-bottom:58%;height:0;width:100%} .plyVid iframe{position:absolute;top:0;width:100%;height:100%} /* Episodes Card */ #epsds{background:#ebf5fc;box-shadow:-6px -6px 20px #fff,6px 6px 20px rgba(0,0,0,.1);border-radius:15px} .epSec{border-radius:10px;padding:15px;margin-bottom:1.66rem;box-shadow:0 10px 50px 0 rgba(178,178,178,.6)} .epSec .head{position:relative;margin-bottom:10px} #epsds ul.ranges{font-size:.85em;list-style:none;margin:0;padding:0;display:inline-block} #epsds ul.ranges li{display:inline-block;color:#666;cursor:pointer;padding:2px 5px;border-radius:3px;-webkit-transition:all .15s;-moz-transition:all .15s;transition:all .15s} #epsds ul.ranges li.active{color:#6001d3} #epsds ul.epsds{margin:0;padding:0;list-style:none;margin:0 -5px;margin-top:10px} #epsds ul.epsds li{float:left;width:10%} #epsds ul.epsds li a{color:inherit} #epsds ul.epsds li a{cursor:pointer;padding:5px 10px;min-width:51px;text-align:center;display:block;margin:0 5px 10px;border:1px solid #eceff1;border-radius:8px;font-size:.96em;color:inherit} #epsds ul.epsds li a:hover{cursor:pointer;background:#6001d3;color:#f8f8f8} #epsds ul.epsds li a.active{background:#6001d3;color:#f8f8f8} .epSec .body:after{display:block;clear:both;content:""} .tabsHead{display:flex;border-bottom:1px solid #1e1e1e;margin-bottom:30px;font-size:13px;line-height:1.7em} .tabsHead > :not(:last-child){margin-right:7px} .tabsHead > * {padding:8px 12px;border:1px solid #1e1e1e;border-bottom:0;border-radius:4px 4px 0 0;position:relative} .tabsHead > :before{content:attr(data-text)} .tabsHead > :after{content:'';display:block;width:100%;height:2px;background-color:#6001d3;position:absolute;left:0;bottom:-1px;visibility:hidden;opacity:0} .tabsContent{position:relative} .tabsContent > * {display:none;width:100%} .tabsContent > * p:first-child{margin-top:0}input[id*="1"]:checked ~ .postTabs label[for*="1"]:after, input[id*="2"]:checked ~ .postTabs label[for*="2"]:after, input[id*="3"]:checked ~ .postTabs label[for*="3"]:after, input[id*="4"]:checked ~ .postTabs label[for*="4"]:after, input[id*="5"]:checked ~ .postTabs label[for*="5"]:after, input[id*="6"]:checked ~ .postTabs label[for*="6"]:after, input[id*="7"]:checked ~ .postTabs label[for*="7"]:after, input[id*="8"]:checked ~ .postTabs label[for*="8"]:after{visibility:visible;opacity:1}input[id*="1"]:checked ~ .postTabs .tabsContent div[class*=Content-1], input[id*="2"]:checked ~ .postTabs .tabsContent div[class*=Content-2], input[id*="3"]:checked ~ .postTabs .tabsContent div[class*=Content-3], input[id*="4"]:checked ~ .postTabs .tabsContent div[class*=Content-4], input[id*="5"]:checked ~ .postTabs .tabsContent div[class*=Content-5], input[id*="6"]:checked ~ .postTabs .tabsContent div[class*=Content-6], input[id*="7"]:checked ~ .postTabs .tabsContent div[class*=Content-7], input[id*="8"]:checked ~ .postTabs .tabsContent div[class*=Content-8]{display:block} /* Responsive */ @media screen and (max-width:640px){#epsds ul.epsds li{float:left;width:20%}} @media screen and (max-width:640px){.tabsHead{font-size:12px}} /* Dark Mode */ .drK #epsds{background:#252526;box-shadow: -6px -6px 20px rgba(21, 21, 24, 1), 6px 6px 20px rgba(36, 37, 41, 1)} .drK #epsds ul.epsds li a, .drK .tabsHead > *{border-color:#989b9f} .drK .vidBd{background:#252526;box-shadow: -6px -6px 20px rgba(21, 21, 24, 1), 6px 6px 20px rgba(36, 37, 41, 1)}

Baca juga Blogger'da Daha Fazla Araç Bağlantı Listesi Sayfası Oluşturma

Daha sonra aşağıda ki JavaScript kodunu </body> kodunun üzerine gelecek şekilde ekleyelim.


12
<!--[ Video PLayer with episodes]--><script>/*<![CDATA[*//* Video PLayer with episodes script */ function titleFunction(t){document.getElementById("vidTtl").innerText=t.getAttribute("data-title")}$(document).ready(function(){$("ul.epsds li a").click(function(t){t.preventDefault(),$("#player").attr("src",$(this).attr("data-link"))})}),$("ul.epsds li a").click(function(t){t.preventDefault(),$("a").removeClass("active"),$(this).addClass("active")}); /*]]>*/</script>

Son olarak temanızda cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1 kodu yok ise aşağıda ki kodu </head> kodunuzun yine üzerine gelecek şekilde ekleyin.

Baca juga Blogger'da Yapışkan Not Oluşturma Aracı


12
<!--[ jQuery v3.5.1]--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

 Ve son olarak Videomuzun görünmesini istediğimiz yere aşağıda ki HTML kodunu ekleyelim.


12
<!--[ Video Player]---><div class="vidBdy"> <div class="name video"> <div class="ttl-name"> <h2>#</h2> </div> </div> <div class="vidBd"> <h1 id="vidTtl">Title Name</h1> <div class="vidBd_watch"> <div id="loadVid"> <div class="vidBodyWtchCnt load"> <div class="plyVid"> <iframe allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true" id="player" loading="lazy" src="#" style="border: none; height: 100%; position: absolute; top: 0; width: 100%;"></iframe> </div> </div> </div> </div> </div></div><div id="epsds"> <div class="epSec"> <div class="head"> <!--[ Active function]--> <input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked> <input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'> <div class='postTabs'> <div class='tabsHead'> <!--[ Change atribute data-text='...' to replace tabs title]--> <label for='forall-tabs1' data-text='S01'></label> <label for='forall-tabs2' data-text='S02'></label> </div> <div class='tabsContent'> <!--[ Tabs content]--> <div class='tabsContent-1'> <div class="body"> <ul class="epsds"> <li><a data-link="#" data-title="01 - Title Name" onclick="titleFunction(this)" title="">01</a></li> <li><a data-link="#" data-title="02 - Title Name" onclick="titleFunction(this)" title="">02</a></li> <li><a data-link="#" data-title="03 - Title Name" onclick="titleFunction(this)" title="">03</a></li> </ul> </div> </div> <!--[ Tabs content]--> <div class='tabsContent-2'> <div class="body"> <ul class="epsds"> <li><a data-link="#" data-title="01 - Title Name" onclick="titleFunction(this)" title="">01</a></li> <li><a data-link="#" data-title="02 - Title Name" onclick="titleFunction(this)" title="">02</a></li> <li><a data-link="#" data-title="03 - Title Name" onclick="titleFunction(this)" title="">03</a></li> </ul> </div> </div> </div> </div> </div> </div></div>

Demo sayfasını aşağıda ki linkten kontrol edebilirsiniz.


DEMO SAYFASI

Serkan Gündoğdu
Bilgisayar ve Yazılım Programları Hakkında En Güncel Bilgiler Bu Blog'da Bizi Takip Etmeyi Unutmayın.
Related Post
Blogger Facebook Fanpage Eklentisi
Blogger Facebook Fanpage Eklentisi Blogger sayfanıza Facebook Fanpage (Hayran) sayfanızı takip etme…
Blogger Sosyal Medya Widget Paylaşım Kodu Ekleme
Blogger Sosyal Medya Widget Paylaşım Kodu EklemeBlogger Sosyal Medya Widget Paylaşım Kodu EklemeWidget takip sosyal Ko…
Blogger için Özel Sağ Tıklama Menüsü
Blogger için Özel Sağ Tıklama Menüsü Blogger kullanıcılarına özel Sağ tıklama menüsünü sizler için paylaşâ€¦
Blogger Yönetici Kontrol Paneli
Blogger Yönetici Kontrol Paneli Blogger HTML CSS ve JavaScript kullanarak Yönetici Kontrol Paneli Ol…
Yorum Gönder
Additional JS