Ini tutorial cara menambahkan tombol ukuran teks untuk posting di Blogger. Kembali tahun 2009 saya menerbitkan sebuah gadget yang memungkinkan pengunjung untuk mengubah semua ukuran teks dan font di blog Anda termasuk judul, teks sidebar dan teks pesan. Tapi kali ini saya ingin gadget yang untuk merubah teks dalam postingan saya punya beberapa jQuery sederhana dan beberapa ikon berwarna-warni di meja kita dapat mengubah ukuran teks dihalaman postingan.memiliki tiga tombol untuk meningkatkan ukuran teks, mengurangi ukuran teks dan tombol reset bersama dengan ikon teks. Lihatlah demo di bawah ini:
Tambah Gadget Teks Resize Colorful Untuk Posting Blogger
Ingat Selalu Back Up Template Anda Sebelum Anda Membuat Perubahan
Langkah 1. Pada Dashboard Blogger Anda Desain Klik> Edit HTML Langkah 2. Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode - Cara Cari Kode Pada Template Blogger Template )
</ Head>
Langkah 3. Copy dan Paste kode berikut Langsung Di atas / Sebelum </ head>
Catatan Jika sebelumnya telah menambahkan script jQuery ke blog Anda cukup menghapus kode warna kuning.
<!-- Start Text re size gadget by http://www.spiceupyourblog.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget by http://www.spiceupyourblog.com -->
. Langkah 4 Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode
<div class='post-header-line-1'/>
. Langkah 5 Sekarang Copy Paste Kode Ini Dan Langsung Di bawah / Setelah
class='post-header-line-1'/> <div
Catatan - Gadget saat ini diatur untuk hanya menampilkan pada halaman posting untuk ditampilkan di halaman rumah juga menghapus dua bagian kode dalam kuning.
<!-- Start Text re size gadget by http://www.spiceupyourblog.com -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vGKRTrfdhFogIMAap1lvndoW3PQQs2LV4HwnlqE2YSCvxj1GYZdTepmUPCOnM6FVfHtwhVjuUTmdgenUsZuuiguemYYIsAgvYpedckA9Lsj9KsEOjsHeQXOWK-l4yCXUP2TOOg9S234/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkxpZr6lq_y8nN4y6KUZwTvtdM8KruhL9mkYVT9KtB3WL_DKVY5W4vUcoOzDh_1ExaxU_z0GqMQg1t6BHOofwxLjbkPXfANCAiKA5HkOrUBuRO9xYJ0UH6atj8OkHUul8H26dH4v-_eM/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhkbsCt_zNiEnK8te4Ly9Z-Rll8FfKxGKgKm1BTOv2IGG2NAVbpobSKaFNz-j4wBUzkrbDk2po_VEzc3dcUid58WuLPcqJ6fILewAcpgrGI78xJQqJ9HIw-M2MkGit_cc7Djqm4X0rI6M/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLWTG52O6mdphdR7WVWpPfg7OEdlPIbotQQsmjElrIDZh1OLvJfkkntSaBh5AUHsgcJiUljJAkeXRBEL98QyebyOS-WBftUVSkd9xOWQs5px3EIgLwCKBxNIeXNNcq-XxSrHQzMPA8nOo/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget by http://www.spiceupyourblog.com -->
. Langkah 6 Cari potongan kode berikut di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode
<data:post.body/>
Langkah 7. Sekarang menggantikan <data:post.body/> dengan kode berikut:
<span> <data:post.body/> </ span>
Langkah 8. Simpan template Anda. Itu saja Anda sekarang memiliki beberapa tombol mengubah ukuran teks keren dan berguna pada semua posts. Anda pastikan untuk memeriksa lebih dulu.
Tidak ada komentar:
Posting Komentar