Cara membuat email subscribe di blog

Discussion in 'Blogger' started by Rivaiblog, Jun 8, 2013.

  1. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    Email Subscribe
    Email subscribe dapat dikatakan suatu aplikasi dalam halaman situs untuk mendaftarkan email pengunjung agar mendapatkan kiriman artikel secara otomatis dari situs tersebut ke email pengunjung, agar halaman suatu situs itu lebih interaktif.

    Fungsi

    [​IMG]

    Email Subscribe sangat berguna buat halaman situs kita khususnya untuk halaman blogspot agar lebih aktiv hubungan antara pengunjung dan owner situs tersebut. Pada dasarnya email subscribe 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 subscribe pada halaman blog kita sangat bagus disamping memperindah halaman blog kita.

    Dalam tutorial kali ini saya sengaja membuat code tag HTML subscribe 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 subscribe di blogspot' ini dapat membantu para sobat blogger saya untuk mendesign blognya agar lebih ramah pengunjung. Gambar dibawah ini adalah gambar demo email subscribe yang akan kita buat.

    [​IMG]

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

    Install Program CSS
    1. Login ke dashboard anda
    2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
    3. Cari code ]]> 
    4. Copy Code script CSS dibawah ini, pastekan diatas code ]]> tadi

    Code:
    .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("http://4.bp.blogspot.com/-E91PS1bAsZw/UYvYd9vZsGI/AAAAAAAABFc/AI4TkWQXgd8/s1600/FB-1.png "); }
    ul.vay-social li.vay-twitter { background-image:url("http://3.bp.blogspot.com/-qxb6-Q0TNw8/UYvYlGs4W9I/AAAAAAAABGI/xyiD1yhDfxY/s1600/T-1.png "); }
    ul.vay-social li.vay-gplouse { background-image:url("http://4.bp.blogspot.com/-LJXvGstrucY/UYvYeUNXT8I/AAAAAAAABFg/r7HPBE22y5U/s1600/G-1.png"); }
    ul.vay-social li.vay-youtube { background-image:url("http://4.bp.blogspot.com/-9EwbelK6J2w/UYvYn4dxH3I/AAAAAAAABGc/NQS4GvLn1fc/s1600/Y-2.png "); }
    ul.vay-social li.vay-rss { background-image:url("http://4.bp.blogspot.com/-A9roDjDVabQ/UYvYhnoNfOI/AAAAAAAABF0/kZlPN6rfP2o/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(http://1.bp.blogspot.com/-4g7ZugQ0Oy0/UYNzzVAZ6mI/AAAAAAAAA9Y/w90In-93dQY/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
    1. Login ke dashboard anda
    2. Masuk ke "Template"
    3. lalu klik "Edit HTML"
    4. Cari code ( tekan Ctrl+F untuk mempercepat )
    5. Copas Code HTML dibawah ini, paste di bawah code

    Code:
    <div id='BD_EMAILWIDGET'>
    <div>
    <table width='100%' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    
    <tbody>
    <tr style='border:none; margin: 0px 0px -30px 0px; padding: 0px 0px 0px 0px;'>
    <td align='left' height='100' style='border:none;' valign='top' width='364'>
    <p style='color:#111; font-size: 11px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '>
    Judul Artikel : <a expr:href='data:post.url'>
    <data:post.title/>
    </a> </p>
    <div class='BD_EMAIL'>
    Subscribe this Artikel 
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
    <input name='uri' type='hidden' value='ID feedburner'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='BD_STYLE' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
    <input alt='' class='BD_SUBMIT' title='' type='submit' value='KIRIM'/>
    </form>
    </div> </td>
    <td align='right' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' valign='top' width='206'> Terimakasih atas kunjungannya.! bila anda suka dengan artikel ini silahkan berlangganan artikel terbaru via Email dengan geratis dari blog ini..!! <br />
    NAMA BLOG ANDA</td>
    </tr>
    </tbody>
    </table>
    <div align='left'>
    <ul class="vay-social" id="vay-skin">
    <li class="vay-facebook">
    <a href="URL FACEBOOK ANDA " target="_blank" ><strong>Facebook</strong></a>
    </li>
    <li class="vay-twitter">
    <a href="URL TWITTER ANDA " rel="nofollow" target="_blank" ><strong>Twitter</strong></a>
    </li>
    <li class="vay-gplouse"> 
    <a href="URL GOOGLE PLUS ANDA "  rel="nofollow" target="_blank" ><strong>Google+</strong></a>
    </li>
    <li class="vay-youtube">
    <a href="URL YOU TUBE ANDA " rel="nofollow" target="_blank"><strong>YoutubeChanel</strong></a>
    </li>
    <li class="vay-rss">
    <a href="URL RSS ANDA/FEEDBURNER " rel="nofollow" target="_blank" ><strong>RSS</strong></a>
    </li></ul> <div align="right" style="margin-top:-60px; margin-bottom: 3px;"> <a href='http://feeds.feedburner.com/RivaiSilaban'>
    <img alt='' height='26' src='http://feeds.feedburner.com/~fc/RivaiSilaban?bg=660000&fg=99FF00&anim=1' style='border:0' width='88'/> </a><a href='http://www.blogger.com/follow-blog.g?blogID=<strong>ID BLOGSPOT ANDA</strong> ' rel='nofollow' target='_blank' title='Join to Blog'>
    <img src='http://1.bp.blogspot.com/--55I87MAgVU/UX9oHwjUE9I/AAAAAAAAA4k/O_3rtuLpveY/s1600/follow.png'/>
    </a></div></div></div></div>
    


    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

    sumber :Cara membuat email subcribe di blog
     
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    oh ya demo nya jangan lupa

    *bingung* oh ya demo nya jangan lupa dicantumin mas .... keren dahh *bagus*
    sbnernya saya jarang subscribe" *jail*
     
  3. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    479
    Likes Received:
    14
    Trophy Points:
    18
    Google+:
    Banyak versinya nih Email

    Banyak versinya nih Email Subscribe, tapi saya engga pernah pasang *ketawa4*
     
  4. sakaji

    sakaji Member

    Joined:
    Mar 13, 2013
    Messages:
    165
    Likes Received:
    2
    Trophy Points:
    18
    cakep dah tutorialnya. tapi

    cakep dah tutorialnya. tapi bukannya, untuk blogspot sendiri udah ada defaultnya ya? atau pake feedburner.
     
  5. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    makasih sob #cayun

    Demonya hanya gambar aja sob, soalnya saya lihat fasilitas di blon mendukung, saya kemarin sudah coba, sebenarnya enak juga untuk subcribe suatu blog biar lebih gampang untuk kembali lihat blog tersebut apa bila memang artikelnya cocok untuk kita.
     
  6. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    makasih sob #samuel

    memang sih saran saya pilih yang sesuai seleranya sob, dan ringan untuk loding halaman blog kita. tapi saya lihat webnya bang samuel bagus dan saya rasa perlu juga dipasang apa lagi untuk web domain pribadi, untuk meningkatkan pageranking di mesin pencari, soalnya bila kita update artikel baru pastinya di subcribe secara otomatis ke member kan nambah review halaman situs kita.. heheh :)
     
  7. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    Benar sob @sakaji

    Sebenarnya sob 'Tutorial email subcribe ' yang ini juga memakai jasa geratisan feedburner bang, hanya jasa saya modifikasi, dan memasukkan beberapa fitur dalam email subcribe ini biar lebih bagus dan para pengunjung blog kita dapat menggunakan fasilitas lainnya pada email subcribe ini. Bahkan saya menambahkan fitur feedcount dari feedburner bang..!!
     
  8. ayahnyanadia

    ayahnyanadia Well-Known Member

    Joined:
    Apr 4, 2013
    Messages:
    1,353
    Likes Received:
    151
    Trophy Points:
    63
    Google+:
    Bagus mas tutorialnya. keep

    Bagus mas tutorialnya. keep posting di forum ini ya..
     
  9. shofighter

    shofighter Member

    Joined:
    Mar 6, 2013
    Messages:
    236
    Likes Received:
    9
    Trophy Points:
    18
    Google+:
    sering gak kebaca, malah

    sering gak kebaca, malah numpuk diemail
     
  10. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    makasih bang #ayahnyanadia

    Makasih bang, selagi masih tetap sehat kita tetap akan selalu tukarilmu bang...
     
  11. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    yup betul juga bang...!!

    Memang ada juga yang tidak terlalu sering buka email, tapi kalo emang kita lagi login keblog, sekalian aja bang buka email mana tau ada artikel yang bermanfaat kan jadi simpel langsung baca dan tau alamatnya artikel itu dengan cepat daripada bloging makan waktu ...heheeh salam kenal bang #shofighter
     
  12. royger

    royger Member

    Joined:
    Feb 15, 2013
    Messages:
    388
    Likes Received:
    11
    Trophy Points:
    18
    Google+:
    Info abang yang satu ini mantap

    Info abang yang satu ini mantap.. *bagus*
     
  13. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    makasih.. bang @royger

    *kagum* makasih.. bang @royger
     
  14. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    terimakasih...

    terimakasih atas pendapatnya...
     
  15. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    Bingung....

    beli apa ya, saya kurang memahami pertanyaannya bos,... *bingung*
     
  16. KBlogger

    KBlogger New Member

    Joined:
    Mar 7, 2014
    Messages:
    68
    Likes Received:
    0
    Trophy Points:
    6
    Emm...

    simpen dulu kodenya mas,
     
  17. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    KBlogger wrote:

    silahkan silahkan...
     
  18. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    antoz wrote:

    thx :)
     
Loading...

Share This Page