Membuat widget Reader Mode pada BLog

Membuat widget Reader Mode pada Blog - Salam Para Sobat labeltutorialcom , hari ini saya akan berbagi tutorial mengenai membuat widget reader mode pada blog , Reader mode biasanya berfungsi agar pembaca blog bisa membaca lebih fokus pada teks postingan saja. widget ini cocok untuk segala konten blog kecuali blogazine dan foto galleries , karna tujuan widget ini mempermudah pembaca untuk membaca konten blog.

Membuat widget Reader Mode pada BLog

Demo

Demo

Pemasangan Widget Reader Mode

1. Copy  Kode CSS dibawah tepat di atas kode </b:skin> atau </style>

button, button[disabled]:active {
background-color: #516685;
font: bold 11px Tahoma,Verdana,Arial,Sans-Serif;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 15px 10px;
}
button:hover {
background-color: #649CD8;
color: #000;
}

2. Copy Script Berikut tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src="https://googledrive.com/host/0B2KamfXIslknNlFNbzIyYkNhcjQ/fullscreenmode.js"></script>
  <script>
  //<![CDATA[
  postFullScreen({
    titleSource: document.querySelector('.post-title'),
    contentSource: document.querySelector('.post-body'),
    background: "#fff",
    color: "inherit",
    fontSize: "120%",
    padding: 50,
    maxWidth: 750,
    openText: "Reader Mode",
    closeText: "Exit Reader mode",
    appendButtonTo: null,
    beforeInit: null,
    afterInit: null
  });
  //]]>
  </script>

atau anda bisa menaruh kode tersebut di bawah posting seperti berikut :

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> … </b:section>
</b:section>
<!-- Letakkan kode di sini -->

Sekian salam Labeltutorialcom ,


Source : http://www.dte.web.id/2013/12/membuat-posting-layar-penuh.html