-
Sit amet felis. Mauris semper, velit semper laoreet dictum
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...
-
Category name clash
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. ...
-
Test with enclosures
Here's an mp3 file that was uploaded as an attachment: Juan Manuel Fangio by Yue And here's a link to an external mp3 file: Acclimate by General Fuzz Both are CC licensed. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, ...
-
Block quotes
Some block quote tests: Here's a one line quote. This part isn't quoted. Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, ...
-
Contributor post, approved
I'm just a lowly contributor. My posts must be approved by the editor.Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at ...
Showing posts with label Trik Blog. Show all posts
Showing posts with label Trik Blog. Show all posts
Jika Anda para sobat ingin membuat script dengan tampilan background yang nantinya akan Sobat pasang pada postingan, Disini saya akan memberitahukan bagaimana caranya.
Ini adalah macam-macam dari bentuk script yang telah saya ubah tampilannya,di perhatikan ya penempatannya.
Border berwarna dan jenis-jenis garis bordernya
» Solid Border
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Ridge Border
<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Groove Border
<div style="border: 2px #006400 groove; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Inset Border
<div style="border: 2px #006400 inset; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Outset Border
<div style="border: 2px #006400 outset; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Double Border
<div style="border: 2px #006400 double; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Dotted Border
<div style="border: 2px #006400 dotted; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
» Dashed Border
<div style="border: 2px #006400 dashed; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
Border dengan scroll, lebar dan tinggi
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>
Pada TULIS SCRIPT/KODENYA DISINI silahkan tulis kode script yang Sobat inginkan.
Untuk back-groung color nya silahkan sobat ganti dengan warna kesukaan para Sobat.
Selamat mencoba ya para sobat
Contoh : Belajar.blogspot.com
Ada satu cara yang Paling simple sebenarnya untuk dapat mengakali bagaimana Mengganti Author Name di Blogspot, yang bisa kita rubah sesuai dengan keinginan kita dan berbeda-beda disetiap blog dalam satu akun blogger.
Mau tau caranya Bagaimana ?
1. Login ke blogger
2. Pada menu Design -> Edit HTML
3. Beri tanda centang pada “Expand Widget Templates”
4. Cari kode dibawah ini
2. Pada menu Design -> Edit HTML
3. Beri tanda centang pada “Expand Widget Templates”
4. Cari kode dibawah ini
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>Lihat code yang saya beri warna merah, itulah code pemanggil author dalam blogspot. Jika anda mengganti author name dalam satu akun blogger, maka semua author dalam blog Anda akan ikut ganti secara otomatis. Nah Anda bisa mengakali nya dengan cara menggati <data:post.author/> dengan kata-kata atau nama yang anda pilih sesuka Anda. Misalnya
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> pengarang bebas
</b:if>Author telah saya gantikan dengan kata pengarang bebas, dan maka author di salah satu blog saya menjadi pengarang bebas
5. Kalau sudah klik Save Template, dan lihat hasilnya..
Dalam Tutorial Blog kali ini saya akan menjelaskan tentang Cara membuat kursor mouse diikuti teks.
membuat kursor diikuti oleh teks sangatlah mudah...sobat hanya menambahkan kode/script Dibawah ini.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #00BFFF;
/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Nama sobat";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #00BFFF;
/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Nama sobat";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
Cara Menambakannya adalah Sbgb:
1.Masuk ke akun blog anda
2.Pilih Tata Letak/Rancangan--->Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna hijau sesuai keinginan sobat
 |
| Gambar : Contoh Space Iklan |
Langsung saja Sobat lakukan tahap-tahap yang ada dibawah ini untuk dapat membuat widget space iklan banner dan perhatikan secara Baik-baik dan jangan sampai Salah dalam melakukannya :
Masuk pada halaman Edit HTML di blogger para Sobat, lalu cari kode ]]></b:skin> dan letakkan kode CSS berikut ini tepat di atas kode ]]></b:skin>
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#Box-Banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Box-Banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}
Apabila sudah, jangan lupa untuk di save, selanjutnya Sobat pilih Elemen Halaman dan Tambah kan Gadget lalu pilih HTML/Javascript nya dan masukkan kode berikut :
<div id="Box-Banner-ads">
<a target="_blank" href="http://thestarku.blogspot.com/"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://thestarku.blogspot.com/"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://thestarku.blogspot.com/"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://thestarku.blogspot.com/"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
</div>
Untuk kode yang berwarna pink di bagian atas Sobat dapat mengganti nya sesuai dengan alamat url iklan banner yang ingin Sobat pasang dan untuk yang berwarna biru adalah url gambar iklan Tersebut,
Selamat mencoba, dan semoga berhasilDalam pengerjaannya ya.
 |
| TOP scroll |
Coba Perhatikan dan lihat tanda panah yang berada pada sudut kanan bawah layar monitor yang terdapat pada Blog saya di saat Sobat melakukan navigasi kebawah, dan apabila di klik oleh sobat maka akan kembali lagi secara otomatis ke atas halaman atau disebut 'back to top scroll' . Dan disini saya akan mencoba langsung memberitahukan triknya nya kepada sobat semua bagaimana caranya.
Kita lansung aja ya dalam pengerjaan nya,biar Para sobat bisa melakukannya
Masuk ke akun blogger Sobat terlebih dahulu, pilih tata letak, Dan pilih edit html.
kemudian "copy" dan "paste" script yang terdapat dibawah ini persis dibawah kode <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://raezen.fileave.com/scrolltop.js" type="text/javascript"></script>
Kalau sudah Sobat Copy Lalu di paste ke Blog sobat dan jangan lupa disave ya.
dan akhirnya sobat selesai juga kan untuk membuat scroll back to top tersebut. selamat mencoba ya.
Kali ini yang ingin saya Bahas adalah tentang Bagaimana cara membuat addres bar,Taukan apa itu yang dimaksud dengan Addres Bar.Ok
Address Bar adalah Berbentuk tulisan paling atas yang berada di samping lambang Mozilla yang terdapat di Compy Sobat.Dan Biar tidak kelihatan kaku, makannya address barnya sengaja kita buat bergerak.
ya sudah Lansung aja nanti Sobat malah bosan jadinya hehehehe.........!!!
Langsung aja ni scriptnya di copy ya:
<script type='text/javascript'>
//<![CDATA[
msg = " http://thestarku.blogspo.com ";
msg = ".:Thestarku:." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
Gimana cara dalam pegeditan nya..............??
tulisan yang warna merah adalah alamat blog Para Sobat.
terus text yang warna hijau adalah nama tampilan ataupun judul Blog Sobat punya. Yang warna kuning adalah kecepatan bergerak dari tulisan Sobat.
Setelah itu, cobalah sobat copy kan script di atas di bawah script ini ]]></b:skin> kalau sudah tinggal disave aja lansung.
Gampang bangetkan kan...
Silahkan dicoba ya sob...........!!!!
Semoga Berhasil.
Address Bar adalah Berbentuk tulisan paling atas yang berada di samping lambang Mozilla yang terdapat di Compy Sobat.Dan Biar tidak kelihatan kaku, makannya address barnya sengaja kita buat bergerak.
ya sudah Lansung aja nanti Sobat malah bosan jadinya hehehehe.........!!!
Langsung aja ni scriptnya di copy ya:
<script type='text/javascript'>
//<![CDATA[
msg = " http://thestarku.blogspo.com ";
msg = ".:Thestarku:." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
Gimana cara dalam pegeditan nya..............??
tulisan yang warna merah adalah alamat blog Para Sobat.
terus text yang warna hijau adalah nama tampilan ataupun judul Blog Sobat punya. Yang warna kuning adalah kecepatan bergerak dari tulisan Sobat.
Setelah itu, cobalah sobat copy kan script di atas di bawah script ini ]]></b:skin> kalau sudah tinggal disave aja lansung.
Gampang bangetkan kan...
Silahkan dicoba ya sob...........!!!!
Semoga Berhasil.
 |
| Gambar hanya Sebagai Contoh |
Login lah ke akun Blogger Para Sobat Terlebih Dahulu
Kemudian Pilih Tata Letak dan Edit Html
Cari kode Seperti yang tertera dibawah ini:
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:section class="main" id="main" showaddelement="no">
Atau Juga
<div id="'wrapper'">
- Setelah menemukannya, Cobalah ganti kode tersebut menjadi kode dibawah ini:
<div id="main-wrapper">
<b:section class="main" id="main" preferred="yes">
<b:section class="main" id="main" preferred="yes">
Jika Semua Cara-Cara diatas telah Sobat Lakukan, Simpan Template nya dan lihat hasilnya pada bagian Tata Letak maka akan tampil elemen baru diatas dan bawah posting blog Sobat.
Jika para Sobat menggunakan menu readmore atau baca selengkapnya yang ada pada blog Sobat maka nantinya gadget yang akan dipasang pada bagian bawah posting akan muncul setelah mengklik readmore atau baca selengkapnya.
Selamat Mencoba Semoga Semakin Berhasil.
Tab view versi 2 ini ceritanya adalah lanjutan dari tab view pendahulunya yakni hanya berbeda pada tampilannya. Pembuat aslinya adalah dari Ateonsoft.com dan disini saya hanya berbagi informasi sebagai pengguna tabview versi 2 ini Langsung saja Sobat ikuti langkah-langkah dibawah ini untuk dapat membuat tab view versi 2,OK
Berikut langkah-langkahnya
- Login ke Blogger dengan ID kalian
- Lalu Klik Tata Letak
- Klik Sub Menu Edit HTML
- Pada Kotak Edit HTML cari Kode ]]></b:skin>
- Lalu copy kode di bawah ini dan pastekan diatas kode ]]></b:skin>
/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}
- Lalu letakkan script dibawah ini tepat dibawah kode <head>
<script src='http://azizrhamadhan.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>
- Save Template
- Pergi ke halaman Element Halaman
- Klik Add Widget Element
- Pilih Menu HTML/Java Script
- Lalu Copy kan kode yang ada di bawah ini
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
Setelah itu sobat bisa paste kan pada kolom Html/Javascript yang tersedia Pada Blog dan sekarang tinggal di Save dan disetting saja sesuai dengan keinginan Sobat sendiri,
NB: Pada setiap kode html maupun script diatas dibagian warna, ukuran border, lebar, tinggi, dapat Sobat Dapat mengedit sesuai dengan keinginan para Sobat . Mungkin Sobat tidak perlu mengubahnya dahulu untuk melihat hasil defaultnya cukup lakukan langkah-langkah yang seperti diatas dan setelah melihat hasilnya dan berhasil, barulah Sobat bisa menyesuaikan semua yang ingin Sobat ubah. Selamat Mencoba ya!
Jangan Lupa Commentnya ya Sobat .
Beberapa jam saya surfing di internet untuk mencari bahan artikel ada satu yang menarik perhatian saya yaitu bagaimana Cara Pasang Bookmark Dalam Setiap Postingan, dan artikel yang memuat tersebut adalah orang yang cukup hebat di dunia maya ini. Dia adalah sang Maestro Menurut saya (O-OM) hehehehe......
lansung aja ya............!!!!
Langkah-langkah memasukan code Bookmark adalah:
1. Masuk kealamat http://www.addthis.com/ lakukan registrasi terlebih dahulu jika belum terdaftar.
2. Pilih "Get the code for your widget!"
3. Setting pilihan :
Which kind of widget? : --> Bookmarking Widget
Which widget? : --> (Pilih button sesuai selera)
Where? Where do you
want to put the widget? : --> On a Blog
Blogging Platform : --> Blogger
4. Pilih "Get Your Free Button"
5. Pilih code "Blog Button (New or Older Blogger)"
Sedikit informasi untuk Blog Post Button (New Blogger) ini hanya digunakan sebagai button, biasanya hanya dipasang pada widget komponen blogger sedangkan untuk Blog Button (New or Older Blogger) kode inilah yang mengambil setiap code posting, jadi jangan lupa gunakan kode kedua ya :)
Selanjutnya cara memasang kodenya sebagai berikut:
Masuk ke Template -> Edit Html -> Expand Template Widget
Cari kode dibawah ini : ( Sebelum mengedit code sebaiknya lakukan Backup Template terlebih dahulu)
atau bisa juga dibawah code ini
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span></p>
Kemudian Copy-Paste code Bookmark di bawah code diatas. jangan lupa disimpan :). Jika proses berhasil maka bookmark hanya akan mengambil Feed sesuai dengan nama judul posting yang dipilih :)
http://www.o-om.com/
lansung aja ya............!!!!
Langkah-langkah memasukan code Bookmark adalah:
1. Masuk kealamat http://www.addthis.com/ lakukan registrasi terlebih dahulu jika belum terdaftar.
2. Pilih "Get the code for your widget!"
3. Setting pilihan :
Which kind of widget? : --> Bookmarking Widget
Which widget? : --> (Pilih button sesuai selera)
Where? Where do you
want to put the widget? : --> On a Blog
Blogging Platform : --> Blogger
4. Pilih "Get Your Free Button"
5. Pilih code "Blog Button (New or Older Blogger)"
Sedikit informasi untuk Blog Post Button (New Blogger) ini hanya digunakan sebagai button, biasanya hanya dipasang pada widget komponen blogger sedangkan untuk Blog Button (New or Older Blogger) kode inilah yang mengambil setiap code posting, jadi jangan lupa gunakan kode kedua ya :)
Selanjutnya cara memasang kodenya sebagai berikut:
Masuk ke Template -> Edit Html -> Expand Template Widget
Cari kode dibawah ini : ( Sebelum mengedit code sebaiknya lakukan Backup Template terlebih dahulu)
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if></span></p>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if></span></p>
atau bisa juga dibawah code ini
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span></p>
Kemudian Copy-Paste code Bookmark di bawah code diatas. jangan lupa disimpan :). Jika proses berhasil maka bookmark hanya akan mengambil Feed sesuai dengan nama judul posting yang dipilih :)
http://www.o-om.com/
Tombol Facebook like sangat bermanfaat untuk menunjukkan seberapa banyak pengunjung yang menyukai blog kita. Selain itu, jika mereka menyukai artikel kta dengan mengklik tombol like fb ini, maka artikel kita akan nampang di dinding facebook mereka dan tentu saja akan banyak penghuni facebook yang ikut membacanya.
Lalu bagaimana cara memasangnya? Ikuti langkah-langkah dibawah ini:
1. Langsung masuk ke dasbor blogger anda. Dan menuju Rancangan > Edit HTML. Jangan lupa mencentang “Expand Widget Templates” .
2. Cari kode ]]></b:skin> (Gunakan Ctrl+F) lalu ganti kode tersebut dengan kode di bawah ini.
2. Sekarang cari kode <data:post.body/> lalu ganti kode tersebut dengan kode di bawah ini.
5. Sekarang simpan template anda. Lalu lihat hasilnya pada halaman anda (buka salah satu artikel pada blog anda).
Bagaimana? anda suka dengan hasilnya?
Selamat mencoba...!!!!
http://bloggertouch.appspot.com
Lalu bagaimana cara memasangnya? Ikuti langkah-langkah dibawah ini:
1. Langsung masuk ke dasbor blogger anda. Dan menuju Rancangan > Edit HTML. Jangan lupa mencentang “Expand Widget Templates” .
2. Cari kode ]]></b:skin> (Gunakan Ctrl+F) lalu ganti kode tersebut dengan kode di bawah ini.
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:474px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/s1600/fblogo2.jpg") no-repeat scroll left top transparent;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:449px;
height:42px;
}
]]></b:skin>
Keterangan:
1. Pada angka 474 berwarna merah di atas adalah ukuran untuk lebar box widget fb like (sesuaikan dengan lebar kolom postingan anda). Sedangkan URL berwarna biru adalah URL dari box-nya. Untuk mendapatkan hasil yang sesuai, anda harus menyesuaikan antara ukuran dengan URLnya. berikut penyesuaiannya:
- 400 s/d 474 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/s1600/fblogo2.jpg
- 475 s/d 600 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BNVSGPPHgOYAGCG1hi05cP6rAJaUgSel0RU6Z3tu9OKvJrOh67IIyxK7iZ59Oj9FkSYKwT-UBuL81Foy7ewriWyZRlMkU739GtfUL_Rcjb3plE9cp7dJiUToooaOmVvpRgwOuK1262w/
Jadi jika ukuran yang anda masukkan adalah 450, maka URL yang digunakan adalah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/s1600/fblogo2.jpg
2. Lebar harus di antara 400 s/d 600. Jangan sampai lebih atau kurang
2. Sekarang cari kode <data:post.body/> lalu ganti kode tersebut dengan kode di bawah ini.
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/Aanprawira'>Be a Fan</a></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>
Keterangan:
Ganti URL berwarna Hijau dengan URL Profil Facebook anda
5. Sekarang simpan template anda. Lalu lihat hasilnya pada halaman anda (buka salah satu artikel pada blog anda).
Bagaimana? anda suka dengan hasilnya?
Selamat mencoba...!!!!
http://bloggertouch.appspot.com
Sekarang LoginLah ke Account Blogger sobat
Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari code berikut:
<data:post.body/> atau <div class=’post-header-line-1′/>
Jika Pernah pasang readmore maka letakkan dibawah <data:post.body/> kedua
Jika Pernah pasang readmore maka letakkan dibawah <data:post.body/> kedua
Script Jadi dan Tinggal Pasang tanpa Buat APlikasi dan paste code berikut dibawahnya :Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari code berikut:
<data:post.body/> atau <div class=’post-header-line-1′/>
Jika Pernah pasang readmore maka letakkan dibawah <data:post.body/> kedua
Jika Pernah pasang readmore maka letakkan dibawah <data:post.body/> kedua
<b:if cond='data:blog.pageType == "item"'>Lalu cobalah sobat save Dan lihat hasilnya
<p align='left'><a href='http://www.dhaniels.com/2010/08/cara-pasang-kotak-komentar-facebook-di.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQe9wMcDaXN5-X_-vmBjr8DuXFA6yjIGWjRNErRt06QJh6SRWntdKqRX6E3ENdmcLEuSXWAJBifv7o4u8QXdNjj_4AUh0FrRjxmoee4qTEMiz7o9mat1rcu_ZJJAS8cDNTj6tboF2AkI/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '146431302063145', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://www.dhaniels.com/2010/08/cara-pasang-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></div>
Mungkin anda ingin memberikan hiasan icon lucu di tampilan komentar blog sobat, disaat orang yang berkunjung di blog sobat menuliskan komentarnya dan me KLIK icon lucu yang terdapat di blog sobat,pastinya sangat menarik bukan.
berikut langkah2nya......!!!
Langkah - langkah :
1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada expand Widget template
5. Setelah itu cari kode </body> pada template
6. Letakkan Kode HTML dibawah ini sebelum kode </body>
7. Setelah selesai dengan Script diatas cari kode berikut :
8. Setelah itu silahkan Copy-paste kode Script dibawah ini sebelum Kode Script diatas
9. Save Template
berikut langkah2nya......!!!
 |
| Gambar berikut contoh dari icon kaskus |
Langkah - langkah :
1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada expand Widget template
5. Setelah itu cari kode </body> pada template
6. Letakkan Kode HTML dibawah ini sebelum kode </body>
<script src='http://aditx.fileave.com/kaskus-emoticons.js' type='text/javascript'/>
7. Setelah selesai dengan Script diatas cari kode berikut :
<b:if cond='data:post.embedCommentForm'>
8. Setelah itu silahkan Copy-paste kode Script dibawah ini sebelum Kode Script diatas
<b><img src='http://lh6.ggpht.com/_UEOySJCSmVg/SzAhwEEFhsI/AAAAAAAAAe0/g5rUYMDc92Y/s800/fd_1.gif'/>
:a:
<img src='http://lh5.ggpht.com/_UEOySJCSmVg/SzAhwL2IoII/AAAAAAAAAe4/iGdNlb3Ix5Y/s800/fd_2.gif'/>
:b:
<img src='http://lh3.ggpht.com/_UEOySJCSmVg/SzAhwDb6YZI/AAAAAAAAAe8/Pj5v3kVvem0/s800/fd_3.gif'/>
:c:
<img src='http://lh5.ggpht.com/_UEOySJCSmVg/SzAhwRrvzxI/AAAAAAAAAfA/GvczRMYdM7c/s800/fd_4.gif'/>
:d:
<img src='http://lh4.ggpht.com/_UEOySJCSmVg/SzAhwom95gI/AAAAAAAAAfE/JMDv8X-nbPg/s800/fd_5.gif'/>
:e:
<img src='http://lh3.ggpht.com/_UEOySJCSmVg/SzAiI37vkOI/AAAAAAAAAfI/H0bSt__cKD4/s800/fd_6.gif'/>
:f:
<img src='http://lh4.ggpht.com/_UEOySJCSmVg/SzAiIw2EzpI/AAAAAAAAAfM/oV_7txxFCmw/s800/fd_7.gif'/>
:g:
<img src='http://lh4.ggpht.com/_UEOySJCSmVg/SzAiJP9PfHI/AAAAAAAAAfQ/txDcSDTSa6A/s800/fd_8.gif'/>
:h:
<img src='http://lh5.ggpht.com/_UEOySJCSmVg/SzAiJIxYjYI/AAAAAAAAAfU/R7Oy5x5EaGM/s800/I-Luv-Indonesia.gif'/>
:i:
<img src='http://lh5.ggpht.com/_UEOySJCSmVg/SzAiJpu-XRI/AAAAAAAAAfY/2eCptEAg-0E/s800/takut.gif'/>
:j:
<img src='http://lh4.ggpht.com/_UEOySJCSmVg/SzAiYO4DeKI/AAAAAAAAAfc/dmWvhblQnSk/s800/tkp.gif'/>
:k:
</b>
9. Save Template
langsung saja di praktekin yach
Langkah-langkahnya kita mulai sebagai sebagai berikut :
1. Masuk ke "Dasbor"
2. Klik "Tata Letak"
3. Klik "Edit HTML"
4. Beri Centang pada kotak kecil "Expand Template Widget"
5. Silahkan cari di dalam template anda kode ]]></b:skin>
6. Persis sebelum kode tersebut, copypastekan script berikut ini :
Untuk 1 Widget yang Berada Diatas dan Dibawah
#widget-atasbawah {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
position: relative;
text-align: center;
}
#atasbawah, #widget-atasbawah2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* background: #FFFFFF;
border-top: 1px solid none;
border-left: 1px solid none;
border-right: 1px solid none; */
}
#atasbawah .widget, #widget-atasbawah2 .widget {
margin: 0;
padding: 10px 0;
}
Kalau sudah kamu Copy Paste script yang diatas tadi, sekarang kamu Copy Paste juga script yang ada dibawah ini dan letakkan di <head> = untuk posisi widget diatas + </head> = untuk posisi widget dibawah :
Ni scriptnya :
<div id='widget-atasbawah'>
<b:section class='atasbawah' id='atasbawah' preferred='yes'/>
</div>
Jangan lupa di Save
Untuk 3 Widget
#3-Widget {
width:960px;
clear:both;
margin:7px 0px 7px 0px;
float:left;
padding:4px 0px 0px 0px;
color:#333;
background:#eeeeee;
border-top:#ffffff;
border-bottom:#ffffff;
}
#3-Widget a:link {
color:#006699;
text-decoration:none;
}
#3-Widget a:hover {
color:#c06000;
text-decoration:underline;
}
#3-Widget a:visited {
color:#808080;
text-decoration:none;
}
#3-Widget h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#3-Widget ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:#333;
}
#3-Widget ul li {
line-height: 1.8em;
list-style-type:none;
border-bottom:0px solid none;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLUctQ17BXSFiQ_PfeAzQsQqan0QBQSKaitt2Tj46FVlu30zqHXy1REyawPyczRotEvsgnFgU_-bxBIS627BpIHwbTaMDwQJcvHQ6PSXx3HtZvxsjx3bEwFIsaCYRWooo_TRkJA4gGKQ/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}
#3-Widget1 {
width:299px;
float:left;
padding:0 20px 0 20px;
}
#3-Widget2 {
width:299px;
float:left;
padding-right:15px;
#3-Widget3 {
width:299px;
float:right;
padding-right:15px;
}
Keterangan :
Width : 960 => Bisa kamu ubah sesuai dengan ukuran Template anda.
Width : 299 => 'Panjang Widget' bisa kamu ubah sesuai dengan keinginan anda.
Biasa!!! kalau sudah di Copy Paste, jangan lupa kamu Copy Paste juga script di bawah ini dan letakkan di <head> = untuk posisi 3 widget berada di atas dan </head> = posisi 3 widget di bawah.
<div id='3-widget'>Atau bisa lihat di Blog saya yang lain di
<b:section class='3-widget' id='3-widget1' preferred='yes'/>
<b:section class='3-widget' id='3-widget2' preferred='yes'/>
<b:section class='3-widget' id='3-widget3' preferred='yes'/>
</div>
http://galleryku-mysite.blogspot.com/2010/10/cara-menambahkan-widgettambah-target.html
Sebenarnya untuk membuat Next Page / Navigasi Halaman itu caranya sangat mudah kita hanya perlu menambahkan script pada Fotter dari blogger kita.
caranya seperti ini :
1. Pertama-tama Copy Code dibawah ini
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
2. Setelah itu seperti biasa masuk Rancangan
3. Lalu tambahkan Add Page Element / Gedget --> HTML/Javascript pada bagian Fotter dan Paste Code yang di atas tersebut
4. Setelah itu save, Lalu geser gadget tersebut ke bagian bawah kotak postingan Anda, seperti gambar di bawah ini:
Kemudian di simpan
Jadi Dech.........................!!!!
Apa Kamu Mau tau caranya ???
Langsung aja ya, Soalnya gak pandai berbasa-basi nih.
Pertama-tama sahabat harus minum kopi dulu biar ga ngantuk sebelum mengerjakannya. Lalu Lanjut Login ke Blogger Para sahabat dan pilih Rancangan >> Edit HTML jangan lupa buat centang yang namanya Expand Template Widget, Tau kan.......???? setelah itu cari kode di bawah ini :
<span class='post-labels'>
Agar mudah pencarian tekan tombol CTRL + F dan ketikkan code di atas, Setelah ketemu CopPas code dibawah ini tepat di atas code <span class='post-labels'>.
<div style='float:right;margin-top:-25px;margin-right:10px'> selanjut nya Simpan Template.
<div id="hit-counter">
<a href="http://blog-anda.com/" alt="Judul Blog Anda" rel="follow" title="Situs Anda" >
<img border="0" src="http://putchoice.com/tool/images/stats.png" width="20" height="20"></a>
<small>
<a href="http://www.ihsana.com/" rel="dofollow" style="text-decoration: none">Views : </a>
<script src="http://putchoice.com/tool/?p=stats" type="text/javascript">
</script>
</small>
</div>
</b:if>
Bisa juga sahabat letak selain di code
<span class='post-labels'>
asalkan sahabat letak sebelum code
<data:post.body/>
Cara untuk memasang widget tab view atau menu tabulasi tersebut adalah dengan langkah-langkah berikut:
Perhatikan ya setiap Peletakannya dan jangan sampai Bersalahan.
1. Login pada account blogger Anda.
2. Pilih Layout/tata Letak > Edit HTML
3. Centang pada Expand Template Widget
4. Letakkan kode berikut diantara kode<head> dan </head>
5. Selanjutnya letakkan kode berikut di atas kode ]]></b:skin><script src='http://sites.google.com/site/ariprahmancorp/script/smartbekantan_tab.js' type='text/javascript'/>
/* tab model htt://smartbekantan.blohspot.com */
div.smartbekantan {margin:15px 0 0 0; font: normal 11px arial;}
div.smartbekantan div.smb
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.smartbekantan div.smb a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.smartbekantan div.smb a:hover
{ background:#ccc;}
div.smartbekantan div.smb a.Active
{ background: #333; color:#FFFFFF;}
div.smartbekantan div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.smartbekantan div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.smartbekantan div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.smartbekantan div.Pages div.Page div.floor li {
margin:0; padding:0;}
div.smartbekantan {margin:15px 0 0 0; font: normal 11px arial;}
div.smartbekantan div.smb
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.smartbekantan div.smb a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.smartbekantan div.smb a:hover
{ background:#ccc;}
div.smartbekantan div.smb a.Active
{ background: #333; color:#FFFFFF;}
div.smartbekantan div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.smartbekantan div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.smartbekantan div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.smartbekantan div.Pages div.Page div.floor li {
margin:0; padding:0;}
6. Jika sudah, simpan template.
7. Selanjutnya memasang widget tab view atau menu tabulasi pada elemen halaman Anda. Masuk pada menu Add gadget > HTML/Javascript.
Lalu Pasangkan kode berikut pada kontent tersebut :
<form action="smartbekantan.html" method="get">
<div class="smartbekantan" id="smartbekantan">
<div class="smb">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">smartbekantan_name('smartbekantan');</script>
Kemudian Save, Lalu lihat hasilnya.<div class="smartbekantan" id="smartbekantan">
<div class="smb">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">smartbekantan_name('smartbekantan');</script>
Berikut ini adalah langkah-langkah memasang Share This Post
1. Login ke akun blogger masing-masing hingga masuk Dasbor >> Rancangan >> Edit HTML
2. Jangan lupa centangi “Expand Templates Widget”
3. cari kode ]]>></b:skin>
4. copy script di bawah ini di atas kode ]]>></b:skin> tersebut.
div.sociable { margin: 16px 0;}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
5. Kemudian cari kode <data:post.body/>
Jika blog kita sudah menggunakan fungsi readmore maka akan terdapat dua kode tersebut dan pilih kode yang kedua atau terakhir agar tidak tampak pada halaman utama.
6. Copy script di bawah ini dan letakkan di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sociable'>
<div class='sociable_tagline'>
<img alt='maspeypah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Bdet_dneWJcNlUnlFyVqUcZWaE62mcLnko4ve4Jrlu6oPI-rmhUji_LjbcQz_1NcBrU8OgiJh_gTkRO1_Uf2y4op2eYlRXAzINeD9Nj9t3knr-fNWaI-bO5rftKX-er_9jk36Cy11Opw/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLs0nwN8W3wNvxQXveOgWe7DHAuAzh126WomoAKa37DPsvOADlPhEuGSaFhkE8I6Ko2b78QlkvXBa3Vc4olF4SOhylqehH-JOUMxKfjX7JpkZUeHKxc-ITsYYPrzfooknBxtOiQHhp4T9m/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZW1yGsr_kOfT5QGBgu5SHsq8tPE23tyAaql84BqF4rYduuTIzabA8Ifbo7N9vkhk5REefI52EZpNf8UL9s57trxeggT8GWEkCF1f3ZHcnYiijl7dKHfs6je5siib4xozwZ9Qmo9F9vJOq/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXuOKvO1mE9uyOJQOrhh1a7wZF26XYxkrf4796nr1wm7BwyNoiLH7QtR4yHRkJ8EQjJ_jJNWu20Sau83LHtE2Uit-SRTUk1v1zhFFoj2vG4Kz9_rjzAQ0polBXdmqX_N5fVdZwNhmgQKE/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU-97VmeF2ArV6rUMLnhEa8lELz1gPgsyiz6YEmSWNh7dum65anTaHbmmoM1T7IzgMYvzJacJrd5uUZeBiOKAO0cFZy6IH8FQaebeVON9FjvkZCzji9pV1vzcCfm3qENDyUBp0o9PPoGl/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAJ1VOuHihlTrKZ2ENfu4AbI29l7HimNJlTeN08lSZAxYfg6UPnktsQUxHWNeE8Jyd-PwvAtO5MM4CageVdwk5__aDDnANPE2-hxtJkPtyx8Z72Alcnlxlw6kuX6UT5aQFmwNcdvdBO5u/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFIILIm4VbSgjPUApUKmMyndlr14oEy8daNuzgZK7kLMpBahNMr_VD4ganukn5BWvdv_0CJcaVju8yzCmQuGVq0kNBKRbroZoCv-H3Q_PmWaxfbcGWd6xSZ-KYQMzogvFyRXu_Y5N5xdK/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfznqZoMvZkai5jrcq91j1GOwEzCLtgDCs6JTTUMYj_7ajGkWmVDkwG1IrBw7A4BKuW6HPqePTTs7v48xCkmLJYn0HqMGqqp82OuBNoTO_eBWC3l8Ep9V9xaWLmM6Me6wnJiSw-XZdpxOA/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
</b:if>
<div class='sociable'>
<div class='sociable_tagline'>
<img alt='maspeypah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Bdet_dneWJcNlUnlFyVqUcZWaE62mcLnko4ve4Jrlu6oPI-rmhUji_LjbcQz_1NcBrU8OgiJh_gTkRO1_Uf2y4op2eYlRXAzINeD9Nj9t3knr-fNWaI-bO5rftKX-er_9jk36Cy11Opw/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLs0nwN8W3wNvxQXveOgWe7DHAuAzh126WomoAKa37DPsvOADlPhEuGSaFhkE8I6Ko2b78QlkvXBa3Vc4olF4SOhylqehH-JOUMxKfjX7JpkZUeHKxc-ITsYYPrzfooknBxtOiQHhp4T9m/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZW1yGsr_kOfT5QGBgu5SHsq8tPE23tyAaql84BqF4rYduuTIzabA8Ifbo7N9vkhk5REefI52EZpNf8UL9s57trxeggT8GWEkCF1f3ZHcnYiijl7dKHfs6je5siib4xozwZ9Qmo9F9vJOq/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXuOKvO1mE9uyOJQOrhh1a7wZF26XYxkrf4796nr1wm7BwyNoiLH7QtR4yHRkJ8EQjJ_jJNWu20Sau83LHtE2Uit-SRTUk1v1zhFFoj2vG4Kz9_rjzAQ0polBXdmqX_N5fVdZwNhmgQKE/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU-97VmeF2ArV6rUMLnhEa8lELz1gPgsyiz6YEmSWNh7dum65anTaHbmmoM1T7IzgMYvzJacJrd5uUZeBiOKAO0cFZy6IH8FQaebeVON9FjvkZCzji9pV1vzcCfm3qENDyUBp0o9PPoGl/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAJ1VOuHihlTrKZ2ENfu4AbI29l7HimNJlTeN08lSZAxYfg6UPnktsQUxHWNeE8Jyd-PwvAtO5MM4CageVdwk5__aDDnANPE2-hxtJkPtyx8Z72Alcnlxlw6kuX6UT5aQFmwNcdvdBO5u/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFIILIm4VbSgjPUApUKmMyndlr14oEy8daNuzgZK7kLMpBahNMr_VD4ganukn5BWvdv_0CJcaVju8yzCmQuGVq0kNBKRbroZoCv-H3Q_PmWaxfbcGWd6xSZ-KYQMzogvFyRXu_Y5N5xdK/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfznqZoMvZkai5jrcq91j1GOwEzCLtgDCs6JTTUMYj_7ajGkWmVDkwG1IrBw7A4BKuW6HPqePTTs7v48xCkmLJYn0HqMGqqp82OuBNoTO_eBWC3l8Ep9V9xaWLmM6Me6wnJiSw-XZdpxOA/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
</b:if>
7. Simpan template.
Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:
- Login ter lebih dahulu ke Account Blogger Anda;
- Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> - Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ket :
Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas. - Simpan/Save Template, selesai.