kayaknya dah lama banget yaa kagak update blog ,lagi bosen mo ngapa-ngapain. sekalinya buka Kompi ujung-ujungnya Browsingan gak jelas, chatingan sambil maki-maki bule yang nggak dikenal, atau maen game online yang kebanyakan Questnya ketimbang fiturnya...
Temen saya yang setia pun angkat bicara ,"lu ketimbang internetan gak jelas , mending bantuin gue nih , mempercantik blog gw .. " ."Haaahh , emang blog sefeminim apasih pengen di percantik segala , bukannya blog lu isinya tentang penampakan-penampakan semua, hahahaah ....:D" kata gw santai .. yaa emang sih temen gw ini emang masih newbie banget di dunia blogging .. ya mau-gak mau deh akhirnya gw mau bantuin dia ..kebetulan gw juga baru dapat tutorial widget dari salah satu blog-blog widget cara menambahkan Widget Subscriber di blog .lumayan juga kalo ditambahkan ke blognya,biar kelihatan lebih profesional ..
Tapi menurut teman saya sih rasanya desain widgetnya kurang pas buat di blognya.. akhirnya saya pun menggunakan segala jurus yang saya punya mulai dari jurus halimun , jurus rawa rontek, dan jurus lainnya buat ngedesain ulang widget subscriber ini. dan setelah berjam-jam ngutak-ngatik ini widget. akhirnya lahirlah 3 buah desain widget yang menurut gw sih udah lumayan .. masing-masing gw namain widget subscriber Music style, Dark Blue and Red .
dan temen saya pun memilih widget yang Dark Blue ,katanya sih cocok buat dipasang di blognya. hehehehe lumayanlah.. biasanya sehabis ini saya suka di traktir baso ma dia.Tapi berhubung ini widget udah saya bikin 3 desain.mending saya bagiin aja deh buat temen-temen yang berkunjung ke blog saya.jika temen-temen tertarik silahkan aja nyimak penjelasannya dan kode widget ini .
1. Widget Subscriber Music Style
Dari tampilan sama namanya juga pasti semuanya udah tahu, kalau widget ini memang saya khususkan buat Blog bertema musik atau memang yang punya blognya seneng dengan gaya musik.gak terlalu banyak yang saya ubah dari desain aslinya hanya background dan iconnya aja yang saya ganti.widget ini udah saya pasang bersamaan dengan menu follow us atau menu sosial media yang bisa anda hubungkan dengan halaman-halaman sosial media milik anda.
Code Widget Subscriber Music Style
<style>
.donisubscribe {background:url(http://image1.masterfile.com/em_w/05/13/42/400-05134251fw.jpg)no-repeat -5px;
border: 1px solid #0ed9d9;border-radius:5px;
padding: 8px;
width: 297px;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubscribe:hover {
-adadoni-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.donimailbox {
background:#fff url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Music-Treble-clef-icon.png)no-repeat left 5px;
border: 1px solid #0ed9d9;
-webkit-border-radius: 4px;
border-radius: 4px;
-adadoni-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #0ba9a9;
font: 16px "trebuchet ms", sans-serif;
padding: 10px 0px 9px 30px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubmit {
font: 16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0cc1c1),color-stop(100%,#0ba9a9));
background: -webkit-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -moz-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -o-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -ms-linear-gradient(top,#0cc1c1,#0ba9a9);
background: linear-gradient(top,#0cc1c1,#0ba9a9);
border: 2px solid #0ba9a9;
text-shadow: 0;
border-radius: 5px;
padding: 10px 9px;
cursor: pointer;
margin: 0 auto;
}
.donisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.donisubmit::-adadoni-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='donisubscribe'>
<div style='background: url(http://icons.iconarchive.com/icons/fasticon/comic-3/48/mail-icon.png)no-repeat -2px;padding:10px 0 10px 40px;color: #333; font-weight: bold; font: 23px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=
adadoni', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='
adadoni' />
<input name='loc' type='hidden' value='en_US' />
<input class='donimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='donisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #333; font: 22px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='
http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='
http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='
https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='
http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='
http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://icons.iconarchive.com/icons/martz90/circle/32/youtube-icon.png' alt='Youtube'/></a>
</div>
</div>
2. Widget Subscriber Dark Blue
Buat temen-temen yang mempunyai tampilan blognya gelap-gelap atau dark style saya rasa widget ni cukup cocok buat temen-temen.menurut saya walaupun desainnya terkesan sederhana tapi terkesan lebih elegant di banding desain yang lainnya. sama seperti yang music style, menu follow us widget ini tidak saya ubah.dan bisa anda hubungkan dengan halaman-halaman sosial media milik anda.
Code widget subscriber Dark Blue:
<style>
.donisubscribe {
border: 2px solid #111;background: url(http://2.bp.blogspot.com/-8MT23fRt_Gw/T0jvi8_uE2I/AAAAAAAAFhA/UIeU-8rIpWw/s1600/main-bg.png);
padding: 8px;border-radius:5px;
width:295px ;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubscribe:hover {
-adadoni-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.donimailbox {
background:#ccc;
border: 1px solid #0ed9d9;
-webkit-border-radius: 4px;
border-radius: 4px;
-adadoni-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #0ba9a9;
font: 13px "trebuchet ms", sans-serif;
padding: 6px 15px;
width: 150px;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubmit {
font: 16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0cc1c1),color-stop(100%,#0ba9a9));
background: -webkit-linear-gradient(top,#333,#222);
background: -moz-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -o-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -ms-linear-gradient(top,#0cc1c1,#0ba9a9);
background: linear-gradient(top,#0cc1c1,#0ba9a9);
border: 2px solid #222;
text-shadow: 0;
border-radius: 5px;
padding: 6px 11px;
cursor: pointer;
margin: 0 auto;
}
.donisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.donisubmit::-adadoni-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='donisubscribe'>
<div style='background:#000 url(http://icons.iconarchive.com/icons/kearone/comicons/32/email-icon.png)no-repeat 6px;padding:4px 5px 5px 45px;color: #0ed9d9; font-weight: bold; font: 18px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;border:2px solid#444'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=
adadoni', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='
adadoni' />
<input name='loc' type='hidden' value='en_US' />
<input class='donimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='donisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #0cc1c1; font: 20px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us:</div>
<div style='margin: -32px 0 0 100px;'>
<a href='
http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='
http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='
https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='
http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='
http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://icons.iconarchive.com/icons/martz90/circle/32/youtube-icon.png' alt='Youtube'/></a>
</div>
</div>
3. Widget Subscriber Style Red :
Dari ketiga desain widget yang akan saya bagikan ini, mungkin widget ini yang memiliki desain yang paling sederhana.paling cuman bagian judul dan icon menu follow us saja yang saya ubah .tapi menurut saya desain ini cocok buat blog temen-temen yang cerah.
Code widget subscriber style red :
<style>
.donisubscribe {background: url(http://4.bp.blogspot.com/-0By4TW5q8kM/UelOJPQqOpI/AAAAAAAAD4M/YqsJjjhawHM/s1600/navbar6.jpg)repeat-x top;
border: 1px solid #9f1d00 ;border-radius:5px;
padding:0 8px 8px 8px;
width: 297px;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubscribe:hover {
-adadoni-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.donimailbox {
border: 1px solid #9f1d00 ;
-webkit-border-radius: 4px;
border-radius: 4px;
-adadoni-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #9f1d00 ;
font: 16px "trebuchet ms", sans-serif;
padding: 5px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-adadoni-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.donisubmit {
font: 16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: url(http://4.bp.blogspot.com/-0By4TW5q8kM/UelOJPQqOpI/AAAAAAAAD4M/YqsJjjhawHM/s1600/navbar6.jpg);
border: 2px solid #9f1d00 ;
text-shadow: 0;
border-radius: 5px;
padding: 6px 11px;
cursor: pointer;
margin: 0 auto;
}
.donisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.donisubmit::-adadoni-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='donisubscribe'>
<div style='background: url(http://icons.iconarchive.com/icons/harwen/pleasant/32/E-mail-icon.png)no-repeat 6px;padding:4px 5px 5px 45px;color: #fff ; font-weight: bold; font: 20px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=
adadoni', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='
adadoni' />
<input name='loc' type='hidden' value='en_US' />
<input class='donimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='donisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #9f1d00 ; font: 22px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us:</div>
<div style='margin: -32px 0 0 100px;'>
<a href='
http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://2.bp.blogspot.com/-zLbplFI5Dc8/UelWZwUmCeI/AAAAAAAAD4c/PlyZLX1f7cQ/s1600/sosmed+facebook+elegant+red+-+32.png' alt='facebook'/></a>
<a href='
http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-ALM6_6apulM/UelWar1XCRI/AAAAAAAAD4s/oVbuAdWMht4/s1600/sosmed+twitter+elegant+red+-+32.png' alt='twitter'/></a>
<a href='
https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://1.bp.blogspot.com/-3HErnWvO66c/UelWZy8WOII/AAAAAAAAD48/L535D3F4Wc4/s1600/sosmed+google++elegant+red+-+32.png' alt='gplus'/></a>
<a href='
http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://2.bp.blogspot.com/-mS_BU56YScU/UelWZ5JFt6I/AAAAAAAAD4g/Ajd-PrssOzk/s1600/sosmed+pinterest+elegant+red+-+32.png' alt='pinterest'/></a>
<a href='
http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://3.bp.blogspot.com/-mIvE1jY2To0/UelWaunAcAI/AAAAAAAAD4w/w8l_C8JYpXU/s1600/sosmed+youtube+elegant+red+-+32.png' alt='Youtube'/></a>
</div>
</div>
Cara Pemasangan :
- cara pemasangannya simple saja , silahkan anda masuk ke menu Layout >> add Gadget >> plih Html/javascript >> masukan kodenya.
- Sebelum anda simpan anda harus mengeditnya terlebih dahulu,sekarang perhatikan code yang dicetak tebal berwarna merah dan biru , untuk yang berwarna merah silahkan masukan masukan Id feedburner anda.sedangkan code yang berwarna biru silahkan anda masukan url halaman sosial media anda.
-setelah semua selesai langsung saja di simpan.
namun kode ini sudah saya sesuaikan dengan sidebar widget yang memiliki lebar antara 300px. jadi saya sarankan widget ini anda masukan di sidebar widget yang berukuran lebar sekitar 300px agar widget ini terlihat lebih rapi. tapi jika anda ingin menyimpannya di sidebar yang ukuran kurang atau lebih dari 300px dan masih bingung cara mengeditnya.silahkan saja masukan pertanyaan anda di kotak komentar ,insyallah kalau saya sempet saya akan saya bantu.
yaa kira-kira seperti itulah widget subscriber hasil modifikasi saya sendiri .mungkin dilain waktu saya akan mencoba untuk mendesain ulang ,dan akan saya masukan beberapa fitur yang lain agar widget subscribernya terlihat lebih menarik dan lebih canggih.dan kalau ada temen-temen yang ingin menyampaikan widget hasil desainnya sendiri dan pengen di publish disini , silahkan saja. karena saya justru jadi senang semakin banyak blogger indonesia yang lebih kreatif .. heheheh
