Artikel Terkait Dan Email Subscribe Dibawah Postingan

Widget Artikel Terkait Dan Email Subscribe Dibawah Postingan SOMAZINGBLOG.COM- Kembali lagi melanjutkan postingan yang sebelumnya, Widget Artikel Terkait Dan Email Subscribe Dibawah Postingan ini adalah evolusi dan penambahan dari Email Subscribe Box With Hover Effect. Karena menggabungkan 2 widget,anda bisa lebih menghemat tempat di blog untuk sekedar 2 widget ini.

Widget Artikel Terkait Dan Email Subscribe Dibawah Postingan

KODE CSS, Taruh diatas </style>

/* -- RELATED POST AND SUBSCRIBE EMAIL -- */
#subs-and-redat {margin:0;padding:15px;background:#292929 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirHkA6arufOtrGIFy7yS9kl7_whOZWGnHZ_U0JUZwZ5TgvQDqzR-S3flc8opG7LyvKhD2UFqhbU5LkmYZON03AtwmvAyMZiDSxRnNR_q-qKIa6g2aYODwgYyE8Sp362ckT41lpuqzBsh7/s1600/footer-imege.png) no-repeat top left;border-radius:3px;}
.kotakleft{background:none; width:44%; margin:0; padding:15px;display:block;float:left}
#related-post h4{font-family:'Oswald', Arial, sans-serif; font-size:22px; font-weight:normal; text-transform:uppercase; color:#eee; margin:0 0 15px;margin-top:-15px;}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Kr6a9PWkKXBf7R6U60IKetMk9xeYbXJ-_QQtR06plo8NvCGs9FQHxTpK0GVkAV7K8ZFxb36bw58Qmea1bMDA3U-TJEDWrjOjOf-6-peHBMruye_EmX2DIZFKD5BRuXXIESZGdX77wZy7/s1600/bullet.png) 1px 9px no-repeat; line-height:1.8em; margin:0; padding:0 0 5px 20px}
#related-post ul{list-style:none; margin:0; padding:0}
#related-post a{font-size:14px;color:#eee}
#related-post a:hover{color:#ccc}
#subscribe-css{margin:0;padding:0;float:right;display:block;position:relative;}
.subscribe-wrapper{background:#2F3741;width:258px;height:200px;color:#fff;font:14px Roboto;line-height:20px;padding:40px 20px 10px 20px;text-align:center;border-radius:3px;border:1px solid #222;}
.subscribe-form{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:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSJmXqhe81VA677SyoyxWZYGzqHHc6r8nEYx6DSWPD1E8eP9j89ZnxlS-B_w2-tq5PLBh7ybzAUlVVJgxP_v8ZIM_lwkYaRhd5WZiiPMNTUZ8Il7YlezoIRA7XGypkB-6NuhGSy4DIQL7/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button{background:#B42F2F;color:#fff;cursor:pointer;padding:5px 10px;text-transform:none;width:100%;border:none;font:17px Oswald;text-transform:uppercase;transition:all .2s ease-in;border-radius:1px;box-shadow:inset 0 1px 1px 0 #842B2B;}
.subscribe-css-email-button:hover{transition:all .2s ease-in;background:#A61D1D;}

Taruh kode HTML berikut dibawah <data:post.body/< yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subs-and-redat'>
<div class='kotakleft'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 4,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
</script>
<script src='http://yourjavascript.com/30417213541/relatedpost-dte.js' type='text/javascript'/>
<div style='clear: both;'/>
</div>
<div id='subscribe-css'>
<div class='subscribe-wrapper'>
<p>Ikuti Blog ini dengan memasukan Email Anda dibawah ini</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=blogmassoma' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogmassoma&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogmassoma'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe Now !'/></form>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>

Silakan ganti blogmassoma dengan URL Feedburner anda.

Tweet