Ads

Blogger tarafından desteklenmektedir.
Merhabalar , Blogumuz yeni açıldı , Her gün eklenen yeni eklentilerle buradayız , Bizi takip etmeye devam ediniz.
Son Eklenen Eklentiler

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.

eklentiyi ön izleme


Resimdeki yolu 1-2-3 şeklinde izleyin ve aşağıdaki kodu açılan panele ekleyiniz.


<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>

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.











0



Blogger blogunuzda ziyaretçilerinizin sağ tıklamasını istemiyorsanız bu eklentiyi kullanabilirsiniz , aşağıdaki adımları uyulayınız.

resimdeki yolu 1-2-3 şeklinde izleyin ve aşağıdaki kodu açılan panele ekleyiniz.



<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.
0

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.

eklentiyi ön izleme


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.
0

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.


eklentiyi ön izleme



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.





0

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.


eklentiyi ön izleme



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>



0

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.



eklentiyi ön izleme


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.
0

Blogger Templates By Templatezy & Copy Blogger Themes. Distributed By Protemplateslab