Cara membuat halaman contact diblogger keren lewat handphone(hp)

Hay sobat bloger,kali ini saya mau ngasih tips cara membuat halaman contact dibloger lewat hp.caranya ridak begitu sulit untuk dilakukan..

Langkah" nya sebagai berikut..

• Pertama masuk ke accunt bloger.

Klik halaman

• lalu kalian klik buat halaman baru

• Kemudian kamu kasih judul halaman[contact us],kemudian kamu pilih format html untuk membuat contact us.

• Langkah selanjutnya kamu pilih format contact us [copas kode]dibawah ini

[contoh 1]

<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>

{hasil.👉}

{Contoh 2}            

       

 <div class="enterblogger-logo">

<i class="material-icons md-48">verified_user</i></div>

<style scoped="scoped">

  .enterblogger-logo{text-align:center;}

  @font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');

}

.material-icons {

  font-family: 'Material Icons';j

  font-weight: normal;

  font-style: normal;

  font-size: inherit;

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;

  vertical-align:middle;

  /* Support for all WebKit browsers. */

  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */

  text-rendering: optimizeLegibility;

  /* Support for Firefox. */

  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */

  font-feature-settings: 'liga';

}

  .md-48{font-size: 100px;

    color: #546de5;

    padding: 10px;

    background: #dde3ff;

    border-radius: 100px;}

.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

<form name="contact-form">

<div class="enterblogger-input">

<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label><i class="material-icons">

account_circle

</i> Name</label></div>

<div class="enterblogger-input">

<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />

<span class="highlight"></span>

<span class="bar"></span>

<label><i class="material-icons">

contact_mail

</i> Email</label></div>

<div class="enterblogger-input">

<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>

<span class="highlight"></span>

<span class="bar"></span>

<label><i class="material-icons">

message

</i> Message</label></div>

<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>

<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5311722365786938603';BLOG_attachCsiOnload('');}_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5311722365786938603','//mancingdolar.blogspot.com/','5311722365786938603');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '5311722365786938603', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>       

{hasil contoh 2}

• Ganti tulisan yg berwarna merah dg alamat id punya kamu.langlah selanjutnya kalian pilih opsi yg terletak disebalh kanan atas layar hp km.

Lalu kamu centang opsi comentar pembca(jangan izinkan).untuk deskripsi penelusuran kalian bisa biarkan ksong.jika sudah pilih publikasikan.untuk lgkh selanjutnya kamu bisa copas url/link contact us untuk disimpan dibagian halam blog kalian.sampai disini kamu sudah bisa membuat halaman contact sendiri.silahkan pilih salah satu dari contoh ditas untuk kamu buat dihalaman bloger kamu lewat Hp.

Panduan tips ini saya dptkan dr membaca disebuah artikel,dan saya membagikan ke sobat bloger semoga bermanfaat tips ini

Sampai disini tips cara membuat halman contact diblog lewat Hp,semoga tips ini bisa bermanfaat untuk sobat bloger.