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 HTML, CSS ve JavaScript'te Bir Görüntü Düzenleyici Oluşturma
Blogger HTML, CSS ve JavaScript'te Bir Görüntü Düzenleyici Oluşturma Yukarıdaki videoda, bu Görüntü Düzenleyicinin demosunu ve onu HT…
JavaScript Paket Açma Aracı
JavaScript Paket Açma Aracı Choose File Unpack Download Copy Clear …
Blogger Fotoğrafdan Renk Kodunu Alma
Blogger Fotoğrafdan Renk Kodunu AlmaBlogger'a yüklediğiniz fotoğrafın renklerinden renk kodunu almak için …
Blogger'da Video Oynatıcı Nasıl Eklenir?
Blogger'da Video Oynatıcı Nasıl Eklenir? Merhaba Arkadaşlar bugün sizlere Blogger sitenize Video oynatıcı…
Yorum Gönder
Additional JS