6/27/2016

Cara Memasang Material Design Icons di Blog

Cara Memasang Material Design Icons di Blog - Sesuai dengan namanya Material Design Icon adalah sebuah gambar icon web yang khusus di gunakan untuk di pasang web atau blog. Dengan menggunakan Material Design Icons ini, kita akan dipermudah untuk menentukan ikon menu, label maupun ikon yang akan kita pasang di artikel blog kita.

Cara Memasang Material Design Icons di Blogger
Material Design Icons di Blogger

Material Design Icons di Blogger

Material Icons ini di buat oleh team google sebagai icon khusus untuk Material Design yang telah di terapkan hampir ke semua aplikasi Google.

Cara Memasang Material Design Icons di Blog

Langkah Pertama, Salin dan Letakkan kode Google Web Font di bawah ini tepat di atas atau sebelum kode </head>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Selain menggunakan Kode Web Font diatas, sobat juga bisa menggunakan @font face di bawah ini dan letakkan sebelum kode ]]></b:skin> atau </style>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Langkah selanjutnya silahkan buka https://design.google.com/icons/, Kemudian pilih icon yang akan sobat gunakan. Cek gambar di bawah ini :

Cara Memasang Material Design Icons di Blogger


Silahkan gunakan kode CSS untuk merubah ukuran icons dibawah ini, sebenarnya sobat tidak di wajibkan untuk menggunakan kode CSS dibawah ini, karena biasanya kode tersebut otomatis menyesuaikan ukuran mengikuti ukuran font size blog sobat. Berikut adalah kode CSS yang berfungsi merubah ukuran google icons :

.material-icons.md-18{font-size:18px}
.material-icons.md-24{font-size:24px}
.material-icons.md-36{font-size:36px}
.material-icons.md-48{font-size:48px}

Sobat juga bisa menggunakan cara di bawah ini untuk merubah ukuran google icons,

<i class="material-icons md-18">account_circle</i>
<i class="material-icons md-24">account_circle</i>
<i class="material-icons md-36">account_circle</i>
<i class="material-icons md-48">account_circle</i>

Untuk menerapkan icons melalui CSS :before dan :after , maka terapkan seperti kode berikut :

.cobatest:after{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}
.cobatest:before{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}

Sekian tutorial tentang Bagaimana Cara Memasang Material Design Icons di Blog, untuk tutorial singkatnya silahkan kunjungi link berikut http://google.github.io/material-design-icons/ Terima Kasih.

6/25/2016

Simplify 2 Responsive Blogger Template

Simplify 2 Responsive Blogger Template - Setelah sebelumnya saya share Simplify Free Responsive Blogger Template, maka pada kesempatan kali ini saya akan share Simplify 2 Responsive Blogger Template yang di desain oleh Arlina Design juga.

Simplify 2 Responsive Blogger Template Full Version
Simplify 2 Responsive Blogger Template

Simplify 2 Responsive Blogger Template

Template ini adalah versi lanjutan dari Simplify Free Responsive Blogger Template dengan tampian yang sudah di modifikasi oleh mbak Arlina.

Fitur Simplify 2 Responsive Blogger Template
FeatureAvailability
ResponsiveTrue - Cek
Google Testing Tool ValidatorTrue - Cek
SEO FriendlyTrue - Cek
Mobile FriendlyTrue - Cek
Dynamic HeadingTrue
AdsenseTrue
Valid Schema.orgTrue
High CTRTrue
Personal BlogTrue
2 ColumnTrue
Auto Read More with ThumbnailTrue
Responsive Ad SlotTrue
BreadcrumbsTrue
Footer LinkTrue
Related Posts with ThumbTrue
Search BoxTrue
Social Share ButtonTrue
Responsive Sticky NavigationTrue
Back to Top ButtonTrue
ShortcodesTrue
Unlimited Page NumberedTrue
Recent Post with ThumbnailTrue
Custom Contact Form WidgetTrue
Responsive Sitemap Widget (by Kompi Ajaib : Edited by Dunia Blanter)True
Untuk setelan Template dan Widget bisa sobat cek di Simplify 2 Responsive Blogger Template Documentation.

Simplify Free Responsive Blogger Template

Simplify Responsive Blogger Template 2016 - Template ini di desain oleh Arlina Design yang tampilannya hampir mirip dengan Minima Colored dengan dominan warna putih. Pada dasarnya template ini merupakan hasil modifikasi tambahan dari template N Light Responsive and SEO Friendly Blogger Template  yang juga di Desain oleh Arlina Design juga.

Simplify Responsive Blogger Template 2016
Simplify Free Responsive Blogger Template

Simplify Free Responsive Blogger Template 

Template ini mempunyai fitur-fitur yang sangat menarik, sehingga sobat dapat menerapkan tampilan template ini di blog sobat. Selain itu template ini juga sangat responsive dan juga cocok untuk di gunakan para blogger yang menggunakan adsense.

FeatureAvailability
ResponsiveTrue - Cek
Google Testing Tool ValidatorTrue - Cek
SEO FriendlyTrue - Cek
Mobile FriendlyTrue - Cek
Dynamic HeadingTrue
AdsenseTrue
Valid Schema.orgTrue
High CTRTrue
Personal BlogTrue
2 ColumnTrue
Auto Read More with ThumbnailTrue
Responsive Ad SlotTrue
BreadcrumbsTrue
Footer LinkTrue
Related Posts with ThumbTrue
Search BoxTrue
Social Share ButtonTrue
Responsive Sticky NavigationTrue
Back to Top ButtonTrue
ShortcodesTrue
Unlimited Page NumberedTrue
Recent Post with ThumbnailTrue
Custom Contact Form WidgetTrue
Responsive Sitemap Widget (by Kompi Ajaib : Edited by Dunia Blanter)True

Untuk setelan template dan widget, sobat bisa cek di Simplify Free Responsive Blogger Template Documentation.

6/24/2016

Cara Memasang Iklan Di Dalam Postingan Blog

Cara Memasang Iklan Di Dalam Postingan Blog - Iklan yang di tampilkan di dalam artikel atau postingan blog kita mempunyai pengaruh besar untuk meningkatkan penghasilan blog kita. Maka dari itu pada kesempatan kali ini saya akan memberikan sebuah tutorial tentang Bagaimana Cara Membuat Iklan kita Tampil di Dalam Artikel atau Postingan Kita.

Cara Memasang Iklan Di Dalam Artikel Blog
Cara Memasang Iklan Di Dalam Postingan Blog

Dengan Memasang Iklan di Dalam Artikel atau Postingan Blog ini tentunya kita mengharapkan tambahan klik dari pengunjung kita. Kenapa begitu? karena dengan adanya sebuah iklan yang berbaur layaknya bagian dari postingan kita.

Cara Memasang Iklan Di Postingan Blog

Apabila sobat tertarik ingin mencobanya, silahkan ikuti tutorial di bawah ini :
Login ke Blogger > Template > Edit HTML > Kemudian Temukan kode <data:post.body/> dan ganti dengan kode dibawah ini :

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<--! Simpan Kode Iklan Disini !-->
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Ganti <--! Simpan Kode Iklan Disini !--> dengan Kode iklan yang sudah sobat Parse sebelumnya agar tidak terjadi error ketika menyimpan setelan template sobat.
Untuk mengatur penempatan iklan yang akan di tampilkan, silahkan gunakan salah satu kode HTML berikut :

1. Posisi Iklan Berada Tepat di Tengah Artikel / Postingan

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='margin:10px auto'>
Simpan Kode Iklan Disini
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

2. Posisi Iklan Berada di Tengah Sebelah Kanan Artikel / Postingan


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='float:right;margin:10px 0 10px 10px'>
Simpan Kode Iklan Disini
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

3. Posisi Iklan Berada di Tengah Sebelah Kiri Artikel / Postingan

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<div style='float:left;margin:10px 10px 10px 0'>
Simpan Kode Iklan Disini
</div>
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Untuk mengkonversi (parse) kode iklan silahkan kunjungin Ads Converter

Demikian tutorial bagaimana Cara Memasang Iklan Di Dalam Postingan Blog ini semoga bermanfaat. :)

6/19/2016

Cara Menampilkan Widget Tertentu Di Halaman Tertentu Blog

Menampilkan Widget Tertentu Di Halaman Tertentu Blog - Pada kesempatan kali ini saya akan berbagi cara menampilkan widget tertentu di halaman tertentu blogger. Dengan cara ini makan kita akan di permudah untuk membagi dan mengatur widget yang akan kita tampilkan di blog kita. Seperti contoh widget A akan kita tampilkan hanya di halaman utama blog kita dan widget di tampilkan di halaman statistik blog saja dan lain sebagainya.


Cara Mengatur Tampilan Widget di Blogger

Menampilkan Widget Tertentu Di Halaman Tertentu Blog

Cara ini sangat efektif untuk menurunkan bounce rate pada sebuah blog, misalkan sobat ingin menambahkan widget random post itu hanya di halaman posting saja, maka sudah tentu widget yang anda pasang di halaman posting ini akan berguna untuk memberi sebuah pilihan artikel lainnya, selain itu sudah tentu ini juga efektif untuk menghemat ruang di halaman hompage

Untuk sobat yang tertarik ingin mencobanya, silahkan ikuti tutorial berikut :
Login ke Blogger > Template > Edit HTML > Kemudian modifikasi tampilkan widget blog sobat dengan menambahkan salah satu kode di bawah ini yang sobat kehendaki.

Menampilkan widget hanya di halaman depan saja (homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 ......................................................
</b:if>
Menampilkan di semua halaman kecuali homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
 ......................................................
</b:if>
Menampilkan widget hanya di halaman Archive saja.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>
Menampilkan widget di semua halaman kecuali halaman archive.
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
 ......................................................
</b:if>
Menampilkan widget hanya di halaman posting.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 ......................................................
 </b:if>
Menampilkan widget di semua halaman, kecuali halaman posting.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 ......................................................
</b:if>
Menampilkan widget hanya di postingan tertentu saja.
<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'> ......................................................
</b:if>
Menampilkan widget selain di postingan tertentu.
<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'> ......................................................
</b:if>
Menampilkan widget hanya di halaman staticpages.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 ......................................................
</b:if>
Menampilkan widget di semua halaman, kecuali halaman staticpages.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>
Catatan :
- Silahkan ganti kode Titik-titik diatas dengan kode widget sobat.
- Letakkan salah satu kode antara <b:includable id='main'> dan </b:includable>
- Sebagai contoh silahkan cek di bawah ini

<b:widget id='HTML2' locked='false' title='Nama Widget type='HTML'>
    <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
  </b:if>
</b:includable>
  </b:widget>

Demikian tutorial Cara Menampilkan Widget Tertentu Di Halaman Tertentu Blog ini semoga bermanfaat. untuk pertanyaan dan lain-lain, silahkan tinggalkan komentar.

5/30/2016

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 - Breadcrumbs SEO Friendly Valid HTML5 adalah sebuah tekhnik optimasi seo yang mempermudah mesin pencari dan pengunjung untuk menemukan blog kita. Navigasi Breadcrumbs ini akan menampilkan semua label yang di hubungkan dengan artikel kita yang tentunya akan semakin mudah blog kita di crawl oleh mesin penelusur.

Breadcrumbs SEO Friendly Valid HTML5 Blogger
Breadcrumbs SEO Friendly Valid HTML5

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Untuk sobat yang ingin memasang Navigasi Breadcrumbs ini di blog sobat, silahkan ikuti cara berikut :

Langkah Pertama, Login ke Blogger > Template > Edit HTML > Salin CSS dibawah ini dan simpan sebelum kode </style> atau ]]></b:skin>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}


Langkah Kedua, Temukan kode HTML berikut

<b:includable id='main' var='top'>...</b:includable>

Kemudian letakkan kode HTML berikut, tepat di atasnya

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah Ketiga, Silahkan simpan template sobat.

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 semoga bermanfaat dan selamat bereksperimen.

Cara Optimalkan Gambar Agar SEO Otomatis Di Blog

Cara Optimalkan Gambar Agar SEO Otomatis Di Blog - Perlukah sebuah optimasi pada gambar di blog kita? Jawabannya adalah iya. Kenapa? Karena dengan optimasi pada gambar yang kita posting di blog kita, maka mesin penulusuran seperti google, bing dan mesin penulusuran lainnya akan mudah menemukan postingan blog kita.

Optimasi Gambar Agar SEO Otomatis
Optimalkan Gambar Agar SEO Otomatis Di Blog

Optimasi ini di lakukan agar semua gambar yang ada di laman maupun postingan blog kita cepat terindeks oleh mesin pencari google. Dengan menggunakan optimasi ini, maka kita tidak usah repot menambahkan title/alt secara manual pada gambar yang ada di blog kita.

Cara Optimalkan Gambar Agar SEO Otomatis Di Blog

Login ke Blogger > Template > Edit HTML > Temukan kode </body> kemudian salin javascript dibawah ini dan Simpan di atas atau sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Demikian tutorial Cara Optimalkan Gambar Agar SEO Otomatis Di Blog ini semoga bermanfaat.