Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Style Ribbon Email Subscribe Blogger

Style Ribbon Email Subscribe Blogger – pada awalnya setiap menambahkan widget email subscribe dari feedburner kedalam blog memang masih terkesan biasa dan terlihat polos. Untuk membuat widget email subscribe agar terlihat tampil lebih cantik dengan sedikit custom menggunakan CSS dan agar lebih sesuai dengan sidebar pada template blog bisa dilakukan dengan cara yang mudah dan simple. Seperti biasa warna default yang saya gunakan menggunakan warna hijau terang namun apabila kurang sesuai nanti tinggal ganti dan sesuaikan saja dengan selera masing-masing. Cara penerapannya pada blog seperti biasa, tinggal masuk kedalam tata letak blog dan nantinya disitu bisa langsung add widget dan masukan kode yang tersedia dibawah dapat langsung dipastekan didalamnya dan kemudian menyimpannya. Apabila ingin menggunakan atau memasang ke blog masing-masing maka berikut adalah cara penerapannya untuk memasang Style Ribbon Email Subscribe Blogger yang sudah termodifikasi dan disertakan social media yang ada dibawahnya.

1. Login ke akun blogger seperti biasa.
2. Copy kode berikut ini dan ubah teks yang berwarna.
<style>
.login {
padding: 18px 10px;
width: 300px;
background: #e9fbe9;
background-clip: padding-box;
border: 1px solid #00ff00;
}
.login > h1 {
margin: 0 -21px 20px -21px;
font-size: 20px;
font-family:Georgia;
font-style:italic;
font-weight: bold;
text-align: center;
color: #000;
padding: 8px;
background-color: #52e052;
position: relative;
text-shadow: 2px 0 0 darkgreen;
}
.login > h1:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: darkgreen transparent transparent transparent;
}
.login > h1:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent darkgreen;
}
.txtsubscribe {
background: #000;
border: 1px solid #52e052;
box-shadow: 1px 1px 4px #52e052 inset;
color: #999;
font-weight: bold;
padding: 7px 15px 7px 5px;
text-decoration: none;
width: 160px;
margin-top: 10px;
}
.btsubscribe {
background: #52e052;
border: 1px solid #00ff00;
color: #000;
cursor: pointer;
font-weight: bold;
margin-left: 5px;
padding: 6px;
text-decoration: none;
margin-top: 10px;
}
.subscribe-faceblog{
list-style-type:none;
margin:0;
padding:0;
}
.subscribe-faceblog li{
display:inline;
width: 60px;
height:60px;
}
.subscribe-faceblog li img{
width: 40px;
height: 40px;
margin-right: 5px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.subscribe-faceblog li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" class="login">
<h1>LANGGANAN VIA EMAIL</h1>

<ul class="subscribe-faceblog">
<li><a href="https://www.facebook.com/ID FACEBOOK" target="_blank"><img src="http://2.bp.blogspot.com/-1LrnsAla4SM/URTPD5NMFrI/AAAAAAAANdE/rxvtz_eUAhc/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li>
<li><a href="http://www.twitter/ID TWITTER" target="_blank"><img src="http://3.bp.blogspot.com/-C7cFTX8_MuE/URTPgbBjTaI/AAAAAAAANdY/vQ_JLU2zixc/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li>
<li><a href="https://plus.google.com/ID GOOGLE+" target="_blank"><img src="http://4.bp.blogspot.com/-73EHP-NLUI4/URTPfz8orcI/AAAAAAAANdQ/LLUB71HO3ro/s1600/google+tng.png" title="Follow Us on G+" /></a></li>
<li><a href="http://feeds.feedburner.com/ID FEEDBURNER" target="_blank"><img src="http://4.bp.blogspot.com/-SBoLATB2wB0/URTPgp9oeJI/AAAAAAAANdc/neiyHkc7kXo/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li>
</ul>

<input type="hidden" value="masandes" name="uri" />
<input class="txtsubscribe" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="btsubscribe" />
</form>
</center>
Keterangan:
Ubah tulisan warna merah dengan ID feedburner blog anda.
Untuk lebar dan tingginya maupun background warna tinggal sesuaikan saja dengan selera masing-masing.
DEMO:

3. Paste kode tersebut kedalam widget caranya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript.
3. Jika sudah, langkah terakhir adalah Simpan dan lihat hasilnya.

Berlangganan artikel via email

89 Response to "Style Ribbon Email Subscribe Blogger"

sekarang lg musim ribbon mas.., sy liat bbrp bloger jg pake ribbon-ribbonan.., emank keren sh *smile

Balas

keren sob .. tap surantap top surontop
keliatan manis euy hehe

Balas
avatar
Anonymous

berarti ada semutnya juga yah mas hehe...

Balas

wah master Ribbon mulai beraksi lagi nih hehe...

Balas

langsung di cuba mas tutor terbaru gak boleh ketinggalan

Balas
avatar
Anonymous

bener sekali mas, ribbon memang bisa memberi nilai lebih (keren) pada sesuatu yang (kasih tahu nggak ya kelanjutannya?) hahahha

Balas
avatar
Anonymous

berat gak nih widgetnya bang...???
lagi trend nih heheheh :D


komen back yeeee

Balas

Ehm, boleh dicoba nih mas

Balas

yang manis lewat...

tebar pesona hahaha

Balas

bisa diganti imagenya linkedin/tumblr/SoundCloud/pinterest/youtube etc..
coba dulu.

Balas

Style nya keren sob,,, mau nyoba dulu ah. BTW ini bisa bikin blog Lelet gx ya ???

Balas

cerah bgt mas , bagus .

Balas

Yg lain pada nyoba, ikutan coba juga aahh.. :)

Balas

selalu ada yg baru ditempat mas andes..mantaaaap. Lanjutkan mas...

Balas

Makasih Mas Andes sharenya.. bingung mau ngomong apa.. xixixixi

Balas

kalau berat suruh diet aja bang hehe...

Balas

iya mbak Tia dicoba dulu mumpung masih gratis...

Balas

betul mas Babol setiap mampir ke sini pasti selalu ada yang baru hehe...

Balas

jangan bingung mas?? apa mau dibantu ngomongnya...

Balas

ya udah mbak Yanti aja deh yang ngomong hehe...

Balas

manisan Miz Tia kalee heuheu

Balas

iya donk kalau nggak dicoba manatahu rasanya bro

Balas

gakusah diet kan lagi puasa bro

Balas

Selalu ada yang baru euyy,,mantep surantep,,

Balas
avatar
Anonymous

untuk widget lain apakah sama juga mas :D

Balas

Terima kasih share nya... oh iya kunjungan perdana disini, salam kenal yaa :)

Balas

saya save dulu info nya, keren banget kelihatan nya ...!!!

Balas

yee bang dede ngerayu

Balas

mongggo mbak ngomong

Balas

Bagus mas...
Thanks buat share-x...

Balas

blom ada yg baru ya mas?

Balas

keren euy!
tapi icon G+nya kok warna hitam sih gan....?

Balas

Bisa tuk widget lain, tapi bisa nambah manis blog. Wah mesti dicoba nih!

Balas

silahken lanjutken....

Balas

mungkin bikinnya pas mati lampu yah mas jadi hitam hehe...

Balas
avatar
Anonymous

Tampilannya lebih simple dan keliatan artistik, enak dipandang mata, makasih mas tutorialnya keren :)

Balas

g+ yang warna hitam kan ada , hitam+merah+ apa gitu.

Balas

singgah kesini..
suggeng sonten mas andes ,.

Balas

bukan ngerayu mas bro,hehe cuma ngelebay hehe

Balas

ada ko .. abu-abu juga ada

Balas

kalo mencari tips dan trik untuk tampilan ciamik blog..disini memang jagoannya...benar-benar luarbiasa mas andes ini :-)

Balas

Udah bawaan ya segitu kan ...?? kalo beras mintanya yang berat

Balas

Anthonie Eka sama Rizal Uye ... Nggak punya pulsaaaa..????

Balas
avatar
Anonymous

Mudahan saja Mas setelah dimodif untuk warnanya jadi tambah banyak berlangganan artikelnya :)

Balas

sudah tidak diragukan lagi yah mas :)

Balas

selalu bagus dan keren
bikin aku yang ga telaten
jadi pengen bisa bikin bak begitu paten

Balas

Wah ... bagus sekali mas ... saya simpan kodenya ya ... ?
Blognya makin keren nih ...

Balas

Ngesot kemari...mantef nih bang Andes..hahhahyy

Balas
avatar
Anonymous

Saya kira suster aja yang ngesot ternyata ada juga blogger yang ngesot saat berjalan, hehehe

Balas

aduh writers block penyakit yang menyerang blogger.. kehabisan ide buat nulis ...
halo.. bersarang rumahnya.

Balas
avatar
Anonymous

JIahhh.. pada ngrumpi di sini... ayo bubar bubar...

Balas
avatar
Anonymous

lagi bertapa kali yah mas Andes, buat dapet ide yang fresh hehe...

Balas

wahh keren.. bolehh nihh di coba.. warnanya ijo lagi.. hmm kesukaan saya .. hehehe

Balas

Emang lagi musim Ribonding buat menyambut idul fitri yang sudah semakin dekat hehehehe 1000x

Balas

baru dengar deh kata ribon

Balas

Wah Keren keren.. Thanks kawan..
visit and comment Back http://center60.blogspot.com/

Balas

Maknyus style css nya mas, sayangnya saya gak menampilkan widget email subscribe di blog. :)

Balas

Cara membuat email berlangganan yang iconnya feed ada ndak mas?

Balas

wis siap tempur lagi dong hehe ....

Balas

izin nyatat buat pe er mau saya pelajari

Balas

Jangan kebanyakan ya kang...nanti ngos2 an loh :)

Balas

Di jamin gak korslet ko mas..

Balas

Keliatan keren N multi fungsi ya mas
Satu space plus ada sosial media nya :)

Balas

jangan lupa besok senin ulangan jadi yang serius belajarnya yah mbak Maya :)

Balas
avatar
Anonymous

iya bikin hati tergoda yah mas Budi, keren baget soalnya :)

Balas

jangan lupa minum stmjnya hehe...

Balas

kalo tidak lupa sepertinya ada mas coba cari aja pake keyword "email berlangganan"

Balas

haha emang tutorialnya kayak puisi yah mas kok bisa bikin hati tergoda

Balas

Blogku belum ada. Penampilan subsribe - nya sangat keren, Tampil beda !

Balas
avatar
Anonymous

haha pastinya..

Balas

begitu masuk ke blog ini saya begitu terpana melihat lay outnya beda banget dengan blog aku yang acak kadut

Balas

kira2 bikin berat loading blog gak sob ?

Balas

Kalau dilihat sepertinya sangat menarik hasilnya mas, mungkin perlu dicoba dulu nih
terima kasih atas tutorialnya yg bermanfaat

Balas

silahkan mas PP kalau mau nyoba, mumpung masih sisa nanti kalau udah abis bisa nyesel deh hehe...

Balas
avatar
Anonymous

makanya banyak belajar mas sama mas Andes biar blognya nggak acak kadut lagi hehe...

Balas
avatar
Anonymous

kalau ngos-ngosan istirahat dulu entar lanjut lagi hehe...

Balas

dua-duanya betul :)

Balas

orang yang keren
pasti makan duren
kalau makan permen
berarti nggak keren..

Balas

luar biasanya dari Banjarmasin ngesot sampe sini, wow hebat mas hehe...

Balas

Blog Mas Andes serba Ijo, kelihatannya suka yang ijo-ijo nie..., hehe

Balas
avatar
Anonymous

asik nih ... mau pasang ah

Balas

ijo kan daun muda bang... heheh

Balas
avatar
Anonymous

keren mas :D

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Style Ribbon Email Subscribe Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode