Tips, Tutorial And All About Management

Menerapkan Seleksi Otomatis Pada Blockquote

noreply@blogger.com (Alvin S. Ritonga) — Fri, 20 Dec 2013 17:33:00 +0000

Blockquote sebagaimana postingan saya sebelumnya merupakan suatu kutipan yang tampilannya akan membedakan antara satu tulisan dengan yang lainnya. Dengan menggunakan blockquote ini, tulisan akan tampil lebih menarik di mata para pengunjung blog kita. Dan untuk mencopy tulisan atau teks di dalam blockquote tersebut, kebanyakan blockquote yang diterapkan pada blog-blog lain masih manual artinya kita harus memblok semua tulisan yang ada tersebut lalu mencopy-nya dan menyalinnya ke dalam notepad. Bila tulisan tersebut singkat, tentu tidak akan menjadi masalah bagi kita, namun bila tulisan di blockquote tersebut cukup panjang, tentu akan menyulitkan bagi sobat-sobat kita yang ingin mencopy-nya. Oleh karena itu, tutorial kali ini saya ingin membahas tentang bagaimana menerapkan seleksi otomatis pada blockquote. Bila sobat ingin mengkostumisasi tampilan blockquote-nya agar lebih menarik, silahkan lihat artikelnya disini.

Seleksi Otomatis Pada Blockquote

1. Tuju Ke Blogger > Template
2. Cari (Ctrl+F) kode </body>
3. Tambahkan kode berikut tepat di atasnya.

<script type='text/javascript'>
var pres = document.getElementsByTagName("blockquote");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("click", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>

4. Simpan template sobat, selesai!

Keterangan :

Script di atas hanya untuk tag blockquote.
Untuk mengubah cara seleksinya menjadi double click, ganti tulisan click menjadi dblclick.

Last Words

Bagaimana sobat? Sudah diterapkan pada blognya? Bila sobat mengalami kesulitan, silahkan beri komentar sobat di bawah. Akhir kata, demikianlah tutorial singkat tentang Menerapkan Seleksi Otomatis Pada Blockquote yang dapat saya bahas kali ini. Semoga artikel ini bermanfaat bagi kita. Salam Blogging!

Bagaimana Menggunakan Blockquote Pada Postingan Blog

noreply@blogger.com (Alvin S. Ritonga) — Wed, 18 Dec 2013 16:17:00 +0000

Pada tutorial kali ini saya ingin membahas mengenai penggunaan blockquote pada postingan blog. Blockquote sebagaimana sobat ketahui merupakan suatu kutipan yang menjadi pembeda antara satu teks dengan yang lainnya. Pada umumnya blockquote sering digunakan pada blog yang berisi tutorial yang sering menampilkan kode atau script pada postingannya. Fungsi blockquote hampir sama dengan fungsi text area yang saya posting sebelumnya. Meskipun sama, namun kustomisasi pada text area jauh lebih sedikit dibandingkan dengan blockquote dan blockquote sendiri lebih praktis digunakan dibandingkan menggunakan text area pada postingan kita.

Penambahan Blockquote Pada Postingan

Langkah Pertama :
1. Tuju ke Blogger > Layout > Edit HTML
2. Backup template sobat
3. Cari (Ctrl+F) kode berikut :

.post blockquote {-----)

4. Hapus kode berikut beserta isinya.. Bila tidak ketemu, cari kode berikut:

]]></b:skin>

5. Tepat di atasnya, tambahkan kode blockquote yang sudah sobat pilih sebelumnya.
6. Simpan template sobat, - selesai!

Langkah Kedua :
1. Untuk menerapkannya pada postingan sobat, seleksi teks yang sobat inginkan lalu klik tanda blockquote pada menu post editor sobat.

2. Bila sobat menemukan kode .post blockquote div {...}, maka sobat perlu menambah tag div pada teks.
3. Untuk menambahkannya, ubah mode Compose menjadi HTML pada post editor. Lalu tambahkan kode berikut.

<blockquote><div> Teks Sobat disini </div></blockquote>

4. Selesai, Lihat pratinjau postingan blog sobat sekarang.

Berikut kumpulan blockquote yang bisa sobat gunakan pada postingan blog sobat.

Blockquote Style 1

.post blockquote{color:#444444; font:14px verdana; border-radius:10px; border-bottom:5px solid #764398; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;box-shadow:1px 1px 4px #666666; -moz-box-box-shadow:1px 1px 4px #666666; -web-kit-box-shadow:1px 1px 4px #666666; -goog-ms-box-shadow:1px 1px 4px #666666;padding:5px;}

Blockquote Style 2

.post blockquote{ color:#444444; font:14px verdana; border:3px dashed #3d5476; padding:5px;}

Blockquote Style 3

.post blockquote { color:#444444; font:14px verdana; border-left:5px dotted red; padding:5px; border-radius:10px; box-shadow:1px 1px 4px #666666; -moz-box-box-shadow:1px 1px 4px #666666; -web-kit-box-shadow:1px 1px 4px #666666; -goog-ms-box-shadow:1px 1px 4px #666666; }

Blockquote Style 4

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:3px solid green; border-top:5px solid green; padding:5px; border-radius:10px; box-shadow:1px 1px 4px #666666; -moz-box-box-shadow:1px 1px 4px #666666; -web-kit-box-shadow:1px 1px 4px #666666; -goog-ms-box-shadow:1px 1px 4px #666666;}

Blockquote Style 5

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:5px solid #222222; padding:5px; border-radius:10px; box-shadow:1px 1px 4px #666666; -moz-box-box-shadow:1px 1px 4px #666666; -web-kit-box-shadow:1px 1px 4px #666666; -goog-ms-box-shadow:1px 1px 4px #666666;}

Blockquote Style 6

.post blockquote { font: 14px normal verdana, sans-serif; padding-left: 38px ; margin:0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2nZKXwM-J7Bv67GiDnijISO3gT3-ZCuevXfFf2-Zf_B4rm5cDeKS5JhDmmcMK0EtTdT6767OxAfe3xWJGOOEyQCD96Q3Aus0HuclzO1L2pgtFgFcXxJEIUcECVkY0IncQbFU3DcaMM8/s1600/blocquote+yellow.png); background-position:; background-repeat: repeat-y; text-indent: 65px; border-top: 3px solid #61380B; border-right: 3px solid #f4fa58; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI66CbOniMsu63EUIyt2ei51O5foSBxzpvudexYREZtNT7hunJJ1_YtsuIxzRcegPhU7tWwdidnhotPL4xO_nYldNATjU9b6duQ2MGjlZwc_jOFh1WKPpvWNptz75aIfR3MSXW3VxBUwQ/s1600/cop_code.png) no-repeat bottom center; padding-bottom:20px; border-bottom: 10px solid #F4FA58; margin-left: -20px }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 7

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieeTHly5f14JU1Q850CIjMswgOpWmBY2jsZ6PVkteGFJfS1t56GZq7HXdvYf8Ea1FtvTCgWNRk3CJpF0IlpwrTc3fkIjjjeeyRYKYjZs3DlJ3CmUjWhmaSxfKZZ7xulaHaF7NdXU9f9O0/s1600/cop_top.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 8

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTnCzD21YbquccY_IMZV6vJYDs8wsZbWGQrPA0HN8wrb9TZQnIQM-7KrvR5Vh5SW_885pCKA60RGZSFeo0lrS5L9dal3wI8WNqXVFJNodVplpZJNcwTfTbmRh4ABlHUrTb7uBpbZlb18/s1600/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 9

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggmhWl2OFExvHX_KDaEUObZcn0ZDpB3zb9ZmD8S-XDqiLwInEfVUMukUY-iyi4CapCZDgyp8vVK97KUdokXYuUgF_oG9RbfG2YTiHfKzeLlRumFMQtcWFWr37AqSlu8E2ZOnF2BLNFf2k/s1600/blockqute+3.png) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border-top: 3px ridge #000; border-left: 3px ridge #000;}
. post blockquote p { margin: 0; padding-top:1px; }

Blockquote Style 10

.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAec58xfb8IwSzjA3e9iGXmUs5CMaTzfHbYS7u4fQfAPCzHjfUHyg1C3OSeGnD4yY1EqQh3dUpB_Xhyphenhyphenik3yDL7-MUXkMjtlxrsF0QSVF7Rq9FqgLLBzjovmxvGsOIvh0fSQd6b6j2qiE/s1600/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 11

.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0a6Gi4k_8g4mOifGIHRTshlVWt5pVXuC6u2oNODgFuPSzLBMLELKVsiUh1HudrL0JyujFtQm2tCyIq3GiMJfdX01iEohXSH0Xj7AV35g9SrC1K0YCaz9JxiSIZsURmwqfOk1kE3NW2U/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 12

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5ama/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA_2cZspnO-1oDT9q3RLgna7HMDstSOEXN-dYkI-AJumI0QaWRxJYqXiaO3mmEgWJwi8SZimiQfyJhLUnaoQe8MK4yb5ormJRqsXK1vp8XIvSqPPN7_2BSCwAlq1CnnkY5_GJln0PoAyk/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px;

Blockquote Style 13

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2p4RCGrIGGS25WoSvgel7-CUCdrRMY5dDJ8zpihr2SdM-q-LWJMWoWRdj5Fqe89Df6PqhT_czU-cTkBJE5V0fly4Rvsv1k044rTdRB9GgTJbIsBrlv2O91wpng046-tn99mx4BKfatvw/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 14

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6f_D4avJH-7IXFtc9qTKtsw48DdGDl4W2TvheEfkPjDNechaC-xxAMzIpkYVH3f6fb_RpFfK7sv1l536zRKM0Gvs3F5LQVgpbObz6fZn9fWuSwF0Pc1dLLQIBaD36b1-pAMzO_r5bSs/s400/comma-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6SXzrVmaLDlN4i5nR2PEr00YvkRXufdN1SFW0VhAQGTHYY8ZCsrTFlYCCE2mgbqGg3rbTGouqK83eaPlqTLZtVqPjwdsxNQ4N75Vl0Da1ilcKMue6YCtIPgwPdTU-IwmVvcnP3K-wFM/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 15

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2bBQoyHqwtahqBjjiTCG5GkZFUFjrLnVyAgCU94KF4w6Dxd55Bj4whwwOLaH_LipyPs8gvqO2mNHOO7XOxDntnD9ATnBEGCM5E8oPg5UsbftaMUF7Wrfc-e1sEh1Pz07vUTw3tn8ROs/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 16

.post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHkAgAHSxXqIKLrue11tUVWGJEZXlseo5ag9XyU-hA0-znsleo2vwBKYvDTs15rOz-hxG9Sf66pDHtrLTChFGOCJ4e13gOG9KuHtNUEFbtHYV6AvDhoTb5FdwEL17GTiQtfEipXK4CaM/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBUNs49JiHC-LjrmJy_VnlpLCG_80YZA5CLIO0kbbaOWR-GZr62qm4WpEaeAOkLX8K1x_Ztk0By_ZS6KYKhnnlCIAP_CTbBt50JmP4FRKTMS1sHFcLpKosIlPDnW8RWN1TANDL8BNvC8c/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 17

.post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHkAgAHSxXqIKLrue11tUVWGJEZXlseo5ag9XyU-hA0-znsleo2vwBKYvDTs15rOz-hxG9Sf66pDHtrLTChFGOCJ4e13gOG9KuHtNUEFbtHYV6AvDhoTb5FdwEL17GTiQtfEipXK4CaM/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBUNs49JiHC-LjrmJy_VnlpLCG_80YZA5CLIO0kbbaOWR-GZr62qm4WpEaeAOkLX8K1x_Ztk0By_ZS6KYKhnnlCIAP_CTbBt50JmP4FRKTMS1sHFcLpKosIlPDnW8RWN1TANDL8BNvC8c/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 18

.post blockquote { margin : 0 20px; padding: 20px 20px 50px 20px; background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_x5ub7n4bPVzTpeh_XTjOMlLtVegzq8DdetgWbSO0PS4NzZFOzPO80IX23d3Aeu05AuLb9b6z4vxdiVMPZEcoDFOElHrIcApMD08JtWEF5AZRVR3RtsIRPl4b44c3Ov8iHM69OqLcWL8/s1600/Copyrighted+blue+blockquote.png) no-repeat left bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border-top: 2px solid #158aee; border-left: 2px solid #158aee; border-right:2px solid #158aee; border-bottom: 2px solid #158aee; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 19

.post blockquote { margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TiIT8A9stsSw6iRO8HgnBHP9pXSXZSX0QaJvVun8DXy_hCl8AYIYjLqOBBiqgfzxrGS6iLAteJlN_9WsinBYeFOq2M6KDjR7W_vjqaXpzamVurDucoWoMREPwcU94l6p-ucNAJc8D8A/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; }
.post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03HnukiDv3gKRRqpvg1fYIen3jei_b6d0Uh_ioSPxIwgCLnMvYcGbFPECY49DUnKSBV2jhzww5Hf5TIUFGxIT8JHIddJYfQD93SRiu_KF3KS4mi1R5tvfo9Kkxc1D5VQ2ayumuGBuoVQ/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 20

.post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0GZsoCo-fUfbaFK3WM56GeOr7x4Rc2GocF4xmZ7MiTes2wqDzwE9E9QNv1XMEsiKYkrqrvW6sUr9IjtEVEHTot_9zXKelZ0baDMdMqkbOwHrwrWwk4OHCOCqikpdxeoYiFTL8J-cNCYI/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; }
.post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10jxQCTGuFJe4McXrCWiOkTp4gOBPgeTmznW47iSIFHBVCzyBYIOpeoNOXeINOB1NfMMewl8Sd_5dhieIdzcOwLdUqifQVTuFBb3uM5USrOmUU3loJy2QPYY53oTC1dpIMs5mPfmQI2g/s400/right.gif) no-repeat bottom right; padding-bottom:30px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 21

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8rI1ICVwl64kIZTdwCaPEnVu0wJSljcfpYxTtE5EfxqnTxUbSR4uEHtvv-ldBJN9Pdtq3EUw1RpDslP1X_VWacSO09wpx38CtXC_hST14jh7XVV5gRxiZmFOmYTAqlX_kuaLkPl2u7Tg/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 22

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFuTb1q-kE1HzhTGYINquOkgjNhr92bfQvfSR4hbEH1tiANAVYcVMwdiDLO68yoEb24vihTNjoUhQM4ltsXPUomKDADCwCQs3rtkziX-309exOQ8klqDMFiW0hso0DyQScX8DD3QdjdI/s1600/blockquote.png) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1em Vivaldi, serif; border-right : 3px ridge #FF8000; border-bottom : 3px ridge #FF8000; border-top : 3px ridge #FF8000; border-left : 3px ridge #FF8000; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 23

.post-body blockquote { line-height: 1.3em; }
.post blockquote { background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPa2CcYWKwOdpUKJ5dppWBfu6nGoWOD9wAHx9f1R5fF1UD9lQQ4KavPQnf-Y71v0luuCURk9cAj1YvOT9XWhZ9wTRdUj_UV_Lsod_cv4og1bPsjQCFL27_MXb97BH1hH3p7ClGti4mQlA/s1600/note.png); background-position:; background-repeat:repeat-y; margin: 0 20px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; padding: 20px 20px 20px 50px; color:#000000; font: normal 0.9em "Consolas", "Courier New", Courier, mono, serif;; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; }
.post blockquote:hover { background: #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPa2CcYWKwOdpUKJ5dppWBfu6nGoWOD9wAHx9f1R5fF1UD9lQQ4KavPQnf-Y71v0luuCURk9cAj1YvOT9XWhZ9wTRdUj_UV_Lsod_cv4og1bPsjQCFL27_MXb97BH1hH3p7ClGti4mQlA/s1600/note.png); background-repeat:repeat-y; color:#000000; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 15px; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 24

.post blockquote{ font-family: Verdana,"Times New Roman",Georgia,Serif; font-size:12px; color: #333333; sdoverflow:auto; width: 400px; padding: 15px 0px 15px; padding-left:42px; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; /* overflow-x: auto; */ /* width: 99%; */ }
.post blockquote, .post blockquote:before, .post blockquote:after { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPa2CcYWKwOdpUKJ5dppWBfu6nGoWOD9wAHx9f1R5fF1UD9lQQ4KavPQnf-Y71v0luuCURk9cAj1YvOT9XWhZ9wTRdUj_UV_Lsod_cv4og1bPsjQCFL27_MXb97BH1hH3p7ClGti4mQlA/s1600/note.png") repeat-y scroll 0 0 transparent; border-radius: 5px 5px 0 0; border: 1px solid #dcdcdc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); }

Last Words

Demikian tutorial tentang Bagaimana Menggunakan Blockquote Pada Postingan Blog. Bila sobat mendapat kesulitan dalam menerapkannya pada blog sobat, jangan segan-segan untuk memberi komentar sobat di bawah. Akhir kata, kiranya artikel ini bermanfaat bagi kita semua. Salam Blogging!

Efek Judul + Sub Judul Blog Berjalan Otomatis

noreply@blogger.com (Alvin S. Ritonga) — Sat, 14 Dec 2013 07:18:00 +0000

Judul blog secara default bersifat statis alias diam pada menu address bar browser kita, dan bila judul blog ataupun postingan kita cukup panjang, maka tampilannya di address bar kita akan terlihat terpotong, untuk mengatasi hal ini, maka disini saya ingin berbagi tutorial sedikit mengenai penggunaan efek judul + sub judul blog berjalan otomatis pada address bar browser.

Hal yang sama yang bisa sobat lihat pada tampilan judul blog saya sebelumnya. Dengan sedikit efek, judul dan sub judul blog kita yang panjang akan bergerak secara otomatis dan akan memberikan ciri khusus pada judul blog sobat dengan yang lainnya pada address bar browser sobat. Bila sobat tertarik dengan efek seperti ini, silahkan ikuti tutorial berikut.

Efek Judul Berjalan Otomatis Pada Blog

1. Pada Dasboard Blogger tuju menu Tata Letak
2. Klik Tambahkan Gadget
3. Pilih Opsi HTML/Javascript
4. Lalu masukkan kode berikut ini kedalamnya.

<script type="text/javascript">
var msg = document.title;
msg = " " + msg + " ";
var speed = 5;
var pos = 0;
function movingTitle(){
document.title = msg.substr(pos) + msg.substr(0, pos);
pos++;
if(pos == msg.length){pos = 0;}
setTimeout("movingTitle()", 1000/speed);
}
movingTitle();
</script>

5. Simpan dan selesai!
6. Lihat tampilan judul blog sobat pada address bar browser sobat semua.

Last Words

Bagaimana? Cukup mudah bukan? Demikianlah tutorial singkat saya tentang efek judul + sub judul blog berjalan otomatis pada blog sobat semua, kiranya dapat bermanfaat bagi kita semua. Bila sobat mengalami kesulitan, jangan segan-segan beri komentar pada artikel ini. Salam blogging!

Membuat Popup jQuery Facebook Fans Page di Blog

noreply@blogger.com (Alvin S. Ritonga) — Fri, 13 Dec 2013 06:32:00 +0000

Facebook fans page? Hal yang sudah tidak asing lagi di telinga para pemilik blog, berbagai macam bentuk dan tampilannya diperlihatkan oleh pemilik blog untuk mempopulerkan blognya di media sosial yang satu ini. Untuk menambah koleksi widget bagi sobat semua, disini saya ingin berbagi tutorial mengenai cara membuat jquery Facebook Fans Page melayang di blog. Pada widget yang satu ini, selain tampilan Facebook Fans Page yang sobat miliki, sobat juga bisa menyisipkan subcription form dari feedburner ke dalamnya.

Popup Facebook Fan Page ini hanya tampil sekali saja bagi tiap pengunjung blog kita, sebab tentu akan sangat membosankan bila popup ini muncul berulang-ulang kali tiap pageview-nya. Untuk sobat ketahui bahwa pada widget ini, jendela popup ini akan muncul baik di jendela homepage maupun pada postingan blog kita, tergantung darimana pengunjung blog kita melihat blog kita.

Jika sobat tertarik dengan widget yang satu ini, silahkan lihat tutorialnya berikut ini, saya akan bahas sesederhana mungkin agar sobat lebih mengerti dalam menerapkannya pada blog sobat.

Menambah Popup Facebook Fans Page di Blogger

1. Tuju ke Blogger > Tata Letak.

2. Klik Tambahkan Gadget, letaknya terserah sobat.

3. Tambahkan kode berikut kedalamnya.

<style>
/* Jquery Facebook Likebox Popup Version 2.0 by vinspirations.blogspot.com*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
    box-shadow:0 0 15px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
     -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohSuGNSOFivOQ4ppmnJ6bhccl1Q3uQ7CQpVYNH4z-o5tHjyZGI3zOFtL_dNq81Cni_mA0LzUUSDs-40n7vrLYwsVY_ERrP0kwFL8V6sfCp7cBwcz6K2qPqU9R8XG8Z36o_sCgdle5vlE/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohSuGNSOFivOQ4ppmnJ6bhccl1Q3uQ7CQpVYNH4z-o5tHjyZGI3zOFtL_dNq81Cni_mA0LzUUSDs-40n7vrLYwsVY_ERrP0kwFL8V6sfCp7cBwcz6K2qPqU9R8XG8Z36o_sCgdle5vlE/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bVtg9crtCUTCxbnW0Xasy5CGbNpd7igdtc4n2kpkQ4MOUhzCGyE5PtirwqYyNaJUUNWFV9YFhYorkyC5vlkCcKFitBB0Ho_THMzVqpv3Ktjpc38Smv5ta1PmdEkQt32Dtlc-yLf9zbE/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOObrJAWZHW26XJA6Tiaz0HtFkv8G0yJw-qKb5qLcC6y9v-CFx4tZ5BCVrn9ujTRF_SuJ5btG-XC-faA-nxDplhuxc2sz4UZcWSo4vF8Hw4__zzcBzjc7S0LysYqWmqE5XwWsKvXjQiyg/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*   Facebook Likebox popup For Blogger Version 2.0
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 18px !important;
font-weight: bold;
text-align: center;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
/* ---------vinspirations Subscribe Form---------- */
.box-title1 {
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
margin: 10px 0;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://sites.google.com/site/vinorichio86/free/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Like Us on Facebook</h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fvinshared&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Vinspirations', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="Vinspirations" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>

<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://vinspirations.blogspot.com">Blogger Widgets</a></p>
</div>
</div>

Keterangan :

Ganti teks yang berwarna kuning denga teks sobat atau biarkan secara default.
30 menunjukkan popup muncul sekali lalu akan muncul kembali 30 hari lagi. Setting menjadi 7 jika ingin muncul setelah 7 hari atau 1 jika ingin muncul setiap harinya.
Ganti vinshared dengan username facebook fans page milik sobat.
Ganti Vinspirations dengan username feedburner sobat.

4. Simpan, dan selesai!
5. Lihat popup-nya yang muncul pada blog sobat.

Last Words

Demikianlah tutorial tentang cara membuat popup jquery facebook fans page di blog. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Bila sobat mengalami kesulitan, silahkan sobat sampaikan komentar sobat di bawah. Salam blogging!

Count Characters Untuk Judul dan Deskripsi Postingan Blogger

noreply@blogger.com (Alvin S. Ritonga) — Thu, 12 Dec 2013 10:56:00 +0000

Penulisan judul dan deskripsi postingan yang tepat merupakan hal yang cukup vital bagi blog kita di dalam penelusurannya pada mesin pencari seperti google, yahoo, dan lainnya. Judul dan deskripsi postingan yang tepat dan sesuai dengan content postingan kita tentu akan membuat tampilan blog kita menjadi lebih seo friendly di mata mesin pencari tersebut.

Ibaratkan saat kita sedang mencari suatu artikel dalam mesin pencari google yang mana muncul 5 atau 10 hasil penelusuran yang sesuai dengan apa yang sedang kita cari. Pastinya kita akan lebih memilih hasil penelusuran dengan judul dan deskripsi yang sesuai dengan kebutuhan kita. Hal seperti inilah yang perlu kita terapkan dalam setiap membuat postingan baru agar lebih mempermudah setiap orang dalam mencari artikel yang dibutuhkan melalui searching pada mesin pencari.

Bagaimana membuat judul dan deskripsi postingan yang seo friendly

Dalam membuat judul maupun deskripsi postingan yang lebih seo friendly dimata mesin pencari, kita harus mengetahui bahwa judul postingan kita tidak boleh melebihi 66 karakter dan deskripsinya tidak boleh melebihi 145 karakter. Jika lebih, maka keduanya akan terpotong atau rusak pada mesin pencari.

Ilustrasinya dapat dilihat di bawah ini.

Judul dan deskripsi postingan yang seo friendly

Judul dan deskripsi postingan yang belum seo friendly

Dari ilustrasi yang saya buat diatas, sobat dapat melihat bahwa judul maupun deskripsi postingan yang belum seo friendly tersebut terlihat terpotong atau dikatakan rusak pada tampilannya di mesin pencari. Oleh karena itu, silahkan sobat hitung jumlah karakter dengan menggunakan tools count character di bawah ini. Tools ini tidak hanya menghitung per karakter, namun juga menghitung tiap spasi yang digunakan sehingga tidak melebihi dari limit jumlah karakter yang sudah saya jelaskan diatas.

Let's Counting!

Menambah Mesin Pencari Google Kustom Pada Blog

noreply@blogger.com (Alvin S. Ritonga) — Sat, 07 Dec 2013 13:35:00 +0000

Template blogger yang telah dimodifikasi pada umumnya sudah memiliki widget search box di dalamnya. Namun terkadang search box tersebut masih memiliki kekurangan dalam menemukan secara rinci keyword yang dibutuhkan. Untuk itu, maka dibutuhkan sebuah mesin pencari yang handal, dan solusi terbaiknya adalah dengan menempatkan kotak mesin pencari google kustom ke dalam blog sobat. Selain meningkatkan keakuratan dan kecepatan dalam mencari setiap kata yang ada di dalam blog sobat dan menunjukkan hasilnya kepada para pembaca blog kita, kotak pencari google ini juga dapat diintegrasikan dengan iklan google adsense yang blog sobat miliki, sehingga akan menambah penghasilan blog sobat dari setiap klik iklan yang terdapat dalam hasil pencarian mesin google tersebut.

Membuat Mesin Pencari Google Kustom

1. Seluncur ke Google CSE

2. Tuju Menu New Search Engine.

Isikan nama dan bahasa blog sobat, lalu klik tombol "Create"

3. Masuk ke menu Edit Search Engine. Pilih nama blog yag sudah sobat buat seperti atas. Lalu klik tombol "Setup"

Isikan Nama Search Engine, Deskripsi dan keywords blog sobat. Lalu tambahkan data blog sobat dengan klik tombol "Add"

4. Untuk mengedit tampilan dan warna, klik menu "Look & Feel"

Pada Menu "Layout", silahkan sobat pilih pengaturan tampilan pada blog yang diinginkan lalu klik tombol "Save".

Overlay : Hasil pencarian ditampilkan secara melayang pada blog.
Two page : Tombol pencarian pada satu halaman dan hasil penelusuran pada halaman yang lain, namun pada jendela yang sama.
Full width : Sering diterapkan pada blog yang hanya memiliki dua kolom dan bersifat statis. Dimana kotak pencarian dan hasilnya ditampilkan pada kolom yang sama.
Two coloumn : Tombol pencarian pada kolom yang satu, sedangkan hasil pencarian pada kolom yang berbeda. Bisa juga diterapkan untuk tombol pencarian pada sidebar, sedangkan hasil pencarian pada laman blog sobat.
Compact :Tombol dan Hasil pencarian pada kotak/kolom yang sama.
Result only : Menggunakan kotak pencarian yang ada pada blog kita, sedangkan hasilnya pada salah satu halaman blog kita.
Google hosted : Tampilan search box pada blog kita dengan hasil penulusuran pada halaman yang dihosting oleh Google.

Keterangan :

Untuk merubah tema pada tombol dan kotak pencarian, silahkan tuju ke menu "Themes".
Untuk merubah warna dan huruf pada kotak dan hasil pencarian, tuju ke menu "Customize".
Jangan lupa klik tombol "Save" setiap kali melakukan perubahan.

5. Setelah sobat menyimpan semua perubahan, klik "Save & Get Code". Akan muncul tampilan seperti ini.

Jika sobat kesulitan menambahkan script di atas ke dalam blog sobat, klik "Get the V1 code".

Sehingga tampilannya akan tampak seperti di bawah ini.

6. Copy script di atas, lalu tambahkan ke dalam template blog sobat.

Menambahkan Mesin Pencari Google Kustom Dibawah Postingan

Untuk menambahkan mesin pencari google custom tepat di bawah postingan, silahkan ikuti tutorial berikut.
1. Tuju ke Blogger > Template > Edit HTML
2. Cari (CTRL+F) kode <data:post.body>
3. Tepat dibawahnya tambahkan kode mesin pencari google Kustom "Full Width"
4. Simpan dan lihat tampilannya pada blog sobat.
5. Selesai!

Menambahkan Mesin Pencari Google Kustom Pada Sidebar

1. Tuju ke Blogger > Tata Letak
2. Lalu pada sidebar, klik Add A Gadget>HTML/Javascript.
3. Masukkan kode mesin pencari google kustom "Compact" atau "Two Column" atau "Overlay".
4. Simpan dan lihat tampilannya pada blog sobat.
5. Selesai!

Last Words

Cukup sekian tutorial dalam menambah mesin pencari google kustom pada blog yang dapat saya sharing kepada sobat semua. Bila menemukan kesulitan dalam menerapkannya pada blog sobat, silahkan beri komentar sobat mengenai artikel ini. Akhir kata, semoga tutorial ini berguna bagi kita, Salam Blogging!

Cara Membuat Sharing Buttons Melayang Pada Blogger

noreply@blogger.com (Alvin S. Ritonga) — Fri, 06 Dec 2013 05:29:00 +0000

Banyak cara yang dapat dilakukan oleh pemilik blog dalam meningkatkan traffic serta mempopulerkan content blognya. Salah satunya adalah dengan menambahkan tombol sharing pada blog, dan berharap para pembaca blognya berkenan untuk mensharing blognya ke semua jejaring sosial seperti Facebook, Twitter, Pinterest,dan lain sebagainya. Oleh sebab itu, disini saya ingin berbagi tutorial mengenai Cara Membuat Sharing Button Melayang Pada Blogger, seperti yang tampak pada tampilan artikel saya di samping.

Cara Memasang Sharing Buttons

Untuk memasang sharing buttons ini pada template blog sobat, sehingga akan tampil setiap penayangan artikel blog sobat, silahkan ikuti tutorialnya berikut.
1. Masuk ke menu Template
2. Tuju ke Edit HTML
3. Cari kode berikut ini :

<b:includable id='post' var='post'>

4. Tepat di bawahnya tambahkan kode berikut,

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.vins_social_floating {
position:fixed;
bottom:10%;
margin-left:-60px;
float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px; }
.vins_social_floating .vins_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.vins_social_floating .st_twitter_vcount, .vins_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.vins_social_floating .st_fblike_vcount{
margin-left:5px;
}
.vins_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.vins_social_floating .chicklets, .vins_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuB6Z912rwF5jJvJKDUZ2xasGHbz4eZiqq2Bhwz_yVOPnMu_BzM_yZ2IysiYMsQ9C4yA2w-hDTbBZ3Up73xwpNewDfyYBGrdES8MBZ-WvO_lvCV4D3SXOaGqhyphenhyphentCsGvNrHnKzyJUP6n08/s1600/Sub_pint.png') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuB6Z912rwF5jJvJKDUZ2xasGHbz4eZiqq2Bhwz_yVOPnMu_BzM_yZ2IysiYMsQ9C4yA2w-hDTbBZ3Up73xwpNewDfyYBGrdES8MBZ-WvO_lvCV4D3SXOaGqhyphenhyphentCsGvNrHnKzyJUP6n08/s1600/Sub_pint.png') !important;
}
.vins_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.vins_social_floating .stButton_gradient{
border:none !important;
}
.vins_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.vins_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.vins_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.vins_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.vins_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.vins_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.vins_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpRfnrRRKsfd_5A8_JTVGPEZhiIeuvsodjAcr2aWe_Npl-aQrFM6nopwrscpFUrWKm-fTgghd9OHIFy9lgqwEMHQwU_BhXhTR4MF_LgDATgSy7p4g0LNFCmiw7D2nQ7M28X97Cc-_q_Y/s1600/pinterest_arrow.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>

<div class='vins_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='vinspirationz'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "vinspirations",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://vinspirations.blogspot.com/2013/12/cara-membuat-sharing-buttons-melayang.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Keterangan :

Sesuaikan margin-left dengan batas luar outer-wrappernya template sobat, agar tidak kelihatan tumpang-tindih.
Untuk mengubah background-color silahkan lihat kode warnanya disini.
Ubah vinspirationz dengan username twitter sobat.

Sebagai tambahan, bila tombol Like Facebook-nya tidak bekerja, tambahkan script berikut di bawah kode <body>. Script ini cukup satu pada template blog sobat, jadi jika sudah ada, maka tidak perlu ditambah lagi. Berikut script-nya.

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Last Words

Demikianlah tutorial mengenai Cara Membuat Sharing Buttons Melayang Pada Blogger. Beri komentar sobat bila mengalami kendala dalam menerapkan tutorial ini pada blog sobat. Akhir kata, semoga artikel ini bermanfaat buat kita semua, - Salam Blogging!

Bagaimana Cara Menyimpan Gambar Di Blogger?

noreply@blogger.com (Alvin S. Ritonga) — Thu, 05 Dec 2013 12:18:00 +0000

Saat ini sudah cukup banyak situs penyedia layanan penyimpan gambar seperti Photobucket, Tinypic, ataupun picasa seperti yang sudah saya bahas disini. Namun pernahkah sobat mencoba menyimpan gambar ke dalam blog sobat sendiri untuk digunakan pada template blog sobat, atau pernahkah sobat melihat sebuah link gambar di dalam kode widget, script atau lain-lainnya dimana link gambarnya bersumber dari blogspot/blogger. Jika sobat penasaran dengan hal tersebut, maka saya ingin sharing sedikit mengenai Bagaimana Cara Menyimpan Gambar Di Blogger?

Cara Menyimpan Gambar Di Blogger

1. Buat Post baru dengan judul terserah sobat.

2. Upload semua gambar yang telah sobat simpan sebelumnya pada situs penyimpan gambar.

3. Setelah sobat upload, tampilannya kurang lebih seperti ini

4. Simpan post tersebut, jangan dipublish, biarkan post tersebut sebagai draft saja.

Cara Menggunakan Gambar

Untuk menggunakan gambar yang sudah sobat upload sebelumnya pada draft post milik sobat. Silahkan ikuti tutorial berikut.

1. Pastikan sobat menggunakan browser Firefox terlebih dahulu.
2. Masuk ke dalam draft yang sudah sobat buat sebelumnya.
3. Biarkan tampilannya dalam bentuk Compose, bukan HTML.

4. Klik kanan gambar yang sobat inginkan, lalu pilih "Copy Image Location"

5. Paste Link Url Gambar tersebut ke dalam address barnya Firefox ataupun ke dalam notepad.

Dari sini sobat sudah memperoleh link url dari gambar yang ingin sobat gunakan.

Catatan :

Dari link tersebut yang perlu sobat perhatikan adalah s1600. s1600 menunjukkan kualitas dari gambar tersebut. Untuk menurunkan kualitas gambarnya, sobat tinggal mengubah s1600 menjadi s320, s400, ataupun s480. Semakin rendah angkanya, akan semakin blur gambar yang ditampilkan.

Last Words

Demikian tutorial singkat ini tentang bagaimana menyimpan gambar di blogger? Dengan menyimpan semua gambar pada draft post tersebut, sobat tidak hanya mendapatkan link unik dari tiap gambarnya, namun sobat juga dapat mengurangi secara signifikan waktu loading bagi blog sobat. Silahkan dipraktekkan tutorial di atas, dan semoga artikel ini bermanfaat bagi kita semua, - Happy Blogging!

Dimana Blogger Menyimpan Gambarnya?

noreply@blogger.com (Alvin S. Ritonga) — Wed, 04 Dec 2013 14:22:00 +0000

Terkadang Saat sobat sedang menyimpan gambar pada postingan blog. sobat mungkin sedikit penasaran dimana gambar tersebut disimpan. Bagi yang belum mengetahuinya, blogger ternyata mengupload dan menyimpan gambar secara otomatis via Picasa Web Album yang sudah terhubung dengan akun google milik sobat, yang juga otomatis menjadi akun yang sobat gunakan saat log-in ke blogger.

Setelah sobat masuk ke menu Picasa Web Album, sobat bisa melihat beberapa album gambar baik yang bersumber langsung dari semua blog yang sobat miliki ataupun yang bersumber dari akun google sobat. Secara lengkap kamu bisa melihat detailnya seperti ini.

Dengan fasilitas yang dimiliki oleh Picasa. sobat bisa menghapus content gambar yang tidak digunakan pada blog sobat. Untuk menghapus gambar yang terdapat pada masing-masing album blog, sobat harus sedikit berhati-hati, sebab jika setelah sobat menghapusnya, ternyata gambar tersebut masih dipergunakan pada blog, maka hasilnya link pada gambar menjadi rusak dan tidak akan tampil pada blog sobat lagi.

Last Words

Sudah jelaskan dimana blogger menyimpan semua gambar yang ada pada blog sobat. Sebagai tambahan, Masing-masing album memiliki kapasitas hanya 1000 gambar, jadi jika album sudah penuh, maka otomatis akan muncul albumnya yang baru.

Demikianlah Tutorial singkat ini tentang Dimana Blogger Menyimpan Gambarnya? Semoga tutorial singkat ini mampu menjawab rasa penasaran sobat semua. Akhir kata, semoga artikel ini bermanfaat bagi kita semua, - Salam Blogging!

Tips Agar Gambar Di Postingan Tidak Dapat Di Klik

noreply@blogger.com (Alvin S. Ritonga) — Tue, 03 Dec 2013 17:50:00 +0000

Tutorial kali ini adalah seputar penggunaan gambar yang kita letakkan di dalam postingan. Secara default, gambar yang telah kita tambahkan di dalam postingan akan memiliki link url otomatis dari blogspot. Link inilah yang membuat gambar tersebut dapat di klik. Bagi sebagian orang, hal tersebut mungkin bukan masalah sehingga membiarkan tampilan gambar itu secara default. Namun bagi saya, hal tersebut akan sedikit mengganggu tampilan artikel kita saat dipublish. Bagi yang sependapat dengan saya, silahkan lihat contoh tampilan gambar yang saya maksudkan tersebut.

Agar Gambar Postingan Tidak Dapat Di Klik

Untuk mengedit gambar tersebut agar tidak dapat di klik, silahkan lihat tutorial berikut.

1. Ubah Tampilan postingan yang kita edit menjadi HTML bukan Compose.

2. Cari source dari gambar yang baru kita tambahkan. Contoh gambar di atas seperti ini.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUv7m8A22Yb4qNJIdwDS2-jK0OotxP_YOwFKi8zgWlpw03gvMt_pUXlgtnyFjWRgJr0OlPjUv4M55ZfWv2jelTFC_HxJJmZxttK4hpL_nspgXeQV7QSvW6Vldpxw48bl8sBHm5fyFt6zM/s1600/DSC00864.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUv7m8A22Yb4qNJIdwDS2-jK0OotxP_YOwFKi8zgWlpw03gvMt_pUXlgtnyFjWRgJr0OlPjUv4M55ZfWv2jelTFC_HxJJmZxttK4hpL_nspgXeQV7QSvW6Vldpxw48bl8sBHm5fyFt6zM/s400/DSC00864.JPG" width="400" /></a>

3. Hapus kode yang ditandai dan lihat tampilannya sekarang.

Last Word

Bagaimana sobat? Cukup mudah bukan. Silahkan diterapkan sendiri pada postingan blog sobat. Akhir kata, demikianlah tutorial singkat saya tentang Tips Agar Gambar Di Postingan Tidak Dapat Di Klik. Bila sobat mengalami kesulitan dalam menerapkan topik di atas. Silahkan berikan unek-unek sobat pada kotak komentar di bawah. Sekian dari saya, semoga artikel ini bermanfaat bagi kita semua. Salam Blogging!

Menyisipkan Iklan Ke Dalam Postingan Blogger

noreply@blogger.com (Alvin S. Ritonga) — Tue, 03 Dec 2013 14:44:00 +0000

Penyisipan Iklan ke dalam postingan menjadi salah satu alternatif terbaik bagi pemilik blog dalam memaksimalkan penghasilan yang diperoleh lewat blognya. Untuk itu, maka tutorial kali ini saya ingin membahas mengenai bagaimana cara menyisipkan kode iklan, bukan hanya untuk iklan google adsense saja, namun juga bisa digunakan untuk kode iklan lainnya seperti popads, kliksaya.com, bidvertiser, dan lain sebagainya ke dalam postingan blogger. Kode iklan tersebut bisa kita sisipkan baik di bawah judul postingan, di tengah postingan, maupun di bawah postingan.

Sebagai pengingat saja bagi sobat semua, bahwa jika kita ingin menyisipkan kode iklan ke dalam tubuh postingan, kita perlu memparse kode iklan tersebut sehingga iklan yang kita maksudkan dapat terlihat di dalam postingan kita. Sobat bisa memparse kode tersebut disini.

Sisipkan Iklan Di Bawah Judul Postingan

Untuk memasang iklan tepat di bawah judul postingan, silahkan ikuti langkah-langkahnya di bawah ini.
1. Masuk ke menu Template Lalu Klik Edit HTML.
2. Cari kode berikut ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

Jika sobat menemukan ada dua kode yang sama seperti di atas, silahkan pilih kode yang kedua.

3. Hapus kode tersebut dan ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
"Sisipkan kode Iklan Sobat disini"
<data:post.body/>

4. Simpan template sobat - Selesai!

Sisipkan Iklan Di Tengah Postingan

Untuk memasang iklan tepat di tengah-tengah postingan, step by step-nya di bawah ini.
1. Masuk ke menu Template + Edit HTML.
2. Cari kode di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

Bila ada dua kode <data:post.body/> yang sama, pilih kode kedua.

3. Ganti kode <data:post.body/> dengan kode di bawah ini :

<div expr:id='"aim1" + data:post.id'/>
<div style='clear:both; margin:10px 0'>

Sisipkan Kode Iklan Sobat Disini

</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("aim1<data:post.id/>");var obj1=document.getElementById("aim2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("");if(r>0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>

4. Simpan template sobat, - Selesai!

Sisipkan Iklan Di Bawah Postingan

Untuk menyisipkan iklan tepat di bawah postingan, silahkan ikuti tutorialnya di bawah ini
1. Masuk ke Template sobat Lalu klik Edit HTML.
2. Cari kode dibawah ini, (opsi : pilih kode yang kedua)

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

3. Lalu sisipkan kode iklan sobat seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Tambahkan Kode Iklan Sobat Disini

4. Simpan template sobat, - Selesai!

Last Word

Bagaimana? Cukup mudah bukan. Silahkan kreasikan sendiri posisi iklannya sesuai keinginan sobat. Sebagai tambahan, sebelum meletakkan iklan sobat ke dalam postingan, perlu sobat sesuaikan dengan width dari main-wrapper sobat, agar tampilan iklan sobat tidak terpotong-potong.

Akhir kata, Semoga artikel ini bermanfaat bagi kita semua. Salam Blogging!

Widget Popular Post Minimalis Untuk Blogger

noreply@blogger.com (Alvin S. Ritonga) — Wed, 20 Nov 2013 17:51:00 +0000

Pada Postingan kali ini, saya ingin berbagi widget popular post yang minimalis buat blog sobat semua. Widget popular post itu sendiri bagi saya memang cukup essensial untuk ditampilkan dalam blog guna menarik perhatian para pembaca blog kita dan bagi pemilik blog, widget ini tentu akan sangat membantu dalam membuat tampilan blog menjadi lebih menarik serta dalam menyiasati kekosongan pada bagian sidebar yang terdapat dalam template blog kita.

Dengan widget popular post ini, para pembaca blog kita akan lebih cepat mengetahui postingan apa saja yang paling menarik bagi pembaca yang lain yang ada di dalam blog kita, sehingga akan lebih menarik rasa penasaran pembaca blog kita untuk melihat postingan tersebut dan alhasil pageview blog kita menjadi bertambah. Untuk lebih detailnya, silahkan sobat lihat tampilan di bawah ini beserta cara memasangnya pada template blognya.

Menambah Widget Popular Post Minimalis

Ada dua tampilan popular post minimalis yang ingin saya bagikan kepada sobat , semoga dapat menarik minat sobat untuk memasangnya pada template blog yang sobat miliki. Untuk langkah-langkahnya silahkan simak di bawah ini.

Masuk ke menu Tata Letak lalu Klik "Tambahkan Gadget"
Pada pilihannya pilih opsi "Entri Populer atau PopularPost"
Lalu Edit atau setting sesuai dengan gambar berikut,

Simpan gadget jika sudah selesai.

Kustomisasi Widget Popular Post Minimalis

Setelah sobat menyimpan gadget tersebut, secara otomatis akan muncul widget popular post pada template blog sobat dengan tampilan standar sesuai widget default-nya blogger. Untuk mengkostumisasi tampilan default dari widget popular post tersebut, silahkan simak langkahnya berikut ini.

1. Untuk antisipasi template error, back up terlebih dahulu template sobat.
2. Tuju ke menu Template + Edit Html.
3. Cari kode berikut :

]]> </ b: skin>

4. Lalu salin kode di bawah ini tepat di atasnya.

/*--- vinspirations Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.2em 0.5em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: rgb(241, 241, 241);
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid rgb(243, 243, 243);
box-shadow: 1px 2px 9px #666; }

.popular-posts ul li {
border-bottom: 1px dashed #ddd;
height:28px;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed rgb(105, 105, 105);
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Tampilannya akan tampak seperti ini :

Atau jika ingin dengan tampilan seperti ini :

Silahkan salin kode berikut,

/*--- vinspirations Popular Posts --- */
.popular-posts ul{
padding-left:0px;
counter-reset:popcount
}
.popular-posts ul li:before{
list-style-type:none;
margin-right:15px;
padding:0.2em 0.5em;
counter-increment:popcount;
content:counter(popcount);
font-size:16px;
background:#292D30;
color:#fff;
position:relative;
font-family:georgia;
float:left;
border:2px solid #ddd;
border-radius:15px
}
.popular-posts ul li{
border-bottom:1px dashed #ddd;
height:28px
}
.popular-posts ul li:hover{
padding-left:10px;
border:2px solid #6BB5FF;
background:#FFF
}
.popular-posts ul li a{
text-decoration:none;
color:#5A5F63
}
.popular-posts ul li a:hover{
text-decoration:none;
text-decoration:none;
color:#78B6F4
}
.popular-posts .item-thumbnail img{
webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
list-style:none
}
.popular-posts .item-thumbnail img:hover{
webkit-border-radius:0px;
list-style:none;
-moz-border-radius:0px
}

Keterangan :

Untuk mengubah default background pada kotak nomor, silahkan ubah #292D30 sesuai warna sobat atau lihat kode warnanya disini.
Kode rgb(241, 241, 241) atau #fff Menunjukkan warna angka pada kotak, silahkan ubah sesuai keinginan atau biarkan saja secara default.
Untuk kostumisasi lebih lanjut, silahkan setting sesuai keinginan sobat atau biarkan secara default.

5. Pratinjau terlebih dahulu lalu simpan template sobat - Selesai!

Last Word

Cukup mudah bukan? Semoga dengan tampilan popular post sobat yang baru sekarang, mampu mendongkrak pageview blog sobat semua. Silahkan baca postingan menarik lainnya disini.

Sekian tutorial kali ini yang dapat saya sharing tentang Widget Popular Post Minimalis Untuk Blogger. Bila sobat mengalami kebuntuan atau masalah dalam pemasangan widget ini, silahkan beri komentar sobat di bawah ini, sebisa mungkin saya akan memberkan solusinya. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Happy blogging.

Mengatasi Fake Login Yang Muncul Di Blog

noreply@blogger.com (Alvin S. Ritonga) — Tue, 19 Nov 2013 17:57:00 +0000

Munculnya pop-up fake login yang tiba-tiba di blog kita tentu sangat membuat kita menjadi tidak nyaman, terlebih lagi bagi para pembaca blog kita. Munculnya pop-up yang tidak pernah kita letakkan di dalam template blog kita tersebut mengharuskan kita untuk mengisi username dan password yang diminta oleh blog atau situs pembuat fake login tersebut. Terkadang tidak menjadi masalah, sebab kita dapat meng-cancel permintaan tersebut. Tapi, pop-up tersebut akan terus muncul setiap menyimpan atau melakukan sesuatu dengan blog kita. Dan hal ini juga pasti berimbas kepada para pembaca blog kita. Sobat bisa melihat di bawah ini contoh pop-up yang muncul tiba-tiba di blog kita.

Authentication Required:

A username and password are being requested by http://xxx

The site says: "Access Restricted (pwrestrict)

Kemunculan menu pop-up fake login tersebut secara tiba-tiba tersebut dikarenakan bahwa kita nge-link kan gambar dari situs tersebut yang mana link tersebut sudah dimodifikasi untuk memunculkan pop-up fake login ke dalam blog kita.

Untuk mengatasi hal tersebut,kita cukup menghapus image atau link dari situs tersebut dari template blog kita. Pokoknya di ingat saja dimana kira-kira kita meletakkannya di dalam template blog kita.

Sekian tutorial blog mengenai mengatasi fake login yang muncul di blog. Semua pasti ada jalan keluarnya dan semoga tutorial kali ini bermanfaat bagi sobat semua. Keep Blogging!!

Bagaimana Cara Mengubah Kode HTML Pada Blog?

noreply@blogger.com (Alvin S. Ritonga) — Wed, 22 Aug 2012 19:01:00 +0000

Seringkali saat kita sedang menulis tutorial atau berkomentar, kita dihadapkan pada kebutuhan untuk menampilkan kode html atau javascript baik di dalam postingan maupun dalam kotak komentar. Untuk memenuhi hal tersebut, maka Adsense, HTML code parser menjadi kuncinya. Alat ini menjawab kebutuhan sobat semua dalam meng-encode html maupun javascript tersebut sehingga dapat dimasukkan ke dalam postingan terlebih-lebih ke dalam kotak komentar.

Perlukah kode iklan adsense diubah? Sangat perlu, hal ini dikarenakan jika kita meletakkan kode iklan adsense tersebut secara langsung atau bulat-bulat ke dalam badan template blog kita, template kita akan mengalami sedikit masalah. Untuk mengatasinya, maka kita perlu mengubah kode tersebut menjadi versi entitasnya.

HTML ENCODER : Start Converting Now!

Apa itu Text Area Pada Blog?

noreply@blogger.com (Alvin S. Ritonga) — Wed, 13 Jul 2011 11:46:00 +0000

Text area merupakan hal yang cukup penting bagi kita dalam menonjolkan teks ataupun kode dan script yang sudah di-encode yang ada di dalam postingan maupun yang terdapat pada widget blog kita. Text area itu sendiri biasanya berbentuk kotak atau bingkai sehingga membedakan isi pada text area tersebut dengan tulisan lainnya. Intinya, text area itu pada umumnya digunakan untuk mempermudah para pembaca blog kita dalam memblok teks maupun script yang kita tonjolkan tersebut. Text area sendiri hampir sama dengan blockquote, namun untuk postingan kali ini saya ingin lebih memperjelas lagi mengenai apa itu text area beserta ragam bentuknya.

Khusus untuk kode ataupun script yang ingin sobat tampilkan ke dalam text area, sobat perlu meng-encode terlebih dahulu kode atau script html tersebut agar tampilannya dalam text area tersebut cuma dan hanya berbentuk tulisan saja. Silahkan sobat lihat contoh dari penggunaan text area di bawah ini yang mungkin sudah sering sobat lihat pada blog maupun situs yang lain saat browsing internet.

Variasi Text Area Pada Blog

Cukup banyak model dari text area ini yang sering digunakan pada blog. jadi silahkan pilih sendiri text area yang cocok bagi sobat sekalian.

1. Text Area Dengan Tampilan biasa

<textarea>deskripsi teks anda disini</textarea>

Tampilannya akan seperti ini :

2. Text Area Dengan Tampilan Border & Background

<div style="border: 3px dashed rgb(245, 0, 61); padding: 5px; background: rgb(255, 255, 204) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Tulisan deskripsi yang ingin sobat tampilkan disini</div></blockquote>