. cara membuat auto "baca juga" di blog anda cara membuat auto "baca juga" di blog anda - arif07 -->

cara membuat auto "baca juga" di blog anda

 


kali ini saya akan memberikan tutorial menambahkan "baca juga" di awal,ditengah , di akhir postingan . kalian tidak perlu untuk memilih artikel mana saja yang di masukan ke sana karena sudah auto di setiap postingan agan-agan akan terdapat "baca juga" dan tidak sama dengan satu sama yang lain dengan kata lain judul artikel yang di tampilkan itu Related post .

apa itu Related post?? 

secara singkat  Related post adalah rekomendasi artikel atau postingan yang terkait atau berkategori sama dengan postingan yang sedang di baca.

1.tampilan pertama 


Kalian harus menambah kan css nya di tamplate kalian . ini dia css nya 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* tampilan 1 baca juga */
.arif07-bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:#e2e2e2;border:4px double rgba(0,0,0,0.2)}
.arif07-bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.arif07-bacajuga ul{margin:0;padding:0}
.arif07-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.arif07-bacajuga ul li:before{content:'\f02b';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.arif07-bacajuga ul li:hover:before{content:'\f02b';font-family:fontawesome;color:#0383d9;}
.arif07-bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.arif07-bacajuga a:hover{color:#0383d9;}
.arif07-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.arif07-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.arif07-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.arif07-bacajuga a{font-size:14px;margin:0}.arif07-bacajuga a:hover{color:#e74c3c}
.arif07-bacajuga ul li{padding:5px 0}
.arif07-bacajuga ul li:before,.arif07-bacajuga ul li:hover:before{display:none}}

perhatikan pada gambar di bawah
kira-kira seperti itu untuk penambahan css nya .

2.tampilan ke 2


berhubung tamplate saya tidak menggunakan fontawesome jadi icon nya tidak dapat di tampilkan tapi bagi kalian yang tamplate nya menggunakan fontawesome pasti ada icon nya 
dan ini dia css nya

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* tampilan 2 baca juga */
.arif07-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.arif07-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.arif07-bacajuga ul{margin:0;padding:0}
.arif07-bacajuga ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.arif07-bacajuga ul li:nth-child(odd){background:#fefefe}
.arif07-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.arif07-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.arif07-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.arif07-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.arif07-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.arif07-bacajuga ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

cara penambahan nya juga sama ya seperti yang pertama tadi 

3.tampilan ke 3


dan lagi-lagi ini menggunakan fontawesome jadi ya gtu :v 
langsung ke css nya 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/*tampilan 3 baca juga  */
.arif07-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.arif07-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.arif07-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.arif07-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.arif07-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.arif07-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.arif07-bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.arif07-bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.arif07-bacajuga a:hover{color:#fff;text-decoration:underline}
.arif07-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.arif07-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.arif07-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.arif07-bacajuga a{font-size:14px;margin:0}.arif07-bacajuga a:hover{color:#e74c3c}
.arif07-bacajuga ul li{padding:5px 0}
.arif07-bacajuga ul li:before,.arif07-bacajuga ul li:hover:before{display:none}}

oke dan ini bagian terpenting nya semua nya juga penting sih:v
nah jika kalian sudah memilih tampilan mana yang kalian suka dan telah menambahkan css nya ingat ya pilih salah satu saja jangan di masukan semua :v

4.pemasangan javascript 

pertama kalian harus mencari tag </head> pada tamplate kalian dan tambahkan script berikut di atas tag </head>

1
2
3
4
5
6
<b:if cond ='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
var arif07Bacajuga=new Array,arif07BacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];arif07Bacajuga[arif07BacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[arif07BacajugaNum]=r.link[t].href,arif07BacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=arif07Bacajuga[r]);arif07Bacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((arif07Bacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<arif07Bacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+arif07Bacajuga[e]+"</a></li>"),e<arif07Bacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>

oke jika sudah next ke step trakhir 

5.pemasangan xml 

pertama kalian harus mencari tag xml <data:post.body> 
jika sudah ketemu kalian ubah menjadi script di bawah ada beberapa tamplate yang menggunakan lebih dari satu tag itu jadi kalian coba satu persatu hingga muncul di postingan anda . pada tamplate yang saya gunakan saat ini tag xml itu hanya terdapat satu dan saya hanya menambahkan code di bawah (tidak mengganti / menghapus tag di atas) . setiap tamplate berbeda jadi kalian coba sendiri . 
ini dia code nya 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='arif07-bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

oke cukup sekian tutorial kali ini selamat mencoba ya gan 
logo
[Les't learn networking and programming]
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Related Posts

    Buka Komentar
    Tutup Komentar

    0 Response to "cara membuat auto "baca juga" di blog anda "

    Iklan Atas Artikel

    loading...

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel