Blogger’da Geometrik Tasarım Abone Kutusu Eklentisi

Abone olmak, blog kanınızı sağlıklı bir şekilde çalıştırır ve bunların tümü internet pazarlamasından ve evet, kanın ürettiği ve blogunuzu sağlıklı ve doldurucu kıldığı blogunuzun açık bir aracı olan abone kutusundan yapılır. Günümüzde özellikle popüler ve yeni bloglarda WordPress platformunda göze çarpan abonelik kutusunu görebiliyorsunuz, ancak bugünkü yazımızda, asıl alanın veya vücudun üstünde uygulayacağımız profesyonel geometrik abone kutusunu sizlerle paylaşacağız. WordPress bloglarında olduğu gibi abone kutusunun etkisi. Bu makaleye devam etmeden önce, SEO TIME adlı yeni bir şablon olan TemplateSilk tarafından tasarlanan bu güzel abone kutusunu benimsediğimizi belirttim . Bu yazıya başlayalım.

Blogger Hesabınızı açın.

Şablon >> Yedekle ve Geri Yükle seçeneğine tıklayın ve güvenlik için yedekleme yapın.

Ardından, HTML Düzenle >> düğmesini tıklayın. Gizli arama kutusunu açmak için CTRL + F tuşlarına basın .

Altbilgiyi arayın, çünkü blogunuzda altbilgiye sahipseniz, bu abone kutusunu altbilginin hemen üzerine uygulayabilir ve bu abone kutusunu kredi kutunuzun hemen üstüne eklemek isterseniz, gerçek şablon kimliğinizi / alt sınıf veya kredi sınıfınızı gösterildiği gibi arayın aşağıdaki resimde. Alttaki resimde alt bilgiyi aradım.

 

Şimdi, aşağıdaki HTML kodunu, yukarıdaki resimde gösterildiği gibi, ilk üst alt bilgi divinin hemen üzerine yapıştırın.

HTML<!-- Subscribe Box -->
<div id='subscribe-layer'>
<div id='subscribe-box-wrap'>
<div id='subscribe-box'>
<h2 class='title'>Subscribe to our newsletter</h2> <span class='sub-description'>
(Get fresh updates in your inbox. Unsubscribe at anytime)</span>
<div class='subscribe-box-inside'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'>
<input class='subscribe-box-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td>
<input class='subscribe-box-submit' type='submit' value='Subscribe'/> </td> </tr> </table>
<input name='uri' type='hidden' value='templatesilk'/> <input name='loc' type='hidden' value='en_US'/>

Kodların içerisinde bulunan mail adres yerlerine kendinize göre değiştirebilirsiniz.

Şimdi ]]></b:skin> kodunu aratın ve aşağıda ki CSS kodlarını bulduğunuz kodun üzerine gelecek şekilde ekleyin.

CSS/*=====================================
= Subscribe Box =====================================*/
.subscribe-box-inside {
margin-top: 15px;
}
#subscribe-layer {
background-blend-mode: overlay;
background-image: url(//dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);
background: rgb(66, 127, 237);
}
.subscribe-box-inside .subscribe-box-address {
color: #fff !important;
width: 480px;
font-size: 20px;
border: 0;
outline: none;
background-color: rgba(43, 64, 82, 0.84);
padding: 26px 0px 20px 26px;
border-radius: 0px;
}
.subscribe-box-inside .subscribe-box-address:focus {
box-shadow: 4px 0px 6px #fff inset;
border-radius: 5px;
}
.subscribe-box-inside .subscribe-box-submit {
margin: 0px 0px 0px 30px;
border: 0;
background: #ffffff !important;
color: #448aff;
padding: 21px 21px;
font-size: 20px;
}
.subscribe-box-inside .subscribe-box-submit:hover {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.sub-box a,
.sub-box a:visited {
color: #eeeeee
}
.sub-box a:visited {
text-decoration: underline;
}
.sub-box a:hover {
color: #cccccc;
}
#subscribe-box-wrap {
background-blend-mode: overlay;
background-image: url(//dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);
padding: 42px 0px 50px 0px;
margin: 0px auto;
background-attachment: fixed;
background-size: cover;
}
#subscribe-box-wrap a {
color: #66665f;
}
#subscribe-box {
color: #5b5b5e;
width: 520px;
margin: 0 auto;
}
#subscribe-box h2 {
margin: 0px 0 3px -45px;
padding: 0px;
color: #fff;
font-size: 35px;
display: block;
width: 676px;
}
#subscribe-box::-webkit-input-placeholder {
color: #fff;
}
span.sub-description {
color: #fff;
font-size: 21px;
display: block;
margin-left: 20px;
width: 505px;
}
.subscribe-box-inside:before {
content: "\f0e0";
color: #fff;
float: left;
font-size: 200px;
margin-left: -260px;
margin-top: -110px;
}

Şimdi tema kaydet diyerek eklentinizi kontrol edebilirsiniz.

Demo Buraya Tıkla