Menerapkan Seleksi Otomatis Pada Blockquote

Seleksi Otomatis
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(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
pres[i].addEventListener(&quot;click&quot;, 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!


vinspirations

Bagaimana Menggunakan Blockquote Pada Postingan Blog

Post blockquote
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.

post blockquote

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

.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

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

Blockquote Style 3

post blockquote

.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

.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

.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

.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

.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

.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

.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 blokcquote

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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

.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 blockquote

.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

.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!

vinspirations

Efek Judul + Sub Judul Blog Berjalan Otomatis


Judul Blog Berjalan
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!

vinspirations

Membuat Popup jQuery Facebook Fans Page di Blog

Popup Facebook
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&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Vinspirations" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do not Remove the Credits -->
<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!


vinspirations

Count Characters Untuk Judul dan Deskripsi Postingan Blogger

vinspirationsBy : Alvin S. Ritongavinspirations
Count Characters
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
Blogger Tools
  • Judul dan deskripsi postingan yang belum seo friendly
Blogger Tools

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!


Blogger Tools
vinspirations

Menambah Mesin Pencari Google Kustom Pada Blog

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.


tutorial blog

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"

tutorial blog

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"

tutorial blog

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.
tutorial blog

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.

tutorial blog

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

tutorial blog

Sehingga tampilannya akan tampak seperti di bawah ini.
tutorial blog
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!



vinspirations

Cara Membuat Sharing Buttons Melayang Pada Blogger

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.
Tutorial Blog

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 == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<!-- No more works properly so removing it from vins list<span class='st_fblike_vcount' displaytext=''/>-->
<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: &quot;vinspirations&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</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!



vinspirations

Tukeran link


Vinspirations



DMCA.com
 

Info Blog

Recent Comments

Label

Copyright 2009  ©  Vinspirations | powered by Blogger

Template by vinspirations | Best View on Firefox