Ivhaa Network

    Social Items

Cara membuat widget responsive bisa anda gunakan di semua perangkat mobile. Berarti semua device bisa menampilkan ukuran yang sesuai dengan layarnya. Begitu penjabaran responseive.
cara bikin widget postingan terbaru mirip mastimon

Kali ini saya akan membagikan sedikit pengalaman saya dalam menggunakan template kompiflexible yang mirip sekali dengan mastimon.

Kemudian saya coba cari tutorial mengenai cara bikin recent post seperti di mastimon.com itu, nah alhasil mastimon sendirilah yang membuatnya.

Jadi disini saya akan membagikan kode postingan terbaru untuk kamu agar template kompiflexible bisa mirip sekali dengan blognya mastimon.

Berikut tutorialnya...

Pertama, kamu masuk terlebih dahulu ke www.blogger.com

Kedua, cari menu Tata Letak atau Layout

Ketiga, masuk ke tambahkan Gadget

Keempat, pilih HTML/Javascript

Kelima, masukkan kode dibawah ini pada kolom konten

<style scoped='' type='text/css'>

/* Recent Post Navigasi */

#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}

#recentpostsae{margin:0}

.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}

.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}

.recentpostel:hover{background-color:#fefefe}

.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}

#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#fefefe}

#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}

#recentpostnavfeed span{padding:5px 10px}

#recentpostnavfeed .next{float:right}

#recentpostnavfeed .previous{float:left}

#recentpostnavfeed .home{text-align:center}

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

</style>

<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "https://www.ivhaa.net";

var charac = 40;

var urlprevious, urlnext;

function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};

//]]>

</script>

<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>


Keterangan : Ubah warna merah menjadi URL blog sobat
Dan anda juga bisa mengubah tulisan warna biru pada var charac, itu berfungsi untuk menampilkan berapa jumlah deskripsi artikel yang pingin anda munculkan, jika kepingin mirip yaa biarin begitu saja (default).

Langkah selanjutnya ialah, klik Simpan lalu lihat blog anda apakah sudah sama persis?

Demikian ulasan singkat saya mengenai tutorial cara membuat widget recent post mirip blog mastimon. Dengan begitu kamu akan mendapatkan full kemiripan dengan template yang digunakan amstimon yaitu kompiflexible. Terima kasih dan selamat mencoba

Cara Membuat Widget Recent Post (Postingan Terbaru) Responsive Dengan Mudah

Cara membuat CSE (Custom Search Engine) adsense di dalam postingan yang bisa kita sesuaikan dengan keyword tujuan. CSE merupakan custom mesin penelusuran agar pengunjung mengklik sebuah mesin telusur yang nantinya bakal buat menaikkan pendapatan kita karena iklan yang tampil adalah iklan jenis web.
iklan custom search engine

Iklan jenis ini bisa diperuntukan untuk menambah penghasilan adsense kamu. Apabila kamu kepengin dengan cara ini bisa langsung mengikuti tutorial dibawah ini;

Pertama, silakan masuk ke dashboard adsense kalian kemudian buat sebuah CSE melalui menu Mesin Penelusur (Ads For Search). Kemudian buat baru saja dan pilih web atau hanya web yang dipilih. Selanjutnya bisa catat kode semacam ini partner-pub-0123456789123456:01234567

Kedua, masuk ke dashboard blog kamu www.blogger.com

Ketiga, masuk ke menu edit html kemudian keluarkan search kolom dengan menekan tombol CTRL + F secara bersamaan

Keempat, cari kode ini <b:includable id='post' var='post'>

Kelima, masukkan kode dibawah ini tepat diatas kode pada langkah nomor 4


<b:if cond='data:blog.pageType in {&quot;item&quot;}'>

<div id='cse-results'/>

<script>

var opt = &quot;keyword disini%&quot;;

var ppub = &quot;partner-pub-0123456789123456:01234567&quot;;

</script>

   </b:if>

</b:includable>

NB : Script diatas hanya menampilkan keyword bidikan saja dan pada tulisan "keyword disini" ganti saja dengan tujuan kata kunci kamu yaa. Usahakan pakai keyword HPK biar makin legit.

Keenam, kemudian anda copy kode dibawah ini
<b:include data='posts' name='cse'/>

Kode tersebut untuk menampilkan CSE Adsense mau ditampilkan dimana. Akan lebih efektifnya kamu letakkan di tengah artikel saja.

Biasanya berada di script data post body seperti dibawah ini

  <data:post.body/>
ATAU SIMPAN DI SINI

Kedelapan, langkah terakhir dapat kamu lakukan adalah menaruh script dibawah ini untuk memodifikasi cse nya agar sesuai keinginan. Taruh di sebelum atau diatas kode </body>


<style>

/*<![CDATA[*/

#cse-results{width:100%;margin:0 auto}

.gs-imageResult .gs-snippet,.gs-webResult .gs-snippet,.post-body a[href^="http://cse.google.com/"]:after, .post-body a[href^="https://cse.google.com/"]:after,.post-body a[href^="http://cse.google.com/"]:hover:after, .post-body a[href^="https://cse.google.com/"]:hover:after,.gsc-adBlockNoHeight~.gsc-resultsbox-visible{display:none}

.gcsc-branding-img-noclear{width:50px!important;height:15px;vertical-align:middle!important;}

.gsc-above-wrapper-area,.gsc-adBlock{border:none}

.gsc-above-wrapper-area,.gsc-webResult .gsc-result{padding:0!important;border-bottom:0!important}

.static_page .gs-imageResult .gs-snippet,.static_page .gs-webResult .gs-snippet{display:block}

.gsc-adBlock{margin:0 -4px}

/*]]>*/

</style>

<script src='https://cdn.staticaly.com/gh/KompiAjaib/js/master/jsapi.js'/>

</b:if>

Silakan simpan dan liat apakah sudah bisa menampilkan atau belum

Demikian ulasan kami mengenai cara memasang custom search engine di dalam postingan blog dengan mudah dan cepat. Selamat mencoba

Cara Membuat CSE Adsense Dalam Postingan Sesuai Keyword Bidikan

Berpfikir Dulu Sebelum Membeli Domain .Blog

Tidak terasa ya, blog Ivhaa.net ini usianya akan menginjak 2 tahun, sempat blog ini Tidur Panjang karena pindah ke Wordpress tapi tanpa alasan yang tidak pasti di benned begitu aja.

Butuh waktu lama agar normal di mesin pencari, oleh karena itu blog ini dibiarkan dulu tidak di kelola hampir satu tahun.

Akankah Domain .blog Mudah di Temukan Oleh Google

Berpfikir Dulu Sebelum Membeli Domain .Blog

Mungkin sebelum membeli Domain tentu berfikiran pertanyaan seperti ini, namanya domain .blog dan terbilang masih baru beda sama domain .com dan .net yang usianya terbilang sudah tua atau sudah sepuh.

Namun beberapa waktu lalu Google sudah update algoritma nya bagaimana user bisa lebih mudah menemukan informasi dengan blog dengan domain TLD.

Jadi tidak perlu takut menggunakan domain .blog untuk blog kamu, karena tinggal kita bisa tidak kelola blog tersebut agar bisa bersaing di mesin pencari.

Apakah domain .blog untuk Brand untuk Website!


Bila domain yang anda pilih sudah dipakai orang lain tentu sangat kecewa banget ya, misal nama brand yang kamu inginkan adalah ivhaashop.com namun sudah dipakai orang, tentu kamu bisa gunakan domain .blog menjadi solusinya yaitu menjadi ivhaashop.blog

Dengan nama tersebut sudah bisa mencerminkan brand sobat yang paling penting mudah di temukan oleh mesin pencari.

Haruskah Saya Pindah Domain .blog tapi Sudah punya Blog


Jawabannya tentu Tidak, kenapa karena blog yang saya pakai ini sudah umur tua walaupun saya memiliki lisensi domain .blog harus membuat brand baru dengan domain tersebut.

Selain itu blog yang saya pakai ini usianya sudah hampir menginjak 2 tahun, ya dua tahun karena selama terjun di dunia blogger belum pernah memiliki usia blog setua ini.

Mahalkah Harga domain .blog ini

Berpfikir Dulu Sebelum Membeli Domain .Blog

Jika Kita ingin membeli domain tentu berfikir dua kali ya, apakah domain itu harganya mahal atau tidak, namanya sesui brand kita atau tidak dan masih banyak lagi.

Tenang Sobat di Jagoanhosting kamu bisa membeli domain .blog dengan harga terbilang sangat murah yaitu 25 ribu rupiah.

Kenapa Harus Jagoanhosting!!

Berpfikir Dulu Sebelum Membeli Domain .Blog

Kenapa Harus Jagoanhosting!! Tentu sebelum membuat domain atau membuat website tentu harus memilih provaider domain yang murah, berkualitas dan terpecaya tentunya.

Setelah saya membeli domain di Jagoanhosting, awalnya sedikit kecewa karena sudah bayar tetapi belum aktif selama satu hari. Namun yang paling penting adalah banyak sekali promo di Jagoanhosting kamu bisa cek promo seru Jagoanhosting di halaman berikut ini.

Tidak hanya itu, dengan data center yang handal membuat blog kamu semakin kecang dan wuss mudah di akses oleh pengguna, jadi masih bingung proveder domain, daripada bingung mending Jagoanhosting Aja.

Berpikir Dulu Sebelum Membeli Domain .Blog

Cara Memperbaiki Struktur Data Error Pada Template

Pada beberapa hari yang lalu saat otak - atik template ini ternyata ada struktur data yang error pada blog ini, yaitu terletak pada PublisherDate dimana data yang tidak sesui.

Sedikit yang belum tau, disini says akan jelaskan Apa itu Shcema.org yang sering dimaksud dengan struktur data agar blog bisa SEO.

Apa Itu Schema Markup / Schema.org ?


Schema Markup yang dirilis dengan Schema.org adalah kolaborasi dari beberapa mesin pencari yaitu Google, Bing, Microsotf (BING) dan Yahoo dengan membuat kosakata yang umum untuk deskripsikan dalam situs web.

Kalian bisa cek struktur data template kalian di tool google yang dinamakan Google Rechsnippert Tool, disitu kalian bisa tau struktur atau bagian template yang kalian pakai.

Cara Memperbaiki Struktur Data Error Pada Template


Agar template bisa SEO tentu jangan sampai struktur data pada blog kalian jang sampai Error ya, jika Error bagaimana cara memperbaikinya!!

Nah buat yang belum tau mungkin bisa ikuti langkah - langkah berikut ini ya sobat blogger semua.

1. Memperbaiki Error pada DatesModified Pada Postingan dan Halaman

Kalian Masuk ke Deshboard Blogger masuk ke menu Pengaturan, pilih Pengaturan Bahasa Peformatan.

Ubah Zona Waktu yang sama dengan blog kalian, Contoh : (Agustus 07, 2015) pada opsi Format Header kemudian pilih Simpan.

Sebelum itu kalian harus masuk Akun Blogger kalian, pilih menu Tema kemudian klik Edit Tema.

Cari kode seperti di bawah ini :
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated'
expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

Ganti seperti di bawah ini :
<span itemprop='dateModified'>
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/></abbr></a></span>


2. Memperbaiki Missing Error Image

Cari kode seperti dibawah ini
<article class='post hentry' itemprop='blogPost' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>

Lalu copy code di bawah ini tepat berada di bawah kode tersebut.
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta itemprop="url" expr:content='data:post.firstImageUrl'/>
  <meta itemprop="width" content='700'/>
  <meta itemprop="height" content='700'/>
  </div>
</b:if>

3. Mengatasi Error Missing Publishing

Copy kode di bawah ini letakan seperti yang ada di poin 2, jangan lupa gantu URL BLOG dengan punya kamu

<div itemprop="publisher" itemscope='itemscope' itemtype="https://schema.org/Organization">
   <div itemprop="logo" itemscope='itemscope' itemtype="https://schema.org/ImageObject">
      <meta itemprop="url" content="URL LOGO BLOG"/>
      <meta itemprop="width" content="600"/>
      <meta itemprop="height" content="600"/>
   </div>
 <meta itemprop="name" expr:content="data:blog.title"/>
</div>

4. Mengatasi Error Author dan Name

Cari Kode Seperti berikut ini,

<p><data:post.body/></p>
</div>
<script type='text/javascript'>createSummary(&quot;summary<data:post.id/>&quot;);</script>

Kemudian taruh kode dibawah ini tepat di kode yang di atas tersebut.

<!-- hCard"author" Start --> 
<span class='post-author vcard'> <b:if cond='data:top.showAuthor'> 
<data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> 
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/> 
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> 
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> 
</b:if> 
</b:if> 
</span> 
<!-- hCard"author" End -->

5. Mengatasi Error MainEntityOfPage

Copy Kode yang ada di bawah ini

<div itemscope='itemscope' itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"/>

Lalu letakkan kode tepat di bawah ini

<article class='post hentry' itemprop='blogPost' itemscope='itemscope'
itemtype='http://schema.org/BlogPosting'>

Nah Demikian Tutorial Cara Memperbaiki Struktur Data Pada Template Blog, Bila ada kesalahan pada tutur kata atau bahasa penulisan maaf karena baru belajar, See You

Cara Memperbaiki Struktur Data Error Pada Template

Vebma Responsive Blogger Template

Pada kali ini saya akan share templatebuat kalian semua, nama template ini adalah Vebma Responsive Blogger Template. Menurut informasi template ini adalah template yang dipakai oleh situs Vebma.com.

Kali ini saya akan memberikan secara gratis karena yamg versi redesain ku hilang alias versi premium nya namun sebelum itu cek yuk fiturnya apa aja.

Features Availability
Responsive True Cek
Mobile Friendly True Cek
Google Testing Tool Validator (Index) True Cek
Google Testing Tool Validator (Item) True Cek
SEO Friendly True
Personal Blog True
2 Column True
Top Navigation True
Breadcrumbs True
Search Box True
Back to Top Button True
Footer Menu True
Share Button True
Featured Recent Post True
Blogger Comment System True
Fast Version True
Newsletter Widget True

Bila kamu ter tarik dengan template ini kamu bisa langsung downloud aja di bawah berikut ini


Vebma Responsive Blogger Template Free

Subscribe Our Newsletter