Cara Desain Tema Blogger Template

Cara Desain Tema Blogger Template

Lidyarahmi    September 08, 2017    Comment   

Cara Desain Tema Blogger Template

Cara Membuat Blog Gratis Dengan Mudah Untuk Pemula

Cara Membuat Blog Gratis Dengan Mudah Untuk Pemula

Lidyarahmi    September 07, 2017    Comment   

Cara Membuat Blog Gratis dengan Mudah di Blogspot.com

Langkah 1: Membuat email dari gmail.com (tapi jika sudah ada email dari gmail.com lewati cara ini) klik disini untuk membuat email, klik Buat Akun lalu lanjutkan dengan mengisi kolom-kolom yang ditunjukkan pada kolom di bawah ini.

Langkah 2: Buka blogger.com, lalu login menggunakan akun gmail.com yang telah anda buat tadi.

Langkah 3: Mulai membuat blog baru, yaitu mengklik Blog Baru, maka akan muncul tampilan seperti gambar di bawah ini, perhatikan penomoran pada gambar.

Keterangan gambar:

• Nama blog
• Url blog, jika belum ada yang menggunakan maka aka nada tanda centang di sebelahnya
• Template untuk blog
• Melanjutkan rangkaian pembuatan blog baru

Langkah 4: Mulailah blogging dengan mengklik Entri Baru di bagian dashboard blog.

Dengan begitu anda sudah mempunyai satu blog baru yang nanti sebagai tempat untuk menuangkan unek-unek anda. Jika ingin mengganti template blog, silahkan pilih template di ThemeRespo, siapa tahu ada template yang cocok dengan kriteria anda.

Demikian tutorial cara membuat blog gratis kali ini, mudah-mudahan blog anda berkembang pesat, informatif dan motifatif, juga mudah-mudahan akan mendapat penghasilan dari blog tersebut.

Cara Memasang iklan dan Related post di tengah Postingan Blogger

Cara Memasang iklan dan Related post di tengah Postingan Blogger

Lidyarahmi    September 05, 2017    Comment   

Memasang iklan dan related post (artikel terkait), recommended article di tengah postingan atau artikel selain akan memicu nilai CTR/jumlah klik pada iklan, juga akan mendongkrat penjelajahan pengunjung terhadap artikel-artikel di blog tersebut. Sehingga nilah Bounce Rate pun akan dapat ditekan.

Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menampilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. 

Demonya seperti pada blog ini :

Memasang iklan dan related post/recommended article di tengah postingan pada Blogger

Untuk membuat widget seperti ini sebetulnya sangat mudah, silahkan ikuti tutorial berikut ini secara melek.

Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakkan kode barikut ini di atas kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>
</b:if>

Cari kode berikut ini, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if>

Lalu ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>

Tambahkan kode berikut ini di bawah kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts inline -->
</div>
<div class='ads_middle'> <!-- ADS MIDDLE POST -->
  <span>Advertisement</span>
// kode Iklan yang sudah diparse, letakkan disini
  </div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada kode yang ditandai warna merah di atas.

Setelah yakin penempatannya sudah benar, silahkan simpan tema.

Buka salah satu artikel di blog Anda untuk preview. Jika tidak puas dengan model tampilannya, silahkan ubah CSS di atas.

Dengan memasang iklan dan related post tampil secara bersamaan di tengah artikel/postingan, maka tampilan blog post Anda akan terlihat seperti JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan lainnya.

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blogger

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blogger

Lidyarahmi    September 05, 2017    Comment   

Tutorial kali ini tentang cara membuat widget label atau kategori tertentu dengan thumbnail yang akan diletakkan di bagian bawah postingan. Unsur script untuk pembuatan widget ini sudah valid HTML5, sehinggal anda tidak perlu khawatir akan error script yang bakal terjadi saat memasangnya.

Widget ini akan menampilkan artikel terbaru dari masing-masing label yang dipilihkan. Cocok digunakan pada blog magazine dan blog personal.


Jika tertarik memasang widget ini, silahkan ikuti tutorialnya berikut.

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blog

1. Login ke blogger, masuk ke dashboard blog anda, lalu klik pada menu Template > Edit Template.

2. Cari kode </style> atau </b:skin> lalu letakkan kode CSS berikut ini tepat di atasnya.

/* Recent By Label */
#tag1, #tag2{margin:0;padding:0 0 30px;width:100%}
#tag1-wrapper h2,#tag2-wrapper h2,#tag1-wrapper h3,#tag2-wrapper h3 {color:#333;text-transform:capitalize;font-size:140%;font-weight:400;padding:15px 0;margin:0 0 15px;border-bottom:1px solid #eee}
#tag1-wrapper .recent-by-tag li,#tag2-wrapper .recent-by-tag li{width:30%;margin-right:5%;margin-bottom:30px;display:block;float:left}
#tag1-wrapper .recent-by-tag li:last-child,#tag2-wrapper .recent-by-tag li:last-child{margin-right:0}
#tag1-wrapper .recent-by-tag img,#tag2-wrapper .recent-by-tag img{width:100%;height:130px}
#tag1-wrapper .recent-by-tag li a,#tag2-wrapper .recent-by-tag li a{color:#454545}
#tag1-wrapper .recent-by-tag li a:hover,#tag2-wrapper .recent-by-tag li a:hover{color:#349acb}
#tag1-wrapper .recent-by-tag li .showdates,#tag2-wrapper .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:bold;color:#a7b0b7}

3. Karena widget ini akan diletakkan dibagian bawah postingan, maka anda perlu menambahkan kerangka baru, dengan cara; temukan kode berikut

<b:section class='main' id='main' showaddelement='no'>

Lalu susutkan dengan mengklik bidang (segitiga) tepat sejajar disisi kirinya, sehingga menjadi seperti ini

<b:section class='main' id='main' showaddelement='no'>...</b:section>

4. Kopi kode berikut ini dan letakkan di bagian bawah kode yang disusutkan tadi.

<div id='tag1-wrapper'>
  <b:section class='tags1' id='tags1' showaddelement='yes'>
<div class='clear'/>
  </div>
<div id='tag2-wrapper'>
  <b:section class='tags2' id='tags2' showaddelement='yes'>
<div class='clear'/>
  </div>

6. Cari kode </head> lalu letakkan kode di bawah ini tepat di atasnya.

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var showpostdate = true;
//<![CDATA[
var _0xecb6=["\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x2D\x62\x79\x2D\x74\x61\x67\x22\x3E","\x77\x72\x69\x74\x65","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x65\x6E\x67\x74\x68","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x72\x65\x70\x6C\x69\x65\x73","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x68\x72\x65\x66","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x75\x72\x6C","\x6D\x65\x64\x69\x61\x24\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x63\x6F\x6E\x74\x65\x6E\x74","\x3C\x69\x6D\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","","\x68\x74\x74\x70\x3A\x2F\x2F\x32\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x67\x69\x6F\x76\x61\x31\x5A\x43\x68\x2D\x41\x2F\x55\x7A\x71\x36\x4C\x38\x51\x54\x4A\x4E\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x41\x4A\x63\x2F\x55\x53\x58\x69\x63\x74\x54\x71\x5F\x78\x73\x2F\x73\x37\x30\x2D\x63\x2F\x4B\x4D\x2B\x49\x63\x6F\x6E\x2E\x70\x6E\x67","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x4A\x61\x6E\x75\x61\x72\x69","\x46\x65\x62\x72\x75\x61\x72\x69","\x4D\x61\x72\x65\x74","\x41\x70\x72\x69\x6C","\x4D\x65\x69","\x4A\x75\x6E\x69","\x4A\x75\x6C\x69","\x41\x67\x75\x73\x74\x75\x73","\x53\x65\x70\x74\x65\x6D\x62\x65\x72","\x4F\x6B\x74\x6F\x62\x65\x72","\x4E\x6F\x76\x65\x6D\x62\x65\x72","\x44\x65\x73\x65\x6D\x62\x65\x72","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6C\x65\x61\x72\x22\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x20\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x63\x74\x2D\x74\x68\x75\x6D\x62\x22\x20\x61\x6C\x74\x3D\x22","\x22\x20\x73\x72\x63\x3D\x22","\x22\x2F\x3E\x3C\x2F\x61\x3E","\x3C\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x72\x65\x6C\x3D\x22\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x74\x72\x6F\x6E\x67\x3E","\x3C\x62\x72\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x64\x61\x74\x65\x73\x22\x3E","\x20","\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E"];function rcentbytag(_0xb075x2){document[_0xecb6[1]](_0xecb6[0]);for(var _0xb075x3=0;_0xb075x3<numposts;_0xb075x3++){var _0xb075x4=_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xb075x3];var _0xb075x5=_0xb075x4[_0xecb6[5]][_0xecb6[4]];var _0xb075x6;if(_0xb075x3==_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xecb6[6]]){break };for(var _0xb075x7=0;_0xb075x7<_0xb075x4[_0xecb6[7]][_0xecb6[6]];_0xb075x7++){if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[9]&&_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[10]]==_0xecb6[11]){var _0xb075x8=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[5]];var _0xb075x9=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];};if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[13]){_0xb075x6=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];break ;};};var _0xb075xa;try{_0xb075xa=_0xb075x4[_0xecb6[15]][_0xecb6[14]]}catch(h){s=_0xb075x4[_0xecb6[16]][_0xecb6[4]];a=s[_0xecb6[18]](_0xecb6[17]);b=s[_0xecb6[18]](_0xecb6[19],a);c=s[_0xecb6[18]](_0xecb6[20],b+5);d=s[_0xecb6[21]](b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=_0xecb6[22]){_0xb075xa=d}else {_0xb075xa=_0xecb6[23]};};var _0xb075xb=_0xb075x4[_0xecb6[24]][_0xecb6[4]];var _0xb075xc=_0xb075xb[_0xecb6[25]](0,4);var _0xb075xd=_0xb075xb[_0xecb6[25]](5,7);var _0xb075xe=_0xb075xb[_0xecb6[25]](8,10);var _0xb075xf= new Array;_0xb075xf[1]=_0xecb6[26];_0xb075xf[2]=_0xecb6[27];_0xb075xf[3]=_0xecb6[28];_0xb075xf[4]=_0xecb6[29];_0xb075xf[5]=_0xecb6[30];_0xb075xf[6]=_0xecb6[31];_0xb075xf[7]=_0xecb6[32];_0xb075xf[8]=_0xecb6[33];_0xb075xf[9]=_0xecb6[34];_0xb075xf[10]=_0xecb6[35];_0xb075xf[11]=_0xecb6[36];_0xb075xf[12]=_0xecb6[37];document[_0xecb6[1]](_0xecb6[38]);if(showpostthumbnails==true){document[_0xecb6[1]](_0xecb6[39]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[41]+_0xb075x5+_0xecb6[42]+_0xb075xa+_0xecb6[43])};document[_0xecb6[1]](_0xecb6[44]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[45]+_0xb075x5+_0xecb6[46]);document[_0xecb6[1]](_0xecb6[47]);var _0xb075x10=_0xecb6[22];var _0xb075x11=0;if(showpostdate==true){_0xb075x10=_0xecb6[48]+_0xb075x10+_0xb075xe+_0xecb6[49]+_0xb075xf[parseInt(_0xb075xd,10)]+_0xecb6[49]+_0xb075xc+_0xecb6[50];_0xb075x11=1;};document[_0xecb6[1]](_0xb075x10);document[_0xecb6[1]](_0xecb6[51]);if(_0xb075x3!=numposts-1){document[_0xecb6[1]](_0xecb6[22])};};document[_0xecb6[1]](_0xecb6[52]);}
//]]>
</script>

7. Cari lagi kode </body> lalu letakkan kode berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('#tag1-wrapper img,#tag2-wrapper img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//]]>
</script>

8. Simpan template.

9. Masuk atau klik Tata Letak, akan tampak tambahan gadget seperti gambar berikut.

10. Untuk memasukkan script pemanggil widget label tertentu caranya ialah, klik Tambahkan Gadget > HTML/JavaScript, lalu letakkan kopi kode berikut ini dan paste ke kolom yang tersedia.

<script>
document.write("<script src=\"/feeds/posts/default/-/Black?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
</script>

Perhatikan:
Kata Black pada kode di atas adalah nama label, sesuaikan kata tersebut dengan label yang ingin ditampilkan.

10. Jangan lupa Simpan.

Ukuran thumbnail silahkan sesuaikan dengan lebar blog anda dengan mengedit CSS pada langkah 2. Demikian cara membuat Widget Label Tertentu dengan Thumbnail di Bawah Postingan. Sumber: Arlina Design.

Cara Membuat Tabel Keterangan Rensponsive di Blogger

Cara Membuat Tabel Keterangan Rensponsive di Blogger

Lidyarahmi    September 05, 2017    Comment   

Tutorial blog kali ini tentang cara membuat table keterangan di blogspot atau blogger seperti yang demonya anda dapat lihat pada laman Pasang Iklan di blog ini. 

Kalau anda pengguna template blog +Arlina Fitriyani pasti anda sudah melihat tata letak tabel keterangan template yang ada di blog tersebut. 

Table keterangan ini berguna mempermudah pengunjung untuk melihat fitur apa saja yang terdapat pada template tersebut.

Selain untuk keterangan fitur template, tabel ini juga dapat anda terapkan untuk membuat keterangan lainnya, misalnya keterangan untuk bisnis online, klasemen bola atau motoGP dan lain sebagainya.

Berikut ini contoh penggunaan tabel untuk keterangan sebuah bisnis online:

Detail:	RevenueHits
Website URL	url here
Tipe jaringan	CPM, CPC, CPA
Tipe iklan	Banner, Rich media, pop up/under, text
Metode pembayaran	Paypal, Wire Transfer, Payoneer
Minimal Payout	Paypal $20, Wire transfer $500, Payoneer $20
Fill rate	100%
Frekuensi pembayaran	NET 30
Rate eCPM tertinggi	US, Europe traffic
Penerimaan traffic	Seluruh negara
Ad Mobile	Yes
Ad custom format	Yes
Affiliasi	Yes
Bebas virus dan malware	Yes
Dukungan web Indonesia	Yes
Kolaborasi dengan Adsense	High risk

Bagaimana? Anda juga tertarik memasangnya di blog anda? Silahkan ikuti tutorialnya berikut ini.

Cara Membuat Tabel Keterangan Unik Seperti Arlina Design

Kopi kode berikut ini dan masukkan ke template blogger anda, dengan cara masuk ke dasbor blog > Template > Edit HTML. Kemudian letakkan kode berikut tepat di atas kode </style> atau </b:skin>

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

Jangan lupa simpan template.

Kemudian jika setiap anda membuat postingan yang membutuhkan tabel tersebut, silahkan edit kode berikut ini pada notepad, sesuaikan keterangan yang akan dibuat dalam tabel.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>RevenueHits</th> </tr>
<tr> <td>Website URL</td> <td>url here</td> </tr>
<tr> <td>Tipe jaringan</td> <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Tipe iklan</td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td>Metode pembayaran</td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td>Minimal Payout</td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td>Fill rate</td> <td>100%</td> </tr>
<tr> <td>Frekuensi pembayaran</td> <td>NET 30</td> </tr>
<tr> <td>Rate eCPM tertinggi</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Penerimaan traffic</td> <td>Seluruh negara</td> </tr>
<tr> <td>Ad Mobile</td> <td>Yes</td> </tr>
<tr> <td>Ad custom format</td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
<tr> <td>Dukungan web Indonesia</td> <td>Yes</td> </tr>
<tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
</tbody> </table>

Demikian modifikasi tabel keterangan untuk blogspot/blogger kali ini, semoga membantu dan selamat mencoba.

Tutorial Cara Membuat Artikel Terkait Yang Rensponsive dan Keren

Tutorial Cara Membuat Artikel Terkait Yang Rensponsive dan Keren

Lidyarahmi    September 05, 2017    Comment   

Kali ini saya akan Berbagi tentang Related Post yang keren dan Bagus punya Mirip Punya Bung frangki dan Jalan tikus.

Keunggulan nya akan meningkat User Experience dan Mengurangi Bounce Rate, tentunya juga bikin blog kamu makin keren! :)

Bagi yang ingin membuat related pos seperti yang saya gunakan di blog ini, silahakn ikuti caranya berikut.

Tutorial Cara Membuat Artikel Terkait Yang Rensponsive dan Keren

Cara membuat Related Post (DTE) dua kolom dengan thumbnail

Silahkan masuk ke Edit HTML, lalu tambahkan CSS berikut ini di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
/* css related posts DTE */
#related-wrapper{margin:auto;padding:0 20px}
.related-post h4{margin:30px 4px 15px 4%!important;font-size:22px;text-transform:capitalize;font-weight:normal;padding:0;color:#444}
.related-post{margin:0 0 0 -4%;padding:0;font-size:13px;text-align:left;box-sizing:border-box}
.related-post,.related-post-style-3 .related-post-item{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;float:left;width:50%;height:230px;padding-left:4%!important;margin:0 0 10px!important;box-sizing:border-box}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:100%;height:160px;max-width:none;max-height:none;background-color:transparent;padding:0;}
.related-post-style-3 .related-post-item-tooltip{padding:0;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:17px;font-weight:700;display:block;color:#444!important;line-height:1.15em!important}
.related-post-style-3 .related-post-item-tooltip a.related-post-item-title:hover{color:#4285f4!important}
@media screen and (max-width:480px){#related-wrapper{padding:0 15px}.related-post h4{margin:30px 4px 15px 0!important;}.related-post{margin:0;}.related-post-style-3 .related-post-item{display:block;float:none;width:100%;height:auto;margin-bottom:20px!important;padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.related-post-style-3 .related-post-item-thumbnail{width:100%;height:auto}}
</b:if>

Cari kode </article> lalu tambahkan kode ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

Keterangan: angka 6 pada kode di atas adalah jumlah post yang tampil pada related post.

Juga JavaScript berikut ini, letakkan di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

Simpan template dan lihat hasilnya.

Bagaimana? mudah bukan? semoga blog dan website anda makin ramai
Terima kasih!

Optimasi SEO Onpage Agar Sesuai dengan Social Media

Optimasi SEO Onpage Agar Sesuai dengan Social Media

Lidyarahmi    September 05, 2017    Comment   

Dengan perkembangan dunia SEO Onpage dalam beberapa bulan ini, ada perubahan dalam sistem algoritma Google Fred, maka dari itu ada baik nya juka kita upgrade juga kemampuang SEO Onpage kita dengan teknik Open Graph, ini dia cara nya :

Memasang atau mengetahui Admin ID dan FB App ID untuk poperti meta tag blog itu sebetulnya cukup penting. Sebab property ini akan menghindari terjadinya error pada tools debug object Facebook, pada setiap artikel di blog/website.

Kurang lebih model property meta tag tersebut seperti ini:

<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>

Cara mendapatkan ID fb:app_id dan fb:admins itu berbeda caranya. Untuk tutorial kali ini, saya akan awali dengan cara mengetahui Facebook App ID (fb:app_id), kemudian akan dilanjutkan dengan Facebook Admin ID (fb:admins).

Cara mendapatkan Facebook App ID (fb:app_id)

Sebelum melakukan langkah-langkah ini, pastikan Anda sudah login ke akun Facebook. Jika sudah, silahkan lanjutkan:

Buka halaman Developer Facebook.

Pilih “Tambahkan Sebuah Aplikasi Baru”.

Isikan Nama Tampilan dan Email lalu klik “Buat ID Aplikasi”.

Masukkan teks acak-acak itu ke dalam kotak, huruf besar-kecil diperhatikan karena dia sensitive, lalu pilih “Kirim”.

Akan muncul tampilan baru, pilih “Tinjauan Aplikasi”, langkah ini untuk mengaktifkan aplikasi Anda agar bersifat publik dan bisa digunakan sebagai meta-tag.

Untuk mengaktifkan silahkan klik pada kota yang ditandai pada gambar di atas.

Pilih kategori, lalu Konfirmasi.

Selamat, Aplikasi Facebook Anda sudah siap digunakan ID-nya. Silahkan kembali ke halaman depan aplikasi dengan mengklik menu “Dasbor”.

ID aplikasi Anda ialah yang ditandai seperti pada gambar berikut.

Jadi hasilnya akan menjadi seperti ini:

<meta content='331877810604617' property='fb:app_id'/>

Jika Anda benar-benar ingin memanfaatkan aplikasi tersebut untuk keperluan blog Anda, melihat analaytics misalnya, silahkan lanjutkan dengan tahap pengaturan berikut:

Scroll ke bawahnya, kemudian klik “Pilih Platform”

Pilih ikon WWW atau Situs Web.

Scroll ke bawah lagi, temukan kolom seperti pada gambar berikut. Isikan URL blog Anda disitu, lalu klik Next.

Selesai.

Baca Juga :

• Cara Mengetahui Properti fb:profile_id dan fb:pages untuk meta tag seo blogspot
• Objek Open Graph di dalam Meta tag SEO Blogger agar lebih Powerfull

Terima kasih

Cara Memasang Tombol Back To Top Rensponsive Keren dan Ringan

Cara Memasang Tombol Back To Top Rensponsive Keren dan Ringan

Lidyarahmi    September 05, 2017    Comment   

Bagi kamu yang ingin ada tombol back to top ini sangat berguna dalam meningkatkan Kenyamanan Pengunjung blog anda dan mengurangi Bounce Rate anda

Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis. 

Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda. 

Oke! Langsung saja kita menuju tutorial 

Cara Memasang Tombol Back To Top Rensponsive Keren

1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>

<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

3. Terakhir simpan template dan lihat hasilnya.

Result

Cara Memasang Tombol Back To Top Rensponsive Ringan :

Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.


Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.


Berikut cara pemasangannya :

1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.


2. Simpan CSS di bawah ini sebelum ]]></b:skin> atau </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Simpan jQuery dan HTML di bawah ini sebelum </body>

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

4. Setelah itu simpan template dan lihat hasilnya.

Result

Dengan tambahan efek bounce

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Result

Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera, sekian dari saya. Selamat pagi dan semoga bermanfaat.


Terima kasih