Cara Membuat Follow By Email dengan Flat UI

Cara Membuat Follow By Email dengan Flat UI - Hai sobat blogger. Posting kali ini saya memberi sedikit tutorial untuk blogger.Ya, cara membuat follow by email dengan flat UI. Ini digunakan untuk berlangganan. Caranya sangat simple dan mudah. Mau coba? Ikuti langkah di bawah ini!

1. Buka Blogger
2. Pilih template lalu edit HTML
3. Letakkan kode di bawah ini di atas kode ]]></b:skin> atau </style>

#subscribe-css { padding : 5px; background : #16a085; }
.subscribe-wrapper { color : #fff; background : #3498db; font : 13px; font-family : 'Oswald', Tahoma, Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center; border-radius : 3px; }
.subscribe-form { background : #3498db; clear : both; display : block; margin : 10px 0; overflow : hidden; } form.subscribe-form { clear : both; display : block; margin : 10px 0 0; width : auto; overflow : hidden; }
.subscribe-css-email-field { background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLX1xLxPgiX0fXMiHvs_HazcJcxYbtJ4H6KXt4G5OFdzIlwRZMaGBsOV5VE1DfdbbpcU1mpIoPkyTDxBacf_fWpVDr4dbQe3qN6Ngcq0qi2He_irIeLMESXdJPEZJsAIEREw3zENsrU3B/s1600/sprites.png) 1px -27px no-repeat #eee; color : #444; margin : 0 0 15px; padding : 12px 40px; width : 100%; border : none; }
.subscribe-css-button { background : #2980b9; color : #fff; cursor : pointer; font-weight : 700; padding : 10px; text-transform : none; width : 100%; border : none; font-size : 16px; transition : all 0.3s ease-in; }
.subscribe-css-button:hover { transition : all 0.3s ease-in; background : rgba(0, 0, 0,0.2); }

4. Klik Simpan Template
5. Buka  Tata Letak Lalu Tambah Gadget
6. Cari pilihan Kode HTML lalu copy kode berikut di tempat yang telah di sediakan

<div class="subscribe-wrapper">
<p>Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=Mahardika', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="1359348936">
<input name="uri" type="hidden" value="Mahardika" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address " />
<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />
</form>
</div></div>

7. Klik Simpan

Kode berwarna merah ganti dengan nama blog kalian

Demikian posting singkat dari saya semoga bermanfaat. Sekian dari saya dan terima kasih

Membuat Tombol Download dan Demo dengan Font Awesome

Membuat Tombol Download dan Demo dengan Font Awesome - Hai sobat blogger. Kembali lagi dengan saya disini. Kali ini saya akan memberikan sedikit tutorial. Tutorial ini adalah membuat tombol demo dan download dengan font awesome. Jangan ditanya, tombol ini sangatlah keren. Liat contohnya di bawah.

• Demo
• Download

Keren kan? Tertarik? Ikuti cara di bawah ini!

1. Buka Blogger

2. Pilih Template lalu Klik Edit HTML

3. Cari kode </head>

4. Copy kode di bawah ini tepat diatas kode tadi

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Cari kode ]]></b:skin>  lalu copy kode di bawah ini tepat di atas kode tadi

.button{float:left;list-style:none;text-align:center;width:100%;margin:5px 0;padding:0;font-size:14px;clear:both}

.button ul{margin:0;padding:0}

.button li{display:inline;margin:0;padding:0}

.demo{border-radius:3px;padding:8px 12px;background:#e74c3c;color:#fff!important;transition:background-color 1s 0s ease-out}

.download{border-radius:3px;padding:8px 12px;background:#3498db;color:#fff!important;transition:background-color 1s 0s ease-out}

.buton a{color:#fff}

.demo:hover{background:#c0392b;text-shadow:0 0 1px #222;color:#fff}

.download:hover{background:#2980b9;text-shadow:0 0 1px #222;color:#fff}

.download:before{content:"\f019";font-family:FontAwesome;font-weight:normal;padding:8px;background:#2980b9;margin-left:-12px;margin-right:6px;border-radius:3px 0 0 3px;font-size:16px}

.demo:before{content:"\f06e";font-family:FontAwesome;font-weight:normal;padding:8px;background:#c0392b;margin-left:-12px;margin-right:6px;border-radius:3px 0 0 3px;font-size:16px}

6. Simpan Template
 Untuk menggunakannya di posting, copy kode HTML ini di posting

<ul class="button">

<li><a class="demo" href="http://p-mahardika.blogspot.com/" rel="nofollow" target="_blank">Demo</a></li>

<li><a class="download" href="http://p-mahardika.blogspot.com/" rel="nofollow" target="_blank">Download</a></li>

</ul>

 Itu saja dari saya. Sekian dan terima kasih

Andaviar Fast Loading Blogger Template

Andaviar Fast Loading Blogger Template - Hai sobat blogger. Kali ini saya akan membagikan template. Template ini adalah template hasil redesign Fajri Andaviar. Sebelum diredesign, ini adalah template karya Mas Sugeng. Berikut adalah gambar template blognya.

• Demo
• Download

Berikut Fitur Template Blognya :

Seo Ready
Fast Loading
Mobile Version
Auto Readmore
Related Post
Breadcrumbs
And Anymore
Itu saja dari posting singkat dari saya. Wassalam