Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tutorial Memasang Anti Copy Paste (Copas) Di Blog

Cara Memasang Anti Copas (Copy Paste) di Blog,- Bagi sebagian blogger menulis artikel postingan sangatlah membosankan, mungkin alasan diantaranya yakni sulit menciptakan penjelasan, malas menciptakan goresan pena artikel serta lain-lain. yg ujung-ujungnya akan melaksanakan Copas artikel postingan blog lain. namun ketika ini problem copy paste artikel sudah sangat biasa alasannya semakin malasnya orang untuk menulis artikel postingan.

Walaupun sudah biasa namun banyak blogger lain yg mengeluhkan cara cepat saji ini, alasannya cara ini dianggap sebagai pelanggaran hak cipta. bagaimana tidak bila seorang susah payah menciptakan suatu artikel postingan kemudian blog lain hanya mengcopy tanpa izin atau meletakan sumber, itu sudah sanggup di anggap sebagai pelanggaran hak cipta.


Untuk mengatasi problem tersebut bergotong-royong kita sanggup melaporkannya ke DMCA, Namun apa daya bila yg copas lebih dari satu mungkin kita akan susah sendiri. Nah cara lain yg sanggup dibilang cukup ampuh untuk mengusir pencuri artikel yakni Memasang Kode anti Copy paste di blog. yg dimana pencuri tersebut tidak akan sanggup mencopy artikel yg sudah di lindungi anti-Copas. untuk tutorialnya sanggup dilihat di bawah ini.

Cara Memasang Anti Copy Paste di Blog


Nah Sebelum itu disini aku tidak menciptakan Kode Anti Copy Paste ini, yg menciptakan Kodenya yakni Seocips.com, serta aku disini hanya membagikanya saja. OK Berikut Kode Anti Copy paste-nya.

1. Pertama silahkan Login ke Akun Blogger anda.

2. Kemudian silahkan pilih Menu Template serta pilih Edit HTML.

3. Selanjutnya silahkan Cari Kode </head>, gunakan Ctrl+F untuk mempermudah pencarian.

4. Jika sudah ketemu silakan Copy isyarat Kode Script di bawah ini serta Paste dibawah isyarat </head>

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >

5. Terakhir Tinggal Simpan Template.

Dengan Begitu postingan anda akan kondusif dari para pencuri artikel, Sekain Tips Blog yg sanggup aku bagikan serta Semoga bermanfaat.

Tutorial Menciptakan Sajian Navigasi Tetap Walaupun Di Scroll

Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template yaitu sebuah elemen dasar yg membangun sebuah blog atau web yg berisi dari semua fitur menyerupai Sidebar, Header, Post, footer serta lain-lain. atau sanggup dikatekan bahwa template yaitu sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.

Template blog pun sangat mempengaruhi kesuksesan sebuah blog, kesudahannya silahkan pilih template yg sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yg membangun template menyerupai sidebar, Header, Footer serta lain-lain. disini aku akan membagikan sedikit tutorial yg mungkin bermanfaat untuk anda yaitu Cara menciptakan sajian navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini aku peruntukan bagi yg ingin sekali menciptakan sajian navigasi sticky menyerupai blog lain yg menggunakan, serta cara ini sanggup dibilang sedikit rumit, oleh alasannya itu silahkan di simak baik-baik. berikut tutrialnya:

Cara Membuat Menu Navigasi Tetap walaupun di Scroll


1. Pertama silahkan masuk ke Blogger - Template - Edit Html.

2. Kemudian Silahkan cari instruksi Menu navigasi, pada setiap blog kodenya berbeda-beda namun yg niscaya terdapat instruksi (nav), sebagai pola instruksi blog aku yaitu #navitions.


3. Silahkan catat atau hafalkan instruksi tersebut, lalu silahkan cari instruksi </body>, jikalau sudah ketemu copy instruksi dibawah ini serta paste diatas instruksi </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Selanjutnya ganti instruksi #nav diatas dengan instruksi sajian navigasi yg sebelumnya ada hafalkan atau catat.

5. Biasanya sajian tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yg ada pada instruksi sajian menyerupai langkah no 2, dengan width:950px; atau jikalau tidak ada silahkan tambahkan sendiri. serta untuk menyesuaikanya dengan template anda sanggup diganti 950px dengan ukuran lain.

Itulah cara menciptakan sajian navigasi tetap walaupun di scroll kebawah, sekian tips blog yg sanggup aku bagikan serta Semoga berhasil.

Tutorial Menyembunyikan Judul Dan Deskripsi Di Header Blog

Cara Menghilangkan serta menyembunyikan header blog,- Sebuah judul dalam sebuah blog sanggup dikatakan sangat penting, lantaran dengan menciptakan judul blog yg baik mensokan blog tersebut gampang untuk dikenali, semisal kalau seorang pengunjung mengunjungi blog anda serta lalu pengunjung tersebut balik lagi ke blog anda namun beda yg dicari, maka dengan melihat judul saja pengunjung akan dengan mdah mengetahui bahwa sebelumny pernah mengunjungi blog anda.

Namun tidak semua pemilik blog menyukai asertaya judul di blog mereka, yg mungkin saja disebabkan oleh judul standar tidak manis atau tidak sanggup menciptakan logo sama sekali. oleh lantaran itu banyak yg menghilangkan judul blog mereka. menghilangkan judul blog pun sudah banyak dilakukan oleh blogger lain serta dengan menghilangkan judul blog pun sanggup menciptakan blog terlihat lebih professional lantaran disektor atas hanya ada hidangan navigasi tanpa asertaya judul.


Nah buat anda-anda semua yg ingin sekali menghilangkan judul serta deskripsi di blog, disini saya akan membagikan tutorialnya serta tutorial ini saya khususkan buat yg masih pemula/newbie, lantaran yg pro niscaya sudah sanggup mengotak-atik template. ok pribadi saha berikut tutorialnya:

Cara Meyembunyikan Judul di Header Blog


1. Pertama silahkan masuk ke akun Blogger - Template serta Edit HTML.

2. Kemudian silahkan cari aba-aba bagikan "header", setiap template mungkin berbeda-beda namun kebanyakan bertuliskan #header atau #header-Wrapper.

3. Selanjutnya Tambahkan Kode display:none; pada aba-aba header tersebut, Contohnya:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;
}

Kemudian tambahkan aba-aba display:none; maka kodenya menso menyerupai berikut:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;display:none;}

4. Terakhir tinggal Simpan template serta lihat hasilnya.

Dengan menambahkan aba-aba display:none menciptakan header beserta judul akan tersembunyi serta tidak hilang, untuk memunculkanya kembali tinggal hapus aba-aba display:none tersebut. Sekian tips blog yg sanggup saya bagikan serta Semoga bermanfaat.

Tutorial Memasang Kotak Pencarian (Search Box) Di Blog

Cara Memasang Search Box atau Kotak Pencarian di Blog,- Kotak Pecarian atau Search Box ialah sebuah kotak yg dipakai untuk mencari isu atau artikel lain pada sebuah Wesite atau Blog. Kotak ini sangat bermanfaat pada blog atau Website yg mempunyai banyak artikel alasannya mungkin isu yg diperlukan pengunjung terdapat di blog tersebut. oleh alasannya itu Search Box sangat mempunyai kegunaan di sebuah Blog/Website.

Search Box Sendiri tidak semua template mempunyainya, alasannya biasanya banyak template yg kita download dari dunia maya atau dari bawaan blogger tidak eksklusif ada. namun bahwasanya blog berplatform blogger sudah menyediakanya tinggal kita cari serta pasang pada hidangan Tata letak. walaupun sudah disediakan, banyak blogger yg kurang menyukainya alasannya tampilanya yg kurang bagus. oleh alasannya itu banyak yg mencari instruksi pemasangan dari dunia maya.

Nah berafiliasi dengan Search Box atau Kotak Pencarian, disini aku pun akan membagikan tutorial mengenai menempatkan Search Box di blog. yg aku khususkan bagi anda-anda semua yg ingin menempatkan kotak pencarian di blog anda yg masih belum ada Search Box. Ok eksklusif saja berikut Tutorialnya,

Cara Memasang Kotak Pencarian (Search Box) di Blog


1. Pertama silahkan Masuk ke Akun Blogger - Template serta Edit HTML

2. Kemudian Silahkan cari instruksi ]]</b:skin>, Gunakan CTRL+F untuk mempermudah pencarian.

3. JJika sudah ketemu selanjutnya silahkan Copy instruksi CSS dibawah ini serta Paste sempurna diatas kode ]]</b:skin>.

/* Search Box by
----------------------------------------------- */
#search-box{
position: relative;
border: 1px solid #ddd;
margin: 5px auto;
}
#search-form{
height: 30px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
overflow: hidden;
}
#search-text{
color: #ccc;
border-width: 0;
}
#search-box input[type="text"]{
width: 100%;
padding: 7px 0 7px 7px;
outline: none;
}
#search-button{
position: absolute;
top: 0;
right: 0;
height: 30px;
margin: 0;
text-align: center;
line-height: 0;
border-width: 0;
background: whitesmoke;
cursor: pointer;
font-size: 12px;
font-weight: bold
}

4. Terakhir Simpan Template.

Langkah selanjutnya ialah memunculkan Kotak Pencarian (Search Box) di Widget Blog, untuk caranya sanggup dilihat dibawah ini.

5. Selanjutnya Masuk ke Tata Letak - Tambahkan Gadget kemudian Pilih HTML/Java Script.

6. Selanjutnya silahkan kasih judul atau tidak dikasih pun tidak apa-apa kemudian masukkan instruksi CSS dibawah ini pada bab kolom HTML.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search..&quot;;}' onfocus='if (this.value == &quot;Search..&quot;) {this.value = &quot;&quot;}' type='text' value='Search..'/>
  <button id='search-button' type='submit'>GO</button>
</form>
</div>

7. Terakhir Tinggal Simpan.

Panjang Search Box di atas akan menyesuaikan ukuran widget pada blog anda, oh ya hampir lupa search box diatas kodenya aku ambil dari Template Premium Speed up. sekian tutorial blog yg sanggup aku bagikan serta Terima kasih.

Tutorial Menciptakan Widget Footer 3 Kolom Di Blog

Cara menempatkan sajian widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog niscaya tahu apa yg dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yg berplatform blogger. dengan widget ini kita dengan gampang menambah banyak sekali macam fitur template serta menambah arahan HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yg berada pada tata letak template yg digunakan.

Tak jarang pemilik blog yg ingin menambah widget pada bab tertentu pada blognya mencari cara biar sanggup menciptakan sebuah daerah widget menyerupai yg di inginkan. mungkin yg banyak dicari ialah menempatkan sebuah sajian widget pada bab footer. kebanyakan widget di bab footer ini banyak digunakan oleh situs/blog bergaya magazine atau berita. nah oleh alasannya ialah itu banyak blogger lain yg ingin sekali menempatkan widget di bab footer blog mereka.


Widget disektor footer sendiri yg niscaya tidak cuman satu melainkan ada beberapa sekaligus, menyerupai yg paling banyak 3 kolom sampai 4 kolom. Nah buat anda yg ingin sekali menciptakan widget di bab footer dengan sajian widget 3 kolom sanggup mengikuti cara yg aku berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog


1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke sajian Template - Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy arahan CSS dibawah ini kemudian paste sempurna diatas arahan tersebut.

/* Footer 3 Coloum by
----------------------------------- */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}

4. Langkah selanjutnya ialah memunculkan widget pada footer caranya silahkan copy arahan dibawah ini serta paste sempurna diatas arahan <footer>

<!-- Footer Widget 3 Coloum Start-->
<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>
<!-- Footer Widget 3 Coloum End -->

5. Sebenarnya pada proses ini footer 3 kolom sudah muncul serta siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak awut-awutan silahkan tambahkan arahan CSS Media Screen dibawah ini sempurna diatas </style>.

@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

6. Terakhir simpan template serta lihat hasilnya.

Dengan begitu anda sudah sanggup menempatkan widget pada footer di tata letak serta lihat hasilnya, sekian tips blog yg sanggup aku bagikan serta selamat mencoba.

Tutorial Gampang Memasang Instruksi Histats Di Footer Blog

Cara menempatkan Histats di Footer Blog,- Bagi anda selaku pemilik blog tentunya anda ingin meningkatkan pengunjung/visitor blog anda, alasannya suksesnya sebuah blog tergantung dari berapa banyak visitor blog tersebut. untuk mengetahui pengunjung blog biasanya kita akan melihat pada statistik pada hidangan blogger, namun itu hanya total page today saja melainkan buka visitor. untuk mengetahui jumlah visitor blog secara detail kita sanggup memakai fitur dari Histats.

Yang belum tahu mengenai situs Histats akan saya coba jelaskan, Histats sendiri yaitu sebuah situs yg sanggup kita gunakan untuk memantau jumlah visitor, jumlah page, user online. namun syaratnya kita harus menciptakan akun di histats kemudian mendaftarkan blog ke histats serta terakhir kita diharuskan menempelkan pluigin/kode histats di blog. dengan begitu kita akan sanggup mengetahui segala sesuatu yg bekerjasama dengan pengunjung yg mengunjungi blog kita.

Untuk menempatkan arahan histats ke blog terdapat dua cara yaitu kita sanggup memakai widget tata letak serta eksklusif menempatkannya di template. jikalau anda menempatkannya di widget tata letak maka letak histats tersebut akan menyesuaikan struktur widget tata letak blog anda, namun bila menempatkannya eksklusif di template kita sanggup menempatkannya ditempat yg kita inginkan.


Salah satu yg mungkin banyak dilakukan oleh blog lain yaitu menempatkan histats di bab footer, berdasarkan saya dengan menempatkan pada footer blog akan menciptakan tampilan blog lebih professional dengan histats di footer. nah bila anda menempatkan arahan histats di footer diharuskan memparse dulu arahan tersebut, alasannya jikalau tidak kita tidak akan sanggup menyimpan tempate. ok eksklusif saja berikut tutorialnya.

Cara Memasang Kode Histats di Footer Blog


1. Pertama silahkan daftar serta menciptakan arahan histats, untuk tutorialnya sanggup baca: Cara daftar serta menempatkan arahan Histats di blog.

2. Kemudian dikala menentukan arahan silahkan pilih yg standart, silahkan copy arahan tersebut.


3. Selanjutnya kita akan memparse arahan histats tersebut semoga sanggup disimpan pada template, caranya silahkan masuk ke situs www.freeformatter.com/html-escape.html

4. Setelah itu masukkan arahan yg sudah dicopy sebemunya ke kotak yg sudah disediakan kemudian klik Escape

5. Kemudian copy lagi arahan yg sudah di parse tadi, kemudian masuk ke akun blogger - template serta edit html.

6. kemudian cari arahan </footer> gunakan (Ctrl+F) untuk mempermudah, jikalau sudah ketemu paste arahan yg sudah di parse tadi sempurna diatas arahan </footer> dengan menambahkan arahan dibawah ini.

<div>
Kode Histats yg sudah diparse   </div>

7. Terakhir tinggal simpan template serta lihat hasilnya.

Untuk demonya sanggup dilihat eksklusif di blog ini, Sekian tips mengenai cara menempatkan arahan histats footer di blog, semoga berhasil.

Tutorial Menciptakan Subscribe Box Keren Di Blog

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara menciptakan Kotak Subscribe Box di Blog Seperti EVO Magz serta kali ini saya masih akan memperlihatkan mengenai cara menciptakan subscribe box di blog menyerupai template arlina design. dimana subscribe box tersebut sangat anggun serta anggun berdasarkan saya makanya disini saya akan membagikanya.

Subscribe BOX atau Kotak berlangganan yakni sebuah kotak dipakai untuk memasukan email yg biasanya terdapat pada sebuah web atau blog yg bertujuan semoga pengunjung sanggup mengetahui update artikel melalui email mereka. menyerupai halnya tombol Subscribe pada situs youtube subscribe box pun mempunyai cara yg sama namun disini kita perlu memasukan email kemudian submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, sebab sudah banyak blog ygmenempatkan kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yg menempatkannya namun setiap kotak tampilanya berbeda-beda. yah itu pun tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, sebab bila pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu bila ada artikel gres dari blog anda serta otomatis pun akan menambah visitor blog. Namun sebelum menempatkan subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner gres sanggup menempatkan ID tersebut ke Subscribe Box.


Nah buat tampilan Subscribe Box pada tutorial kali ini menyerupai gambar diatas, serta kotak berlangganan tersebut saya pasang pada footer. bila anda tertarik dengan Subscribe BOX menyerupai gambar diatas sanggup pribadi ikuti cara dibawah ini.

Cara Memasang Subscribe Box anggun di Blog


1. Pertama silahkan masuk ke Blogger - Template serta Edit HTML

2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, bila sudah ketemu silahkan copy isyarat dibawah ini serta paste di atas isyarat tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#E73037;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#E73037;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}


3. Selanjutnya silahkan copy isyarat CSS dibawah ini kemudian paste ditempat yg anda inginkan semisal bila ingin menempatkan diatas footer paste diatas isyarat <footer>

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='EspadaBlog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>

Note: Silahkan ganti EspadaBlog dengan ID feedburner blog anda.

4. Dan terakhir supaya subscribe box lebih responsive pada tampilan mobile silahkan tambahkan isyarat CSS media screen dibawah ini sempurna diatas isyarat </style>

@media screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}

5. Terakhir tinggal simpan template serta lihat hasilnya.

Dan itulah cara menciptakan Subscribe Box di blog anggun menyerupai blog arline design, untuk warna sekaligus tampilanya sanggup anda sesuaikan sendiri. sekian tips blogging yg sanggup saya bagikan serta selamat mencoba.