Cara Membuat Kotak Artikel Berlangganan Email di pojok

Di sinih Miev akan share tentang tutorial Blogger,yaitu Cara Membuat Kotak Artikel Berlangganan Di samping Bawah Blog,huft panjang judulnya,soalnya Miev bingung mau ngasih judul apa :D,di sini cuman menggunakan CSS+ HTML doank,dan tidak akan memberatkan Blog,karena yang memberatkan suatu Blog itu dominan terlalu banyak Gambar apalagi File yang bertype GIF,langsung saja ke permasalahan,

Langkah - Langkah Pembuatan :

Disini kita memanfaatkan fasilitas dari Feedburner untuk form langganannya menarik untuk sobatMiev coba langsung aja kita bahas cara membuatnya.

1. Masuk ke blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Proceed / Lanjutkan jika di editor baru blogger
5. Cari kode </head>
6. Setelah ketemu simpan kode di bawah ini di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
;(function(drilm){drilm(document).ready(function(){drilm.extend(drilm.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=drilm("#drilmfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);drilm(".drilmfollowButton").click(function(e){if(followBox.hasClass("followOpened")){drilm(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{drilm(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<style type="text/css">
#drilmfollowSubscribe {
background-color: #464646;
width: 220px;
color: #fff;
position: fixed;
z-index: 999999;
right: 10px;
bottom: 0
}

.followOpened {
-webkit-border-radius: 2px 0 0;
-moz-border-radius: 2px 0 0;
border-radius: 2px 0 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5)
}

.drilmfollowButton {
background: #464646;
color: #CCC !important;
font-size: 13px;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
position: absolute;
top: -28px;
right: 0;
display: block;
-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
height: 28px
}

.drilmfollowButton span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDxZkf-zLHTZviv9p1OXANgCScroxw-6aUIFNBxocjS7gcWBkCn61LTkHENm_ooFJ3qMQMHXec12p-bjSBFm2XMsubx6QETZ1mWaqSnpuCfQ9xNN9HdQBBMQtAPbmMBKlJfxkSoDdmJ2z_/s1600/follow-w2b.png) no-repeat scroll 0 5px transparent;
padding-left: 15px;
}

.drilmfollowButton:hover, .followActive {
color: #fff !important
}

.drilmfollowButton:hover span, .followActive span {
background-position: 0 -37px !important
}

.followactive {
background-color: #333
}

.drilmfollowForm {
padding: 15px
}
.drilmfollowForm h3, .drilmfollowForm p, .drilmfollowForm span {
font: bold 13px Arial, sans-serif;
}
.drilmfollowForm h3 {
margin: 0 0 10px;
}

.drilmfollowForm p {
margin: 0 0 10px
}

.drilmfollowForm .emailInput {
width: 95%;
padding: 2px 4px;
margin: 0 auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 15px;
border: 1px solid #444;
color: #888;
display: block;
clear: both
}

.drilmfollowForm form {
text-align: center
}

.drilmfollowForm .emailInput:focus {
color: #000;
border-color: #000
}

.drilmfollowForm .emailSubmit {
cursor: pointer;
padding: 2px 20px;
background: #333;
background: -webkit-linear-gradient(top, #333 0%, #111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333 0%), color-stop(1, #111 100%));
background: -moz-linear-gradient(top, #333 0%, #111 100%);
background: -o-linear-gradient(top, #333 0%, #111 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#333 0%, EndColorStr=#111 100%)";
color: #ccc;
text-shadow: 0 1px 0 #000;
border: 1px solid #282828;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0 1px 0 #444;
-moz-box-shadow: inset 0 1px 0 #444;
box-shadow: inset 0 1px 0 #444;
text-decoration: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
margin: 1em 0 1em 0
}

.emailSubmit:hover {
background: #222;
background: -webkit-linear-gradient(top, #333 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333 0%), color-stop(1, #222 100%));
background: -moz-linear-gradient(top, #333 0%, #222 100%);
background: -o-linear-gradient(top, #333 0%, #222 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#333 0%, EndColorStr=#222 100%)";
color: #fff;
-webkit-box-shadow: inset 0 1px 0 #4f4f4f;
-moz-box-shadow: inset 0 1px 0 #4f4f4f;
box-shadow: inset 0 1px 0 #4f4f4f;
text-decoration: none
}

.emailSubmit:active {
background: #111;
background: -webkit-linear-gradient(top, #111 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #111 0%), color-stop(1, #222 100%));
background: -moz-linear-gradient(top, #111 0%, #222 100%);
background: -o-linear-gradient(top, #111 0%, #222 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#111 0%, EndColorStr=#222 100%)";
color: #aaa;
-webkit-box-shadow: inset 0 -1px 0 #333;
-moz-box-shadow: inset 0 -1px 0 #333;
box-shadow: inset 0 -1px 0 #333;
text-decoration: none
}

.drilmFollowFooter {
text-align: center;
font: normal 11px "Helvetica Neue", sans-serif;
padding: 7px 0;
margin: 0 0 -15px !important;
border-top: 1px solid #3c3c3c
}

.drilmFollowFooter a {
color: #aaa;
text-shadow: 0 1px 0 #262626;
background: none;
text-decoration: none
}

.drilmFollowFooter a:hover {
color: #fff;
background: none
}
</style>

7. Cari kode <body>
8. Simpan kode di bawah ini di bawah kode <body>

<div id="drilmfollowSubscribe" style="display:none;">
<div class="drilmfollowForm">
<a class="drilmfollowButton" href="#" title="Follow"><span>Follow</span></a>
<h3>Follow "<data:blog.title/>"</h3>
<p>Post gratis Instan langsung masuk ke kotak Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=softmiev', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Tulis Email Anda..."/>
<input type="hidden" value="softmiev" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlanggan" class="emailSubmit"/>
</form>
<p class="drilmFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

9. Lihat kata softmiev itu adalah ID dari Feedburner Miev. jadi silahkan ganti dengna ID feedburner sobatMiev,
10. sobatMiev juga bisa mengubah kata <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>   dengan icon feedCount seperti yang Miev pakai,

Cukup sekian Semoga bermanfaat Untuk sobatMiev

Read more »

Posted in: Tampilan,Tutorial Blog

Menciptakan Efek Blur pada Halaman Blog dengan CSS Gradient

 

Modifikasi ini memang merupakan sesuatu yang sangat sederhana, namun Miev rasa cukup efektif untuk menciptakan efek halaman blog yang artistik. Miev menggunakan metode CSS Pseudo-Element :before untuk menciptakan elemen palsu yang tampak sebagai sebuah layer gradient di sebelah bawah layar. Cara ini tentunya lebih praktis jika dibandingkan menciptakan elemen dengan meyertakan tag <div> atau <span> di dalam template:

Lihat Demo

Caranya sangat sederhana. Cukup salin kode CSS di bawah ini kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

html:before {
  content:'';
  position:fixed;
  z-index:5;
  bottom:0;
  width:100%;
  height:100px;
  background:transparent;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, #000000)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
  background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* FF3.6+ */
  background:-ms-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* Opera11.10+ */
  background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='#000000', GradientType=0); /* IE6-9 */
  background:linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* W3C */
}

Samakan semua kode warna yang Saya beri warna merah dengan dominasi warna latar belakang blog sobatMiev. Di sini Miev menggunakan blog dengan warna latar belakang hitam kecokelatan, oleh karena itu Miev memakai warna #000000 sebagai warna gradient akhir. Jika blog sobatMiev mempunyai latar belakang putih, ganti semua kode #000000 dengan #ffffff. Namun, jika latar belakang blog sobatMiev berwarna selain putih dan hitam, caranya jadi sedikit lebih rumit.
Umumnya, warna dominan dalam sebuah template dapat ditemukan dalam selektor body {} seperti ini:

body {
...
...
background: #123456;
...
...
...
...
}

Nah, sobatMiev bisa menggunakan kode tersebut untuk menggantikan warna #000000.
Selesai!

Read more »

Posted in: Tampilan