kod içinde yer alan RSS LINK , GOOGLE PROFIL LINK , FACEBOOK LINK ve TWITTER LINK yazıları yerine kendi sosyal medya hesaplarınızın adreslerini ekleyiniz.
Blogger blogunuz için sosyal medya eklentileri olmazsa olmazlardan , bu eklentimizle blogger blogunuza rss sayfanızı , google sayfanızı , facebook sayfanızı ve twitter sayfanızı ziyaretçilerinize gösterebilirsiniz.Lütfen aşağıdaki adımları uygulayınız.
<style>
/*--------eklentisel sosyal buton Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzUc_l9YpzLdwNoZTi6blnEL-kdphF5yc89CaNkjZay8yIH0K3a-0SZ1r6f4zCxs4dv25lRsHXK1E3pqlOpKxursRPGJPsiZkQXBek4CcPZ1fLOe7NQXhmyvl6jB6_2PR1MzgsbXnvykiX/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="touchme">
<!--RSS-->
<a class="rss" href="RSS LINK" rel="external nofollow" target="_blank"></a>
<!--Google Plus-->
<a class="googleplus" href="GOOGLE PROFIL LINK" rel="external nofollow" target="_blank"></a>
<!--Facebook-->
<a class="facebook" href="FACEBOOK LINK" rel="external nofollow" target="_blank"></a>
<!-- Twitter -->
<a class="twitter" href="TWITTER LINK" rel="external nofollow" target="_blank"></a>
</div>
Blogger blogunuzda ziyaretçilerinizin sağ tıklamasını istemiyorsanız bu eklentiyi kullanabilirsiniz , aşağıdaki adımları uyulayınız.
<script type="text/javascript">
if (document.layers) {
//Capture the MouseDown event.
document.captureEvents(Event.MOUSEDOWN);
//Disable the OnMouseDown event handler.
document.onmousedown = function () {
return false;
};
}
else {
//Disable the OnMouseUp event handler.
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
//Check the Mouse Button which is clicked.
if (e.which == 2 || e.which == 3) {
//If the Button is middle or right then disable.
return false;
}
}
};
}
//Disable the Context Menu event.
document.oncontextmenu = function () {
return false;
};
</script>
iyi bloglamalar.
Bir yazı eklentisi olan , açıklama kutulu yazı eklentimizle , blog sitenizde açıklama yapmak istediğiniz kelime cümle yada linklerinize kutucuk içinde açılan bilgi ekleyebilirsiniz , css açıklama kutusu olan yazı eklentisini blogger blogunuza aşağıdaki adımları takip ederek ekleyebilirsiniz.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #f5f5f5 none repeat scroll top left;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
a,
a:visited {
color: #fff;
outline: none;
text-decoration: none;
}
a:hover,
a:focus,
a:visited:hover {
color: #fff;
text-decoration: none;
}
.ekcontainer {
position: relative;
max-width: 768px;
margin: 5% auto;
padding: 60px 30px 30px 30px;
background: #fff;
color: #95a5a6;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
line-height: normal;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.03);
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
border-radius: 10px;
}
.ekcontainer h1,
.ekcontainer h2 {
display: block;
text-align: center;
margin-bottom: 30px;
font-size: 3rem;
font-weight: 700;
color: #aaa;
}
.ekcontainer h2 {
margin-top: 30px;
}
.help-tip {
position: absolute;
top: 16px;
right: 16px;
text-align: center;
background-color: #29b6f6;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 12px;
line-height: 26px;
cursor: default;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.help-tip:hover {
cursor: pointer;
background-color: #ccc;
}
.help-tip:before {
content: '?';
font-weight: 700;
color: #fff;
}
.help-tip p {
visibility: hidden;
opacity: 0;
text-align: left;
background-color: #039be5;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 4px;
right: -4px;
color: #fff;
font-size: 13px;
line-height: normal;
transform: scale(0.7);
transform-origin: 100% 0%;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.help-tip:hover p {
cursor: default;
visibility: visible;
opacity: 1;
transform: scale(1.0);
}
.help-tip p:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #039be5;
right: 10px;
top: -12px;
}
.help-tip p:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -5px;
left: 0;
}
.help-tip a {
color: #fff;
font-weight: 700;
}
.help-tip a:hover, .help-tip a:focus {
color: #fff;
text-decoration: underline;
}</style>
Şablonunuzu kaydedin ve çıkın , Aşağıdaki örnekteki gibi uygulayabilirsiniz.
<div class="ekcontainer">
<h1>Bu Alana Yazı Yazılacak</h1>
<div class="help-tip">
<p>Bu Alana Açıklama Yazılacak </p>
</div>
</div>
Açıklama kutusu eklentisinde yazı boyutunu arka planı yüksekliği v.s blogunuza göre özelliştirebilirsiniz , yardımcı olmamızı istediğiniz bir konu olursa yorum bırakabilirsiniz.
Daha Önce Buradaki yazımızda basit kayan yazı eklentimizi anlatmıştık , şimdi ise 3d kayan yazımızı blogger bloga nasıl ekleriz onu anlatacağız , 3d kayan yazı eklentimizle blogunuzda daha farklı bir görüntü elde edebilir ziyaretçilerinize hoş bir görüntü sergileyebilirsiniz , 3d css kayan yazı efektini blogger blogunuza eklemek için yapmanız gereken aşağıda anlatılanları blogunuza uygulamak ve eklemek.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type="text/css">
@font-face {
font-family: Agency;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body {
font-family: Avenir, sans-serif;
marging: 0;
}
#dmarquee {
margin-top: 3rem;
perspective: 500px;
font-size: 0;
font-family: Agency, sans-serif;
}
#dmarquee div {
display: inline-block;
height: 12rem;
width: 20rem;
position: relative;
}
#dmarquee div:first-of-type {
background: #e5233e;
transform-origin: top right;
transform: rotateY(-60deg);
color: #fff;
}
#dmarquee div:last-of-type {
background: #b31e31;
transform-origin: top left;
transform: rotateY(45deg);
color: #f8c9d9;
}
#dmarquee div {
font-size: 8rem;
overflow: hidden;
}
#dmarquee div span {
position: absolute;
width: 600%;
line-height: 1.4;
}
#dmarquee div:first-of-type span {
transform: translateX(40rem);
animation: leftcrawl 14s linear infinite;
text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#dmarquee div:last-of-type span {
transform: translateX(20rem);
animation: rightcrawl 14s linear infinite;
}
@keyframes leftcrawl {
to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
to { transform: translateX(-120rem); }
}
</style>
Şablonunuzu kaydedin ve çıkın , Aşağıdaki örnekteki gibi uygulayabilirsiniz.
<div id="dmarquee">
<div>
<span>Buraya yazı gelecek</span>
</div>
<div aria-hidden="true">
<span>Buraya Yazı Gelecek</span>
</div>
</div>
Başka bir eklentide görüşmek üzere....Soru ve görüşleriniz için yorum panelini kullanabilirsiniz.
Bu yazımızda blogger blogunuza kayan yazı nasıl eklenir onu anlatacağız , son derece basit olan bu eklentimizle ziyaretçilerinize belirlediğiniz yazı yada yazılarınızı kayan bir şekilde gösterebilirsiniz , blogger blogunuza kayan yazı eklemek istiyorsanız aşağıda anlatılanları blogunuza uygulayabilir ve ekleyebilirsiniz.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type="text/css">
body { margin: 20px; }
.marquee {
height: 25px;
width: 900px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}</style>
Şablonunuzu kaydedin ve çıkın , Aşağıdaki örnekteki gibi uygulayabilirsiniz.
<div class="marquee">
<div>
<span>Bu alana kaymasını istediğiniz yazıyı yazınız.</span>
<span>Bu alana kaymasını istediğiniz yazıyı yazınız.</span>
</div>
</div>
3d Döner Resim Galerisi eklentimizde belirlediğiniz resimler döner şekilde sergilenecek ve hoş bir görüntü sergileyecektir.Anlatılanları yaparak blogger blogunuza ekleyebilirsiniz.Soru vegörüşleriniz için yorum panelini kullanabilirsiniz.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Anaheim);
*{
margin: 0;
padding: 0;
outline: none;
border: none;
box-sizing: border-box;
}
*:before,
*:after{
box-sizing: border-box;
}
html,
body{
min-height: 100%;
}
body{
background-image: radial-gradient(mintcream 0%, lightgray 100%);
}
h1{
display: table;
margin: 5% auto 0;
text-transform: uppercase;
font-family: 'Anaheim', sans-serif;
font-size: 4em;
font-weight: 400;
text-shadow: 0 1px white, 0 2px black;
}
.container{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}</style>
Şablonunuzu kaydedin ve çıkın , Aşağıdaki örnekteki gibi uygulayabilirsiniz.
<div class="container">
<div id="carousel">
<figure><img src="//lorempixel.com/186/116/nature/1" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/2" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/3" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/4" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/5" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/6" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/7" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/nature/8" alt=""></figure>
<figure><img src="//lorempixel.com/186/116/people/9" alt=""></figure>
</div>
</div>
Kırmızı ille işaretlenmiş kısımları kendi resim linklerinizle değiştirebilirsiniz.
Previous PostÖnceki Kayıtlar
Ana Sayfa