12 BLOCKQUOTE DESIGN YANG CUTE UNTUK BLOGGER ATAU BLOGSPOT

Assalamuaikum Sahabat blogger.
Sebagian dari kita pasti sudah tau apa itu blockquote. Yups, seperti gambar di bawah, gambar tersebut adalah blockquote yang comel-comel. Blockquote dimaksukan untuk memperjelas tulisan atau mempertegas tulisan pada artikel kita..selamat mencuba.. Hasilnya anda boleh lihat di sini

Langka-langkahnya sebagai berikut:
1. Login Blogger seperti biasa.
2. Klik Buka Daftar Entri (disamping tombol Lihat Blog) -> Template -> Edit HTML -> Lanjutkan
3. Selanjutnya cari (tekan Ctrl + F) ]]></b:skin>
4. Klo udah ketemu, tinggal pilih salah satu kode dibawah ini, letakkan di atas code " ]]></b:skin>"

nih contoh script sama gambarnya:

Blockquote Design 1

Kode Untuk Blockquote Design 1

.post blockquote {margin : 0 20px;padding: 20px 60px 80px 20px;background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrUiGgPVXJrcWbTfMW7hTW7gql_wTjBtOJLtJbSNslUgi4KQDxCvZv7oOhM9f5xUH6vUTcksJk3cx_1QAeRxZJ3QrN76ziP-n66RRa1TTZxrM8tsM4WDO1LaWhaKptrzUJNAHQRoP9_9/s1600/rb+style+01.png) no-repeat bottom right;font: 18px normal Tahoma, sans-serif;color : #000;border: 1px solid #DDD;}.post blockquote p {margin: 0;padding-top:10px;}

Blockquote Design 2

Kode Untuk Blockquote Design 2

.post blockquote {margin : 0 20px;padding: 70px 20px 20px 40px;background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNJLyJSoqtNh5tI89VWaOe0OudQDVQZ0_zJdDrGSKKTxCGHidTEj86fiFlko8r4OkF6ANbNIOyK4aSttphKb92casi3Yj6VFhb7nSYgE7Y8GMXAoERHW3oXXEq7GIHeHQ77Xt_3_tqmQYP/s1600/rb+style+02.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 Design 3

Kode Untuk Blockquote Design 3

    .post blockquote{     margin : 0 35px;     padding: 80px 0px 0px 0px;     background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Xe2uhlnERwiCh2WLVuEVL5urlzro_S8_fvtWcRgwFQjITDizsuHL5jRt5icYVoE6wiFXa09PcMxSte836uxoTXNHW8DHYxTNv3mcQz_sFuFRJIyT-6MsBHTrtvCcNzWU87Da7t77wqAz/s1600/rb+style+04.png) no-repeat top;     font: bold 1em "comic sans ms", Helvetica, verdana;     color : #666;     }
    .post blockquote div{     background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjBFCAaEDRwxHwBRF4KDocW5iD6CuZSD3ZO_AIC20CP6UTQL2MLwLQ7sJn4s37cAAOmDXlyqhrPDYNptyB8ITtmeXsc9ojOvRCS8Kujd1jiqY2HFl67WE2RYi88KC64sELRK0PmDMMPyB/s1600/rb+style+04..png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding: 20px;     }

Blockquote Design 4

Kode Untuk Blockquote Design 4

    .post blockquote{     margin : 0 35px;     padding: 80px 0px 0px 0px;     background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Xe2uhlnERwiCh2WLVuEVL5urlzro_S8_fvtWcRgwFQjITDizsuHL5jRt5icYVoE6wiFXa09PcMxSte836uxoTXNHW8DHYxTNv3mcQz_sFuFRJIyT-6MsBHTrtvCcNzWU87Da7t77wqAz/s1600/rb+style+04.png) no-repeat top;     font: bold 1em "comic sans ms", Helvetica, verdana;     color : #666;     }
    .post blockquote div{     background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjBFCAaEDRwxHwBRF4KDocW5iD6CuZSD3ZO_AIC20CP6UTQL2MLwLQ7sJn4s37cAAOmDXlyqhrPDYNptyB8ITtmeXsc9ojOvRCS8Kujd1jiqY2HFl67WE2RYi88KC64sELRK0PmDMMPyB/s1600/rb+style+04..png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding: 20px;     } 

Blockquote Design 5

Kode Untuk Blockquote Design 5

    .post blockquote{     margin : 0 20px;     padding: 50px 30px 50px 30px;     background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFYcWa73sBjX7gx_OxV7Al4kwd7PTpef-KmFCrTypxPKxjwlroG7iMoC-XMjhxtHrZZCUme-v1J5j0yLLWbAG4g6sh2wcqbrO9AtILazWOBmMVX07C8yBbVZvLkqGjd-RzuS5e9q2vf5z/s320/rb+style+05.png) no-repeat top;     font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;     color : #000;     }
    .post blockquote div{     background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRz2XcI3rTSYN0ja4PY0c91PUWRMMdQKjiF5mOo8vpmd-smUX68Fb8LS1ZTQDNOyJOjYMudHaIFhT7SxY4xkg-NzynZzYaSo1IMUwn5IMMt0blmUBr_klMPzhfQz-uJecgTXSkTg2EvEU/s320/rb+style+05...png) no-repeat bottom;     padding-bottom: 50px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 6

Kode Untuk Blockquote Design 6

.post blockquote {       font:bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 25px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdSb5F6gw9KjgKdB0LxkX2Dx9A3UN3wKA8Jdr8hyyo1MW8-LiSUvSU9CAnAZVa2IUVjhfZEtgTAIu3OPnZa-tzQPL8O5aDjG56cJVqSeAUwZSeXqzbRdXS0EEkRbRcVFeoRxT7oguwlSu/s1600/rb+style+06.gif) no-repeat top left;       text-indent: 65px;     color:#6299E4;       }       .post blockquote div {         display: block;        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzbnqaL_riemMmjqpQt73RdIPOAdWwy1soIFRWvxw1HiT3MH66-lps7yXxwgm99H_TZxUU8sg625_IGgVIt4q-cjoEWmUmEPfrGto9rJSwM1d6xqfVV5emxHB9SXS3XCehViLDfvQmLSn/s1600/rb+style+06..gif) no-repeat bottom right;     padding-bottom:30px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 7

Kode Untuk Blockquote Design 7

.post blockquote {font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;background-position:-10px -7px;border: 1px dashed #FFC600;margin: 20px 10;padding: 0 20px 0 50px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeEjis9MdIB11yxXbRXPAzGo6RZnFvlzfqEcO2TQyZQV6SY2DF-bT9ZuG0Rc5r5ny97EnzJITXeu6ZPAsBmCNW1WCWI-6x9iokQlAR06YkX3L08oHYYDvV4taPaPFv9bqx0gD_sxLjN-b/s1600/rb+style+07.png) 5% no-repeat #FFF8DD; } 

Blockquote Design 8

Kode Untuk Blockquote Design 8

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3XqZKEj0fMUXtNfNbTmwiCE8y4r7VWQfIx-fIFqk7_z5MDr8H6xPqfhqKgF0UNNWMkJznWcao1MjfSU4CI-ES5zd6nn8RsKBE9yi9ujuBCoFcDzukhZcWRVxyNmku_DjMwLRw3zoxIkZJ/s320/rb+style+08.gif) ; background-position:;background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia; } .post blockquote p { margin: 0;padding-top: 10px; } 

Blockquote Design 9

Kode Untuk Blockquote Design 9

.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-koqdNOUUlXx8flXz7HaRovZJn4gEwqqfiBaU5cT5FKJzhQ60ZyZDl7XHx6TsgcueKsKNS_YJK4I5-dSkkMxh00CZMwSkzB2Xmtq9ttfYvmlhrE9BcSEsCk2ojOn-47pv_dM7azrycNZ4/s1600/rb+style+09.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; -moz-border-radius: 15px; border-radius: 15px; color:#C7CACF;font: bold 1.1em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; } 

Blockquote Design 10

Kode Untuk Blockquote Design 10

    .post blockquote {       font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 10px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEbB1Fl2adT0QArVbM-ztBioRv9EhwJvAAy-uygeabnzvFhxVNu7T9h-WrIf5cbqqcEjybGWwge-H9aLOEvKtFUzzxVHp8GN2O_yyEigpuZIBp6IWtavfEEywyf-ujKqN-MjJsioyryDR/s1600/rb+style+10.gif) no-repeat top left;       text-indent: 65px;       }       .post blockquote div {         display: block;         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSIYKEBAvcSXOCZl8q6AdrrGNmm28g9fuGszAPsVQhzrvZTf7aU28Hf_x2hIYnWxtAI_e-S94nu95wBOv2Z_3at6QnjLKrz2ZF7CgWPvGnYnW1eswvjvY8_XU5b9BJRDcVjD95dmYE_Yt/s1600/rb+style+10..gif) no-repeat bottom right;     padding-bottom:10px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 11

Kode Untuk Blockquote Design 11

    .post blockquote {       font: bold italic 1em  "comic sans ms", Tahoma, sans-serif;       padding-top: 10px;       margin: 5px;       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJe4xCW5qCz1BBqJPYUSv4JDu9mm2IoQMmVVFh7lGLLoylcQ8KwT7MNx54x9adMVhEB_OV-4RivSvZ-DomNr65Gt15HGNPTLMB1KPwiqGxAdlWoBagwvMhupFHFukNa0YDR453NAW_pmZ/s1600/rb+style+11.gif) no-repeat top left;       text-indent: 65px;      }       .post blockquote div {         display: block;         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuh_nOAHfxOC3nAcrHmboCSYEoW3ph5cFnhdKZAFp6Q1Zai4CcXyIJpWgBrajtA8P_8DMoMwykfmDc0iX2gNxrA6fSIS8Wbdg6woHApP7YpR2uBslYGlU38-rzuUAbbjCu0fYX0xkRAm9/s1600/rb+style+11..gif) no-repeat bottom right;     padding-bottom:10px;     }
    .post blockquote p {     margin: 0;     padding-top:10px;     } 

Blockquote Design 12

Kode Untuk Blockquote Design 12

.post blockquote {     margin : 0 20px;     padding: 10px 20px 25px 20px;     background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Za3A8goBkseQHlCXiKd4almg103XWcFxAibQ5kFPOsCmemPMF2cB3Qr0cpz93xEZCjnmXQYQhPxHoNRGr80mecufG0y3KhrWV1-gPwIJS3pZC7ffIMPzx7nAfze1mLHbva2d5UxVbmLe/s1600/rb+style+12.png) no-repeat right bottom;     font: bold 1.0em "comic sans ms", arial, Helvetica,verdana, Georgia;     color : #484848;     border: 5px dashed #fff;     }
    .post blockquote p {     margin: 0;     padding-top:10px; }

Untuk penjelasan dasar dari kode-kode tersebut, saya akan mengambil contoh kode pada blockquote design no 1

.post blockquote {
margin : 0 20px;padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrUiGgPVXJrcWbTfMW7hTW7gql_wTjBtOJLtJbSNslUgi4KQDxCvZv7oOhM9f5xUH6vUTcksJk3cx_1QAeRxZJ3QrN76ziP-n66RRa1TTZxrM8tsM4WDO1LaWhaKptrzUJNAHQRoP9_9/s1600/rb+style+01.png) no-repeat bottom right;
font: 18px normal Tahoma, sans-serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

*Pada tulisan yang berlabel kuning, itu merupakan jarak antara text dengan pinggir blockquote border. Urutannya 20px 60px 80px 20px : Atas Kanan Bawah Kiri/div>

*Pada tulisan yang berlabel biru muda adalah warna background blockquote

*Pada tulisan yang berlabel merah adalah url dari gambar backroung blockquote, untuk melihat gambarnya ketikan alamat tersebut pada address bar.

*Pada tulisan yang berlabel hijau adalah besar tulisan, dan jenis font yang dipakai.

Sumber: komputersiamri

Cara Batal atau Cancel Auto-payment/Automatic Fee Renewal in Paypal

Anda pernah menggunakan Paypal..dan pernah membeli melalui Paypal, jika ya pasti anda pernah terjadi auto renewal pada sesuatu produk yg anda Langgan jika anda tidak mahu ia berulang Langganan secara automatik anda boleh mencuba langkah-langkah di bawah..

1). Log in Paypal.com, click on Profile.
2). In the Profile page, click on Pay List (Note: not Recurring Payments or Preapproved Payments) option under the Financial Information column.

3). In the resultant Pay List Overview, you get a glimpse of all of preapproved automatic payments under your Paypal accounts and click on the one(s) you intend to disable.

4). In the Billing Details page, click on Cancel beside the Status option

5). When prompted with the Cancel Confirmation dialog box, clickYes

6). Congratulations! You’ve successfully disabled Paypal Auto-payment/Automatic Fees Renewal!

Cara Membuat Kotak Komen Facebook di Blogspot dengan Mudah

Ternyata Membuat Kotak Komen Facebook di Blog sangat Mudah sekali, bagus menggunakan Kotak Komen Facebook di Blog adalah Blog Anda sangat mudah untuk di komen, kerana setiap orang sekarang pasti punya Akaun Facebook. Disamping itu pasti Traffic Blog Anda bertambah tinggi kerana artikel anda diposting oleh pelawat2 anda ke fb masing..minat mencubanya..jom iku langkah-langkah di bawah.

Cara Membuat Kotak Komen Facebook di Blogspot.. ada 2 Langkah :

1. Langkah Pertama :

Buat Aplikasi Dulu di Akun FB Anda, Caranya Klik aja Alamat di bawah ini :
https://developers.facebook.com/apps Setelah itu ikuti Langkah-Langkahnya :

a) Klik Buat Aplikasi Baru nanti akan Muncul Gambar seperti ini :

b) Cara Pengisian :

- Jangan Bingung...Tulis Nama Aplikasi Anda, Bebas Misal : Kotak Komentar FB, Komentarku atau   yang lainnya anda Bebas memilih Nama Aplikasi

- Kolom App Namespace dikosongkan

- Web Hosting Jangan Dicentang

Setelah itu Klik Lanjutkan setelah itu akan Muncul Gambar seperti ini :

Nah itu yang di Tanda Panah Merah adalah No ID Aplikasi FB Anda contohnya kayak gini berupa angka 535275320341467 jangan lupa Di Copy Paste disimpan ke Office Words dulu atau di catat di HP atau di Tangan Anda, kalo perlu di Dahi Anda..wkwkwkwk

Setelah itu anda cukup Memasukkan URL Blog Anda yang akan di pasang Kotak Komentar FB, lihat Tanda Centang Hijau di Gambar di Bawah ini :

Setelah itu Klik Simpan Perubahan,

Selesai Deh Langkah Pertama Cara Membuat Kotak Komentar FB di Blog, 

2) Langkah Kedua :

Jika Sudah Selesai dengan langkah Pertama di atas, Yaitu membuat Aplikasi di FB, maka kita lanjutkan Langkah kedua deh biar cepet jadi Kotak Komentar FB nya :

a) Sign in di Akun Blogger Anda

b) Klik Edit HTML

c) Seperti Biasa Cari Kode berikut ini <b:skin><![CDATA[ Pakai Ctrl + F Broo biar cepet nyarinya, tapi kalo latihan atau Ngetes Mata silahkan aja Broo, wk

d) Lalu Copy Paste Kode dibawah ini, lalu Letakkan di Atas Kode <b:skin><![CDATA[

<meta content='purnomo.cepuk?ref=tn_tnmn' property='fb:admins'/><meta content='259054834222343' property='fb:app_id'/><script src='http://code.jquery.com/jquery-latest.js'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

NB : Jangan Lupa Broo purnomo.cepuk?ref=tn_tnmn diganti dengan Id FB Profil Anda, Caranya Klik Profil FB Anda di Address Bar tertera kayak ini https://www.facebook.com/purnomo.cepuk?ref=tn_tnmn Nah yang diambil purnomo.cepuk?ref=tn_tnmn saja... Dong atau Blong Brooo???

Angka 259054834222343 ganti dengan  No ID Aplikasi FB Anda, Lihat Petunjuk di atas

e) Satu Langkah Lagi, Setelah itu Cari Kode <div class='post-footer-line post-footer-line-3'/> Lalu Copy Paste Kode dibawah ini dan letakkan tepat di bawah kode <div class='post-footer-line post-footer-line-3'/>

<b:if cond='data:blog.pageType == "item"'> <div class='fb-comments' data-num-posts='10' data-width='550' expr:data-href='data:post.url'/> </b:if>

Selamat memcuba..

Sumber Asal

Cara Buat Related Posts Widget Pada Blogspot with Thumbnails (Blogspot | Blogger)

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along withthumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML

Step 2. Click anywhere inside the template's code and press the CTRL + F keys

Step 3. Search for this piece of code by typing it inside the search box:

 </head>

Step 4. Copy and paste the below code just before/above </head>

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the width and height of thumbnails, modify the 100px value in red
- to change the color and size of related posts titles, change the value in blue
- remove the line in violet if you want the related posts to be displayed in homepage too 

Step 5. Now find the following code (you might find it twice, stop at the second one):

 <div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

 <!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0OgkbtIzAVc0LvTR9HQ2-4-ssrTJT4_9L55p_PBMGaTUzxc1O9IDwjI_rGRNejZSfFJKtGr_e3g7TUWyuY1pq00W0D1OTNhZNu9CZgY5BjIWQEavvA8DmQ3DfAlp1Z6CH1MAuQidJMb68/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Note:
- change the 5 value from max-results=5 with the number of posts you want to be displayed
- if you want the related posts to be displayed on homepage too, then remove the lines in violet

Step 7. Save the Template

Enjoy :)

Laporan Asal