macam widget facebook untuk blog

Social Networking ini memang selalu menempatkan diri pada


1. Like Button
Like Button (tombol suka) ini memungkinkan pengguna Facebook berbagi halaman dari Blog Anda. dengan menggunakan tombol ini maka pengunjung Blog akan terhubung dengan Facebook, dan selanjutnya pengunjung akan berbagi kesukaan mereka dengan pengguna Facebook lainya.

2. Recommendation
Rekomendasi plugin memberikan pengguna pribadi saran untuk halaman di situs Anda yang mungkin mereka sukai. pengguna facebook dapat merekomendasikan/menyarankan halaman situs anda pada orang lain.

3. Login with faces
Login dengan plugin Wajah menunjukkan gambar profil dari teman-teman pengguna yang telah mendaftar untuk situs Anda di samping tombol login. memudahkan pengguna facebook untuk dapat login saat berada di situs anda.

4. Comments
Kotak Komentar Facebook memungkinkan pengguna Fecebook berkomentar pada setiap bagian dari konten di situs Anda. kotak komentar dapat dipasang pada setiap halaman situs anda, fungsinya seperti kotak komentar posting, untuk memberikan komentarnya, pengunjung harus menggunakan ID Facebook.


5. Activity Feed
Kotak Aktifitas Feed dapat menunjukkan kepada pengunjung situs tentang berbagai aktifitas teman-teman Facebook anda, dan mengikuti aktifitasnya tersebut.

6. Like Box
Seperti kotak ini memungkinkan pengguna untuk seperti Anda Facebook Page dan melihat aliran secara langsung dari website Anda.

7. Facepile
Plugin Facepile menunjukkan gambar profil dari teman-teman pengguna yang telah mendaftar untuk situs Anda.

8. Live Stream
Live Streaming plugin memungkinkan pengguna berbagi aktivitas dan komentar Anda secara real-time saat mereka berinteraksi selama acara live.

[READ MORE]

macam widget dasar pada blogger

Blogger menyediakan berbagai macam widget untuk digunakan pada blog anda. widget yang disediakan ini merupakan widget dasar yang biasanya di gunakan untuk melengkapi sebuah blog. selama ini Blogger.com terus mengembangkan layanan tentang ini. pada artikel ini saya akan membicarakan tentang 20 widget dasar yang disediakan Blogger.com. salah satu keuntungan memasang widget yang disediakan Blogger adalah dapat diload bersamaan dengan konten stantar Blogger lainnya di blog anda.

1. Header
pada template standar blogger widget ini otomatis sudah terpasang. header mamang sangat penting, karena sebagai brand awal pada blog anda

2. Arsip Blog
widget ini berfungsi untu menampilkan link untuk menuju pada kumpulan posting anda pada waktu tertentu.

3.Profil
ini merupakan identitas pemilik blog. bila anda berbagi profil anda maka pengunjung dapat langsung mengetahui profil anda.

4. Logo
merupakan logo blogger yang dapat anda pasang pada blog anda. logo ini merupakan link untuk menuju pada situs blogger

5. Tautan berlangganan
ini merupakan link pada suatu berita tertentu, jadi pengunjung dapat mengetahui berita terkini dan mengukutinya dari blog anda. widget tautan ini juga otomatis ter-update dari situs sumbernya

6. Label
widget ini berfungsi untuk menampilkan kategori/kelompok posting tertentu yang terdapat di blog anda. supaya posting anda dapat ditampilkan pada widget ini, anda harus memberi Label terlebih dahulu pada posting anda.

7.Newsrell
ini merupakan sebuah tautan yang berisi sebagian konten dari suatu berita populer tertentu yang terindex pada google

8. Feed
ini merupaka widget untuk menampilkan umpan balik berupa judul posting dari situs tertentu, syarat agar bisa ditampilkan adalahsuatu situs tersebut telah membuka feed situsnya.

9. Daftar
anda bisa membuat suatu daftar dari widget ini, contohnya daftar menu pada blog anda, daftar teman anda, daftar film, atau daftar cewek anda kalau anda mau :). widget ini masih cenderung membuat daftar secara umum, jadi apapun yang anda suka bisa dibuatkan daftarnya dengan widget ini.

10. Daftar Link
widget ini merupakan lebih khusus lagi yaitu daftar link menuju halaman situs tertentu. anda juga bisa menambahkan link pada posting-posting anda menggunakan widget ini.

11. Daftar blog
nah yang ini lebih khusus lagi yaitu membuat daftar dari blog-blog yang anda buat. jadi pengunjung bisa mengikuti blog-blog anda.

12. polling
Lakukan survei terhadap pengunjung Anda dengan menambahkan polling ke blog Anda. disini anda bisa berinteraksi dengan pengunjung dengan media Polling.

13. Baris Video
Klip tampilan dari YouTube dan Google Video untuk disaksikan oleh pembaca Anda tanpa meninggalkan halaman. Blogger dan YouTube sudah menjadi anak perusahaan Google, jadi untuk urusan akses video jadi lebih mudah tentunya. dengan memasukkan kata kunci tertentu maka secara otomatis akan beberapa video yang terkait dalam index YouTube. jika anda punya video yang disimpan di YouTube maka coba saja tampilkan Video tersebut dengan Widget ini.

14. Tampilan Silde
Tambahkan tampilan slide foto ke blog Anda. dengan memilih sumber foto yang anda inginkan maka anda dapat menampilkan Fotoslide di blogg anda. atau anda juga bisa memasukkan URL tertentu untuk menampilkannya.

15. Gambar
Tambahkan gambar dari komputer Anda atau dari tempat lain di web. anda bisa mengupload gambar atau memasukan URL gambar tertentu dan langsung memasangnya widget ini.

16.Text
Tambahkan beberapa kata ke blog Anda, seperti sebuah pesan selamat datang. Tuliskan apapun yang anda perlukan untuk ditampilkan dan dibaca oleh pengunjung. dalam widget ini anda dapat menuliskan dengan Mode HTML atau Mode Rich Text.

17. HTML java Script
Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. pada widget ini anda dapat menambahkan berbagai java script ataupun kode HTML.

18. Kotak penelusuran
Telusuri blog blog, blogroll, dan apapun yang pernah Anda tauti. widget ini akan memudahkan pengunjung untuk mencari suatu artikel baik dari blog anda maupun dari situs lainnya.

19. Pengikut
Menampilkan daftar pengguna yang mengikuti blog Anda. Pengguna dalam hal ini adalah orang-orang yang menggunakan/memiliki Google Account yang mengikuti Blog anda. Widget ini merupakan sebuah layanan Social Networking milik Google yaitu Google Friend Connect. dengan widget ini anda dapat mengetahui orang-orang (Google Account) yang mengikuti Blog anda.

20. Laman
Menampilkan laman mandiri di blog Anda. Laman mirip dengan posting, yang membedakannya yaitu laman tidak memiliki kotak komentar dan juga URL Laman juga berbeda dengan posting. jadi Laman disini yaitu Halaman tersendiri pada blog.

Demikian tadi tentang 20 widget dasar Blogger yang siap di pasang pada blog anda, silakan anda memasangnya sesuai dengan kebutuhan anda...

[READ MORE]

cara pasang related post (posting terkait) hoctro

Related post (posting terkait) ini termasuk mudah dalam pemasangannya, cukup beberpa langkah maka Related Post ini sudah terpasang pada Blog. Hoctro merupakan pembuat dari Related Post yang cukup simpel ini. Untuk jenis dan ukuran Font yang ditampilkan pada Related Post ini menyesuaikan dengan pengaturan jenis dan ukuran Font yang ada pada template.

itu tadi sedikit review tentang Related Post ini, selanjutnya mari kita pasangkan pada Template, tapi sebelum mengedit template sebaiknya anda sudah membackup lengkap templete dan menggunakan menu Find untuk mempermudah pencarian kode. Oke kita langsung pada pemasagannya...

PEMASANGAN
Langkah1. Masuk menu RANCANGAN, pilih EDIT HTML. Beri tanda centang pada EXPAND WIDGET.

Langkah 2. cari kode seperti ini:

<data:post.body/>

Langkah 3. Copy-paste kode berikut ini di bawah kode langkah 2.

<div class='clear-block;'/><b:if cond='data:blog.pageType == "item"'><div class="similiar"><!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --><!-- *****************Related Articles by Labels - Take Two****************** --><!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> <u><a href='http://www.jackbook.com/' title='Related Posts on <strong style="color: black; background-color: rgb(153, 255, 153);">Blogger</strong> Modified by JackBook.Com. Read More?'>Jack Book</a>
</u></div>
<script type="text/javascript">
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>
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('data2007').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>
</div>
</b:if>

Langkah 4. Simpan perubahan.

Bagaimana mudah bukan, saya yakin anda pasti bisa. semoga yang saya sampaikan bermanfaat. terima kasih.

[READ MORE]

cara pasang related post (posting terkait) blogger

Saat saya mengunjungi sebuah situs dan membaca salah satu postingnya sampai selesai, di bagian akhir terdapat beberapa link yang menghubungkan artikel lainnya yang berkaitan, ya itulah Related Post.

Related Post (posting Terkait) kali ini tak kalah bagusnya, dengan menggunakan Style yang ada maka Related Post ini dapat terlihat lebih menarik, dari pada sebuah tulisan yang bertautan biasa.

Pemasangan Related Post ini, juga cukup mudah yaitu dengan edit template anda, sebelum mengedit template sebaiknya anda sudah membackup lengkap template dan menggunakan menu Find untuk mempermudah pencarian kode. Oke kita langsung pada pemasagannya...

Langkah 1. Cari kode seperti ini:

]]></b:skin>

Langkah 2. Copy-paste kode berikut ini diatas kode Langkah 1.

#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 ul li {
display : block;
background : url(&quot;http://i624.photobucket.com/albums/tt327/digitalstatement/10mreom.png&quot;) 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;
}

Langkah 3. Cari kode seperti ini:

</head>

Langkah 4. Copy-paste kode berikut ini diatas kode Langkah 3.

<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>

Langkah 5. Cari kode seperti ini:

</body>

Langkah 6. Copy-paste kode berikut ini dibawah kode Langkah 6.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </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>

Langkah 7. Simpan Perubahan.

[READ MORE]

cara pasang dan pengaturan related post with thumbnail (posting terkait dengan gambar) bloggerpluggins

Related Post ini terlihat sangat menarik, pasti anda tahu sebabnya. ya, karena related post yang dibuat oleh Bloggerpluggins ini selain menampilkan judul, juga menampilkan gambar kecil (thumbnail) dari posting yang berkaitan. Dengan dilengkapi thumbnail maka related post ini dapat menarik penngunjung untuk membaca artikel lainnya. pada artikel ini saya akan membahas cara pemasangan dan sedikit pengaturan untuk dapat disesuaikan pada Blog anda.

Baiklah kita menuju pada pemasangan kode related post ini, namun sebelum mengedit template sebaiknya anda sudah membackup lengkap templete dan menggunakan menu Find untuk memudahkan pencarian kode yang dimaksud.

PEMASANGAN
Langkah 1, Masuk pada menu TATA LETAK > EDIT HTML. Beri tanda centang pada EXPAND WIDGET.

Langkah 2, Cari kode berikut ini

</head>

Langkah 3, Copy-paste kode dibawah ini diatas kode Langkah 2.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; }
#related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; }
#related-posts a{ color:black;}
#related-posts a:hover{ color:black;}
#related-posts a:hover { background-color:#d4eaf2; }
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Langkah 4, carilah kode berikut ini:

<div class='post-footer-line post-footer-line-1'>

Langkah 5, Copy-paste kode berikut ini, dibawah kode langkah 4.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Langkah 6, simpan perubahan dan lihat blog anda.


PENGATURAN POSTING

Pengaturan yang saya maksudkan disini adalah jumlah posting terkait yang ditampilkan. Anda dapat mengaturnya jumlahnya sesuai dengan kebutuhan denngan mengganti angka warna merah pada kode langkah 5 diatas, dengan catatan sebagai berikut:

jumlah 'max-results' berselisih satu lebih banyak dari jumlah 'var maxresults'
contoh:
jika 'max-result=6', maka 'var maxresult=5'
jika 'max-result=7', maka 'var maxresult=6'
jika 'max-result=8', maka 'var maxresult=7'

knj

[READ MORE]

cara pasang manual read more dan penggunaannya

Maksud dari judul diatas yaitu Read more ini dapat digunakan memenggal posting tertentu dan juga bagian posting yang dipenggal bisa disesuaikan.

Intinya anda dapat memenggal posting tertentu diantara posting lainnya dan konten yang ditampilkan pada posting yang dipenggal banyaknya bisa saja berbeda dengan posting yang lainnya.

Itu tadi sedikit review tentang Read More ini, selanjutnya kita langsung menuju pokok bahasan sesuai judul diatas. Namun, sebelum mengedit template sebaiknya anda sudah membackup templete lengkap dan menggunakan menu Find (control F) untuk mempermudah pencarian kode.

PEMASANGAN
Langkah 1. Masuk pada halaman RACANGAN, lalu pilih EDIT HTML, dan beri tanda centang EXPAND WIDGET.

Langkah 2. Cari kode berikut ini:

<data:post.body/>

Langkah 3. Hapus kode diatas lalu ganti dengan kode dibawah ini:

<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
<!-- End Read More Code -->

Langkah 4, Simpan perubahan.

Sampai dengan langkah 3, script read more sudah terpasang pada template anda. selanjutnya cara untuk mempermudah anda melakukan pemenggalan artikel adalah sebagai berikut :

Langkah 5. Masuk menu PENGATURAN, lalu pilih FORMAT.

Langkah 6. Copy paste kode berikut ini, pada form TEMPLATE ENTRY.

<span id="fullpost">

</span>

Langkah 7, Simpan pengaturan. Fungsi Manual Read More sudah terpasang.

Sampai dengan langkah 7 diatas, maka setiap anda membuat ENTRY BARU, kode tersebut akan muncul pada form Entry Baru anda (pada mode Edit HTML).


PENGGUNAAN
Untuk menggunakan fungsi Read More ini, anda harus menempatkan kode pemenggalan pada Editing Entry anda (Mode Edit HTML), Selanjutnya berikut ini adalah contoh cara memenggal artikel pada Editing Entry:

dasdsadas dsadsa gkfkgf kj kfkdmfkd gsdg djfksdmkfmsd fdksggk gdsmkgmdkf mfkdm gtunvkmfv mgfjv n dfmd fmdjfjd vjfnvjfnv gjfjng dfkmsdkfmd dfmkdmfkd fdfnjd jngfjgnf djfnjdnjfn fjdnfjndjnfd fndjfndj ggoerpokfkodmkfo forenfjsd
<span id="fullpost">
dsadsa kdmksamds dkmskdmksad sdmkasmdks dsnjdnsj dsjndjsna sjdnjsnds dnsjnd frformfkormg dfmrnf dfndjnf dfndsjfn djfnjdnf rjfnjrnf rfjrnf fjdfjdnfjdsfd fdkfd dfdknfjenfuirfnf dfjdjnf djfnrjfn frgmfkkgflkgfikhjg
</span>

Keterangan dari contoh diatas adalah:
1. Tulisan berwarna Hijau, merupakan Artikel yang akan ditampilkan.
2. Tulisan berwarna Merah, merupakan Kode Pemenggalan.
3. Tulisan Berwarna Biru, merupakan Artikel Selengkapnya

Sesuai dengan namanya Fungsi Manual Read More ini memang dalam penggunaanya kita harus mengatur posting satu-persatu untuk dapat memenggal artikel. Demikian tadi artikel cara memasang dan penggunaan Manual Read More pada Blog semoga bermanfaat...

[READ MORE]

cara pasang auto read more dan pengaturannya pada blog

Read more kali ini sudah berfungsi secara otomatis memenggal semua artikel sebelum ditampilkan pada halaman posting. pada posting kali ini saya akan menyampaikan dua pokok penting yaitu pemasangan auto read more dan pengaturan variabelnya.

Untuk pemasangannya cukup mudah, yaitu melalui halaman edit HTML. Demikian juga pengaturannya, anda cukup memasukkan value yang telah tersedia.

Langsung saja pada pokok bahasan kita, namaun sebelum mengedit template sebaiknya Anda sudah membackup templete lengkap, dan menyimpannya di komputer anda. serta menggunakan menu Find (control F) untuk mempermudah pencarian kode yang dimaksudkan.

PEMASANGAN
Langkah 1. Masuk kehalaman 'EDIT HTML', dan beri tanda centang pada 'EXPAND WIDGET TEMPLATE'.

Langkah 2. Cari kode berikut ini:

</head>

Langkah 3. Letakan script dibawah ini di atas kode </head>.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Langkah 4. Selanjutnya cari kode berikut ini:

<data:post.body>

Langkah 5. Hapus kode <data:post.body> lalu ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Langkah 6. simpan perubahan dan lihat Blog anda.


PENGATURAN
Anda dapat mengatur variabel yang ada pada Auto read more ini sesuai dengan kebutuhan anda, contohnya sebagai berikut:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Demikian cara memasang Auto read more dan pengaturan variabelnya, selamat mencoba dan semoga berhasil.... happy blogging.

[READ MORE]

cara pasang recent post (posting terbaru) with simple spy abu farhan

Widget ini merupakan hasil modifikasi oleh Abu Farhan, di adopsi dari Recent post with thumbnail (bloggertrick) dan Simple spy (Scarlet Theme)







Pemasangan Widget
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.antaresia.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Langkah 5: Simpan perubahan, dan lihat blog anda...
Nah, sekarang di Blog anda sudah terpasang 'widget artikel terbaru dengan thumbnail'. selanjutnya anda dapat melakukan pengaturannya seperti berikut...

[READ MORE]

cara pasang recent post with thumbnail (posting terbaru dengan gambar) bloggertrick

Satu lagi widget recent post (posting terbaru) dengan dilengkapi dengan gambar kecil (thumbnail).

Widget yang diterbitkan oleh Bloggertriks ini terlihat cukup elegan. selain menampilkan judul posting terbaru dan thumbnail, widget ini juga menampilkan comment tracker. pemasangan widget ini juga sangat mudah, anda bisa langsung menambahkannya pada elemen laman Blogger.

Pemasangan Widget
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://schemar-mag.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Pengaturan Widget
Berikut adalah contoh pengaturannya

boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NAMABLOGANDA.com/ (Ubah sesuai URL blog masing2)

[READ MORE]

recent post with thumbnail (posting terbaru dengan gambar) bloggerplugins

Tampilan widget ini mamang sama seperti widget yang pernah saya posting disini. Bedanya pada widget ini menggunakan Javascript dan CSS.

Bloggerpluggins memang sudah lama menerbitkan widget ini. tak ada salahnya kalau kita bahas kali ini. pemasangannya pun juga cukup mudah, jadi bagi anda yang ingin mencobanya silakan saja. melalui posting ini akan saya share waktu meggunakan widget ini.

PEMASANGAN WIDGET
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var numchars = 100;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Langkah 5: Simpan perubahan, dan lihat blog anda...
Nah, sekarang di Blog anda sudah terpasang 'widget artikel terbaru dengan thumbnail'.


PENGATURAN VARIABEL
anda dapat mengatur variabel yang tersedia berikut ini:

var numposts: Jumlah posting yang ditampilkan
var numchars: Jumlah karakter yang ditampilkan
var showpostthumbnails: Gambar kecil ('true'=ditampilkan, 'false'=dihilangkan)
var displaymore: Link baca selengkapnya ('true'=ditampilkan, 'false'=dihilangkan)
var displayseparator: Garis antar posting ('true'=ditampilkan, 'false'=dihilangkan)
var showcommentnum: Jumlah komentar ('true'=ditampilkan, 'false'=dihilangkan)
var showpostdate: Tanggal posting ('true'=ditampilkan, 'false'=dihilangkan)
var showpostsummary: Ringkasan ('true'=ditampilkan, 'false'=dihilangkan)

PENGATURAN JENIS POSTING
Script berikut ini memberi perintah menampilkan "posting terbaru pada Blog anda"...

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

anda dapat menggantinya dengan label/kategori posting anda, contohnya seperti ini:

<script src="/feeds/posts/-/NamaLabel?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Maka yang akan ditampilkan adalah "Posting terbaru pada Label" yang anda tuliskan. selain itu anda juga dapat menampilkan beberapa label sekaligus, contohnya seperti ini:

<script src="/feeds/posts/-/NamaLabel1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

PENGATURAN STYLE
Berikut ini adalah kode CSS yang digunakan dalam widget

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>

Anda dapat mengaturnya seperti contoh berikut ini:

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 5px 5px 0;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>

maka thumbnail yang di tampilkan posisinya akan berada di Kiri.

Jika anda memang sudah menguasai Javascript dan CSS maka, anda dapat memodifikasinya sesuai dengan kebutuhan anda. Demikian tadi coret-coret saya untuk widget artikel terbaru dengan thumbnail. semoga bermanfaat...

[READ MORE]

cara pasang recent post (posting terbaru) advance blogger

Widget ini cukup populer di kalangan Blogger. disamping desainnya yang menarik, pemasangannya pun sangat mudah. widget ini dapat anda temukan dan menambahkannya dari halaman pencarian widget Blogger.

Widget ini dapat menampilkan judul dan penggalan artikel terbaru dari blog dilengkapi dengan tanggal dan link baca selengkapnya. selain itu gambar kecil (thumbnail) juga dapat ditampilkan.

Pemasangan Widget
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dasbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
Langkah 3: Tambahkan 'Gadget baru', lalu tuliskan 'Recent Post' pada kotak pencarian Gadget bagian kanan atas, lalu carilah.
Langkah 4: Dari hasil pencarian widget yang ada pilihlah 'Recent Post Advance'.










Langkah 5: tambahkan widget tersebut dengan mengaturnya terlebih dahulu.
Langkah 6: Simpan perubahan, dan lihat Blog anda..
Nah, sekarang di Blog anda sudah terpasang 'widget artikel terbaru dengan thumbnail'. anda dapat melakukan pengaturan seperti berikut...

Pengaturan Widget
pengaturan pada ini cukup mudah anda cukup memberi tanda centang atau keterangan yang dibutuhkan pada widget ini.

Judul: judul widget
Ketinggian: ketinggian widget
Blog URL: URL blog anda
Number of post to display: Jumlah post yang ditampilkan
Dispaly post thumbnail: Tampilan gambar kecil
Display post summaries: Tampilan ringkasan post
Summary length: Jumlah karakter ringkasan post
Display post date: Tampilan tanggal post
Display the number of comment: Tampilan baca selengkapnya
Display separator: Tampilan garis pemisah antar post

Selesai, semoga bermanfaaat...

[READ MORE]