Cara membuat email subcribe di blog

Pada kesempatan kali ini Diaz akan berbagi ilmu... ya mungkin sobat sudah pada tahu. Apakah sobat sudah pernah bikin widget berlangganan feedburner..??? bagi sobat yang belum pernah nie akan Diaz share Cara membuat email subcribe di blog.

FUNGSI:
Email Subcribe sangat berguna buat halaman situs kita khususnya untuk halaman blogspot agar lebih aktiv hubungan antara pengunjung dan owner situs tersebut. Pada dasarnya email subcribe ini digunakan untuk menjaring para pengunjung situs kita agar selalu mendapat Update artikel terbaru dan secara otomatis pengunjung yang sudah menjadi member melihat kiriman itu dan like url tersebut, dan sebagai keuntungannya pada owner situs, dengan banyaknya yang membuka situs kita semakin bagus juga rankingnya di mata mesin pencari. Sehingga pembuatan email subcribe pada halaman blog kita sangat bagus disamping memperindah halaman blog kita.
Dalam tutorial kali ini Diaz sengaja membuat code tag HTML subcribe dalam postingan blog ini, agar para teman bloger yang ingin blognya lebih aktiv dan ramah terhadap pengunjung lebih memahami pemasangan dan kegunaan serta dapat memperindah halaman blognya. Semoga pada tutorial 'Cara membuat email subcribe di blogspot' ini dapat membantu para sobat bloger saya untuk mendesign blognya agar lebih ramah pengunjung. Gambar dibawah ini adalah gambar demo email subcribe yang akan kita buat.

FITUR:

Form email subcribe
Counter feedburner
Tombol Join to Blog
tombol sosial
Judul artikel
Text

Install Program CSS

Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

Klik show untuk melihat

.Rivai {padding:10px 20px 0 0; margin:0; font-size:12px; float:left; width:300px; text-align:center; } .Rivai img {border:2px solid #888; background-color: #FFFFFF; padding:2px; margin:0px 5px 0px 5px; opacity: 1; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(9deg); -o-transform: rotate(9deg); -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .Rivai:hover img {border:2px solid #ccc; cursor:pointer; opacity: 1; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } ul.vay-social {margin:15px auto; display:inline-block; list-style-type: disc; margin-top: -20px; } ul.vay-social li { display:inline; float:left; background-repeat:no-repeat; } ul.vay-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.vay-social li a strong { font-weight:normal; position:absolute; left:50px; color:#000000; padding:3px; z-index:2000; background-color:#FF0000; -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); bottom: 50px; } ul.vay-social li.vay-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO13vAXa9UM5c3WnMkpGSxRwfKCZ4IZSIb6FOL-TLgmTfE62vTtDuo5yCnYZ-mV83vziqI3-WNnduJrsbiDxHHuNQAU5MqwmG4Pkr6zfw9c_WkpSm6i1KFIkE1cGDTWKsmhJ4VQ1vAqac/s1600/FB-1.png "); } ul.vay-social li.vay-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe7d6Da-FTo7efOshg07y1n6ilPfI5KxftmDzXWZnDu7mYz9knpAgj4UErDRHwYHiPI91R8i7Bs0bfQ3raD-WU0hia_wSuWreEeL7h_R7YNuLj94f6WnX7n5A-c6ISmPT4jm42yaftoBc/s1600/T-1.png "); } ul.vay-social li.vay-gplouse { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYXyiC3qw7l6pklJlzXL7YpShcQMZfl1PrZzNJquYhnmzj7vdywCdcMEMch_FP1Q7sLoxncInWC9l26P83eNDFDriZlKIn_ScFOZQkfIjQF3KA0Odd20-Rdr9SdSmii8Ywugm4csGhZU/s1600/G-1.png"); } ul.vay-social li.vay-youtube { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9GPDRzKmS-Za0GznKwM9oDflInn35rRMnodzBkwJ6h4PGM9B-sazYkEZ0nqLH19JAoKeKJuo4wQjev0pokSe5_8TUOjEXyXT3lsDEzuC3pPRNaTRcSXG2S6uFmvnKgHvc3JRsSVBLnU/s1600/Y-2.png "); } ul.vay-social li.vay-rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQLJ7lChgvmcbSb-7aDQuXatFshn9lJdfbHZwJGGLE28_A-YEOLrElTEfMO7StyMLtWlOxNhZ_Wz1PCc5vawxY91YQtAZZa5xFfRItha53K2B4tGmaeedp0DGRpmfCrQaHQNRIjfMnq8Q/s1600/RSS-1.png "); } #vay-skin:hover li { opacity:0.1; } #vay-skin li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #vay-skin li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #vay-skin li:hover { opacity:1; } #vay-skin li:hover a strong { opacity:1; top:-5px; } form.feedburner{ margin:20px 0 0; display:block; clear:both; } .BD_STYLE{ padding:7px 15px 7px 5px; color:#666; font-weight:bold; text-decoration:none; border:1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .BD_EMAIL{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAaZmuOoigka2lltlTQ85ujHexFiH4gYHiuFr7WVbNhXt75VGL2Oy7QT-wSzopQM3gOh42CVRZ9cNTrzYWMLrxU5YkqQLzgtsiiNG1V0eLzlOdB3QhMOSpK-AnYqhHd3jQdJ20ejkDZ9w/s1600/emain-icon.png) no-repeat 0px 13px ; width:300px; padding:10px 0 0 55px; float:left; font-family: "Trebuchet MS",sans-serif; font-size:1.2em; font-weight:bold; margin:0 0 0px 0; color:#111; } .BD_SUBMIT{ color:#666; font-weight:bold; text-decoration:none; padding:6px 15px; border:1px solid #c4c4c4; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb),color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } #BD_EMAILWIDGET { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 5px; -moz-box-shadow: 0px 0px 5px #BBB; -webkit-box-shadow: 0px 0px 5px #BBB; box-shadow: 0px 0px 5px #BBB; min-height:60px; background: none repeat scroll 0 0 transparent; border: 1px solid #c4c4c4; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width:600px; margin:10px 0; } #BD_EMAILWIDGET td{ padding:3px 0; }

Install Program Tag HTML

Login ke dashboard anda
Masuk ke "Template"
lalu klik "Edit HTML"
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copas Code HTML dibawah ini, paste di bawah code <data:post.body/>

Klik show untuk melihat

Keterangan Code

Code tulisan warna merah ganti URL sesuai dengan tulisannya
Code tulisan warna biru ganti dengan code count feedburner anda
Code tulisan warna orange ganti dengan ID blog anda
Code tulisan warna hijau ganti dengan tulisan yang anda sukai

THANKS FOR YOUR VISIT... ^_^

Cara membuat email subcribe di blog

0 komentar:

Posting Komentar