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.
1. Copy Kode CSS dibawah tepat di atas kode </b:skin> atau </style>
2. Copy Script Berikut tepat diatas kode </body>
atau anda bisa menaruh kode tersebut di bawah posting seperti berikut :
Sekian salam Labeltutorialcom ,
Source : http://www.dte.web.id/2013/12/membuat-posting-layar-penuh.html
 |
| Membuat widget Reader Mode pada BLog |
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 == "item"'>
<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
