Dokumentasi template magzpro yang lengkap dengan fitur menarik

Dokumentasi template magzpro yang lengkap dengan fitur menarik
Halo sob,, kali ini saya merilis template yang bernama magzpro nama ini memiliki makna ynang kuat seperti namanya Magzpro (Profesional Magz) memberikan UI dan UX yang tak tertandingi dan memiliki desain material yang sangat direkomendasikan oleh google.



Desain profesional dan SEO friendly

Template Magzpro ini juga di Desain dan tertarget kepada user, yang dimana saya telah menyesuaikan dari sedemikian rupa antara lain UI dan UX dan mengutamakan kualitas SEO san responsive dan visual yang segar serta tingkat keterbacaan yang tinggi dan rapi.

didesain dengan tampilan ala web-web modern yang memiliki layout flex-box 3 column, dan dimana sebelah kiri digunakan untuk navigasi tengah untuk main dan kanan untuk sidebar, memungkinkan pengguna dapat dengan mudah saat navigasi

Sesuai dengan web anda berjalan sangat cepat dan memberikan UI dan UX yang luar biasa.

Apakah template ini valid schema.org?

template ini sudah di optimasi mulai dari header hingga footer dalam webmaster nanti anda akan mengetahui fitur snipeting yang umum seperti
  • Rating Review Google
  • Breadcrumbs
  • Sitelink searchbox
  • Mobile friendly

Setting dan instalasi

Untuk penyempurnaan dalam setting seperti iklan, link dan yang lainya anda tidak perlu repot-repot untuk masuk ke edit-HTMl untuk melakukan hal tersebut

Anda cukup didepan Tata letak dashboard blogger saja dan lakukan sesuai petunjuk. 

 

Framework yang didukung

Magzpro ini menggunakan library sebagai dari fungsi lainnya, Magzpro ini dibangun dengan HTML5, CSS3 dan Javascript.

seperti dalam daftar dibawah ini adalah jenis library seperti JS dan font icon yang didukung
  1. Google font
  2. jQuery
  3. Google material icon
  4. Slick

Custom 404 mantep

Custom 404 sangat penting untuk menunjang bahwa halaman yang dikunjungi memiliki eror, tidak ditemukan atau dipindahkan.




SEO 100% di optimalkan

Sepenuhnya template magzpro sudah di optimalkan permorma dan SEO karena sangat penting kedua hal tersebut untuk agar mesin pencari memahami situ anda

magzpro blogger template

Kecepatan

Template Magzpro ini bukan hanya UI dan UX yang menggiurkan, template Magzpro ini memiliki kecepatan diatas rata rata yakni memuat halaman hanya dengan 0.6-1.1 detik saja, coba kamu lihat gambar atau video dibawah ini

magzpro blogger template



Ini adalah contoh dari blockquote sentuh disini untuk melihat perubahan blockquote


Typografi

Normal

Striketrought
Largest
Large
Small
Smallest
Mark

Ini adalah blockquote, silahkan anda ketuk disini untuk melihat efek Hover dari blockquote ini

H1 Lorem Ipsum dolir site amet

H2 Lorem Ipsum dolir site amet

H3 Lorem Ipsum dolir site amet


  1. Daftar bernomor 
  2. Daftar bernomor 
  3. Daftar bernomor 
  4. Daftar bernomor 
  • Daftar list
  • Daftar list
  • Daftar list
  • Daftar list


CARA MENGGUNAKAN TOMBOL PADA POSTINGAN



Untuk menggunakan tombol download dan demo pada postingan seperti biasanya, buat/edit entri di dashboard blogger > html mode > lalu tempelkan html tombol download, tombol demo, dan tabel di bawah ini sesuai kebutuhan kamu.

Catatan:

Gantilah LINK (kuning) dengan link kamu

<a href='LINK'><button class="download">Download now</button></a>
<a href='LINK'><button class="demo">Demo now</button></a>

Cara membuat formulir kontak

Untuk cara menerapkan formulir kontak pada template blogger Vision news, anda hanya perlu membuat halaman baru dengan cara:


1. Buka blog dashboard > klik pages (buat halaman baru dengan nama contact, usahakan menulis dengan cepat tanpa space atau titik supaya link sama dengan nama halaman tersebut.


2. Aktifkan mode html dan anda tempelkan html dibawah ini kedalam editor halaman tersebut.

Jangan lupa untuk mengganti semua kode "2394467582286200400" tanpa tanda petik dengan ID blog anda sendiri
<div dir="ltr" style="text-align: left;" trbidi="on">
<form id="kontak" name="contact-form">
<div class="top">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama lengkap" size="30" type="text" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email yang benar" size="30" type="text" /></div>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Tulis pesan" rows="5"></textarea>
<a href="javascript:alert('Kami akan segera membalas pesan anda')"><input class="ripple" id="ContactForm1_contact-form-submit" type="button" value="Send Messages" /></a>
<br />
<div class="bottom">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script>
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = "templatesV1"; window['blogger_blog_id'] = '2394467582286200400'; BLOG_attachCsiOnload('');
}_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2394467582286200400', 'https://www.helpgue.xyz', '2394467582286200400');
_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': '2394467582286200400', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>
</div>

Cara memasang sitemap

Untuk cara menerapkan sitemap pada template blogger Vision news, cara tidak jauh berbeda dengan cara di atas, anda hanya perlu membuat halaman baru dengan cara:


1. Buka blog dashboard > klik pages (buat halaman baru dengan nama contact, usahakan menulis dengan cepat tanpa space atau titik supaya link sama dengan nama halaman tersebut.


2. Aktifkan mode html dan anda tempelkan html dibawah ini kedalam editor halaman tersebut.

<div id="bp_toc" style="max-height: 1800px; overflow: scroll;"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script><style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#E91E63;width:250px;} .toc-header-col2 {padding:10px;background-color:#E91E63;width:75px;} .toc-header-col3 {padding:10px;background-color:#E91E63;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} </style>  



Memasang TOC

Seperti biasanya lakukan menempelkan di html mode dan jangan lupa untuk mengganti misalnya href="#toc1" harus smama dengan <h1 id="toc1" seperti itu bila kurang paham tanyakan kepada cs melalui live chat di kirmanalidris.com


<div class="toc">

  <input class="toctoggle" id="toctoggle" role="button" type="checkbox" /><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel"></label></span></div>

  <ul>

    <li>1 <a href="#toc1" title="Judul Satu">Overview</a></li>

    <li>2 <a href="#toc3" title="Judul Dua">Tombol pada post</a></li>

    <li>3 <a href="#toc2" title="Judul Tiga">Formulir contact</a></li>

    <li>4 <a href="#toc4" title="Judul Empat">Memasang sitemap</a></li>

    <li>5 <a href="#toc5" title="Judul Lima">Halaman about</a>

    </li><li>5 <a href="#toc6" title="Judul Lima">Memasang TOC</a>

    </li><li>5 <a href="#toc7" title="Judul Lima">Memasang produk &amp; jasa</a>

    </li><li>5 <a href="#toc8" title="Judul Lima">Beli template</a>

    </li><li>6 <a href="#comments" title="Judul Enam">Bertanya kepada saya</a></li>

  </ul>

</div>

<br />

<br /></div>


1 komentar:

MAGZPRO

Template blogger yang bersih yang di optimalkan serta valid schema markup dan cepat


Beli harga turun 95rb