Html Buton Kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Html Buton Kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

22 Ağustos 2015 Cumartesi

Blogger Çoklu Demo ve Download Buton Kodları



   Blog sitenizde yayınlayacak olduğunuz yazılarında birden fazla download veya demo seçeneği kullanmak isterseniz aradığınız bu olabilir.
<style>
@font-face {font-family:'Oswald';font-style:normal;font-weight:300;
src:local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Codex-KOM CSS Slide demom and doownload Button */
.doownload {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border-radius:3px;}
.doownload h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.doownload:hover h1{margin-left:100%;opacity:0.7;}
.doownload ul {display:inline-block;margin:0;padding:0;}
.doownload ul li {position:static;display:inline-block;padding:0 .1em;}
.doownload ul li::before {display:none;}
.doownload ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}
.doownload ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}
.doownload-infom{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.doownload-infom h1{background-color:#20a3cb;}
.demom {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}
.demom h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.demom:hover h1{margin-left:100%;opacity:0.7;}
.demom ul {display:inline-block;margin:0;padding:0;}
.demom ul li {position:static;display:inline-block;padding:0 .1em;}
.demom ul li::before {display:none;}
.demom ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demom ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}
.demom-infom{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.demom-infom h1{background-color:#a3acb2;}
</style>
<div class="doownload doownload-infom">
<h1> doownload </h1>
<ul>
<li><a href="#" target="_blank"> doownload 1</a></li>
<li><a href="#" target="_blank"> doownload 2</a></li>
<li><a href="#" target="_blank"> doownload 3</a></li>
<li><a href="#" target="_blank"> doownload 4</a></li>
</ul>
</div>
<div class="demom demom-infom">
<h1> demom </h1>
<ul>
<li><a href="#" target="_blank"> demom 1 </a></li>
<li><a href="#" target="_blank"> demom 2 </a></li>
<li><a href="#" target="_blank"> demom 3 </a></li>
<li><a href="#" target="_blank"> demom 4 </a></li>
</ul>
</div>



Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

8 Temmuz 2015 Çarşamba

CSS Hareketli Download & Demo Buton Kodu

   
   Üzerine gelince hareket eden ve tıklayınca direk olarak siteye yönlendiren veya yeni sekmede açan bu butonlar sitenizde kullanabileceğiniz değişik bir butonlarlar. CSS Download & Demo butonlar ile gayet sade, şık ve güzel bir görünüm elde edebilirsiniz.Üstelik CSS kodlarını temanızın kodları içerisinde gereken yere ekledikden sonra HTML kodlarını yazı içerisinde kullanarak butonlara sahip olabilirsiniz.

CSS Hareketli Download & Demo Buton Kodu Kurulum ve Kullanımı

1- Kumanda paneli > Şablon > HTML Düzenle yolunu izleyin.
2- CTR-F kısa yol tuşları ile </style> veya ]]></b:skin> kodlarından birinin üst kısmına altta ki CSS kodlarını ekleyin.
#wrap {
margin: 20px auto;
text-align: center;
}

#wrap br {
display: none;
}

.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}

.btn-slide2 {
border: 2px solid #efa666;
}

.btn-slide:hover {
background-color: #0099cc;
}

.btn-slide2:hover {
background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}

.btn-slide2:hover span.circle2 {
color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}

.btn-slide2 span.circle2 {
background-color: #efa666;
}

.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}

.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
3- CSS kodlarını ekledikten sonra şablonu kaydedin ve Kumanda paneline geri dönün.
4- Yazılarınız içerisinde kullanacağınız HTML buton kodlarını HTML kısmına tıklayarak düzenledikten sonra Oluştur kısmına tıklayarak yazınıza devam edebilirsiniz.
<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>



Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!

28 Şubat 2015 Cumartesi

Yazıların altında açıklama Kodu


   Konu başlığında da gördüğünüz gibi ve verecek olduğum olduğum örnekte bu kodu farklı özellikler ve amaçlar için kullanabilirsiniz.Özellikle başlık açıklamaları veya yazılarınız altında aynı kategoriye ait farklı başlık ve açıklamalarını gösterebilirsiniz.




<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
if (document.getElementById) {
document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font: .9em verdana, arial, helvetica, sans-serif; margin-bottom: 12px;}</style>') }

var divNum = new Array("a1","a2","a3"); // at the left you should add a1, a2 etc. for each header you wish to include
// so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
// enclosed in double quotes
function openClose(theID) {
for(var i=0; i < divNum.length; i++) {
if (divNum[i] == theID) {
if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
else {
document.getElementById(divNum[i]).style.display = "block"
}
} else {
document.getElementById(divNum[i]).style.display = "none"; }
}
}
</script>

<style>
.mainExpand {
cursor:hand;
cursor:pointer;
font: bold .9em verdana, arial, helvetica, sans-serif;
</style>


<div onClick="openClose('a1')" class="mainExpand">1] Example & Explanation:</div>
<div id="a1" class="texter">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
</div>

<div onClick="openClose('a2')" class="mainExpand">2] Compatibility:</div>
<div id="a2" class="texter">
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus
</div>

<div onClick="openClose('a3')" class="mainExpand">3] Notes:</div>
<div id="a3" class="texter">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
</div>


Yukarıda ki kod içerisinde kırmızı renkle belirttiğim kısımlara başlık metinleri mavi kısımlara ise başlıklara ait açıklamalarını yazacak olduğunuz bölümlerdir.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Link Açıklaması HTML Kodu


     Blogger yazılarınız içerisinde kullanacak olduğunuz linklere açıklama ekleyebilir veya makaleleriniz içerisinde başlıkların açıklama kısımlarını bu kod ile kısaltarak yazınızı daha düzgün şekilde görünmesini sağlayabilirsiniz.


<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
var useBSNns;

if (useBSNns) {
if (typeof(bsn) == "undefined")
bsn = {}
var _bsn = bsn;
} else {
var _bsn = this;
}

_bsn.Crossfader = function (divs, fadetime, delay ) {
this.nAct = -1;
this.aDivs = divs;

for (var i=0;i<divs.length;i++) {
document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";
}

this.nDur = fadetime;
this.nDelay = delay;
this._newfade();
}

_bsn.Crossfader.prototype._newfade = function() {
if (this.nID1)
clearInterval(this.nID1);
this.nOldAct = this.nAct;
this.nAct++;

if (!this.aDivs[this.nAct]) this.nAct = 0;

if (this.nAct == this.nOldAct)
return false;

document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
this.nInt = 50;
this.nTime = 0;
var p=this;
this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}

_bsn.Crossfader.prototype._fade = function() {
this.nTime += this.nInt;
var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
var op = ieop / 100;
document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

if (this.nOldAct > -1) {
document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
}

if (this.nTime == this.nDur) {
clearInterval( this.nID2 );

if (this.nOldAct > -1)
document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";
var p=this;
this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
}
}

_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d) {
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}
</script>

<style>
div.cf_wrapper {
position: relative;
left: 30%;
}

div.cf_element {
width: 400px;
background-color: #eee;
border: 1px solid #ccc;
}

div.cf_element div.content {
padding: 10px;
}

div.cf_element div.content h3 {
padding-top: 0;
margin-top: 0;
}
</style>


<div class="cf_wrapper">

<div class="cf_element" id="cf1">
<div class="content">
<h3>Element 1</h3>
<p>Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii <a href="#">legunt saepius claritas</a> est etiam processus dynamicus qui.</p>
</div>
</div>

<div class="cf_element" id="cf2">
<div class="content">
<h3>Element 2</h3>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua <strong>franca va esser</strong> plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A <em>un Angleso it va semblar un</em> simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
</div>
</div>

<div class="cf_element" id="cf3">
<div class="content">
<h3>Element 3</h3>
<p style="text-align: center;">
<img src="http://hizliresim.com/rg52j7" width="200" height="150"><br />
Iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me. Usus legentis in lius quod ii legunt saepius claritas est etiam processus dynamicus qui. <a href="#">Littera gothica quam!</a></p>
</div>
</div>

</div>

<script type="text/javascript">
<!--
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
-->
</script>





Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Resim ve Yazı Show Kodu


   Yazı İÇERİSİNDE kullanabileceginiz Farklı ziyaretinde resim yazı ekleyebildiğiniz ziyaretinde de uzun yazılarınızın önemli Diğer kısımlarını bu özellikle belirtebilirsiniz.

<Script type = "text / javascript"> 
/ * Bu script ve daha birçok mevcuttur ücretsiz çevrimiçi
JavaScript Kaynak !! http://javascript.internet.com
Oluşturan: Timothy Groves | http://www.brandspankingnew.net/ * /
var useBSNns;

if (useBSNns) {
if (typeof (bsn) == "tanımsız")
bsn = { }
var _bsn = bsn;
} else {
var _bsn = Bu;
}

_bsn.Crossfader = function (divs, fadetime, gecikme) {
this.nAct = -1;
this.aDivs = divs;

for (var i = 0; i < divs.length; i ++) {
. document.getElementById (divs [i]) style.opacity = 0;
document.getElementById (divs [i]) style.position = "mutlak";.
document.getElementById (divs [i]) .style.filter = "alfa (opaklık = 0)";
document.getElementById (divs [i]) style.visibility = "gizli";.
}

this.nDur = fadetime;
this.nDelay = gecikme;
this._newfade () ;
}

_bsn.Crossfader.prototype._newfade = function () {
if (this.nID1)
clearInterval (this.nID1);
this.nOldAct = this.nAct,
this.nAct ++;

if (! this.aDivs [this.nAct] ) this.nAct = 0;

(this.nAct == this.nOldAct) eğer
return false;

document.getElementById (this.aDivs [this.nAct]) .style.visibility = "görünür";
this.nInt = 50;
bu .nTime = 0;
var p = Bu;
this.nID2 = setInterval (function () {p._fade ()}, this.nInt);
}

_bsn.Crossfader.prototype._fade = function () {
this.nTime + = this.nInt;
var ieop = Math.round (this._easeInOut (this.nTime, 0, 1, this.nDur) * 100);
var os = ieop / 100;
Document.GetElementById (this.aDivs [this.nAct] ) = op .style.opacity;
document.getElementById (this.aDivs [this.nAct]) .style.filter = "alfa (opaklık =" + ieop + ")";

if (this.nOldAct> -1) {
belge. getElementById (this.aDivs [this.nOldAct]) .style.opacity = 1 - op;
document.getElementById (this.aDivs [this.nOldAct]) .style.filter = "alfa (opaklık =" + (100 - ieop) + ")";
}

halinde (this.nTime == this.nDur) {
clearInterval (this.nID2)

halinde (this.nOldAct> -1)
Document.GetElementById (this.aDivs [this.nOldAct]) bir dal. görünürlük = "gizli";
var p = Bu;
this.nID1 = setInterval (function () {p._newfade ()}, this.nDelay);
}
}

_bsn.Crossfader.prototype._easeInOut = function (t, b, c d) {
return / c 2 * (1 - Math.cos (Math.PI * t / d)) + b;
}
</ script>

<style>
div.cf_wrapper {
position: relative;
sol: 30%;
}

div.cf_element {
width: 400px;
background-color: #eee;
border: 1px solid #ccc;
}

div.cf_element div.content {
padding: 10px;
}

div.cf_element div.content h3 {
padding-top: 0;
margin -üst: 0;
}
</ style>


<div class = "cf_wrapper">

<div class = "cf_element" id = "CF1">
<div class = "content">
<h3> Eleman 1 </ h3>
<p > Quod mazim darbe possim assum tipik ola olmayan habent claritatem placerat. Demonstraverunt Lectores Legere bana Lius, quod ii <a href="#"> legunt saepius Claritas </a> est etiam processus dynamicus qui. </ P>
</ div>
</ div>

<div class = "cf_element" id = "cf2">
<div class = "content">
<h3> Eleman 2 </ h3>
<p> Ma quande Lingues li grammatica del Elde edilen lingue es plu basitliği e regulari quam ti del birleştirme Lingues, birleşerek. Li Kasım lingua <strong> franca va esser </ strong> plu basitliği e regulari quam li mevcut Europan Lingues. Bu va esser tam basitliği quam Occidental: Aslında, bu va esser Occidental. A <em> un Angleso o va semblar un </ em> Açılar simplificat, quam un kuşkucu Cambridge amico dit que me Occidental es. </ P>
</ div>
</ div>

<div class = "cf_element" id = " cf3 ">
<div class = "content">
<h3> Eleman 3 </ h3>
<p style = "text-align: center;">
<img src = "http://hizliresim.com/rg52j7" width = "200" height = "150"> <br />
iis qui facit Çorum claritatem Investigationes demonstraverunt Lectores Legere bana. Lius QUOD ii Usus legentis legunt saepius Claritas est etiam processus dynamicus qui. <a href="#"> Littera gothica quam </a> </ p>!
</ div>
</ div>

</ div>

<script type = "text / javascript">
<! -
var cf = new crossfader (new Array ('CF1', 'cf2', 'cf3'), 500, 2000);
->
</ script>




Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Değil: Gelen Maili Aktif Etmeyi Unutmayınız!

Açıklamalı Javascript Buton Kodu


Blogger sitende ister gadget olarak isterseniz yazı içerisinde kullanabileceğiniz açıklamalı javascript buton kodu.

Örnek Buton

<input type="submit" value="Buraya Tıkla" onmouseover="this.value='Bilgi Cafem 61'" onmouseout="this.value='Buraya Tıkla!'">



Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

11 Ekim 2014 Cumartesi

Resimli Rastgele Yazı Kodu


    Blogger blogunuz da hazırladığınız yazılarınızda rastgele konuları sitenizin takipçileri ile paylaşmak amaçlı kullanabileceğiniz bir eklenti.Resimli rastgele yazı kodu blogunuzda ki yazılarınızda resim varsa resmi gösterir eğer resim eklemediyseniz kırmızı kutu şeklinde yazılarınız görünür.Her sayfa yenilenmesinde farklı konuları gösterir.

    Resimli Rastgele Yazı Kodu Blogger sitenize eklemek için Kumanda Paneli / Yerleşim / Gadget ekle / HTML/Javascript yolunu izleyerek açılan Gadgetin içerisine aşağıda ki kodları ekleyerek kaydedin.Görünmesini istediğiniz ana sayfada ki yere gadgeti sürükleyerek bırakın.



Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıdan Yorum ve Sorularınızı Bırakın...