KARINAMAGZ Fast and Responsive Blogger Template 2017

July 09, 2017 Add Comment
KARINAMAGZ Fast and Responsive Blogger Template 2017


KARINAMAGZ Fast and Responsive Blogger Template 2017 adalah template yang saya buat dengan style Magazine  !

Di dalam template tersedia tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar hanya tersedia DISQUS, jika Anda ingin mencobanya silahkan mencoba dan download pada link yang tertera dibawah .  

Berikut fitur yang ada di dalam template " KARINAMAGZ " ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button Premium -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

G-FRENZY Fast and Responsive Blogger Template 2017

June 23, 2017 Add Comment

G-FRENZY Fast and Responsive Blogger Template 2017

G-FRENZY Fast and Responsive Blogger Template 2017 adalah template yang saya buat dengan model GRID dan akan saya bagikan secara GRATIS !

Di dalam template tersedia tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar hanya tersedia Blogger ( versi premium tersedian sistem komentar 3 in 1 , DISQUS,BLOGGER,Facebook ), jika Anda ingin mencobanya silahkan download versi gratis-nya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).  

Berikut fitur yang ada di dalam template " G-FRENZY " ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS+Blogger True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Syahnia Fast and Responsive Blogger Template 2017

June 22, 2017 2 Comments
Syahnia Fast and Responsive Blogger Template 2017


Syahnia Fast and Responsive Blogger Template 2017 adalah template yang saya bagikan secara GRATIS dan juga tersedia juga dalam versi PREMIUM

Di dalam template tersedia tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar tersedia juga pilihan system komentar diantaranya Facebook, DISQUS dan Blogger, jika Anda ingin mencobanya silahkan download versi gratisnya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).  

Berikut fitur yang ada di dalam template " Syahnia " ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS+Blogger True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

DHEMI Fast Responsive Blogger Template 2017

June 12, 2017 Add Comment
Dhemi Template Free 2017

Free Version

DHEMI Fast and Responsive Blogger Template 2017– kira kira beberapa bulan yang lalu saya juga share Denada Fast and Responsive Blogger Template . Dan DHEMI Fast and Responsive Blogger Template adalah template yang saya bagikan secara GRATIS dan juga ada versi PREMIUM-nya dengan design yang sederhana namun tidak mengurangi kesan elegan pada template tersebut.


Dhemi Template Premium 2017

Premium Version

Di dalam template ini juga saya sertakan tombol Whatsapp share yang memungkinkan penggunjung Anda dapat dengan mudah membagikan posting artikel yang langsung terhubung ke aplikasi Whatsapp. Untuk kolom komentar tersedia juga pilihan system komentar diantaranya DISQUS dan Blogger, jika Anda ingin mencobanya silahkan download versi gratisnya, atau anda juga dapat membeli dengan ketentuan yaitu tanpa ada link credit yang menyertai ( encriypt link designer-nya ).   


Berikut fitur yang ada di dalam template DHEMI ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button Premium Only -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS+Blogger True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan

May 10, 2017 Add Comment
Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan

Next Previous navigasi halaman bawaan atau defaut-nya Blogger pada umumnya memiliki tampilan kurang menarik, dengan format standart Previous – Home – Next. Namun Anda bisa mengganti next previous tersebut dengan judul artikel. Tidak hanya sekedar terlihat menarik namun bisa menjadi salah satu cara untuk meningkatkan pageview blog karena pengunjung bisa langsung mengetahui artikel halaman sebelum atau sesudahnya dari halaman yang sedang dibacanya. Jika tertarik tentu pengunjung akan menuju halaman selanjutnya atau sebelumnya.

Template default Blogger memiliki custom pager yang sebelumnya harus kita hapus terlebih dahulu sebelum menggantinya dengan judul posting.

Jika Anda tertarik untuk mencoba mengganti next previous navigasi halaman dengan judul postingan, silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan BACKUP template Anda terlebih dahulu sebelum melakukan perubahan pada kode template Blog.

2. Silahkan Anda cari kode bawaan custom pager pada template Anda, biasanya seperti ini atau mirip :

 #blog-pager-newer-link{float:left;font-size:100%;border-right:1px solid #eee;}
#blog-pager-older-link{float:right;font-size:100%;border-left:1px solid #eee;}
.blog-pager,#blog-pager{clear:both;text-align:center;border:1px solid #eee;}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#666;transition:all .3s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#1F5CA8}
a.blog-pager-older-link,a.blog-pager-newer-link,a.home-link{display:block;padding:8px 20px;transition:all .3s ease-in-out;}
a.home-link{font-size:140%;}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover,a.home-box:hover,.mobile-desktop-link a.home-link:hover{color:#1F5CA8;}
.mobile-desktop-link a.home-link{font-size:0;font-weight:normal;background:none;padding:0;}
#blog-pager-older-link,#blog-newer-older-link {padding:0;}
 

Silahkan Anda hapus, kemudian tekan Save. Langkah diatas adalah menghapus kode Custom Pager bawaan Template.

Cara Mengganti Next Previous Halaman Navigasi Dengan Judul Postingan


1. Langkah Pertama

Silahkan simpan kode CSS di bawah ini di atas  kode </head> atau dibawah kode <style type='text/css'>. Jika sebelumnya Anda pernah memodifikasi tombol next previous halaman postingan, silahkan hapus kode CSS untuk memodifikasi next previous tersebut.

 
/* CSS Halaman Navigasi */
.halaman {background:#ecf0f1;padding:10px 0;margin:20px 0 auto;}
.halaman-kiri{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}
.halaman-kanan{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#ddd!important;}
.halaman-kiri a,.halaman-kanan a{color:#999;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#666!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family: 'Roboto Condensed',Helvetica,Arial,sans-serif;font-weight:400;background:none;text-decoration:none}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.pager-title-left{font-family: 'Poppins',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left;padding:0 0 0 15px;}
#blog-pager-older-link{float:right;padding:0 15px 0 0;}
.blog-pager,#blog-pager{clear:both;text-align:center}
 

2. Langkah Kedua
Silahkan cari kode seperti di bawah ini

 <b:includable id='nextprev'>
..............................
..............................
..............................
</b:includable> 

Jika ketemu, silahkan ganti sehingga tampak  seperti di bawah ini.

 <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><i class='fa fa-arrow-circle-o-left'/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-arrow-circle-o-right'/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
  </div>
  </b:if>
</b:if>
  <div class='clear'/>
</b:includable> 

3. Langkah Ketiga
Kemudian silahkan cari kode seperti di bawah ini

 <b:includable id='post' var='post'>
..............................
..............................
..............................
</b:includable> 


Silahkan simpan kode di bawah ini tepat di atas penutup kode di atas </b:includable>. Ini untuk memunculkan post navigasi di atas komentar atau di bawah postingan.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Next</span><br/>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Latest</span></span>
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Previous</span><br/>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>First</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>
</b:includable> 


4. Langkah Keempat
Silahkan cari kode di bawah ini

 <b:include name='nextprev'/> 


Jika sudah ketemu, coba perhatikan kode  yang sama seperti ini <!-- navigation -->
Kemudian gantikan dengan kode di bawah ini mulai dari <!-- navigation -->. Ini untuk navigasi halaman di bawah komentar.

 <!-- navigation -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if> 


5. Langkah Kelima ( terakhir )
Silahkan simpan kode javascript di bawah ini di atas kode </body>

 <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//Pager by crepictdesign.blogspot.co.id
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if> 



Simpan template Anda, Selesai dan Selamat mencoba..
Jangan lupa share ya Sob….!!!!

Cara Memasang Prism Syntax Highlighter Pada Posting Blog

May 02, 2017 Add Comment
Cara  Memasang Prism Syntax Highlighter Pada Posting Blog

Asslamualaikum Wr,Wb, Kali ini CREPICTDGZ akan berbagi tips Cara  Memasang Prism Syntax Highlighter Pada Posting Blog yang tak hanya tampak menarik namun juga profesional , Prism Syntax Highlighter ini adalah sebuah fitur yang memang dibuat bagi sobat yang ingin berbagi script atau kode terkait pebuatan widget atau hanya ingin berbagi kode saja.

Prism Syntax Highlighter berupa border teks kode (Pre Code) yang umumnya digunakan sebagai sarana berbagi kode script seperti HTML, CSS, JavaScript, JQuery.Fitur ini memberikan kesan yang menarik,simple,clean( bersih ) .

Untuk DEMO Sobat bisa langsung lihat Prism Syntax Highlighter yang juga saya gunakan seperti dibawah ini,jadi DEMO-nya adalah yang saya gunakan seperti dibawah ini.


Memasang Prism Syntax Highlighter Pada Posting Blog


1. Pertama buka Blogger Sobat.
2. Kemudian klik "Theme/Tema" dan masuk ke "Edit HTML".
3. Jika sudah, masukan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau dibawah </style> atau dibawah model kode seperti ini <style type='text/css'> :

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

4. Lalu Sobat masukan kembali kode di bawah ini tepat diatas kode </body>.

 <script src='https://rawgit.com/usman-kurniawan/crepict/master/crepictprism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type="text/javascript">
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>


5. Terkahir Sobat "Simpan Template".

6. Tahapan penerpan script atau kode Prism Syntax Highlighter sudah selesai, saatnya menerapkannya pada posting blog atau artikel, Yang Sobat perlu perhatikan pertama buka "Entri Baru" dan pilih menu " HTML" dan bukan “ Compose “, dan masukan script di bawah ini sesuai keinginan.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

7. Jika sudah Sobat bisa pilih menu "Compose" untuk melihatnya atau Sobat bisa langsung klik Pritinjau.

8. Selesai dan lihat hasilnya.

Demikian tips " Cara  Memasang Prism Syntax Highlighter Pada Posting Blog " semoga dapat bermanfaat bagi Sobat semuanya. Jika ada pertanyaan seputar tutorial diatas Sobat bisa isi pada kolom komentar yang tersedia atau Contact Admin..

Terimah Kasih sudah mengunjungi…

Denada Fast and Responsive Blogger Template

March 31, 2017 Add Comment
Denada Fast and Responsive Blogger Template

Denada Fast and Responsive Blogger Template – Template ini adalah template yang pertama kali saya bagikan dan sebenarnya bukan design template yang pertama, beberapa design yang saya buat penggunaan hanya sebatas teman rekan dan kenalan dan tidak saya publikasikan atau share. Saya masih memiliki banyak material design yang belum tersentuh 100%. Namun untuk yang satu ini DENADA Fast and Responsive Template sengaja saya bagikan gratis ( belum ada versi premiumnya ) namun tidak mengkesampingkan secara kwalitas.  

Berikut fitur yang ada di dalam template Denada ini :
Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True Cek
Mobile Friendly True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Responsive Dropdown Menu True -
Smooth Back to Top True -
Custom Subscribe Box Widget True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System True Blogger
Semoga bermanfaat.. Jangan lupa share ya Sob !!!