Tampilkan postingan dengan label tips trick. Tampilkan semua postingan
Tampilkan postingan dengan label tips trick. Tampilkan semua postingan

Jawab Komentator Blog dari FaceBook


Perkembangan jejaring sosial khususnya FaceBook [FB] sangat luar biasa dibandingkan dengan yang namanya Blog / Web / Situs, sebagai bukti orang punya Blog sudah pasti punya Account di FB sedangkan sebaliknya orang punya Account FB belum tentu punya Blog, :# Para senior Blogger sudah banyak malahan hampir semuanya mempergunakan triks ini supaya blognya ramai dikenal dan dikunjungi :r
Sekarang saya akan mencoba berbagi dengan kawan cara membuat kotak Komentar Facebook gaya punya, yang Komentarnya ada di Blog dan di FB cuma metode ini kalau dibandingkan dengan Komentar Blog bawahannya sudah pasti ada
kelebihan dan kekurangannya, begitu juga dengan yang akan saya posting ini, kalau Kotak Komentar Blogger punya biasanya langsung kelihatan seperti direkap pada Komentar dan pada email kita, kalau pada Kotak Komentar Facebook yang saya posting ini tidak, tapi punya kelebihan-kelebihan misalnya bisa di Reply seperti pada Facebook, sedangkan kelebihan lainnya Komentar tersebut akan langsung kelihatan di FB begitu juga kita bisa membalasnya / menjawabnya langsung dari Facebook. dan akan kelihatan langsung pada FB kita [baik yang memberi komentar maupun kita si penerima komentar] :p

Kalau kawan tertarik ikuti cara menbuatnya : 
  • Masuk dulu ke  http://developers.facebook/setup untuk mendapatkan App ID kawan atau bisa Klik disini. 
  • Isi semua kolom yang ada, dan khusus untuk URL Situs / Blog contoh : http://blog-renovasi.blogspot.com/ [pakai tanda "/"]
  • Selanjutnya masukkan password FB kawan  - Klik Kirim 
  • Lihat dipojok kanan atas Klik Create New app 
  • Yang selanjutkan ketik huruf pada kotaknya sebagai Periksaan  Keamanan. 
  • Selanjutnya kawan akan mendapatkan App ID [saya tutup dengan warna merah] dan App Secret [saya tutup dengan warna biru] silahkan di copas pada Nopad sementara 

Setelah mendapatkan ID tersebut selanjutnya masuk ke  Account Blogger dengan ID kawan 
  • Pada Dasbor pilih Edit HTML
  • Beri tanda centang pada Radio disamping tulisan Expand Template Widget
  • Ingat simpan template kawan dulu untuk menjaga kemungkinan kalau ada kesalahan
  • Cari kode » <data:post.body/>
  • Copas kode berikut  dibawah  <data:post.body/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='500'/></b:if>
Keterangan :

  1. Ganti xxxxxxxxxxxx dengan ID kawan
  2. Angka 5 adalah jumlah comment yang akan tampil di Blog - disesuaikan
  3. Angka 500 adalah lebar Kotak Komentar - disesuaikan
  4. Dibawah <data:post.body/> ini akan kelihatan persis dibawah posting kawan, bisa dipindah-pindahkan agar sesuai dengan selera kawan, sebagai contoh kalau saya naruhnya dibawah label dan tepatnya lagi dibawah kode pada template saya adalah :  <div class='comment-author vcard'>
  5. Simpan template kawan dulu, karena ini baru ditengah jalan.
  6. Copas kode berikut persis diatas <b:skin><![CDATA[/* - [letaknya dekat keatas pada Edit HTML] 
<meta content='profilID=xxxxxxxxxxxx' property='fb:admins'/>
<meta content='aplikasiID=xxxxxxxxxxxxxxx' property='fb:app_id'/>

Huruf xxxxxxxxxxxx yang berwarna merah diganti dengan ID kawan yang tadi 
Huruf xxxxxxxxxxxxxxx yang berwarna violet itu bisa kawan temukan di Facebook kawan, caranya Klik kanan pada foto profil kawan, lalu salin Alamat tautan dan lihat pada browse diatas 
contohnya seperti berikut :
http://www.facebook.com/media/set/?set=a.147487348615692.19675.xxxxxxxxxxxxxxx&type=1

Kawan cukup ambil angka terakhir setelah tanda titik  [yang saya ganti dengan xxxxxxxxxxxxxxx], dan Paste-kan pada aplikasiID tadi.

Terakhir simpan template kawan dan lihat hasilnya



Selengkapnya.....

Cara lain membuat Artikel Terkait Plus


Seperti Postingan saya sebelumnya yaitu Cara Membuat Artikel Plus, karena pengkodean Template berbeda-beda maka tidak menutup kemungkinan menimbulkan masalah, :@ 
Untuk itu sekarang saya mencoba berbagi lagi dengan kawan Cara lain Membuat Artikel Terkait Plus, karena cara ini sudah saya coba dan pakai pada Blog-blog saya yang lain selalu berhasil dengan sukses. :r
Cuma yang perlu kawan perhatikan Lebar Pos-Artikel Blog kawan  Caranya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Perancang template pilih Edit HTML
  • Beri tanda check disamping Expand Template Widget
  • Copas Kode berikut diatas ]]></b:skin>
.creationpost{
padding:10px;
background-color: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#CEE3F6', endColorstr='#0B3861');background:-moz-radial-gradient(top, #CEE3F6, #0B3861);background:-webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to( #0B3861)) repeat-x  top left;
border:0px solid #FFF;
line-height:1.6em;
}
  • Copas Kode berikut dibawah ]]></b:skin> atau diatas </head>
<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 < 10) {
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>
  • Selanjutnya cari Kode seperti berikut
<b:if cond='data:post.labels'> <data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
  • Kalau sudah ketemu Hapus atau Ganti dengan Kode berikut 
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
  • Hapus / Ganti Kode yang saya beri warna Hijau dengan Kode berikut
 <div class='creationpost'>
<table> <tr><td>
<h4 style='color: rgb(38, 38, 217); font-size:14px; font-weight:normal;'>  Artikel lain yang mungkin ingin kawan baca :</h4><br/>
<div style='overflow:hidden;width:300px;height:auto;padding:10px 10px 0 20px; align:justice; border:0px solid #FFF;'>
       
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</td><td>

<div style='width:145px;height:235px;border:1px solid #ddd;background:#7ca9c0;margin:2px 0;padding:5px'><a href="http://farixsantips.blogspot.com/" id="rainbow">
<center><h2 style='font-size:24px; font-weight:normal;'>ADVERTISE <br/> HERE </h2><h2 style='color: rgb(255, 255, 0); font-size:18px; font-weight:normal;'> BANNER <br/> [145x235] </h2></center></a>
<script type="text/javascript">var rainbow=document.getElementById("rainbow");var rainbowspan=new RainbowSpan(rainbow, 0, 360, 255, 50, 18);rainbowspan.timer=window.setInterval("rainbowspan.moveRainbow()", rainbowspan.speed);</script></div>

</div>
</td></tr></table>        
</div>
Teks yang saya beri warna coklat adalah lebar post Artikel, silahkan disesuaikan dengan Blog kawan dan Ganti Teks yang saya beri warna Kuning dengan Banner Iklan atau apa saja, terserah kawan.
Jangan lupa simpan template kawan


Selengkapnya.....

Background Template dengan Gradient


Sekarang saya akan berbagi dengan kawan Cara Mempercantik Blog dengan Gradient. :z Apa itu Gradient ?
Menurut saya pribadi ini sangat bagus kelihatannya karena terdiri dari 2 warna yang berbeda misalnya dari warna tebal menjadi tipis. :D
Dimana saja bisa Gradient itu diterapkan ?
Lagi-lagi menurut saya pribadi dimana saja baik itu di template maupun di Gadget [Perhatikan image disamping hasilnya atau Blog saya ini].
Okey mari langsung kita praktekkan ke cara membuatnya :
Biar sekali kita membuatnya sebaiknya di tambahkan kodenya pada Template Blog misalnya Body Blog, Postingan, Sidebar, Header maupun pada footer yang penting semuanya ada Kode Background atau Background-color.

Cara pembuatannya :
  • Seperti biasa masuk ke account Blogger dengan ID kawan
  • Pada Dasbor pilih Edit HTML
  • Simpan atau Download template kawan dulu
  • Cari tulisan Background sebelum / diatas kode ]]></b:skin>
Contoh background pada Post Artikel Blog sebelum perubahan 

Hasilnya

.post{
background-color: #A9D0F5;
width:820px;
color: #FFF;
font-size: 12px;
font-family: Cherry Cream Soda, Arial;
margin: 0 0 20px;
padding:15px;
border:1px solid #A9D0F5;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}
Perhatikan teks yang saya beri warna Hijau #A9D0F5;
Kawan bisa menghapusnya atau antara angka 5 dengan titik koma [;] ditaruh Kode Gradient, maka hasilnya seperti berikut :


.post{ 

background-color: #A9D0F5 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B3861', endColorstr='#A9D0F5');background:-moz-radial-gradient(top, #0B3861, #A9D0F5);background:-webkit-gradient(linear, left top, left bottom, from(#0B3861), to( #A9D0F5)) no-repeat left top;

Hasilnya
width:820px; 
color: #FFF;
font-size: 12px; 
font-family: Cherry Cream Soda, Arial;
margin: 0 0 20px; 
padding:15px; 
border:1px solid #A9D0F5;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; 
}
Atau kalau  #A9D0F5 dihapus jadinya seperti ini :

.post{
background-color:   none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B3861', endColorstr='#A9D0F5');background:-moz-radial-gradient(top, #0B3861, #A9D0F5);background:-webkit-gradient(linear, left top, left bottom, from(#0B3861), to( #A9D0F5)) no-repeat left top;  

maka hasilnya seperti tampilan Posting Blog saya ini khusus pada Home Pages, karena pada Single Pages saya pakai transparent [tanpa warna]
Kawan bisa mengganti semuanya seperti yang saya sebutkan diawal tadi yang penting cari teks background 
Soal warna silahkan kawan menentukan sesuai selera sendiri untuk berkreasi, karena apa yang saya contohkan tersebut merupakan salah satu kreasi saja, dan yang bisa kawan robah kode warna, left, right, top dan bottom.
Kalau semuanya kawan anggap sudah OK silahkan simpan template dan lihat hasilnya, Selamat Berkreasi


Selengkapnya.....

Jadikan Home Page sebagai Daftar Isi



Sekarang saya akan mencoba berbagi lagi dengan kawan Kreasi, Tips Trik maupun Tutorial mungkin, karena saya bukanlah seorang Blogger maupun seorang ahli yang bisa memberikan Catagori dengan benar :O 

Sesuai dengan judul yang saya buat "Home Pages diganti dengan Daftar Isi", :z maksud saya pada umumnya Home Page atau Beranda atau Halaman Depan Kali akan kelihatan Artikel yang terakhir kita publish, ada yang Full, ada yang dipotong dengan Read more [selengkapnya] atau ada juga Judul dengan tanggal saja dan lain sebagainya, itu semua sesuai dengan keinginan masing-masing :y sebagai gambaran kawan, slide diatas adalah contohnya semua itu.
 Caranya sebagai berikut :
  • Silahkan masuk ke Account Blogger dengan ID kawan 
  • Pada Design Template atau Perancang Template pilih Edit [kanan bawah] pada Blog Post [Posting Blog]
  • Rubah Jumlah Posting di halaman utama sesuka kawan, yang selanjutnya Klik simpan
  • Pada Design Template atau Perancang Template pilih Edit HTML
  • Centang radio disamping Expand Template Widget
  • Copas kode berikut dibawah ]]></b:skin>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons, .post-labels, .datebar, .datebarleft, .datebarright, .post-footer, .post-author,  .date-header, .jump-link{
display:none;
}
</style>
</b:if>
Tulisan yang berwarna merah tersebut bisa disesuaikan dengan Blog kawan, merupakan kode-kode untuk tidak menampilkan di Home Page
  • Selanjutnya  cari kode seperti berikut : 
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
 Kalau sudah ketemu, Hapus dan ganti dengan kode berikut :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<data:post.title/> <a expr:href='data:post.url'> » selengkapnya...</a>
<b:else/>
<h3 class='post-title entry-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</b:if>
Ganti kode/tulisan [» selengkapnya...] dengan keinginan kawan misalnya » Read more... atau yang lainnya
  • Cari kode : <data:post.body/> 
  • Hapus kode tersebut dan ganti dengan berikut 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#daftar{display:none;}
</style>
<b:else/>
<style>
#daftar{display:inline;}
</style>
</b:if>
<div id='daftar'>
<data:post.body/>
</div>
  • Simpan template kawan, dan lihat hasilnya 
Celoteh : Kalau tak ada masalah hasilnya pasti seperti gambar / image diatas ini, dan seandainya ada masalah penampilan kawan bisa merubah atau menambah kode-kode seperti tersebut diatas, karena masing-masing Blog pengkodeannya berbeda-beda, contoh .post-author adalah icon penulis blog ada yang berisi dan ada juga tidak.

Selengkapnya.....

Cara Membuat Label Berputar


Sekarang saya akan mencoba berbagi dengan kawan cara membuat Label / Catagori atau apalah namanya yang berputar - putar seperti bola kalau mouse diletakkan di sekitar tampilannya. 
Sebenarnya tentang hal ini sudah banyak para Blogger yang memakai maupun menampilkan di Blognya baik yang sudah senior maupun yang masih yunior, tapi tak ada salahnya hal ini saya sampaikan untuk yang belum tahu cara membuatnya.

Caranya sebagai berikut :
  1. Masuk ke account Bogger dengan ID kawan
  2. Pada Rancangan pilih Edit HTML
  3. Beri tanda centang disamping Expand Template Widget
  4. Cari kode :  <b:section class='sidebar' id='sidebar' preferred='yes'>   atau <b:section-contents id='sidebar-right-1'>
  5. Copas [copy-paste] kode berikut persis dibawahnya 
    <b:widget id='Label100' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <center>
    &lt;object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" &gt;
    &lt;param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /&gt;
    &lt;param name="bgcolor" value="#ffffff" /&gt;
    &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
    <b:loop values='data:labels' var='label'>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='11'><data:label.name/></a>
    </b:loop>
    &lt;/tags&gt;" /&gt;
    </center>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
    Simpan Template kawan dan lihat hasilnya.

    Catatan : Kalau kawan ingin mengganti warna latar belakangnya, silahkan ganti kode #ffffff dengan kode warna selera kawan.
    Selengkapnya.....




     
    BLOGBEGO - © Copyright 2012
    All rights reserved - Powered by Blogger
    ARSIP BLOGBEGO CREATION :