Kartu Nama: Widget

Rabu, 15 Agustus 2018

Cara Membuat widget box subscribe Blogger Keren dan simpel

kali ini saya akan membuat sebuah tutorial bagaimana cara nya membuat widget box subscribe Blogger.

subscribe sendiri adalah tool supaya pengunjung dapat mendapatkan notifikasi artikel terbaru dari sebuat blog yang kita miliki, subscribe juga sangat sangat berpengaruh dalam kepupolaritasan blog yang dimili agar mendapat lebih banyak pengunjung.

mungkin sudah banyak yang sudah memberikan tutorial yang sama, namun apa salahnya saya bila ingin memberikan tutorial yang sama.

Cara Membuat widget box subscribe Blogger

Pertama buka Blogger.com >> Template >> Edit HTML

Tambahkan kode dibawah tebat diatas kode ]]></b:skin> atau </style>


/* Subscribe Box */
#subscribe-box{background:#003d99;padding:20px}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 20px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{padding:12px;color:#9ba7b0;border:none;font-size:14px;margin-bottom:16px;width:100%}
#subscribe-box .emailfield input:focus{color:#7f8c8d;outline:none}
#subscribe-box .emailfield .submitbutton{background:rgba(0,0,0,0.1);color:#fff;margin:0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(0,0,0,0.2);color:#fff;}

selanjutnya tambah sebuah wigdet baru

Tata Letak >> tambahkan gadget >> HTML/JavaScript

isikan kode ini di dalamnya


<div id='subscribe-box'>

<p>Subscribe below and well email you updates</p>

<div class='emailfield'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ikramlinknet&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input type='text' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' pattern='[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' value='Email Address'/>

<input name='uri' type='hidden' value='ikramlinknet'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='submitbutton' type='submit' value='Submit'/>

</form>

</div>

</div>

Note :
ganti ikramlinknet dengan feed blog kalian

Simpan dan selesai

Cara Membuat Label Keren dua kolom di blogger

Cara membuat label dua kolom di blogger

Pertama login dulu ke blogger kalian.

masuk ke Tema >> Edit HTML

Copy kode script berikut ini di atas kode ]]></b:skin>


.Label {display: block;width: 100%;background: #fff;margin: 0 auto;padding:10px 0;}
.Label a:link,.Label a:visited {color:#2b2b2b}
.Label .widget-content { padding: 5px 0; margin: 0;}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0; }
.Label ul li {float: left;width: 42.5%;margin: 0 7px 5px 0;color:#616060;text-decoration: none;padding: 6px;display: block;text-align: left;text-indent: 0px;font-size: 14px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}