Pusat Belanja Tupperware Online Terpercaya: Tips Blogger |Tupperware Promo

Showing posts with label Tips Blogger. Show all posts

CARA MEMBUAT FB LIKE MELAYANG PADA BLOG

CARA MEMBUAT FB LIKE MELAYANG PADA BLOG - Membuat FB Like Melayang Pada Blog merupakan satu alternatif untuk menampilkan widget di blogn dan memasangnya secara floating dan akan turun jika croll mouse ke bawah dan enaknya ada tombol closenya.

Berikut Langkah-langkah cara membuat FB Like melayang Pada Blog

Syaratnya kita sudah punya halaman fanpage facebook, lalu Ambil kode Script Likebox yang sudah disesuaikan dengan blognya. Bagi yang belum punya fanpage facebook monggo silahkan dibuat dulu, mudah ko. Y blm tau cara membuat likebox lihat tutorialnya di : Cara Membuat dan Memasang Facebook Likebox di Blog. Jika semua senjata sudah siap, ayoo sekarang kita menuju TKP praktekin bareng2 :

Anda Harus sudah punya halaman fanpage facebook.
Daftarkan halaman facebook anda DISINI
Kemudian Login Seperti biasa ke akun blognya masing2
Pada halaman Dashboard blog pilih >> Tata Letak >> Lalu Klik Add a Gadget atau Tambah Gadget !!!
Scroll ke bawah sedikit >> Lalu pilih Widget HTML/Javascript
Jika sudah Copy Kode di Bawah ini dan Paste di dalam Widget kolom HTML/Javascript !!! 

<style type="text/css">

#topbar{

position:absolute;

padding-left:260px;

background-color: transparancy;

width: 300px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<br />

<div class="clear">

</div>

<div id="topbar">

<table border="1" bgcolor="FFFFFF">

<tr>

<td>

<div style="text-align: right;">

<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_GZ7uWA8hWQtilawnnAIWSP1OF0KPGDPhu6E0nBgaeLdAiwNKl6zTTD6gNg73jpVk78nWhombeSkwl8DRVkynPYNTmikTKzxrmsgLFZlTuoDP6JsJl5r1vXJ1ZH4-3ZxKLz8MLAmsVSr/s1600/close3.png" /></a></div>

<center>

<div style="background: #fff;">

Kode Script Facebook Likebox Here !!!

</div>

</center></td>

</tr>

</table>

</div>
Save !! Dan Lihat Hasilnya

NB : Ingat Ganti Kode merah "Kode Script Facebook Likebox Here !!!" dengan kode script yang sudah diambil dari fanpage facebook yang sudah dibuat sebelumnya .

Berikut Langkah-langkah cara membuat FB Like melayang Pada Blog

Anda Harus sudah punya halaman fanpage facebook.
Daftarkan halaman facebook anda DISINI
Kemudian Login Seperti biasa ke akun blognya masing2
Pada halaman Dashboard blog pilih >> Tata Letak >> Lalu Klik Add a Gadget atau Tambah Gadget !!!
Scroll ke bawah sedikit >> Lalu pilih Widget HTML/Javascript
Jika sudah Copy Kode di Bawah ini dan Paste di dalam Widget kolom HTML/Javascript !!! 

<style type="text/css">

#topbar{

position:absolute;

padding-left:260px;

background-color: transparancy;

width: 300px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<br />

<div class="clear">

</div>

<div id="topbar">

<table border="1" bgcolor="FFFFFF">

<tr>

<td>

<div style="text-align: right;">

<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_GZ7uWA8hWQtilawnnAIWSP1OF0KPGDPhu6E0nBgaeLdAiwNKl6zTTD6gNg73jpVk78nWhombeSkwl8DRVkynPYNTmikTKzxrmsgLFZlTuoDP6JsJl5r1vXJ1ZH4-3ZxKLz8MLAmsVSr/s1600/close3.png" /></a></div>

<center>

<div style="background: #fff;">

Kode Script Facebook Likebox Here !!!

</div>

</center></td>

</tr>

</table>

</div>
Save !! Dan Lihat Hasilnya

NB : Ingat Ganti Kode merah "Kode Script Facebook Likebox Here !!!" dengan kode script yang sudah diambil dari fanpage facebook yang sudah dibuat sebelumnya .

Detail

Cara Membuat Menu Hot News Di Bawah Header

Cara Membuat Menu Hot News Di Bawah Header - Satu lagi tutorial blog yang akan saya share di sini, salah satu cara untuk menapilkan tampilan blog yang menarik adalah dengan menampilkan Menu Hot News di bawah atau bisa juga di atas header. Dan yang saya share kali ini dengan tampilan yang lebih elegant dan Modern.

Menu Hot News Di Bawah atau di atas Header bisa juga berfungsi untuk memudahkan pengunjung menemukan hal-hal yang dicari atau yang direkomendasikan pemilik blog/web. Adapun Cara membuat Menu Hot News Di Bawah atau di atas Header untuk blogspot adalah sebagai berikut:

Langkah Pertama :

Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;

Langkah Ke 2 :

Cari Kode ]]></b:skin>

Dan Letakan Kode Dibawah Ini Diatas ]]></b:skin>

#buttonbar{width:100% margin:0;padding:0}#buttonbar,#buttonbar ul{list-style:none;font-family:Arial,serif;margin:0;padding:0}#buttonbar a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;font:bold 14px Arial;color:#FFF;padding:9px 10px 8px}#buttonbar li{float:left;position:outside;width:auto}#buttonbar li:hover a,#buttonbar a:active,#buttonbar a:focus,#buttonbar li.hvr a{background:#192f92;background-image:-moz-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-o-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-ms-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d68523),color-stop(0.66,#ffc518));-moz-box-shadow:3px 3px 4px #aaa;-webkit-box-shadow:3px 3px 4px #aaa;box-shadow:3px 3px 4px #aaa;color:#fff;text-decoration:none}#searchbar{border:1px solid #ccc;background:#f5f5f5 url(http://i1175.photobucket.com/albums/r625/diaryonline/e9835c7c.png) no-repeat top center;width:970px;margin:5px auto 2px;padding:0 auto;height:32px}#searchbarright{width:290px;float:right;margin:0;padding-top:3px;padding-right:20px}#searchbarleft{float:left;width:477px;padding-left:140px}#subscribe{overflow:hidden;margin:0;padding:0 0 5px}#subbox{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7iPHHEfG1pko0Byk6yQNUpYOceFF2-XZPOZPN3QxbgHHghB7v34pMRIL0bVAPdDGthDCoODBIwGP4trE9vlrpN6MbOs-ekP8N81zJCfJIhwp_vrQLv-0KkIhBC885i_hj16zRB2rnuQ8/s1600/email.png) no-repeat scroll 4px center;font:bold 11px Sans-Serif;color:#666;text-decoration:none;border:1px solid #aaa;height:14px;width:160px;margin:0;padding:5px 0 4px 34px}#subbutton{background:#999;color:#FFF;font:11px Arial;font-weight:700;text-decoration:none;border:1px solid #666;margin-left:5px;padding:3px 5px}.titlefield{text-decoration:none;color:#09F}.titlefield:hover{text-decoration:underline}.labelfield{color:brown;font-size:90%}.datefield{color:green;font-size:90%}#data{width:470px;height:13px;border:2px solid #ced0d1;padding:5px 5px;background-color:#fff;margin:3px auto;-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);box-shadow:inset 0 0 10px rgba(0,0,0,0.16);position:relative;overflow:hidden;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#adslayoutleft {position:fixed; top:0%; margin-left :-150px; float:right;background-color:#000;z-index:10;}#adslayoutleft .idblogmaker {float:left;clear:both;}#adslayoutleftright {float:right;position:fixed; top:0%; margin-left:970px;z-index:10;background-color:#000;}#adslayoutleftright.idblogmakercom {float:left;clear:both;}

Langkah Ke3

Cari Kode </head>

Letakan Kode Tersebut Diatas Kode </head>

<script src='http://www.google.com/jsapi' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js' type='text/javascript'/>

Langkah ke -4

Selesai Save Template

Langkah Ke5

Setelah Cara Satu sampai 4 Sudah Anda Terapkan,Langkah Kelima Tinggal Masuk Ke Tata Letak Tambah Gadget,Copy Script Dibawah Ini

<script type="text/javascript">

var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")

cssfeed.addFeed("System", "http://www.zainurinet.com/feeds/posts/default")

cssfeed.displayoptions("date")

cssfeed.setentrycontainer("div")

cssfeed.filterfeed(10, "date")

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

*Keterangan Ganti Kode Warna Merah Dengan Url Blog Anda

Selesai Good Luck, Semoga artikel ini bermanfaat

Langkah Pertama :

Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;

Langkah Ke 2 :

Cari Kode ]]></b:skin>

Dan Letakan Kode Dibawah Ini Diatas ]]></b:skin>

#buttonbar{width:100% margin:0;padding:0}#buttonbar,#buttonbar ul{list-style:none;font-family:Arial,serif;margin:0;padding:0}#buttonbar a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;font:bold 14px Arial;color:#FFF;padding:9px 10px 8px}#buttonbar li{float:left;position:outside;width:auto}#buttonbar li:hover a,#buttonbar a:active,#buttonbar a:focus,#buttonbar li.hvr a{background:#192f92;background-image:-moz-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-o-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-ms-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d68523),color-stop(0.66,#ffc518));-moz-box-shadow:3px 3px 4px #aaa;-webkit-box-shadow:3px 3px 4px #aaa;box-shadow:3px 3px 4px #aaa;color:#fff;text-decoration:none}#searchbar{border:1px solid #ccc;background:#f5f5f5 url(http://i1175.photobucket.com/albums/r625/diaryonline/e9835c7c.png) no-repeat top center;width:970px;margin:5px auto 2px;padding:0 auto;height:32px}#searchbarright{width:290px;float:right;margin:0;padding-top:3px;padding-right:20px}#searchbarleft{float:left;width:477px;padding-left:140px}#subscribe{overflow:hidden;margin:0;padding:0 0 5px}#subbox{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7iPHHEfG1pko0Byk6yQNUpYOceFF2-XZPOZPN3QxbgHHghB7v34pMRIL0bVAPdDGthDCoODBIwGP4trE9vlrpN6MbOs-ekP8N81zJCfJIhwp_vrQLv-0KkIhBC885i_hj16zRB2rnuQ8/s1600/email.png) no-repeat scroll 4px center;font:bold 11px Sans-Serif;color:#666;text-decoration:none;border:1px solid #aaa;height:14px;width:160px;margin:0;padding:5px 0 4px 34px}#subbutton{background:#999;color:#FFF;font:11px Arial;font-weight:700;text-decoration:none;border:1px solid #666;margin-left:5px;padding:3px 5px}.titlefield{text-decoration:none;color:#09F}.titlefield:hover{text-decoration:underline}.labelfield{color:brown;font-size:90%}.datefield{color:green;font-size:90%}#data{width:470px;height:13px;border:2px solid #ced0d1;padding:5px 5px;background-color:#fff;margin:3px auto;-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);box-shadow:inset 0 0 10px rgba(0,0,0,0.16);position:relative;overflow:hidden;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#adslayoutleft {position:fixed; top:0%; margin-left :-150px; float:right;background-color:#000;z-index:10;}#adslayoutleft .idblogmaker {float:left;clear:both;}#adslayoutleftright {float:right;position:fixed; top:0%; margin-left:970px;z-index:10;background-color:#000;}#adslayoutleftright.idblogmakercom {float:left;clear:both;}

Langkah Ke3

Cari Kode </head>

Letakan Kode Tersebut Diatas Kode </head>

<script src='http://www.google.com/jsapi' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js' type='text/javascript'/>

Langkah ke -4

Selesai Save Template

Langkah Ke5

Setelah Cara Satu sampai 4 Sudah Anda Terapkan,Langkah Kelima Tinggal Masuk Ke Tata Letak Tambah Gadget,Copy Script Dibawah Ini

<script type="text/javascript">

var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")

cssfeed.addFeed("System", "http://www.zainurinet.com/feeds/posts/default")

cssfeed.displayoptions("date")

cssfeed.setentrycontainer("div")

cssfeed.filterfeed(10, "date")

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

*Keterangan Ganti Kode Warna Merah Dengan Url Blog Anda

Selesai Good Luck, Semoga artikel ini bermanfaat

Detail

Cara Membuat Kotak Komentar Facebook Pada Blog

Cara Membuat Kotak Komentar Facebook Pada Blog - Kotak komentar facebook di postingan blog sangat bagus diterapkan dalam postingan blog, ini berfungsi mirip dengan like dan share facebook. Kotak komentar ini hanya akan muncul di postingan blog dan komentar default blogspot bisa batasi / sembunyikan sebagian.

Ada 4 langkah yang kita lalui dalam menerapkan ini.

1. Menyembunyikan komentar asli / default blogspot. (Ini opsional bisa ya bisa tidak)

2. Membuat aplikasi komentar di facebook

3. Memasang aplikasi dan Menambahkan moderator meta tags di template blog.
4. Memasang kotak komentar facebook di edit HTML template

A. Menyembunyikan komentar default blogspot (opsional)

Menyembunyikan komentar bawaan blog ini adalah pilihan bisa iya bisa tidak. Jika disembunyikan maka yang muncul cuma komentar facebook, sedangkan jika tidak maka yang muncul keduanya.

Masuk ke akun blogger > Dasbor > Setelan/Setting > Pos dan Komentar. Selengkapnya lihat gambar.

B. Membuat aplikasi komentar facebook

1. Pastikan sobat login di facebook kemudian masuk ke Facebook Developers Page

2. Klik Ke Aplikasi > Klik Create New App. Akan muncul seperti gambar di bawah.

Isi nama aplikasi yang akan dibuat, akan muncul valid jika tersedia, klik lanjutkan

3. Setelah itu akan muncul Security Check Captcha, masukkan kode yang diminta pada form, kemudian kirim/submit

4. Setelah langkah di atas mungkin akan terjadi berulang kembali kita disuruh memasukkan ulang kode captcha, teliti ada opsi untuk konfirmasi lewat nomor telepon. (Langkah ini mungkin tidak selalu, karena saat saya mencoba lewat akun facebook yang lain tidak memerlukan proses ini.) Jika selesai langkah 3 bisa juga langsung muncul gambar berikut;

Simpan code App ID yang nantinya akan kita masukkan di meta tag template blog. Setelah itu isikan alamat blog kita, App Domain ketikkan blogspot.com jika kita masih memakai blogspot dan isi sesuai domain sendiri jika kita memakai domain sendiri, sesuai keterangan gambar di atas. Pada Website masukkan alamat url blog kita. Lalu save changes / simpan perubahan.

C. Memasang aplikasi dan Moderator meta tag aplikasi di template blog.

Masuk akun blogger > Template > Edit HTML > Centang Expland Template Widgets. Masukkan kode di bawah di atas kode <b:skin><![CDATA[. Kemudian Save Template.

<meta content='Nomor Unik FACEBOOK_APPLICATION_ID' property='fb:app_id'/>

Masukkan nomor App ID yang didapat pada langkah B4 caranya ganti nomor unik facebook application ID dengan angka nomor ID

D. Memasang Kotak komentar facebook di bawah posting blog.

1. Cari kode berikut di edit HTML template

<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Jika tidak ada cari kode

<p class='post-footer-line post-footer-line-3'>

atau kode

<data:post.body/>

Lalu masukkan kode di bawah ini, tepat di bawahnya kode diatas (pilih satu saja).

<b:if cond='data:blog.pageType == "item"'>

<div id="fb-root"></div>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>

</b:if>

Silakan sesuaikan lebar '450' kotak komentar facebooknya. Dan light menjadi dark jika template sobat gelap. Simpan template. dan kotak komentar facebook sobat sudah terpasang di postingan blog. Silakan buka salah satu postingan blog. Jika belum muncul silakan refresh / reload halaman posting tersebut. Demikian tutorial bagaimana cara membuat dan memasang kotak komentar facebook di bawah postingan blog. Silakan di coba.

Ada 4 langkah yang kita lalui dalam menerapkan ini.

1. Menyembunyikan komentar asli / default blogspot. (Ini opsional bisa ya bisa tidak)

2. Membuat aplikasi komentar di facebook

3. Memasang aplikasi dan Menambahkan moderator meta tags di template blog.
4. Memasang kotak komentar facebook di edit HTML template

A. Menyembunyikan komentar default blogspot (opsional)

B. Membuat aplikasi komentar facebook

1. Pastikan sobat login di facebook kemudian masuk ke Facebook Developers Page

2. Klik Ke Aplikasi > Klik Create New App. Akan muncul seperti gambar di bawah.

Isi nama aplikasi yang akan dibuat, akan muncul valid jika tersedia, klik lanjutkan

3. Setelah itu akan muncul Security Check Captcha, masukkan kode yang diminta pada form, kemudian kirim/submit

C. Memasang aplikasi dan Moderator meta tag aplikasi di template blog.

Masuk akun blogger > Template > Edit HTML > Centang Expland Template Widgets. Masukkan kode di bawah di atas kode <b:skin><![CDATA[. Kemudian Save Template.

<meta content='Nomor Unik FACEBOOK_APPLICATION_ID' property='fb:app_id'/>

Masukkan nomor App ID yang didapat pada langkah B4 caranya ganti nomor unik facebook application ID dengan angka nomor ID

D. Memasang Kotak komentar facebook di bawah posting blog.

1. Cari kode berikut di edit HTML template

<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Jika tidak ada cari kode

<p class='post-footer-line post-footer-line-3'>

atau kode

<data:post.body/>

Lalu masukkan kode di bawah ini, tepat di bawahnya kode diatas (pilih satu saja).

<b:if cond='data:blog.pageType == "item"'>

<div id="fb-root"></div>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>

</b:if>

Detail

Trik Optimasi Keyword Di Paragraf Awal

Trik Optimasi Keyword Di Paragraf Awal - Keyword di awal Paragraf memang sangat penting. Banyak pakar SEO menyarankan untuk meletakkan keyword di awala paragraf yang tujuannya tiada lain adalah agar artikel yang kita muat bisa terindeks di google di rangking teratas. Berikut langkah-langkah yang bisa kita lakukan untuk Optimasi keyword di awal paragraf.

Masuk ke blogger, kemudian pilih Rancangan > Edit HTML > dan centang Expand Template Widget.
Cari kode

<data:post.body/>

Pasti bakalan ada beberapa kode yang sama, disini seperti biasa, kasusnya adalah kode untuk template dekstop dan template untuk mobile.
Selain itu, jika sobat menggunakan auto read more, pasti lebih banyak lagi. Saya asumsikan sobat sudah bisa mengetahui mana yang <data:post.body/> untuk halaman artikel (posting) dan halaman statis.
Disini saya memodifikasi kode tersebut, baik di halaman indeks maupun halaman artikel. Ganti kode <data:post.body/> tersebut dengan kode berikut ini

<strong><a expr:href='data:post.url' expr:title='data:blog.pageName' style='color:black'><data:post.title/></a></strong> - <data:post.body/>

Save dan selesai deh.

Masuk ke blogger, kemudian pilih Rancangan > Edit HTML > dan centang Expand Template Widget.
Cari kode

<data:post.body/>

Pasti bakalan ada beberapa kode yang sama, disini seperti biasa, kasusnya adalah kode untuk template dekstop dan template untuk mobile.
Selain itu, jika sobat menggunakan auto read more, pasti lebih banyak lagi. Saya asumsikan sobat sudah bisa mengetahui mana yang <data:post.body/> untuk halaman artikel (posting) dan halaman statis.
Disini saya memodifikasi kode tersebut, baik di halaman indeks maupun halaman artikel. Ganti kode <data:post.body/> tersebut dengan kode berikut ini

<strong><a expr:href='data:post.url' expr:title='data:blog.pageName' style='color:black'><data:post.title/></a></strong> - <data:post.body/>

Save dan selesai deh.

Detail

Cara Membuat Recent Post Dengan Tumbnail

Untuk mempermudah pengunjung blog melihat tulisan terbaru pada suatu blog, Penambahan artikel terbaru (recent post) adalah sesuatu yang mutlak pada suatu blog. Dan untuk mempercantik tampilannya biasanya di ikuti dengan tumbnail gambar pada judul artikelnya. Dan berikut contohnya:

Membuat Recent Post dengan Thumbnail :

1. Login ke blogger.

2. Pilih Rancangan

3. Elemen Halaman

4. Add Gadget (HTML/JavaScript).

5. Copy kode dibawah ini dan paste pada gadget baru

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

6. Simpan atau save

7. Kemudian lihat hasilnya.

Silahkan dimodifikasi untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Membuat Recent Post dengan Thumbnail :

1. Login ke blogger.

2. Pilih Rancangan

3. Elemen Halaman

4. Add Gadget (HTML/JavaScript).

5. Copy kode dibawah ini dan paste pada gadget baru

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

6. Simpan atau save

7. Kemudian lihat hasilnya.

Silahkan dimodifikasi untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Detail

Pusat Belanja Tupperware Online Terpercaya

CARA MEMBUAT FB LIKE MELAYANG PADA BLOG

Cara Membuat Menu Hot News Di Bawah Header

Cara Membuat Kotak Komentar Facebook Pada Blog

A. Menyembunyikan komentar default blogspot (opsional)

B. Membuat aplikasi komentar facebook

C. Memasang aplikasi dan Moderator meta tag aplikasi di template blog.

D. Memasang Kotak komentar facebook di bawah posting blog.

A. Menyembunyikan komentar default blogspot (opsional)

B. Membuat aplikasi komentar facebook

C. Memasang aplikasi dan Moderator meta tag aplikasi di template blog.

D. Memasang Kotak komentar facebook di bawah posting blog.

Trik Optimasi Keyword Di Paragraf Awal

Cara Membuat Recent Post Dengan Tumbnail

Gabung Dengan Kami