Firman Webs

Home All post

Tips Meningkatkan Traffic Blog Dengan Facebook

Sunday, 8 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeR_b99_g_nlbOkRYKDsFmD7cUv4C-zUgyn3NsMKOAUf4fkakrXVHJYAanjMuqfNMSaUuQwPVAJwzdyzgsHMurorAA49HwRfynbzATjvUJsIhj5HRIGj44-o0X3sL5hq7JUmgXPYx1R8/s1600/trafik-facebook.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Traffic Facebook" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeR_b99_g_nlbOkRYKDsFmD7cUv4C-zUgyn3NsMKOAUf4fkakrXVHJYAanjMuqfNMSaUuQwPVAJwzdyzgsHMurorAA49HwRfynbzATjvUJsIhj5HRIGj44-o0X3sL5hq7JUmgXPYx1R8/s1600/trafik-facebook.jpg" title="Tips Meningkatkan Traffic Blog Dengan Facebook" width="540"/></a><b>Tips Meningkatkan Traffic Blog Dengan Facebook</b> - Facebook merupakan salah satu situs jejaring sosial yang paling populer didalam media komunikasi dunia internet. Pengguna Facebook sangat banyak bahkan setiap kalangan memiliki akun Facebook baik itu usia anak, remaja maupun orang tua. Jejaring sosial Facebook memiliki sifat kepribadian seseorang, sehingga disitu banyak teman yang bisa kita jumpai. Setiap orang pasti memerlukan informasi dan Facebook bisa membantu untuk menemukan informasi tersebut dengan mengarahkan mereka menggunakan link-link yang mengarahkan dan mungkin bisa membantu apa yang sedang mereka cari. Apabila kita menemukan seseorang yang mempunyai kriteria tidak jauh berbeda seperti kita dalam artian sama-sama mempunyai aktifitas blogging, hal tersebut bisa kita manfaatkan untuk mendatangkan sejumlah lalu lintas ke blog. Berikut beberapa <b>Tips Meningkatkan Traffic Blog Dengan Facebook</b> sebagai upaya dalam mengarahkan visitor dan menjaring mereka kedalam blog.<br /><br /><b>1. Lengkapi Informasi Profil</b><br />Pertimbangkan tujuan anda untuk membangun profil Facebook. Jika ingin menggunakannya sebagai alat untuk mengarahkan lalu lintas ke blog anda, maka anda perlu memastikan profil anda mengandung informasi untuk daya dukung dalam mengarahkan lalu lintas dengan menyertakan link blog anda. Hati-hati dengan foto, video, dan informasi pribadi yang anda publikasikan didalam Facebook. Untuk menggunakan Facebook sebagai alat untuk mengarahkan lalu lintas ke blog, anda harus memiliki banyak teman Facebook.<br /><br /><b>2. Perbanyak Teman</b><br />Gunakan alat bantu pencarian untuk menemukan orang-orang di Facebook, anda dapat mencari berdasarkan nama, sekolah, perusahaan, dll. Jika anda menemukan orang yang sesuai dengan kriteria dan mungkin tertarik pada konten blog anda, kirimkan permintaan teman.<br /><br /><b>3. Buat Group</b><br />Anda dapat membuat grup di Facebook dan mengundang orang atau teman-teman anda untuk bergabung. Namun jika itu membutuhkan waktu lama untuk mengundang banyak orang, anda dapat mengambil langkah efektif dengan mencari Group yang terkait dengan topik blog anda kemudian bergabung dengan Group tersebut dan selanjutnya aktif dalam percakapan yang terjadi di dalam Group tersebut.<br /><br /><b>4. Buat Fanspages</b><br />Fitur Halaman Facebook merupakan cara yang bagus untuk menemukan jaringan dengan orang-orang di Facebook. Anda dapat membuat halaman fanspage kemudian cari orang sebanyak mungkin untuk mengikuti fanspage anda. Disitu anda bisa berkontak langsung dengan banyak orang dan terus update halaman status untuk menambahkan informasi yang menarik dan menjaga percakapan atau diskusi.<br /><b><br />5. Hubungkan Akun Lain ke Profil Facebook</b><br />Ada banyak piranti tersedia untuk membantu anda membangun sebuah profil Facebook yang besar atau halaman yang dapat mengarahkan lalu lintas secara langsung maupun tidak langsung ke blog anda. Luangkan waktu untuk menghubungkan akun Facebook anda dengan jejaring sosial lainnya seperti Twitter, Networked Blog, dll. Namun sebelumnya pastikan terlebih dahulu bahwa blog anda sudah terhubung dengan jaringan sosial tersebut, sehingga pada saat mempublikasikan artikel baru pada blog anda akan secara otomatis muncul pada jejaring sosial yang sudah terhubung.<br /><br /><b>6. Bersifat Aktif</b><br />Agar usaha anda untuk mengarahkan lalu lintas ke blog bisa berjalan mulus, anda perlu secara aktif mengupdate status, berbagi konten, dan bergabung dalam percakapan. Dengan membangun hubungan dengan teman-teman anda di Facebook, secara tidak langsung juga dapat menumbuhkan trafik blog anda.<br /><br /><b>7. Perhatikan Sekeliling</b><br />Jangan hanya menghabiskan waktu untuk memperbarui profil dan berbagi konten anda sendiri. Namun luangkan waktu juga untuk mengomentari status orang lain dan ikut kedalam percakapan, membagikan konten orang lain dan sebagainya.<br /><b><br />8. Menyiasati Promosi Facebook</b><br />Facebook memiliki sifat yang mengarah ke pribadi seseorang, tidak seperti LinkedIn yang bersandar lebih ke arah bisnis. Perlu berhati-hati dalam melakukan promosi di Facebook karena terlalu promosi juga seringkali justru akan di abaikan oleh orang lain. Maka dari itu anda bisa menyiasati dengan mencampurkan status dan konten antara informasi promosi dan menghibur.

Tips Meningkatkan Traffic Blog Dengan Facebook - Facebook merupakan salah satu situs jejaring sosial…

Tips Meningkatkan Kualitas Konten Blog

Friday, 6 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFMM4bxR-rEixaMgZLTQIXE7m1maz6ZGAZMxZoDAhsPnuG-KW6y3MRdLm2kt-an-M8gP0W5MHFnhk7j4dDqh8iywjpVt3NqM6jDX1u0sPThgzcXpJ3MOhC6o1WxwWhR1_Zx0SLRJK2bU/s1600/Cinemagraph+(149).gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Tips Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFMM4bxR-rEixaMgZLTQIXE7m1maz6ZGAZMxZoDAhsPnuG-KW6y3MRdLm2kt-an-M8gP0W5MHFnhk7j4dDqh8iywjpVt3NqM6jDX1u0sPThgzcXpJ3MOhC6o1WxwWhR1_Zx0SLRJK2bU/s320/Cinemagraph+(149).gif" title="Tips Meningkatkan Kualitas Konten Blog" width="540"/></a><b>Tips Meningkatkan Kualitas Konten Blog</b> - Ada berbagai perubahan sederhana yang dapat diperbuat untuk menulis posting blog yang dapat meningkatkan lalu lintas ke blog dan memiliki pengaruh yang signifikan terhadap pertumbuhan blog dalam jangka panjangnya. Selain mengandalkan trik <a href="http://mas-andes.blogspot.com/2013/03/8-tips-search-engine-optimization-seo.html" target="_blank" title="Tips Search Engine Optimization (SEO)">Search Engine Optimization (SEO)</a> untuk mendapatkan perhatian dari search engine seperti Google atau lainnya, fokus pada saat menulis posting juga sangat berpengaruh untuk meningkatkan potensi konten terhadap search engine yang tentu dapat mendatangkan trafik ke blog. Trik meningkatkan pengalaman dalam menulis dapat membuat konten blog lebih akrab terhadap setiap serach engine agar konten yang setiap di publikasikan tidak tersia-siakan, maka dengan adanya hal ini berikut adalah <b>Tips Meningkatkan Kualitas Konten Blog</b> dan membuat halaman blog agar lebih ramah search engine.<br /><br /><b>1. Spesifikasi Judul</b><br />Sebuah judul yang menarik dan relevan adalah pilihan terbaik dalam memaksimalkan konten. Jika dalam judul posting saja sudah terdapat kata kunci, maka semakin baik pula konten tersebut di halaman hasil pencarian search engine. Ingat, relevansi harus selalu menjadi prioritas lebih tinggi daripada kata kunci.<br /><br /><b>2. Link Internal</b><br />Hubungkan artikel terbaru yang sedang anda tulis kedalam halaman konten yang terkait. Hal ini bermaksud untuk mengangkat kembali prioritas konten yang lama dengan dihubungkannya kedalam konten yang lebih baru, konten yang bermanfaat jika dihubungkan melalui link internal dalam posting tentu juga akan lebih memudahkan pengunjung dalam menemukan halaman yang terkait dengan isi konten tersebut. Namun tidak hanya itu, menghubungkan setiap konten dengan <a href="http://mas-andes.blogspot.com/2013/02/8-tips-optimasi-link-internal-untuk.html" target="_blank" title="tips optimasi link internal">link internal</a> tentu juga dapat membantu optimasi search engine dalam menemukan dan menampilkannya pada halaman penelusuran, asalkan anda menghubungkannya ke konten internal yang berguna dan relevan.<br /><br /><b>3. Penempatan Link Internal</b><br />Link internal yang terdapat di konten blog sangatlah penting, tetapi perlu diperhatikan juga untuk memasukkan dimana penempatan letak link internal tersebut. Sebaiknya link internal digunakan dalam tiga dari posting anda dan dengan penempatan yang di prioritaskan sebelum link eksternal digunakan. Sekali lagi, menempatkan link internal seimbang dan sesuai agar tidak merusak isi dari posting blog dengan memprioritaskan penempatan link.<br /><br /><b>4. Penggunaan Anchor Text</b><br />Pada saat menghubungkan suatu halaman, hindari menggunakan satu <a href="http://mas-andes.blogspot.com/2013/02/5-tips-riset-keyword-atau-kata-kunci.html" target="_blank" title="tips riset kata kunci">kata kunci</a> yang sama atau frase kata kunci ke beberapa URL. Demikian pula, hindari menghubungkan suatu halaman yang bervariasi dari kata kunci yang sama ke URL yang sama. Search engine tidak menyukai salah satu dari taktik ini. Semakin konsisten dalam menghubungkan konten, semakin baik pula konten tersebut di dalam lalu lintas pencarian.<br /><br /><b>5. Batasi Jumlah Link</b><br />Jangan menyebar link di dalam satu halaman posting. Tidak hanya membuat sulit bagi pengunjung untuk mengetahui link mana yang paling penting dan berguna, tetapi ini juga merupakan teknik spam yang tidak disukai oleh search engine. Gunakan penggunaan batas link (baik itu link internal maupun eksternal) untuk setiap link minimal berjarak 200 kata.<br /><br /><b>6. Optimalkan Gambar</b><br />Mengambil sedikit waktu untuk memberi title gambar yang digunakan dalam posting dengan judul yang berguna dan menjelaskan apa dari isi gambar tersebut. Anda dapat memasukkan kata kunci kedalam title gambar secara spesifik. Ketika mengupload gambar, pastikan untuk selalu menambahkan Alt-Tag dan title gambar. Menggunakan <a href="http://mas-andes.blogspot.com/2013/03/5-trik-memaksimalkan-keyword-kata-kunci.html" target="_blank" title="trik memaksimalkan kata kunci">kata kunci</a> didalam Alt-Tag dan title gambar juga akan meningkatkan kualitas konten.<br /><br /><b>7. Jumlah Karakter</b><br />Dalam menulis posting blog membutuhkan waktu yang cukup lama untuk menyediakan konten yang cukup baik untuk orang-orang dan search engine agar memahami keseluruhan konten yang anda tulis. Oleh karena itu, dalam menulis posting pastikan bahwa jumlah karakter kata yang anda gunakan cukup untuk membuat search engine dapat mengindeks, tetapi hindari menulis terlalu banyak sehingga orang tidak mau meluangkan waktu untuk membacanya. Usahakan setiap konten tidak kurang dari 500 karakter dan tidak lebih dari 900 karakter.<br /><br /><b>8. Terupdate dan Terjadwal</b><br />Frekuensi posting blog mempengaruhi lalu lintas visitor secara signifikan. Tidak hanya search engine yang akan memberikan lebih banyak <a href="http://mas-andes.blogspot.com/2013/02/5-cara-blog-baru-untuk-dapatkan-lalu.html" target="_blank" title="cara mendatangkan lalu lintas ke blog">lalu lintas ke blog</a> dengan konten yang selalu up to date, melainkan akan lebih banyak juga orang yang akan membagikan konten tersebut kedalam jejaring sosial.<br /><br /><b>9. Kualitas Konten</b><br />Ini unsur yang paling penting. Menulis konten berkualitas yang berguna untuk semua orang adalah diatas segalanya. Walaupun sudah menggunakan <a href="http://mas-andes.blogspot.com/2013/01/5-point-utama-taktik-dan-teknik-dasar.html" target="_blank" title="teknik dan taktik dasar SEO">trik SEO</a> tidak akan membantu jika konten berkualitas rendah. Perubahan algoritma Google dan rekomendasi para ahli SEO, satu hal yang akan tetap konstan adalah konten yang berkualitas tinggi. Konten berkualitas tinggi inilah yang akan terus mengarahkan lalu lintas ke blog.

Tips Meningkatkan Kualitas Konten Blog - Ada berbagai perubahan sederhana yang dapat diperbuat untuk…

Memasang Widget Social Subscribe Minimalis With CSS

Wednesday, 4 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_-GtElmOW7HD5p9356GnbsTRjvDLm2ULcVKnHdDNEPE56HmfbF6MJej1-tuiFPaw0HdQp4EtkuXtciXoiZngHOyLQfzcEpT9mhyimQt86fPnL9oXqy_TSTkT2lmdyly-h7UtoY8lIv8/s1600/widget-social-subscribe-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Social Subscribe CSS" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_-GtElmOW7HD5p9356GnbsTRjvDLm2ULcVKnHdDNEPE56HmfbF6MJej1-tuiFPaw0HdQp4EtkuXtciXoiZngHOyLQfzcEpT9mhyimQt86fPnL9oXqy_TSTkT2lmdyly-h7UtoY8lIv8/s540/widget-social-subscribe-blogger.png" title="Memasang Widget Social Subscribe Minimalis With CSS" width="540"/></a><b>Memasang Widget Social Subscribe Minimalis With CSS</b> – lama rasanya tidak membahas widget social subscribe, dan pada tutorial kali ini kembali akan membahas widget media social subscribe yang sederhana menggunakan CSS. Widget social subscribe ini bisa diterapkan dengan mudah didalam area posting, tepatnya di bawah posting blog. Jika pada tutorial <a href="http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html" target="_blank" title="Cara Membuat Author Box Dibawah Posting Blogger">Cara Membuat Author Box Dibawah Posting Blogger</a> widget social subscribe sudah sekaligus saya gabungkan pada widget tersebut, namun apabila ingin memasang widget social subscribe saja maka cara pemasangannya pun masih sama persis seperti pada tutorial tersebut. Untuk membuat widget social subscribe agar tampil di bawah posting blog caranya bisa mengikuti langkah-langkah yang ada dibawah. Seperti tampilannya yang sederhana, untuk membuat widget social subscribe ini juga cukup sederhana dan dengan warna-warna yang sudah sesuai dengan warna widget aslinya. Apabila ingin memasangnya kedalam blog, berikut tutorialnya untuk cara <b>Memasang Widget Social Subscribe Minimalis With CSS</b> di bawah posting blog.<br /><br />1. Login akun blogger.<br />2. Selanjutnya klik Template dan pilih Edit HTML.<br />3. Copy kode berikut ini lalu paste di atas kode <span style="color: orange;"><b>]]></b:skin></b></span><br /><blockquote style="overflow:auto; height:300px;">.widgetsubscribe {<br />position: relative;<br />margin: 15px auto;<br />padding: 8px 3px;<br />width:500px;<br />border: 1px solid #52e052;<br />background: #e9fbe9;<br />}<br />.titlesubscribe p{<br />background: #52e052;<br />width:73px;<br />left: -12px;<br />margin-top: 0px;<br />font: bold 14px Tahoma;<br />padding: 5px 0px 6px 10px;<br />position: relative;<br />float:left;<br />}<br />.titlesubscribe :before {<br />content: ' ';<br />position: absolute;<br />bottom: -8px;<br />left: 0;<br />width: 0;<br />height: 0;<br />border-style: solid;<br />border-width: 8px 0 0 8px;<br />border-color: #55B05A transparent transparent transparent;<br />}<br />.titlesubscribe :after {<br />content: ' ';<br />position: absolute;<br />top: -8px;<br />left: 0;<br />width: 0;<br />height: 0;<br />border-style: solid;<br />border-width: 0 0 8px 8px;<br />border-color: transparent transparent #52A435 transparent;<br />}<br />.subscribe-social{<br />overflow: hidden;<br />}<br />.subscribe-social a{<br />display: block;<br />color: #fff !important;<br />font: bold 12px Tahoma;<br />text-align: center;<br />text-decoration: none;<br />transition: border-radius 0.50s;<br />padding: 7px 0px;<br />}<br />.subscribe-social a:hover{<br />border-radius: 10px 0px;<br />}<br />.subscribe-social div{<br />float: left;<br />margin-right: 5px;<br />width: 79px;<br />}<br />.subscribe-social .subscribefacebook a{<br />background: #3B5999;<br />}<br />.subscribe-social .subscribefacebook a:hover{<br />background: #52e052;<br />}<br />.subscribe-social .subscribetwitter a{<br />background: #01BBF6;<br />}<br />.subscribe-social .subscribetwitter a:hover{<br />background: #52e052;<br />}<br />.subscribe-social .subscribegoogleplus a{<br />background: #D54135;<br />}<br />.subscribe-social .subscribegoogleplus a:hover{<br />background: #52e052;<br />}<br />.subscribe-social .subscriberss a{<br />background: #fb8938;<br />}<br />.subscribe-social .subscriberss a:hover{<br />background: #52e052;<br />}<br />.subscribe-social .subscribeyoutube a{<br />background: #ff0000;<br />}<br />.subscribe-social .subscribeyoutube a:hover{<br />background: #52e052;<br />}<br />.subscribe-social .subscribeyoutube{<br />margin-right: 0;<br />}</blockquote>4. Copy lagi kode berikut ini kemudian paste dibawah kode <span style="color: orange;"><data:post.body/></span><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='widgetsubscribe'><br /><div class='titlesubscribe'><br /><p>Subscribe</p></div><br /><div class='subscribe-social'><br /><div class='subscribefacebook'><br /><a href='https://www.facebook.com/<span style="color: red;">andestyle</span>' target='_blank' title='Follow Me on Facebook'>Facebook</a><br /></div><br /><div class='subscribetwitter'><br /><a href='https://twitter.com/<span style="color: red;">rizkyandes</span>' target='_blank' title='Follow Me on Twitter'>Twitter</a><br /></div><br /><div class='subscribegoogleplus'><br /><a href='https://plus.google.com/<span style="color: red;">104093787575230359634</span>' target='_blank' title='Follow Me on Google+'>Google+</a><br /></div><br /><div class='subscriberss'><br /><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>' target='_blank' title='Subscribe on RSS'>RSS</a><br /></div><br /><div class="subscribeyoutube"><br /><a href="http://youtube.com/<span style="color: red;">AndesJunkies</span>" target="_blank" title='Subscribe  on Youtube'>Youtube</a><br /></div><br /></div><br /></div><br /></b:if></blockquote>Keterangan:<br />Ganti tulisan warna <span style="color: red;">merah </span>dengan social ID masing-masing. <br /><br />5. Langkah terkahir klik Simpan Template dan lihat hasilnya.<br /><br />Demikian langkah-langkah tutorial cara <b>Memasang Widget Social Subscribe Minimalis With CSS</b> di bawah posting blog, sangat mudah tentunya.

Memasang Widget Social Subscribe Minimalis With CSS – lama rasanya tidak membahas widget social subs…

Cara Membuat Author Box Dibawah Posting Blogger

Monday, 2 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgvVrMaZ0G5xabpkrew7wUZ1Q6HxPRU4s5oWKGnDsUQa6xu-MkhPAc5_4hteqA9xPJxPbtMCelWP4F2jenBfAOWkaM9ZiO9HgWGURutEd8K6tGfTmc1F5UfjLms4I7042geDXDNvb0pE/s1600/author-box-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget Author Box Blogger" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgvVrMaZ0G5xabpkrew7wUZ1Q6HxPRU4s5oWKGnDsUQa6xu-MkhPAc5_4hteqA9xPJxPbtMCelWP4F2jenBfAOWkaM9ZiO9HgWGURutEd8K6tGfTmc1F5UfjLms4I7042geDXDNvb0pE/s540/author-box-blogger.jpg" title="Cara Membuat Author Box Dibawah Posting Blogger" width="540" /></a><b>Cara Membuat Author Box Dibawah Posting Blogger</b> – melanjutkan widget  author box yang sudah saya posting sebelumnya pada tutorial yang berjudul <a href="http://mas-andes.blogspot.com/2012/11/cara-membuatmemasang-permalink-seo-di.html" target="_blank" title="cara membuat permalink SEO blogger">membuat permalink blogger</a> maupun <a href="http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html" target="_blank" title="membuat author box dibawah posting blog">membuat author box dibawah posting blog</a>, maka sekarang kembali melanjutkan tutorial tersebut namun tentu saja dengan versi yang berbeda. Untuk warna yang digunakan masih sama dengan tema-tema yang sebelumnya karena saya paling suka menggunakan dominan warna hijau. Cara penerapan maupun fiturnya juga masih sama seperti pada author box sebelumnya. Semua pasti sudah sangat paham dan lebih tahu benar fungsi dari widget author box, sedikit penjelasan tentang author box adalah selain untuk biodata dari penulis atau admin blog yang tidak lain merupakan untuk informasi detail author ke visitor dan bisa juga untuk menaruh permalink dll. Supaya lebih mudah untuk penerapannya, berikut tutorial <b>Cara Membuat Author Box Dibawah Posting Blogger</b>.<br /><br />1. Login akun blogger.<br />2. Kemudian klik Template dan pilih Edit HTML.<br />3. Copy kode berikut ini lalu paste tepat diatas kode <span style="color: orange;"><b>]]></b:skin></b></span><br /><blockquote style="height: 250px; overflow: auto;">.evolutions-authorbox { position: relative; margin: 15px auto; padding: 10px 10px 5px 10px; width:500px; border: 2px solid #52e052; background: #e9fbe9; } .evolutions-avatar { background: #52e052; float: left; height: 128px; width: 128px; left: -22px; padding: 5px 5px 5px 25px; position: relative; } .evolutions-avatar img { height: 125px; width: 125px; border: 2px solid #000; } .evolutions-authorcontent { margin-left: 160px; } .evolutions-titlebox { background: #52e052; width:364px; left: -22px; margin-bottom: 5px; padding: 5px 0px 5px 20px; position: relative; } .evolutions-titlebox a{ color: #000;} .evolutions-titlebox :before { content: ' '; position: absolute; bottom: -118px; left: -160px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .evolutions-titlebox :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 #55B05A; } .evolutions-authorbox h3 { font:bold 14px Verdana; color: #000; line-height: 20px; margin: 0; } .evolutions-info { font:12px Trebuchet MS; text-align:justify; color:#000; } .evolutions-info a { color: #000; text-decoration: none; } .evolutions-footerbox{ padding:10px 0 0 0; font:12px Trebuchet MS; } .evolutions-social{ overflow: hidden; } .evolutions-social a{ display: block; color: #FFFFFF !important; font-weight: 600; font-family: "Tahoma",Verdana,Arial; text-decoration: none; transition: border-radius 0.50s; } .evolutions-social a:hover{ border-radius: 10px 0px; } .evolutions-social div{ float: left; margin-right: 6px; width: 79px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionstwitter a{ padding: 7px 0px; text-align: center; background: #01BBF6; } .evolutions-social .evolutionstwitter a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }</blockquote>4. Selanjutnya copy lagi kode berikut ini lalu paste tepat dibawah kode <span style="color: orange;"><b><data:post.body/></b></span><br /><blockquote style="height: 250px; overflow: auto;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='evolutions-authorbox'><br /><div class='evolutions-avatar'><img alt='Mas Andes' src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjclGyAmjfHxJ1waWLdeNfqOx7pm4tqOW15JXCS1xd-SauywglMQQ63-aIFkdOd_IsxgRPjZ_fC6LojTrSs6anN3njDwQLhY7TvfVviGVbpmOuzkhnOFWr6x41DGc2N5rc7zpcDrMZzH4c/s96-c/mas-andes.jpg</span>'/><br /></div><br /><div class='evolutions-authorcontent'><br /><div class='evolutions-titlebox'><br /><h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div><br /><div class='evolutions-info'><br />Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b><br /><textarea cols='39' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><br /></div><br /><div class='evolutions-footerbox'><br /><div class='evolutions-social'><br /><div class='evolutionsfacebook'><br /><a href='https://www.facebook.com/<span style="color: red;">andestyle</span>' target='_blank' title='Join on Facebook'>Facebook</a><br /></div><br /><div class='evolutionstwitter'><br /><a href='https://twitter.com/<span style="color: red;">rizkyandes</span>' target='_blank' title='Join on Twitter'>Twitter</a><br /></div><br /><div class='evolutionsgoogleplus'><br /><a href='https://plus.google.com/<span style="color: red;">104093787575230359634</span>' target='_blank' title='Join on Google+'>Google+</a><br /></div><br /><div class='evolutionsrss'><br /><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>' target='_blank' title='Join on RSS'>RSS</a><br /></div></br><br /><span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html' target='_blank'>[ Get This Widget ]</a></span><br /></div></div></div><br /></div><br /></b:if></blockquote>Keterangan:<br />Ganti teks warna <span style="color: blue;">biru </span>dengan URL foto anda.<br />Ganti teks warna <span style="color: red;">merah </span>dengan ID masing-masing.<br /><br />5. Langkah terakhir klik Simpan Template.<br /><br />Yang perlu diperhatikan pada saat menerapkan adalah kode <b><data:post.body/></b> karena pada suatu template blog biasa terdapat 2 kode tersebut atau bisa juga lebih. Jika pada template blog yang saya gunakan pada point ke-4 diatas saya taruh kode tersebut tepat dibawah kode <b><data:post.body/></b> yang terakhir, silahkan bisa disesuaikan dengan template blog yang digunakan masing-masing. Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.

Cara Membuat Author Box Dibawah Posting Blogger – melanjutkan widget author box yang sudah saya pos…

Membuat Author Box Dibawah Posting Blog

Sunday, 1 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcN9JOIFMpqgaEx43CVThOvyIVQCzoj5h_eISkg2auqFo2HIO0AZ0jThBRGqXav8lD_sX_iMFzgNjOYXQc-Q7HtOgT4ZNUsUVEKEmt4w2K5ctoEoLrZjJnXheiKUo_rseak69P1j0z9U/h300/widget-author-box-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget Author Box Blogger" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcN9JOIFMpqgaEx43CVThOvyIVQCzoj5h_eISkg2auqFo2HIO0AZ0jThBRGqXav8lD_sX_iMFzgNjOYXQc-Q7HtOgT4ZNUsUVEKEmt4w2K5ctoEoLrZjJnXheiKUo_rseak69P1j0z9U/h300/widget-author-box-blogger.jpg" title="Membuat Author Box Dibawah Posting Blog" width="540"/></a><b>Membuat Author Box Dibawah Posting Blog</b> – selama berselancar didalam internet mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink. Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapat <a href="http://mas-andes.blogspot.com/2013/08/widget-form-email-subscribe-blogger.html" target="_blank" title="membuat form email subscribe di bawah posting blog">form email subscriber</a> dan tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara <b>Membuat Author Box Dibawah Posting Blog</b>.<br /><br />1. Login akun blogger.<br />2. Kemudian klik Template dan pilih Edit HTML.<br />3. Copy kode berikut ini lalu paste tepat diatas kode <span style="color: orange;"><b>]]></b:skin></b></span><br /><blockquote style="overflow:auto;height:250px;">.evolutions-boxauthor{ position: relative; margin: 15px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; } .titlebox h3{ padding: 10px 0px 10px 25px; color:#000; font:bold 14px Georgia; background: #52e052; margin:0px 0px 0px -22px; width:524px; } .titlebox h3 a {color:#000;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; } .boxcontent a { color: #000; text-decoration: none; } .boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052; } .boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; } .linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; } .email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:6px 10px; position:absolute; right:-20px; top:0; display:block; } .email-button:hover{ background:#00ff00; text-decoration:none !important; } .wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; } .email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; } .email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; } .evolutions-social{ overflow: hidden; float: right; } .evolutions-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; } .evolutions-social a:hover{ border-radius: 0px; } .evolutions-social div{ float: left; margin: 5px 5px 0 0; width: 70px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }</blockquote>4. Selanjutnya copy lagi kode berikut ini lalu paste tepat dibawah kode <span style="color: orange;"><b><data:post.body/></b></span><br /><blockquote style="overflow:auto;height:250px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='evolutions-boxauthor'><br /><div class='boxauthor_photo'><br /><img alt='mas andes' src='<span style="color: blue;">http://lh3.googleusercontent.com/-DHMRnvuMJfo/AAAAAAAAAAI/AAAAAAAAAAA/6f7Kf2lfwCE/s96-c/photo.jpg</span>'/><br /></div><br /><div class='titlebox'><br /><h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div><br /><div class='boxcontent'><br />Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b><br /><textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><br /></div><br /><div class='linediv'></div><br /><div class='wrap-email'><br /><form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">masandes</span>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='<span style="color: red;">masandes</span>'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input class='email-input' 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...'/><br /><input class='email-button' title='' type='submit' value='Submit'/><br /></form><br /></div><br /><div class='evolutions-social'><br /><div class='evolutionsfacebook'><br /><a href='https://www.facebook.com/<span style="color: lime;">andestyle</span>' target='_blank' title='Join on Facebook'>Facebook</a><br /></div><br /><div class='evolutionsgoogleplus'><br /><a href='https://plus.google.com/<span style="color: lime;">104093787575230359634</span>' target='_blank' title='Join on Google+'>Google+</a><br /></div><br /><div class='evolutionsrss'><br /><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>' target='_blank' title='Join on RSS'>RSS</a><br /></div><br /></div></br><br /><span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html' target='_blank'>[ Get This Widget ]</a></span><br /><div style='clear:both;'></div><br /></div><br /></b:if></blockquote>Keterangan:<br />Ganti teks warna <span style="color: blue;">biru </span>dengan URL foto anda.<br />Ganti teks warna <span style="color: red;">merah </span>dengan ID feedburner anda.<br />Ganti teks warna <span style="color: lime;">hijau </span>dengan ID masing-masing.<br /><br />5. Langkah terakhir klik Simpan Template.<br /><br />Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.

Membuat Author Box Dibawah Posting Blog – selama berselancar didalam internet mungkin anda pernah me…

Membuat Form Email Subscribe Dibawah Posting Blog

Friday, 23 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG1sT0baQL8-vKP3v0JisaFMXy6iVlo_d0FRnD4WjoWKEKq6qOP4nC-5S7OPaR_vPPpcnAzpnllQl4V_PCSp-F4guoB9uZja-rBBxP7VJ5A78GxJsU7uUSTGWEx9FD4fM84mEpEy_IDs/s1600/form-email-subscribe-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Form Email Subscribe Blogger" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG1sT0baQL8-vKP3v0JisaFMXy6iVlo_d0FRnD4WjoWKEKq6qOP4nC-5S7OPaR_vPPpcnAzpnllQl4V_PCSp-F4guoB9uZja-rBBxP7VJ5A78GxJsU7uUSTGWEx9FD4fM84mEpEy_IDs/s320/form-email-subscribe-blogger.png" title="Membuat Form Email Subscribe Dibawah Posting Blog" width="540" /></a><b>Membuat Form Email Subscribe Dibawah Posting Blog</b> – tentu sudah tidak asing lagi dengan adanya <a href="http://mas-andes.blogspot.com/2013/07/style-ribbon-email-subscribe-blogger.html" title="style ribbon form email subcribe blogger" target="_blank">form email subcribe</a> di dalam template blog. Dengan adanya form email subscribe yang terpasang pada blog akan sangat membantu baik itu dari author blog dalam mempublikasikan ke media maupun lebih mempermudah visitor dalam menemukan artikel yang di publikasin oleh blog tersebut dan nantinya pemilik email akan menerima pemberitahuan mengenai artikel yang di publikasikan begitu juga seterusnya akan menerima pemberitahuan secara terupdate melalui email selagi masih berlangganan. Untuk membuat form email subcribe agar bisa tampil dibawah posting blog juga tidak rumit dan bahkan sangat mudah. Caranya bisa di ikuti dengan menggunakan langkah-langkah yang ada dibawah ini, berikut tutorialnya untuk <b>Membuat Form Email Subscribe Dibawah Posting Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Kemudian klik Template lalu pilih Edit HTML.<br />3. Copy kode berikut ini lalu paste di atas kode <span style="color: orange;"><b>]]></b:skin></b></span><br /><blockquote class="tr_bq">#evolutions-widget { background: #e9fbe9; border: 2px solid #52e052; padding: 3px 8px; margin: 20px auto; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: auto; box-shadow: 1px 1px 4px #52e052 inset; }<br />#evolutions-widget:hover { background: darkgreen; }<br />#evolutions-widget td { padding: 3px 0; }<br />form.feedburner { margin: 0px; display: block; clear: both; }<br />.form-email { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrylVb0cNTHxswHm-zKSbevCHkXxx45xwqLYgIAgIdTd_TrNknnRwrM7wogw52_BQk5Yb5I-bAxYll4FNfP1oaJrfNqKCSgTP3qq8oSgjjMdT4Eic6kRjIbnEg54cVz2KEJ_DCiz1_N07t/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #000; font-weight: bold; text-decoration: none; border: 1px solid #52e052; box-shadow: 1px 1px 4px #52e052 inset; }<br />.buttonsubmit { color: #000; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #52e055; cursor: pointer; background: #52e052; }</blockquote><br />4. Selanjutnya gunakan CTRL+F untuk mencari kode <b><data:post.body/></b> biasanya terdapat 2 kode atau bisa lebih, sesuaikan saja dengan template blog yang anda gunakan.<br />5. Lalu copy kode berikut ini kemudian paste dibawahnya <span style="color: orange;"><b><data:post.body/></b></span><br /><blockquote class="tr_bq" style="overflow:auto; height:300px;"><b:if cond='data:blog.pageType == "item"'><br /><div id='evolutions-widget'><br /><div id='emailwidget'><br /><table style='border:none; margin: 0px; padding: 0px;' width='100%'><br /><tbody><br /><tr style='border:none; margin: 0px; padding: 0px;'><br /><td align='left' style='border:none; margin: 0px; padding: 0px;'><br /><p style='color:#000; font-weight: bold; font-size: 18px; margin:0px 0px 15px 0px;font-family:georgia;font-style:bold; '><br />Get Update Via Email !<br /></p><br /><form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'><br /><input name='uri' type='hidden' value='masandes'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input class='form-email' 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…'/><br /><input alt='' class='buttonsubmit' title='' type='submit' value='Submit'/><br /></form><br /></td><br /><td style='border:none; margin: 0px; padding: 0px;'><br /><p style='color:#000; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '><br />Follow Me !<br /></p><br /><a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGgSm82QiFIBoRDg56UPo_KfoYpQwyDIkUjQF0gp2GisjdkSF3y91BLpa2iPksqnyB73TiOaXrbW-nYna60LtVnzKIiyg_ZGeHWmeYLJepEy8pybFDn3h9NdQ66GCygZsQZumGV2fR4PA/h120/Faceblog+Evolutions+%283%29.png'/></a><br /><a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='Follow Me on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinmUKjlmygvuuSpFvAjXeDJRjeVW2bQd7A6T1sBxMg7sHj1yrlgTw8qpmGJvMRkvd7b6bcba9YrnAZN-TXM54O3wtEWUHk8YTA8WNtDeMOxYBQ-XIAPuNhk-NMVYZFoNcH7OGqETRmJo/h120/Faceblog+Evolutions+%281%29.png'/></a><br /><a href='https://plus.google.com/106527290580119996124/' rel='nofollow' target='_blank' title='Follow Me on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9lTvhLQ0GVz-ZhXmkuo_OKMX6kOdSswcarL6DpOuj4iKQjVUAdWcM0IMwkSeVMd87mWdTsbBqRBM6y4rWm8Ayg3ENFsTsD3k_x9dSkfksuoEfNdCCQ-8pMujexvM1GshOMJIuRJ8uaI/h120/Faceblog+Evolutions+%282%29.png'/></a><br /></td><br /></tr><br /></tbody><br /></table><br /><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fandestyle&amp;width=450&amp;height=21&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe><br /><span style='font-size: 8px; text-decoration: none; text-align:right;'><a href='http://mas-andes.blogspot.com' target='_blank'>[Get this widget]</a></span><br /></div><br /></div><br /></b:if></blockquote>6. Langkah terakhir klik Simpan Template.

Membuat Form Email Subscribe Dibawah Posting Blog – tentu sudah tidak asing lagi dengan adanya form …

Membuat Widget Follower Accordion Pada Blog

Wednesday, 21 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHntZkyHYBXV-ENDWnSqnocR6yx21n6QTE4G5b3S-gu4f7YmBnhbLS79lJ3NVJjWVtMXjdxqmZzTyEgCmQXmS3nFxmhQEIN3Ed0uSrxqK5_mdkOM_JViDgTOjo9VHbYkGQFlrNePz2l0/s1600/accordion-follower.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Follower Accordion Blogger" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHntZkyHYBXV-ENDWnSqnocR6yx21n6QTE4G5b3S-gu4f7YmBnhbLS79lJ3NVJjWVtMXjdxqmZzTyEgCmQXmS3nFxmhQEIN3Ed0uSrxqK5_mdkOM_JViDgTOjo9VHbYkGQFlrNePz2l0/s320/accordion-follower.gif" title="Membuat Widget Follower Accordion Pada Blog" width="540" /></a><b>Membuat Widget Follower Accordion Pada Blog</b> – berbicara mengenai layout blog memang tak lepas dari coding, karena memang coding yang melatar belakangi suatu tampilan blog. Pada pembahasan kali ini saya kembali akan membahas tentang widget follower yang terdapat pada blog. Lantas follower yang bagaimana lagi yang akan saya bahas pada topik ini. Di dalam suatu blog biasanya terdapat widget follower dari blogger sendiri, ada juga <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-widget-google-badge.html" target="_blank" title="modifikasi widget google+ follower">widget google+ follower</a> dan adapula <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-facebook-like-box-pada.html" target="_blank" title="modifikasi widget facebook like box">widget facebook like box</a> yang berarti ini follower facebook fanspage. Dari ketiga jenis widget follower tersebut pada tutorial ini akan kita bahas agar ketiga-tiganya widget tampil dalam satu accordion secara berurutan atau bisa dikatakan widget ini saya gabungkan kedalam satu tag label follower pada blog. Caranya juga cukup mudah dan bahkan lebih singkat daripada <a href="http://mas-andes.blogspot.com/2012/11/menggabungkan-3-kotak-komentar-blogger.html" target="_blank" title="menggabungkan komentar blogger, facebook dan twitter">menggabungkan komentar blogger, facebook dan twitter</a>. Seperti apa langkah lebih jelasnya untuk menggabungkan follower blogger, google+ dan facebook? Berikut tutorialnya untuk <b>Membuat Widget Follower Accordion Pada Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Langkah berikutnya Copy kode berikut ini lalu klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode disitu.<br />- Untuk memasang agar di sidebar, berikut kodenya:<br /><blockquote class="tr_bq" style="overflow:auto; height:300px;"><style><br />#accordion-evolutions { position:relative; margin:auto; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #accordion-button { height:40px; width:312px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHn9gPFU50UkLrd6qE_U8s94rrSLLtHUg2jjM1QeGIEfom-CVmxDwugImKw6XQ-pmxkoG6OA1wAEFQfIqA9y4L3dc38myWHGy3O29sHdXTz3f3e0MTbP6XYGjQoIr1Soj9ArjuxmsUggo/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }<br /></script><br /><br /><div id="accordion-evolutions"><br /><div id="accordion-follower"><br /><script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /><br /><div id="<span style="color: red;">div-7w5ths5ahnit</span>"></div><br /><script type="text/javascript"><br />var skin = {};<br />skin['BORDER_COLOR'] = '#000000';<br />skin['ENDCAP_BG_COLOR'] = '#e9fbe9';<br />skin['ENDCAP_TEXT_COLOR'] = '#000000';<br />skin['ENDCAP_LINK_COLOR'] = '#000000';<br />skin['ALTERNATE_BG_COLOR'] = '#transparent';<br />skin['CONTENT_BG_COLOR'] = '#transparent';<br />skin['CONTENT_LINK_COLOR'] = '#000000';<br />skin['CONTENT_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';<br />skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_HEADLINE_COLOR'] = '#000000';<br />skin['NUMBER_ROWS'] = '2';<br />google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);<br />google.friendconnect.container.renderMembersGadget(<br /> { id: '<span style="color: red;">div-7w5ths5ahnit</span>',<br />   site: '<span style="color: red;">10916685731781888212</span>' },<br />  skin);<br /></script><br /><br /></br><br /><br /><div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/<span style="color: blue;">104093787575230359634</span>" data-source="blogger:blog:followers" data-width="300"><br /></div><br /><script type="text/javascript"><br />(function() {<br />window.___gcfg = {'lang': 'en'};<br />var po = document.createElement('script');<br />po.type = 'text/javascript';<br />po.async = true;<br />po.src = 'https://apis.google.com/js/plusone.js';<br />var s = document.getElementsByTagName('script')[0];<br />s.parentNode.insertBefore(po, s);<br />})();<br /></script><br /><br /></br><br /><br /><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F<span style="color: lime;">andestyle</span>&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe><br /></div><br /><div id="accordion-button"></div><br /></div></blockquote>- Untuk memasang agar melayang di sudut atas kanan blog, berikut kodenya:<br /><blockquote class="tr_bq" style="overflow:auto; height:300px;"><style><br />#accordion-evolutions { position:fixed; top: 0; right:20px; float:right; } #accordion-follower { height:auto; width:290px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #accordion-button { height:40px; width:312px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHn9gPFU50UkLrd6qE_U8s94rrSLLtHUg2jjM1QeGIEfom-CVmxDwugImKw6XQ-pmxkoG6OA1wAEFQfIqA9y4L3dc38myWHGy3O29sHdXTz3f3e0MTbP6XYGjQoIr1Soj9ArjuxmsUggo/h46/follow_button.png'); display:block; cursor:pointer; margin:auto; }<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function(){ $("#accordion-button").click(function(){ if ($("#accordion-follower").is(":hidden")){ $("#accordion-follower").slideDown("slow"); } else{ $("#accordion-follower").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#accordion-follower").slideUp("slow")', 2000); }<br /></script><br /><br /><div id="accordion-evolutions"><br /><div id="accordion-follower"><br /><script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /><br /><div id="<span style="color: red;">div-7w5ths5ahnit</span>"></div><br /><script type="text/javascript"><br />var skin = {};<br />skin['BORDER_COLOR'] = '#000000';<br />skin['ENDCAP_BG_COLOR'] = '#e9fbe9';<br />skin['ENDCAP_TEXT_COLOR'] = '#000000';<br />skin['ENDCAP_LINK_COLOR'] = '#000000';<br />skin['ALTERNATE_BG_COLOR'] = '#transparent';<br />skin['CONTENT_BG_COLOR'] = '#transparent';<br />skin['CONTENT_LINK_COLOR'] = '#000000';<br />skin['CONTENT_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF';<br />skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_HEADLINE_COLOR'] = '#000000';<br />skin['NUMBER_ROWS'] = '2';<br />google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);<br />google.friendconnect.container.renderMembersGadget(<br /> { id: '<span style="color: red;">div-7w5ths5ahnit</span>',<br />   site: '<span style="color: red;">10916685731781888212</span>' },<br />  skin);<br /></script><br /><br /></br><br /><br /><div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/<span style="color: blue;">104093787575230359634</span>" data-source="blogger:blog:followers" data-width="300"><br /></div><br /><script type="text/javascript"><br />(function() {<br />window.___gcfg = {'lang': 'en'};<br />var po = document.createElement('script');<br />po.type = 'text/javascript';<br />po.async = true;<br />po.src = 'https://apis.google.com/js/plusone.js';<br />var s = document.getElementsByTagName('script')[0];<br />s.parentNode.insertBefore(po, s);<br />})();<br /></script><br /><br /></br><br /><br /><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F<span style="color: lime;">andestyle</span>&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowTransparency="true"></iframe><br /></div><br /><div id="accordion-button"></div><br /></div></blockquote>Keterangan:<br />Ganti kode yang berwarna <span style="color: red;">merah</span> dengan ID widget follower blog anda, caranya lihat <a href="http://mas-andes.blogspot.com/2013/07/cara-membuat-widget-follower-blog.html" target="_blank" title="custom widget follower blog">disini</a>.<br />Ganti <span style="color: blue;">104093787575230359634 </span>dengan ID google+ anda.<br />Ganti <span style="color: lime;">andestyle </span>dengan ID facebook/fanspage anda.<br /><br />3. Langkah terakhir klik Simpan.

Membuat Widget Follower Accordion Pada Blog – berbicara mengenai layout blog memang tak lepas dari c…

Memasang Widget Contact Form Accordion Pada Blog

Monday, 19 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimhZ3Tk4IrmbfuPlg_mU_w1Ugoyd3xm2VR3eXzj1AJpq566HhHc7nzvF4Soj5fdO86vbRfNrStntZi7wpk-N7T7AEwVupEFdt5GOWF_vWLbK6h5r_GviWFJMj5wz77GzIRnh8gFhizKE4/s1600/memasang-widget-contact-form-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Contact Form Blogger" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimhZ3Tk4IrmbfuPlg_mU_w1Ugoyd3xm2VR3eXzj1AJpq566HhHc7nzvF4Soj5fdO86vbRfNrStntZi7wpk-N7T7AEwVupEFdt5GOWF_vWLbK6h5r_GviWFJMj5wz77GzIRnh8gFhizKE4/s320/memasang-widget-contact-form-blogger.gif" title="Floating Widget Contact Form Efek Accordion Pada Blog" /></a><b>Memasang Widget Contact Form Accordion Pada Blog</b> – masih pada tema tutorial yang sama seperti sebelumnya mengenai cara memasang dan memodifikasi atau merubah tampilan awal <a href="http://mas-andes.blogspot.com/2013/08/widget-contact-form-blogger.html" target="_blank" title="Widget Contact Form Efek Animasi Pada Blog">widget contact form</a> official blogger yang masih sederhana agar bisa menjadi lebih menarik dan bisa kita atur sendiri dimana letak widget contact form tersebut supaya bisa di pasang pada letak yang kita kehendaki. Tentu sudah tidak asing lagi dengan kata floating di kalangan blogger. Istilah floating tentu sangat identik dengan kata melayang atau dalam istilah lain widget contact form ini nantinya akan kita pasang di bagian atas layout blog dan apabila nanti scroll mouse di putar kebawah maka widget contact form akan tetap pada posisinya, yakni di pojok atas layout blog sebelah kanan. Namun pilihan lain bisa juga widget contact form ini dipasang pada <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank">sidebar blog</a> dan jangan khawatir mengenai layout, tidak terlalu memakan banyak tempat juga karena widget contact form ini mempunyai <a href="http://mas-andes.blogspot.com/2013/04/membuat-tab-vertikal-accordion-dengan.html" target="_blank" title="membuat tab vertikal accordion pada blog">efek accordion</a> dimana contact form akan muncul apabila button contact sudah di klik. Untuk penjelasan lebih lanjut, berikut adalah tutorial cara memasang <b>Memasang Widget Contact Form Accordion Pada Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcGOobZ7bFFP6FbBYJS20MOxzBOCaIMTf4lLlmcNnZEHXfpVAjxeJi5UqM9f1-OkTHSFm6dtQyV1Uylj4AeQiBJsr1XgPxdw-ydj8jIM-7OaINDdtCcS1_wa4sKQ0ul2ZOpdf2T4PQoY/s1600/add-widget-contact-form-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Contact Form Blogger" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcGOobZ7bFFP6FbBYJS20MOxzBOCaIMTf4lLlmcNnZEHXfpVAjxeJi5UqM9f1-OkTHSFm6dtQyV1Uylj4AeQiBJsr1XgPxdw-ydj8jIM-7OaINDdtCcS1_wa4sKQ0ul2ZOpdf2T4PQoY/s320/add-widget-contact-form-blogger.gif" title="Floating Widget Contact Form Efek Accordion Pada Blog" width="540" /></a>3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode <b>]]></b:skin></b> gunakan CTRL+F.<br />4. Copy kode berikut ini lalu paste tepat diatas kode <span style="color: orange;"><b>]]></b:skin> </b></span>kemudian klik Simpan Template.<br /><blockquote class="tr_bq">#ContactForm1 {display:none}</blockquote>5. Lalu langkah berikutnya adalah membuat tampilan baru widget contact form, caranya pilih salah satu kode yang ada pada blockquote lalu Copy kode tersebut selanjutnya klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode tersebut.<br /><br />- Untuk memasang agar melayang di sudut atas kanan blog (floating contact form), berikut kodenya:<br /><blockquote class="tr_bq" style="height: 250px; overflow: auto;"><style><br />#form-evolutions { position:fixed; top: 0; right:20px; float:right; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Rikw1UW5xSK5ddcRkv4qobTHWsnWIZrUBltZG1jOEx2hU8YnXgeMZUoae70lee64XY-dCGE6PGyQ3UqgXC9DDHXA2o7LYqrpsyc7wdtjYMK_eqJCdyHNXLsrTjnO8JWccbSbr2rZ6PU/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }<br /></script><br /><div id="form-evolutions"><br /><div id="contact-faceblog"><br /><form name="contact-form"><br /><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><br /><div id="ContactForm1_contact-form-error-message"><br /></div><br /><div id="ContactForm1_contact-form-success-message"><br /></div><br /></div><br /></form><br /></div><br /><div id="contactbutton"></div><br /></div></blockquote>- Untuk memasang widget contact form accordion pada sidebar blog, kodenya sebagai berikut:<br /><blockquote class="tr_bq" style="height: 250px; overflow: auto;"><style><br />#form-evolutions { position:relative; margin:auto; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Rikw1UW5xSK5ddcRkv4qobTHWsnWIZrUBltZG1jOEx2hU8YnXgeMZUoae70lee64XY-dCGE6PGyQ3UqgXC9DDHXA2o7LYqrpsyc7wdtjYMK_eqJCdyHNXLsrTjnO8JWccbSbr2rZ6PU/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }<br /></script><br /><div id="form-evolutions"><br /><div id="contact-faceblog"><br /><form name="contact-form"><br /><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><br /><div id="ContactForm1_contact-form-error-message"><br /></div><br /><div id="ContactForm1_contact-form-success-message"><br /></div><br /></div><br /></form><br /></div><br /><div id="contactbutton"></div><br /></div></blockquote> - Untuk memasang widget contact form accordion versi 2 pada sidebar blog, kodenya sebagai berikut:<br /><blockquote class="tr_bq" style="height: 250px; overflow: auto;"><style><br />#faceblog-contact { height: 300px; width: 302px; overflow: hidden; background-color: darkgreen; } #evolutionsbutton { height:40px; width:302px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Rikw1UW5xSK5ddcRkv4qobTHWsnWIZrUBltZG1jOEx2hU8YnXgeMZUoae70lee64XY-dCGE6PGyQ3UqgXC9DDHXA2o7LYqrpsyc7wdtjYMK_eqJCdyHNXLsrTjnO8JWccbSbr2rZ6PU/h47/contact_button.png'); display:block; cursor:pointer; } .form-contact { width: 322px; height: 300px; padding: 10px; margin: auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 120px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: left; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; }<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/contactform.js" type="text/javascript"></script><br /><br /><div id="faceblog-contact">       <br /><form class="form-contact">            <br /><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><br /><div id="ContactForm1_contact-form-error-message"><br /></div><br /><div id="ContactForm1_contact-form-success-message"><br /></div><br /></div><br /></form> <br /></div><br /><div id="evolutionsbutton"></div></blockquote>6. Langkah terakhir klik Simpan.<br /><br />Untuk tinggi, lebar maupun warna widget contact form silahkan custom dan sesuikan selera sendiri. Sekarang jika ingin memasang tinggal tergantung selera saja, mau menggunakan efek floating atau efek accordion pada sidebar blog. Atau bahkan mungkin lebih suka <a href="http://mas-andes.blogspot.com/2013/08/custom-widget-contact-form-blogger.html" target="_blank" title="Custom Widget Contact Form Pada Blog">memasang widget contact form</a> kedalam halaman statis blog.<br /><br />“Pada dasarnya penampilan memang bukanlah sesuatu hal yang terbaik, namun seseorang bisa menilai dari segi penampilan menjadi sesuatu hal yang terbaik”. Bukankah sesuatu hal yang enak di pandang akan terlihat segar di mata? keep the spirit, continue to work and success always!!! appearance is reflective of one's personality.

Memasang Widget Contact Form Accordion Pada Blog – masih pada tema tutorial yang sama seperti sebelu…

Custom Widget Contact Form Pada Blog

Saturday, 17 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1qthAYtwpoDup6E8SCtyh3u3FQ3G3OEUiS8fHEcW2c7VsHZVtnRoyAzjos9mFbFm4UjTC7sapsSqCVr6npodI0IeR5Ut4YBoh8xbSOu6JfYYqbii25ZtucemmpRyQI7JoIyhLoz-uxM/s1600/widget-contact-form-blogger-official.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Custom Widget Contact Form Blogger" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1qthAYtwpoDup6E8SCtyh3u3FQ3G3OEUiS8fHEcW2c7VsHZVtnRoyAzjos9mFbFm4UjTC7sapsSqCVr6npodI0IeR5Ut4YBoh8xbSOu6JfYYqbii25ZtucemmpRyQI7JoIyhLoz-uxM/s320/widget-contact-form-blogger-official.gif" title="Custom Widget Contact Form Pada Blog" /></a><b>Custom Widget Contact Form Pada Blog</b> – semua pasti sudah tahu fitur widget terbaru dari blogger agar bisa berkontak langsung via email dengan pemilik atau author blog, inilah kemudahan yang diberikan oleh blogger agar penggunanya bisa lebih mudah untuk berkomunikasi didalam sebuah blog dengan menggunakan <a href="http://mas-andes.blogspot.com/2013/08/widget-contact-form-blogger.html" target="_blank" title="Widget Contact Form Efek Animasi Pada Blog">widget contact form</a>. Walaupun widget contact form memang jarang di tampilkan pada sidebar atau jarang dilihat oleh pengunjung namun tidak salah apabila kita melengkapi blog dengan widget contact form dengan custom yang menarik untuk kemudian bisa dipasang kedalam halaman statis blog atau tempat yang dikehendaki. Memang benar apabila setelah menambahkan contact form dari widget yang disediakan oleh blogger sudah bisa langsung digunakan. Namun tidak ada salahnya juga apabila kita ingin melihat tampilan widget contact form agar bisa menjadi lebih menarik atau sesuai dengan tampilan yang di kehendaki sendiri. Langkah-langkah untuk memasang dan memodifikasi juga cukup mudah, berikut adalah tutorial cara <b>Custom Widget Contact Form Pada Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcGOobZ7bFFP6FbBYJS20MOxzBOCaIMTf4lLlmcNnZEHXfpVAjxeJi5UqM9f1-OkTHSFm6dtQyV1Uylj4AeQiBJsr1XgPxdw-ydj8jIM-7OaINDdtCcS1_wa4sKQ0ul2ZOpdf2T4PQoY/s1600/add-widget-contact-form-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Custom Widget Contact Form Blogger" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcGOobZ7bFFP6FbBYJS20MOxzBOCaIMTf4lLlmcNnZEHXfpVAjxeJi5UqM9f1-OkTHSFm6dtQyV1Uylj4AeQiBJsr1XgPxdw-ydj8jIM-7OaINDdtCcS1_wa4sKQ0ul2ZOpdf2T4PQoY/s320/add-widget-contact-form-blogger.gif" title="Custom Widget Contact Form Pada Blog" width="540" /></a>3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode <b>]]></b:skin></b> gunakan CTRL+F.<br />4. Copy kode berikut ini lalu paste tepat diatas kode <span style="color: orange;"><b>]]></b:skin></b></span> kemudian klik Simpan Template.<br /><blockquote class="tr_bq">#ContactForm1 {display:none}</blockquote>5. Lalu berikutnya kita akan memasang tampilan baru widget contact form, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.<br /><blockquote class="tr_bq" style="overflow:auto; height:300px;"><style><br />#contact-wrapper{ width:400px; height:auto; padding: 10px; margin: auto; position:relative; font:12px Arial; }  #mycontactform{ width:400px; padding: 10px; margin: auto; position:relative; } .field{ background:gray; padding:10px; height:50px; width:400px; } .area{ padding:10px; min-height:195px; } #ContactForm1_contact-form-name{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 400px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }<br /></style><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.4.2.min.js"></script><br /><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/highlight.js"></script><br /><br /><div id="contact-wrapper"><br /><form id="mycontactform"><br /><div><br /><div class="field"><br /><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br /></div><br /><div class="field"><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div><br /><div class="field area"><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><br /><div id="ContactForm1_contact-form-error-message"><br /></div><br /><div id="ContactForm1_contact-form-success-message"><br /></div></div></div></div></form></div></blockquote>6. Langkah terakhir klik Publish.<br /><br />Sampai sini selesai sudah langkah-langkah untuk <b>Custom Widget Contact Form Pada Blog</b>, dan kini widget contact form sudah terpasang dalam halaman statis blog. Apabila ingin memasang widget contact form tersebut kedalam sidebar maka caranya setelah sampai pada point 5 copy kode tersebut kemudian paste kedalam widget HTML/Javascript. Untuk tinggi, lebar maupun warna background contact form silahkan custom agar lebih sesuai dengan yang di kehendaki.

Custom Widget Contact Form Pada Blog – semua pasti sudah tahu fitur widget terbaru dari blogger agar…

Widget Contact Form Efek Animasi Pada Blog

Thursday, 15 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2h8LJb10fUsZcBOXCfKeBqZw2JpeWagoM3gJxUyXx8-8oTJQdNhyphenhyphen19_PwZfg5Ddq6oYd705gDIVDPrD0uN2uxZ4dBJcZWSpMzWNWd8e3rH_EpNuRqmxh6Ulr6V19N17U3JYpTVTl3b0/s1600/widget-contact-form-official-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Contact Form Blogger" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2h8LJb10fUsZcBOXCfKeBqZw2JpeWagoM3gJxUyXx8-8oTJQdNhyphenhyphen19_PwZfg5Ddq6oYd705gDIVDPrD0uN2uxZ4dBJcZWSpMzWNWd8e3rH_EpNuRqmxh6Ulr6V19N17U3JYpTVTl3b0/s320/widget-contact-form-official-blogger.jpg" title="Widget Contact Form Efek Animasi Pada Blog" /></a><b>Widget Contact Form Efek Animasi Pada Blog</b> – untuk membuat halaman kontak pada blog dengan adanya fitur widget terbaru official blogger tentu kini sudah lebih mudah. Hanya dengan menambahkan pada add widget yang terdapat pada tata letak blog maka widget contact form sudah siap tampil dan bisa langsung digunakan sebagaimana fungsinya. Dengan adanya fitur widget contact form tersebut kita bisa merubah style tampilan dengan gaya kita sendiri agar bisa sesuai dengan warna maupun bentuk yang kita kehendaki. Walaupun kita akan membuat widget contact form tampil dengan efek animasi, namun kita tetap membutuhkan widget contact form bawaan dari blogger agar ditampilkan kedalam blog terlebih dahulu agar widget contact form dengan efek animasi ini bisa berfungsi sebagaimana mestinya dan agar bisa tetap digunakan untuk berkomunikasi. Kesimpulannya adalah setelah kita memasang widget contact form bawaan dari blogger, maka tahap selanjutnya yaitu memodifikasi widget contact form tersebut dengan tampilan yang kita kehendaki dan nantinya widget contact form yang lama atau layout awal dari tampilan widget yang masih standar atau sederhana kita sembunyikan menggunakan CSS. Agar lebih jelasnya, berikut adalah tutorial cara memasang <b>Widget Contact Form Efek Animasi Pada Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHSSX71rekcPnwkYABTKg8k4uRMJvkPuH_71bFbn_gKavzvER1jLUf3UnWGpLg9YkklN4GXMWtlgQJI_NWA0bCPFZp5Pe9Zwt5XoaqVBeecTyz0ex9W97AbXZ_TzUB4CQASWEp_ljjbg/s1600/add-widget-contact-form-blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Contact Form Blogger" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHSSX71rekcPnwkYABTKg8k4uRMJvkPuH_71bFbn_gKavzvER1jLUf3UnWGpLg9YkklN4GXMWtlgQJI_NWA0bCPFZp5Pe9Zwt5XoaqVBeecTyz0ex9W97AbXZ_TzUB4CQASWEp_ljjbg/s320/add-widget-contact-form-blogger.gif" title="Widget Contact Form Efek Animasi Pada Blog" width="320" /></a></div>3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode <b>]]></b:skin></b> gunakan CTRL+F.<br />4. Copy kode berikut ini lalu paste tepat diatas kode <span style="color: orange;"><b>]]></b:skin> </b></span>kemudian klik Simpan Template.<br /><blockquote class="tr_bq">#ContactForm1 {display:none}</blockquote>5. Lalu berikutnya kita akan membuat tampilan baru widget contact form dengan efek animasi, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.<br /><blockquote class="tr_bq" style="height: 300px; overflow: auto;"><style><br />#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XYg6ZzS-ojhKfynnra4L5jwYmUkss-d9CrQ9uI1gnsSjnv6tYjSytVNdLFtFc4ZvYJvvu07oBZUYkQAdVoQwiMXB6W_n9DafMPbDrW-eB24-GHRfMtP8BOymg7NreNmMbI-T1qztKco/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGx7znRNpnDbKmTTYRnHAU1AcSrV3fpTl7OKZNkYI9UPfj5VxCJvmnxAjX_CJtN4jGuZxwY8wrastIVUp-m3_TsZKpGiCWPL-poA1kIwm6Y_CkhWlXABupHtu1-lUxm5LUcv2rH1JJ4s/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }<br /></style><br /><br /><div id="wrap-contact"><br /><div id='form_wrap-contact'><br /><form id="contact-form"><br /><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><br /><div id="ContactForm1_contact-form-error-message"><br /></div><br /><div id="ContactForm1_contact-form-success-message"><br /></div></div></form></div></div></blockquote>6. Langkah terakhir klik Publish.<br /><br /><b>LIVE DEMO:</b><br /><style>#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XYg6ZzS-ojhKfynnra4L5jwYmUkss-d9CrQ9uI1gnsSjnv6tYjSytVNdLFtFc4ZvYJvvu07oBZUYkQAdVoQwiMXB6W_n9DafMPbDrW-eB24-GHRfMtP8BOymg7NreNmMbI-T1qztKco/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGx7znRNpnDbKmTTYRnHAU1AcSrV3fpTl7OKZNkYI9UPfj5VxCJvmnxAjX_CJtN4jGuZxwY8wrastIVUp-m3_TsZKpGiCWPL-poA1kIwm6Y_CkhWlXABupHtu1-lUxm5LUcv2rH1JJ4s/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwclXsjvabkdnNZgkXtGBc5J_RwZw3BfJPHDodcapa-q_SbGtNFC0YqL0V1IUFLlmkRte7zol0_KfVrSHRB89DtandNWlpe34QhPIBEd1dgp-Z2sYafvMMp1qrJ1yXZ8MAQ3Mv0bwio0I/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgw26wHG5Oo8AF_DIjf9_C_fsUxvfIGZ49Lm_iHlgUyLwcoyK7Gu8V8pYAQAE-ddsnVfXpx_SJlAE9axyIxxyDeqip5gX6uBas9NDRuc6Xyuv2S5G6vHZoZFiBbgUG4BKxQcfRatldCw0/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrrSLfzYvJDfB8gb0kKcgkw-bJWGCKlPljdDI6QQXkGs6W9byxLDF0Y5UoFspsJnWLgmCHx0131Fty9mtOAVo0k_XFhslMCzvxpS4pn8NecHH3pjCoMrW_nxwYoTpef4vyQqP91LYD60/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; } </style> <br /><div id="wrap-contact"><div id="form_wrap-contact"><form id="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5">

Sekarang widget contact form sudah terpasang kedalam halaman statis blog, dan selesai sudah tutorial cara memasang Widget Contact Form Efek Animasi Pada Blog.

Widget Contact Form Efek Animasi Pada Blog – untuk membuat halaman kontak pada blog dengan adanya fi…

Cara Membuat Floating Menu Navigation Pada Blog

Tuesday, 13 August 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWF7Z8BQ5amAnpX3Q0QQYYU2AVBqCzelL0F52A797nSTmRNNogem_kZf2lZjgojEJTUK5K2qCJaZdBLqTyJ4JmgIYM7iV7H8iZ05kbiz9xcrumNJrXj6DqyHbZhlc4O2XRys2nkWTq-7M/s1600/floating-bar-navigation-menu.jpg" ><img alt="Floating Menu Navigation Blogger" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWF7Z8BQ5amAnpX3Q0QQYYU2AVBqCzelL0F52A797nSTmRNNogem_kZf2lZjgojEJTUK5K2qCJaZdBLqTyJ4JmgIYM7iV7H8iZ05kbiz9xcrumNJrXj6DqyHbZhlc4O2XRys2nkWTq-7M/s1600/floating-bar-navigation-menu.jpg" title="Cara Membuat Floating Menu Navigation Pada Blog"/></a><b>Cara Membuat Floating Menu Navigation Pada Blog</b> – dari <a href="http://mas-andes.blogspot.com/2013/08/9-style-mega-menu-drop-down-blogger.html" target="_blank" title="9 style mega menu drop down blogger">9 style mega menu</a> sekarang kita beralih lagi dan masih pada tema yang sama mengenai menu navigasi blogger namun dengan gaya yang berbeda. Mengenai floating menu tentu sudah tidak asing lagi di kalangan blogger. Sebelum melangkah lebih jauh ke tutorial saya akan sedikit menjelaskan terlebih dahulu mengenai floating menu navigation pada blog. Floating menu navigation merupakan sebuah navigasi menu yang terpasang didalam blog dan menempati posisi di bagian atas/fixed atau bisa dikatakan letak posisi floating menu adalah menggantikan navbar blogger yang terdapat diatas header blog. Cara memasang floating menu juga cukup mudah dan tidak terlalu rumit, bukan tidak mungkin jika floating menu navigation ini juga akan mempercantik desain blog. Langkah-langkah cara penerapannya kedalam blog pun sangat sederhana, berikut adalah tutorial mengenai <b>Cara Membuat Floating Menu Navigation Pada Blog</b>.<br /><p style="text-align:center;"><a href="http://demosliderblog.blogspot.com/" target="_blank" rel="nofollow" title="Live Demo" class="button">Demo</a></p><br /><br />1. Login ke akun blogger terlebih dahulu.<br />2. Kemudian masuk ke Template dan Edit HTML.<br />3. Copy kode berikut ini lalu paste tepat dibawah kode <span style="color: orange;"><b><body></b></span><br /><blockquote class="tr_bq" style="height: 300px; overflow: auto;"><style><br />#floating-navigation {<br />background: darkgreen;<br />border-bottom: 1px solid #30917b;<br />height: 45px;<br />position: fixed;<br />top: 0;<br />width: 100%;<br />z-index: 9999;<br />box-shadow: 0 5px 8px -1px #00ff00;<br />}<br />.floating-menu-left {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat right top;<br />float: left;<br />margin: 0 0 0 0;<br />height: 46px;<br />}<br />.floating-menu-left li {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat left top;<br />float: left;<br />margin: 0 0 0 0;<br />padding: 0 0 0 2px;<br />}<br />.floating-menu-left li a {<br />font-family: &#39;Raleway&#39;, sans-serif;<br />font-weight: 600;<br />font-size: 13px;<br />line-height: 13px;<br />color: #FFFFFF;<br />text-decoration: none;<br />text-transform: uppercase;<br />}<br />.floating-menu-left li.small-logo a {<br />background: #52e052;<br />display: block;<br />width: 56px;<br />height: 45px;<br />position: relative;<br />}<br />.floating-menu-left li.small-logo a:hover {<br />background: #ffffff;<br />height: 46px;<br />}<br />.floating-menu-left li.small-logo a span.home-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwdzbjnWGelxxY6gGUPSEBwmGmMNb3432Q-lWYx_hRuSddET3qsq05DVjaoea9D8eeZ5XYEgtqUofwBk1stnpIueFIRbAAWdcba-52fz_RbB5TSmCR1pcLMmQsrryQzOhAkEmoaxxU-c/s1600/home-icon.png&quot;) no-repeat;<br />background-position: 0 0;<br />width: 16px;<br />height: 15px;<br />display: block;<br />position: absolute;<br />top: 14px;<br />left: 21px;<br />}<br />.floating-menu-left li.small-logo a:hover span.home-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwdzbjnWGelxxY6gGUPSEBwmGmMNb3432Q-lWYx_hRuSddET3qsq05DVjaoea9D8eeZ5XYEgtqUofwBk1stnpIueFIRbAAWdcba-52fz_RbB5TSmCR1pcLMmQsrryQzOhAkEmoaxxU-c/s1600/home-icon.png&quot;) no-repeat;<br />background-position: -16px 0;<br />width: 16px;<br />height: 15px;<br />display: block;<br />}<br />.floating-menu-left li.categories a {<br />padding: 16px 20px;<br />display: inline-block;<br />height: 13px;<br />position: relative;<br />}<br />.floating-menu-left li.categories a:hover {<br />background: #ffffff;<br />color: #000;<br />}<br />.floating-menu-left li.categories a span.categories-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2GNo-acbUHMoHbFWfq_a3gnloARkBuX4bX72oP6TfPpREj0z-iBubc8IuzRV8sSR4-ihiVgNMbvguQCkZNwotSDY-vYd2ORvicoF3fn07neHBJ0LTDLuWSP4JCjKzlL9WfxuKeiiWQU/s1600/categories-icon.png&quot;) no-repeat;<br />float: left;<br />width: 13px;<br />height: 12px;<br />display: block;<br />margin: 0 8px 0 0;<br />}<br />.floating-menu-left li.categories a:hover span.categories-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2GNo-acbUHMoHbFWfq_a3gnloARkBuX4bX72oP6TfPpREj0z-iBubc8IuzRV8sSR4-ihiVgNMbvguQCkZNwotSDY-vYd2ORvicoF3fn07neHBJ0LTDLuWSP4JCjKzlL9WfxuKeiiWQU/s1600/categories-icon.png&quot;) no-repeat;<br />background-position: -13px 0;<br />}<br />.floating-menu-left li.hot-tags a {<br />padding: 16px 20px;<br />display: inline-block;<br />height: 13px;<br />position: relative;<br />}<br />.floating-menu-left li.hot-tags a:hover {<br />background: #ffffff;<br />color: #000;<br />}<br />.floating-menu-left li.hot-tags a span.tags-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgA4RKdlyovY42nXKVdHqPSQdXoMC-5Dr14eQ7d-WooCYlRzOe3eLVP9GBDi6Q5L3V7Pz4nekTEgNwx6pPnuODgKGTsRpsAFx0Armncg8QpXCs7NIXNi4h97VF329G6u5WY_JMEakWhzc/s1600/tags-icon.png&quot;) no-repeat;<br />float: left;<br />width: 13px;<br />height: 13px;<br />display: block;<br />margin: 0 8px 0 0;<br />}<br />.floating-menu-left li.hot-tags a:hover span.tags-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgA4RKdlyovY42nXKVdHqPSQdXoMC-5Dr14eQ7d-WooCYlRzOe3eLVP9GBDi6Q5L3V7Pz4nekTEgNwx6pPnuODgKGTsRpsAFx0Armncg8QpXCs7NIXNi4h97VF329G6u5WY_JMEakWhzc/s1600/tags-icon.png&quot;) no-repeat;<br />background-position: -13px 0;<br />}<br />.floating-menu-right {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat right top;<br />float: right;<br />margin: 0 0 0 0;<br />}<br />.floating-menu-right li {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat left top;<br />float: left;<br />margin: 0 0 0 0;<br />padding: 0 0 0 2px;<br />}<br />.floating-menu-right li a {<br />font-family: &#39;Raleway&#39;, sans-serif;<br />font-weight: 600;<br />font-size: 13px;<br />line-height: 13px;<br />color: #FFFFFF;<br />text-decoration: none;<br />text-transform: uppercase;<br />}<br />.floating-menu-right li.search a {<br />padding: 16px 20px;<br />display: inline-block;<br />height: 13px;<br />position: relative;<br />}<br />.floating-menu-right li.search a:hover {<br />background: #ffffff;<br />color: #000;<br />}<br />.floating-menu-right li.search a span.search-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SIoOSBjCROUR_cxurtF3jxsgQHX34uIvM0fit-HMkkPgfVlY8K-y8nYblRuEMqK4PRzeTIxsjAnc47613RCfvS5VXDkkjQlXCGhmqvbwiCWTLA87PUTkHJWf-RSZ3KjkutfGBM9E0Ok/s1600/search-icon.png&quot;) no-repeat;<br />float: left;<br />width: 14px;<br />height: 15px;<br />display: block;<br />margin: -1px 8px 0 0;<br />}<br />.floating-menu-right li.search a:hover span.search-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SIoOSBjCROUR_cxurtF3jxsgQHX34uIvM0fit-HMkkPgfVlY8K-y8nYblRuEMqK4PRzeTIxsjAnc47613RCfvS5VXDkkjQlXCGhmqvbwiCWTLA87PUTkHJWf-RSZ3KjkutfGBM9E0Ok/s1600/search-icon.png&quot;) no-repeat;<br />background-position: -14px 0;<br />}<br />.floating-menu-right li.twitter a {<br />padding: 16px 20px;<br />display: inline-block;<br />height: 13px;<br />position: relative;<br />}<br />.floating-menu-right li.twitter a:hover {<br />background: #ffffff;<br />color: #000;<br />}<br />.floating-menu-right li.twitter a span.twitter-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XPmyOI6eKRFqE4MrvOUn4V3lPTj-1WIM1NVKASFrI2uYmOcmseKHRyvXDaOFINQE0xLx6EDQLXUjQ_8Naeg3dkG2bUfTmMcco-sEz3cjDvEQvuKTE9ggHJk23RevwnEY2psEzW-hQ7I/s1600/twitter-icon.png&quot;) no-repeat;<br />float: left;<br />width: 16px;<br />height: 13px;<br />display: block;<br />margin: 0 8px 0 0;<br />}<br />.floating-menu-right li.twitter a:hover span.twitter-icon {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XPmyOI6eKRFqE4MrvOUn4V3lPTj-1WIM1NVKASFrI2uYmOcmseKHRyvXDaOFINQE0xLx6EDQLXUjQ_8Naeg3dkG2bUfTmMcco-sEz3cjDvEQvuKTE9ggHJk23RevwnEY2psEzW-hQ7I/s1600/twitter-icon.png&quot;) no-repeat;<br />background-position: -16px 0;<br />}<br />.floating-menu-right li.share a {<br />padding: 16px 20px;<br />display: inline-block;<br />height: 13px;<br />}<br />.floating-menu-right li.share a:hover {<br />background: #ffffff;<br />color: #000;<br />}<br />#floating-navigation .floating-menu-left li a {<br />cursor: pointer;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu {<br />background: #ffffff;<br />padding: 20px;<br />display: none;<br />position: absolute;<br />top: 45px;<br />height: 0;<br />margin: 0 0 0 0;<br />list-style: none;<br />-webkit-box-shadow: 0px 1px 10px darkgreen;<br />-moz-box-shadow: 0px 1px 10px darkgreen;<br />box-shadow: 0px 1px 10px darkgreen;<br />-webkit-transition: all 0.2s ease-out;<br />-moz-transition: all 0.2s ease-out;<br />-ms-transition: all 0.2s ease-out;<br />-o-transition: all 0.2s ease-out;<br />-webkit-animation: showmenu 0.2s;<br />-moz-animation: showmenu 0.2s;<br />-ms-animation: showmenu 0.2s;<br />-o-animation: showmenu 0.2s;<br />}<br />#floating-navigation .floating-menu-left li:hover .dropdown-menu {<br />display: block;<br />height: auto;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.categories {<br />width: 226px;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.categories ul {<br />margin: 0 0 0 0;<br />list-style: none;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.categories li {<br />background: none;<br />width: 100%;<br />display: block;<br />margin: 0 0 0 0;<br />padding: 0 0 0 0;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.categories li a {<br />font-family: &#39;Raleway&#39;,sans-serif;<br />font-size: 22px;<br />font-weight: 500;<br />color: #666666;<br />display: block;<br />height: auto;<br />line-height: 28px;<br />padding: 5px 0;<br />text-align: left;<br />text-decoration: none;<br />text-transform: none;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.categories li a:hover {<br />color: #000;<br />background: darkgreen;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags {<br />padding: 20px 15px 15px 20px;<br />width: 226px;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul {<br />margin: 0 0 0 0;<br />list-style: none;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li {<br />background: none;<br />float: left;<br />margin: 0 5px 5px 0;<br />padding: 0 0 0 0;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a {<br />background: #000;<br />color: #ffffff;<br />padding: 3px 6px;<br />font-size: 13px;<br />line-height: 21px;<br />height: auto;<br />text-transform: none;<br />}<br />#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a:hover {<br />background: #222222;<br />}<br />#floating-navigation .floating-menu-right li a {<br />cursor: pointer;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu {<br />background: #ffffff;<br />padding: 20px;<br />display: none;<br />position: absolute;<br />top: 45px;<br />height: 0;<br />margin: 0 0 0 0;<br />list-style: none;<br />-webkit-box-shadow: 0px 1px 10px darkgreen;<br />-moz-box-shadow: 0px 1px 10px darkgreen;<br />box-shadow: 0px 1px 10px darkgreen;<br />-webkit-transition: all 0.2s ease-out;<br />-moz-transition: all 0.2s ease-out;<br />-ms-transition: all 0.2s ease-out;<br />-o-transition: all 0.2s ease-out;<br />-webkit-animation: showmenu 0.2s;<br />-moz-animation: showmenu 0.2s;<br />-ms-animation: showmenu 0.2s;<br />-o-animation: showmenu 0.2s;<br />}<br />#floating-navigation .floating-menu-right li:hover .dropdown-menu {<br />display: block;<br />height: auto;<br />}<br />.dropdown-menu.search {<br />width: 323px;<br />}<br />.dropdown-menu.search #searchform {<br />display: block;<br />overflow: hidden;<br />border: 1px solid #dfdfdf;<br />}<br />.dropdown-menu.search #searchform input[type=&quot;text&quot;] {<br />background: none;<br />border: none;<br />width: 270px;<br />}<br />.dropdown-menu.search #searchform input[type=&quot;submit&quot;] {<br />background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT507F1uLpNNpGkSguQn36bZC491Gl1Sfj2hXjRnNRZ7EVTRw0Z0D1OgRdrrOOukcfZbx2Dmw5ONoI-0G5WRnX-w69SHqLH1Vi_bKXBT899Qd8sv35A2VzDVJx4IHJHr5N2XYFaiz7Hc8/s1600/search-icon-form.png&quot;) no-repeat center center;<br />cursor: pointer;<br />width: 14px;<br />height: 15px;<br />margin: 8px 5px 0 0;<br />display: block;<br />float: left;<br />border: none;<br />-webkit-box-shadow: none;<br />-moz-box-shadow: none;<br />box-shadow: none;<br />}<br />.dropdown-menu.search #searchform input[type=&quot;submit&quot;]:hover {<br />filter:alpha(opacity=80);<br />-webkit-opacity: 0.8;<br />-moz-opacity: 0.8;<br />opacity: 0.8;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.social-icons {<br />width: 350px;<br />margin-left: -251px;<br />}<br />.ie #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {<br />width: 350px;<br />margin-left: -250px;<br />}<br />.chrome #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,<br />.opera #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,<br />.safari #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {<br />width: 350px;<br />margin-left: -248px;<br />}<br />.dropdown-menu.social-icons h4 {<br />font-family: &#39;Raleway&#39;, sans-serif;<br />font-weight: 500;<br />font-size: 16px;<br />line-height: 22px;<br />color: #666666;    <br />text-transform: uppercase;<br />margin: 0 0 10px 0;<br />}<br />.dropdown-menu.social-icons .social-icons-section {<br />width: 100%;<br />border-bottom: 1px dotted #dfdfdf;<br />margin: 0 0 20px 0;    <br />padding: 0 0 20px 0;<br />diplay: block;<br />overflow: hidden;<br />}<br />.dropdown-menu.social-icons .social-icons-section ul {<br />display: block;<br />margin: 0 0 0 0;<br />list-style: none;<br />overflow: hidden;    <br />z-index: 99999;<br />}<br />.dropdown-menu.social-icons .social-icons-section ul li {<br />background: none;<br />float: left;<br />margin: 0 20px 0 0;<br />padding: 0 0 0 0;<br />}<br />.dropdown-menu.social-icons .social-icons-section ul li:last-child {<br />margin: 0 0 0 0;<br />}<br />.dropdown-menu.social-icons .social-icons-section ul li a {<br />display: block;<br />width: 40px;<br />height: 40px;<br />padding: 0 0 0 0;<br />}<br />.dropdown-menu.social-icons .facebook-box-section {<br />width: 100%;<br />display: block;<br />overflow: hidden;<br />z-index: 99999;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons {<br />width: 95px;<br />margin-left: -29px;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul {<br />display: block;<br />margin: 0 0 0 0;<br />list-style: none;<br />overflow: hidden;<br />width: 100%;<br />height: auto;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li {<br />background: none;<br />padding: 0 0 0 0;<br />width: 100%;<br />z-index: 99999;<br />display: block;<br />zoom: 1;<br />float: left;<br />overflow: hidden;<br />height: 20px;<br />position: relative;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li iframe {<br />position: absolute;    <br />z-index: 99999;<br />display: block ! important;<br />cursor: default;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a {<br />padding: 0 0 0 0;<br />height: auto;<br />}<br />#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a:hover {<br />opacity: 0.8;<br />-webkit-opacity: 0.8;<br />-moz-opacity: 0.8;<br />opacity: 0.8;<br />}<br /></style><br /><nav id='floating-navigation'><br /><div class='wrapper'><br /><ul class='floating-menu-left'><br /><li class='small-logo'><br /><a href='http://mas-andes.blogspot.com'><span class='home-icon'/></a></li><br /><li class='categories'><br /><a><span class='categories-icon'/>Categories</a><br /><div class='dropdown-menu categories'><br /><div class='categories-menu-section'><br /><ul class='categories-menu'><br /><li><a href='http://mas-andes.blogspot.com' title='Technology'>Technology</a></li><br /><li><a href='http://mas-andes.blogspot.com' title='computer'>Computer</a></li><br /><li><a href='http://mas-andes.blogspot.com' title='Graphics'>Graphics</a></li><br /><li><a href='http://mas-andes.blogspot.com' title='Mobile'>Mobile</a></li><br /><li><a href='http://mas-andes.blogspot.com' title='Social Surfing'>Social Surfing</a></li><br /><li><a href='http://mas-andes.blogspot.com' title='Blogging'>Blogging</a></li><br /></ul><br /></div><br /></div><br /></li><br /><li class='categories'><br /><a href='http://mas-andes.blogspot.com'><span class='categories-icon'/>About Me</a><br /></li>        <br /><li class='hot-tags'><br /><a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Disclaimer</a><br /></li><br /><li class='hot-tags'><br /><a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Sitemap</a><br /></li><br /></ul><br /><ul class='floating-menu-right'><br /><li class='search'><br /><a><span class='search-icon'/>Search</a><br /><div class='dropdown-menu search'><br /><form action='http://mas-andes.blogspot.com' id='searchform' method='get' role='search'><br /><input id='s' name='s' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Type keyword and hit enter...'/><br /><input id='searchsubmit' type='submit' value=''/><br /></form><br /></div><br /></li><br /><li class='twitter'><br /><a><span class='twitter-icon'/>Follow Me</a><br /><div class='dropdown-menu social-icons'><br /><div class='social-icons-section'><br /><h4>Follow On:</h4><br /><ul><br /><li><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr8-6kzHzpn0vMDk9JEpdXd8mnq2uX308pDbB9KgAareLiNzYy6MYyy5g_44sVaByUKpnk2JTueeIOXVjus1T8j0edtPJAgisuWtTjHk6vPHdPjhdQRpalfKBKK712JLHFsCJ-NE79Xwk/s1600/rss_icon@2x.png' width='40'/></a></li><br /><li><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPjUPj2oFXZDqnt9VsLFrovhOkJUtfyEkW0WdcBWQUo6GrU43vKPXx-84ce2d2DEsDt82uP9pWOw7jC6oUhJsdR4ZeKi0W-McTbzBU0OZyeGnYdTJ0p3UnjWeBrcW9iokKSfHqBe2tLs/s1600/email_icon@2x.png' width='40'/></a></li><br /><li><a href='http://twitter.com/<span style="color: red;">rizkyandes</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRThyphenhyphen1_4uy6AXhbhM83Aep4vu1sAer6VOuzUt6iNQB-mji3AmbTPPL1GmKrpnJ9qw-JXLdXSDXuT-fNSc8NMAAt0ehuuSHrD8eqrM62XbHAqtES7zl2LNINrqSREGEFgpwgBKb08hH_g/s1600/twitter_icon@2x.png' width='40'/></a></li><br /><li><a href='https://www.facebook.com/<span style="color: red;">andestyle</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoEadcsmgMY52e_xlyN60HqlZUfaHggMvELh4YVs0NKb_bS0-9zU7-jWrUCv3-znxT82d5VByi8A1qPruuXJhiola1elxptQdGP6ASj1qxLo4sECyL2WBP5YpKPLetClMp0boHGC0pEI/s1600/facebook_icon@2x.png' width='40'/></a></li><br /><li><a href='https://plus.google.com/<span style="color: red;">104093787575230359634</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCUWRXtXbitx-USi3c5P9_tMYGqz9ZVJ9KrH5Sd-A5XJQ3KDG8WiJMG6XHgd8quOu4Rr_OtPX9FlKqYXNUHs2oIEmLXewGV60276KvRC29v3NH1lQTI5pCAivXbn6baSX1f52TzhlQM/s1600/google_icon@2x.png' width='40'/></a></li><br /><li><a href='https://www.pinterest.com/<span style="color: red;">andesrizky</span>'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrqgINfrEC9iknB0XBMVnkSF7F3JDQyk1zb8Whx9TSbiI43ZyPanYrSpdegcTwYH7e1i0dZKceivKWqSLCiyNPBWhO-ka7XfgIrgPV2Msr5pjWZ9b9SYybyot8b9NxPY_DTH11b-pjt4/s1600/pinterest_icon@2x.png' width='40'/></a></li><br /></ul><br /></div><br /><div class='facebook-box-section'><br /><h4>Get Update Via Facebook</h4><br /><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/<span style="color: red;">andestyle</span>&amp;width=350&amp;height=245&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=<span style="color: red;">289293011171736</span>' style='border:none; overflow:hidden; width:350px; height:245px;'/><br /></div><br /></div><br /></li><br /></ul><br /></div><br /></nav></blockquote>Keterangan:<br />Ganti 'http://mas-andes.blogspot.com' dengan link pada blog anda, dan anchor text bisa di sesuaikan.<br />Ganti tulisan yang berwarna <span style="color: red;">merah </span>dengan ID masing-masing.<br /><br />4. Langkah terakhir Simpan Template dan bisa lihat hasilnya.<br /><br />Sampai sini selesai sudah untuk <b>Cara Membuat Floating Menu Navigation Pada Blog</b>. Jika warna background maupun font kurang sesuai dengan warna template blog yang digunakan, silahkan bisa di rubah dengan memodifikasi warna sendiri yang kiranya sesuai dan bisa serasi dengan warna template yang digunakan.

Cara Membuat Floating Menu Navigation Pada Blog – dari 9 style mega menu sekarang kita beralih lagi …