Cara Membuat Related Post JQuery ( Berkedip Bergantian Dan Slider)

hanya pilih Dashboard,lalu Tata Letak / Rancangankemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,  Kemudian letakkan kode berikut


<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script><center><strong>artikel terkait</strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
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:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

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

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
showRandomImg = true;

boxwidth = 200;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://sharetex.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>


Lalu Simpan dan lihat hasilnya


catatan


Artikel terkait gantilah dengan judul widget jQuery related post ini.
- untuk :
http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox gantilah dengan url gambar default (gambar ini akan muncul saat sebuah posting tidak mengunggah sebuah gambar)
- untuk :
http://shartex.blogspot.com/ gantilah dengan alamat url blog sobat

Continue reading...

cara buat gambar berputar dalam posting

Langsung ke Tahap Pertama...
1. Login Blogger ( DiSini )
2. Pilih dan klik ( Rancangan )
3. Pilih dan klik ( Edit HTML )
4. Cari kode ( ]]></b:skin> ) dengan menggunakan ( CTRL+F )
5. Letakan Kode Berikut Tepat Di Atas Kode ( ]]></b:skin> )

.post img{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

6. ( Simpan Template ) dan lihat hasilnya,


Catatan: Kode yang diatas hanya membuat gambar-gambar yang ada di dalam postingan blog berputar ketika di sorot mouse

Continue reading...

Cara Membuat scroll untuk arsip blog

 Login dulu ke blogger.com

 Pilih menu "Design"

Klik "Edit HTML"

 buat jaga-jaga kalo terjadi kesalahan, sebaiknya backup dulu template yang kita gunain, caranya klik "Download Full Template"

 Beri tanda centang pada "Expand Template Widget"

 Cari kode ini <div id='ArchiveList'> (supaya lebih gampang, tekan ctrl+f ‘n masukan kode yang dicari)

 Kalo udah ketemu, copy/paste kode di bawah ini tepat sebelum kode <div id='ArchiveList'>

<div style='overflow:auto; width:ancho; height:100px;'>

 Kalo udah, tambahin kode </div> di atas kode <b:include name='quickedit'/>

Supaya lebih jelas, coba perhatiin beberapa kode yang ada dibawah ini deh !!

<div style='overflow:auto; width:ancho; height:100px;'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

 Klik "Save Template"

Catatan:

 Teks warna merah adalah posisi dimana kode harus diletakkan

Teks warna hijau adalah ukuran dari tinggi kotak arsip blog yang udah kita tambahin scroll button

Continue reading...

Cara membuat Popular Post dengan Animasi gambar berputar

• Login ke Blog anda > Design > Pada page lemen silahkan add gadgedbaru Popular Posts seperti contoh gambar di bawah ini.

• Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
• Centang image thumbnail
• Pada bagian snipet tidak perlu di centang
• Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
• Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

• Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
• Cari kode ]]></b:skin> dan paste Css berikut di atasnya

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

• Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
• kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

• Sekarang simpan template

Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yangberwarna merah kadang ada yang kodenya PopularPost2. Jika kodenyaPopularPost2 yah anda tianggal mengganti kode yang saya berikan (yangwarna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.

Continue reading...

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):    jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'> jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>
untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman,

Continue reading...

Cara Memasang Recent Post

Langsung saja kepada pokok persoalan, disini sobat tidak perlu sampai edit template cukup login ke dasbor sobat Rancangan - Elemen Laman tambah gadget selanjutnya sobat pilih HTML/JavaScript selanjutnya copy pastekan kode berikut :

Untuk Recent Post berikut kodenya :


<div style="overflow:auto; padding:5px; width:270px; height:280px; background-color: ; border:0px solid #ccc;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[1] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[2] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[3] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[4] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
showRandomImg = true;
boxwidth = 268; 
cellspacing = 8;
borderColor = "";
bgTD = "";
thumbwidth = 40;
thumbheight = 40;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.andisyam.web.id/";
</script>
<script src="http://vbcomp.googlecode.com/svn/trunk/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>

ketrngn
untuk yang berwarna merah, silahkan sobat atur sesuai keinginan sepeti lebar kotak, jarak antara, lebar dan tinggi image thumbnails, ukuran huruf dan jumlah recent post yang akan sobat tampilkan.

Continue reading...

Cara Tambah Jenis Flash Label Cloud Wordle (FatColud) Widget Untuk Blogger / Blogspot

Hi! Pertama, saya berharap Anda sangat Selamat Tahun Baru. Ya, widget blogger baru di depan Anda. Pernahkah Anda melihat kata Awan Wordle? Widget ini mirip dengan awan Wordle kata disebut sebagai FatCloud. Dengan widget ini Anda dapat menampilkan label Anda sebagai awan kata Wordle dalam format yang berbeda. Widget ini berbasis Flash dan Menghasilkan Label Cloud (FatCloud) secara otomatis.

Ini mencakup Berbagai jenis Font, Differenttypes Sudut teks dan Skema Warna dengan desain kustom juga, sehingga Anda dapat Desain Label Cloud Anda berbeda

Saya mencakup semua pilihan di widget ini. Lihat di bawah layar-shot

Bagaimana Menambahkan Widget ini ke Blogger?

1. Masuk ke Akun Blogger
2. Pergi ke Desain> Edit Html
3. Pencarian untuk Kode Bellow dari Bagian (Tanpa memeriksa Perluas WidgetCheckbox)

< b : section class = 'sidebar' id = 'sidebar' preferred = 'yes' > 

Catatan: Kode di atas tidak terlihat di semua template karena perubahan dalam Kelas atauId. Untuk anggaplah Jika template memiliki dua sidebars dari Kanan dan Kiri Kelas, kemudian atau Id diubah ke sidebar kiri, sidebar kanan, sidebar-wrapper-kiri dan seperti begitu ... 

Jadi harap pastikan sebelum pencarian di atas kode

Dan Akhirnya menambahkan Kode Widget Dihasilkan hanya Setelah itu Dan Simpantemplate Anda 

Ingin ada Bantuan tentang widget ini?, Lalu Hubungi saya melalui Komentar atau Klik di sini

<b:widget id='Label89' 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'>
<div id='way2blogging_label_cloud' style='width:100%;height:300px'>
<b:loop values='data:labels' var='label'>
<a class='tag-link' expr:href='data:label.url' expr:style='"font-size: 1" + data:label.cssSize + "pt;"'> <Data : label.name /> </ a>
</ B: loop>
</ Div>
<script src='http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js' type='text/javascript'/>
<p style='font-size:0.6em;text-align:right'> FatCloud untuk Blogger oleh <a href='http://way2blogging.blogspot.com'> Way2Blogging </ a> </ p>
<script type='text/javascript'>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = baru FatCloud ("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Horizontal", "sizeRatio": "12", "colorscheme": "Aqua", "fgColor": "# 868A08", "mgColor" : "# 7401DF", "SColor": "# F5F6CE", "bgcolor": "# FFFFFF", "font": "Laporan", "randomFont": "ya"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negosiasi", "Laporan"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById ("way2blogging_label_cloud") style.visibility = "tersembunyi".;
</ Script>
<b:include name='quickedit'/>
</ Div>
</ B: includable>
</ B: widget>

Continue reading...

Cara Membuat Recent Post berjalan

sebelumnya saya akan menjelaskan secara singkat apa itu Recent Post..?
Recent Posts adalah widget yang menampilkan beberapa judul posting terbaru, yang bisa anda tampilkan pada sidebar sehingga pengunjung lebih mudah mengetahui posting-posting yang terbaru.

Biasanya recent post hanya menampilkan link judul atau dengan Thumbnail Image. Namun sekarang ada yang sedikit berbeda yaitu recent post dengan Thumbnail Image dengan model Slide Show (berjalan kebawah).

Jika anda berminat dan ingin membuatnya, ikuti langkah berikut :


1. Login ke akun Blogger anda
2. Klik Perancang >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://rizki-khaizir.googlecode.com/files/recentpostslidethumbnails.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 25;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>


5. Klik Simpan
6.dan  Lihat hasilnya.


Catatan :

1. Untuk membuat halaman menjadi lebih tinggi, gantilah nilai height:282px sesuai keinginan;
2. Untuk mengganti kecepatan, rubahlah nilai var speed = 400; sesuai keinginan anda;
3. Rubahlah nilai var numposts = 25; untuk menampilkan jumlah postingan;
4. Rubahlah nilai var numchars = 75; untuk mempilkan jumlah karakter;
5. Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau anda bisa langsung masukkan feeds anda dalam script tersebut.

Selamat mencoba, anda juga bisa meng-otak-atik script sesuai kehendak anda . Semoga berhasil dan bermanfaat.

Continue reading...

lebih baik mati (putih tulang) daripada malu (putih mata)

Madura adalah nama pulau yang terletak di sebelah timur laut Jawa Timur. Pulau Madura besarnya kurang lebih 5.250 km2 (lebih kecil daripada pulau Bali), dengan penduduk sekitar 4 juta jiwa.
Suku Madura merupakan etnis dengan populasi besar di Indonesia, jumlahnya sekitar 20 juta jiwa. Mereka berasal dari Pulau Madura dan pulau-pulau sekitarnya, seperti Gili Raja, Sapudi, Raas, dan Kangean. Selain itu, orang Madura banyak tinggal di bagian timur Jawa Timur biasa disebut wilayah Tapal Kuda, dari Pasuruan sampai utara Banyuwangi. Orang Madura yang berada di Situbondo dan Bondowoso, serta timur Probolinggo, Jember, jumlahnya paling banyak dan jarang yang bisa berbahasa Jawa, juga termasuk Surabaya Utara ,serta sebagian Malang .
Disamping suku Jawa dan Sunda, orang Madura juga banyak yang bertransmigrasi ke wilayah lain terutama ke Kalimantan Barat dan Kalimantan Tengah, serta ke Jakarta,Tanggerang,Depok,Bogor,Bekasi,dan sekitarnya, juga Negara Timur Tengah khususnya Saudi Arabia. Beberapa kota di Kalimantan seperti Sampit dan Sambas, pernah terjadi kerusuhan etnis yang melibatkan orang Madura. Orang Madura pada dasarnya adalah orang yang suka merantau karena keadaan wilayahnya yang tidak baik untuk bertani. Orang Madura senang berdagang, terutama besi tua dan barang-barang bekas lainnya. Selain itu banyak yang bekerja menjadi nelayan dan buruh,serta beberapa ada yang berhasil menjadi,Tekonokrat,Biokrat,Mentri atau Pangkat tinggi di dunia militer.
Suku Madura terkenal karena gaya bicaranya yang blak-blakan serta sifatnya yang temperamental dan mudah tersinggung, tetapi mereka juga dikenal hemat, disiplin, dan rajin bekerja. Untuk naik haji, orang Madura sekalipun miskin pasti menyisihkan sedikit penghasilannya untuk simpanan naik haji. Selain itu orang Madura dikenal mempunyai tradisi Islam yang kuat, sekalipun kadang melakukan ritual Pethik Laut atau Rokat Tasse (sama dengan larung sesaji).
Harga diri, juga paling penting dalam kehidupan orang Madura, mereka memiliki sebuah peribahasa angok pote tollang, atembang pote mata. Artinya, lebih baik mati (putih tulang) daripada malu (putih mata). Sifat yang seperti ini melahirkan tradisi carok pada masyarakat Madura.

Continue reading...

Tambahkan Facebook Seperti Kotak di bagian bawah posting

Facebook seperti kotak adalah plugin bagus yang memungkinkan pengguna Facebook untuk tidak langsung berlangganan update blog Anda melalui account Facebook mereka.
Pengunjung website Anda akan menerima update blog Anda di Situs Web Facebook mereka.
Sebelum Anda menambahkan Facebook seperti kotak di bawah posting blogger atau pada bagian manapun dari blog Anda,
Anda akan perlu untuk menciptakan sebuah Facebook Seperti Halaman dengan membaca tutorial ini,

Anda dapat melihat kotak ini muncul di bawah semua posting saya.
Ini adalah area yang lebih baik untuk menempatkan kotak seperti Anda dari sidebar karena hal berikutnya pembaca Anda akan melihat setelah membaca posting Anda.
Jadi daerah ini dapat meningkatkan jumlah suka blog Anda.
Mari kita bekerja kemudian!

Menambahkan Facebook Seperti Kotak Dibawah Posting Blogger

Pergi Untuk Blogger> Desain> Edit HTML
Backup template Anda
Periksa "Expand Template Widget" kotak
Pencarian untuk ini, <data:post.body/>
Hanya setelah itu paste kode di bawah ini,



<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/>

Membuat perubahan ini silahkan:

• Ganti teks biru tebal dengan Facebook Anda Seperti Page Link (Jangan menyertakan http://)
• Dalam URL Anda Page mengganti semua kembali garis miring yaitu (/) dengan% 2F

misalnya jika URL Halaman Seperti Anda tampak seperti ini,

kemudian setelah mengganti garis miring kembali dengan% 2F itu akan terlihat seperti ini,

• Untuk mengubah lebar, hanya menyesuaikan nilai 590

5. Simpan template Anda dan Anda selesai! 

Continue reading...

Tampilan Related Posts with Thumbnails Dalam Blogger

Apa linkwithin

linkwithin adalah sebuah widget bebas memungkinkan kita untuk menampilkan daftar dari posting terkait dengan thumbnail di footer posting.

pada saat Anda dapat memilih salah satu dari tiga faktor yang menentukan posting yang muncul dalam daftar. 3 faktor yang

• Relevansi
• Popularitas
• Kebaruan

Cara Tambah Related Posts Dengan WidgetTo linkwithin Thumbnail linkwithinAnda blooger Blog

Sangat mudah untuk menambahkan widget ini ke blogspot, ada dua cara untuk menambahkannya, dan setiap orang harus memilih cara yang tepat.

Jika Anda menggunakan salah satu Blogger Standar (Default) Template.

jika Anda menggunakan template standerd hanya pergi ke LinkWithIn.com 
Anda akan menemukan bentuk kecil di sebelah kanan, mengisinya, dan memilih blogger sebagai platform Anda. dan dan ikuti instruksi. 
setelah menginstal widget dengan cara ini Anda akan melihat Anda mungkin seperti kisah-kisah yang terkait di halaman posting Anda setelah setiap posting, di halaman utama Anda, dan pada halaman hasil pencarian Anda.

Jika Anda Gunakan A Template Disesuaikan.

Cara ini digunakan untuk menambahkan widget ke blog Anda jika Anda:

• Gunakan template yang dikustomisasi blogger
• Ingin menyesuaikan widget untuk blog Anda

Langkah 1

Pergi ke LinkWithIn.org , 
Isi formulir di sisi kanan, tapi untuk Platform pilih Lainnya

kemudian klik Get Widget Anda akan berada di halaman yang disebut Instal Widget pada Platform lain 
dan Anda akan melihat kode di sana. tidak menyalin kode tapi menemukanlinkwithin_site_id seperti yang Anda lihat dalam gambar. menemukannya dan menyalinnya, itu harus someting seperti ini 
48394 kemudian menyimpannya dalam sebuah file notepad atau simpan dimana saja.

Langkah 2

Pergi ke Layout> Edit HTML di dashboard Blogger Anda dan memastikan Anda telah memeriksa "Expand Widget Templates" kotak. 
dan menggunakan finder browser Anda dan menemukan tag ini

<div class='post-footer'> 

atau mirip tag, Anda harus menemukan post-footer tag.

Langkah 3

setelah Anda menemukan itu, tepat sebelum melewati kode berikut.

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = YOUR_SITE_ID;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img
src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin"
style="border: 0" /></a>
</b:if>

Langkah 4

Ubah YOUR_SITE_ID Untuk ID Anda sendiri disimpan> pada langkah 1.

Langkah 5

Meninjau template Anda dan melihat apakah ia bekerja atau tidak. 
dan hanya itu.

Continue reading...