Membuat Lightbox Widget Contact Form Blogger

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a><b>Membuat Lightbox Widget Contact Form Blogger</b> – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widget contact form dengan tampilan yang bervariasi. Pada tutorial ini saya akan kembali membahas mengenai widget contact form dengan efek lightbox agar tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul seperti kotak dialog karena ini juga cara yang sama seperti saat membuat modal dialog lainnya. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara <b>Membuat Lightbox Widget Contact Form Blogger</b>.<br /><br />Pertama, masuk ke Edit HTML template blogger lalu cari kode <code>]]></b:skin></code> kemudian pasang kode berikut ini di atasnya.<br /><pre data-codetype="CSS">#contacts-forms{width:100%;margin-bottom:10px}<br />#widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px}<br />#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase}<br />#widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer}<br />#ContactForm1 h2{display:none}<br />#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}<br />#ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px}<br />#ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px}<br />#ContactForm1_contact-form-submit:hover{background:#d00}<br />#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px}<br />#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px}<br />#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}<br />.contact-form-widget p{margin:0}<br />.contact-form-widget{padding:5px}<br />.buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer}<br />.buka-contact:hover{background:#d00}</pre>Selanjutnya cari kode <code></body></code> kemudian pasang kode berikut ini tepat di atasnya.<br /><pre data-codetype="jQuery"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><br /><script type='text/javascript'><br />$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});<br /></script></pre>Selanjutnya cari kode <code><div id='sidebar-wrapper'></code> kemudian pasang kode berikut ini tepat dibawahnya.<pre data-codetype="HTML"><br /><div id='contacts-forms'><br /><div id='widget-contact'><br /><h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3><br /><b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/><br /></div><br /><div id='area-overlay'></div><br /><button class='buka-contact'>Kirim Pesan</button><br /></div></pre>Langkah terakhir Simpan template.<br /><br />Sekarang buka <b>Tata Letak</b>, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik <b>Tambahkan Widget > Gadget Lainnya > Formulir Kontak</b> seperti pada gambar dibawah ini.<br /><a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a>Cukup seperti itu saja untuk <b>Membuat Lightbox Widget Contact Form Blogger</b>. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Membuat Lightbox Widget Contact Form Blogger – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widge...

Read More

Cara Membuat Widget Recent Post By Tag Label

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s1600/Recent-Post-By-Tag-Label.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s550/Recent-Post-By-Tag-Label.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550" /></a><b>Cara Membuat Widget Recent Post By Tag Label</b> – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-masing label. Widget ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbaru pada post homepage berdasarkan label yang digunakan, atau bisa juga untuk diterapkan pada sidebar untuk menampilkan recent post berdasarkan label tertentu. Bahkan bisa juga digunakan untuk menampilkan daftar posting terakhir yang di publish layaknya seperti recent post biasa atau yang umum digunakan, semua tergantung dari pengaturan untuk kebutuhan seperlunya dari blog tersebut. Untuk yang masih bingung penerapannya, berikut uraian tutorialnya untuk memasang widget recent post by tag label baik itu pada sidebar maupun di bagian bawah list post homepage.<br /><br />1. Pertama, copy kode berikut ini lalu taruh di atas kode <code></head></code><br /><pre><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKhedygQ_B4FZpYAvzzDh_zRsAmEtVk1Tn4wKQA9cWkASWphjldYOYyYhq9PdzFUKYO3POWghcSyHJ0KzRlRcwZ2PvS-khC1jMfpWAfi_2OvheoTWmV-kFGlAQE34azrum1l7O6h1t1P5/'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}<br />//]]><br /></script></pre>2. Kemudian copy lagi kode berikut ini dan taruh di atas kode <code>]]></b:skin></code><br /><pre>img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}<br />.taglabel{float:left;width:100%;padding:0;margin:0}<br />ul.taglabel li{padding:5px 0;min-height:73px}</pre>3. Selanjutnya pasang kode berikut ini pada Widget HTML/Javascript.<br /><pre><script type='text/javascript'><br />    var numposts = 5; // Jumlah Post yang di tampilkan<br />    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]<br />    var displaymore = false; // Ganti "true" untuk menampilkan link [More]<br />    var displayseparator = false;<br />    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]<br />    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]<br />    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]<br />    var numchars = 60; // Character Deskripsi yang di tampilkan<br /></script><br /><script type="text/javascript" src="/feeds/posts/default/-/<i><b>NAMA_LABEL</b></i>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Perhatikan pada baris ini:<pre><br /><script type="text/javascript" src="/feeds/posts/default/-/<i><b>NAMA_LABEL</b></i>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre>Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:<pre><br /><script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre></blockquote>Jika ingin memasang di bagian bawah post homepage namun belum terdapat elemen kolom widget, maka buat terlebih dahulu kolom widget untuk tempat penyimpanan kode, langkah-langkah membuatnya seperti berikut ini. Agar lebih simple maka saya bagi menjadi 2 kolom widget yang sejajar atau berdampingan dan 1 kolom widget dibawahnya. Untuk CSSnya sama seperti tadi, taruh diatas <code>]]></b:skin></code><br /><pre>#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{margin-top:-10px!important}<br />#label-left .widget,#label-right .widget,#label-bottom .widget{position:relative;display:block;border:1px solid #aaa;float:left;padding:1%}<br />#label-left .widget,#label-right .widget{width:47%}<br />#label-bottom .widget{width:97.3%}<br />#label-left .widget li,#label-right .widget li,#label-bottom .widget li{font-family:Electrolize,sans-serif!important}<br />#label-left h2,#label-right h2,#label-bottom h2{border-bottom:2px solid #63C4F1;background:#111;font:bold 18px Electrolize,sans-serif;color:#63C4F1;position:relative;display:block;top:-17px;right:-7px;padding:5px}<br />#label-left .widget{margin-right:5px}<br />#label-bottom .widget{margin-top:20px}<br />#label-left h2:before,#label-right h2:before,#label-bottom h2:before{content:&#39;&#39;;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent transparent #111;border-style:solid;border-width:0 0 10px 12px}<br />#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{list-style:none;margin:0;padding:0}<br />#label-left .widget ul li,#label-right .widget ul li,#label-bottom .widget ul li{font-size:13px;font-family:Oswald,sans-serif;border-bottom:1px solid #aaa;margin:0 auto;padding:5px}<br />#label-left .widget li:last-child,#label-right .widget li:last-child,#label-bottom .widget li:last-child{border-bottom:none}</pre><blockquote class="atas">Perhatikan pada baris ini jika ingin menyesuikan lebar widget <pre>#label-left .widget,#label-right .widget{width:47%}<br />#label-bottom .widget{width:97.3%}</pre></blockquote>Selanjutnya cari kode berikut ini:<br /><pre><b:section class='main' id='main' showaddelement='no'><br />....................bla bla bla...................<br /></b:section></pre>Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini: <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550"/></a>Perhatikan kode <code></b:section></code>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut.<br /><pre><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><b:section class='label-left' id='label-left' preferred='yes'/><br /><b:section class='label-right' id='label-right' preferred='yes'/><br /><b:section class='label-bottom' id='label-bottom' preferred='yes'/><br /></b:if></pre>Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s1600/widget-bawah-post.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s320/widget-bawah-post.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s1600/tambah-widget-html.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s320/tambah-widget-html.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Langkah terakhir Simpan dan selesai.

Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-ma...

Read More

Cara Membuat Headline Breaking News di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUhNG6YXOw5XtakvH7mdl9pUM1IVnQCdiNm5jL80d0uTXc79LFAtaWxux-eRHYxOfeJJC8AypXuyNdhUY-nFOGXCovexjNwJcf1YBICu7vEU1dubnymhSznAzeiZwkP2RudOrVT3S5b0/s1600/breaking-news-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Headline Breaking News Blogger" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUhNG6YXOw5XtakvH7mdl9pUM1IVnQCdiNm5jL80d0uTXc79LFAtaWxux-eRHYxOfeJJC8AypXuyNdhUY-nFOGXCovexjNwJcf1YBICu7vEU1dubnymhSznAzeiZwkP2RudOrVT3S5b0/s640/breaking-news-blogger.jpg" title="Cara Membuat Headline Breaking News di Blog" width="540" /></a><b>Cara Membuat Headline Breaking News di Blog</b> – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk <b>Cara Membuat Headline Breaking News di Blog</b>.<br /><br /><a class="button" href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank">Demo</a><br /><br />1. Login pada akun blogger.<br />2. Masuk ke Tata Letak blog dan tambahkan widget.<br />3. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript. <pre><style type='text/css' scoped="scoped"><br />#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: <span style="color: blue;"><b>835px</b></span>; }<br />.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }<br />#ltsposts { float: left; margin-left: 120px; }<br />#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}<br />#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }<br />ul.shsocial { background:#333; float: right; margin: -8px 0; }<br />ul.shsocial li {float:left;list-style: none outside none;border:none;}<br />ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp0RQqSLXxxI4KInKINw4bLkhPGWuF_5leOmMZfL2NirGmoURP99eYB-t5LStx0XmRlyeyeAetqNeXufIIwlbfuYGX9IMqD1UuqKz61I30kCZ6pFVbu5IWsDISM8_H5BKPWJwAnsuWact/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}<br />ul.shsocial li.fb a{ background-position:0 0}<br />ul.shsocial li.gp a{ background-position:-96px 0}<br />ul.shsocial li.rs a{ background-position:-192px 0}<br />ul.shsocial li.tw a{ background-position:-256px 0}<br />ul.shsocial li.fb a:hover{ background-position:0 -32px}<br />ul.shsocial li.gp a:hover{ background-position:-96px -32px}<br />ul.shsocial li.rs a:hover{ background-position:-192px -32px}<br />ul.shsocial li.tw a:hover{ background-position:-256px -32px}<br /></style><br /><br /><div id='news'><span class='titlenews'>Latest Post</span><br /><div id='ltsposts'>Loading...</div><br /><ul class='shsocial'><br /><li class='fb'><br /><a href='http://www.facebook.com/<span style="color: red;">andestyle</span>' rel='nofollow' target='_blank' title='facebook'><br /></a></li><br /><li class='gp'><br /><a href='https://plus.google.com/<span style="color: red;">104093787575230359634</span>' rel='nofollow' target='_blank' title='googleplus'><br /></a></li><br /><li class='tw'><br /><a href='http://twitter.com/<span style="color: red;">rizkyandes</span>' rel='nofollow' target='_blank' title='twitter'><br /></a></li><br /><li class='rs'><br /><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>' rel='nofollow' target='_blank' title='rss'><br /></a></li><br /></ul><br /></div><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br />var url_blog = '<b>http://mas-andes.blogspot.com</b>', // Replace With your Blog Url<br />numpostx     = 20; // Maximum Post<br />$.ajax({<br />    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',<br />    type: 'get',<br />    dataType: "jsonp",<br />    success: function(data) {<br />        var posturl, posttitle, skeleton = '',<br />            entry = data.feed.entry;<br />        if (entry !== undefined) {<br />            skeleton = "<ul>";<br />        for (var i = 0; i < entry.length; i++) {<br />                for (var j=0; j < entry[i].link.length; j++)<br />                {<br />                     if (entry[i].link[j].rel == "alternate")<br />                        {<br />                            posturl = entry[i].link[j].href;<br />                            break;<br />                         }<br />                }                <br />            posttitle = entry[i].title.$t;<br />            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';<br />        }<br />            skeleton += '</ul>';<br />            $('#ltsposts').html(skeleton);<br />            function tick(){<br />            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });<br />            }<br />        setInterval(function(){ tick () }, 5000);<br />        } else {<br />            $('#ltsposts').html('<span>No result!</span>');<br />        }<br />    },<br />    error: function() {<br />            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');<br />       }<br />});<br />});<br />//]]><br /></script></pre>Keterangan:<br />Tulisan warna <span style="color: blue;">biru </span>ganti dengan lebar blog anda.<br />Ganti <b>http://mas-andes.blogspot.com </b>dengan URL alamat blog anda.<br />Tulisan yang berwarna <span style="color: red;">merah </span>ganti dengan ID masing-masing.<br /><br />4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.<br /><br />Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.

Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget ...

Read More

Membuat Tombol Share di Bawah Posting Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTP6uGGQe5f46qYbfy69IgzUz4CKNavoC9y1YT4x3bvNrSlq82AcJVpDvIkzQA5r4kaaCSF8fiCow-UJrDEzftpxnVFrqY-SIZkKB7OgxHFl7JrbHQr7n-T57_ZbiSd21a4tvtM4DTnU/s1600/tombol-share-blogger-valid-HTML5.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Tombol Share Blogger Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTP6uGGQe5f46qYbfy69IgzUz4CKNavoC9y1YT4x3bvNrSlq82AcJVpDvIkzQA5r4kaaCSF8fiCow-UJrDEzftpxnVFrqY-SIZkKB7OgxHFl7JrbHQr7n-T57_ZbiSd21a4tvtM4DTnU/s540/tombol-share-blogger-valid-HTML5.gif" title="Membuat Tombol Share di Bawah Posting Blog" width="540" /></a><b>Membuat Tombol Share di Bawah Posting Blog</b> – tentu sudah tidak asing lagi dengan tombol share yang biasa terlihat di bawah posting blog, fungsi dari tombol share tersebut agar lebih memudahkan visitor untuk membagikan artikel yang sudah kita posting ke dalam beberapa media sosial seperti facebok, twitter, google+, lintasme dan jejaring sosial lainnya. Tanpa memasang tombol share ini sebenarnya blogger juga sudah menyediakan widget tombol share, namun apa daya karena tombol share default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita modifikasi agar tombol share yang terletak di bawah posting blog agar bisa lolos dari validator W3C dan bisa valid HTML5. Untuk membuat tombol share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya seperti yang tertera pada gambar di atas. Untuk itu berikut tutorial untuk <b>Membuat Tombol Share di Bawah Posting Blog</b> agar valid HTML5 dan full color.<br /><br />1. Login ke akun blogger.<br />2. Masuk ke Template lalu pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}<br />.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}<br />.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}<br />.fcbok { background: #3B5999; }<br />.twitt { background: #01BBF6; }<br />.gplus { background: #D54135; }<br />.digg { background: #5b88af; }<br />.lkdin { background: #005a87; }<br />.tchno { background: #008000; }<br />.ltsme { background: #fb8938; }</pre>4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code><pre><div class='widgetshare'><br />Share artikel ke: <br /><a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <br /><a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <br /><a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a><br /><a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a><br /><a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a><br /><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a><br /><script><br />//<![CDATA[<br />var uri = window.location.href;<br />var ttle = document.title;<br />document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");<br />//]]><br /></script><br /></div></pre>5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya.<br /><br />Demikian tutorial untuk <b>Membuat Tombol Share di Bawah Posting Blog</b>. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <code><data:post.body/></code> dan <code><div class='post-footer'></code> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.

Membuat Tombol Share di Bawah Posting Blog – tentu sudah tidak asing lagi dengan tombol share yang biasa terlihat di bawah posting blog, fu...

Read More

Memasang Widget Contact Form di Halaman Statis Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9laeFmDhvOQMfehM0DSBRRrdu4kRnjw45jz9gUnqSB6z9l1Vju1KMvmEONKVJjpHs0_bIpPYCWApQMFT6ITv2W0FPuh8JDQBeK3rQMepKlEQIQsjJ04DrUqevBBH-7D9idC6hdhtvXo/s1600/widget-contact-form-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Contact Form Halaman Statis Blog" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9laeFmDhvOQMfehM0DSBRRrdu4kRnjw45jz9gUnqSB6z9l1Vju1KMvmEONKVJjpHs0_bIpPYCWApQMFT6ITv2W0FPuh8JDQBeK3rQMepKlEQIQsjJ04DrUqevBBH-7D9idC6hdhtvXo/s540/widget-contact-form-blogger.jpg" title="Memasang Widget Contact Form di Halaman Statis Blog" width="540" /></a><b>Memasang Widget Contact Form di Halaman Statis Blog</b> – seperti yang kita tahu bahwa widget contact form memanglah penting untuk sebuah blog sebagai piranti komunikasi yang bersifat privat. Kaitannya dengan widget contact form pada beberapa waktu lalu juga sudah pernah kita bahas dimana pada tutorial tersebut terdapat bermacam widget contact form blogger official yang sudah di modifikasi juga. Untuk melihat bentuk dari widget contact tersebut bisa langsung menuju halaman artikelnya pada tutorial yang berjudul <a href="http://mas-andes.blogspot.com/2013/08/custom-widget-contact-form-blogger.html" target="_blank" title="Custom Widget Contact Form Pada Blog">Custom Widget Contact Form Pada Blog</a> dan <a href="http://mas-andes.blogspot.com/2013/08/accordion-widget-contact-form-blogger.html" target="_blank" title="Widget Contact Form Efek Accordion Pada Blog">Widget Contact Form Efek Accordion Pada Blog</a> serta <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 Efek Animasi Pada Blog</a>. Namun apabila ingin membuat contact widget dengan tampilan yang sederhana saja bisa mengikuti langkah-langkah dibawah. Cara penerapannya kedalam halaman statis blog langkah-langkahnya sama seperti pada tutorial sebelumnya, untuk membuat widget contact form supaya bisa berfungsi dengan baik harus terlebih dahulu menambahkan contact widget yang asli (default widget contact form blogger) kemudian kita bisa menyembunyikan atau tidak menampilkan widget contact tersebut dengan menambahkan kode CSS lalu kemudian kita bisa merubahnya menjadi tampilan contact widget yang lebih menarik. Berikut langkah-langkah cara <b>Memasang Widget Contact Form di Halaman Statis Blog</b>.<br /><br />1. Login akun blogger.<br />2. Masuk Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.<br />3. Selanjutnya klik Template lalu Edit HTML untuk menyembunyikan widget lama dan mengganti dengan tampilan widget baru.<br />4. Copy kode berikut ini lalu paste tepat diatas kode <code>]]></b:skin></code> kemudian Simpan template. <pre>#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }<br />#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }<br />#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }<br />#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }<br />#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }<br />#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }<br />#ContactForm1_contact-form-submit:hover { background:#ff0000; }<br />#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }<br />#ContactForm1 {display:none}</pre>5. Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada halaman statis HTML.<pre><div id="formcontact"><br /><h3>Contact Form</h3><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: 250px; 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></pre>6. Langkah terakhir klik Publish.<br /><br />Selesai sudah dan demikian tutorial untuk menerapkan widget contact form ke dalam halaman statis blog.

Memasang Widget Contact Form di Halaman Statis Blog – seperti yang kita tahu bahwa widget contact form memanglah penting untuk sebuah blog ...

Read More

Modifikasi Widget Recent Post Efek Tooltip Pada Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbD8xlKp6KcJ1T0mphrtLbKjsx8RxGj213CTGD1JKgzLbx8AYdBkGOq4ZZZhooph-C0G7dM3YcKaH1H_awHA_Enpf80-HznfPGzXyg-Fi0yN8rmc1i-toorMx79RhDS0oI7oETFlpyFA/s1600/recent-post-tooltip-thumbnail.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Recent Post Tooltip Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbD8xlKp6KcJ1T0mphrtLbKjsx8RxGj213CTGD1JKgzLbx8AYdBkGOq4ZZZhooph-C0G7dM3YcKaH1H_awHA_Enpf80-HznfPGzXyg-Fi0yN8rmc1i-toorMx79RhDS0oI7oETFlpyFA/s540/recent-post-tooltip-thumbnail.gif" title="Modifikasi Widget Recent Post Efek Tooltip Pada Blog" width="540" /></a><b>Modifikasi Widget Recent Post Efek Tooltip Pada Blog</b> – pada tutorial kali ini kita akan kembali membahas kaitannya mengenai efek tooltip pada widget blog seperti halnya efek yang nampak pada <a href="http://mas-andes.blogspot.com/2013/09/modifikasi-efek-tooltip-widget-popular_29.html" target="_blank" title="widget popular post tooltip">widget popular post tooltip</a> yang sudah pernah saya share pada tutorial sebelumnya. Widget recent post atau artikel terbaru ini secara default hanya menampilkan thumbnail image yang berukuran kecil dan akan menampilkan ringkasan atau cuplikan dari isi artikel terbaru tersebut saat tersentuh kursor atau hover. Kaitannya dengan desain blog, terdapat banyak sekali widget recent post atau artikel terbaru dengan berbagai style efek, dan salah satunya pada widget recent post pada tutorial dibawah. Untuk membuat blog agar semenarik mungkin memang banyak kode yang perlu di gunakan dan dengan manipulasi kode script itulah bisa dihasilkan desain blog yang maksimal. Dari pada terlalu lama membayangkan atau hanya melihat gambar di atas, berikut tutorial untuk <b>Modifikasi Widget Recent Post Efek Tooltip Pada Blog</b> agar lebih tahu hasilnya secara jelas.<br /><br />1. Login ke akun blogger.<br />2. Selanjutnya pada template pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>#post-gallery { width:304px; margin:0px auto; font:11px verdana; color:#494848; padding:8px; background-color:darkgreen; }<br />#post-gallery h2 { font:20px Arial; font-weight: bold; color:darkgreen; border:1px solid #00ff00; text-transform:uppercase; margin:2px 2px 2px; padding:7px 14px; background-color:#52e052; text-align: center; }<br />#post-gallery .rp-item { float:left; display:inline; position:relative; margin:2px; padding:0px; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4xDjZDPdlJCuv0wB4AqSHB8A96mkPt2mHRr3l83Xok8pUBgE0dsVRj075wUHbeQHdst4BtBvDro9RZVoWr-zGx6DAcZTSOTRm5mxdEnQX33P-J_Q2zi16MbB2PE2JzEIg836ebEFBxg/h120/loading.gif') no-repeat 50% 50%; width:72px; height:72px; }<br />#post-gallery .rp-item img { width:72px; height:72px; margin:0px !important; padding:0px !important; background:transparent !important; display:none; }<br />#post-gallery .rp-item .rp-child { position:relative; top:10%!important; left:10%!important; z-index:1000; width:200px; background-color:#222; border:2px solid #555; box-shadow:5px 5px 5px #52e052; color:#fff; padding:10px 15px; overflow:hidden; word-wrap:break-word; display:none; opacity: 0.9; }<br />#post-gallery .rp-item .rp-child h4 { font-size:12px; margin:0px 0px 5px; color:#52e052; }<br />#post-gallery .rp-item:hover .hidden {display:block;}</pre>4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.<pre><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/recent-post-gallery.js" type="text/javascript"></script><br /><script type="text/javascript"><br />var rpTitle     = "Recent Post",       // Judul Widget<br />numposts    = 8,      // Post yang di tampilkan<br />numchar     = 200,      // Karakter pada deskripsi tooltip<br />rcFadeSpeed = 600,<br />pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPN-rHPMnsUglgQFGpV2IKIQFFVa8ZLZPrx1gInURFh2dlEJ7PYegsoHWCWWLXxkgnD6eYdmcMwwGBGt6LnnJk6oitiG5p5BsAaim5vzOv_i31UOsOo6-fr8keQBKQMJb07GHjJCmrTvI/h120/no-image.png",<br />blogURL     = "http://mas-andes.blogspot.com";       // URL Blog anda<br /></script></pre>Keterangan:<br />Ganti <b>http://mas-andes.blogspot.com</b> dengan URL blog anda.<br /><br />5. Terakhir tinggal klik Simpan dan lihat hasilnya.<br /><br />Demikian mengenai tata cara untuk <b>Modifikasi Widget Recent Post Efek Tooltip Pada Blog</b> dengan sederhana.

Modifikasi Widget Recent Post Efek Tooltip Pada Blog – pada tutorial kali ini kita akan kembali membahas kaitannya mengenai efek tooltip pa...

Read More

Modifikasi Widget Follower Blog Valid HTML5

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH80RWQ0m3ZR5kbdWnnxh0333i21pfi-SIcm4DBjaViaPwhgG6LxmK6WqvuFAeHkoOvjExXboGS_UxdSe1KjSsFIhdFBeDlo678O8fxRcwKJGBbZOaG72qY_7s2O44o0o71VNTRHg3LM/s1600/widget-follower-blog-valid-html5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Follower Blog Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOH80RWQ0m3ZR5kbdWnnxh0333i21pfi-SIcm4DBjaViaPwhgG6LxmK6WqvuFAeHkoOvjExXboGS_UxdSe1KjSsFIhdFBeDlo678O8fxRcwKJGBbZOaG72qY_7s2O44o0o71VNTRHg3LM/s540/widget-follower-blog-valid-html5.jpg" title="Modifikasi Widget Follower Blog Valid HTML5" width="540" /></a><b>Modifikasi Widget Follower Blog Valid HTML5</b> – untuk membuat widget follower blog agar valid HTML5 sebenarnya tidak susah dan bisa di bilang simple. Namun pada tutorial ini bukan hanya sekedar untuk valid HTML5 saja yang akan saya bahas, melainkan untuk memodifikasi tampilan widget follower blog agar menjadi lebih menarik dan terlihat rapi dengan kondisi valid HTML5. Custom widget follower ini nantinya tidak berbeda pada tutorial yang sudah pernah saya bahas sebelumnya yakni tepatnya pada artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-facebook-like-box-pada.html" target="_blank" title="modifikasi widget like box facebook">modifikasi widget like box facebook</a> dan <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-widget-google-badge.html" target="_blank" title="modifikasi widget google+ follower">modifikasi widget google+ follower</a>. Seperti itulah nantinya hasil dari modifikasi widget follower blog, cukup menarik bukan. Namun cara penerapannya ke dalam blog agak sedikit berbeda dengan modifikasi widget facebook like box dan modifikasi widget google+ follower tersebut, karena pada kedua widget tersebut seluruh kodenya baik itu CSS maupun HTML langsung di terapkan kedalam widget oleh sebab itulah yang menyebabkan munculnya beberapa jumlah error pada saat validasi HTML5 di W3C. Maka dari itu untuk modifikasi widget follower blog agar valid HTML5 maka perlu memisahkan CSS dan menaruhnya kedalam template blog. Untuk lebih jelasnya, berikut tutorial untuk <b>Modifikasi Widget Follower Blog Valid HTML5</b>.<br /><br />1. Login ke akun blogger.<br />2. Selanjutnya pada template pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>.widget-follower { width: 280px; height: 140px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 0px 15px 0px; margin:0px auto 10px auto; } <br />.widget-follower,.widget-follower:before,.widget-follower:after { background: #E9FBE9; border: 1px solid #52E052; } <br />.widget-follower:before,.widget-follower:after { position: absolute; content: &quot;&quot;; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } <br />.widget-follower:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }</pre>4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.<pre><div class="widget-follower"><br /><div style="height:150px;overflow:hidden;"><br /><script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /><div id="<span style="color: red;">div-7w5ths5ahnit</span>"></div><br /><script type="text/javascript"><br />var skin = {};<br />skin['BORDER_COLOR'] = '#52e052';<br />skin['ENDCAP_BG_COLOR'] = '#52e052';<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'] = '#e9fbe9';<br />skin['CONTENT_TEXT_COLOR'] = '#000000';<br />skin['CONTENT_SECONDARY_LINK_COLOR'] = '#000000';<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 /></div><br /></div></pre>Keterangan:<br />Ganti tulisan warna <span style="color: red;">merah </span>dengan ID widget follower blog anda.<br /><br />5. Terakhir tinggal klik Simpan dan lihat hasilnya.<br /><br />Dari tutorial diatas maka widget follower blog sudah terlihat cukup menarik dan pastinya valid HTML5. Namun apabila ingin membuat ketiga widget tersebut tampil berurutan pada satu ruang widget, antara widget follower blog, widget google+ follower dan widget facebook like box maka anda perlu menambahkan sedikit kode lagi kemudian menaruhnya tepat di bawahnya kode point 4 di atas. Agar lebih mudah copy saja kode berikut ini, lalu ganti ID masing-masing dan taruh di bawah kode widget follower point 4 di atas.<pre><div class="widget-follower" style="height:100px;"><br /><div style="height:150px;overflow:hidden;"><br /><div class="g-person" data-href="//plus.google.com/<span style="color: red;">104093787575230359634</span>" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div><br /><script type="text/javascript"><br />(function() {<br />var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;<br />po.src = 'https://apis.google.com/js/plusone.js';<br />var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);<br />})();<br /></script><br /></div><br /></div><br /><br /><div class="widget-follower" style="height:145px;"><br /><div style="height:150px;overflow:hidden;"><br /><div class="fb-like-box" data-href="http://www.facebook.com/<span style="color: red;">andestyle</span>" data-width="292" data-show-faces="true" data-stream="false" data-header="false" data-show_border="false"></div> <br /></div><br /></div></pre>Dari kode di atas, widget facebook like box juga sudah valid HTML5. Demikian akhir dari tutorial sederhana untuk <b>Modifikasi Widget Follower Blog Valid HTML5</b>, sekian dan selamat mencoba karena hal tersusah adalah salah satu hal yang tidak pernah dicoba.

Modifikasi Widget Follower Blog Valid HTML5 – untuk membuat widget follower blog agar valid HTML5 sebenarnya tidak susah dan bisa di bilang...

Read More

Modifikasi Efek Tooltip Widget Popular Post Blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpIevcZybHJIy_3oWPfK-Y4X-YtFfyDFFoCXGBaiJl2mVu-UNFJm8mIiiPXLZ1X3Iaau39-pwQLTGhWra2c9ctjGWAxOroo0uOskSTkoTDWXatUwxrKJvxZVPVGlTDy4Vs8vvsqn8ntc/s1600/popular-post-tooltip-hover.jpg"><img alt="Efek Tooltip Widget Popular Post Blogger" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpIevcZybHJIy_3oWPfK-Y4X-YtFfyDFFoCXGBaiJl2mVu-UNFJm8mIiiPXLZ1X3Iaau39-pwQLTGhWra2c9ctjGWAxOroo0uOskSTkoTDWXatUwxrKJvxZVPVGlTDy4Vs8vvsqn8ntc/s320/popular-post-tooltip-hover.jpg" title="Modifikasi Efek Tooltip Widget Popular Post Blogger" width="550" /></a><b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b> – setelah pada tutorial sebelumnya membahas mengenai widget related post atau artikel terkait, maka kini beralih ke widget popular post atau artikel populer. Tentu sudah tidak asing lagi dengan istilah tooltip, sebuah teks box yang muncul pada sebuah link saat hover atau tersentuh kursor. Tooltip muncul secara otomatis saat pointer di arahkan ke link tanpa harus di klik terlebih dahulu. Untuk membuat efek tooltip pada widget popular post blogger caranya cukup mudah. Pertama kali hanya perlu menambahkan atau pastikan terlebih dahulu blog sudah terpasang widget popular post default blogger. Setelah itu kemudian baru modifikasi widget popular post menggunakan CSS untuk menciptakan tooltip hover. Berikut langkah-langkahnya untuk <b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b>.<br /><br />1. Login ke akun blogger.<br />2. Masuk ke Edit HTML template.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre><br />.PopularPosts .widget-content ul li{padding:0;position:relative;border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222; color: #fff; float: left;list-style: none;margin-left: -15px !important;padding: 5px !important; height: 30px;}<br />.item-snippet { font-size: 90%; line-height: 1.2em; position: absolute; width: 230px; background-color: #222; padding: 7px; border: 2px solid #333; color: #fff; box-shadow: 1px 1px 6px 1px #52E052; z-index: 2; left: 300px; top: 60%; height: 4.5em!important; visibility: hidden; opacity: 0; transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}<br />.PopularPosts .widget-content ul li:hover .item-snippet{z-index:999;left:60px;opacity:1;visibility:visible}<br />.PopularPosts img{width:30px;height:30px}<br />.PopularPosts .item-title{font: Verdana 14px bold;}</pre>4. Simpan template lalu lihat hasilnya.<br /><br />Demikian tutorial sederhana untuk <b>Modifikasi Efek Tooltip Widget Popular Post Blogger</b>, sangat mudah tentu dalam penerapannya.

Modifikasi Efek Tooltip Widget Popular Post Blogger – setelah pada tutorial sebelumnya membahas mengenai widget related post atau artikel t...

Read More

Memasang Widget Social Subscribe Minimalis With CSS

<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 subscribe, dan pada tutorial kali ini kemba...

Read More

Cara Membuat Author Box Dibawah Posting Blogger

<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 posting sebelumnya pada tutorial yang berj...

Read More

Membuat Author Box Dibawah Posting Blog

<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 mengunjungi suatu blog dan terdapat kotak...

Read More

Membuat Form Email Subscribe Dibawah Posting Blog

<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 email subcribe di dalam template blog....

Read More

Membuat Widget Follower Accordion Pada Blog

<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 coding, karena memang coding yang melata...

Read More

Memasang Widget Contact Form Accordion Pada Blog

<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 sebelumnya mengenai cara memasang dan memodif...

Read More