Blogger için Hareketli Abone Ol Kutusu Eklentisi

Merhaba arkadaşlar bugün sizlere Bloggerınız için hareketli animasyonlu Abone ol kutusu nasıl eklenir onu anlatmaya çalışacağım.

Öncelikle Blogger sayfasınızı açın ve Temalar bölümüne gidin. Burada HTML düzenle seçeneğine tıklayın.

Daha sonra HTML kod editör sayfamızda Ctrl+F yardımıyla </head> kodunu aratalım. Ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

CSS@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);
body {
  background: #2c3e50;
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  max-width: 320px;
  margin: 4% auto;
  padding: 0;
  background: #fff;
  color: #222;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

.container h1,
.container h2 {
  display: block;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
}
@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
}
/* Subscribe Box */
@keyframes rotate {
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
.rainbow {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 3px;
}
.rainbow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #2ecc71;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#2ecc71, #2ecc71),
    linear-gradient(#fbb300, #fbb300), linear-gradient(#e74c3c, #e74c3c),
    linear-gradient(#3498db, #3498db);
  animation: rotate 8s linear infinite;
}
.rainbow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  top: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background: #fff;
}
#HTML99 {
  padding: 0;
}
#HTML99 h2 {
  color: #222;
  padding: 0;
}
#HTML99 h2:before {
  display: none;
}
.subscribe-wrapper {
  color: #222;
  line-height: 20px;
  margin: 0;
  padding: 20px;
}
.subscribe-form {
  clear: both;
  display: block;
  margin: 10px auto;
  overflow: hidden;
}
.subscribe-wrapper p {
  margin: 0;
  font-size: 14px;
}
form.subscribe-form {
  clear: both;
  display: block;
  margin: 10px 0 0;
  width: auto;
  overflow: hidden;
}
.subscribe-css-email-field {
  background: #fff;
  color: #222;
  margin: 0 0 18px;
  padding: 12px 0;
  width: 99%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  outline: 0;
  font-size: 14px;
  text-indent: 20px;
  line-height: 20px;
  border-radius: 3px;
  transition: all 0.6s;
}
.subscribe-css-email-field:hover,
.subscribe-css-email-field:focus {
  border-color: rgba(0, 0, 0, 0.3);
}
.subscribe-css-button {
  background: #2c3e50;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  padding: 15px 0;
  text-transform: none;
  width: 100%;
  border: none;
  font-size: 16px;
  border-radius: 3px;
  transition: all 0.3s;
}
.subscribe-css-button:hover {
  background: #34495e;
} 

Yukarıda ki kodları ekledikten sonra Tema Kaydet diyelim. Şimdi Temamızda Yerleşim alanı bölümüne geçelim ve orada "Gadget Ekle" diyelim.

Gadget Ekle dedikten sonra karşımıza çıkan seçeneklerden "HTML/JavaScript" seçeneğini seçelim ve aşağıda ki kodları bu alana ekleyelim.

HTML<div class="container">
<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Bülten</h2>
<p>Bu blogdaki makaleleri seviyorsanız, lütfen e-posta yoluyla ücretsiz üye olun.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="InSEOFree" ></input>
<input name="loc" type="hidden" value="en_US" ></input>
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Email Adresiniz"></input>
<input class="subscribe-css-button" title="" type="submit" value="Gönder" ></input>
</form>
</div>
</div></div></div>
</div>

Yukarıda vermiş olduğumuz kodların arasında "https://feedburner.google.com/fb/a/myfeeds" kendi blogunuza göre düzeltmeleri yapın ve Kaydet düğmesine tıklamayı unutmayın.

Son olarak yine Tema bölümüne tıklayalım ve HTML Düzenle ve aşağıda vermiş olduğum kodu aratın.

HTML<div class="rainbow"> 

Gadegt Kimlik kodunuzu HTML99 ile değiştirmeyi unutmayın. Ve Temanızı kaydedin.

Bütün işlemler bu kadar herkese kolay gelsin.

Demo Buraya Tıkla