Wednesday 8 June 2016

Cara Membuat Tombol Share Simple Untuk Blog

Iyan Blog | Tombol Share merupakan salah satu unsur penting bagi blog. dan kali ini saya akan membagikan satu tutorial untuk membuat tombol share yang lengkap dan simple. Tombol share kali ini sangat cocok bagi kalian yang menggunakan template simple dan minimalis, dan juga tidak memakan banyak tempat.

Tombol Share sendiri bermanfaat sebagaimana namanya, yaitu berfungsi membagikan artikel-artikel yang dirasa penting ke sosial media. Sosial media yang dimaksud adalah seperti Facebook, twitter, google+, linkedin, tumblr, dan lain-lain. tombol share ini akan diletakkan di bagian bawah postingan kalian.

Baca Juga: Cara Agar Post/Artikel Cepat Terindex Google

Screenshoot Tombol Share Simple Untuk Blog


Untuk cara penerapannya kamu bisa ikuti langkah dibawah ini.

1. Log in ke blogger > Template > Edit HTML.
2. Cari kode <data:post.body/>, pilih yang kedua.
3. Letakkan kode dibawah ini setelah kode <data:post.body/>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
<h2 class='sharetitle'>Share this </h2>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i> Google</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i> Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i> Twitter</a> \
    <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i> More</span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script></b:if>
4. Letakkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Share Button */
h2.sharetitle{font-size:16px;font-weight:700;margin-top:20px;}
.share,.sharethis{position:relative;display:inline-block;}
.sharethis{margin-bottom:20px;}
.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-weight:400;border-radius:3px;color:#888;background:#fdfdfd;border:1px solid #e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .3s}
.fbtea,.gotea,.plustea,.twtea{font-size:13px!important;vertical-align:middle}
.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#444;background:#fff;border-color:#bbb}
.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position:absolute;top:100%;right:5px;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0!important;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.12);}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#333!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#e8554e!important}
ul#share-menu{margin:0;padding:5px 15px}
5. Tambahkan jquery ini sebelum kode </head> *abaikan jika sudah ada
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
6. Simpan Template

Sekian artike kali ini  Cara Membuat Tombol Share Simple Untuk Blog semoga bermanfaat, dan terima kasih.

Monday 6 June 2016

Cara Agar Post/Artikel Cepat Terindex Google

Iyan Blog | Cara Agar Post/Artikel Cepat Terindex Google merupakan hal yang paling sering ditanyakan oleh para blogger. Berbagai cara dilakukan para blogger agar postingannya cepat terindex google. hal itu tidak lain agar post cepat terindex di mesin pencari google dan agar mendapatkan viewers yang banyak.

Postingan atau Artikel yang terindex tentulah sangat berpengaruh bagi sebuah blog. mulai dari banyaknya pengunjung ataupun pendapatan dari blog itu sendiri. Banyak cara agar postingan kamu cepat terindex di google. tapi cara yang satu ini cukup mudah dan tidak memakan waktu yang banyak.

Cara Agar Post/Artikel Cepat Terindex Google

Cara Agar Post/Artikel Cepat Terindex Google

1. Buatlah sebuah artikel yang baru dan hindari copy/paste.
3. Masukkan URL blog kamu di kotak URL. [1]
4. Verifikasi bahwa kamu bukan robot.[2]
5. klik tombol "Submit Request" ataupun "Kirim Permintaan". [3]
Cara Agar Post/Artikel Cepat Terindex Google
6. Tunggu beberapa detik, postingan kamu akan terindex.

Tips Agar Post/Artikel Cepat Terindex Google

Hindari Copy-Paste

Agar postingan kamu bisa terindex google dengan cepat, buatlah sebuah konten yang fresh atau orisinil. Konten yang copy-paste selain dapat berdampak buruk kepada blogmu, juga dapat merugikan orang lain.

Template Blog

Gunakanlah template yang SEO, Template SEO sudah sangat banyak tersebar di google dan gratis. Jangan melakukan perubahan apapun yang dapat berpengaruh negatif pada blog. Jangan melakukan optimasi yang berlebihan, karena akan berpengaruh buruk pada blog.



Dengan cara ini diharapkan postingan blog akan lebih cepat terindex oleh google, dan semoga bisa page one. Jika dari kalian ada yang ingin menambahkan caranya, silakan berkomentar lewat kolom komentar dibawah. Sekian, semoga bermanfaat dan terima kasih.

Saturday 18 July 2015

Membuat Menu Navigasi Simple dan Responsive

Iyan Blog - Kali ini saya akan membuat tutorial Membuat Menu Navigasi Simple dan Responsive. Kedengarannya sudah biasa dan sudah banyak yang membagikan tutorial ini, namun tutorial kali ini merupakan request dari salah satu sobat blogger.

Menu navigasi kali ini saya ambil dari Elok Blogger Template yang tentunya responsive dan mobile friendly. oke langsung saja, jika anda ingin menerapkannya diblog anda silakan ikuti tutorial berikut ini.


Membuat Menu Navigasi Simple dan Responsive

Langkah Pertama
silakan copy CSS dibawah ini lalu letakkan di atas </style> atau ]]></b:skin>
/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;display:block;font-size:16px; font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-weight:bolder; width:100%; overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0}
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:16px; padding:10px 20px;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}
@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:40px; width:100%; position:relative}
#navi a#pull:after{content:''; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCTi06AWZm3-Nxnf0HdyDo4YgOLshnKprAXFY4N8GuepYVqylf3fXroVlB7ta4PndCMTVoLgq5jgk-bRfMt1MNd_l_CA5X6tkxbAOSNJjDr3Q5W-loERPRBHrXztE8mmGvcUtPgMZ9CWP0/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}

Langkah Kedua
Tambahkan jquery diatas </head>, abaikan jika sudah terdapat didalam blog anda
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
Langkah Ketiga
Copy script dibawah ini lalu letakkan diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=PT+Serif%3A400%2C700%7COpen+Sans+Condensed%3A300%2C700&#038;ver=2.1.2");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>

Langkah Terakhir
letakkan kode HTML dibawah ini dibawah kode </header>
<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' title='Beranda'>Beranda</a>
</li>
<li><a href='/search/label/Tutorial%20Blogger?max-results=5' title='Tutorial Blogger'>Tutorial Blogger</a>
</li>
<li><a href='/search/label/Belajar%20SEO?max-results=5' title='Belajar SEO'>Belajar SEO</a>
</li>
<li><a href='/search/label/Template%20Blogger?max-results=5' title='Template Blogger'>Template Blogger</a></li>
<li><a href='/search/label/Internet?max-results=5' title='Internet'>Internet</a></li>
<li><a href='/search/label/Belajar%20Blog?max-results=5' title='Belajar Blog'>Belajar Blog</a></li>
<li><a href='/search/label/Sosial%20Media?max-results=5' title='Sosial Media'>Sosial Media</a></li>
</ul>
</nav>

SIMPAN TEMPLATE

Sekian tutorial kali ini, jika ada hal yang ingin ditanyakan silakan lewat kotak komentar. Semoga bermanfaat dan terima kasih.

Thursday 16 July 2015

Cara Mempercepat Loading Blog

Iyan Blog- Cara Mempercepat Loading Blog | Seperti yang diketahui blog dengan kecepetan akses yang tinggi akan disenangi para pengguna internet, sebaliknya blog yang memiliki loading yang lambat tentunya akan kurang disenangi para pengguna internet, khususnya pengguna internet indonesia. Karena saat ini kecepatan internet di negara kita masih tergolong lamban.
thumbnail postingan
Dengan kita mempercepat loading blog, tentunya para pengunjung akan senang dan merasa betah saat berkunjung ke blog kita. Untuk mengetahui seberapa cepat loading sebuah blog, Silakan anda cek terlebih dahulu seberapa cepat kecepatan akses ke blog anda di PageSpeed Insights.

Contoh:
Download Template Elok Btemplate [Fast Load]

Cara Mempercepat Loading Blog

1. Mengatasi Render-Blocking Javascript Dari Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
Tambahkan atribut async='async'
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
2.  Cari kode </body> lalu ganti dengan kode dibawah ini
 &lt;!--</body>--&gt;&lt;/body&gt;
3. Cari Kode <b:skin><![CDATA[ Gantikan dengan kode dibawah ini
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
4. Ganti Kode <head> dengan kode
&lt;head&gt;
5. Lalu ganti kode </head> dengan
&lt;!--<head/>--&gt;
6. Simpan Template

Tips lainnya adalah kurangi penggunaan iklan yang berlebihan pada blog. Terima kasih telah membaca, semoga bermanfaat dan terima kasih. 

Monday 13 July 2015

Elok Responsive Blogger Template

thumbnail postingan

Name : Elok Responsive Blogger Template
Platform : Blogger
Author : Mauliyandri
Features :

  • Mobile Friendly
  • Fast Load
  • Responsive
  • Related Posts
  • Threaded Comment
  • Social Media Share
  • Auto Read More
  • Breadcrumbs
  • and much more..
Harap tidak menghapus link credit, jika ingin menghapus silakan hubungi admin! :]

Tuesday 30 June 2015

Cara Menghapus Postingan Yang Baik dan Benar

iyan blog | Cara Menghapus Postingan Yang Baik dan Benar - saat kita ngeblog tentunya ada saja post yang tak sesuai atau ada kesalahan dalam post tersebut. Beberapa blogger masih menggunakan metode lama dalam menghapus postingannya. Dengan masuk ke dashbord blogger dan mengklik hapus pada postingannya. 

Cara tersebut memang benar postingan kita dapat terhapus dari blog. Namun, postingan kita tidak terhapus pada search engine. Alhasil terjadilah brokel link, error Crawl, dan 404 not found yang membuat blog tidak SEO Friendly. Cara mengatasinya adalah dengan menggunakan webmaster tool.

Cara Menghapus Postingan Yang Baik dan Benar

2. Pilih blog yang ingin dihapus postingannya
thumbnail postingan
3. pilih laman Google indeks >> Hapus URL >> Buat Permintaan penghapusan baru >> Terus
4. masukkan url postingan yang ingin dihapus
5. Lalu pilih alasan kenapa anda menghapus postingan tersebut
6. kirim permintaan
7. Tunggun dalam 1x24 jam postingan akan terhapus dari penelusuran.

Sekian postingan kali ini semoga bermanfaat dan terima kasih.

Tuesday 28 April 2015

Fabuloso Blogger Template

thumbnail postingan

iyan-blog.com | Fabuloso Blogger Template - Kali ini saya membagikan template sederhana yang bernama fabuloso blogger template, untuk mengetahui fiturnya silakan baca dibawah ini.

Author : Mauliyandri
Publisher : LemariTemplate
Fitur : 

Mobile Friendly

Valid Structured Data

  • Custom Error Page
  • Related Post
  • Auto Read More No JS
  • Threaded Comment
  • dan masih banyak lagi
Harap tidak menghapus link credit, jika ingin menghapus link credit harap hubungi saya di Facebook.com/malhikmah