Cara Membuat Halaman Guest Post Di Blogger Simple

Credit : Freepik.com

Taukah kamu guest post sangat penting untuk sebuah website agar terlihat profesional dalam hal tertentu seperti seseorang atau anonymous yang ingin menjadi penulis tanpa harus mendaftar

Dalam situasi tersebut kamu harus memiliki form guest post agar penulis bisa menulis secara langsung di website/blog kita sehingga mereka tidak perlu melakukan izin ataupun login terlebih dahulu 

Apa Itu Guest Post ?

Menurut pinhome.id guest post adalah post yang diunggah oleh tamu, bukan pemilik blog. Artinya, Anda akan menjadi penulis tamu dan mengunggah konten ke website milik orang lain guna melakukan promosi.

Dan dalam kesempatan ini saya akan membagikan sebuah script html Guest Post yang bisa dipasang langsung di halaman website/blog kamu 

Taruh script berikut ini di halaman website kamu

<script src="https://dl.dropboxusercontent.com/s/htbxax1y39i5oak/guests.js" type="text/javascript"></script>
<script type="text/javascript">
     bkLib.onDomLoaded(function() {
          var myNicEditor = new nicEditor();
          myNicEditor.setPanel('myNicPanel');
          myNicEditor.addInstance('wysiwyg');
     });
</script>
<div class="form-style-6">
<form id="contactform" method="POST">
<input name="name" placeholder="Your name" type="text" />
<input name="_replyto" placeholder="Your email required" required="" type="email" />
<textarea name="Details" placeholder="This is an optional section. You can tell about yourself and post Your social links and site links here." required="" rows="6" style="width: 50%;"></textarea>
<input name="Post_title" placeholder="Post Title (Required)" style="width: 85%;" type="text" />
<h3>
Write Post below</h3>
<div id="myNicPanel" style="width: 83%;">
</div>
<textarea id="wysiwyg" name="message" rows="20" style="background: white; overflow: scroll; width: 85%;"></textarea>
<input name="tags" placeholder="Enter your tags/label/category (optional)" style="width: 85%;" type="text" />
<input name="_gotcha" style="display: none;" type="text" />
<input name="_next" type="hidden" value="https://www.blogsguru.net/p/thank-you.html" />
<input type="submit" value="Post it for review" />
</form>
<b>

</b> <b>Please, Don't post Spam!, Spams are excluded Automatically.</b></div>
<h2>
Guidelines for guest posting</h2>
<ol>
<li>Guideline no. 1</li>
<li>Guideline no. 2</li>
<li>Guideline no. 3</li>
</ol>
<script>
    var contactform =  document.getElementById('contactform');
    contactform.setAttribute('action', '//formspree.io/youremail@gmail.com');
</script>

masukan kode css ini di atas ]]></b:skin>

 

.form-style-6{
    font: initial;
    margin: 10px auto;
    padding: 16px;
    background: #F7F7F7;
}
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select
{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #555;
    font: initial;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
    box-shadow: 0 0 5px #43D1AF;
    padding: 3%;
    border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3%;
    background: #43D1AF;
    border-bottom: 2px solid #30C29E;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;   
    color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
    background: #2EBC99;
}