Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Senin, 16 Oktober 2017

Cara Pasang 2 Iklan Dan Artikel Terkait di Tengah Postingan Berdampingan

Assalamuallaikum Warahmatullahi Wabarakatuh

2 Iklan di Tengah Postingan
Dengan memasang iklan di tengah postingan di jamin bisa membuat penghasilan blog bertambah, karena ikla akan muncul di tengah postingan yakni saat pengunjung sedang membaca maka iklan pasti bakalan terlihat oleh pengunjung.

Untuk memasang 2 iklan dan Artikel terkait berdampingan atau tampilannya seperti blog ini yaitu : Iklan - Artikel Terkait - iklan.

Anda harus membaca tutorial sebelumnya. Cara Pasang Iklan dan Artikel Terkait di Tengah Postingan 

Karena trik ini sama dengan cara sebelumnya hanya ada sedikit modifikasi di dalam penempatan iklannya

2 Iklan dan Related Post di Dalam Artikel



Jika anda sudah membaca tutorial sebelumnya 

silahkan ganti kode seperti di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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&amp;max-results=3&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</div>
<div class='ads_middle'>
// kode Iklan tengah
  </div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='ads_middle'>
// Kode Iklan tengah 1
</div>
</div>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<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&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</div>
<div class='ads_middle'>
// kode Iklan tengah 2
</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}} var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Pasang kode iklan pada tulisan yang sudah saya tandai dan jangan lupa kode iklannya di parse dulu

Semoga bermanfaat

Cara Pasang Iklan dan Artikel Terkait di Tengah Postingan

Assalamuallaikum Warahmatullahi Wabarakatuh

Artikel Terkait dan iklan di Tengah Postingan

Setelah sebelumnya membahas Cara Pasang Iklan Melayang Responsive sekarang saya akan membahas cara pasang iklan dan artikel terkait di tengah postingan

Dengan menerapkan iklan di tegah postingan sudah pasti untuk bisa mendapatkan klik. Dan dengan mendapatkan klik kita bisa mendapatkan penghasilan

Trik ini hampir sama dengan tutorial cara pasang iklan di tengah postingan hanya saja trik ini di tambah dengan kode css agar iklan dan artikel terkait bisa berdampingan

Untuk Preview/Demonya sama kaya blog ini dan berikut adalah tutorial cara memasangnya

CARA PASANG IKLAN DAN ARTIKEL TERKAIT DI TENGAH POSTINGAN



Buka Blogger > Tema > Edit HTML kemudian simpan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>
</b:if>

Lanjut ke tahap kedua
Cari kode seperti di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if>

Mungkin tiap template berbeda beda cari saja yang hampir mirip dengan kode tersebut

Kemudian ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>

Dan tambahkan kode ini tepat di bawah kode yang di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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&amp;max-results=3&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</div>
<div class='ads_middle'>
// kode Iklan tengah
  </div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Letakan iklan pada tulisan yang sudah saya tandai

Jika sudah selesai anda bisa coba buka artikel anda dan lihat hasilnya

Semoga berhasil dan semoga bermanfaat

sumber: http://www.bungfrangki.com/2017/04/memasang-iklan-dan-related-post-di-tengah-postingan.html

Cara Memasang Iklan Melayang Responsive

Assalamuallaikum Warahmatullahi Wabarakatuh


Kali ini CzRandy Blog akan memberikan Trik cara pasang iklan melayang Responsive di blog dengan tombol close

Bagi anda yang penasaran atau ingin mencoba trik ini silahkan simak baik-baik

● Pertama Buka AdSense
Buka AdSense kemudian buat unit iklan baru, untuk ukuran iklan terserah anda
Namun jika unit iklan yang Responsive jika di buka di SmartPhone akan menjadi besar yaitu ukurannya menjadi 300x250

● Buka Blogger
Buka Blogger kemudian pilih Tema dan Klik Edit HTML
Cari kode </body> kemudian letakan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJCy64op1tRvDJeELovZBWwtHeFQPd0t6lYH4Wd7z8qhvDTaduqQJDeLNd_ceclDXI_EdOng3HPUP33ahFzo_rZ25fL97Wwz2hI4ewwZiGQeU9aAJenclnPZ6aNa3yEv80nkXxVi8IqGU/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
Kode Iklan Anda Letakan Di Sini
</div>
</div>

Letakan iklan anda di tulisan yang sudah saya tandai. Agar tidak terjadi eror saat di simpan, jangan lupa kode Iklannya di parse dulu

IKLAN MELAYANG RESPONSIVE DI BLOGGER



Dengan Trik ini iklan akan tayang dan tampil melayang di blog anda baik di buka dari PC/Laptop maupun Android dan juga tersedia tombol close

Saya tidak tahu apakah trik cara memasang iklan melayang responsive di blog ini melanggar kebijakan Google atau tidak.

Tapi trik ini sudah banyak di share di blog blog tutorial bahkan juga sudah di share blog besar seperti arlina design atau bungfrangki

Sebelum saya bisa menerapkan iklan di tengah postingan, Trik ini juga pernah di coba pada Blog saya, dan memang trik ini bisa menambah pendapatan Adsense saya. Namu sekarang sudah saya ganti dengan iklan di tengah postingan

Bukan hanya iklan AdSense saja iklan dari media lain juga bisa

Jadi jika anda tertarik bisa di coba trik ini dan semoga bermanfaat

Jumat, 13 Oktober 2017

Ternyata Nge Blog Menggunakan Android Lebih Cepat

Assalamuallaikum Warahmatullahi Wabarakatuh


Ternyata nge Blog itu lebih cepat menggunakan Android. Apakah anda setuju ?

Setuju atau tidaknya itu terserah anda, namun menurut saya pribadi nge blog menggunakan Android lebih cepat dan lebih simpel

Kenapa lebih simpel ? Karena bisa di bawa kemana mana. Dan Android juga lebih canggih daripada Window (laptop os window) karena apa yang bisa di lakukan window juga bisa dilakukan oleh Android. Namun sebaliknya apa yang bisa di lakukan oleh Android belum tentu bisa di lakukan di Window(laptop os window)

BLOGGER ANDROID

Selain itu juga Googel Inc juga telah menyediakan Aplikasi Blogger untuk Android, makanya ngeblog menggunakan Android lebih cepat.

Setelah saya coba Aplikasi Blooger yang di buat untuk Android, ternayata juga sudah suport HTML. Jadi saat membuat style di blog lebih mudah dan gak perlu menggunakan browser

Selain menggunakan Aplikasi Blogger juga bisa menggunkan Aplikasi Google Chrome dengan menggunakan Aplikasi ini kita juga terasa menggunakan laptop karena Aplikasi Google Chrome juga tersedia mode PC/Desktop.

Bebas dari yang namaya malware atau virus karena Android sangat kebal dari yang namanya malware dan belum pernah mendengar Android sakit karena malware

Kalau menurut saya sangat cepat ngeblog menggunkan Android karena saya belum lancar ngetik di laptop dan karena saya sudah terbiasa menggunakan Android

Bagaimana menurut anda ?

Bisakah Android di Gunakan Untuk NgeBlog ?

Assalamuallaikum Warahmatullahi Wabarakatuh


Di era digital seperti sekarang semua orang baik anak-anak, remaja, dewasa, orang tua, semua sudah mengenal apa itu HP/SmartPhone Android.

Di zaman modern seperti sekarang semuanya bisa di lakukan hanya dengan menggerakan jari semua bisa di dapat baik berbelanja maupun pesan tiket dan lainnya.

Ya dengan Android kita bisa melakukan apa saja seperti bermain game, Chating, browsing, stereming.

Selain hanya bisa di gunakan untuk hal-hal di atas Android juga bisa di gunakan untul mendapatkan penghasilan dari internet yang bisa anda dapatkan dari membuat website atau blog.

BLOGGER ANDROID

Tidak perlu menggunakan PC atau laptop untuk bisa membuat sebuah Blog. Hanya bermodalkan Android saja kamu bisa membuat dan memiliki website atau Blog.

Jujur blog ini saya kelola hanya bermodalkan Android saja. Yaitu hanya bermodalkan SmartPhone Samsung J2 dan dengan bantun Aplikasi Google Chrome saya tiap hari membuat postingan.

Dan alhamdullilah juga sudah berhasil di terima Google Adsense. Hanya dalam waktu 7 bulan saja. Dan kini saya sedang serius mengelola blog agar penghasilan saya dari Blog bisa bertambah.

Jadi kesimpulannya Android juga bisa di pakai NgeBlog dan juga bisa mendapatkan penghasilan dari internet, jika anda ingin mempunyai blog anda gak perlu atau gak harus punya laptop karena hanya dengan bermodalkan Hp Android dan Google Chrome saya bisa di terima Google Adsense dan bisa dapat penghasilan dari Internet.

Semoga bermanfaat bagi kita semua

Kamis, 12 Oktober 2017

Cara Memasang Syntax Highlighter Seperti Arlina Design

Assalamuallaikum Warahmatullahi Wabarakatuh

Sekarang CzRandy Blog akan memberikan tips cara memasang script Syntax Highlighter seperti arlina design
Berikut screenshootnya


Syntax Highlighter biasa di gunakan untuk menaruh kode seperti kode CSS, JAVASCRIPT, JQUERY dan HTML dan biasa di gunakan di blog blog tutorial seperti blog ini. Cuman saya pake yang sederhana saja.

Syntax Highlighter ini biasa di gunakan blog arlina design jadi sudah pasti keren dan responsive

Bagi yang mau memasangnya silahkan ikuti tahapan berikut ini

CARA MEMASANG SYNTAX HIGHLIGHTER


Buka Blogger pilih Tema dan klik Edit HTML kemudian Salin kode CSS dibawah ini tepat di atas kode </style>

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}


Jika di rasa sudah benar penempatan kodenya silahkan simpan Tema

Untuk menggukannya di postingan silahkan gunakan kode di bawah ini di mode Html dan jangan lupa kodenya di parse dulu

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
kode yang sudah di parse di sini</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>
<pre data-codetype="JQueryku" title="JQuery"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>
<pre data-codetype="Javascriptku" title="Javascript"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>

Semoga bermanfaat dan terima kasih sudah berkunjung

Cara Membuat BLOCKQUOTE keren di Blog

Assalamuallaikum Warahmatullahi Wabarakatuh


BLOCKQUOTE atau dalam bahasa indonesianya adalah kutipan. Dan kali ini saya akan memberikan cara membuat blockquote keren seperti blog arlina design.

Sebetulnya semua Tema/Template sudah memiliki Blockquote bawaan Temolate tersebut namun bisa di bilang kurang menarik dan kurang keren.

Untuk DEMO bisa lihat di bawah ini, jika tertarik untuk memasang nya. Simak tutorial berikut ini
Silahkan cari kode seperti berikut ini

BERIKUT ADALAH DEMONYA

Jika anda menggunkan template dari arlina design pasti bakal ada seperti kode di bawah ini

.post-body blockquote{position:relative;background:#f8f8f9;border-left:none;padding:20px 55px;color:#676767;font-weight:700;line-height:22px}
.post-body blockquote:before{color:#bbb;position:absolute;top:15px;left:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10d";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body blockquote:after{color:#bbb;position:absolute;bottom:15px;right:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10e";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%}
.post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}

Lau ganti dengan kode di bawah ini

blockquote{background:#2c4584;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
blockquote:before{position:absolute;content:'Catatan :';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#2c4584}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important}


Simpan Template/Tema

Jika tidak ada kode seperti ini

.post-body blockquote{position:relative;background:#f8f8f9;border-left:none;padding:20px 55px;color:#676767;font-weight:700;line-height:22px}
.post-body blockquote:before{color:#bbb;position:absolute;top:15px;left:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10d";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body blockquote:after{color:#bbb;position:absolute;bottom:15px;right:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10e";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%}
.post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}


Bisa tambahkan kode di bawah ini di atas kode </b:skin> atau </style>

blockquote{background:#2c4584;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
blockquote:before{position:absolute;content:'Catatan :';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#2c4584}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important}


Untuk cara menggunakannya anda bisa gunakan kode ini di menu HTML

<blockquote> kata kata disini </blockquote>


Atau block kata katanya lalu pilih tombol Kutipan di atas

Semoga bermanfaat