tag:blogger.com,1999:blog-5214542765090985775Sat, 26 Sep 2026 14:11:10 +0000Desain ArtikelDesain BlogSEOgerry.idhttps://blog.gerry.id/noreply@blogger.com (Gerry Atje)Blogger7125tag:blogger.com,1999:blog-5214542765090985775.post-600762505306165226Sat, 23 May 2020 05:44:00 +00002020-12-15T02:22:03.177-08:00Desain Artikel<div class='thumbnail'> <img alt='menyembunyikan gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWkotzsdNLFOscmUlMSGWGLcZnbKhsDv8Hmht48RlpxtKcxTwBXKp1N5uDPNO8CHG9iLPCLFLF3lztPCr_R2B3_QVZYi6etdSP0-mFKRb_eFKfcT8qAzsvnSmqYIRoPngOi_uwo7Bi-o/s1600/menyembunyikan+gambar+thumbnail+di+postingan+blog.png'/> </div> <!-- blog.gerry - display (bawah judul) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="1952326443" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br> <a href="https://blog.gerry.id/2020/05/menyembunyikan-gambar-thumbnail-di-postingan-blog.html">Cara Menyembunyikan Gambar Thumbnail di Postingan Blog</a> — Penggunaan <a href="https://id.wikipedia.org/wiki/Sketsa_(gambar)" target="_blank">gambar</a> di postingan blog memang adalah sesuatu yang penting. Melalui gambar yang kita gunakan dalam artikel blog, kita pun bisa mendapatkan traffic pengunjung melalui <a href="https://support.google.com/websearch/answer/1325808?co=GENIE.Platform%3DAndroid&amp;hl=id" target="_blank">penelusuran gambar</a> di google.<a name='more'></a> <br /> <br /> Namun, adakalanya penggunaan gambar pada postingan blog justru dirasakan malah mengganggu pembaca blog kita. Dilemanya, jika kita tidak menggunakan gambar sama sekali, maka tampilan homepage blog kita akan menjadi jelek karena ketiadaan gambar yang bisa dilihat di homepage. Biasanya, gambar yang pertama kali kita posting di blog akan menjadi gambar yang dilihat pengunjung blog ketika mereka ada di homepage. <br /> <br /> Jika kamu memiliki kebingungan dilema yang sama, maka artikel ini menjadi jawaban dari permasalahan itu. <br /> <br /> Bagaimana cara membuat tampilan homepage kita tetap memiliki gambar sedangkan di dalam postingan artikel yang kita buat, gambar tersebut tidak muncul? Dengan menggunakan <a href="https://en.wikipedia.org/wiki/Thumbnail" target="_blank">thumbnail</a> gambar. <br /> <h2>Agar Gambar Thumbnail Hanya Tampil di Homepage</h2> <b>1.</b> Masuk ke blogger.com<br/> <b>2.</b> Pilih Template/Tema<br/> <b>3.</b> Edit HTML<br/> <b>4.</b> Cari kode <span class='code'>&lt;/head&gt;</span> atau <span class='code'>&amp;lt;/head&amp;gt;&amp;lt;!--&lt;head/&gt;--&amp;gt;</span><br/> <b>5.</b> Paste kode dibawah ini tepat di atas <span class='code'>&lt;/head&gt;</span> atau <span class='code'>&amp;lt;/head&amp;gt;&amp;lt;!--&lt;head/&gt;--&amp;gt;</span> <br/> <pre><code>&lt;!-- Menyembunyikan Thumbnail --&gt; <i>// Gunakan penanda agar mudah ditemukan kembali</i> &lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt; &lt;style type=&#039;text/css&#039;&gt; <span>.thumbnail {display:none}</span> &lt;/style&gt; &lt;/b:if&gt;</code></pre> <b>6.</b> Simpan template. <br/> <br/> <!-- blog.gerry - display (tengah) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="7771914434" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br/><h2>Agar Thumbnail Gambar Tidak Tampil dalam Postingan</h2> <b>1.</b> Upload gambar seperti biasa ke dalam postingan blog.<br/> <b>2.</b> Lihat ke dalam mode penulisan HTML (edit HTML) akan muncul kode gambar seperti dibawah ini: <pre><code>&lt;div class=&quot;<span class='block'>separator</span>&quot; style=&quot;clear: both; text-align: center;&quot;&gt; &lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png&quot; data-original-width=&quot;250&quot; data-original-height=&quot;150&quot; /&gt;&lt;/a&gt; &lt;/div&gt;</code></pre> <b>3.</b> Ganti "separator" menjadi "thumbnail", hingga menjadi seperti ini. <pre><code>&lt;div class=&quot;<span class='block'>thumbnail</span>&quot; style=&quot;clear: both; text-align: center;&quot;&gt; &lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZXsWvtKpEIY3fs6_piVRFuI9GQxR_fiMSzz2JgWvNfW_Hju64EhbPUG_NqdbC8TD7bFEaXQtpLbGf2sc7kQo2kDmdkt1EagP_Y0CAMzis8hHze3jgurI8v1RYdAUT_3hXVioFSWNjxM/s1600/menyembunyikan+gambar+thumbnail+di+blog.png&quot; data-original-width=&quot;250&quot; data-original-height=&quot;150&quot; /&gt;&lt;/a&gt; &lt;/div&gt;</code></pre> <br/> <h2>Contoh Penerapan</h2> Hasil penerapannya bisa dilihat dalam gambar pada homepage berikut ini: <br/> <br/> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcYdEln8HXAIOl93VsL4kqA10DZGmzCwZL7f8pMQJ5CQSDQVqKHJm5pVqcqaxJ6Jd5DwqPDsL3R_kQiUWhRqUX1DNn-u9K-FxgQXGM3KAL4AkKPv-e1ZG0wt7JmXvGk9uIjlnPcIH6LA/s1600/hasil+thumbnail+di+homepage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcYdEln8HXAIOl93VsL4kqA10DZGmzCwZL7f8pMQJ5CQSDQVqKHJm5pVqcqaxJ6Jd5DwqPDsL3R_kQiUWhRqUX1DNn-u9K-FxgQXGM3KAL4AkKPv-e1ZG0wt7JmXvGk9uIjlnPcIH6LA/s1600/hasil+thumbnail+di+homepage.png" data-original-width="699" data-original-height="179" /></a></div> <br/> Pada homepage, masih bisa dilihat gambar yang saya gunakan, yaitu gambar mata dengan garis silang itu. Akan tetapi pada postingan di sini tidak ada gambar tersebut. <br/> <br/> Selamat mencoba. <br> <br> <!-- blog.gerry - display (terbawah) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="9436064791" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>https://blog.gerry.id/2020/05/menyembunyikan-gambar-thumbnail-di-postingan-blog.htmlnoreply@blogger.com (Gerry Atje)2tag:blogger.com,1999:blog-5214542765090985775.post-3320978331452233513Wed, 13 May 2020 01:18:00 +00002020-12-14T07:55:03.077-08:00Desain Blog<div class="separator" style="text-align: center;"> <img alt="Template Kosong" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTkylAfmyU3cYcpIkIQSYfRg9CISZGBxmCMm0rx9T3wi7ftd5DjsSyX9X5B3_cOXAdSSuRuVo2SSanexahMDFhm2mK0r0ci6GoejT29pZrwOphoxDxAHqf2DB1AeRHiOTYsKHL6pJ8u8/s1600/Template+Kosong.png" title="Template Kosong" /></div> <br /> Cara Membuat Template Kosong Blogger — Blank template atau template yang masih kosong sangat berguna bila kamu berencana mengganti template blog yang lama menjadi template blog baru yang mau kamu gunakan. <br/> <br/> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Ini Contoh Template Kosong&lt;/title&gt; &lt;b:skin&gt; &lt;![CDATA[ /****KODE CSS DI SINI*****/ ]]&gt; &lt;/b:skin&gt; &lt;/head&gt; &lt;body&gt; &lt;b:section id=&quot;aloha&quot; class=&quot;aloha&quot;&gt;&lt;/b:section&gt; &lt;p&gt;Template Kosong adalah Seperti Ini&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <br/> Selamat mencoba.https://blog.gerry.id/2020/05/template-kosong-blogger.htmlnoreply@blogger.com (Gerry Atje)2tag:blogger.com,1999:blog-5214542765090985775.post-5316944130589492373Wed, 08 Apr 2020 04:11:00 +00002021-01-11T01:55:08.963-08:00SEO<div class="thumbnail"> <img alt="Data Statistik untuk SEO" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ohMdcq5gzRR43h81YYyykyMk9-R79GCg_3tkAZlS6qo2dqzkfu5pG21OCzNkPsFG2oZDOaUSSb5NIfZUKat0SQSw7nNtS_lSOzvXcbA2IYqHsqpoDcuY_1ssuwc-02shqGQn78rrjRQ/s0/statistik+penelitian+tentang+seo.jpg" /> </div> <!-- Blog - Display (Judul) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="1952326443" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br/> <a name='more'></a> <a href="#">Data Statistik untuk SEO</a> — Dalam semua penulisan artikel tentang apapun, keberadaan data statistik dari sumber yang terpercaya menjadi nilai tambah dalam artikel tersebut. <br> <br> Terutama bagi pembaca, agar pembaca tahu bahwa kita tidak asal ngomong. <br /> <br /> Tidak terkecuali ketika kita mau menulis tentang tutorial blog. Perlu data penunjang. <br /> <br /> Berikut ini adalah catatan tentang data statistik yang bisa digunakan untuk membuka pikiran pembaca artikel kamu. <br /> <br /> <h2>Keyword</h2> 8% of search queries are phrased as questions.<br /> https://moz.com/blog/state-of-searcher-behavior-revealed <br /> <br> 50% of search queries are four words or longer<br /> https://profoundstrategy.com/blog/long-tail-keywords <br /> <br> Despite Google’s many Penguin updates, exact match anchor text appears to have a strong influence on rankings. Using An (Exact) Keyword in Your Page’s Title Tag Has a Small Correlation With Rankings<br /> https://backlinko.com/search-engine-ranking <h2>Search Engine</h2> There are over 75,000 searches happening on Google every second<br /> https://www.internetlivestats.com/one-second/#google-band <br> <br> 93% of online experiences begin with a search engine <br /> https://www.imforza.com/blog/8-seo-stats-that-are-hard-to-ignore/ <br> <br /> Search is the #1 driver of traffic to content sites, beating social media by more than 300%<br /> https://www.imforza.com/blog/8-seo-stats-that-are-hard-to-ignore/ <br> <br /> 90.63% of Content Gets No Traffic From Google.<br /> https://ahrefs.com/blog/search-traffic-study/ <br /> <br> HTTPS is Moderately Correlated with Higher Rankings<br /> https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html <h2>SERPs</h2> The average Google first page result contains 1,890 words.<br> https://backlinko.com/search-engine-ranking <br> <br> The average content length of the top position Google article contains 2,416 words.<br> https://www.sweor.com/seocontentlength <br> <br> 75% of users never scroll past the first page of search results<br> https://www.imforza.com/blog/8-seo-stats-that-are-hard-to-ignore/ <br> <br> For Google, 18% of organic clicks go to the #1 position, 10% of organic clicks go to the #2 position and 7% of organic clicks go to the #3 position<br> https://www.imforza.com/blog/8-seo-stats-that-are-hard-to-ignore/ <br> <br> The first 5 organic results in the SERPs account for 67.6% of all clicks<br> https://www.zerolimitweb.com/organic-vs-ppc-2019-ctr-results-best-practices/ <br> <br> 75% of searchers never go past the first page of search results<br> https://blog.hubspot.com/insiders/inbound-marketing-stats <h2>Page Speed</h2> The average Google search session lasts just under a minute.<br> https://moz.com/blog/state-of-searcher-behavior-revealed <br> <br> pages on fast-loading sites rank significantly higher than pages on slow-loading sites<br> https://backlinko.com/search-engine-ranking <h2>Mobile Friendly</h2> 52% of all worldwide online traffic comes from mobile, 45% from desktop<br> https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide <br> <br> The first organic listing on mobile receives 27.7% of clicks, versus 19.3% of clicks on desktop<br> https://www.seoclarity.net/mobile-desktop-ctr-study-11302/ <br> <br> 87% of smartphone owners use a search engine daily<br> https://www.go-globe.hk/local-seo/ <h2>Web Design</h2> Only 1% of people actually click on a slider, which almost always was the first slide;<br> https://yoast.com/opinion-on-sliders/ <br> <br> Images are returned for 22.6% of search queries on Google.<br> https://moz.com/mozcast/features <h2>Artikel Web</h2> Title tags are the second most important on-page factor for SEO, after content.<br> https://moz.com/learn/seo/on-page-factors <br> <br> Updating and republishing old blog posts with new content and images can increase organic traffic by as much as 106%.<br> https://blog.hubspot.com/marketing/historical-blog-seo-conversion-optimization <br> <br> 36% of SEO experts think the headline/title tag is the most important SEO element.<br> https://databox.com/blog-seo-tips <br> <br> Long-tail keyword searches have a click-through rate 3% to 5% higher than generic searches.<br> https://www.smartinsights.com/search-engine-optimisation-seo/seo-analytics/comparison-of-google-clickthrough-rates-by-position/ <br> <br> A blog post should have 2-5 internal links<br> https://databox.com/seo-statistics <br> <br> Videos help you to get 157% more organic traffic from search engines<br> https://www.brightcove.com/en/blog/2015/08/create-compelling-video-experiences <br> <br> Shorter URLs Tend to Rank Better than Long URLs<br> https://backlinko.com/search-engine-ranking <br> <br> Low Bounce Rates Are Strongly Associated With Higher Google Rankings<br> https://backlinko.com/search-engine-rankinghttps://blog.gerry.id/2020/04/statistik-seo.htmlnoreply@blogger.com (Gerry Atje)1tag:blogger.com,1999:blog-5214542765090985775.post-4655319250049945522Tue, 07 Apr 2020 22:28:00 +00002020-05-22T23:49:52.934-07:00Desain Artikel<a href="https://blog.gerry.id/2020/04/membuat-catatan-kaki-di-blog.html">Cara Termudah Membuat Catatan Kaki di Blog</a> — Kamus Besar Bahasa Indonesia mendefinisikan <a href="https://kbbi.kata.web.id/catatan-kaki/" target="_blank">catatan kaki</a> atau footnote sebagai keterangan yang dicantumkan pada margin bawah pada halaman buku (biasanya dicetak dengan huruf yang lebih kecil daripada huruf di dalam teks guna menambahkan rujukan uraian di dalam naskah pokok).<a name='more'></a> <div class='thumbnail'> <img alt='catatan kaki footnote di blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxq5EHP1cQDXMk6u-w8CRUuK38JZgXmHZBgDX522HrR9zGRqGcSIiC-bw8RG0mOfhtTqfiCDmDMCZB79cpISp0ePzR7qtX05LT6DPwxHHYmhT-LSzw13hM2gIZ5j96UllajtyL31rSDtF/s1600/membuat+footnote.png'/> </div> <br /> <br /> Membuat artikel di blog seringkali membutuhkan catatan kaki untuk menunjukkan sumber tulisan ataukah hanya untuk memberi tambahan penjelasan tentang apa yang ditulis. <br /> <br /> Berikut ini adalah cara termudah membuat catatan kaki di blog yang saya temukan di situs abuafifa.blogspot.com <br /> <br /> <b>Kode Untuk Angka Catatan Kaki di Paragraf</b> <br/> <pre><code>&lt;a href=&quot;#X&quot; id=&quot;refX&quot;&gt;&lt;sup&gt;[1]&lt;/sup&gt;&lt;/a&gt; &lt;a href=&quot;#X2&quot; id=&quot;refX2&quot;&gt;&lt;sup&gt;[2]&lt;/sup&gt;&lt;/a&gt; &lt;a href=&quot;#X3&quot; id=&quot;refX3&quot;&gt;&lt;sup&gt;[3]&lt;/sup&gt;&lt;/a&gt;</code></pre> <br/> <b>Kode Untuk Angka dan Keterangan Catatan Kaki di Daftar Pustaka</b> <br/> <pre><code>Daftar Pustaka &lt;sup&gt;&lt;a href=&quot;#refX&quot; id=&quot;X&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Contoh Catatan Kaki satu &lt;sup&gt;&lt;a href=&quot;#refX2&quot; id=&quot;X2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Contoh Catatan Kaki dua &lt;sup&gt;&lt;a href=&quot;#refX3&quot; id=&quot;X3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt; Contoh Catatan Kaki tiga</code></pre> <br/> <br/> Untuk bisa memahami contoh langsungnya, silahkan dilihat dalam penerapan pada beberapa paragraf di bawah ini. <br/><br/> <!-- blog.gerry - display (tengah) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="7771914434" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br/> <h4> Contoh Catatan Kaki di Paragraf Artikel</h4> Etiam <a href="#X" id="refX">^[1]</a> lacinia id diam ut ultrices. Curabitur turpis augue, cursus id ante id, interdum hendrerit leo. Duis iaculis varius dolor, eget posuere tortor elementum sed. Ut faucibus eget velit vel laoreet. Nullam eu sem molestie, volutpat purus in, condimentum augue. Cras posuere faucibus urna eget facilisis. Duis ut lacus orci. Quisque vitae facilisis mauris.<a href="#X2" id="refX2">^[2]</a> <br /> <br /> Lorem ipsum dolor sit amet, consectetur <a href="#X3" id="refX3">^[3]</a> adipiscing elit. Praesent velit nisl, vulputate eget fermentum nec, feugiat eu erat. Quisque bibendum diam vitae odio iaculis vestibulum. Duis tincidunt eleifend vehicula. Maecenas sed est augue. Fusce nec lorem non turpis semper posuere. Sed congue urna sit amet sapien suscipit iaculis. <br/> <br/> Daftar Pustaka:<br /> ^{<a href="#refX" id="X">[1]</a>} Contoh Catatan Kaki satu <br /> ^{<a href="#refX2" id="X2">[2]</a>} Contoh Catatan Kaki dua <br /> ^{<a href="#refX3" id="X3">[3]</a>} Contoh Catatan Kaki tigahttps://blog.gerry.id/2020/04/membuat-catatan-kaki-di-blog.htmlnoreply@blogger.com (Gerry Atje)1tag:blogger.com,1999:blog-5214542765090985775.post-7591953551719627580Tue, 31 Mar 2020 10:37:00 +00002020-05-20T02:54:53.080-07:00Desain Artikel<a href="https://www.blogger.com/2020/03/membuat-daftar-isi-postingan-blog.html">Cara Paling Mudah Membuat Daftar Isi Postingan di Blog</a> — Membuat daftar isi dalam sebuah postingan blog sangat penting jika kamu menuliskan artikel yang panjang dan lama. <a name='more'></a> <br /> <br/> Biasanya artikel blog yang ditulis lebih dari 1000 kata membutuhkan tabel daftar isi untuk memandu pembaca untuk mengetahui gambaran seluruh isi artikel sejak awal ia membaca postingan tersebut. <br /> <br /> Dalam satu penelitian, Brian Dean, salah satu pakar SEO pemilik situs <a href="https://backlinko.com/search-engine-ranking" target="_blank">Backlinko</a> menyebutkan bahwa rataan artikel yang berada di halaman pertama mensin pencarian (Google) memiliki kisaran 1,447 kata. Dengan artikel sepanjang itu, daftar isi sangat dibutuhkan sebagai navigasi pembaca. <br /> <br /> Berikut ini adalah contoh langsung dalam membuat daftar isi dalam sebuah postingan di blog. <br /> <br /> <div class='first-image'> <img alt='membuat daftar isi di blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLGjwggBxjJijoI9cDoPuAfWMFt6T0U1Q2bv2EnAGn9z1l8W4q9W2L_N6p4AtmpM-UbxUINru5tVxp2-Cvr45l1jLjn5qjEMkqCuj7eJtVa-uCLLKkssp9Goh0B0IkLhNYnrNd1NkqxQ/s1600/daftar+isi.png'/> </div> <br/> <h2 id="daftarisi"> Daftar Isi</h2> <a href="#daftarisi-1">1. Daftar Isi 1</a> <br /> <a href="#daftarisi-2">2. Daftar Isi 2</a> <br /> <a href="#daftarisi-3">2. Daftar Isi 3</a> <br /> <br/> <div style="background: #e0e5eb url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsbAnIu-b6hyc9yWRXZ9oc0T2YU_oEvm3q2kJMK1fs9r4evaWhP5-9FjiN8Qz63BuyrSf4kCmTO8aw5Zbbwxfm0kFmkD6eZk3R2TowBkvAdd7F8SiLymVOPuZ9GICWFsGQt00J7wXTAg/s1600/info.png&quot;) no-repeat 12px 1px; color: #222222; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Langkah 1: Kode untuk daftar isi di atas</div> <pre><code>&lt;h2 id=&quot;daftarisi&quot;&gt;Daftar Isi&lt;/h2&gt; &lt;a href=&quot;#daftarisi-1&quot;&gt;1. Daftar Isi 1&lt;/a&gt; &lt;a href=&quot;#daftarisi-2&quot;&gt;2. Daftar Isi 2&lt;/a&gt; &lt;a href=&quot;#daftarisi-3&quot;&gt;2. Daftar Isi 3&lt;/a&gt;</code></pre> <br /> <h2 id="daftarisi-1"> Daftar Isi 1 <a href="#daftarisi">&nbsp;[⇪]</a></h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan non tellus non euismod. Vestibulum sit amet dui sed nibh mollis auctor sed sit amet dolor. Proin enim ligula, pretium nec mi ut, euismod aliquet arcu. Aliquam ac venenatis mi. <br /> <br /> <h2 id="daftarisi-2"> Daftar Isi 2 <a href="#daftarisi">&nbsp;[⇪]</a></h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan non tellus non euismod. Vestibulum sit amet dui sed nibh mollis auctor sed sit amet dolor. Proin enim ligula, pretium nec mi ut, euismod aliquet arcu. Aliquam ac venenatis mi. <br /> <br /> <!-- blog.gerry.id display tengah --> <center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="2607487167" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></center> <br/> <h2 id="daftarisi-3"> Daftar Isi 3 <a href="#daftarisi">&nbsp;[⇪]</a></h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan non tellus non euismod. Vestibulum sit amet dui sed nibh mollis auctor sed sit amet dolor. Proin enim ligula, pretium nec mi ut, euismod aliquet arcu. Aliquam ac venenatis mi. <br /> <br /> <div style="background: #e0e5eb url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsbAnIu-b6hyc9yWRXZ9oc0T2YU_oEvm3q2kJMK1fs9r4evaWhP5-9FjiN8Qz63BuyrSf4kCmTO8aw5Zbbwxfm0kFmkD6eZk3R2TowBkvAdd7F8SiLymVOPuZ9GICWFsGQt00J7wXTAg/s1600/info.png&quot;) no-repeat 12px 1px; color: #222222; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Langkah 2: Kode untuk bagian yang dituju dalam postingan</div> <pre><code>&lt;h2 id=&quot;daftarisi-1&quot;&gt; Daftar Isi 1 &lt;a href=&quot;#daftarisi&quot;&gt;&amp;nbsp;[⇪]&lt;/a&gt;&lt;/h2&gt; &lt;h2 id=&quot;daftarisi-2&quot;&gt; Daftar Isi 2 &lt;a href=&quot;#daftarisi&quot;&gt;&amp;nbsp;[⇪]&lt;/a&gt;&lt;/h2&gt; &lt;h2 id=&quot;daftarisi-3&quot;&gt; Daftar Isi 3 &lt;a href=&quot;#daftarisi&quot;&gt;&amp;nbsp;[⇪]&lt;/a&gt;&lt;/h2&gt;</code></pre> <br /> <div style="background: #db6161 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCBErwfR-qzlPVjwfJfo4GzXtK4RzIjKI97KUXt-DcbhDC579FCQBVMo4aWcb37n4xqrWFfXVg0w2maVlewetT1CPrCUhtM572v4NX26z__HHdiO3BHkVvm80moaTfbs8KHDVj2zM5kw/s1600/warning.png&quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Satu hal yang harus kamu perhatikan</div> Peringatan! Kamu harus menulis kodenya di bagian edit html dan jangan dilihat dulu di halaman compose. Karena nanti akan berubah kodenya menjadi ada tambahan: https://www.blogger.com/... . <br/> <br/> Kamu harus menghapus kode itu supaya scriptnya jalan. Jadi tipsnya adalah selesaikan saja semua tulisan di halaman edit html tanpa melihat di compose. Lebih baik langsung melihatnya di preview. <br/> <br/> Untuk penggunaan tag H2, bisa diubah ke H3 atau H4 sesuai selera. <!-- https://blog.hubspot.com/customers/navigate-long-form-content --> https://blog.gerry.id/2020/03/membuat-daftar-isi-postingan-blog.htmlnoreply@blogger.com (Gerry Atje)0tag:blogger.com,1999:blog-5214542765090985775.post-5343124936671185777Fri, 27 Mar 2020 09:19:00 +00002020-05-21T22:08:17.288-07:00Desain Blog<a href="https://blog.gerry.id/2020/03/cara-membuat-logo-untuk-blog.html">Cara Termudah Membuat Logo untuk Blog</a> — Membuat logo untuk blog kamu bukanlah suatu keharusan. Namun ada baiknya juga untuk membuat logo di blog agar blog tampak lebih kelihatan menarik dipandang, minimal untuk kamu sendiri sebagai pemilik blog tersebut. <a name='more'></a> <br /> <br /> Saya mau share bagaimana cara saya membuat logo di blog ini, yaitu yang seperti ini: <br /> <br/> <div class='first-image'> <img alt='membuat logo di blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6C_CDEhFx7Glgek__z5gtQ7ECH72IVsyZ9a2l7qComVo8l-N_N2DCrsgBUYf60iFa9I2nitBB4YxGUK3xrY9bxiN_kI-Z_cg63xNb_7mKRH9WJs8y85c6M9g5JU7WOeUFte3toQZNnk/s1600/Logo+bloGerry.png'/> </div> <br/> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-znAmnsovMD_PTAcx7aZtPiM7Pc0nHr9dRjiSHWC6nr14eqrMLkgDPjUw-XxTVSUdMukhf-BJSQ7X0J9kzIP77iwagaKWj5pkoAXdz7Y31SgEEIxsFORQXwaURbJH4jvEIFW2QwOrkno/s1600/bloGerry.png" style="margin-left: 1em; margin-right: 1em;"><img alt="contoh logo blog" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-znAmnsovMD_PTAcx7aZtPiM7Pc0nHr9dRjiSHWC6nr14eqrMLkgDPjUw-XxTVSUdMukhf-BJSQ7X0J9kzIP77iwagaKWj5pkoAXdz7Y31SgEEIxsFORQXwaURbJH4jvEIFW2QwOrkno/s1600/bloGerry.png" style="border: none;" width="320" /></a></div> <br /> Ada dua alat yang dibutuhkan untuk membuat logo seperti itu. Semua alatnya tersedia di online. <br /> <br /> <h4> Langkah Pertama, membuat desain logo di situs canva logo</h4> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Q2Hk4M6_HlGc4Cb1EYQieRVcEQFhevC7bCpqyiMituyjctolCjUFXfLDgyyUfWSiKYcFZMvMlpZA9__PFlnhbmnLLmNB3XpwKfWP3_I2aoNYql6HxEW5rJVoPN3umFvLgF2rYmRT8eo/s1600/canva+logo.png" style="margin-left: 1em; margin-right: 1em;"><img alt="membuat logo" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Q2Hk4M6_HlGc4Cb1EYQieRVcEQFhevC7bCpqyiMituyjctolCjUFXfLDgyyUfWSiKYcFZMvMlpZA9__PFlnhbmnLLmNB3XpwKfWP3_I2aoNYql6HxEW5rJVoPN3umFvLgF2rYmRT8eo/s1600/canva+logo.png" style="border: none;" width="640" /></a></div> <br/> Yang perlu kamu lakukan adalah: <br /> <br /> 1. Masuk ke situs <a href="https://www.canva.com/id_id/membuat/logo/" target="_blank">Canva Logo</a>. Klik mulai buat desain logo khusus.<br /> 2. Kemudian pilih template yang telah disediakan untuk kamu mulai mengkreasikan logo yang kamu inginkan. <br /> 3. Jika sudah selesai mendesain logo kamu, klik unduh. <br /> <br /> Maka kamu akan mendapatkan hasilnya, misalnya seperti ini: <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NUHq0HWqpQEsqtMDqi2To_RoXEPH9vYIEpdO2VLQZXspnxko3PTB-s1u804iHRcmZ-k9RWT4vHp90w18UVeJEqjIeumo6I2_X_6Zj1kPGoYW5gPyJI_sGWuW1I9Wot0rkYFYYcWcsnU/s1600/logo+warna.png" style="margin-left: 1em; margin-right: 1em;"><img alt="contoh logo belum transparan" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NUHq0HWqpQEsqtMDqi2To_RoXEPH9vYIEpdO2VLQZXspnxko3PTB-s1u804iHRcmZ-k9RWT4vHp90w18UVeJEqjIeumo6I2_X_6Zj1kPGoYW5gPyJI_sGWuW1I9Wot0rkYFYYcWcsnU/s1600/logo+warna.png" style="border: none;" width="320" /></a></div> <br /> <!-- blog.gerry - display (tengah) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="7771914434" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <h4> Langkah kedua, menjadikan gambar tersebut memiliki latar transparan</h4> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8-Zt3N0gaPUWVIEBevnC1p-z5Mj0WFGOFbD88pJaQSKwRcyKImeNVKPQelPyQ_CuNCpjA95sx7T3KBp5C2LPSE1uDw_ngtJnSvM2gyTLujOSW68m_5YUkk_YOeoVDwdGBxinVZKAhgA/s1600/lunapic.png" style="margin-left: 1em; margin-right: 1em;"><img alt="membuat logo transparan" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8-Zt3N0gaPUWVIEBevnC1p-z5Mj0WFGOFbD88pJaQSKwRcyKImeNVKPQelPyQ_CuNCpjA95sx7T3KBp5C2LPSE1uDw_ngtJnSvM2gyTLujOSW68m_5YUkk_YOeoVDwdGBxinVZKAhgA/s1600/lunapic.png" style="border: none;" width="640" /></a></div> <br /> Setelah kamu mendapatkan gambar desain logo dari canva, ada satu permasalahan sebelum kamu bisa menempatkan logo kamu di blog, yaitu: gambarnya perlu di buat jadi berlatar transparan. <br /> <br /> Yang perlu kamu lakukan selanjutnya adalah <br /> <br /> 4. Masuk ke situs <a href="https://www3.lunapic.com/editor/" target="_blank">Lunapic</a><br /> 6. Upload gambar logo kamu ke sana<br /> 7. Kemudian lihat di menu header ada kolom edit <br /> 8. Di paling bawah ada pilihan untuk transparent background<br /> 9. Klik pilihan untuk transparent background<br /> 10. Kemudian Save Image. <br /> <br /> Sekarang tinggal kamu masukkan logo kamu ke blog kamu. <br /> <br /> Selamat mencoba ya!https://blog.gerry.id/2020/03/cara-membuat-logo-untuk-blog.htmlnoreply@blogger.com (Gerry Atje)0tag:blogger.com,1999:blog-5214542765090985775.post-4645868228027263783Thu, 26 Mar 2020 16:42:00 +00002020-05-21T21:01:58.243-07:00Desain Artikel<a href="https://blog.gerry.id/2020/03/kotak-catatan-di-blog.html">Cara Membuat Kotak Catatan Keren Banget di Blog</a> — Kotak catatan dibutuhkan ketika kamu mau menandai apa yang kamu tulis di blog dengan keterangan tertentu. Misalnya, "<i>Ingat ya, ditulisnya di halaman edit html, bukan di compose!</i>". <a name='more'></a> <br /> <br /> Nah, kalau kamu pernah menulis yang seperti itu, tutorial kali ini memang cocok untuk kamu. <br /> <br /> Saya modifikasi kodenya sedikit dari dua sumber ini:<br /> ◾http://tewswsw.blogspot.com/2016/07/cara-membuat-kotak-catatan-tisp-dan.html<br /> ◾http://gunzyber.blogspot.com/2013/01/membuat-box-kotak-pesan-keren-di-blog.html#.Xny6pEAzbIU <br /> <br /> Yang paling utama perbedaannya adalah saya mengubahnya menjadi inline CSS. <br /> <br /> Salah satu keuntungan inline CSS adalah membuat loading blog menjadi lebih cepat karena CSS tidak masuk ke dalam struktur template. <br /> <br /> Namun, inline CSS ada kekurangannya juga, yaitu harus copas ulang kode dibawah ini setiap kali mau menggunakannya dalam suatu postingan. <br /> <br /> Hasilnya nanti akan seperti ini: <br/> <br/> <div class='first-image'> <img alt='kotak catatan di blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Ezzg2sOsFDRijIQThLCb62hbDVicBetckY7Ty5mFX5FyRZ-_88e6IranwDHliTpu7hxC1GQEJCQp6VXejeN67md3UGxLXyIVFnpZeMpk1aqqxsPelpteF_IpCQktCIa4Zkk3rqDuZII/s1600/cara+membuat+kotak+catatan+di+blog.png'/> </div> <br/> Langsung saja demo jadinya dan kodenya. <br /> <br /> <!-- KOTAK CATATAN --> <div style="background: #e0e5eb url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsbAnIu-b6hyc9yWRXZ9oc0T2YU_oEvm3q2kJMK1fs9r4evaWhP5-9FjiN8Qz63BuyrSf4kCmTO8aw5Zbbwxfm0kFmkD6eZk3R2TowBkvAdd7F8SiLymVOPuZ9GICWFsGQt00J7wXTAg/s1600/info.png&quot;) no-repeat 12px 1px; color: #222222; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Tulis catatan di sini</div> <pre><code>&lt;div style="background: #e0e5eb url(&amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsbAnIu-b6hyc9yWRXZ9oc0T2YU_oEvm3q2kJMK1fs9r4evaWhP5-9FjiN8Qz63BuyrSf4kCmTO8aw5Zbbwxfm0kFmkD6eZk3R2TowBkvAdd7F8SiLymVOPuZ9GICWFsGQt00J7wXTAg/s1600/info.png&amp;quot;) no-repeat 12px 1px; color: #222222; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"&gt; <span class='block'>Tulis catatan di sini</span>&lt;/div&gt;</code></pre> <br /> <!-- KOTAK TIPS --> <div style="background: #7cadde url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGjgB_MWCBH5wptxaN9l1hlT25JFQkdqpqBo1p3pLxCi6mAfhpUK3ceUf8AgwCJv-BwQyTYcOAF7l0fbnAtXh2_DEPfWZmAup98JX3_DOUNwfVhNHnUDeWXfK4bso4ZtQ4DENjKhEU9w/s1600/tips.png&quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Tulis tips di sini</div> <pre><code>&lt;div style="background: #7cadde url(&amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGjgB_MWCBH5wptxaN9l1hlT25JFQkdqpqBo1p3pLxCi6mAfhpUK3ceUf8AgwCJv-BwQyTYcOAF7l0fbnAtXh2_DEPfWZmAup98JX3_DOUNwfVhNHnUDeWXfK4bso4ZtQ4DENjKhEU9w/s1600/tips.png&amp;quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"&gt; <span class='block'>Tulis tips di sini</span>&lt;/div&gt;</code></pre> <br/> <!-- KOTAK PERINGATAN --> <div style="background: #db6161 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCBErwfR-qzlPVjwfJfo4GzXtK4RzIjKI97KUXt-DcbhDC579FCQBVMo4aWcb37n4xqrWFfXVg0w2maVlewetT1CPrCUhtM572v4NX26z__HHdiO3BHkVvm80moaTfbs8KHDVj2zM5kw/s1600/warning.png&quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> Tulis peringatan di sini</div> <pre><code>&lt;div style="background: #db6161 url(&amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCBErwfR-qzlPVjwfJfo4GzXtK4RzIjKI97KUXt-DcbhDC579FCQBVMo4aWcb37n4xqrWFfXVg0w2maVlewetT1CPrCUhtM572v4NX26z__HHdiO3BHkVvm80moaTfbs8KHDVj2zM5kw/s1600/warning.png&amp;quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"&gt; <span class='block'>Tulis peringatan di sini</span>&lt;/div&gt;</code></pre> <br/> <!-- blog.gerry - display (tengah) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4175413101909983" data-ad-slot="7771914434" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br /> <!-- KOTAK CATATAN 1 --> <div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #bde5f8 url(&quot;https://sites.google.com/site/problogiz/my-icon/info.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #00529b; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> text message here</div> <pre><code>&lt;div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #bde5f8 url(&amp;quot;https://sites.google.com/site/problogiz/my-icon/info.png&amp;quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #00529b; font: bold 12px &amp;quot;verdana&amp;quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"&gt; <span class='block'>text message here</span>&lt;/div&gt;</code></pre> <br /> <!-- KOTAK CATATAN 2 --> <div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #dff2bf url(&quot;https://sites.google.com/site/problogiz/my-icon/ok.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #4f8a10; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> text message here</div> <pre><code>&lt;div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #dff2bf url(&amp;quot;https://sites.google.com/site/problogiz/my-icon/ok.png&amp;quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #4f8a10; font: bold 12px &amp;quot;verdana&amp;quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"&gt; <span class='block'>text message here</span>&lt;/div&gt;</code></pre> <br /> <!-- KOTAK CATATAN 3 --> <div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #feefb3 url(&quot;https://sites.google.com/site/problogiz/my-icon/warning.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #9f6000; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> text message here</div> <pre><code>&lt;div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #feefb3 url(&amp;quot;https://sites.google.com/site/problogiz/my-icon/warning.png&amp;quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #9f6000; font: bold 12px &amp;quot;verdana&amp;quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"&gt; <span class='block'>text message here</span>&lt;/div&gt;</code></pre> <br /> <!-- KOTAK CATATAN 4 --> <div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #ffbaba url(&quot;https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #d8000c; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> text message here</div> <pre><code>&lt;div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #ffbaba url(&amp;quot;https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png&amp;quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #d8000c; font: bold 12px &amp;quot;verdana&amp;quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"&gt; <span class='block'>text message here</span>&lt;/div&gt;</code></pre> <br /> Cara membuatnya cukup mudah, tinggal dicopas kodenya dan ditaruh di halaman postingan tulisan kamu. Jadi deh! <br /> <br /> Terimakasih ya sudah mau membaca dan siapa tahu ada yang mau mencobanya dalam tulisan di blog kamu sendiri.https://blog.gerry.id/2020/03/kotak-catatan-di-blog.htmlnoreply@blogger.com (Gerry Atje)2