You Might Also Like This Interesting Article ? - Erend Elektronik

You Might Also Like This Interesting Article ? - You Might Also Like dikenal dalam dunia blogger sebagai widget Artikel Terkait atau Related Posts. You Might Also Like adalah sebuah penawaran yng berbau-bau "pemaksaan" secara halus pada pengunjung blog untuk tetap berada di blog kita dengan membaca artikel lainya. Pemaksaannya akan nampak seperti ini "Mungkinkah dari artikel-artikel ini ada yang menarik bagi anda?"  Tentunya pemaksaan ini atas keyakinan kita bahwa artikel-artikel yang ada pada blog kita adalah arikel yang bermutu. Untuk kriteria artikel bermutu saya yakin andalah pemilik blog yang lebih tahu.

Widget You Might Also Like adalah bagian dari SEO on page, dimana widget You Might Also Like menawarkan ketertarikan dari segi penampilan, gambar ataupun judulnya itu sendiri. Ketertarikan itu akan menghipnotis pengunjung blog kita untuk tetap membaca artikel-artikel yang kita suguhkan. Widget ini akan berada setia setiap saat dengan artikel-artikel kita. Untuk itu membuat atau memasang widget You Might Also Like harus dibuat seindah dan sekeren mungkin. Lepas dari Artikel Bermutu diatas bahwa sedikitnya penampilan blog kita yang indah termasuk widget-widget yang ada didalamnya akan berpengaruh pada betahnya pengunjung blog.

Lalu bagaimana Cara Membuat widget You Might Also Like yang keren itu? Gampang koq, syarat utama adalah anda pemilik blog, karena widget ini adalah widget artikel yang saling berkaitan yang tentunya untuk dipasangkan pada blog atau website yang kita miliki. Ini artinya saya tidak usah menyuruh anda untuk Login Blogger karena sebagai pemilik blog, login blogger sudah menjadi kewajiban rutin baik itu untuk edit template,posting artikel atau kegiatan lainnya.

Langkah awal membuat widget You Might Also Like adalah men-copy pastekan kode berikut diatas atau sebelum kode penutup style atau  </style>

/* Recent Articles */

#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}

#recent-articles a:link, #recent-articles a:visited {font-weight: normal}

#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}

#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}

#recent-articles ul li:last-child{border:none}

#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}

#recent-articles ul li:hover{background-color:#f5f5f5;}

#recent-articles ul li:hover:before{background-color:#24699A;}

#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}

#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}

#kangerendRelated{display:block;margin:20px 0px;line-height:1.5em;}

#kangerendRelated h4.title{font-size:16px;font-weight:600;text-align:center;text-transform:capitalize;line-height:initial;}

#kangerendRelated h4.title span{background-color:#fff;padding:0px 15px;position:relative;z-index:1;}

#kangerendRelated h4.title:before{content: &#39;&#39;;display: block;position: relative;top:10px;width: 100%;border-top: 2px solid #cccccc;}

#kangerendRelated ul{margin:20px 0px 0px;padding:0px;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;}

#kangerendRelated ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:center;margin-right:20px;margin-bottom:20px;padding:0px;

  -webkit-margin-start:0px !important;}

#kangerendRelated ul li .thumb{overflow:hidden;line-height:0px;border-radius:7px;}

#kangerendRelated ul li:nth-of-type(3n){margin-right:0px;}

#kangerendRelated ul li a{display:block;}

#kangerendRelated ul li a.judul{color:#000; /* Warna Huruf */font-weight:600;margin-top:7px;}

#kangerendRelated ul li a.judul:hover, #kangerendRelated ul li:hover a.judul{color:#ff5722; /* Warna Huruf Ketika Disorot */}

#kangerendRelated ul li a img{width:100%;max-height:143px;transition:all .3s ease;border:0px;margin:0px;}

#kangerendRelated ul li a img:hover, #kangerendRelated ul li:hover img{transform:scale(1.1) rotate(-5deg);filter: brightness(75%);

  -webkit-filter: brightness(75%);}

#kangerendRelated .norelated{text-align:center;font-weight:600;}

@media screen and (max-width:480px){

#kangerendRelated ul li{width: calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px;}

#kangerendRelated ul li:nth-of-type(3n){margin-right:15px;}

#kangerendRelated ul li:nth-of-type(2n){margin-right:0px;}}

Penawaran You Might Also Like berlanjut pada langkah akhir yakni sama dengan langkah awal cuma copy dan pastekan kode berikut setelah kode <b:includable id='Delate' var='post'> sebelum kode </b:includable> :Jika tidak menemukan kode tadi silahkan coba cari kode lain seperti berikut ini <b:includable id="comment_picker" var="post"> Kode scrift dibawah ini </b:includable> :

<b:if cond='data:view.isPost'>

  <div id='kangerendRelated'>

    <h4 class='title'><span>You Might Also Like</span></h4>

    <script>//<![CDATA[

      var jumlah = 6;

      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|kangerendRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));

      //]]></script>

    <b:if cond='data:post.labels'>

      <b:loop values='data:post.labels' var='label'>

        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>

      </b:loop>

      <ul>

        <script>kangerendRelatedGrid();</script>

      </ul>

      <b:else/>

    </b:if>

  </div>

<div class='clear'/>

</b:if>

Save Template dan lihat hasilnya, sekarang anda bisa mulai bertanya pada pengunjung blog anda dengan pertanyaan..., You Might Also Like This Interesting Article?

Artikel Terkait