5 Dec 2011

Cara Membuat Related Post Di Bloggger

Posted: 04 Dec 2011 02:41 AM PST
Bismillah.. pada kesempatan ini saya akan tulis tentang cara membuat related post atau related artikel atau sering juga di sebut postingan terkait, sekarang related post ini sudah banyak sekali ragamnya, ada yang memakai thumbail gambar dan juga masih banyak setyle yang lainnya.
style related post blogger
Related Post Blogger
pada postingan ini saya akan membahas cara membuat related post yang sederhana saja yaitu related post tanpa thumbail, oke sobat, untuk membuat related post yang semacam ini langkah pertama seperti biasa yaitu :
  • Login ke Blogger
  • Terus sobat masuk ke area Design blog/tata letak
  • Lalu masuk ke tab Edit HTML
  • Terus sobat centang Expand Widget Templates
  • Setelah itu sobat cari tag </head> 
  • Untuk mempercepat pencarian tekan Ctrl+F dan masuka kode yang sobat cari
  • Setelah ketemu tag </head> sobat copy kode di bawah dan masukan tepat di atas tag </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;}
#related-posts a:hover {
color : #054474;
text-decoration : none;}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;}
#related-posts li :before
{content:url(http://4.bp.blogspot.com/-ca9-GR5lKXw/TttD23u7eoI/AAAAAAAAApA/-LwMu_yDX5E/s760/contoh-related-post.gif);}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;}
</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 < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script> 
Save template blog sobat , tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode <data:post.body/> setelah ketemu sobat masukan kode di bawah ini di bawah tag <data:post.body/>.
Code Related Post
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Setelah selesai sobat klik save dan lihat hasilnya. oke sobat samapai disini dulu cara memasang related post pada blogger semoga berhasil, Good Luck Happy Blogging  
Posted: 03 Dec 2011 07:18 PM PST
Blog WordPress
Bismillah... pada kesempatan ini saya akan tulis tentang Tutorial Install Blog WP (WordPress) di Localhost. sebelum ke tutorial nya sebaiknya sobat mempersiapkan file-file /software yang dibutuhkan terlebih dahulu, untuk membuat blog di situs local caranya gampang sekali, sobat tinggal klik dan klik, tidak perlu repot memikirkan kode kode HTML atau CSS atau yang kode lainnya.

Oke sobat, untuk meng Install WordPress di local yang harus sobat persiapkan adalah :
  • XAMPP silahkan sobat download XAMPP nya di alamat http://www.apachefriends.org/en/xampp.html
  • WordPress Instaler, silahkan sobat download versi terbaru Wordpress di alamat http://wordpress.org/download/ untuk versi indonesia silahkan sobat download disini http://id.wordpress.org/
Setelah lengkap, pertama sobat Install XAMPP dan jalankan webservernya, setelah itu sobat copy Installer WordPress ke directory xampp/htdocs  biasanya letaknya di Drive C, setelah itu sobat buka Web browser dan masukan alamat https://127.0.0.1/ atau  https://localhost/, setelah itu sobat buat dulu  database di PHP MyAdmin atau sobat buka di tab baru alamat https://localhost/phpmyadmin/  untuk nama database terserah sobat. 
Cara Membuat Database di PHP MyAdmin
  • Klik Tab Database
  • Terus Masukan Nama Database
  • Klik Create, Selesai
phpMyAdmin Create Database
Create Database Di PHP MyAdmin

Setelah database di buat, langkah selanjutnya sobat buka Wordpress Installer lewat browser, https://localhost/nama folder WP/ atau jika sobat menggunakan WP Bahasa Indonesia alamatnya https://localhost/wordpress-3.2.1-id_ID/ terus sobat klik tulisan WordPress.
wordpress Directory localhost
WordPress Directory

Setelah itu akan muncul Konfigurasi WordPress
Konfigurasi Blog WP
Konfigurasi Blog WP
Terus Sobat Klik Ciptakan Berkas Konfigurasi
run wordpress Installer
Run WordPress Instaler
Klik Run WordPress Installer

Config Database WordPress

Konfigurasi database Untuk WP (WordPress)
  • Nama Basis Data : Adalah nama Database yang tadi di buat
  • Nama Pengguna : Adalah pengguna MySql Secara default nama pengguna adalah root
  • Kata Sandi : Kata sandi database
  • Host Basis Data : localhost
Jika sudah selesai klik tombol Submit 


Konfigurasi Judul Blog WP (WordPress)
Konfigurasi Situs/Blog Wordpress
  • Judul Situs : Adalah Judul blog/website kita
  • Nama Pengguna : Nama pengguna untuk login ke Dashboard WP
  • Kata Sandi : Kata sandi untuk login ke blog WP
  • Email : Adalah alamat email jika kita lupa dengan kata sandi maka bisa di reset via email
Jika sudah, sobat klik Instal WordPress


Berhasil Install Blog WordPress
Terakhir jika berhasil akan muncul tampilan seperti di atas, silahkan sobat login dan Happy Blogging, oke sobat sampai disini dulu tutorial Install Blog WordPress di server local semoga bermanfaat, Good Luck happy Blogging

No comments:

Post a Comment