pada kesempatan ini saya coba bagi tutorial cara membuat artikel terkait V2,perbaikan dari V1 di SINI untuk artikel terkait kali ini ada penambahan sentuhan border melengkung ada yg request kemaren.
Berikut cara membuat Artikel Terkait dengan border melengkung dengan Fungsi Scroll
1. Seperti biasa, masuk dulu ke Akun blog anda.
2. Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik
3. Pada halaman Rancangan, klik tombol "EDIT HTML"sebaik nya aman kan dulu template sobat
4. Beri tanda checklist pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda
5. Cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).
6. Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/:skin> berikut kodenya :
.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:15px; margin:15px;} .rbbox:hover{background-color: #EFFBEF;} |
7. Selanjutnya, cari kode <data:post.body/> gunakan control F
8. copy code ini di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<br/> <br/> <H2>Artikel Terkait:</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type="text/javascript">RelPost();</script> </div> </b:if> |
9. selanjut nya SIMPAN TEMPALATE
Kode pertama baris ketiga ( .rbbox:hover ) adalah warna background kotak jika mouse menyentuh kotak ARTIKEL TERKAIL. Silahkan Ganti kode Warnanya sesuai dengan warna yang anda inginkan.
0 komentar:
Posting Komentar