Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Template Blog dengan WYSIWYG Web Builder 9

Add Comment
Membuat Template Blog dengan WYSIWYG Web Builder 9TULISKAN.com - Dalam membangun sebuah blog, biasanya kita pertama kali akan mengalihkan pandangan ke sektor antar muka atau tampilan blog tersebut, karena secara tidak langsung, pada hakikatnya tampilan sebuah situs adalah faktor yang pertama kali dinilai oleh para pengunjung, yang berarti akan menentukan mindset situs kita dipandangan mereka, itu adalah jawaban kenapa selain kita harus memproduksi konten-konten yang berkualitas, blog kita juga harus memiliki tampilan yang menarik dan nyaman.

Namun, dalam mendesain ataupun mengutak-atik sebuah template atau tampilan blog, biasanya identik dengan kode-kode atau coding bahasa pemrograman yang cukup rumit, seperti php, javascript, html, dan css, seperti yang dapat kita temui pada saat megedit template blog berplatform blogspot dan wordpress, atau pada saat coding dengan menggunakan software Notepad++.

Untuk membuat sebuah tampilan, kita perlu menselaraskan beberapa bait kode HTML dan CSS (blogger), namun setelah saya browsing dan mencari informasi tambahan di internet, ternyata membuat template blog tidaklah serumit yang kita bayangkan, tidak perlu memiliki keahlian khusus coding dan mengerti beberapa bahasa pemrograman, karena ada software yang dapat memfasilitasi kita dalam membuat template secara visual tanpa harus mengutak-atik kode bahasa pemrograman yang terkenal cukup rumit.

Software yang dapat kita gunakan untuk membuat template blog adalah Web Builder 9.0.4, software yang memiliki semboyan "What-You-See-Is-What-You-Get" ini memiliki fitur-fitur yang cukup lengkap dalam membantu para web designer dalam membuat template, sebenarnya masih banyak software-software template designer lainya, seperti arsiteer, adobe photoshop cs6, dan adobe photoshop cs5, namun tidak ada salahnya bukan untuk mencoba software web builder yang satu ini, siapa tahu cocok dengan ekspektasi kita.

Fitur WYSIWYG Web Builder 9

  1. Desain Website secara visual (What-You-See-Is-What-You-Get)
  2. Tanpa memerluka keahlian khusus coding HTML! hanya ambil dan taruh objek, anda sudah dapat membuat template
  3. Output (Hasil Template) HTML4, HTML5, XHTML, CSS3, dan PHP
  4. Youtube embed, HTML5 audio/video, Flash, dll
  5. Slideshow feature, marquee (Text berjalan), rollover images, dll
  6. Menu Navigasi (Navigation Bars), Vertical Menu, Horizotal Menu, dll
  7. Template Support 100+

Screenshot 

Membuat Template Blog dengan WYSIWYG Web Builder 9

Download

Note: Crack WYSIWYG Web Builder 9 sudah saya sertakan dalam file download diatas.

Cara Install

  1. Install Web Builder 9.0.4 sampai selesai
  2. Non-aktifkan antivirus anda terlebih dahulu
  3. Run as administrator pada crack
  4. Ikuti langkah-langkah instalasinya
  5. Enjoy!

Demikian informasi terbaru tentang Membuat Template Blog dengan WYSIWYG Web Builder 9, simak juga artikel menarik lainya seputar software tentang Download Patch 5.0 PES 2013 Terbaru Gratis, semoga bermanfaat, dan selamat mencoba.

3 Peraturan Utama Untuk Link Building Setelah Penguin 2.0

Add Comment
3 Peraturan Utama Untuk Link Building Setelah Penguin 2.0
TULISKAN.com - Seperti yang kita ketahui beberapa waktu lalu, Google baru saja memperbaharui algoritma terbarunya menjadi Penguin 2.0, yang mana akan mempengaruhi 2,3% query di mesin pencari dalam bahasa inggris, dan tentunya berimbas juga pada situs-situs berbahasa lainya di seluruh penjuru dunia. Dalam melewati masa "paceklik" Penguin 2.0, ada berbagai macam kesimpulan dan tanggapan yang muncul dari sejumlah blogger, salah satunya adalah mengenai "link building".

Dari sejumlah pendapat blogger pada masa Penguin 2.0 kala itu, mereka merasakan bahwasanya ada beberapa "niche site" mereka yang terkena imbas dari update Penguin 2.0 ini, terutama mereka yang mencari dan membangun backlink dari situs-situs press release, paid links, serta auto backlink (menggunakan software), bukti nyatanya bisa kita lihat pada blog niche "eksperimen" Kang +Herman Yudiono, blog-blog beliau yang baru dibangun antara Juli-Agustus 2012 posisinya "kepental" ke halaman 10> Google atau peringkat 100+.

3 Peraturan Utama Untuk Link Building Setelah Penguin 2.0

Memasuki era "Setelah Penguin 2.0" ini, tentunya ada berbagai macam pedoman mesin pencari yang harus kita pahami, sebenarnya beberapa pedoman ini "bersifat" logika dan wajar mengapa kita harus melakukanya, tidak berbeda jauh dengan peraturan-peraturan algoritma yang terdahulu, hanya mungkin Google telah menambahkan beberapa "note" penting yang harus kita telaah lebih dalam lagi, tepatnya hal yang mendasar dan perlu, dan tidak terlalu spesifik.

Untuk mengetahui lebih lengkap dan lebih detail mengenai 3 peraturan utama yang "penting" bagi link building setelah era "Penguin 2.0", mari kita simak penjelasan dan uraianya berikut ini.

Rule 1: Bangun "Hubungan" Link Building Natural

Google algoritma merilis Penguin 2.0 dengan tujuan untuk "mengakhiri" beberapa taktik atau skema link building yang salah dan berlebihan untuk mengoptimasi sebuah situs. Beberapa dari skema yang biasa dilakukan oleh Link Builder masuk ke dalam jajaran strategi "Black Hat SEO", yang mana Google berusaha menghilangkan hal tersebut dari pada hasil pencarianya.

Dari beberapa kasus, ditemukan bahwasanya beberapa webmaster membeli ataupun bertukar link dengan situs bereputasi "buruk", situs yang memproduksi link building tidak natural tersebut tentunya akan mendapatkan reputasi yang kurang baik dari Google dan posisinya melemah pada hasil pencarian, bahkan terpental, atau hingga dilakukan de-indeks.

Setelah Penguin 2.0, membangun link yang tidak natural atau "tidak wajar" dalam logika manusia adalah hal yang dapat membuat situs anda mendapatkan nilai minus dimata Google, beberapa peraturan "emas" yang dapat anda patuhi dalam menyusuri era "Setelah Penguin 2.0" ini adalah dengan membangun hubungan link atau backlink yang natural atau organic, agar menghasilkan result link building yang diperhitungkan oleh Google dan meningkatkan reputasi situs anda. Itu artinya, hindarilah yang namanya membeli dan "bertukar" link, namun biasakanlah untuk share link situs anda, agar banyak orang yang mengetahuinya dan memberikan link organik ke blog anda.

Rule 2: Buat Konten yang Unik dan Berkualitas

Seperti slogan yang pernah kita dengar dalam dunia blogging yang berbunyi "Content Is The King", slogan tersebut menunjukkan bahwasanya power dan passion dari sebuah blog tidak lain dan tidak bukan adalah konten (artikel). Selain menulis konten yang unik dan berkualitas dengan tujuan membawa benefit atau keuntungan bagi para pembaca, anda juga dapat "mengundang" para pembaca untuk turutserta membagikan link blog anda karena dirasa bermanfaat (referensi, re-source, dsb).

Selain itu, selektiflah dalam hal memberikan referensi link kepada para pengunjung di dalam artikel, karena memberikan link kepada situs yang bereputasi "buruk" juga bisa ikut menurunkan kredibilitas situs anda, baik itu oleh Google maupun pengunjung, oleh karena itu, usahakanlah anda memberikan referensi link yang dirasa akan memberikan manfaat bagi para pembaca, karena pada hakikatnya Google menyukai situs yang memberikan informasi lengkap kepada para pembacanya.

Hindarilah konten yang berkualitas rendah dan tidak memberikan keuntungan apa-apa bagi para pembacanya, dan usahakanlah membuat situs yang niche-nya relevan untuk membangun link atau backlink ke situs anda dengan anchor keyword yang anda targetkan, karena seperti yang kita ketahui, Google menyukai "hubungan" suatu link dengan tingkat relevansi yang tinggi.

Rule 3: Pelajari Kesalahan Skema Link Building Anda

Seperti kata pepatah, "Pengalaman adalah Guru Terbaik", itu artinya kita akan mendapatkan ilmu pengetahuan atau pelajaran yang lebih nyata dan terbukti tidak lain adalah dari pengalaman hidup kita sendiri, sama juga halnya dengan blogging khususnya link building, mengamati dan mempelajari skema atau taktik dari link building yang kita lakukan adalah cara terbaik untuk mendapatkan formula yang akurat dan memuaskan.

Jika anda merasa dalam memasuki era "Setelah Penguin 2.0" ini anda membangun skema backlink yang salah dengan blog anda, maka jangan sesali itu, perhatikan lagi lebih cermat tentang apa saja yang anda lakukan, lalu berusaha untuk memperbaikinya atau membuatnya lebih baik, jika belum menunjukkan hasil, coba lagi dengan riset-riset yang lainya, hingga anda menemukan skema yang nyata dan akurat untuk mendongkrak peringkat situs anda di SERP.

Untuk menganalisis apasaja kesalahan-kesalahan anda dalam membangun link atau backlink, anda bisa mempergunakan berbagai macam situs yang menyediakan layanan link analysis atau menganalisis link, dengan tujuan untuk mengetahui apasaja yang membuat "down" strategi link building anda dan belajar dari kesalahan tersebut, dan memperbaiki skema atau taktik link building yang akan anda lakukan selanjutnya.

Artikel Rekomendasi
via Bloggertrix

Cara Memasang Widget User/Pengunjung Online di Blog

Add Comment
Cara Memasang Widget User/Pengunjung Online di Blog
TULISKAN.com - Sebagai blogger atau author dari suatu situs, tentunya kita ingin mengetahui bukan seberapa banyak visitor atau pengunjung yang mengunjungi blog kita. Sebenarnya, untuk mengetahui penunjung atau data statistik blog, kita dapat memanfaatkan berbagaimacam tools ataupun layanan yang tersedia di internet, seperti Histats dan Google Analytic.

Namun, pada kesempatan kali ini saya akan membagikan sebuah widget yang dapat mengetahui berapa jumlah user atau pengunjung yang sedang online di blog kita, jadi pada saat kita mengunjungi blog, maka widget ini akan menampilkan berapa banyak pengunjung yang sedang berselancar atau online di blog kita. Widget ini adalah widget dari whos.amung.us, salah satu penyedia widget statistik parameter situs terkemuka di dunia.

Cara Memasang Widget User/Pengunjung Online di Blog

1. Login ke Blogger.

2. Masuk Dashboard

3. Pilih Tata Letak/Layout

4. Pilih Add/Tambahkan Widget.

5. Pilih HTML/JavaScript.

6. Letakkan kode berikut ini kedalamnya.

<script id="_wau5bv">var _wau = _wau || []; _wau.push(["classic", "7iduev0x93z1", "5bv"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

7. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru seputar tutorial, tips trik, dan dunia blogging tentang Cara Memasang Widget User/Pengunjung Online di Blog, semoga bermanfaat, dan selamat mencoba. Happy Blogging.

Cara Mendaftarkan Blog/Website ke Alexa

Add Comment
Cara Mudah Mendaftarkan Blog/Website ke AlexaTULISKAN.com - Siapa yang sudah tahu cara mendaftarkan blog/website ke alexa? tentunya diantara para blogger ada yang sudah tahu ada juga yang tidak bukan, pasalnya baru-baru ini alexa kembali merombak tampilan atau antar muka situsnya, jadi mungkin kita akan sedikit "kebingungan" untuk mendaftarkan situs ke alexa. Jika kita amati, pastinya anda pernah lihat bukan widget-widget alexa yang terpasang di blog-blog sahabat, setelah mendaftarkan blog, anda juga bisa memasang widget alexa di blog anda.

Seperti yang kita ketahui, Alexa yang beralamatkan di alexa.com adalah sebuah situs "The Web Information Company", atau situs yang menyediakan informasi mengenai situs-situs di seluruh penjuru dunia, dan juga dilengkapi dengan peringkat situs yang dapat kita pergunakan sebagai parameter situs kita, jadi kita dapat mengukur tingkat kualitas situs kita dengan situs-situs lainya di penjuru dunia, namun untuk mendapatkan perigkat di alexa, tentu kita perlu mendaftarkan situs kita terlebih dahulu, karena alexa hanya menampilkan database dari situs yang sudah didaftarkan dan dikonfirmasikan.

Alexa adalah salah satu situs yang dipersembahkan oleh perusahaan internet terkemuka dunia, yakni Amazon. Jika nanti anda sudah mendaftarkan situs anda, maka tampilanya kurang lebih akan seperti situs saya tuliskan.com yang sudah saya daftarkan, namun jika anda ingin menghapus situs anda, anda juga bisa menghapus data situs anda dari alexa.

Apa benefit atau keuntungan lainya dengan mendaftarkan blog di Alexa? tentunya pertanyaan ini yang biasanya pertama kali akan muncul di benak kita, keuntungan lainya adalah blog kita akan dianggap sebagai blog yang "sudah memiliki reputasi", atau terdaftar di perkumpulan situs-situs dunia, namun, alexa juga biasanya dibutuhkan pada saat kita ingin mendaftar di PPC seperti Idblognetwork, tentunya diperlukan sebagai parameter trafik situs kita, jadi mendaftar di alexa ini banyak sekali manfaatnya bagi blog, hehe.

Cara Mudah Mendaftarkan Blog/Website ke Alexa

1. Buka situs Alexa.

2. Lihat dibagian kanan atas situs, klik "Create an Account".

Cara Mudah Mendaftarkan Blog/Website ke Alexa








3. Masukkan "Email" dan "Nickname", klik register. Atau anda juga bisa menggunakan Facebook untuk login cepat.

Cara Mudah Mendaftarkan Blog/Website ke Alexa








4. Email Konfirmasi sudah dikirmkan oleh Alexa ke email kita.

Cara Mudah Mendaftarkan Blog/Website ke Alexa






5. Klik link yang diberikan Alexa untuk mengkonfirmasi email kita.

Cara Mudah Mendaftarkan Blog/Website ke Alexa







6. Masukkan password atau kata sandi anda, lalu klik "Submit Password".

Cara Mudah Mendaftarkan Blog/Website ke Alexa







7. Nanti anda akan diredirect atau dialihkan otomatis ke halaman akun, lalu klik "Dashboard".

Cara Mudah Mendaftarkan Blog/Website ke Alexa







8. Pada halaman dashboard, klik tulisan "Add it now".

Cara Mudah Mendaftarkan Blog/Website ke Alexa







9. Klik "Sign Up" pada kolom pricing "Free".

Cara Mudah Mendaftarkan Blog/Website ke Alexa









10. Isikan Alamat URL blog anda, lalu klik "continue".

Cara Mudah Mendaftarkan Blog/Website ke Alexa







11. Copy meta tag alexa seperti yang saya block pada gambar di bawah ini, lalu simpan dibawah kode <head> pada template, lalu klik "Verify My ID" pada alexa.

Cara Mudah Mendaftarkan Blog/Website ke Alexa

12. Klik "Continue".

13. Isikan data-data anda, lalu klik save & continue, atau anda juga bisa memilih skip untuk tidak mengisi data-data anda.

Cara Mudah Mendaftarkan Blog/Website ke Alexa
















14. Selesai, anda berhasil mendaftarkan situs anda di Alexa!

Cara Mudah Mendaftarkan Blog/Website ke Alexa








Bagaimana sobat? cukup mudah bukan untuk mendaftarkan blog/website kita di alexa. Demikian informasi terbaru tentang Cara Mendaftarkan Blog/Website ke Alexa, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Cara Memasang Iklan Melayang di Footer/Bawah Blog, semoga bermanfaat, dan selamat mencoba.

Cara Memasang Iklan Melayang di Footer/Bawah Blog

Add Comment
TULISKAN.com - Sebagai blogger, tentunya anda sudah mengenal berbagai macam pengetahuan dan atmosphere baru bukan, ya, memang menjadi blogger adalah suatu hobi atau bahkan pekerjaan yang menyenangkan bagi kita yang menekuninya, karena selain bisa berbagi ilmu-imu dan pengetahuan yang kita punya kepada para pengunjung, kita juga dapat menghasilkan tambahan pendapatan atau yang biasa disebut "sampingan".

Hal ini berlaku bagi part-time blogger dan juga full-time blogger tentunya, yakni sebagian orang yang memanfaatkan waktu luang untuk nge-blog (part-time) dan full-time yang memutuskan untuk terjun ke dunia blogging secara totalitas sebagai sumber rezeki & nafkah keluarga.

Cara Memasang Iklan Melayang di Footer/Bawah Blog





Untuk mendulang uang ataupun pendapatan tambahan dari dunia blogger, ada beberapa cara yang bisa kita tempuh, tentu ini akan memakan waktu yang tak sebentar dan juga tak tergolong mudah untuk dilakukan, diantaranya adalah affilasi, ppc, iklan mandiri, dan review produk, namun, dari keempat jalur tadi, kebanyakan blogger lebih memilih ppc dan iklan mandiri, dengan catatan lebih mudah dan praktis untuk melakukanya.

Jika anda menggunakan PPC sebagai salah satu ladang untuk berburu income online, tentu yang ada dibenak anda adalah bagaimana caranya agar banyak orang meng-klik ikan, karena seperti yang kita ketahui, PPC adalah layanan dimana publishernya akan dibayar setiap terjadi klik terhadap iklan advertiser, oleh karena itu, tentunya pertama kita harus memastikan terlebih dahulu jika trafik blog kita sudah "mumpuni"  dan stabil, lalu kemudian tinggal kita mengatur ad placement dari PPC tersebut, tentunya se-strategis mungkin.

Lalu dimana ad placement atau penempatan iklan yang baik untuk PPC? menurut pengalaman saya pribadi, ad placement yang paling ampuh dalam menekuni bidang PPC adalah floating atau melayang, namun sayangnya sebagian besar media PPC lokal maupun interlokal melarang iklan melayang ini, hanya ada beberapa media PPC yang membolehkanya, seperti IdBlogNetwork dan Bidvertiser, karena iklan yang mereka tayangkan tidak berdasarkan keyword, maka dari itu ada baiknya jika anda mengetahui terlebih dahulu rules dari PPC yang anda ikuti.

Nah, dalam rangka usaha meningkatkan pendapatan online yang berasal dari Pay-Per-Click, pada kesempatan kali ini saya akan membagikan suatu trik kepada rekan blogger semuanya tentang bagaimana cara memasang iklan horizontal atau memanjang di footer atau bagian bawah layar blog, biasanya iklanya berukuran 468x60, 728x90, 960x60, atau lebih, tergantung dengan PPC yang anda gunakan. Oh iya sobat, iklan melayang ini juga sudah dilengkapi dengan tombol close lho, jadi pengunjung yang merasa risih bisa menutupnya.

Cara Memasang Iklan Melayang di Footer/Bawah Blog

1. Login ke Blogger.

2. Piih Tata Letak / Layout.

3. Klik Add / Tambahkan gadget.

4. Pilih gadget HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#tuliskancom-float_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#tuliskancom-float_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#tuliskancom-float_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='tuliskancom-float_banner' style='height: 105px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 15px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpIZ984YsPy2B4oUaALcOJZWUT8VmBIB4BDUZo0_iu4KkOfJYw5KnBqHUBDqRC6t2YAcmjA_Hkno53CgiihBu7APIBJMam8hxiox8LaKha-mJB2pJTyFp4hZq9pCbLx1lqku7mm0FwGXo/s49/close-button-tuliskancom.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
<a href="http://www.tuliskan.com" target="_blank" title="Advertise Here"><img alt="Advertise Here" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCe7VU0ac9t6NEfDnEpR_55kircObS89Izubg0pmIpUqJeszIRs7bTLHMJGVJyPOZ2eMR1wDwgLAYjOpsjs-NWQUApz6Xxgv_n0iYbrLzZnj03FOmujLz6WPOqbue66q2dnfOq9dACc_4/s1600/iklan-728-90-tuliskancom.gif" /></a>
</center></p>
</p>
</div>

Keterangan:
  • Jika pada template anda sudah ada kode jQuery seperti kode yang berwarna merah diatas (versi berapapun), maka kode merah yang diatas dihapus saja
  • 105 : tinggi iklan + tinggi tombol close (piksel / px)
  • 728 : lebar iklan (piksel / px)
  • 15 : tinggi tombol close
  • Ganti kode yang berwarna kuning dengan kode script iklan anda
6. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru tentang Cara Memasang Iklan Melayang di Footer/Bawah Blog, simak juga artikel dan ulasan menarik lainya seputar tutorial dan tips trik blog tentang Membuat Widget Berlangganan Email dengan Social Media, semoga bermanfaat, dan selamat mencoba, Happy Blogging!

Membuat Widget Berlangganan Email dengan Social Media

Add Comment
Membuat Widget Berlangganan Email dengan Social Media
TULISKAN.com - Siapa yang tak tahu tentang Newsletter atau Email Marketing? Layanan ini adalah salah satu cara yang seringkali dipergunakan oleh para pebisnis dalam mempromosikan produk-produk dan jasa mereka, namun anda jangan salah presepsi terlebih dahulu, karena sebenarnya newsletter ini juga bisa dipergunakan sebagai sarana mempromosikan konten-konten blog lho! 

Namun, sebelum kita mulai menggunakan layanan gratis ini, ada baiknya kita juga memperhatikan tata cara melakukan email marketing untuk blog kita, salah satu syarat vitalnya adalah kita tidak boleh mengirimkan konten blog kita secara semena-mena kepada alamat email orang lain, karena seringkali dianggap sebagai "junk" atau "SPAM" di inbox mereka, dan blog kita bisa kena imbasnya.

Jadi bagaimana dong cara yang aman dalam melakukan email marketing? saya sarankan agar anda menggunakan fasilitas layanan dari penyedia rss directories yang banyak tersebar di internet, seperti feedburner, jika sudah mendaftar di feedburner, maka kita tinggal mengaktifkan layanan email subscription saja, lalu kita tinggal mengajak pengunjung berlangganan update blog kita dengan cara mendaftar dan konfirmasi lewat email (feedburner), jadi mereka berlangganan dengan berdasarkan sesuai minat dan bukan pemaksaan atau spam.

Nah, untuk mengajak para pengunjung berlangganan update blog kita tentunya juga tidak mudah, karena sebagian orang biasanya "risih" jika dikirimi email-email yang dirasa tidak perlu ke inbox mereka, akan tetapi ada juga orang yang merasa "cocok" dengan konten-konten blog kita lalu mereka berminat untuk berlangganan, pada intinya para pelanggan akan datang secara alami seiring dengan mengingkatnya kualitas blog kita. Untuk mengajak pengunjung berlagganan artikel terbaru di blog kita, anda bisa menggunakan widget berlangganan via e-mail yang menarik di bawah ini, dan juga sudah dilengkapi dengan social media lho!

Membuat Widget Berlangganan Email dengan Social Media

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add / Tambahkan gadget.

4. Pilih gadget HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<style>
#tuliskancom-newsletter{width:250px;background:#2e3639; color:#fff;padding:20px; font-size:14px;  margin-bottom:20px;  -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px  #000000;border:double 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.credit-link {
position:relative;
bottom:-15px;
right:-100px;
color:#ffffff;
font-family:segoe ui;
font-size:11px;
}
#footer-subscribe-tuliskancom {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-tuliskancom {margin-left:10px;margin-top:0px;margin-bottom:-90px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px;
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer;
}
.footer-submit-tuliskancom:hover { background:#e51111;}
#fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count {  font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block;
</style>
<br />
<div id="tuliskancom-newsletter">
<div class="tuliskancom-nl-text">
<center>
Get Latest Updates Free!</center>
</div><p></p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Ketikkan Email Anda Disini..." />
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/tuliskandotcom" target="_blank" title="Ikuti Saya di Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXXlI9LKOCDCNlxmw03xKJhz108dxGbWku_WsOAJU_uabvr2s6PePHLvLxSN-dfoe_4HxJO3I9wJVVQmJfYDxYiXhEpoz3nuYPr0WBiU7v3DgszwKtdowi5RS9030XkX5RYozuEcBRGO5/s300/tuliskancom-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/tuliskancom" target="_blank" title="Berlangganan Via Email">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLgV6C4Ph0XJfaLDlRdq6UXAXsVYkHKnZZvVTRBk_QO_fu6GCtvcNS_0NvmU4DAl6StLjxpQYSyGfH8yjREQx1tWXIqCNT8TP0TNJQFlzjuI6EUrcErrJdI78JBg1fdsJkgdWj11w7r06D/s320/tuliskancom-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/tuliskancom" target="_blank" title="Temukan kami di Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibuTdzgQb6AQL0jqerEOFWpVO0MQ8nVE7weCi31bVajbNJSB6j4ys9IonG1oL3LVwqAHQdYb0W6keyfImFKqp-KmCe3o7HBMQXV-x6bSi8fbcJWiof49h5weYjTRqgMGP9pt9Nswm1sOg2/s320/tuliskancom-facebook-icon.gif" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/1029382938293829323" target="_blank" title="Tambahkan saya di Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL444d02cXJBjrVCeR2TziQG6V0Doyppj95oZkFO1a0D6NfcLO1slkSyDDXhzukCig4cQIkpwyV_PZdxeGXYAKq8mO046fCH_8Lr3lWtvIO4_WxZUJTXZkOm9LVS8lPkSWX5SjsaZNA4e9/s320/tuliskancom-googleplus-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
</tr>
</tbody></table>
</div>
<input class="footer-submit-tuliskancom" id="footer-subscribe-tuliskancom" type="submit" value="SubScribe" />
<div class="credit-link">
<a href="http://betelm.blogspot.com/2013/07/membuat-widget-berlangganan-email-dengan-social-media.html" title="Membuat Widget Berlangganan Email dengan Social Media">Get This!</a></div>
<div class="clr">
</div>
</form></div>

Keterangan:
  • Ganti kode yang berwarna biru muda dengan Username Twitter anda
  • Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
  • Ganti kode yang berwarna oranye degan ID Feedburner blog anda
  • Ganti kode yang berwarna merah dengan ID Google+ anda

6. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang bagaimana caa Membuat Widget Berlangganan Email dengan Social Media, simak juga ulasan menarik lainya seputar tutorial dan tips trik blog tentang Cara Membuat Widget Social Media Metro Style di Blog, semoga bermanfaat, dan selamat mencoba.

Via Bloggertrix