Cara Ganti Blockquote Modifikasi di Blogger

Di dalam posting blogger pada menu ada tombol seperti di atas. Tombol tersebut adalah menu untuk membuat blockquote. Apasih blockquote itu? ...

blockquote
Di dalam posting blogger pada menu ada tombol seperti di atas. Tombol tersebut adalah menu untuk membuat blockquote. Apasih blockquote itu? Menurut sejuta trik blogger blockquote berarti petikan posting. Blockquote memperjelas apa yang kita posting di blogspot. Misalnya kita memposting beberapa sub judul. Dalam sub judul itu kita dapat memperjelas dengan petikan posting yang kita sebut sebagai blockquote. Mari kita bahas cara ganti blockquote modifikasi di blogger

Secara default atau bawaan, blockquote di tunjukkan kurang lebih seperti ini

blockquote
Dari gambar di atas, kode dalam membuat blockquote bawaan kurang lebih adalah di bawah ini

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

.......

Dan pada saat posting (Posisi Edit HTML) adalah
<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>

Jika sahabat tidak suka dengan blockquote bawaan blogger dan ingin merubah blockquote bawaan blogspot dengan style modifikasi berikut ini caranya
1. Login di blogspot
Blogger Login
2. Sahabat akan di bawa ke dashboard.
Blogger Dasboard

3. Klik Menu Design seperti gambar di bawah ini :
Dasbor Blogger design
4. Klik Template
Blogger Login
5. Backup dulu template sobat dengan klik tombol seperti di bawah ini
Blogger Backup and restore
6. Klik edit HTML
Blogger Edit Html
7. Klik Proceed


8. Centang  Expand Widget Template


9. Cari kode blockquote seperti ini  (Biasanya 2 baris) :
.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}


.......

10. Hapus semua kode tersebut dan ganti dengan pilihan kode berikut :

a. Blockquote dengan background kertas bergaris

.post blockquote {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLek8rkU11LkgrJ5Xs0JaxEHC-1o6KxI7KOfHcyLV1-Sp77EK2VgLBixWzw2JDk1zww0T2nLq1ZcmLClH29PpqZNakYUZomSqOLwhzQUHQvLz3cS0TYxaj495Yeby2bwOEIfgglt_dRo/s1600/notebook-with-numbers.gif) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
.post blockquote p {
margin: 0;
}

Ket : ubah kode yang ditandai dengan warna-warni di atas sesuai selera sobat.  Untuk ganti background gambar, Tinggal klik kanan dan klik simpan lokasi gambar. Dan berikut pilihan backgroundnya  :

blockquote
blockquote
blockquote
blockquote
blockquote


b. Blockquote efek timbul dan shadow
.post blockquote {
    border:5px #dcdcdc solid;
    background:#f6f6f6 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 0px 0px no-repeat;
    padding:7px;
    padding-left:65px;
    margin:20px 0;
    }

    blockquote:hover {
    border:5px #f2f2f2 outset;
    color:#000
    background:#f2f2f2 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 10px 15px no-repeat;
    -moz-box-shadow: 0 0 40px #B0C4DE;-webkit-box-shadow: 0 0 40px #B0C4DE;box-shadow: 0 0 40px #B0C4DE;
    color:#000;
    }

    .post blockquote p {
    margin: 0;
    padding-top:10px;
    }

c. Blockquote dengan scrool

Untuk blogquote dengan scrool, cara pembuatannya adalah manual seperti membuat text area. Yaitu dengan kode berikut ini pada posisi Edit HTML saat posting.

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>


Keterangan :
Image by : Drupal.org
Trick by  : My Blogger Trick

Saya lebih suka Cara Ganti Blockquote Modifikasi di Blogger untuk menampilkan kode html dengan blockquote dari pada dengan text area. Mohon maaf tidak disertai dengan demo nyata. So, silakan tentukan pilihan sobat.


Happy Blogging!
by. Sejuta Trik Blogger
Thanks for reading ! 




Name

About US,1,activate,1,ADDMEFAST,1,AdLinkFly,1,Adobe Illustrator,1,Adsense,17,ANALISA WEB,1,android,39,anonymous-surfing,1,Aplikasi,40,Artikel,11,Backlink,7,Backlinks,20,Backup,1,BBM,5,beginners,1,Best 140+ Do-follow Web 2.0,1,Best 59+ Free Ping Submission Sites For Faster Indexing,1,Best High DA Dofollow Blog Commenting,1,BIN,1,Blog,27,Blog Design,2,Blogger,1,Blogspot,3,Bounce Rate,1,Canva pro,1,CDN,1,Chrome,1,Copy Artikel,1,cPanel,1,crack,2,darknet,1,darkweb,1,Desain,1,DevTools,1,DIGITAL MARKETING,1,Disposable E-mail Free,1,Disqus,1,domain,1,download,2,DropMyLink,1,Dunia Kampus,1,e-books,1,EDU BACKLINKS,5,Envato Elements,1,Express Vpn Premium Account,1,FAQ SCHEME PAGE,1,Followers,1,Footer,1,free,1,Free Courses,2,Free Credits,1,Free Image Submission Sites,1,free methods,1,Free Profile Creations Sites List 2020-2021,1,Free RDP,1,Free Video Submission Sites List 2020-2021,1,freelancing,1,Gadget,7,giveaway,1,Gmail,2,Google,3,GOOGLE ADS,1,Google Adsense,2,GOOGLE ANALYTICS,1,Google Dork,1,google drive,2,Google My Business Customer Reviews,1,GOOGLE SEARCH ENGINE,1,GoogleNews,1,Grammarly Premium Cookies,1,guide,2,Guides,1,Header,3,High Authority Blog Submission Sites List,1,High DA/PA PPT Submission Sites List 2020-2021 for SEO,1,hosting,1,Hotstar Premium,1,How To,1,How to Activate,3,HTML,5,IDM,1,Info Blog,11,Info Google,13,Inspirasi,5,Instagram,4,internet,1,Jejaring Sosial,12,JNews,1,JSON-LD,1,Kapita Selekta,3,Komentar,8,Komputer,11,Kurikulum 2013,2,Label,3,learning,1,LINE,3,Link,14,LINK BUILDING,1,Lynda,1,Lynda.com,1,Majalah Wanita Online,1,MENINGKATKAN SEO WORDPRESS,1,Menu,2,MICRODATA SEO,1,MultCloud,1,multi cloud management,1,MyThemeShop,1,Netflix Accounts,1,News,38,newsmag,1,newspaper,1,Noor theme,1,Nord Vpn Premium Account In April 2020,1,NORD VPN PREMIUM ACCOUNTS,1,On Page SEO,8,online shop,1,Opini,10,OVHcloud,1,Page Speed,1,Pagerank,8,PDF Submission,3,PDF Submission Sites,1,Pembelajaran,4,Pixelyoursite,1,plugin,1,plugins,2,post views,1,Posting,10,Premium cookies,1,Privacy Policy,1,Produk,1,proxy,1,PVANISH PREMIUM ACCOUNT,1,reset-password,1,Review,52,RSS,1,RSS Feed Submission Sites List 2020-2021,1,Schema,1,Search Engine,4,SEARCH QUALITY RATERS,1,Secret Hacks,1,SEF,8,seo,98,SEO Tools,3,SEO WORDPRESS,1,Settings,1,Shopify,1,Shopping,1,Shortcode,1,Sidebar,2,social media,14,SoundCloud,1,Spam,1,Spotify,1,Spotify Premium Accounts,1,STM Forum,1,Submission,1,tagdiv,1,Template,9,themes,2,Tips,3,Tips & Tricks,17,TIPS DAN TRIK,2,tips-tricks,4,Tokoh,1,Tools,10,Tricks,9,Trik,1,umum,1,VPS,1,Web 2.O Sites List 2020,1,Web Hosting,2,Webmaster Tools,6,Website,3,WhatsApp,16,Widget,10,windows,1,Windows 11,1,wordpress,23,WORDPRESS & WOOCOMMERCE TUTORIALS,1,WP Rocket,1,youtube,18,YouTube 2021,1,
ltr
item
Trik.My.ID - Trik dan Tips Untuk Semuanya: Cara Ganti Blockquote Modifikasi di Blogger
Cara Ganti Blockquote Modifikasi di Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRfnyj6r31ferCHgJL69l4OisxO4p1yaVJVjCxbyu1xbSTMi5wNp7KRw7wVxAzQj4XTyCikMPYwtUIMntvO2l3PtEipH47E4NnV9u8Zy_SHCKNDUceNMJPnu_lzWldv0PzUEc524SA2Y/s200/blockquote.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRfnyj6r31ferCHgJL69l4OisxO4p1yaVJVjCxbyu1xbSTMi5wNp7KRw7wVxAzQj4XTyCikMPYwtUIMntvO2l3PtEipH47E4NnV9u8Zy_SHCKNDUceNMJPnu_lzWldv0PzUEc524SA2Y/s72-c/blockquote.png
Trik.My.ID - Trik dan Tips Untuk Semuanya
https://www.trik.my.id/2011/10/cara-ganti-blockquote-modifikasi-di.html
https://www.trik.my.id/
https://www.trik.my.id/
https://www.trik.my.id/2011/10/cara-ganti-blockquote-modifikasi-di.html
true
3610684226484108978
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content