Template Blog Blogspot SEO Friendly Gratis!

Template blog yang SEO Friendly adalah template yang dibuat menurut standar Search Engine. Berhubung tadi malam tidak ada kerjaan jadi saya coba memodifikasi satu versi template blogspot untuk dijadikan lebih SEO Friendly. Template blog gratis ini sudah dioptimisasi untuk anda semua dan desain kali ini saya bagi menjadi 5 variasi warna. Jadi silahkan dipilih warna mana yang menjadi favorit ada.

PERHATIAN:
Mungkin ada baiknya saudara melihat-lihat dulu ragam koleksi template SEO friendly saya. Silahkan klik di sini untuk melihat semua koleksi, atau silahkan juga membaca lebih lanjut siapa tahu suka dengan tipe ini. Link download ada di bagian bawah artikel.

Aslinya template ini adalah Bamz Magazine karya salah satu perancang template tanah air (attribute link ada pada footer). Desainnya cukup sederhana, tapi tetap cantik. Oleh karena itu terpikir untuk mengubah beberapa hal agar lebih memenuhi standar SEO dari Google. Soalnya selama ini template SEO friendly biasanya terlalu polos, jadi kurang menarik mata pengunjung.

Bagaimana sebenarnya kriteria template blog yang SEO friendy itu? Lalu kenapa juga saya mengatakan template blogspot yang saya modifikasi ini SEO friendly? Apa sebenarnya standar template yang baik itu?

Dari semua penjelasan yang sudah saya muat di blog ini ... sebenarnya sudah cukup membahasakan tentang template yang sesuai dengan standar Google dan mesin pencari lainnya. Hanya saja jika saudara belum bisa atau belum tahu kriteria dari template yang SEO friendly ... ya kita jelaskan lagi secara singkat.

Kriteria template yang baik di mata robot mesin pencari:

• Artikel di sisi kiri dan sidebar di sisi kanan
• Bagian yang paling ditekankan diberi tagging H1, dengan demikian pada homepage judul blog harus diberi tagging h1, sedangkan pada halaman artikel justru judul artikel yang diberi tagging h1.
• Title tag pada halaman artikel harus menampilkan judul artikel lebih dahulu.
• Mempunyai breadcrumbs untuk membantu search engine mengenali struktur blog
• Komentar tetap dipertahankan nofollow
• Loading harus cepat
• Menggunakan microdata dan microformat tagging sesuai aturan mesin pencari

Pada template blog gratis tapi SEO friendly ini, sudah saya lampirkan juga microdata untuk "reviewed". Dengan demikian Google bisa membuat tampilan pencarian dari blog saudara terlihat lebih menarik bagi pengguna Google. Microdata tersebut saya pasang pada bagian akhir artikel, dan terlihat seperti ini....

Dengan adanya mikrodata ini, maka hasil pencarian dari blog anda di Google akan terlihat seperti di bawah ini.

Tampilan seperti ini disebut rich snippet, anda bisa membuatnya lebih rumit lagi dengan menambah microdata foto, lokasi, dan sebagainya. Tampilan rich snippet akan membuat pengunjung lebih tertarik untuk mengklik link anda. Tapi ini disimpan dulu nanti akan dibahas di artikel lain.

Sekarang, agar "khasiat" dari template blog gratis hasil modif semalam ini tidak berkurang, harap diperhatikan untuk menghidari hal-hal di bawah ini:

• Hindari penggunaan flash element!
• Hindari penggunaan iframe dan frame seperti shoutbox pada sidebar, jika mau menggunakan shoutbox buatkan laman tersendiri
• Jangan sampai memasang broken link, atau link ke bad neighbours

Jika template blogspot anda sudah SEO friendly, lalu apa lagi yang harus anda lakukan? Cobalah untuk melakukan hal-hal berikut:

• Jika bisa usahakan membuat artikel berkualitas!
• Setiap memasang gambar gunakan ALT Tag.
• Cetak tebal kata-kata penting dari artikel anda
• Jangan lupa memasang meta deskripsi artikel pada saat mengetik artikel baru
• Terakhir, JANGAN LUPA MENCARI BACKLINK DAN PROMOSI BLOG DI SOCIAL NETWORK dan FORUM ONLINE

Sekarang bagi yang tertarik mencoba template blog gratis ini silahkan di download dari link di bawah.

Template blog blogspot SEO friendly "Simple Slider"

Download Simple Black Slider (lihat demo)

Download Simple Blue Slider (lihat demo)

Download Simple Green Slider (lihat demo)

Download Simple Grey Slider (lihat demo)

Download Simple Yellow Slider (lihat demo)

BAGI YANG TIDAK SUKA LABEL DI BAWAH HEADER, ATAU INGIN MENGGANTI DENGAN MENU HORIZONTAL, ATAU MENGEDIT SLIDER TAPI BINGUNG ... SILAHKAN BACA ARTIKEL MODIFIKASI SIMPLE SLIDER. MUDAH-MUDAHAN MEMBANTU

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Template Blog Blogspot SEO Friendly Gratis!
Ditulis Oleh Ricky Pratama
Artikel ini dipatenkan pada www.myfreecopyright.com, jika ingin mengutip, maka harus memberikan link balik pada artikel Template Blog Blogspot SEO Friendly Gratis! ini. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih atas perhatiannya

»»  Baca Selengkapnya ...

SlideShow Image Widget Blogger

Masih ingat ga sob artikel tentang membuat widget gambar slideshow beberapa waktu lalu? Yup,saya menemukan cara yang singkat mudah dan terlihat 'sempurna' dari script yang diciptakan teman kita ini,saya ambil artikel ini dari blog sahabat di www.khairulumam.com.
Jika widget yang pertama hanya menampilkan gambar dalam ukuran kecil bahkan navigasi slide-nya sedikit cacat karena tidak dapat ditampilkan sempurna disamping widget,lain halnya dengan script slideshow widget for blogger kali ini.

Widget ini terkesan lebih professional membuat kami ingin membagikan informasi ini pada teman-teman.
Bentuk fisiknya sobat bisa lihat di SINI.

Nah,ini juga salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis (jadi tak perlu menggunakan tombol geser,etc).

Itulah mengapa artikel kali ini saya beri judul Membuat Slideshow Photo / Foto Berubah-ubah dalam Membuat SlideShow Foto Widget #2 sebagai penyempurnaan dari widget sebelumnya di membuat slideshow jquery di postingan beberapa waktu lalu.
Oke sob,kita intip yuk bagaimana cara membuat widget slide show pada gambar / image / pictures ini.

Langkah dan Cara Membuat Slide Show Photo Widget for Blogspot

Pertama,sobat pergi ke pasar (hush!!!!) maksud kami pergi ke Dashboard > Tata Letak > Edit HTML > Contreng Expand Widget Templates (lihat gambar)

(1)


(2)


(3)

Cari kode <head> (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat dibawahnya letakkan kode script berikut ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Ket: kode berwarna merah adalah kode yang sobat bisa ganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain sobat otak-atik aja sendiri ya :D

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<ul class="slideshow">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94bGGMJWTTDyKdLubI2BuGV5hKhGy0cV95Qut4VWHOxJ0R1XmkVm-UlZ7q43UoMOivGQXf41eStVhoVsxg02XuK8b7rKEBf78EuyuW6YMj2A4QuCjetJbSoYaAagR3I1ZuBTK0yH-VTk/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94bGGMJWTTDyKdLubI2BuGV5hKhGy0cV95Qut4VWHOxJ0R1XmkVm-UlZ7q43UoMOivGQXf41eStVhoVsxg02XuK8b7rKEBf78EuyuW6YMj2A4QuCjetJbSoYaAagR3I1ZuBTK0yH-VTk/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQADYdQsOoNMK-VBo367Zl4k7i-mIQMqaL0GCF6Eq5DCdWn1-ElQg5xezTompZpp83cI10YllE1fP5VXhK935CuXjBaY3KY_b-LahHbRWVapTSYZxRPEptErlQ680QBdEd6TPiVLFE8I/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQADYdQsOoNMK-VBo367Zl4k7i-mIQMqaL0GCF6Eq5DCdWn1-ElQg5xezTompZpp83cI10YllE1fP5VXhK935CuXjBaY3KY_b-LahHbRWVapTSYZxRPEptErlQ680QBdEd6TPiVLFE8I/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9O1WUfUyzwsgR059WV4HIgkwMCKlei_RFOhGPBQF6Ty7qQF2eDP4nyHNZ-YykiE08c2GHI7mJA47bpGD4X5EKemAhWmXVHO7EZMT2MIl8qXpWbmEmH2D4pGslq0KiIOOvcrXoXIvXar8/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9O1WUfUyzwsgR059WV4HIgkwMCKlei_RFOhGPBQF6Ty7qQF2eDP4nyHNZ-YykiE08c2GHI7mJA47bpGD4X5EKemAhWmXVHO7EZMT2MIl8qXpWbmEmH2D4pGslq0KiIOOvcrXoXIvXar8/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1k2La1cybJx6r4lFWXMYA-oEVYOQA_EU8TPLM2HMBHAR-5G2h-2YK318fmrfOoJcFA-OKohv0cftTJ6752ooIbvNIo2OzcPRuE3hPbTEVbBT64fvtwnlxprC79IHaLIruSPGhHRVsnc/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1k2La1cybJx6r4lFWXMYA-oEVYOQA_EU8TPLM2HMBHAR-5G2h-2YK318fmrfOoJcFA-OKohv0cftTJ6752ooIbvNIo2OzcPRuE3hPbTEVbBT64fvtwnlxprC79IHaLIruSPGhHRVsnc/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Sumber :
http://pelajaran-blog.blogspot.com/2012/04/update-membuat-foto-slide-widget-di.html

»»  Baca Selengkapnya ...

Cara melebarkan kolom/elemen pada templates blog

Sebelum kita masuk ke pokok permasalahan, ada baiknya kita mengenal dulu bagian-bagian dari templates blogger, maka sebuah template blog akan mempunyai tiga elemen penting, yaitu :

• Kolom/Elemen Header
• Kolom/Elemen Outer
• Kolom/Elemen Footer

Untuk elemen Outer di bagi kembali menjadi :

• Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

• Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Outer-Wrapper adalah wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri

Nah,, sekarang bagaimana cara melebarkan kolom yang ada pada templates kita??

Ikuti langkah2 berikut ini, tapi dengan catatan jangan mencentang Expand Widget Template, karena akan muncul kode-kode yang tidak saya mengerti.

[Sebegai contoh] lihat gambar dibawah ini :

1. Langkah pertama cari kode seperti dibawah ini :

#header-wrapper {
width:950px;
}

Ganti 950px menjadi 1200px sehingga menjadi seperti bawah ini :

#header-wrapper {
width:1200px;
}

2. Cari lagi kode seperti di bawah ini :

#outer-wrapper {
width:950px;
}

Ganti 950px menjadi 1200px sehingga menjadi seperti bawah ini :  

#outer-wrapper {
width:1200px;

}

3. Cari lagi kode seperti dibawah ini :

#footer {
width:950px;
}

Ganti 950px menjadi 1200px dan scriptnya menjadi seperti dibawah ini :

#footer {
width:1200px;
}

Nah,, untuk wadah(Outer-Wrapper) nya istilahnya kita sudah memperlebar dari 950px menjadi 1200px.

Maka Langkah selanjutnya adalah melebarkan/menambah ukuran lebar kolom dari main-wrapper dan sidebar-wrapper nya agar sesuai dengan outer-wrapper/wadahnya.

untuk meperlebarkan main-wrapper (kolom utamanya yang biasanya berisi tentang postingan kita), dan juga lebar sidebarnya, maka kita tinggal cari kode seperti di bawah ini:

#main-wrapper {
width: 620px;
float: left;
}

#sidebar-wrapper {
width: 320px;
float: right;
}

Ganti ukuran lebarnya sesuai dengan lebar yang sobat inginkan, yang penting memenuhi lebar dari wadah/outer-wrapper nya. contoh :

#main-wrapper {
width: 840px;
float: left;
}

#sidebar-wrapper {
width: 350px;
float: right;
}

Artinya : 
840px + 350px+ 10px = 1200px

840px adalah lebar {main-wrapper}
350px adalah lebar{sidebar}
10px adalah lebar {untuk sela/margin sidebar}
1200px sesuai dengan{outer-wrapper atau wadah pada contoh di atas}

Dari keterangan di atas, maka akan menghasilkan seperti pada gambat di bawah ini :

Silahkan di pratinjau dulu sebelum menyimpan, jika sudah ok, maka simpan template sobat.
Nah, kini template sobat sudah berhasil di perlebar kolomnya, agar bisa lebih leluasa untuk mengisi konten2 yang bermanfaat.
Selamat mencoba, semoga sukses dan bermanfaat.




Sumber :
http://abdu-green.blogspot.com/2012/04/melebarkan-kolom-pada-templates-blog.html

»»  Baca Selengkapnya ...

Cara Membuat Lazy Page Loading Effect ke Blogger

Jika Anda telah melihat Google Dinamika Tema View untuk Blogger, maka Anda mungkin menyadari fakta bahwa sebelum seluruh template akan terkena ICON Jquery Kecil pemuatan muncul yang benar-benar menyentuh perhatian kita semua. Misalnya, Anda berpikir untuk memainkan game PC jadi sebelum Anda bisa mulai bermain Anda harus melalui bagian LOADING. Demikian pula, kita akan memasukkan Efek Jquery Memuat luar biasa untuk Blogger kami sehingga pengunjung kami tidak akan melihat gambar atau konten mendapatkan beban sebaliknya kita akan menunjukkan kepada mereka loading halaman Jquery lucu yang benar-benar akan menghibur mereka. Hari ini kita akan meningkatkan akun Blogger Anda dengan cara membuat lazy page loading effect ke blogger yang akan bermuka masam menarik perhatian pembaca.

Fitur yang dimiliki Lazy Page Loading Effect :

• Ini adalah membuat search engine yang ramah sehingga tidak akan mempengaruhi kecepatan situs apapun.
• Hal ini kompatibel dengan browser hampir setiap yaitu Chrome, Firefox, Internet Explorer, dan lain-lain
• Ini memiliki efek memuat yang beragam, sehingga Anda dapat memilih sesuai dengan kebutuhan keinginan Anda.
• Hal ini fleksibel coding sehingga Anda dapat menyesuaikannya tanpa keraguan apapun.
• Ini juga akan membantu blog mereka yang mengambil sedikit waktu untuk memuat karena fitur pemuatan akan menjaga pengunjung Anda tertarik pada blog Anda.

Langkah :

1. Buka akun Blogger Anda.
2. Masuk ke menu Template >> Edit HTML >> Proceed
3. Sekarang dalam cari kode dibawah ini :

]></b:skin>

     4.  Pastekan kode dibawah ini diatas pada kode diatas :

/*  D-Copy Lazy Page Loading Effect ( http://d-copy.blogspot.com) */
#mbl-lazyloading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#mbl-loader {
    height: 100%;
    display: none;
}

     5.  Cari kode dibawah ini :

</head>

     6.   Pastekan kode dibawah ini, diatas pada kode dibawah ini :

<script>
(function($){
$("html").removeClass("MD");

$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

     7.  Cari lagi kode </body> dan pastekan kode dibawah ini diatasnya :

• Kode ini ditampilkan jika Anda ingin menunjukkan ini efek pemuatan yang hanya ada di Home Page. (Recommended)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://d-copy.blogspot.com">D-CopyBlog</a></div></div></b:if>

• Paste code berikut jika Anda ingin melihat efek loading pada setiap halaman dari blog Anda.

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://d-copy.blogspot.com">D-CopyBlog</a></div></div>

TIP:

Anda harus memilih apakah Anda ingin menampilkan efek pemuatan hanya pada homepage atau website masing-masing dan setiap yang ada di blog Anda. Menurut kami, Anda harus menjaga efek pemuatan di situs Anda karena efek beban berulang dapat mengganggu pengunjung Anda.

Sekarang dari coding CSS di atas Ganti  Loading-GIF-Here dengan salah satu efek pemuatan berikut animasi yang paling Anda sukai.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXftIhb5RUXrUggHIVK4naIf8gRdgPoNH6_cSDDsyTyizKZ3sYX0MYCFKRtwdyXkGvs3tOp8Q_Jjfp8apctFn9kqn8oiK12XUDRfWloe1dH2x0Ptc3HQ7F37k69mC5t1gaYVw3JwYSfhg/s1600/MBL-Loading-1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3ERsioyrIzYoWdAWOVwsuPf1yCa6HJ7yoFjnLgeZu-H2Omz3dFZ1gz8FznrzyE0k8x02MijvMPTrlnkpBD3X7c1-MSjBm-hfIxJ6eom1JN44HXWrUCwmzkVhHgBxWrgotB-UP_AJaLo/s1600/MBL-Loading-2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixH_rixUves4KYHlOP4avWpuYgWxDtsF54ZllqOVdKs7PQ7-CEkYx707swNv0veh1Ma6t-QFMa4TvscFH0f4FgMfEa47ox08rC3IKp_zbwND_jX8FGm_8RlY_qk80NaOiR28ey5oIvdKs/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhiNa3UX1Tt9h3aeHuyJz_hr6Eak1ickO1yGY21T-8KCj8JwZbFkmA43MQnohZ1KSl0QSXPHDHMeo3b4piSqoZ1gqNC6qYMFdvtSHtmtF75AvAk16oN51nfA7cqt8k3r3P09rKuoI92sE/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijVSP-IJPlIC8AXayR5048dUhgEhL1JliWeTxt2f8syxwuLg5K70e7V2pdMfR5p4miwlnT6FqjP7o-9iVkKAHmcvSWKscz34bGO1kjxYKBIPLQR3iG6TEiJe7Gxt3Dz7J9Ng-7ut9njbM/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITWUgf81XIHTs4IffYwkKauRBQEA4HHomIcV5pHe54tfTBbacKp-69sATd7y44t70RXg1uG4mWM4LJh1TJmL4xsiDa2kxIDtToz7AE5rhH43GGa29I3YaxnNnjSq0TZm7sWztbEgmkVg/s1600/MBL-loading-6.gif

sumber informasi :
http://d-copy.blogspot.com/2012/09/ara-membuat-lazy-page-loading-effect-ke-blogger.html

»»  Baca Selengkapnya ...

Cara Buat Komentar Author Menjadi Berbeda di Blogger

Hari ini kita akan belajar bagaimana cara buat komentar author berbeda dan ini menjadikan pengunjung blog Anda dapa mengetahui komentar-komentar Author. Blogger semakin maju dan kode ini baru-baru ditambahkan. Jadi untuk menyorot penulis atau komentar admin di Blogger Anda harus hanya menerapkan beberapa trik sederhana untuk mengaktifkannya. Tapi bagaimanapun, tutorial ini tidak memungkinkan bagi Anda yang telah menggunakan threaded comments.

Berikut cara untuk melakukannya.

Anda akan menemukan bahwa bukan body komentar yang dibuat berbeda tetapi seluruh bagian dari komentar Anda sebagai komentar admin atau lainnya sebagai penulis akan berubah. Jadi pertama hanya mengikuti langkah-langkah:

1. Backup Template Anda terlebih dahulu.
2. Buka akun blogger Anda
3. Masuk ke menu Template > edit HTML > centang Expand Template Widget
4. Cari kode yang mirip dengan template Anda dibawah ini :

          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>

Potongan dapat berbeda pada blog yang berbeda tergantung pada kustomisasi dan pembuat yang membuat itu. Jadi potongan utama untuk menemukan untuk yang <b:loop values='data:post.comments' var='comment'> dan ganti semuanya dengan kode </b:loop> (pada kode yang berwarna merah diatas) ganti dengan :

          <b:loop values='data:post.comments' var='comment'>
            <div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>
            <dt class='comment-author' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </div>
          </b:loop>

     5.  Sekaran cari kode ]]></b:skin> dan diatasnya ganti dengan kode dibawah ini :

.comment-footer{
 margin-bottom:0 !important;
}
.author-comment{
 background-color:#F0FFF0;
 padding:5px;
 margin-bottom:1.5em;
 border:1px solid #ccc;
 border-radius:10px;
}
.author-comment.blog-author {
 background: #FFEBCD url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;
}

     6.  Save Template Anda,

Keterangan : 

• Ubah nilai hex warna, misalnya:#F0FFF0 atau #FFEBCD atau #CCC, dengan warna yang Anda inginkan untuk komentar Author
• Anda juga dapat mengubah background pada kode  https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png

http://d-copy.blogspot.com/2012/09/buat-komentar-author-menjadi-berbeda-di-blogger.html

»»  Baca Selengkapnya ...

Cara membuat fitur slide show

Banyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banyak menampilkan banyak gambar, desain ataupun foto. Dilihat dari tampilanya, slide show ini sangat menarik. Jadi selain kegunaan diatas slide show ini dapat menjadikan web atau blog kita tambah lebih menarik.

LIHAT DEMO

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah berikut ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'> //<![CDATA[ //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** May 2nd, 08'- Script rewritten and updated to 2.0. //** June 12th, 08'- Script updated to v 2.3, which adds the following features: //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later. //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former). //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example. //** July 11th, 08'- Script updated to v 2.4: //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider") //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads. var featuredcontentslider={ //3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"> <img src="loading.gif" /> Fetching slider Contents. Please wait...</div> ', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page? settingcaches: {}, //object to cache "setting" object of each script instance jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) }, ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, setting){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting) } }, buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } }, buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } }, urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) }, setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value }, fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } }, cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass }, autorotate:function(setting){ window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1]) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) } } //]]> </script> <style> #slider4{ border: 2px solid #181818; background: #ffffff; margin-left: 9px; } #paginate-slider4{ border-color: #181818; margin-left: 9px; margin-top: 4px; } #paginate-slider4 a img{ width: 93px; height: 60px; border: 2px solid #181818; margin-top: 5px; } #paginate-slider4 a img:hover, #paginate-slider4 a.selected img{ border: 2px solid #ffc04e; } .sliderwrapper{ position: relative; /*leave as is*/ overflow: hidden; /*leave as is*/ border: 10px solid navy; width: 500px; /*width of featured content slider*/ height: 290px; } .sliderwrapper .contentdiv{ visibility: hidden; /*leave as is*/ position: absolute; /*leave as is*/ left: 0; /*leave as is*/ top: 0; /*leave as is*/ padding: 5px; background: white; width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */ height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1; opacity: 1; } .pagination{ width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */ text-align: right; background-color: #ffffff; padding: 0px 5px; } .pagination a{ padding: 0 5px; text-decoration: none; color: #181818; background: #ffffff; } .pagination a:hover, .pagination a.selected{ color: #181818; background-color: #ffffff; } .background img{ width: 500px; height: 300px; } </style>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div style="float:left;">

<div id="slider4" class="sliderwrapper">
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
</div>

<div id="paginate-slider4">
<a href="ULR POST" class="toc"><img alt="IMAGE-1" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-2" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-3" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-4" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-5" src="ULR GAMBAR KECIL"/></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatam :

Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini. 

yang ngajarin :

http://www.carabuatwebgratis.com/2011/07/cara-membuat-fitur-slide-show.html

»»  Baca Selengkapnya ...

Menambah widget pengatur Ukuran dan Warna teks pada Blog

Widget ini sesuai fungsinya menurut saya sangat unik dan berguna bagi pengunjung atau pembaca artikel di blog kita, yaitu pengunjung bisa mengatur atau merubah ukuran dan warna tulisan sesuai dengan selera atau kenyamanan mata pengunjung saat membaca. Dalam widget ini terdapat 4 macam warna dan 4 macam ukuran yang bisa dipilih. Anda bisa lihat contoh gambar bentuk widget diatas.

OK...., bila anda juga bermninat memasang widget seperti ini pada blog anda, silahkan anda ikuti langkah-langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

8. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #088A08 !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#088A08" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Ganti warna tulisan </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">green</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Ganti ukuran tulisan </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

 
5. Simpan.

Dan sekarang anda lihat hasil Widget yang baru anda buat....

Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

 

 

 

 

 

http://www.carabuatwebgratis.com/2011/02/menambah-widget-pengatur-ukuran-dan.html

»»  Baca Selengkapnya ...

Cara Merubah Warna Teks di Blog Saat di Blok

File Professional - Mengganti warna teks saat di Blog saat ini sedang di cari oleh para Blogger. Walaupun tidak begitu penting atau berpengaruh terhadap page rank, tetapi tetap saja, banyak blogger - blogger indonesia yang mencari - cari tentang bagaimana cara mengganti warna tulisan di Blog saat di Blok.

Sebelum kita mengganti warna, yang pertama - tama harus kita ketahui adalah kode - kode warna html seperti misalalnya #B96109 untuk warna biru. Berikut ini adalah kode - kode HTML untuk warna primer yang biasa sering digunakan oleh para Blogger.

• #FFF untuk warna merah,
• #FFFF untuk warna kuning,
• #B96109 untuk warna biru muda, dan
• #FFFFFF untuk warna putih.

Sebenarnya selain warna - warna di atas, masih banyak lagi warna warna lainnya yang dapat digunakan untuk mengganti warna blok pada blog. Hanya saja, karena kode - kode warna yang ada sangat banyak, maka tidak mungkin akan saya bahas pada halaman ini. dan Insya Allah, akan saya bahas pada posting berikutnya.

Sekarang kita masuk ke Topik Bahasan kita yaitu mengganti warna teks di blog saat di blok. Untuk memulai mengganti warna teks dan warna blok, silahkan ikuti langkah - langkah berikut ini :

1. Log In ke Blogger,
2. Klik Template lalu pilih Edit Html,
3. Jangan lupa, beri checklist pada expand template widget,
4. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mencari),
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>

::selection {background:#fff; color:#ffffff}

::-moz-selection {background:#fff; color:#ffffff}

::-webkit-selection {background:#fff; color:#ffffff}

Keterangan :

• Kode #fff berwarna merah bisa anda ganti dengan kode warna lainnya, yaitu warna yang akan berubah saat teks di Blok.
• Kode #fffff berwarna biru bisa juga anda ganti dengan kode warna lainnya, yaitu warna tulisan pada saat tulisan di blok.

Langkah terakhir tinggal anda save template, untuk menyimpan hasil setingan kita kali ini. Cukup sekian penjelasan tentang Cara Merubah Warna Teks di Blog Saat di Blog. Thank's for Reading, semoga artikel ini bisa bermanfaat bagi anda sekarang dan di masa mendatang.

 

 

 

 

Yang punya artikel :

http://fileprofessional.blogspot.com/2012/04/cara-merubah-warna-teks-di-blog-saat-di.html

»»  Baca Selengkapnya ...

Cara pasang Iklan melayang di kiri atau di kanan blog

Cara pasang Iklan melayang di kiri atau di kanan blog, iklan memang merupakan salah satu menjadi media promosi paling tepat. Namun, kita juga harus lebih efektif untuk memilih situs penyedia iklan tersebut. Dari yang murah efektif, hingga yang mahal. Salah satu caranya yaitu memilih space iklan yang strategis, bila sobat pandai memilih space iklan yang strategis, otomatis iklan sobat tersebut akan mudah di baca oleh si pembaca iklan. Lihat Disini untuk memasang iklan di tempat yang strategis

Selain si advertiser, pada publisher (penampil iklan) pun harus pandai memilih tempat strategis agar bisa mendapatkan penghasilan yang tinggi. Untuk tempat strategis itu bisa di sidebar, di header, di homepage, di kiri atau di kanan blog atau di tempat lain. Nah, pada postingan kali ini saya akan menerangkan bagaimana cara membuat dan cara pasang iklan melayang di kiri atau di kanan blog. Untuk membuatnya, bisa sobat langsung lihat langkah - langkahnya di bawah ini, cekidot

1. Pergi ke blogger.com menggunakan akun google sobat
2. Masuk ke halaman Template
3. Klik Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5. Jika sudah ketemu, copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>
   

   #adslayoutleft {
   position:fixed;
   top:10px;
   margin-left :335px;
   float:left;
   z-index:10;
   }
   #adslayoutleft .iklankiri {
   float:right;
   clear:both;
   }
   #adslayoutleftright {
   float:right;
   position:fixed;
   top:10px;
   margin-left:-800px;
   z-index:10;
   }
   #adslayoutleftright.iklankanan {
   float:left;
   clear:both;
   }

6. Lalu Simpan Template
7. Selanjutnya, masuk ke halaman Tata Letak
8. Klik Tambah Gadget, lalu cari HTML/Javascript
9. Copy dan pasang kode di bawah ini
   

   <div id='adslayoutleft'><div class='iklankiri'>
   
   

   Simpan kode Adsense / Iklan sobat disini

   
   </div></div>
   <div id='adslayoutleftright'><div class='iklankanan'>
   
   

   Simpan kode Adsense / Iklan sobat disini

   
   </div></div>

10. Simpan dan lihat hasilnya

Jika ukuran margin terlalu panjang atau pendek. Sobat bisa mengubah ukuran marginnya dengan mengganti kode yang berwarna biru. Silahkan sobat atur sesuai keinginan sobat. 

 

 

 

 

Source :

http://blognya-reggy.blogspot.com/2012/08/cara-pasang-iklan-di-kiri-atau-di-kanan-blog.html

»»  Baca Selengkapnya ...

Pasang Iklan Di Atas Posting Blog

Salah satu posisi iklan yang memiliki potensi besar di lihat atau di klik visitor adalah dengan memasang iklan di bawah judul postingan. Berdasarkan pengalaman pengalaman para blogger, cara ini memang terbukti dapat meningkatkan earning/pendapatan. Dengan menempatkan iklan di bawah judul postingan maka iklan tersebut semakin mudah dilihat pengunjung dan kemungkinan besar mereka mengkliknya. Stategis sekali menempatkan iklan di bawah judul postingan. Sobat dapat memasang salah satu program periklanan PPC (Pay Per Click) lokal Indonesia

Gimana yaa Cara Memasang Iklan di dalam Posting blog ?. berikut dibawah ini saya sajikan sedikit tutorial yang mungkin bisa bermanfaat buat sobat.

Cara Memasang Iklan Dalam Postingan Bawah Judul :

Pertama, seperti biasa masuk terlebih dahulu ke akun blogger kita.

• Klik fitur rancangan.
• Klik edit HTML.
• Klik Expand Template Widget.
• Cari kode HTML di bawah ini. 
• <div class='post-body entry-content'> atau <div class='post-header-line-1'>. 

 Selanjutnya letakkan kode dibawah ini tepat di bawah kode <div class='post-body entry-content'> atau <div class='post-header-line-1'>.



 <div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">TULISAN ATAU GAMBAR</div>

• Mengingat kode HTML tiap template berbeda-beda, maka cari saja salah satu yang ada pada template blog kita.

Keterangan :

• Sebagai antisipasi jika muncul kegagalan dalam proses edit, back up template sobat dengan cara download template lengkap kita terlebih dahulu.
• Sebelum menempatkan kode iklan di dalam template, kita wajib untuk mempharsenya terlebih dahulu agar iklan yang kita tampilkan “sinkron” dengan template blog kita. Kita dapat mempharse kode iklan tersebut bisa disini dan centricle. (pilih salah satu).
• Gunakan fasilitas pencarian dengan klik Ctrl + F pada keyboard untuk mempercepat pencarian kode HTML yang kita cari dalam template blog kita.

Tips untuk mencari kode Gambar

• Masuklah ke blog anda menggunakan akun anda,kemudian pilih New Entri kemudian masuk Posting.
• Pilihlah Compose kemudian klik logo untuk upload gambar(insert image) silahkan ambil gambar yang akan kita rubah ke code HTML caranya seperti pembahasan yang lalu  .

• Setelah gambar muncul pilih Edit HTML dan lihat code yang ada dibawahnya yang berawalan scr  itulah code HTML dari gambar yang kita upload .

jika di zoom seperti ini :   

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPuL5kM37MQtZpPFKAJkyykYMnHgu6__xi9J8rdshwe8OvrWTcKcr761luQVyLkU5J9ssiSwsG4Khj-t7edbmL73XoMPMaUTM2REr44Byfc0xa-4313nFVwKikQEcnGf1u85lct33RZ6U/s200/47119_426805592751_298400792751_4723708_4714411_n.jpg" width="200" />

yang di beri warna merah adalah code HTML (alamat gbrnya) dari gambar tersebut, saya memberi contoh dengan gambar mesjid.

• Selesailah sudah,sekarang kita mempunyai code gambar yang bisa kita gunakan untuk pajangan eh, untuk kita gunakan sesuai keperluan,tapi jangan gambar porno yah,kasihan generasi muda.hehe...

»»  Baca Selengkapnya ...