Tips and Trick Blogger

Mengganti Icon Mouse

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Sun, 21 Dec 2014 03:12:00 +0000

Icon mouse yang dimaksud di sini adalah tampilan icon pada kursor mouse ketika membuka halaman blog. Anda bisa mengganti tampilan kursor mouse dengan gambar yang diinginkan dari internet. Siapa saja yang membuka halaman blog anda, maka tampilan kursor mouse-nya akan berubah sesuai dengan icon gambar yang anda tentukan.

Langkah-langkahnya sebagai berikut :

1.Login ke blogger anda

2.Buka menu Template

3.Pilih edit template

4.Salin kode berikut dan letakkan setelah baris tag html: </head>

cursor: url("http://i1276.photobucket.com/albums/y472/kerok321/3d_zps25e29076.gif"), default;

Catatan :

Baris http://i1276.photobucket.com/albums/y472/kerok321/3d_zps25e29076.gif , adalah lokasi file gambar atau icon di internet yang ingin ana gunakan sebagai icon kursor mouse pada blog.

Anda bisa menggunakan lokasi file gambar atau icon di internet yang tersedia banyak di internet atau bisa dengan cara mengunggahnya ke lokasi hosting gambar gratisan seperti imageshack.us, photobucket.com , dan lain-lain.

5.Simpan perubahan kode template

6.Buka ulang blog dan kursor mouse akan berganti dengan icon yang sudah anda tentukan.

Silahkan download tutorialnya dalam bentuk flash disini

NB :

1.Dilarang keras mengcopy artikel kami untuk diposting di blog kembali

2.Artikel ini sudah dilindungi DCMA Protection

3.Untuk membantu kami dalam mengembangkan blog ini tolong klik iklannya ya

Terima kasih ^_^ semoga bermanfaat

Title dengan Teks Berjalan

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Thu, 18 Dec 2014 23:54:00 +0000

Title blog adalah tampilan teks dari judul blog pada title bar browser. Anda bisa membuat title blog tersebut bergerak,dengan menyisipkan beberapa baris kode javascript di pengaturan blog.

Langkah2nya sebagai berikut :

1. Login ke blogger anda dan buka menu Template

2. Pilih Edit HTML

3. Salin kode dibawah ini dan letakkan setelah baris tag html: <head> atau sebelum tag:

</head>

<script type='text/javascript'>

//<![CDATA[

teks = "Tips dan Trik Tersembunyi Wordpress dan Blogger ";posisi = 0;

function animasi_teks() {

document.title = teks.substring(posisi, teks.length) + teks.substring(0, posisi); posisi++;

if (posisi > teks.length) posisi = 0

window.setTimeout("animasi_teks()",200);

}

animasi_teks();

//]]>

</script>

Warna Merah :Kalimat yang akan ditampilkan pada title bar dengan animasi, anda bisa mengubahnya sesuai keinginan kalian.

Warna Hijau : Nilai 200 bisa kalian ubah sesuai keinginan kalian.Semakin besar nilainya akan semakin lama jedahnya atau semakin lambat.

Gambar

4. Simpan perubahan kode template dan hasil penambahan kode

5. Kembali ke tampilan blog anda dan teks pada title bar akan bergerak dari kanan ke kiri

Silahkan download tutorialnya dalam bentuk flash disini

NB :

1. Dilarang keras mengcopy artikel kami untuk diposting di blog kembali

2. Artikel ini sudah dilindungi DCMA Protection

3. Untuk membantu kami dalam mengembangkan blog ini tolong klik iklannya ya

Terima kasih ^_^ semoga bermanfaat

Menyembunyikan dan Menampilkan Secara Otomatis Navbar ( Navbar Autohide )

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Thu, 18 Dec 2014 00:21:00 +0000

Navbar atau Nabigator Bar berada pada bagian paling atas halaman blog. Anda bisa menyembunyikan dan menampilkannya secara otomatis dengan melakukan sedikit perubahan pada baris kode template.

Berikut cara menyembunyikan dan menampilkan secara otomatis :

1.Login ke blogger Anda.

2.Buka menu Template.

3.Pilih Edit HTML.

4.Salin kode HTML berikut dan letakkan sebelum baris perintah : ]]></b:skin> pada halaman kode di template.

#navbar-iframe {

opacity:0.0;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover {

opacity:1.0;

filter:alpha(Opacity=100,FinishedOpacity=100)

}

Contoh gambar :

5. Setelah selesai, simpan hasil perubahan kode pada template blog anda.

Berikutnya lihat tampilan blog anda. Setelah menambahkan baris kode tersebut, navbar pada blog tidak akan tampil. Letakkan kursor mouse pada bagian atas halaman dan otomatis navbar akan tampil kembali.

Silahkan download tutorialnya dalam bentuk flash disini

NB :

1.Dilarang keras mengcopy artikel kami untuk diposting di blog kembali

2.Artikel ini sudah dilindungi DCMA Protection

3.Untuk membantu kami dalam mengembangkan blog ini tolong klik iklannya ya

Terima kasih ^_^ semoga bermanfaat

10 Cara Meraup Dollar dari Internet

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Tue, 16 Dec 2014 23:44:00 +0000

Berbicara tentang bisnis online Indonesia maka pikiran kita akan terbatas pada PPC lokal, pulsa online dan E-Book. Bagaimana dengan bisnis online dunia? Fakta telah menunjukkan setiap tahun muncul beberapa program baru penghasil duit yang berkembang secara cepat baik itu hasil dari modifikasi program lama maupun hasil inovasi beberapa ide kreatif pemuda masa kini.

Jika dijabarkan secara keseluruhan, maka tidak akan ada habisnya, karena hingga saat ini ada ratusan kategori bisnis online yang diikuti oleh ribuan program. Namun kali ini saya akan coba menjabarkan beberapa peluang bisnis online yang saya ketahui dan sangat memungkinkan menambah pundi-pundi kekayaan anda. Beberapa diantaranya sudah tentu tidak asing bagi anda, namun saya akan mencoba menyegarkan kembali, dan sisanya mungkin belum anda ketahui. Mari kita mulai dari beberapa program yang sudah tidak asing lagi bagi kita semua.

Berikut adalah 10 Cara Meraup Dollar dari Internet

#1. Google Adsense

Google AdsenseGoogle Adsense adalah sebuah bisnis online berbasis Paid Per Click atau anda akan dibayar per klik yang anda hasilkan. Google Adsense adalah salah satu bisnis online terfavorit di Indonesia, dan sebagian besar pebisnis online Indonesia memilih Google Adsense sebagai program utama mereka.

Komisi yang diberikan bervariasi, tergantung dari topik iklan, asal pengunjung yang melakukan klik pada iklan Adsense dan beberapa faktor lainnya.

#2. Make Money Blogging

Saya agak bingung untuk menggunakan bahasa Indonesia yang tepat Make Money Blogginguntuk kata-kata di atas. Pada intinya, kita akan mendapatkan uang melalui blog kita. Yang harus kita lakukan adalah tetap mengupdate konten, melakukan optimasi blog dan bergabung dengan beberapa program bisnis online yang berhubungan.

Ada banyak peluang bisnis melalui kegiatan blogging ini, antara lain sebagai berikut:

a. Payperpost.Com – Anda akan di bayar $5 – $20 per post

b. Reviewme.Com – Tugas anda adalah mereview products, websites dan jasa

c. Sponsoredreviews.Com – Ini adalah program paid review terfavorit untuk para pebisnis online di Indonesia

d. Smorty.Com – Salah satu program Paidreview yang bagus

e. Blogitive.Com – Program yang memberikan komisi flat $5 untuk seluruh pekerjaan

#3. Menulis E-Book dan Menjualnya

Apabila anda memiliki hobby menulis dan mempunyai pengetahuan Jual Beli E-Booktentang bisnis online baik secara general maupun spesifik, maka ada baiknya anda menuangkannya dalam bentuk E-Book lalu menjual pengetahuan tersebut. Anda dapat menggunakan software dari primopdf.com untuk memproses artikel anda menjadi sebuah E-Book pdf.

Ada banyak situs yang menawarkan kemudahan dalam bisnis jual beli E-Book ini, antara lain:

a. Paydotcom.Com – Program yang menggunakan paypai sebagai Payment Processor. Situs ini adalah alternatif dari Clickbank

b. ClickBank.Com – Salah satu program terbaik untuk berbisnis E-Book

c. TradeBit.Com – Alternatif lain menjual E-Book

#4. Jual Beli Domain

Jual Beli DomainIni adalah bisnis yang sangat mencengangkan, karena bila dilihat dari segi Return Of Investment, bisnis ini dapat dibilang yang paling tinggi. Karena menurut pengalaman, saya mendapatkan hasil di atas 8000% hanya dalam waktu 3 bulan.

Beberapa situs penyedia layanan jual beli domain:

a. Sedo.Com – Situs yang paling populer untuk berbisnis jual beli domain

b. Aftermarket.com – Salah satu alternatif berbisnis domain

c. RickLatona.com – Salah satu pelaku bisnis domain yang juga merupakan penjual dan pembeli domain

#5. Jual Keahlian Anda

Apabila anda seorang designer logo, banner, dll.. atau anda seorang programmer, anda dapat menjual keahlian anda di beberapa situs di bawah ini.

a. RentaCoder.Com – Pusatnya penyedia jasa programmer freelance

b. Elance.Com – Penyedia jasa programmer alternatif

c. LogoWorks.Com – Khusus bagi anda para desainer logo untuk web maupun untuk perusahaan

d. DesignOutpost.Com – Untuk para desainer

#6. Marketplace untuk para Fotografer

Dunia fotografi juga merupakan bidang yang tepat untuk memulai bisnis online, karena ada beberapa penyedia jasa jual beli Foto. Diantaranya:

a. ShutterStock.Com – Membayar anda $0.25 setiap foto anda di download

b. BigStockPhoto.Com – Membayar $0.5 hingga $1 per download

c. DreamsTime.Com – Anda akan dibayar sebesar 50% s/d 80% untuk setiap penjualan Foto

d. Fotolia.Com – Salah satu Marketplace favorit

#7. Desain Grafis untuk T-Shirt

Apabila anda hobby dalam mendesain kaos, cobalah jual desain anda, jika beruntung anda akan mendapatkan loyalty dari setiap penjualan yang dihasilkan. Beberapa situs yang siap membeli desain kaos anda

a. Zazzle.Com

b. SpreadShirt.Com

c. PrintMojo.Com

d. 99dogs.Com

#8. Menjadi Penulis di About.Com

Anda dapat menjadi penulis tetap di About.Com. Apabila disetujui minimal anda akan dibayar sebesar $725 / Bulan, angka yang lumayan bukan?

Apabila tertarik, cukup mendaftar di beaguide.about.com/index.htm

#9. Memberikan Saran nama Domain

Benarkah judul di atas? Yup, anda dibayar hanya dengan memberikan saran nama domain yang bagus. Anda akan dibayar $25 untuk setiap nama domain premium dan diminati. Apabila tertarik join sekarang di PickyDomains.Com

#10. Review Product

Tugas yang dilakukan untuk program ini secara teori dapat dibilang mudah. Namun apabila tidak sesuai dengan yang diinginkan maka anda tidak akan dibayar. Daftarkan segera di:

a. ReviewStream.Com – Anda akan dibayar $2 untuk setiap review yang disetujui

b. SoftwareJudge.Com – Anda akan dibayar diatas $50 per review

Cara Membuat Navigasi Menu Full Color di Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Tue, 16 Dec 2014 05:58:00 +0000

Bagaimana cara untuk membuat navigasi menu full color di blog? Untuk membuat navigasi menu supaya menjadi full color atau warna-warni sebenarnya tidak susah. Membuat navigasi menu dengan warna yang berbeda-beda di setiap link menu sama saja khalayak membuat navigasi menu pada umumnya, hanya saja untuk membuat navigasi menu menjadi full color kita perlu menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Namun biarpun begitu saya rasa hasilnya juga tidak cukup mengecewakan karena navigasi menu ini juga lumayan serasi di terapkan ke template blog, apalagi jika menggunakan template Metro UI. Untuk lebih jelasnya, berikut tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog.

1. Login ke akun blogger.
2. Langsung menuju Template klik Edit HTML.
3. Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template.

.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }

ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }

ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }

ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }

ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }

ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }

ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }

ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }

ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }

ul.navfullcolor li ul li a:hover { background: #FF8000; }

.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}

.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}

.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}

.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}

.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}

4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.

<div class='navmenu'>

<ul class='navfullcolor'>

    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>

    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 1</a>

        <ul>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>

        </ul>

    </li>

    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 2</a>

        <ul>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>

        </ul>

    </li>

    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 3</a>

        <ul>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>

        </ul>

    </li>

    <li><a href='http://mas-andes.blogspot.com' class='purple'>Menu 4</a>

        <ul>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>

        </ul>

    </li>

    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 5</a></li>

    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 6</a></li>

    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 7</a></li>

</ul>

</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini:

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini

Kemudian Simpan.

Demikian tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog, lakukan yang mana yang lebih mudah. Akhir kata hanya bisa saya sampaikan untuk sedikit motivasi “Not an error when you try and then fail. The only mistake is when you do not dare try for fear of failure”. Sekian dan keep blogging!

NB : Untuk membantu kami dalam mengembangkan blog ini tolong klik iklannya yah ^_^

terima kasih

Cara membuat efek Rotasi+Shadow pada Gambar Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Sun, 14 Dec 2014 23:33:00 +0000

Cara membuat efek Rotasi dengan bayangan di Blogger. Tutorial blog seocips kali ini adalah tentang memberikan efek Rotasi pada gambar blog. Sobat tentunya ingin membuat blog sobat terlihat menarik di mata pengunjung blog. Untuk membuat blog menarik dan terlihat keren tentu saja ada macam-macam cara yang sobat dapat gunakan, salahsatunya adalah dengan memberikan efek di gambar blog sobat misalnya efek rotasi.

Efek berikut ini anda tidak perlu menambahkan script jquery pada template blog anda, efek berikut ini cukup sederhana yaitu hanya menggunakan CSS. Untuk demonya sobat dapat melihat langsung live demonya di gambar di postingan ini. Ok berikut adalah...

LIVE DEMO :

Membuat Efek Rotasi pada Gambar Blog

1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin>
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin>.

.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{ transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}

Untuk menerapkannya pada postingan blog sobat tinggal mengupload gambar yang sobat inginkan.

Bagaimana sobat? keren gak? ok sekian artikel dari kami untuk saat ini dan jangan lupa lihat artikel Terbaru Dari Kami. sekian dan selamat mencoba.

NB : Untuk membantu kami dalam mengembangkan blog ini tolong diklik ya iklannya

terima kasih ^_^

Cara Meletakkan Musik Di Blog Dengan Pilihan Lagu Sendiri

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 12 Dec 2014 03:14:00 +0000

Selamat Siang teman2, kali ini kami akan memberikan tutorial cara meletakkan musik di blog dengan pilihan lagu sendiri. Seringkali kita menemukan website penyedia musik untuk blog, namun lagu-lagu yang disediakan hanya terbatas dan lagu berbahasa inggris semua tidak ada yang berbahasa indonesia ,atau lagu-lagu yang paling kita sukai, nah kali ini kami akan memberikan tips dan trick agar lagu lagu yang kalian sukai bisa didengarkan di blog kalian. berikut contoh gambar di blog kami :

berikut tampilan gambarnya

Sebelum kita memasang script musik di blog, kita harus membuat akun di Google Site.

Berikut caranya :

1. Buka Google Site, silahkan membuat akun atau kita bisa masuk dengan menggunakan email dan password Gmail.

2. Setelah itu akan muncul gambar seperti berikut :

3. Klik menu " Buat"

4. Muncul Gambar seperti berikut :

Pilih tema dan nama Google site terserah kalian , setelah kalian isi persyaratan semua klik " Buat "

contoh seperti punya saya yang saya namai "My Music"

5. Setelah Google sitenya terbuat, klik bagian yang saya tandai merah

6. Isi nama laman setelah itu klik " Buat"

7. Klik "Tambahkan File" pilih lagu kesukaan di data komputer kalian ^_^

8. Tunggu sampai proses pengunggahan selesai

9. Setelah selesai klik " Simpan "

10. Muncul Gambar seperti berikut

Klik "Unduh" dan tanda unduh

11. Ambil Linknya dengan pilih " copy download link "

Link simpan di Notepad untuk sementara

Nah akhirnya selesai pembuatan link lagu yang kita sukai dan kita juga sudah punya akun google site, Selanjutnya cara pemasangan link lagu di blog, berikut tahapannya :
1. Buka "Tata Letak"
2. Klik "Tambah Gadget" Terserah kalian mau pasang bagian mana
3. Pilih HTML/Javascript
4. Masukkan Script berikut

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfpZHRTt-5wuxxhNRuE45-Q-SEmyRJvK09v8NV4680M-y81AhlwO7f5JmxEJ_bRQ0wmBw_GO4Kpz3yhAM-BxE5C9v_jN_A0D8NhEadhdeKdnSP_0gl0sES2iCh1ZWY_7O7xpjKydkQdcZ/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgd11kd2t8bQD8lqOBIYpUrUEjhW0SGk8dGRzzDYd0Be6lkgYbnB5zhxOgaB68pHXMBt36_0II-rGsasJiF2ikRR0LygWrHNajKTm_JkiOORqzBXoHw48WwYYQdW-4-s8SNyFG4AV7Co0/s130/loading....gif") no-repeat top right;
}
</style>
<div class='seocipsmusic'>
<div class='seocipsxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss seocips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBn1eVGjipCr__JfVTgHadw2dgKwMnmXlHcppnuu-Zp39NffRUwaQBjixywdnjFQWvvdkcvSAv01cpuVCwAxmN8OygJJkYSh1Kf-8MBKpPHy_lfWojb06uLkj_iJiwMVbtidrvJuFtIsri/s20/Audio-File-icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold; padding:10px 10px;'>Silahkan mendegarkan musik dari KIR SMAN 1 Kandangan</div>
<audio controls autoplay>
<source src="https://sites.google.com/site/lagufavoritkir/daftar-lagu/yS7TUcgE9Tjr.128.mp3?attredirects=0&d=1" />
</source></audio>
<div style='padding-right:5px'>Widget <a href='http://www.seocips.com' target='_blank'> by seocips.com</a></div>
</div></div>

Tanda Merah : Kalian ubah Judulnya sesuai keinginan kalian
Tanda Biru : Masukkan Link yang kalian simpan di notepad tdi.

5. Klik Simpan dan Lihat hasilnya ^_^

Mudahkan teman2 ^_^ kalau kalian berusaha pasti bisa kok ^_^. Mungkin kalau ada yang bingung silahkan komen ya ..insyallah saya bantu ^_^ semoga bermanfaat sampai jumpa ^_^
Lihat Artikel Lain Disini

NB : Untuk membantu kami dalam mengambangkan blog ini tolong diklik ya iklannya ^_^ terima kasih

Cara Menambahkan Kutipan Animasi

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 05 Dec 2014 02:17:00 +0000

Terkadang dalam sebuah artikel kita melihat sebuah kata-kata yang berada dalam tanda kutip baik itu di awal paragraf maupun di akhir paragraf.

Isi dari kutipan tersebut bisa berupa catatan penting, kata-kata inspiratif atau kata-kata lain yang menggambarkan isi sebuah artikel.

Disini kami akan berbagi cara menambahkan kutipan dengan animasi yang menarik ke dalam postingan blog, caranya sebagai berikut :

1. Buat postingan terlebih dahulu > Buka tab HTML dan tambahkan kode di bawah ini :

<link href="https://googledrive.com/host/0Bxyf5AC_ilPwRFpfcHhFSXEzXzg" rel="stylesheet"></link>

<script src="https://googledrive.com/host/0Bxyf5AC_ilPwYUlfNHRkbjh6ekk" type="text/javascript"></script>

<script>

jQuery(document).ready(function($) {

$('#words').quoteRotator();

});

</script>

2. Setelah menambahkan kode diatas, tambahkan juga kode di bawah ini setelah kode diatas

<div id="words">

<ul class="word-container">

<li data-author="--- Jose Mujica " data-easeout="lightSpeedOut">Saya disebut presiden termiskin di dunia, tetapi saya tak merasa miskin. Orang miskin adalah mereka yang bekerja hanya untuk menjaga gaya hidup mewahnya dan selalu menginginkan lebih.</li>

<li data-author="--- Thomas Alva Edison " data-easeout="fadeOutDown"> Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.</li>

<li data-author="--- Mohandas Gandhi " data-easein="fadeInDown">Mereka yang berjiwa lemah tak akan mampu memberi maaf yang tulus. Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh.</li>

<li data-author="--- Voltaire " data-easeout="bounceOut"> Pendidikan mengembangkan kemampuan, tetapi tidak menciptakannya.</li>

<li data-author="--- Soekarno " data-easein="bounceIn"> Laki-laki dan perempuan adalah sebagai dua sayapnya seekor burung. Jika dua sayap sama kuatnya, maka terbanglah burung itu sampai ke puncak yang setinggi-tingginya; jika patah satu dari pada dua sayap itu, maka tak dapatlah terbang burung itu sama sekali.</li>

<li data-author="--- La Fontaine " data-easein="lightSpeedIn"> Kemenangan yang paling indah adalah bisa menaklukkan hati sendiri.</li>

</ul>

<div class="quote">

<div class="quote-content">

</div>

<cite class="quote-author"></cite>

</div>

</div>

3. Simpan postingan dan lihat hasilnya.

Sobat bisa mengganti kata-kata pada langkah kedua diatas dengan kata-kata sendiri.

Selamat mencoba.

NB : Untuk membantu kami dalam mengembangkan blog ini klik iklannya yah hehe ^_^

Mengatasi Thumbnail Post Gambar Tidak Muncul Di Homepage Blogspot

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Sat, 15 Nov 2014 06:56:00 +0000

Apa Penyebab Gambar Thumbnail Post Blogger Tidak Muncul?

Dari berbagai macam test yang barusan kami lakukan, akhirnya sampai saat ini kami baru ketemu dua macam penyebab utama kenapa gambar thumbnail post blogger bisa sampai hilang dari beranda. Alasannya adalah :

Alamat gambar blogger secara default sudah menggunakan HTTPS
Struktur data sitemap blogger tidak menggunakan media:thumbnail

Jadi, masalah utamanya adalah dikarenakan saat ini Google lebih suka dengan penggunaan HTTPS pada alamat URL situs-situsnya. Sebelumnya gambar-gambar yang kita upload lewat postingan di blog alamat gambarnya masih menggunakan HTTP biasa. Tapi sekarang sudah tidak lagi. Tampaknya Google sekarang ini memang sedang lagi serius pengen meningkatkan kenyamanan tiap pengunjung di dunia maya. :)

Seperti yang dibahas pada salah satu artikel berjudul HTTPS as a Rangking Signal oleh situs Google Webmaster Central. Jadi iyaa kalau bisa pun kita sebagai pemilik blog, nantinya juga harus ngikuti aturan main ini. Setidaknya Sahabat harus terima kalau HTTP itu gak lebih baik dari layanan HTTPS. Iyaa jelas lah. Untuk dapatinnya aja kita harus bayar sertifikat dulu. :D

Terus kenapa kalau alamat gambarnya berubah jadi HTTPS? Apa hubungannya kok thumbnail post di beranda jadi hilang? Kalau gitu kan berarti lebih bagus pakek HTTP aja? -_-

Jadi, dikarenakan penyebab pertama inilah maka muncul penyebab kedua yang saya sebutkan diatas tadi. Untuk melihatnya coba Sahabat buka halaman sitemap blog sahabat masing-masing. Secara default umumnya sitemap bawaan blogger adalah dengan alamat seperti ini :

1http://www.chaidir.web.id/feeds/posts/default?orderby=UPDATED

Dari situ bisa dilihat di dua postingan saya yang gak muncul thumbnail-nya ternyata memang dari bagian entry postingan tersebut gak ada kelihatan tag media:thumbnail. Entah gimana ceritanya mungkin sistem blogger belum ngebaca gambar di postingan yang berawalan HTTPS tadi sebagai thumbnail. Padahal kalau kita share artikel ke media sosial, gambar yang ada di dalam postingan itu tetap bisa kebaca kok sebagai thumbnail. :D

Cara Mengatasi Gambar Thumbnail Hilang Dari Beranda

Dari sedikit analisis diatas, maka sekarang kita sudah bisa coba cari penyelesaiannya gimana. Supaya gambar thumbnail post di blog kita bisa muncul seperti normal kembali. Biar tulisan-tulisan kita tetap kelihatan keren dan menarik untuk dilihat oleh pengunjung. :D

Ada dua solusi yang bisa Sahabat gunakan. Kan penyebabnya ada dua tadi, jadi iyaa obatnya pun bisa dua juga. Tergantung Sahabat mau pilih cara yang mana. Atau mungkin besok-besok sudah ada lagi obat yang lebih mujarab. Untuk saat ini berikut cara mengatasinya :

Mengubah alamat gambar kembali menjadi HTTP
Gunakan fungsi firstImageUrl sebagai pengganti thumbnailUrl

Untuk cara yang pertama, saya pikir agak merepotkan. Karna alamat gambar sekarang sudah secara otomatis menggunakan HTTPS, jadi setiap kali kita ingin membuat postingan terbaru kita juga harus mengubah alamat gambarnya. Caranya kalau biasa Sahabat ngetik artikel pada mode Compose, untuk mengubah alamat gambar menjadi HTTP Sahabat harus pindah ke mode HTML.

Cari kira-kira yang kodenya seperti ini :

12345<div class="separator" style="clear: both; text-align: center;">

</a>

</div>

Kemudian tinggal hapus aja huruf S yang ada dibagian src="https://blablabla

Kalau misalkan di postingan tersebut ada banyak gambar, minimal ada satu yang diubah. Biar yang satu itu bisa kebaca sebagai gambar thumbnail. :)

Solusi Jitu Supaya Gambar Thumbnail Blog Muncul Kembali

Alternatif cara yang kedua, ini jauh lebih mudah dan gak merepotkan. Jadi untuk menampilkan gambar thumbnail di beranda blog itu, pada template umumnya pasti menggunakan kode HTML berikut ini :

123<a expr:href='data:post.url'>

</a>

   Singkatnya atribut expr:scr='data:post.thumbnailURL' ini lah yang akan memanggil gambar dari struktur data blogger, untuk ditampilkan sebagai thumbnail post di homepage kita. Sementara seperti yang saya jelaskan diawal tadi tag media:thumbnail tidak ada. Jadi iyaa atribut HTML ini gak akan nemukan apa-apa untuk ditampilkan.

    Solusi jitu untuk mengatasinya adalah dengan memakai teknik conditional tag blogger. Saya gak akan jelaskan panjang lebar, takutnya Anda malah bosan baca tulisan ini. Iyaah pokoknya begitulah.

   Untuk menggunakan cara yang kedua ini, pertama Anda masuk dulu ke Dashboard, kemudian buka Template - Edit HTML. Setelah itu gunakan ctrl + F untuk mencari kode <b:if cond='data:post.thumbnailUrl'>. Baru kemudian copy paste kode HTML berikut ini :

(klik dua kali lalu copy)

123456789101112131415<b:if cond='data:post.thumbnailUrl'>

</a>

<b:else/>

<b:if cond='data:post.firstImageUrl'>

</a>

<b:else/>

</a>

</b:if>

Sebelum mengotak-atik, silahkan diperhatikan dulu kode HTML yang ada di template Sahabat. Apakah beda dengan yang saya berikan diatas? Atau sama aja? Kalau template saya sih agak beda, tapi iyaa intinya sama lah. Mungkin sebagian template ada yang gak menggunakan firstImageUrl. Jadi tinggal ditambahkan itu saja. :D

Saya jelaskan sedikit, maksud dari penggunaan kode HTML diatas adalah ada tiga macam kondisi yang digunakan untuk memunculkan gambar thumbnail di beranda blog kita.

Tampilkan gambar dari alamat HTTP, jika tidak ada..
Tampilkan gambar yang paling pertama (HTTPS juga bisa dibaca), jika tidak ada..
Tampilkan gambar default no-image (bisa atur sendiri dengan alamat gambar yang kita mau)

Jadi, dengan cara yang kedua ini cara pertama tetap bisa digunakan (kalau rajin). Tapi kalau cuman ngandalin cara pertama aja, sewaktu-waktu kita lupa ubah alamat gambar ke HTTP iyaa thumbnail post tetap gak akan muncul. :D

Catatan :
Alamat gambar yang dipanggil oleh fungsi tag data:post.thumbnailUrl dengan fungsi tag data:post.firstImageUrl jelas berbeda. Jadi, kalau Anda ada menggunakan javascript resizeThumb maka untuk gambar yang ditampilkan firstImageUrl juga harus disesuaikan ukurannya.

[ UPDATE ]
Berhubung ada Sahabat blogger yang nanya, jadi baiknya saya update saja lah tulisan ini. Untuk beberapa template terkadang ukuran thumbnail bisa saja perlu diatur lagi dengan menggunakan javascript. Seperti catatan yang diatas, karna gambar yang muncul beda maka kita juga perlu menambahkan javascript khusus untuk kondisi firstImageUrl.

Silahkan gunakan script berikut ini, tambahkan saja tepat dibawah kode HTML <b:if cond='data:post.firstImageUrl'>.

12345678<script type='text/javascript'>

//<![CDATA[

function resizeThumbo(el, from, to) {$(el).each(function() {$(this).attr({'src': $(this).attr('src').replace('/s'+from+'/', '/s'+to+'-c/'),'width': to, 'height': to});});}

$(function() {resizeThumbo('.thumbx img', '1600', '250');});

$(function() {resizeThumbo('.thumbx img', '640', '250');});

$(function() {resizeThumbo('.thumbx img', '320', '250');});

//]]>

</script>

Sekian dulu ulasan tentang masalah thumbnail post gambar yang hilang dari beranda blogger ini. Mudah-mudahan bisa sedikit membantu sahabat blogger yang masih bingung. Sekiranya ada yang perlu didiskusikan, silahkan tinggalkan komentar. :D

Sampai Jumpa!! Semoga Berhasil..

Memberi Widget Jam Digital Keren di Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 31 Oct 2014 02:45:00 +0000

Tampilan pada sebuah blog memang menjadi hal paling utama sebelum postingan. Jika sebuah tampilan blog itu menarik, maka otomatis pengunjung pun akan betah dan bisa nyaman ketika sedang browsing didalam blog Anda. Ada banyak sekali macam cara untuk mempercantik tampilan diblog. Salah satunya menambahkan gadget dan widget di dalam blog Anda. Tentunya gadget dan widget yang berguna dan berhubungan di blog Anda.

Pada kesempatan kali ini kami akan berbagi tips dan cara menambahkan widget jam digital

keren. Untuk contoh bisa dilihat di kolom sebelah kanan blog Saya ini.

Baiklah, ikuti saja tips yang akan Saya tuliskan dibawah ini :

Masuklah Anda ke menu "tata letak"
Kemudian setelah sudah, pilih "tambah gadget"
Lalu akan muncul windows baru, scroll kebawah dan pilih tulisan "tambah HTML"
Kalau sudah, copy script dibawah ini. Setelah itu simpan.

*untuk angka yang berwarna merah itu adalah ukuran panjang dan lebar widget ini. Anda bisa ubah sesuai ukuran tempat blog Anda dengan merubah angkanya saja.

Semoga tips ini bisa bermanfaat buat Anda.

Solusi Jumlah Postingan Yang Muncul Tidak Karuan di Homepage Blogger

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Wed, 22 Oct 2014 05:00:00 +0000

Tutorial ini hanya ditujukan untuk agan-agan blogger yang belum tahu saja, kalau yang sudah tahu mohon saran dan kritiknya, hehehe. Oke langsung saja ke inti permasalahannya.

Ketika kami menggunakan template blogger yang mempunyai fitur auto readmore, kami bingung kenapa jumlah postingan di homepage kami tidak sesuai dengan pengaturan yang udah kami set, misal kami ingin menampilkan jumlah postingan 10 post, tapi kenapa kadang jumlah yang tampil malah 6 post, kadang juga cuma 4.

Inti permasalahannya adalah ada pada Jump Break setiap postingan, karena pada waktu ane pake template yang ada fitur auto readmore, jump break disetiap postingan ane hapus semua. Itu permasalahan yang selama ini menghantui ane, hanya karena tidak ada jump break pada postingan.

Ketika semua postingan kami edit, lalu kami kasih jump break, maka jumlah postingan yang tampil di homepage kami sesuai dengan yang kami set, misal 10 postingan, kalian bisa lihat di homepage blog kami ini.

Nah kalian udah pada tahu kan permasalahannya bagaimana? Dan kalian juga udah tahu kan cara insert jump break pada setiap postingan? Kalau tidak tahu silahkan search di google. Itung-itung usaha sambil belajar gan, masa mau ngandalin orang lain mulu.

Oke, itu postingan ane untuk hari ini, terima kasih dan selamat mencoba.

Cara Membuat Contact Form di Halaman Post Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Wed, 22 Oct 2014 02:03:00 +0000

Sudah tahu kan jika blogspot menghadirkan widget bernama Contact Form, sebuah widget untuk mengirim pesan ke pemilik blog. Di samping memberikan kemudahan, widget contact form ini sayangnya hanya dipasang di sidebar sebagai gadget.

Pemasangan Contact Form di di sidebar memang tidak terlalu lazim dipakai, kebanyakkan Contact Form dipasang di halaman post, dan untuk menuju ke halaman itu lewat tautan di menu. Sehingga blog lebih enak dipandang, dan hemat tempat.

Cara Membuat Contact Form di Halaman Post Blog
1. Pasang terlebih dahulu widget Contact Form. Kamu bisa baca cara pemasangannya di sini.
2. Buat Laman atau post (entri) baru.
3. Copy paste kode berikut ini, saat menulis entri pilih opsi HTML

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

4. Di pengaturan pilih Tafsirkan HTML yang diketik, jangan izinkan komentar, dan jika sudah dirasa cukup, pilih Publikasikan.

Jika langkah di atas sudah, langkah selanjutnya adalah menghilangkan (menyembunyikan) widget Contact Form yang sebelumnya kita tambahkan di sidebar, yaitu dengan cara;
1. Pilih Template lalu Edit HTML
2. Cari kode yang kurang lebih seperti ini

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
<b:includable id='main'>

3. Hapus kode yang ada di bawahnya seperti gambar berikut:

4. Sehingga kodenya menjadi seperti ini;

5. Simpan Template jika sudah selesai.

Jadi Contact Form ini memindahkan dari sidebar ke halaman postingan. Jangan kamu hapus widget Contact Form dari tata letak, supaya bisa berjalan. Setelah bisa tampil di halaman post, kita tinggal menambahkannya di menu navigasi (misal di header).

Cara Buat Gambar Membesar Saat disorot Kursor

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Tue, 21 Oct 2014 03:43:00 +0000

Berikut Cara Buat Gambar Membesar Saat disorot Kursor:

1. Login ke akun blogger anda
2. Template > edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin> (gunakan Ctrl+F)

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

4. Save Template dan lihat hasilnya.

Cara Agar Semua Posting di Blog Dapat Terindeks Google By KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Mon, 20 Oct 2014 02:55:00 +0000

Langsung saja ke topik pembahasan Cara Agar Semua Halaman Blog Terindex Google ?

Begini caranya:

1. Buka Akun Google atau Blog Anda

2. Masuklah ke halaman https://www.google.com/webmasters/tools/ .Tentunya dengan akun Gmail. Selajutnya masuk atau klik saja halaman https://www.google.com/webmasters/tools/

3. Setelah anda memasukkan blog anda, lihat Dasbor Webmaster anda, Klik SITE CONFIGURATION, trus Klik SITEMAPS (lihat gambar di bawah ini).

Gambar diatas menunjukkan bahwa kita belum mendaftarkan halaman postingan (bukan blog) ke google.

4. Setalah gambar diatas muncul, lihat sebelah kanan (biasanya berwarna merah) ada tulisan ADD/TEST SITEMAP. Nah… Klik lah tulisan itu.

7. Lalu Isilah kolom / kotak yang disediakan (lihat gambar)

masukkanlah URL sitemap berikut ini (copas atau ketik di dalamnya):

atom.xml?

8. Lalu klik Submit Sitemap. Selanjutnya akan muncul seperti gambar berikut.

Untuk melihat hasilnya klik Refresh the page. Anda telah berhasil men-submit URL blog anda.

9. Lakukan lagi langkah no 7 diatas, dan masukkan URL berikut

atom.xml?redirect=false
feeds/posts/default?orderby=updated
atom.xml?redirect=false&start-index=1&max-results=500

Catatan :
Lakukanlah satu persatu. (itu sitemap jika postingan anda belum sampai 500 postingan).

Selanjutnya:

Jika jumlah posting blog anda sudah banyak (lebih dari 500 postingan), maka lakukan langkah-langkah diatas dan tambahkan URL di bawah ini. Dengan tujuan Agar Semua Halaman Posting Terindex Google:

atom.xml?redirect=false&start-index=501&max-results=500

Jika jumlah posting blog anda lebih dari 1000 tambahkan URL berikut

atom.xml?redirect=false&start-index=1001&max-results=500

Format URL sitemap (seperti diatas) sesuaikan dengan jumlah posting blog kamu.

Setelah anda melakukan langkah-langkah di atas, anda telah berhasil men-submit sitemap halaman blog anda. Tunggulah dan biarkan Bot Google yang bekerja. Sekarang close GoogleWebmasters Tools anda.Selesai sudah Gan..

Demikian tadi sekilas Car agar Semua Postingan di Blog Terindeks Google. Semoga dapat berguna, jangan lupa berikan komentar anda terhadap postingan ini.Terimakasih.

Bagaimana Cara Migrasi dari wordpress ke blogspot

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Mon, 20 Oct 2014 02:13:00 +0000

Halo Sobat Blogger. Kali ini kami akan buat arikel Bagaimana Tutorial Cara Migrasi dari wordpress ke blogspot Pasti banyak sekali para sobat blogger yang mencari tips ini (migrasi dari wordpress ke blogger) atau dengan kata lain WordPress to Blogger.

Berikut Tutorial Cara migrasi dari blogspot ke wordpress :

1. Pertama kita masuk ke admin panel pada wordpress, dan selanjutnya kita masuk ke dashboard dan pada bagian tools kita pilih export dan kemudian klik “download export file”.

2. Nah, setelah download file tadi silahkan masuk ke http://wordpress2blogger.appspot.com lalu silahkan convert file export tadi dengan “converter” blog di web itu.

[learn_more caption="Step by Step wordpress2blogger.appspot.com Bahasa Indonesia"]Sobat Pernah kepikiran ingin pindah dari blog WordPress Sobat ke Blogger ? Situs ini dapat membantu dalam proses!

Sobat Ikutin Instruksi Yang Ada Di web wordpress2blogger.appspot.com

Login ke akun WordPress Sobat dan arahkan ke Dashboard untuk blog yang ingin Anda transfer ke Blogger .
Klik pada tab Manage di bawah nama Blog .
Klik pada link Export di bawah tab Manage .
Download file ekspor WXR WordPress dengan mengklik Unduh Ekspor file .
Simpan file ini ke komputer lokal Anda .
Upload Browse ke dokumen Sobat dan disimpan dengan formulir di menu webnya dan klik Convert .
Simpan file ini ke komputer lokal Anda . File ini akan menjadi isi posting Anda / komentar dari WordPress di berkas ekspor Blogger .
Login ke Blogger atau membuat user baru .
Setelah login , klik link Buat Blog dari dashboard pengguna , dan kemudian klik pada Alat Impor Blog
Ikuti petunjuk dan meng-upload file ekspor Blogger Anda ketika diminta .
Setelah menyelesaikan wizard impor , Anda harus memiliki satu set posting diimpor dari WordPress yang sekarang Anda dapat mempublikasikan ke Blogger . Have fun!

CATATAN: Aplikasi host ini hanya akan memungkinkan download lebih kecil dari 1MB .

Untuk informasi tentang cara menjalankan konversi ini sendiri , kunjungi proyek open source host di code.google.com[/learn_more]

3. Dan jika sudah selesai maka secara otomatis akan muncul hasil convert tadi dan silahkan download file tersebut (bentuk nya .htm)

4. Setelah langkah nomor 3 sudah dilakukan silahkan masuk ke blogger.com dan mulai lah buat blog baru, atau jika sudah ada blog dari blogger yang telah anda siapkan untuk migrasi silahkan ikuti langkah nomor 5 di bawah ini.

5. Di blogger.com pilih menu “pengaturan” dan setelah itu pilih “import” blog.

6. Nah, pada jendela “import” ini silahkan pilih file yang sudah di convert tadi (file yang .htm), jangan hiraukan perintah untuk memasukan ekstensi . xml, meskipun ada perintah kita di suruh memasukan file berekstensi .xml.

7. Jika sudah jangan lupa “ceklist tanda” di bawah nya, lalu upload lah, dan selesai!.

Semua URL artikel kita akan sama bentuk nya dengan URL artikel pada blog di wordpress.

Cukup Mudah Bukan Sekian Artikel Tips & Trik Tentang Tutorial Cara Migrasi dari WordPress Ke Blogspot Semoga Bermanfaat Buat Sobat Blogger.

Jika ada pertanyaan atau masalah mengenai Post saya di atas silahkan Komentar. Terima Kasih

Memasang Label Cloud Colorful by KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Thu, 09 Oct 2014 04:44:00 +0000

Selamat siang sobat blogger, pada kesempatan kali ini Saya akan berbagi sedikit tips tentang cara memasang label cloud colorful.

Seperti yang kita tahu, tampilan label cloud bawaan blogger terlihat cukup membosankan dengan warna putih polos dan teks hitam. Nah disini Saya akan mencoba untuk mengubah tampilannya menjadi colorful dan terlihat fresh tentunya.

Berikut cara pemasangannya :

Catatan : Sebelumnya Sobat harus menghapus terlebih dahulu kode CSS untuk label di template.

Pertama Sobat harus menambahkan widget label di blog

Buka Blogger > Tata Letak > Tambahkan Gadget > Lalu tambahkan widget Label dan ikuti pengaturannya sesuai dengan gambar di bawah ini

Kemudian Simpan.

Selanjutnya, buka Template > Edit HTML > Lalu pastekan kode CSS di bawah ini tepat diatas ]]></b:skin> atau </style>

.sidebar .label-size {

position:relative;

text-transform:uppercase;

text-decoration:none;

font-size:13px;

font-family:Arial;

color:#fff!important;

}

.sidebar .label-size a {

color:#fff!important;

font-weight:bold;

padding:8px 10px;

margin:0 6px 6px 0;

float:left;

display:block;

transition: all 0.4s ease-in-out;

}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}

.sidebar .label-size-1 a:hover {background:#16a085;}

.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}

.sidebar .label-size-2 a:hover {background:#2980b9;}

.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}

.sidebar .label-size-3 a:hover {background:#27ae60}

.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}

.sidebar .label-size-4 a:hover {background:#8e44ad}

.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}

.sidebar .label-size-5 a:hover {background:#c0392b}

Terakhir Simpan Template dan lihat hasilnya.

DEMO

Lihat Disini

Cukup sekian dan semoga bermanfaat.

Membuat Tombol Back to Top dengan Efek Bounce

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Sat, 23 Aug 2014 01:55:00 +0000

Sebenarnya sudah banyak tutorial untum membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara membuat tombol back to top dengan efek bounce.
Lanjut kepada tutorial... Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :

Langkah 1 : Simpan kode jQuery di atas </head>

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

lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.
Langkah 2 : Simpan kode ini masih di atas </head>

<script type='text/javascript'>

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });

$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });

</script>

Langkah 3 : Buat widget baru HTML/JavaScript, simpan kode ini :

<style type='text/css' scoped='scoped'>

#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}

</style>

<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMFFxlr0yLCrSqosN5BCIjLYoru1FlYNdhF_k8uND5buZgQn_7X9cmF-5XApomfwFxLrX9ZhGW6WRqVGm3Bd73yRfBKcWKmBYcQZO-tAdAje0QS24yfuccwqqjH6ccR0PpS5pnRnrjgkN/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada langkah 2 dengan kode ini :

<script type='text/javascript'>

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });

$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });

</script>

Semoga bermanfaat terima kasih ^_^

Tata cara menulis artikel atau tutorial blog yang baik dan benar

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Sat, 16 Aug 2014 00:31:00 +0000

Selamat Pagi Sobat

Menulis tutorial blog yang baik dan benar adalah pekerjaan yang sangat sulit, apalagi bagi Newbie atau orang yang baru mengenal dunia blog.

Nah pada kesempatan kali ini kami akan membagikan sedikit ilmu saya mengenai tata cara menulis tutorial blog yang baik dan benar

Langsung aja yuk simak dengan seksama tata cara dibawah ini:

1. Tulislah tutorial blog dengan kata kata yang sering dicari orang di search engine google.

2. Jangan menyingkat kata atau kalimat pada postingan blog sobat.

3. Gunakanlah minimal 500 kata dalam satu posting, maka pintar pintarlah merancang kata.

4. Judul Posting, Buatlah judul posting minimal 5 kata dan gunakan kata yang sering di cari orang seperti : Trick, Cara, Tips, Info, dll.

5. Buatlah Isi tutorial atau posting yang baik dan jangan keluar dari judul posting

6. Ulangi kalimat judul posting minimal 8 kali pada isi tutorial blog sobat.

7. Janganlah sekali kali copas / copy paste posting dari blog orang lain, kalau ingin copas pintar pintarlah mengedit kata atau kalimat, jangan kaya anak SD kalau copas sama persis. Bruuakakakaka. . .

Kritik dan saran dari sobat sekalian tentang tata cara menulis tutorial blog yang baik dan benar selalu kami tunggu di komentar...!

wassalamu'alaikum wr. wb.

Cara Memasang Animasi Selamat Datang Di Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Wed, 13 Aug 2014 03:41:00 +0000

Met siang semua.. kali ini kami akan memberikan sekedar trik membuat animasi selamat datang di blog
langsung coba ya gan hhe ^_^

nih gambarnya :

berikut kode HTML nya ^_^ :

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="280" src="http://www.widgipedia.com/widgets/widgetindex/Welcome-animation-widget-english-6977-8192_134217728.widget?_" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

sekian dari kami,jika ada yang ditanyakan ..langsung komen ya ^_^

Cara pasang Fans Page Facebook di Blog

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Tue, 12 Aug 2014 07:58:00 +0000

     Fans Page Facebook merupakan widget yang kita tambahkan dan edit sendiri untuk mermpercantik tampilan blog.Disini saya akan memberikan sedikit tutor untuk membuat fans page tersebut.Tetapi sebelum membuat fans page kalian harus mempunyai halaman fans page facebook di facebook kalian.Kalo masalah pembuatan halaman tersebut langsung tanyakan pada Mbah Google nanti pasti ada.Jika sobat sudah membuat halaman tersebut langsung saya ikuti langkah berikut untuk dipasang di blog kalian :
1.Login ke aakun blog kalian
2.Kemudian masuk ke Template dan pilih Edit HTML
3.setelah itu centang bagian Prossed expand widget template
4.kemudian cari kode ]]></b:skin>.(gunakan CTRL+F agar mudah mencarinya)
5.setelah ketemu copas kode berikut tepat di bawah kode ]]></b:skin>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
6.kemudian klik simpan dan tutup kotak edit HTMLnya
7.sekarang masuk ke bagian tata letak
8.klik Add Widget dimana saja dan pilih HTML/Javascript kemudian klik tanda (+)
9.Beri judul sesuai anda dan masukkan kode berikut di bagian Conten
  <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRftT_s1mqPzHhPaibDLVUUyJQahHtYR5t3jSpI129U6s96wUgnrlvIo3Ad2LFQ2xK9y1gHPFfMnZpAxn5XYvqbzLRTFCNSSR6R6g9A66sYRmChTEtaFttezoGX8J4GJ-jhmlSgH0EqC8C/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed; right:-250px;top:44%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class="likebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Graycyber-Fans&width=240&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=258" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 258px; width: 245px;background:#fff;"></iframe> </div> </div>
10.simpan widgen tersebut

NB:untuk bagian yang bertanda Merah silahkan Diganti dengan alamat halaman fans page facebook kalian

Semoga berhasil xD

Cara Merubah Tampilan Pageviews Menjadi Lebih Berwarna

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Tue, 12 Aug 2014 04:04:00 +0000

Selamat pagi, sekarang kita akan belajar bersama tentang Cara Merubah Tampilan Pageviews Menjadi Lebih Berwarna dan ini akan terlihat lebih berbeda dari tampilan standarnya. Dalam widget ini tidak hanya menunjukkan jumlah tayangan dari pengunjung saja tetapi juga akan menunjukkan jumlah komentar dan postingan di blog Anda. Nah jika Anda ingin menambahkan kode ini silahkan ikuti langkah-langkah di bawah ini :

1. Buka Blogger > Tata Letak > Tambah Gadget > Pilih statistik Blog dan tekan Simpan

2. Backup template Anda (jika diperlukan)

3. Klik Template > Edit HTML, dan cari kode ini ]]></b:skin> atau </style>

4. Lalu tambahkan kode css di bawah ini tepat diatas kode ]]></b:skin> atau </style>

#Stats1 ul{margin:0px 0;border:0;padding:0}

#Stats1 li{

display:inline;

width:30%;

border:0;

color:#fff;

float:left;

text-decoration:none;

margin:0;font-size:12px;

list-style-type:none

}

#Stats1 li:hover{

opacity: 0.7;

filter:alpha(opacity=70); /* For IE8 and earlier */

}

#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}

#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}

#totalposts{

background: #0090D5;

}

#totalComments{

background: #FFB200;

}

#totalCount{

background: #FF3300;

}

5.Kemudian cari kode widget ini <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget> dan ganti dengan kode dibawah ini :

<b:widget id='Stats1' locked='false' title='' type='Stats'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<h4 id='Stats1_totalPosts'>&hellip;</h4>

<span>Posts</span>

</li>

<h4 id='Stats1_totalComments'>&hellip;</h4>

<span>Comments</span>

</li>

<h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4>

<span>Pageviews</span>

</li>

</ul>

//<![CDATA[

function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');

//]]>

</script>

</div>

</b:includable>

</b:widget>

6.Terakhir, simpan template.

Selesai. Cukup mudah kan

Terima kasih dan semoga bermanfaat.

Script Untuk Membuat Nomor Halaman Di Blog ala KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 25 Jul 2014 02:48:00 +0000

Halo sobat ^_^ kali ini kami akan memberikan tutorial membuat nomor halaman di blog. langsung ke topik hehe ..pasti sobat sudah melihat nomor halaman di beberapa blog maupun website, nah disini kami akan memberikan script+tutorialnya

simak ya caranya :

1.Log in ke blogger.
2.Klik template » edit HTML » centang Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atasnya.

/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

4.Cari kode </body> dan letakkan kode dibawah ini tepat di atasnya.

<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>

Keterangan:

Jika anda ingin mengganti jumlah postingan yang akan ditampilkan pada setiap halaman silahkan ganti kode yang berwarna biru.

5.Cari kode 'data:label.url' dan ganti kode itu dengan kode dibawah ini.

'data:label.url + "?&max-results=7"'

Keterangan:

var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)

6.Save Template anda.

Nah itulah tutorial untuk membuat nomor halaman di blog semoga bermanfaat buat semua orang amin ^_^

Quote :
Untuk membantu kami memberikan tips dan trick blogger, tolong klik iklan di blog kami terima kasih ^_^

Cara Membuat Kotak Script di Blog ala KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 25 Jul 2014 02:25:00 +0000

Halo Sobat ^_^ berjumpa lagi dengan kami ^_^. dipostingan ini kami akan memberikan trik blogger yaitu cara membuat kotak script di blog, mungkin sobat blogger pernah tau kotak script di beberapa website maupun blog, nah kami akan membagikan caranya kepada kalian yuk simak caranya :

Langsung aja nih cara untuk membuat kotak Script pada postingan Blog :

1. Login ke akun blog agan

2. kemudian buat Entri

3. klik HTML yang terletak disamping compose

4. masukkan kode untuk membuat kotak script dibawah ini!

Maka Akan muncul kotak seperti dibawah ini

.kode script disini.

5. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Kode script disini

6. Masukan kode script yang ingin kamu masukan, didalam kotak itu.

Nah mudah kok hehe,,sekian postingan dari kami semoga bermanfaat terima kasih ^_^

Quote :

Untuk membantu kami dalam memberikan tips dan trik blogger, tolong klik iklan di blog kami terima kasih ^_^

Cara Membuat Efek Loading Keren ala KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 25 Jul 2014 02:10:00 +0000

Halo sobat....tak henti-hentinya kami menyapa sobat blogger hehe,, meskipun kita tidak saling kenal tapi kita tetap bisa bagi ilmu ^_^,,nah dipostingan kali ini kami akan memberikan trik blog keren buat kalian yaitu Efek Loading yang keren , efek loading ini sudah kami terapkan di blog kami jadi kalian bisa lihat seperti apa hasilnya hehe...langsung simak caranya ya lets goo ^_^...

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head> dan Apabila template sobat sudah memiliki jQuery seperti dibawah ini, lewati saja langkah pertama ini. karena tidak boleh ada script jQuery lebih dari satu.

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

Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas ]]></b:skin>

#loadhalaman{position:fixed; opacity:0.93; top:0; left:0; background-color:#000; z-index:9999; text-align:center; width:100%; height:100%; padding-top:20%; color:#000; display:none}.loadball{background-color:transparent; border:5px solid #00a3ff; border-right:5px solid transparent; border-left:5px solid transparent; border-radius:50px; box-shadow:0 0 35px #00a3ff; width:50px; height:50px; margin:0 auto; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear}.loadball-2{background-color:transparent; border:5px solid #00a3ff; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:50px; box-shadow:0 0 15px #00a3ff; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-moz-transform:rotate(145deg); opacity:1}100%{-moz-transform:rotate(-320deg); opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-webkit-transform:rotate(145deg); opacity:1}100%{-webkit-transform:rotate(-320deg); opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript ini di atas </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

nah sekian postingan dari kami , semoga bermanfaat untuk semua orang hehe ^_^ sampai jumpa

Quote :

Untuk membantu kami dalam memberikan Tips dan Trick Blogger, tolong klik iklan yang ada di blog kami terima kasih ^_^

Script Untuk Tombol Share Keren Di Blog ala KIR SMANSAKA

noreply@blogger.com (KIR SMAN 1 KANDANGAN) — Fri, 25 Jul 2014 01:44:00 +0000

Hai sobat berjumpa lagi dengan kami di postingan ketiga kami , kali ini kami akan memberikan trik untuk membuat tombol share di blog , mungkin tampilan awal saat kita membuat blog sudah tersedia ataupun kalian sudah memasang template yang kalian download pasti sudah ada tombol share bawaannya, namun kadang pula tombol share bawaan itu tidak menarik buat sobat , nah disini kami akan memberikan script tombo share buat sobat langsung simak ya caranya ^_^

Langsung saja ikuti langkah-langkah berikut untuk Cara Memasang Tombol Share Dibawah Postingan :
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membackup template.
4. Beri tanda centang pada Expand TemplateWidget.
5. Cari kode <data:post.body/>. Gunakan fasilitas pencarian browser dengan menekan tombol Ctrl + F lalu ketikkan kode <data:post.body/> yang dicari.biasanya kode ada dua pilih yang nomor dua
6. Copy script di bawah ini dan paste di dibawah kode tersebut.

Share this article : 
<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e8062ca66617053"></script>

7. Terakhir SAVE

nah gimana sobat? mudahkan ,kalau kita ada kemauan pasti bisa kok ^_^, sekian postingan dari kami semoga bermanfaat buat sobat terima kasih ^_^

Quote :

untuk membantu kami dalam memberikan postingan tips dan trick blogger, tolong klik iklan di blog kami terima kasih ^_^