Home / Artikel / Blogging / Tips dan Trik

Cara Membuat Halaman Statis Blogspot Lengkap Dengan Penjelasannya

Post a Comment


Halaman statis merupakan laman tersendri yang tidak termasuk dalam susunan halaman postingan, halaman ini memberikan informasi-informasi penting tentang blog itu sendiri seperti About, Contact, Sitemap, Disclaimer, Privacy Policy dan masih ada yang lainya.

Kali ini kami akan membagi Cara Membuat Halaman Statis Blog Lengkap Dengan Penjelasannya dengan merangkum sesimpel-simpelnya agar mudah di mengerti.


Langkah-langkah Membuat Halaman Statis dan Penjelasannya

Beberapa fungsi dan kesimpulanya sudah kami jelaskan diatas tentang apa maskud dari halaman statis, Laman ini hanya bersisi informasi tentang blog itu sendiri seperti yang kita akan buat kali ini mulai dari pembuatan About, contact, sitemap, disclaimer dan privacy policy dan berberapa penjelanya;

About -


About - merupakan laman tentang profi anda sebagai author atau profil nama blog anda dengan informasih berdirinya blog, visi dan misi , tentang kategori dan apa saja yang ingin anda bagikan kepengunjug tentang diri anda dan blog anda, Silakan ikuti langkah-langkah pembuatan laman  About ini sebagai berikut;
  • Buka blogger arahkan kan kursor ke dashboard pilih menu halaman
  • Pilih buat halaman baru pada dashboard bagian atas sebelah kiri
  • Buatlah judul laman anda ( About )
  • Pilih Compose View menjadi HTML View pada menu tampilan
  • Copy code dibwah ini dan paste di HTML View tadi; 
 <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzKQqpmESDGyA04SfECIo-0GDtJJoAC8kq0gTK4t67bAG7rf3skd8LNHBjCbh_DHPYCS4gO9kcLKm7ndVi544W3oBiNZoXwn2rPvrWcKWRRh_VJ-GUhAx0VdPVHBOHosKxh6Bk57GkBu2y4W4KEGmu7KZIFVSQBWKM5HHL2ASbF-SRNRcnJ44WPaW31Se/s227/logopandututor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="40" data-original-width="227" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzKQqpmESDGyA04SfECIo-0GDtJJoAC8kq0gTK4t67bAG7rf3skd8LNHBjCbh_DHPYCS4gO9kcLKm7ndVi544W3oBiNZoXwn2rPvrWcKWRRh_VJ-GUhAx0VdPVHBOHosKxh6Bk57GkBu2y4W4KEGmu7KZIFVSQBWKM5HHL2ASbF-SRNRcnJ44WPaW31Se/s1600/logopandututor.png" width="227" /></a></div><div style="border-bottom: 2px solid rgb(255, 153, 0); margin-bottom: 5px; padding: 3px; text-align: center;">----Isi About Mu Di Sini----</div>
<div style="text-align: center;">
<a href="https://www.blogger.com/URL" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpadrmenvDK0t7EQrDpjDBq6WmdhVyxfkk_zD-MiwMHhdQSuMlJf8TAXGMvRG39_MMiKQdEZR-XTCfN48cBhMaE-zhfjHMiqEGT0TaS_tSbUNjCjjz7dGS9kmtxbblH2gMxt-spq5V64/s1600/facebook.png" style="border: medium none; position: relative;" /></a>&nbsp;<a href="https://www.blogger.com/URL" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhyphenhyphenRDfmDUWQBj_VmFJ7gPZFPPrq6pW8gldzJHCUal_DYYmMG_2Vrqcrig9xEO5huW33OkthDAw0SY6hvAiocLeiNwWX5931yev6n3Ghrhuo1GmDBkJ9n2YDrIewLLpRR3GkeC_bcN-Kg/s1600/twitter.png" style="border: medium none; position: relative;" /></a>&nbsp;<a href="https://www.blogger.com/URL" target="_blank" title="Instagram"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZVpmvb7Wyog-T5eRZ1MoLJRKGxr7wwy7CrHNwAV2T8f7blEY5Dl6UGyZvlZ6rwNVwIr3bV1wC-jqPq69RZP-Rojo63RpEGLGA7va-92-Oed1CHz85uibTcFDpV0_CaAPK9ooOoPB8qA/s1600/instagram.png" style="border: medium none; position: relative;" /></a>&nbsp;<a href="https://www.blogger.com/URL" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmkNSQfRbJ8GtrJvq0j3pGRasrPaZvFRNMwLQxM6auZTVk-2LNe1O4KKJ2pTBY7hZB3mBB320Wbj0YnnbiCTTKeHPb6a97DKx_BmV5mJwch1ffpQ-HP3LP-MfLZmyuune0vHV8WI_MoY/s1600/youtube.png" style="border: medium none; position: relative;" /></a>&nbsp;<a href="https://www.blogger.com/URL" target="_blank" title="Pinterest"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jpmit6h-kSJRaCuKxVYz15ZfCoSlmN_vZdBKWk18UXbGV2I6czLLG9Dp1vanIuCX9ApoR-ps5ogwtrOAhI8BrPUwhX_Bj25duWu3fAjYwQU4R2e0frPTkRwmLLyvYNlEIZLL0r3kG_0/s1600/pinterest.png" style="border: medium none; position: relative;" /></a></div>
  • Sialakan rubah kembali menjadi Compose View 
  • Ganti gambar dan Tulis About mu disini sesuai keinginan anda
  • Jika sudah semua silakan Publish atau terbitkan

Contact

Contact - adalah laman khusus untuk informasi tentang kontak anda agar pengunjung dapat berkomunikasi langsung, biasanya para blogger pada umumnya membuat laman contact  ini menyertakan alamat Email, alamat lokasi, Nomor telephone dan isi formulir seperti langkah-langka yang kita akan buat ini;

  • Langkah pertama pilih menu halaman pada dashboard
  • Buat halaman baru seperti contoh  about sebelumnya
  • Buatlah Judul terlebih dahulu yaitu Contact 
  • Rubahlah Compose View menjadi HTML View 
  • Copy code dibawah ini dan pastekan di halaman HTML View 
 <p>&nbsp;PANDUTUTOR Berharap para pembaca memberikan saran, Kritik dan Komentarnya tentang blog yang kami buat ini supaya kami bisa mengetahui kekurangan ataupun kelebihan dari artikel yang kami posting</p><p>Untuk saran dan komentar bisa langsung kirim Email dibawah ini;</p><p>Email : pandututor@gmail.com</p><p>Atau Isi Contact Formulir dibawah ini ;<style>
.tb-contact-form-widget{color:#000;padding:0}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message {width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF}
.c-form-name, .c-form-email, .c-form-email-message input:focus{border-color: #E8C291;margin: 5px 0 15px}
.b-social-buttons{list-style-type:none;text-align:center}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px}
.b-social-buttons li a{color:#333;text-decoration:none}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
</p><div class="tb-contact-form-widget">
<form name="contact-form">
<div class="form-name">
<span><i class="fa fa-pencil-square-o"></i> Your Name: </span>
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="form-email">
<span><i class="fa fa-envelope-o"></i> E-mail Address *: </span>
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="form-message">
<span><i class="fa fa-keyboard-o"></i> Message *:</span>
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input class="btn-reset" type="reset" value="Clear" /></div>
</div>
</form>
</div>
<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'] = '3834654276948522349';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3834654276948522349','https://pandututor.blogspot.com/','3834654276948522349');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3834654276948522349', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script><p></p>
  • Ganti Code id (3834654276948522349) dan alamat url (https://pandututor.blogspot.com/') dengan id blog dan url blog anda
  • Publish dan lihat hasilnya.

Sitemap


Sitemap - Adalah halaman sebagai map atau peta yang memberikan informasi tersusun mengenai postingan mulai artikel, tangal/bulan/tahun beserta kategorinya tidak hanya itu sitemap juga penting untuk pengindex halaman blog di google console, Jika sobat blogger ingin tahu bagaimana  Cara Index Halaman blog di Coogle Console. anda bisa baca artiket nya.
Untuk langkah-langkahnya pembuatan sitemap ini sangat muda sekali sialakn ikuti penjelasan dibawah ini;
  • Langkah pertama sama seperti diatas buat halaman baru pada menu halaman
  • Buatlah judul Sitemap sepeti apa yang kita akan buat kali ini
  • Ganti halaman Compose View menjadi HTML View
  • Copy code dibawah ini dan silakan pastekan
<link href='https://cdn.jsdelivr.net/gh/IamArpain/blogger-sitemap-generator-script/Script/arpain-sitemap-css.css' rel='stylesheet' type='text/css'/><br />
<style>
/*

Any Custom Style to change default design

*/
</style><br />
<br />

<div class="arpian-sitemap" id="arpian-sitemap">

<span class="loading">Load…</span>

</div>

<script>

var arpianSitemapData = {
blogUrl: "https://pandututor.blogspot.com/", // Blog URL Place your Blog Url to get Post Data without / at end of URL Example: https://pandututor.blogspot.com/
containerId: "arpian-sitemap", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names you can use another Language Month If your blog is in other Language then English
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 999, // Maximum post results 99999
cpreload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: false, // `false` to sort posts by published date & true for sorting Alphabetically
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<br />
<script src="https://cdn.jsdelivr.net/gh/IamArpain/blogger-sitemap-generator-script/Script/arpain-sitemap.js"></script>
  • Silakan ganti alamat url(https://pandututor.blogspot.com/) yang sudah saya tandahi dengan alamat url blog kalian
  • jika sudah silakan publish dan lihat hasilnya

Disclaimer

Disclaimer - adalah documen ketentuan yang harus diperhatikan oleh pengunjung seperti informasi terkait aturan dan tautan dalam blog yang dilindungi , selain itu agar blog terlihat lebih profesional dan juga salah satu syarat ketentuan jika blog anda ingin didaftarkan ke googe adsense.

Cara membuat Disclaimer ini pada umunya mengunakan Generator dengan bantuan atau bisa disebut juga kerjasama antar pembuat blog atau website ke platform lain secara online, silakan simak langkah-langkah dibawah ini;
  • Silakan kunjungi privacy policy online 
  • Arahkan kursor ke  free generator dan pili menu Disclaimer generator
  • Centang kolom bagian websaite dan klik continue & generate dislaimer
  • Silakan isi form alamat , nama dan centang i'm an individual, klik next step
  • Centang bagian kolom form No dan by email masukan alamat email anda
  • Dan masukan kembali alamat email anda lalu klik generate
  • Silakan copy this to clipboard dan pastekan dihalaman HTML View
  • Buka halaman blogger anda ,buat halaman baru dan buatlah judul disclaimer
  • Ganti halaman Compose View menjadi halaman HTML View 
  • Paste code yang di copy tadi dan publish
  • dan lihat hasilnya.

Privacy Policy

Privacy Policy - juga salah satu aturan kebijakan google adsense agar blog anda memenuhi syarat ketentuan jika ingin dimonetisasi, dalam sebuah blog atau website privacy policy ini juga sangat berpengaruh dalam sebuah mesin pencarian digoogle dan bisa membuat seo blog anda.
Untuk langkah-langkahnya hampir sama seperti membuat Disclaimer dengan platform yang sama yaitu
  • Centang  websaite kemudian klik continue & generate dislaimer
  • Centang Email dan klik Next Step
  • Centang Yes seperti contoh gambar dibawah ini kemudian centang No di kolom bawahnya dan centang google places dan No Dikolom bawahnya jika sudah klik Next step.
  • Masukan email anda dan klik Genetate
  • Copy this to clipboard lalu pastekan dihalaman HTML View pada blogger anda
  • Jangan lupa buat Judul Privacy policy pada seperti contoh-contoh halaman diatas tadi;
  • publish dan lihat hasilnya
Bagaimana sobat blogger medah bukan ?  mungkin itu saja halaman statis pada umumnya digunakan para blogger , untuk variasi tampilan agar menarik lagi sobat blogger bisa mencari referensi pada postingan lainya.

Location: Indonesia

Post a Comment for "Cara Membuat Halaman Statis Blogspot Lengkap Dengan Penjelasannya"