Membuat Artikel Terkait di Bawah Postingan Blog Yg Keren

Membuat Artikel Terkait di Bawah Postingan Blog Yg Keren | kita pada kesempatan hari ini akan membahas tutorial tentang Membuat Artikel Terkait di Bawah Postingan Blog Yg Keren, beda pada sebelumnya di dalam artikel yang berjudul Cara Membuat Artikel Terkait di Bawah Postingan Blog karena yang saya akan share lebih bagus demonya seperti dibawah ini

Cara Membuat Contact Form atau Contact us Di Blog

Cara Membuat Contact Form atau Contact us Di Blog | Apa kabar ni sobat semua ? Pada kesempatan ini saya akan membahas dan membagikan tutorial Cara Membuat Contact Form atau Contact us Di Blog , Contact Form atau Contact Me sama aja kegunaannya adalah untuk mempermudah pengunjung untuk menghubungi sang admin bisa untuk memberi saran, kritikan, atau pun untuk meminta menyarankan artikel

5 Template Responsive Untuk Blogger

5 Template Responsive Untuk Blogger | Hai sob.... Hari ini kita akan membahas artikel yang berhubungan tentang Template, dengan judul 5 Template Responsive Untuk Blogger , Saya akan Membagikan Template Template Responsive pilihan saya pastinya keren dan bisa menyesuaikan dengan blog sobat. Template Yang Responsive tentunya bagus untuk sobat karena bisa menyesuaikan dengan tablet, gadget android dan lain lain, kalau sobat ingin melihat bisa melihatnya di bawah ini :

Cara Membuat Menu Navigasi Horizontal Sederhana di Blog

Cara Membuat Menu Navigasi Horizontal Sederhana di Blog | Untuk Kesempatan kali kita akan membahas menu ni sob. pastinya di blog kita memperlukan menu navigasi untuk mempermudah pengunjung untuk mencari konten konten yang lain di blog kita. 

Cara Membuat Daftar isi Akordion Berdasarkan Label

Cara Membuat Daftar isi Akordion Berdasarkan Label | Hai, sob pada kesempatan kali ini kita akan membahas tutorial Cara Membuat Daftar isi Akordion Berdasarkan Label. ini adalah ke tiga kalinya kita membahas tutorial yang berhubungan dengan daftar isi blog / sitemap. pada kesempatan ini kita akan dan mencoba membuat daftar isi blog berdasarkan label.

Cara Membuat Widget Sosial Media + Email Berlangganan di Blog

Cara Membuat Widget Sosial Media + Email Berlangganan di Blog | Pada Kesempatan kali ini kita akan membahas artikel yang berjudul Cara Membuat Widget Sosial Media + Email Berlangganan di Blog. Kegunaan Sosial Media dan Berlangganan email sangat penting untuk sebuah blog. 

Sosial Media sangat untuk pengunjung untuk bisa berhubungan dengan sang admin dan untuk berjalinan persahabatan antara kita pemilik blog dalam dunia internet, Widget Berlangganan email sangat berguna untuk pengunjung yg suka dengan artikel kita dan ingin Mengetahui Artikel terbaru dari blog tersebut dan langsung di kirim menggunakan email.

Untuk itu saya akan membagikan tutorial Cara Membuat Widget Sosial Media + Email Berlangganan di Blog  widget ini akan membuat tampilan blog kita bisa rapi, widget ini akan menghemat tempat kita karena sosial media + berlangganan email dalam satu widget, bagi sobat yg ingin menggunakan widget ini bisa mengikuti tutorialnya seperti di bawah ini :

• Pastinya yang pertama kita harus masuk ke dasbor blogger kita
• Pilih Menu ''Tata Letak'
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript''
• Copy kode di bawah ini dan simpan di kotak yang tersedia

<style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:250px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        background: #EEF9FD;
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTag0eQx7mWUK9z9U32gDWXE0pJtzd8ntocfr4Z6By0cj_7IVXq8Iv4tDdW1XHOLR6Ifv_avHDPt5woPNc0RwtF9_lNrNjHeMp8hQtdv1e589R-kEjkUUmDA4hLXAF4BZkagQWodxOx-0/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzE_Gai5nRsbY3PcHzas2BRU6wz233VXrxoyCv53yXPlxy-7kwcbF_awNj877hmOhGdyGMiTVQUbzbGPoSX1YU58p6s8t3ltxP6jGdN67ht2eIUWuyW9QJKA_mo3azB6AyPEgYoR63lwQ/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjI03Zngdw4dxalh3TBQjbMBIzaUMFC0OrUNPK3LS0cew4n4FKXiipAjfhAi1tSvgWYIAiWuJ8dLpkZ03JHJOlUb1x5cgMVb5xpNiQ0NcQQ6ZQ41PUwykf6wj_ljt7ZJWXaPHyeYWtZoY/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </style>

    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" >

<!-- Google Plus-->
<div class="gplus"> <link href="http://plus.google.com/108021608037797119476" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="http://plus.google.com/108021608037797119476" width="250" height="69" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox">

<!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F/Masukan id facebook kalian&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=179027942166719" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe> </div>

<div class="googleplus">

<!-- Google --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter">

<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=/Masukan id twittter kalian&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

<div id="email-news-subscribe">

<!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Masukan id feedburner kalian', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 100px; font-size: 12px;" id="email" name="email" value="Masukan Email Anda" onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar">

<!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/Masukan id feedburner kalian" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/Masukan id twittter kalian  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/108021608037797119476" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.way2blogging.org/" target="_blank" > Get This Blogger Widget »</a></span></div></div> <!-- End Widget --> </div>

<!--end of social widget-->

• Ubah tulisan warna kuning dengan id facebook kalian
• Ubah tulisan warna Merah dengan id google plus kalian
• Ubah tulisan warna Biru dengan id twitter kalian
• Ubah tulisan warna Orange dengan id feedburner kalian

Dan Demikianlah artikel yang berjudul Cara Membuat Widget Sosial Media + Email Berlangganan di Blog

Cara Membuat Blockquote Keren Di Blog

Cara Membuat Blockquote Keren Di Blog | Hai sob...... Pada kesempatan kali ini kita akan memahas tutorial kali ini berbeda pada sebelumnya. kita akan memasang Cara Membuat Blockquote Keren Di Blog. pastinya kalian tahukan blockquote itu apa ? blockquote atau quote berguna untuk memasukkan kode kode html, atau untuk kata kata kutipan dan masih banyak yg lain untuk kegunaan yg lain.

Biasanya kalau blockquote biasanyakan nggak ada istimewanya dan terlalu standar. untuk itu saya akan beberapa blockquote yang mantap ni hehehe.pastinya gampang untuk diterapin seperti di bawah ini :

Blockquote Dengan Border dan Gambar Burung Hantu

Kode Blockquote adalah :

blockquote { 

margin : 0 20px; 

padding: 60px 30px 40px 20px; 

background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygqK5d7IySNoMCumzfgAVi2PwKfSm1uuSjUL-74taYJdpwofI5HGGvqHavQ3q8CJag8h6m40nYiDvUYXnOB2uXMkqLr8JOw-eANBa7RTpvvP7jQLFs3g9-JQrEhrhq2x0s8cmogJpobk/s400/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; 

} 

blockquote p { 

margin: 0; 

padding-top:10px; 

} 

Blockquote dengan label di pojok kanan kiri atas dan border di bawah dengan warna ungu :

Kode Blockquote adalah :

.post blockquote { 
margin : 0 20px; 
padding: 70px 20px 20px 40px; 
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaUxMbHNnYNAB5irJaYmJN72SC-3_WR5D6NmJPBs7x-LI6ZtHCWo-ojPVHVWjkMv3ONhlRwxa2scNTN0GaXJCA_Bb3LHFLYXARPOm_Rs3yN2XbxNtpj0hRGUVwKC7b5xBQBQVyohBvjk/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; 
}

Jigsaw (seperti gergaji ukir) Blockquote Dengan tulisan copyrighted coding Pada Pojok Kanan bawah:

Kode Blockquote adalah :

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzre6hSghSB8INF04XmAkZ0ZTYj2MQmWb8neNBRz4ls4Bn8j8h38HRps77bPsW-7ligdglua6XpVNkW66MHwCG7YCUd3YH06IAHoYinvUCww2WzNOZ89MgYa-cM8WXA2rdCG7TuMVUEk/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 dengan border klasik border si samping kiri

Kode Blockquote adalah :

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYrd6vkd75jG6GJrYxRnoXovwTGaJxQq7Z2lnPkTQ6kX1q619CLWXOVWrh8erWUVtvtNdOYJYGXMSnNQfK5qcbk0ejbYhyrUsZdcy87jQHoYFyL5pb-ZzjqGBy_CnHcG_avlJmZ8z2Uo/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Blockquote yang lainnya :

Kode Blockquote adalah :

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEZ8wIA54kDd5J0TItHohXupC3dk8nec6yWbf1WXvHMOTr9QXksBa84G4kufyqfy3EVb506FWtK5GhYjcIKEwQZjUAt-oLDtSkX2IybOEzx5ENHyy1ipH-cUOukP99B8yFzj5S7pqbyY/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 dengan kode terbaik 

Kode Blockquote adalah :

.post blockquote { 
  font: 18px normal Tahoma, sans-serif; 
  padding-top: 10px; 
  margin: 5px; 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir01ccmQ6jAX3uKdiNLIv130B-V2IyNAcm9j2P9jY4_QdsHozBpujEgim3k09g2HW16YHcMwS_T2_SYwwborK-kR-En2CP0TQxeb_4gVqZVMjfFs0OoyPI3_RXN0hIgMY_z7Oqm7tG3dU/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/AVvXsEhWCiHgAvJ4ay1OWKZg_mOj5iWDYhrRuJNbMhhZOrspCML4umk7FiJTgYCZjlcagVYnyy9tq1BUUjbPD_vQsxF92SnchZu-Brm4Bw6lSQ1SD-vYkqfm_p2Q8wR0s9K665JlCPEHhdT0h08/s400/comma-right.gif) no-repeat bottom right; 
padding-bottom:10px; 
} 
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

 Blockquote dengan lima jari tangan :

Kode Blockquote adalah :

.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/AVvXsEg75Uvno_93isVeUoPDa-UG9z8Jk3n0KwKtwEFYYMGHg26YG1a8Y84IOj-W4iWH4T3YMK642i2o5AEJz26KzvSz2mC95Qloz0IRl55_OfKPU3m4wk0Lhr75ykYHlFxRCC8hTUQg5XWdLVY/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/AVvXsEiOjZ34swuyBMhaLB1WVrIPS1pwYf8TafuvvKAPRAyhWdNHdfkedlqc99sW-_jGR-yyZ32CgdFxBIB_6Xp4gwyB409bgpvJUmUoCE8DQXDRrGkZfvuQmNuJlkPk5wVt3nPQvia0QmwcmS8/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p { 
margin: 0;
padding-top:10px;
}  

Blockquote dengan gambar copyrighted coding diatas

Kode Blockquote adalah :

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBd3dLTNLCruQrdzB0PihHl0u8jTq_UWNKxI9Nv36gDdDx4YyxCNrysN3jGqXhIHF43M8iFDcpelVMJn59ER2CI7Rm6SdV3sqhErlRoVnM_G8rKp9npO5DLVryD1LEWvykL0Iq4oKEnrQ/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 dengan gambar tirai di atas dan di bawah

Kode Blockquote adalah :

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7o-Z2D2xjurXXPvEcuSSdx6xovyWKIaRqPkspUv79zAJbvc6LNVUxdyF-Wgm16wBLG433Xd3yWZcqERqF_iTilrxcnr7xgn4iQNX1OZHIHF4nPHoRXIGzaMmNdPa7F2qsfIj6U95CeI8/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/AVvXsEik7DHGaQuPMGl8HqtDrdlvqpm2Oa8OP2UVvYWPp7abQywg3WWK43mVhXcNgY0C0o8nmrvj6XxVerRkDa__IhY65PjgScLJV2PZCahyphenhyphen2LD3-S-OheomG0cWZ_nCV6hS10fxleY9gaa45jE/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
} 

Blockquote dengan kotak di keliling dengan border

Kode Blockquote adalah :

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlIE5k5P_KLwLmlLgruMJmebZkwKmTJOZUojlHd87AAGQEqBkpt5k7daZK89ArG6WuqYn7QQUAi5QPSbHyxVh1tl0dk2rYOCb7QAC2VaPdloOAQou_dz-JQDW1iZ8bb0junvzPcNwZ0w/s400/block3331.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; }

The Monkey Man Blockquote  

Kode Blockquote adalah :

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVWuaw1u7e2us05xwsvvGNlivuQnn908VKZoK0M0twtf9iu50VSVCU477QC87220eC3bPVfjJ_tPec88rh8h0Oc_2e3mbzF1j5EIbxkYBmbAqJmzc_IOXsuK_-_zKDDLyDSRb8Qkbwttk/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ZceplghGO1gNRI8NFgNwK42PyLv9LvdBLBDSDeXXyLxTq0Q2dnZ13UeqoO7TbfpsEytQzl4NQZQT4l4oWGuFOrdlL5q3o2-SGuRFMDm6m49QqAeMm8rDe2SWPwTMh07brmenLXBRM1o/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

--------------------------------------------------------------------------------------------

Cara Memasang kode blockquote di dalam blog :

• Masuk ke blog kalian
• Klik menu ''Template''
• Pilih ''Edit HTML''
• Cari kode ]]></bskin> , Gunakan tombol (CTRL+F ) untuk mempermudah pencarian
• Setelah ketemu taruhlah salah kode di atas yg sudah di pilih dan taruhlah di atas kode ]]></bskin>
• Simpan Template

-----------------------------------------------------------------------------------------

Cara Menerapkan di dalam artikel :

• Klik ''Entri Baru''
• blok kode atau kutipan yang ingin di blockquote dan klik quote yang bergambar seperti kutip 

Dan Demikianlah Artiel tentang Cara Membuat Blockquote Keren Di Blog semoga bermanfaat. bagi kalian semua. kasih pendapat tentang blockquote cantik di atas, dengan berkomentar di kolom di bawah ini !

Keep Blogging