Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Senin, 07 Oktober 2013
Cara Memasang Widget Kode Warna HTML pada BLOG
Kali ini saya akan membagikan turorial "Membuat Widget Kode Wana HTML", tentunya bagi anda yang memang belum mengetahui caranya. Oke, tidak usah panjang lebar, langsung aja kita menuju ke TKP Yang pertama tentu anda membuat posting baru, lalu masukkan kode HTML dibawah ini pada posisi HTML (bukan compose).
Minggu, 05 Agustus 2012
Pasang Encode dan Decode HTML Google pada Blog
Jika anda sering ngeblog maka anda pasti mengenal HTML Encode dan Decode. Encode dan Decode adalah tool (alat) converter yang biasanya dipakai ketika memposting artikel dengan kode JavaScript, CSS atau HTML. Ada juga akan menggunakan HTML Encode dan Decode ketika mengedit CSS template. Jika kode tersebut tidak dipharse (convert) maka template atau artikel tidak bisa disimpan.
Ada beberapa situs yang menyediakan layanan free Eoncode dan Decode misalnya seperti situs (Opinionatedgeek.com). Namun anda dapat membuat tool Encode dan Decode dalam postingan atau pada widget. Tool ini didapat dari GOOGLE yang menyediakan widget Encode dan Decode. Jika ingin membuatnya ikuti tutorial yang satu ini:
1. Klik link berikut ini: (gmodules.com)
2. Edit setelah tampilan (judul, lebar, dll) dan setelan gadjet (row, convert, dll) sesuai selera.
3. Klik “Dapatkan Kode” lalu kopi kode tersebut.
4. Kode tersebut kemudian diletakan pada posting atau pada widget anda.

Bagaimana mudahkan membuat Tool Encode dan Decode di blog. Semoga tutorial ini bermanfaat bagi anda ….
ReadFull Article ..
Ada beberapa situs yang menyediakan layanan free Eoncode dan Decode misalnya seperti situs (Opinionatedgeek.com). Namun anda dapat membuat tool Encode dan Decode dalam postingan atau pada widget. Tool ini didapat dari GOOGLE yang menyediakan widget Encode dan Decode. Jika ingin membuatnya ikuti tutorial yang satu ini:
1. Klik link berikut ini: (gmodules.com)
2. Edit setelah tampilan (judul, lebar, dll) dan setelan gadjet (row, convert, dll) sesuai selera.
3. Klik “Dapatkan Kode” lalu kopi kode tersebut.
4. Kode tersebut kemudian diletakan pada posting atau pada widget anda.

Bagaimana mudahkan membuat Tool Encode dan Decode di blog. Semoga tutorial ini bermanfaat bagi anda ….
Label:
Tips dan Triks,
Widget
Kamis, 12 April 2012
Memasang Google Translate pada Blog
Kali ini blog trik dan tips akan memberikan tips bagaimana cara membuat Google Translate pada halaman blog anda. Google translate ini dikembangkan oleh Google untuk mentranslet bahasa pada blog blogger ke berbagai bahasa lainnya. Dengan membuat Google Translate penggunjung dari luar negeri dapat membaca artikel anda apabila ia menggunakan widget ini. Cara pemasangan widget ini sangat mudah, untuk itu langsung saja ikuti langkahnya berikut ini:

1. Masuk ke Rancangan --> Edit Laman
2. Tambah Gadjet pilih HTML Javascript
3. Masukan kode dibawah ini:
Demikian cara pemasangan Google Translate pada blog anda. Mudah2an tutorial singkat ini dapat memberikan manfaat. Salam blogging...
ReadFull Article ..

1. Masuk ke Rancangan --> Edit Laman
2. Tambah Gadjet pilih HTML Javascript
3. Masukan kode dibawah ini:
<div id="google_translate_element"></div>4. Simpan gadjet anda
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
Demikian cara pemasangan Google Translate pada blog anda. Mudah2an tutorial singkat ini dapat memberikan manfaat. Salam blogging...
Label:
Widget
Rabu, 11 April 2012
Membuat Komentar Area Paling Keren ala IntenseDebate
Blog Trik dan Tips ingin memberikan apresiasi serta 2 jempol untuk IntenseDebate karena telah mengembangkan komentar area dengan fitur yang sangat menarik. Untuk membuat komentar area menjadi stylis biasanya membutuhkan banyak waktu untuk mengedit template anda, namun dengan IntenseDebate, anda bisa membuat komentar area menjadi lebih mudah dan terlihat keren. Pengunjung yang datang ke blog anda akan memperoleh kemudahan serta menyukai komentar area yang anda miliki. Beberapa fitur yang ditawarkan IntenseDebate yaitu, threaded comment, email notifikasi, profil komentator, moderasi serta blacklist, open id, integrasi twitter, facebook dan rss, plugin api, dan widget. Jika sobat tertarik untuk membuatnya ikuti petunjuk dibawah ini:1. Simpan template anda terlebih dahulu untuk mencegah terjadi kesalahan editing
2. Kunjungi situs IntenseDebate lalu daftarkan diri anda (Isi Username, password, email)
3. Lakukan konfirmasi email untuk aktivasi akun IntenseDebate
4. Setelah itu instal IntenseDebate (masukan url blog anda)
5. Selanjutnya upload template blog anda ke IntanseDebate, dimana secara otomatis template anda akan dimodifikasi.6. Kopi kode yang telah dimodifikasi
7. Lalu login ke Blogger, masuk ke Rancangan --> Edit HTML
8. Centang Expand Template Widget
9. Hapus semua kode tersebut lalu paste kode yang telah kita kopi dari IntenseDebate
10. Simpan template anda lalu lihat hasilnya
Mudah sajakan untuk membuat komentar area IntenseDebate pada blog anda. Anda juga dapat menambah widget dari intense debate seperti blog stat, komentar terbaru, popular blog post, top user widget dan my recent comment widget. Lengkap semua fiturnya yang pasti sangat bermanfaat. Demikian tutorial blog trik dan tips semoga bermanfaat.Selasa, 10 April 2012
Cara Membuat Burung Terbang Twitter pada Blog
Inilah tutorial yang saya ingin sekali bagikan ke anda yaitu membuat flying twitter bird atau widget burung terbang twitter pada blog. Widget ini tentunya akan menarik perhatian pengunjung untuk menjadi follower anda. Widget yang lucu ini sangat menarik, karena burung twitter akan terbang kemanapun anda mengscroll halaman baik ke atas maupun ke bawah....he3 pokoknya lucu dan keren abis. Nah jika anda tertarik untuk membuatnya ikuti langkah berikut ini:1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini pada gadjet tersebut
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lASzECbopTipiFrJYUUJdYYyCrroxhL2zbrskvXz6Uq6jRBhgavrBUGhe5YRKf7ExXvq03ZkfE63LLA18mEi5csuMOsc-o0uDxNN83wPXcw9QeN6wCvcHbH2PGDNiZt2gxHqUep3tuUq/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/defecafe";var tweetThisText= "What up guys";tripleflapInit();
</script>
5. Selanjutnya sobat ganti kode berwarna biru (blogtrikdantips) diatas dengan username twitter anda.
6. Simpan Gadjet lalu lihat hasilnya
Demikian langkah-langkah membuat widget burung terbang twitter pada blog. Sobat dapat membuatnya diblog untuk menjadikan blog lebih menarik ketika dikunjungi. Sekian dan salam blogging...
Label:
Widget
Membuat Widget Rating Star dari Outbrain
Jika sobat ingin agar posting yang sudah ditulis diberi penilaian atau rating maka widget yang akan kita buat ini bisa bermanfaat. Pengunjung yang membaca artikel anda dapat memberikan penilaian dengan memilih jumlah bintang. Semakin banyak bintang maka semakin menarik artikel yang mereka baca. Widget yang akan kita buat diperoleh dari Outbrain, yang mana sangat mudah untuk diinstal. Berikut ini adalah langkahnya.....1. Kunjungi situs ini http://www.outbrain.com/getwidget
2. Lalu Choose Blogger Platform (pilihlah platform blogger jika sobat menggunakan blogger)
3. Pilih Bahasa Indonesia untuk language
4. Lalu centang kotak untuk menyetujui TOS
5. Klik Tombol Instal
6. Anda akan langsung diredirect untuk menginstal widget pada blogger.

7. Jika sobat ingin langsung diinstal maka klik tombol Menambah Widget
8. Lalu lihat hasilnya
Demikian langkah2 membuat rating star widget. Anda bisa melihat widget tersebut tampil pada blog, semakin banyak bintang maka semakin disukai posting anda. Sekian dan salam blogging...
Label:
Widget
Sabtu, 07 April 2012
Menempatkan Facebook Like Box Dibawah Posting
Facebook Like Box adalah plugin yang memungkinkan pengguna facebook untuk secara tidak langsung berlangganan update blog anda melalui akun facebook mereka. Sebelum saya telah memberikan tips dan trik bagaimana membuat facebook like box muncul dengan efek buka tutup dan slider. Kali ini kita akan membuat facebook like box dibawah posting. Beberapa blog menempatkan facebook like box meraka dibawah posting karena biasanya pembaca akan melihat like box tersebut setelah membaca posting. Jadi daerah ini dapat menambah jumlah fans blog Anda. Untuk membuatnya ikuti trik dan tips berikut ini:
1. Login ke Blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Template Widget
4. Cari kode <data:post.body/>
5. Letakkan kode dibawah ini setelah kode <data:post.body/>
7. Simpan template anda
Coba sobat lihat hasilnya di blog. Widget ini akan muncul setelah atau dibawah posting. Jika ukurannya tidak sesuai dengan ukuran posting halaman anda, maka sesuaikan ukuran box dengan mengubah kode lebar facebook like box diatas. Selamat mencobanya....
ReadFull Article ..
1. Login ke Blogger2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Template Widget
4. Cari kode <data:post.body/>
5. Letakkan kode dibawah ini setelah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdefecafe&width=590&colorscheme=light& show_faces=true&stream=false&header=false&height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/> </b:if>6. Ubah kode berwarna merah dengan kode fan page anda
7. Simpan template anda
Coba sobat lihat hasilnya di blog. Widget ini akan muncul setelah atau dibawah posting. Jika ukurannya tidak sesuai dengan ukuran posting halaman anda, maka sesuaikan ukuran box dengan mengubah kode lebar facebook like box diatas. Selamat mencobanya....
Label:
Widget
Membuat Tombol Facebook, Twitter dan Google+ Melayang
Sebelumnya kita membuat tombol facebook, twitter dan Google+ pada halaman posting atau disidebar, namun kali ini kita akan membuat tombol tersebut melayang dan akan bergeser ketika pengguna mengscroll halaman ke atas atau bawah. Trik yang satu ini akan menambah efek pada halaman blog anda sehingga tampak lebih indah. Kita akan menggunakan kode Javascript untuk membuat widget yang satu ini. Caranya sangat mudah, jika sobat ingin membuatnya ikuti langkah berikut ini:1. Login ke Blogger
2. Masuk ke Rancangan -- Elemen Halaman
3. Tambahkan gadjet lalu pilih HTML/JavaScript
4. Masukkan kode berikut ini:
<style>
/*-------defecafe Tombol Melayang------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}
#bttsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}
</style>
<div id="floatdiv">
<div id="bttsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="defecafe">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.defecafe.blogspot.com" target="_blank">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document
<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>
5. Gantikan kode berwarna biru (defecafe) dengan username twitter anda
6. Simpan gadjet
7. Masuk ke Rancangan -- Edit Halaman lalu cari kode </head>
8. Paste kode dibawah ini diatas kode </head>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>9. Simpan Template anda
Cobalah lihat hasilnya sekarang, widget tersebut akan melayang disamping kiri blog anda. Selamat mencobanya....
Label:
Widget
Rabu, 04 April 2012
Membuat Email Subscription dengan Icon Bergambar Sketsa
Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:
<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/defecafe" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXRha-gpyP-4T7w5tfl6Fbcar5lYiG-HvzC8XFIGaNdryQfFUvVty9XqlcbAQD-7412Uclwkp1Qbt0ZwyqddtA9bxcwJ2ACWlb73_p61EqWXO2WBBuH557b7i9YQWxUKzYfxK4GIx3Y5H/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/defecafe" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIfLxCYHNeyk6k-CUh0LL1KIQqZgAJE4PS_ThTz8LExOlOfHtjhWJ7r_p_4xjSlnpWHHUNiZKeO5yeWo0jkeC8bLqaDVeu8LenG5I0ftxpT_gP6t84PowBvgWy7VNHFEzlY5vJ6wHy2n_O/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/defecafe" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL77k_m6n7rP9P64iWUS7w24kNjCyz-UWIpuqpP-W52B_xnkC41Rysa_nBFqOad-XGveOLJKrTxzSApbHvLzJGlOhLS5wExLCd-3SKopyMmRC0PhpkLu1umo3fCxqLNdJsOo8eCe_wYToY/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBjeUjwSC1yhIwKdGsFtj8tORpVDjYyEWIlBWuPArZe62Cxz5BxmN1BpN0HMyQAaO24QxFh_g2k5uSFYQT2cHU2jxFinrvXquDiQVeqYEWU7GGCn9nMB6Wf8idO8bgh5elRc53-OHzW-E/s1600/google-48.png" /></a></td>
</tr></table>
</div>
<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/defecafe"><img src="http://feeds.feedburner.com/~fc/defecafe?bg=FF6600&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=defecafe', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.defecafe.blogspot.com">Blogger Widgets</a>
</div>
4. Gantilah kode berikut ini:
http://www.facebook.com/pages/defecafe dengan fanpage facebook anda.
http://twitter.com/defecafe dengan halaman twitter Anda.
http://feeds.feedburner.com/defecafe dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
defecafe (dari bagian bawah kode di atas) dengan id feedburner Anda.
5. Klik simpan.
Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!
Label:
Widget
Membuat Widget Klasik Subscription di Blog
Baru-baru ini saya merancang widget berlangganan yang sederhana. Kali ini saya akan membuat widget berlangganan dengan tampilanan klasik. Widget ini dilengkapi dengan tombol sosial networking yaitu Twitter dan Facebook. Fitur ini akan menggunakan efek hover dan secara otomatis cocok pada sidebar anda. Proses pemasangan widget ini blogger cukup sederhana, cukup ikuti saja langkah berikut ini:1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:
<style>4. Anda perlu mengganti kode berikut ini dengan kode id Anda sendiri.
/* ---------Widget by www.defecafe.blogspot.com----------- */
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYN8rkVvvcEpHPCSF-P4Mg00mqcOExRKdG-Q6pjvuXoRSir8g6GkHiMGFRBx9Pk_buGUAbvRtXBACQKY6VANxcUjBef-7aBuhFD8riXT65Zuqtl_pRXL1_IJxZXMafHAROoYAF5A1rS5xP/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6lgIUC6YiSwxCn-nI25qpJcSMe_k46s06WO5q4W-CLF0liya-qiXIJOVz0fhTjmr0oSW_U8v3rTyvq9_5qn7J_XAP3dvQ0j82xPoAQV5EWFlyBn-80AaOh9nsmSUNV6WaLrUZUeafic1/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUODuKN2fi_WZ7iUSt82pYlbb-lmEnXa7mRH3slwhlL06KbuW2qgYh3nbSGBZAdqXE1fFc3DNMTx9GPtqhzKCeJjUHsiJOjTREelciY-1INIzqdVifo8npLcntB4JDLm3VyNVVTSbAacEa/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
http://feeds.feedburner.com/USERNAME5. Simpan widget dan lihat hasilnya
http://twitter.com/USERNAME
http://facebook.com/USERNAME
Semoga dengan widget yang baru ini anda akan semakin puas dengan tampilan blog. Semoga bermanfaat.
Label:
Widget
Membuat Email Subscription yang Sederhana
Sebelumnya saya telah membuat sebuah email subscription yang mirip dengan Blog saya, namun kali ini saya akan membuat email subsciption yang lebih sederhana untuk blog anda. Email subscription ini dapat anda pasang pada blog sehingga pengunjung dengan mudah dapat berlangganan artikel yang anda tulis. Email subscription ini saya katakan sederhana karena ukurannya yang lebih kecil. Cara membuatnya tidak begitu rumit untuk itu ikuti langkah berikut:1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:
<!-- email subscription by www.defecafe.blogspot.com -->
<style>
.tips-email{
background:url(http://i1141.photobucket.com/albums/n581/fskhan619/orangeemaillogo1copy.png) no-repeat 0px 12px;
width:300px;
padding:10px 0 0 63px;
margin-top:10px;
float:left;
font-size:18px;
font-weight:bold;
margin:0 0 10px 0;
color:#36393A;
}
.tips-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:5px;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tips-emailsubmit:hover{
background:#F88017
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
width:140px;
color:#666;}
</style>
<div class="tips-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=defecafe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == "") {this.value = "Email address here";}" onfocus="if undefinedthis.value == "Email address here") {this.value = "";}" value="Email address here" type="text" />
<input type="hidden" value="defecafe" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<!-- email subscription by www.defecafe.blogspot.com -->
4. Ganti kode berwarna merah diatas dengan id feedburner anda.
5. Simpan gadjet anda lalu lihat hasilnya
Semoga dengan email subscription yang sederhana anda memperoleh subscriber yang sangat banyak. Semoga bermanfaat dan selamat mencoba
Label:
Widget
Senin, 02 April 2012
Flash Vortex Solusi Animasi Untuk Blog
Jika anda ingin membuat menu, teks, tombol, banner, jam dengan animasi flash maka solusinya adalah Flash Vortex. Anda dapat memasang animasi flash vortex untuk mempercantik blog serta mempromosikan barang ataupun jasa. Anda tidak perlu mendaftar atau sign up untuk memasang scriptnya.
Pada situs ini telah tersedia berbagai macam bentuk animasi yang bisa anda pilih, dan untuk memasangnya sangat mudah. Biasanya untuk membuat atau mendesain flash vortex anda akan diminta untuk memasukan teks dan url yang ingin ditampilkan. Animasi flash vortex juga sering digunakan untuk membuat banner ucapan selamat datang pada blog, selain itu sering dipakai untuk keperluan promosi bisnis.
Jadi jika anda ingin membuat animasi flash vortex langsung saja kunjungi situsnya di http://www.flashvortex.com/. Sekian informasi singkat dari saya semoga artikel ini bermanfaat bagi anda. Salam blogging.....
ReadFull Article ..
Pada situs ini telah tersedia berbagai macam bentuk animasi yang bisa anda pilih, dan untuk memasangnya sangat mudah. Biasanya untuk membuat atau mendesain flash vortex anda akan diminta untuk memasukan teks dan url yang ingin ditampilkan. Animasi flash vortex juga sering digunakan untuk membuat banner ucapan selamat datang pada blog, selain itu sering dipakai untuk keperluan promosi bisnis.
Jadi jika anda ingin membuat animasi flash vortex langsung saja kunjungi situsnya di http://www.flashvortex.com/. Sekian informasi singkat dari saya semoga artikel ini bermanfaat bagi anda. Salam blogging.....
Label:
Widget
Kamis, 29 Maret 2012
Membuat Kotak Facebook Like Melayang dengan Tombol Close
Sobat blog trik dan tips, sebelumnya saya telah mengajarkan bagaimana untuk membuat efek slide facebook page fan like di blog. Pada kesempatan ini kita akan membuat hal yang sama namun bukan dengan efek slide tetapi menggunakan efek melayang. Kotak facebook page fan like akan muncul dan melayang pada blog di posisi yang tetap. Kotak Facebook Like akan mengikuti ke bawah atau ke atas apabila halaman di scroll. Kotak ini dilengkapi dengan tombol close untuk menonaktifkan gadjet tersebut. Nah penasaran gimana tampilannya pada blog anda ikuti langkah berikut ini:1. Log in ke Blogger
2. Masuk ke Design --> Elemen Halaman
3. Tambahkan Gadjet
4. Pilih HTML JavaScript
5. Masukan kode berikut ini dalam gadjet tersebut:
<style type="text/css">
#topbar{
position:absolute;
padding-left:-100px;
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">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixI4TycA9QgY0Zl3-WNGddDXqKpjpoYA_O1QoR2Xil3NakFyriWCJqbZbSpHeYcdPBDE4ek6cN9zN8Sgh-DuVdRf7674ez15ehLXAxgz5ueg4xLjDGxppHuwiRIZF-qtHNwIA1akQ33daf/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
PASTE KODE LIKE BOX DISINI
<span >Widget by: <a style=" font-weight:bold" href="http://defecafe.blogspot.com/">Indra</a></span>
</div>
</center>
</div>
6. Ganti kode yang berwarna merah dengan kode like box facebook fan milik anda, untuk membuatnya sobat dapat lihat DISINI
7. Simpan template anda lalu lihat hasilnya
Gimana mudah saja kan untuk membuatnya. Cobalah buat di blog anda, yang pasti fan page ada pada facebook akan semakin bertambah penggemarnya. Selain itu trafik blog anda akan semakin meningkat. Oke sekian dulu trik dan tips kali ini. Selamat mencoba..
Label:
Widget
Membuat Efek Slide Facebook Fan Page Like di Blog
Sobat blog trik dan tips, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:1. Pada blog anda masuk ke Design --> Edit HTML
2. Carilah kode </head>
3. Letakan script jquery dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>4. Simpan template anda
5. Masuk ke Elemen Halaman lalu klik Tambah Gadjet
6. Pilih HTML/Javascript
7. Masukkan kode berikut ini:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinl3AmPAynyEbZFhgOVyiS_vkDjvoa4E84ynRYXR5EM2twuEWDUGgXE1NBJeQhHwbyYlLP4l6iVWCASD3yN38Hauou8mponSr-7IfHkcP8jWF7aUAE4-MEqCnbmY_UF8ZzO3B5nNjMez6R/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fdefecafe&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://www.defecafe.blogspot.com">Indra</a></span></div></div>
8. Ganti tulisan berwarna merah dan nama fan page anda
9. Simpan gadjetnya
Sobat bagaimana dengan hasilnya...semoga dengan kode ini akan membuat blog anda menjadi lebih menarik dan bertambah pengunjung dan fannya...semoga bermanfaat.
Label:
Widget
Membuat Tombol Twitter dan Jumlah Follower pada Blog
Sobat Blog Trik dan Tips jika anda punya akun twitter dan ingin mempromosikan blog anda, cobalah buat widget yang satu ini. Kita akan membuat tombol twitter follower pada blog, fungsinya yaitu untuk mengajak pengujung dari blog untuk mengikuti status anda pada twitter. Tombol twitter biasanya ditempatkan di sidebar atau dibawah posting. Penempatannya tergantung selera anda yang penting mudah dilihat oleh pengunjung aja. Kebetulan saya juga akan memberikan tips bagaimana memunculkan jumlah follower pada tombol twitter anda. Mudah saja untuk membuatnya, ingin tau caranya untuk itu ikuti langkah berikut ini:1. Kunjungi situs ini https://twitter.com/about/resources/buttons#follow
2. Pilihlah tombol follow
3. Pada Button Option masukan username twitter anda
4. Kopi kode atau script untuk tombol twitter
5. Paste kode tersebut pada widget di blog anda.
6. Untuk memunculkan jumlah pengunjung pada tombol twitter tersebut maka ganti data-show-count="false" menjadi data-show-count="true". Hasilnya akan seperti tombol twitter milik Blog trik dan tips dibawah ini:
Follow @defecafe
menjadi seperti ini:
Follow @defecafe
7. Simpan widget anda lalu lihat blog anda
Dengan membuat tombol twitter mudah-mudahan anda semakin banyak followernya ya. Kebetulan karena sudah membaca artikel saya ini jangan lupa ya untuk follow saya di twitter ...Oke deh terima kasih sudah membaca, selamat mencobanya...
Label:
Widget
Sabtu, 24 Maret 2012
Membuat Widget Penilaian Artikel Menggunakan Jempol
1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>
5. Letakan kode dibawah ini diatas kode </body>
<script src="http://js-kit.com/ratings.js"></script>6. Lalu simpan template anda.
Coba anda lihat bagaimana widget ini tampil pada posting anda. Anda akan melihat Jempol Up dan Jempol dawn dengan tampilan yang sangat menarik. Smoga artikel in ibermanfaat. Selamat mencoba ya semoga bermanfaat.
Label:
Widget
Membuat Rating 5 Star pada Blog
Saya akan memberikan tutorial bagaimana caranya membuat gadjet penilaian 5 bintang pada blog anda atau biasanya disebut juga 5 star rating widget. Ada beberapa cara kita bisa membuat widget seperti ini misalnya dengan menggunakan rich snippets, namun cara saya akan memberikan cara yang lebih sederhana. Widget yang kita buat ini dikembangkan oleh js kit dan mempunyai fitur atau tampilan yang cukup menarik. Ada pilihan 5 bintang untuk penggunjung dapat memilih. Biasanya widget ini ditempatkan dibawah postingan artikel blog anda dimana penggunjung akan membaca artikel dan memberikan penilaian terhadap artikel tersebut. Ingin tau cara membuatnya ikuti langkahnya dibawah ini:1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'></div>
</b:if>
5. Letakan kode dibawah ini diatas kode </body>
<script src="http://js-kit.com/ratings.js"></script>6. Terakhir yaitu simpan template anda.
Coba anda lihat bagaimana widget ini tampil pada posting anda. Tampilannya pasti menarik bukan? Selamat mencoba ya semoga bermanfaat.
Label:
Widget
Jumat, 23 Maret 2012
Pasang Toolbar Wibiya Untuk Mempercantik Blog Anda
Ada beragam cara untuk mempercantik atau membuat blog kita tambah keren. Misalya dengan memasang gadjet toolbar wibiya yang satu ini. Jika anda masih newbie dan ingin membuat blog anda tampil lebih indah tanpa mengotak atik script template anda, maka coba pasang toolbar wibiya. Anda bermacam-macam fitur yang ditawarkan toolbar ini seperti: chating pada blog, melihat statistik pengunjung, integrasi dengan akun facebook dan twitter, menampilkan tulisan terkini blog anda, dan lain-lain. Toolbar ini juga dilengkapi dengan tampilan personal yang anda bisa pilih sesuai dengan warna blog anda. Toolbar ini juga akan meningkatkan trafik pada blog anda. Jadi tunggu apa lagi coba pasang toolbar ini dan lihat hasilnya. Oke cara masangnya gini:1. Buka situs http://wibiya.conduit.com/
2. Klik tombol “Get It Now”
3. Isi formulir sesuai dengan data Anda lalu kik tombol “Next”
4. Lalu pilih tema toolbar Anda pada bagian “Select A Theme”. Kemudian klik tombol “Next”
5. Pada bagian “Application Setting”, konfigurasi akun Anda kedalam toolbar tersebut, setelah itu klik tombol “Next”
6. Pada bagian “Add it”, klik logo “Blogger” atau install on blogger (pastikan anda sudah login pada blogger)7. Lalu klik tombol “Add Widget”
Wibiya toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda. Blog anda yang pasti akan tambah keren dan meriah dengan tambahan aplikasi yang unik ini. Oke sekian tutorial dari Blog Trik dan Tips semoga bermanfaat.
Label:
Widget
Selasa, 20 Maret 2012
Membuat Sitemap atau Daftar Isi Accordion pada Blog
Kali ini saya berbagi tutorial untuk meningkatkan Page Rank (Ranking Halaman) pada blog anda.. Pertanyaannya bagaimana cara membuatnya? Mudah saja jawabannya yaitu buatlah sitemap atau daftar isi blog anda. Ketika anda adalah pengguna wordpress maka sangat mudah untuk membuatnya, tetapi jika anda pengguna blogger jangan cemas karena saya akan memberikan trik dan tips cara membuat site map. Site Map yang akan kita buat akan menggunakan Javascript Accordion milik Abu farman. Site Map ini dilengkapi dengan efek SHOW HIDE yang sangat keren. Jadi sekarang saya akan kasih tutorial bagaimana membuat SEO Friendly Sitemap (Tabel Contents) with Accordion untuk blog anda.1. Masuk ke Blogger
2. Pilih Posting - Edit Laman
3. Pilih Laman Baru, Masukan judul Posting misalnya SITEMAP BLOG TRIK DAN TIPS
4. Terakhir Paste kode dibawah ini:
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>5. Ubah kode http://defecafe.blogspot.com dengan url blog anda
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.defecafe.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
6. Terbitkan posting anda lalu lihat hasilnya
Ok itu saja, sangat mudahkan untuk membuatnya! Tentunya dengan sitemap tersebut penunjung anda akan betah di blog sobat dan tentunya blog menjadi lebih SEO Friendly. Terima kasih telah berkunjung ke blog saya, semoga artikel ini bermanfat. Jangan lupa berkomentar ya.....
Label:
Animasi,
Posting,
Tips dan Triks,
Widget
Cara Memasang Widget Jumlah Pengunjung Blog dari Whos.amung.us
Ada beragam widget yang bisa kita dapatkan untuk mengetahui jumlah pengunjung yang sedang online di blog kita. Salah satu widget yang saya akan bahas yaitu Whos.amung.us. Anda dapat memperoleh widget script gratis langsung langsung websitenya. Widget ini juga memiliki fungsi untuk mengetahui lokasi dari pengunjung yang datang ke blog atau situs anda. Anda juga dapat mengetahui jumlah pengunjung yang online pada jam-jam tertentu serta mengetahui apa yang halaman atau page yang dibuka oleh pengunjung. Anda tidak perlu melakukan registrasi untuk memperoleh script codenya. Anda hanya perlu mengkopi script kodenya pada blog setelah anda menentukan posisi widget pada blog. Jika anda tertarik untuk memasang widget ini ikuti trik dan tips yang satu ini:1. Kunjungi situs http://whos.amung.us/
2. Tentukan posisi widget pada blog anda seperti dibawah ini:
3. Kopi script kodenya di atasnya.4. Login ke Blogger
5. Masuk ke Rancangan -- Elemen Halaman
6. Tambahkan Gadjet anda, pilih HTML/JavaScript
7. Paste kode script yang sudah dikopi tadi
8. Simpan Gadjet anda!
Bagaimana mudahkan membuatnya, anda dapat mengatur posisi widget tersebut sesuai selera yang anda suka pada blog. Jika anda klik pada widget tersebut maka anda akan diarahkan ke halaman statistik pengujung pada situs Whos.amung.us.
Label:
Tips dan Triks,
Widget
Langganan:
Postingan (Atom)