Berikut ini akan diuraikan langkah-langkah cara membuat ( Formulir Informasi Untuk Teks ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Formulir Informasi Untuk Teks ) sebagai berikut :
DAFTAR ISI CODE
[Tampilkan][Sembunyikan]
CSS Kode 1
<style>
@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
.paper {
border-top: 30px solid #252525;
width: 650px;
margin:20px auto;
-moz-box-sizing: border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color: #FFFFAF;
background-image: -webkit-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -webkit-linear-gradient(#A4CE9A .1em, transparent .1em);
background-image: -moz-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -moz-linear-gradient(#A4CE9A .1em, transparent .1em);
background-image: -o-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -o-linear-gradient(#A4CE9A .1em, transparent .1em);
background-image: -ms-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -ms-linear-gradient(#A4CE9A .1em, transparent .1em);
background-image: linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), linear-gradient(#A4CE9A .1em, transparent .1em);
-webkit-background-size: 100% 21px;
-moz-background-size: 100% 21px;
background-size: 100% 21px;
line-height: 21px !important;
padding: 0 10px 1px 75px;
position:relative
}
.paper:after {
bottom: 27px;
box-shadow: 0 28px 8px rgba(0,0,0,0.8);
content: "";
height: 25px;
position: absolute;
width: 45%;
z-index: -1;
right: 1%;
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-mstransform: rotate(7deg);
-o-transform: rotate(7deg)}
.paper span {
margin: 0 0 23px 0;font:bold 20px/normal 'Aladin', cursive;letter-spacing:2px;color:#111}
.infoTitle {
margin: 0 0 20px 0;padding-top:20px;color:#111;
font-family: 'Aladin', cursive;
}
</style>
HTML Kode 1
<div class="paper">
<span>SAHABAT BISNIS 77</span>
<div class="infoTitle">
...
Insert Your Information Text Here
...
</div>
</div>
CSS Kode 2
<style>
.container {width:650px;margin:20px auto}
a {color:#6495ED}
a:hover {color:red}
.facebook span {color:#333}
.facebook {
padding:10px 12px;
background:#fff;
box-sizing: order-box;
border-radius:5px;
overflow:hidden;
box-shadow:inset 0px 4px 4px rgba(0, 0, 0, 0.6)
}
.facebook .box {
position:relative;
font:bold 16px/15px 'Alegreya SC', serif;
padding-bottom:3px;
margin-bottom:3px
}
.facebook .box .time {position:absolute;right:0;top:0;color:#333}
.facebook .links {margin-top:8px;font-size:12px;line-height:1.38}
.facebook .footer {
color:#444;
font-size:12px;
line-height:1.38;
background:linear-gradient(left,transparent 0%,#6495ED 50%,transparent 100%);
background:-webkit-linear-gradient(left,transparent 0%,#6495ED 50%,transparent 100%);
background:-moz-linear-gradient(left,transparent 0%,#6495ED 50%,transparent 100%);
background:-o-linear-gradient(left,transparent 0%,#6495ED 50%,transparent 100%);
padding:5px 12px;
margin:8px -12px -10px -12px
}
</style>
HTML Kode 2
<div class="container">
<div class="facebook">
<div class="box">
<a href="https://plus.google.com/u/0/109201923554462022240/posts">SBTM77</a>
<div class="time">
<time id="clock"></time>
<script type="text/javascript">
(function() {
var clock = document.getElementById('clock');
setInterval(function() {
var time = new Date().toString().split(' ')[4];
clock.innerHTML = time;
}, 13);
})();
</script>
</div>
</div>
<hr/>
<span>..Text In Here...</span>
<strong><a class="links" href="http://sbtm77.blogspot.com">» Like</a></strong>
<div class="footer">
Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> Facebook Comment Box
</div>
</div>
</div>
CSS Kode 3
<style>
.contact-info{
text-align: center;
width: 650px;
margin: 20px auto;
padding: 20px;
background: rgba(255,255,255,0.8);
border-radius: 10px;
color:#111;
box-shadow: 0px 0px 9px rgba(0,0,0,0.7), 0px 4px 0px #00FF7F
}
.content{margin-top: 20px;}
.bottom{
line-height: 10px;
text-transform: uppercase;
font-weight: bold;
height:45px
}
.bottom p::before,.bottom p::after {
display: inline-block;
content:"";
width: 10px;
height: 10px;
border-radius: 50%;
margin: 1px 20px;
background: #FF0090;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4)
}
.txt:before {margin: 10px 0 0 -110px}
.txt:after {margin: 10px 0 0 10px}
.txt {
font-family: "Open Sans", Sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
letter-spacing: 0.1em;
text-align:center;
color:#39f;
text-shadow:1px 2px 1px #111
}
.txt:before, .txt:after {
content: " ";
position: absolute;
width: 100px;
height: 4px;
border-top: 2px solid #FF0090;
border-bottom: 2px solid #FF0090
}
</style>
HTML Kode 3
<div class="contact-info">
<div class="txt">SAHABAT BISNIS 77</div>
<div class="content">
...
Text In Here
...
</div>
<hr/>
<div class="bottom">
<p>SBTM77</p>
</div>
</div>
CSS Kode 4
<style>
@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
.boxProfile{
text-align: justify;
padding: 1px 15px;
background: #FFCCFF;
color:#111;
border:1px solid #ccc;
margin:40px auto;
width:650px;
border-left:solid 5px #FF0090
}
.textInfo{margin-top:30px;font:normal 18px/normal 'Aladin',cursive}
.bottom{text-align:center;font:bold 21px 'Aladin',cursive;letter-spacing:1.5px;height:65px;margin:-25px auto}
.bottom p::before,.bottom p::after {
display: inline-block;
content:"";
width: 10px;
height: 10px;
border-radius: 50%;
margin: 1px 20px;
background: #FF0090;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
border-bottom: 1px solid #fff
}
.ribbon1 p {
background:#FF0090;
box-shadow: 0 2px 7px rgba(0,0,0,0.5);
color:#fff;
font:bold italic 18px/35px Verdana,sans-serif;
text-shadow:1px 2px 1px #111;
padding: 4px 30px;
right:326px;
top:137px;
position: absolute;
border-radius:3px 0 0 3px
}
.ribbon1 p:after {
border-width: 7px;
border-style: solid;
border-color: #134 transparent transparent #134;
content: "";
position: absolute;
top:100%;
right:0px;
width:0px;
height:0px
}
</style>
HTML Kode 4
<div class="boxProfile">
<div class="ribbon1">
<p>Information</p>
</div>
<div class="textInfo">
...
Text In Here
...
</div>
<hr/>
<div class="bottom">
<p>SBTM77</p>
</div>
</div>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Formulir Informasi Untuk Teks ) semoga bermanfaat terima kasih.
CONTOHNYA
CONTOH 1 SAHABAT BISNIS 77
MOVE ON DARI MASA LALU - Bulan Ramadhan, Move On Yuk..
Kita sudah masuk bulan Ramadhan yang penuh berkah ini. Tentu banyak harapan dan perubahan yang ingin tercapai dengan kita berpuasa.
Mungkin yang ingin nikah, pengen lepas Ramadhan bisa ketemu jodohnya. Ada juga yang ingin lunas hutangnya selepas lebaran. Banyak juga yang ingin hidup nyaman, hati tenang dalam jaminan Allah.
Sahabat-sahabat mitra PayTren di mana pun berada juga para Akademia, sebenarnya banyak masalah kita, itu sebenarnya bukan masalah akibat hari ini, tetapi karena kita ga bisa MOVE ON dari masalah di masa lalu.
Ada kenangan buruk di masa lalu, dosa-dosa di masa lalu. Kejadian-kejadian kesalahan di masa lalu.
Nah.. Kita butuh solusi supaya kita bisa MOVE ON dari segala beban masa lalu.
CONTOH 2 SAHABAT BISNIS 77
Kebahagiaan yang sangat diidamkan oleh banyak orang perantauan untuk bisa bertemu dan bermaafan.
Jarak yang jauh bukan halangan untuk bertemu. Namun bagaimana buat yang tidak bisa bertemu dan bermaafan? Sedih? Gundah? Tapi kalau kita mengetahui ada skenario terbaik untuk kita, pasti ada hikmah.
Episode 3 Target Ramadhan Junet : “Lebaran yang hilang” semoga menginspirasi kita buat yang bisa mudik tambah bersyukur dan bagi yang belum bisa mudik, ingatlah pesan Junet dalam episode 3 ini, tonton lebih lengkapnya di sini.
» Like
Tidak ada komentar
Posting Komentar