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.
SHARE US →