Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

Menu Header adalah (Navigasion Menu) yaitu menu yang biasa dibuat para blogger untuk menu tentang kategori apa saja yang disediakan di blog itu sendiri.  Menu Header ini sangat penting bagi pengunjung agar mereka bisa leluasa berselancar (Surfing) dan membaca blog kita lebih lama. Untuk Menu Header ketika pengunjung sedang membaca mereka membacakan otomatis membaca sampai kebawah, berarti pengunjung scroll down kan. Saya ingin menu header tersebut juga ikut kebawah, jika kalian penasaran caranya bagaimana.

Singkat cerita :  Awalnya saya iri dengan blog yang saya kunjungi, ketika saya membaca konten yang berkualitas itu atau saya sedang blogwalking saya melihat Menu Header yang mereka pakai melayang, meskipun saya scroll kebawah untuk membaca artikel sampai habis dan kembali ketempatnya seperti semula dengan posisi seperti awalnya. Setalah saya meneliti akhirnya saya tahu yang mereka gunakan "Sticky Position (Bar) With CSS Or JQuery". Kode tersebut saya ambil agar Menu Header yang saya gunakan tetap muncul meskipun di scroll kebawah. Cara membuatnya mudah banget, ikuti langkah-langkah berikut ini.

Baca Juga :

• Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive
• Cara Membuat Menu Header Keren dan Responsive

Screenshoot : 

Perhatikan! Menu Header ketika saya Scroll kebawah.

Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

Cara Pertama : 

1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode </body>
2. Copy&paste kode Java Script berikut ini, dan letakkan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

3. Perhatikan ID Class pada tulisan yang berwarna merah. Silakan ganti kode tersebut dengan kode Menu yang ada di Template anda. Biasanya .nav atau #menu
4. Sehingga menjadi Seperti ini <Saya Menggunakan ID Class #menu>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

5. Simpan Template!.

Cara Mencari ID Class pada Menu Header dengan Mudah

Jika anda kesulitan dalam mencari ID Class, saya akan kasih tau cara mencarinya dengan mudah. Anda cukup Inspect Elemen pada Menu Header lihat Souce kodenya pada bagian bawah kanan.

Perhatikan gambar berikut ini.

Ternyata saya Inspect Elemen pada Menu Header Demo Bloggers, Blogger itu punya saya. Ternyata ID Class itu menggunakan #nav. Tinggal ganti kode diatas yang bertuliskan warna merah dengan #nav. Mudah bukan?

Demikianlah Tutorial Blogger kali ini, jika anda mengalami kesulitan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda dan jangan lupa Scroll kebawah. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Visited and Search : Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah.

Read More

Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger

Related post adalah biasa disebut Artikel Terkait. Related post ini bisa dibilang user freandly karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama. Related post juga menuntun pengunjung blog kita menuju postingan atau artikel yang lain dan yang berkaitan dengan postingan yang mereka lihat. Dengan memasang Related post di blogger kemungkinan dapat meningkatkan pageview halaman meningkat- menurut master seo, karena berada dibawah postingan.

Related post kali ini yang saya postingkan adalah hanya menampilkan judul saja. Dimana Related post ini lebih ringan daripada menggunakan Related post Thumbnail (bergambar).

Screenshoot :

 Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger

 

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin>
2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> 

/* Related Post Title Only Start */
#related-post-title-only {
    overflow: hidden;
    margin: 15px 0;
    padding: 0
}
#related-post-title-only h3 {
    font-size: 20px;
    font-weight: bold;
    padding: 0 0 8px;
    margin: 0;
    color: #4C565F;
}
#related-post-title-only ul {
    margin-left: 20px;
    padding: 0 0 0 10px;
}
#related-post-title-only ul li {
    padding: 0 0 8px;
}
/* Related Post Title Only End */

3. Jika sudah? Temukan kode </head>
4.  Copy&paste kode berikut ini, dan letakkan diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();}//]]>
</script>
</b:if>

5. Selanjutnya, Temukan kode <data:post.body/> Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga.

Wajib Baca :   Anda bisa meletakkan kode berikut ini, dibawah Tombol Share (jika memasangnya)
6. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>
 

<!-- Related posts di bawah postingan -->
<div id='related-post-title-only'>
<h3>Artikel Terkait :</h3>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts di bawah postingan Berakhir -->

7. Simpan Template.

Demikianlah Tutorial Blogger kali ini, Jika terjadi kesalahan? Jangan  sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda, lihat bagian bawah. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Visited and Search :  Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger.

Read More

Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media. Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi jika blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke berbagai sosial media yang anda miliki. Hal ini agar orang tahu blog Anda untuk melihat terus-menerus alamat blog anda di Timeline mereka.

Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik. Dan kali ini saya akan mempostingan sesuai judul yaitu Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Screenshoot :

Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Cara Pertama :
 

1. Buka Blogger - Kemudian login.

2.  Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

Kode CSS

/* Share on Media Sosial Start */
.share-post{font-family:&#39;Arimo&#39;;text-align:center;margin-bottom:20px;margin-top:20px;margin-bottom:10px;padding:10px 0;}
.widget .post-body &gt; .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:5;list-style:none;position:relative;}
.share-post li:hover{}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
.share-post li:hover{}
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}
.bagitiga{-webkit-column-count:1;-moz-column-count:1;column-count:1;}}
@media screen and (max-width:480px) {
.share-post li{width:100%}}

.bpas-tooltip {position:relative;display:inline-block;}
.bpas-tooltip:before, .bpas-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}   
.bpas-tooltip:hover:before, .bpas-tooltip:hover:after {opacity:1;}
.bpas-tooltip:before {content:&#39;&#39;;position:absolute;background:transparent;border:4px solid transparent;position:absolute;}       
.bpas-tooltip:after {content:attr(data-bpas-tooltip);background:#FF9934;color:#fff;padding:6px 8px;font-family:&#39;Arimo&#39;;font-size:12px;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;}
.bpas-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#FF9934;}
.bpas-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px;}
.bpas-tooltip-bottom:before {top:100%;left:50%;margin:-6px 0 0 0;border-bottom-color:#FF9934;}
.bpas-tooltip-bottom:after {top:100%;left:50%;margin:6px 0 0 -10px;}
.bpas-tooltip-right:before {left:100%;bottom:50%;margin:0 0 -4px 0;border-right-color:#FF9934;}       
.bpas-tooltip-right:after {left:100%;bottom:50%;margin:0 0 -13px 12px;}
.bpas-tooltip-left:before {right:100%;bottom:50%;margin:0 0 -4px 0;border-left-color:#FF9934;}       
.bpas-tooltip-left:after {right:100%;bottom:50%;margin:0 8px -13px 0;}
/* Share on Media Sosial End */

3. Jika sudah? Temukan lagi kode <data:post.body/> Kode ini biasanya lebih dari satu, silakan Anda pilih yang kedua/ketiga.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Wajib Baca :
 Anda bisa meletakkan kode dibawah ini diatas related post, next-previous, subscribe dll.
(jika memasangnya)

Kode HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
</b:if>

5. Jangan lupa untuk memasang Font Awesome Icons. Karena pada tombol share ini, menggunakan Font Awesome <Contoh : fa fa-facebook>
6. Temukan kode </head>
6. Copy&paste Font Awesome Icons, dan letakkan diatas kode </head>

Java Script

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Arimo:400italic,400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>

7. Simpan Template.

Demikian Tutorial Blogger kali ini, bila ada kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Visited and Search : Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Read More

Cara Membuat Sosial Media Share Buttons for Blogger

Sebelumnya saya pernah posting cara membuat berbagai "Tombol Sosial Media Share" Tujuan nya sama yaitu untuk meningkatkan pengunjung. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung. 

Baca Juga :

• Cara Membuat Tombol Share Buttons Responsive pada Blogger
• Cara Membuat Flat Social Share Buttons di Blogger
• Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger
• Cara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog
• Cara memasang Tombol Share di Blogger, Responsive!

Screenshoot :

Cara Membuat Sosial Media Share Buttons for Blogger

Cara Pertama :1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode <CTRL+F> ]></b:skin> atau </style> 
2. Copy&paste kode berikut ini, dan letakkan diatas kode ]></b:skin> atau </style>  

/* Share postingan Start*/
.share-postingan{height:33px;position:relative;line-height:0;margin:0 0 20px;padding:0}
.share-artikel{display:block;margin:0;padding:0}
.share-artikel a{float:left;width:20%;height:45px;line-height:45px;color:#fff;font-weight:400;font-size:28px;text-align:center;display:inline-block;box-sizing:border-box;opacity:.75;margin:0;padding:0;transition:all .25s ease}
.share-artikel a:hover{opacity:1}
.share-artikel .fac-art{background:#3b5998}
.share-artikel .twi-art{background:#00acee}
.share-artikel .goo-art{background:#db4a39}
.share-artikel .pin-art{background:#CA2127}
.share-artikel .lin-art{background:#0077B5}
/* Share postingan End*

3. Jika sudah? langkah selanjutnya adalah memasang Font Awesome Icons. Karena pada tombol share sosial media ini menggunakan font awesome icon. ( Contoh : fa fa-facebook )
4. Temukan kode </head>
5. Copy&paste kode berikut ini, dan letakkan diatas kode </head> 

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

6. Terakhir, Temukan kode <data:post.body/>
7. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/> 

<!---Share-postingan start-->
<div class='share-postingan'>
<div class='share-artikel'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/></a>
</div>
</div>
<!--Share-Artikel End -->

8. Simpan Template.

Demikian Tutorial Blogger kali ini, bila anda mengalami kesalahan? Silakan jangan sungkan untuk berkomentar. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Search and Visited : Cara Membuat Sosial Media Share Buttons for Blogger

Read More

Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive

Menu Navigasi ini sering digunakan para blogger untuk bagian : About, Contact us, Privacy Policy dan Disclaimer. Menu ini sangat penting diterapkan di blogger Anda, karena ini memang penting, kenapa penting? Jika anda meminta permohonan Iklan Adsense maka menu navigasi ini harus ada dibagian blog anda. Top menu navigation menu ini merupakan sebuah tab menu yang berisi penunjuk arah pada bagian kategori/label dari Blog atau Situs, dan berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu navigasi ini sendiri berada pada bagian atas atau Header. Banyak para blogger menggunakan menu navigasi agar blog mereka terlihat lebih teratur dan memudahkan pengunjung untuk mencari apa yang mereka inginkan.

Baca Juga :

• Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy

Screenshoot : 

Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive

Cara Pertama :1. Buka Blogger - Kemudian login

2.  Dashboard - Template

3. Edit HTML

Proses Pembuatan :

1. Temukan kode </head>

2. Copy&paste kode berikut ini, dan letakkan diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Wajib Baca :

1. Jika Font Awesome Icon sudah dipasang di blog Anda sebaiknya kode   
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/> Silakan anda hapus. Jika belum dipasang? Sebaiknya pasang. Karena Icon Sosial Media pada menu ini menggunakan Font Awesome.
2. Jika blog anda sudah memasang JQuery pada blog anda, sebaiknya kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> silakan anda hapus jika sudah ada didalam template anda. Jika belum? Sebaiknya dipasang.

3. Jika sudah? Temukan kode ]]></b:skin>
4. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin>

/*Top Menu Navigasi */
.menu-wrapper {background:#333;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#FF9934;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;}
.top-menu li.socialwrap a:hover{background:#FF9934;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}

@media only screen and (max-width:768px) {
.menu-top li ul { background:#222222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#fff;display:inline-block;font-family:&quot;Open Sans&quot;;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:&quot;\f03a&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#eee;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

5. Terakhir, Temukan kode <div class='content-wrapper'> . <div class='header-wrapper'> . 
<div class='header-outer'> .  Letakan kode berikut ini, dan letakkan diatas kode yang sudah disebutkan diatas.

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
<li><a href='###' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
<li><a href='###' title='Sitemap'><i class='fa fa-list'/> Sitemap</a></li>       
<li><a href='###' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
<li><a href='###' title='Privacy Policy'><i class='fa fa-unlock-alt'/> Privacy Policy</a></li>
<li class='socialwrap pinterest'><a class='socialwrap pinterest' data-bpas-tooltip='Follow us on Pinterest' href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a></li>
<li class='socialwrap youtube'><a href='###' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='###' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a class='socialwrap google' data-bpas-tooltip='Follow us on Google+' href='###' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='socialwrap twitter'><a class='socialwrap twitter' data-bpas-tooltip='Follow us on Twitter' href='###' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='socialwrap facebook'><a class='socialwrap facebook' data-bpas-tooltip='Follow us on Facebook' href='###' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

6. Simpan Template.

Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar. Silakan anda lihat blog anda, apakah widget tersebut sudah muncul atau belum. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading &Sharing and visited : Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive

Read More

Cara Membuat Related Post Thumbnail&Snippet Responsive

Related post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Related post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Related bisa disebut juga user freandly karena memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar, sejajar ke kana, hanya menampilkan judul saja dll. Related Post yang saya berikan ini berbentuk vertikal mengarah kebawah serta bergambar dan snippet dibawahnya.

Baca Juga :

• Cara Membuat Related Post Yang Paling Simple, dan Aman!

Screenshoot :

Cara Membuat Related Post Thumbnail& Snippet Responsive

Cara Pertama :1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin>

/* CSS Related Posts */
#maycyberrelated { background-color:#FFF; margin:10px 0 0 0; padding:10px;border:1px solid #ddd}
#maycyberrelated h4 { color:#fff;font-family:&#39;Arimo&#39;;font-size:18px; margin:-10px -10px 10px; padding:10px 3px; text-align:center; font-weight:bold;position:relative; background-color:#374760;}
#maycyberrelated ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#maycyberrelated ul { margin-top:10px }
#maycyberrelated li { float:left; width:100%; margin:0 0 5px}
#maycyberrelated .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#maycyberrelated strong { font-weight:bold;font-family:&#39;Arimo&#39;;font-size:15px; line-height:1.1em;color:#222 }
#maycyberrelated p { margin:2px 0 0;font-family:&#39;Arimo&#39;;font-size:15px;text-align:justify; }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBMBNLRYQgDiNXD67wV_ua1Xo0i1NRnhPiLggl3YkGh0m_tGNziEPfrktizW0m6hzjn9-5uWKI3OqyVD3EN4JOYSpK63xiX9hyphenhyphenienc_VbQqseM0QuMJQlUv91UkUMOQ25UXWHdoS6E_kn/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }
#virelated-posts {margin:20px 20px 20px 0;padding:0;}
ul#virelated-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;}
ul#virelated-summary li:last-child{border-bottom:none;}
ul#virelated-summary li img{display:none;}
ul#virelated-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}
#virelated-summary .news-text {display:block;padding:0;font-size:12px;margin-bottom:0;}

3. Jika sudah? Temukan lagi kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
4. Copy&Paste kode berikut ini, dan letakkan dibawah kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Wajib Baca : kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> biasanya lebih dari satu, silakan anda pilih yang pertama.

<div id='virelated-posts-mobile'>
                <h3>Related Posts :</h3>
                <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
                </div>

5. Terakhir, Temukan kode <data:post.body/>
6. Copy&Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/> 

Wajib Baca :
 
Biasanya kode <data:post.body/> lebih dari satu, silakan anda pilih yang kedua/ketiga.
Jika bagian <data:post.body/> tidak bisa, atau tidak muncul widget related post. Anda bisa meletakkan kode diatas, tepat dibawah tombol share, atau dibawah about arthor, atau diatas next-previous.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='maycyberrelated'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmvXOnafDdoxpfD0BjDD4RaQJGd4eWhNaya_9s7HczrRgLlIDNcpbvEkLL8LKm6YuYZojNTbb2M17TyN0WxsjL2jS1elkusPmpgHVgDZ0XX4h81zhStdjT2A5BbeQAoZCeEU2VhHaVkhO/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Related Post",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="maycyberrelated"></div>');f.containerSelector="#maycyberrelated"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#maycyberrelated-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#maycyberrelated"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="maycyberrelated"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="maycyberrelated-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#maycyberrelated",
maxPosts: 6,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
</b:if>

7. Simpan Template.

Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar pasti saya akan membantu anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing and Visited : Cara Membuat Related Post Thumbnail& Snippet Responsive.

Read More

Cara Membuat Tombol Share Buttons Responsive pada Blogger

Setiap Blogger jika memang ingin website yang anda kelola meningkat prioritasnya serta yang terbaik, efektif yaitu dengan cara berbagi konten gratis ke sosial media. Cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs adalah dengan rajin menge-share artikel kita ke media sosial, seperti Facebook, Twitter, Dll. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media dari Blogger yaitu dengan cara memasang tombol share buttons.

Baca Juga :

• Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger
• Cara Membuat Flat Social Share Buttons di Blogger

Selain Tujuan berbagi ke media sosial adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik mengklik postingan Anda, Selain itu juga Tujuan berbagi ke media sosial adalah agar orang lain tahu blog Anda, dan melihat terus-menerus alamat blog anda di Timeline mereka. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung dengan hanya satu klik. Karena ini memang dibutuhkan, sebaiknya Anda memasang Tombol Share di blog Anda.

Screenshoot :

Cara Membuat Tombol Share Buttons Responsive pada Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template

3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> 

/* Share Buttons RRSS
----------------------------------------------- */
.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111}

/* Share Buttons RRSS End
----------------------------------------------- */

3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini, dan letakkan diatas </body>

<script type='text/javascript'>//<![CDATA[
/* Start Share Buttons RRSSB */
(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each(function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o/i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery);

/* Share Buttons RRSSB: JavaScript Ends */
//]]></script>

5. Jika sudah? Terakhir, Temukan kode <data:post.body/> . Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga.
6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

<!-- RRSSB Share Buttons Start -->
<ul class='rrssb-buttons'>
 <li class='email'>
  <a expr:href='&quot;mailto:?subject=Check%20out%20&quot; + data:post.title + &quot;&amp;body=Visit:%20&quot; + data:post.canonicalUrl '><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a>
 </li>
 <li class='facebook'>
  <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434                                         c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726                                         c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a>
 </li>
 <li class='linkedin'>
  <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803                                         c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048                                         h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501                                         c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546                                         C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a>
 </li>
 <li class='twitter'>
  <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32                                     c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155                                     C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965                                     C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683                                     c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851                                     C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a>
 </li>
 <li class='reddit'>
  <a expr:href='&quot;http://www.reddit.com/submit?url=&quot;+data:post.canonicalUrl' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg>
</span><span class='text'>reddit</span></a>
 </li>
 <li class='googleplus'>
  <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
                                    <g>
                                        <g>
                                            <path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663                                                 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027                                                 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068                                                 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562                                                 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41                                                 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511                                                 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478                                                 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492                                                 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479                                                 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
                                            <polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004                                                 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      '/>
                                        </g>
                                    </g></svg></span><span class='text'>google+</span></a>
 </li>
 <li class='pinterest'>
  <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785                                     C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458                                     c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557                                     c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168                                     C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239                                     c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a>
 </li>
</ul><!-- RRSSB Share Buttons End -->

7. Silakan Simpan Template.

Sekian Tutorial Blogger kali ini, Jika terdapat kesalahan silakan jangan sungkan untuk berkomentar. Silakan anda lihat postingan blog anda atau lihat bagian bawah blog anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Share Buttons Responsive pada Blogger

Read More

Cara Membuat Widget Subscribe Newsletter dibawah Postingan

Salah satu untuk mendapatkan pengunjung setia adalah memasang kotak berlangganan
(Subscription Box) di Blogger anda. Kotak berlangganan (Subscription Box) ini sangat penting untuk sebuah blog. Dengan begitu pengujung akan lebih mudah untuk mendapatkan update postingan blog via email. Nantinya ketika Anda membuat postingan, maka postingan atau artikel tersebut akan terkirim melalui inbox pelanggan.

Pada kesempatan kali ini saya akan membagikan Tombol Subscribe Newsletter dibawah postingan, dan juga bisa dipasang di bagian sidebar, footer dll. Tapi nanti saya akan menjelaskan kedua cara memasangnya.

Baca Juga :

• Cara Membuat Kotak Berlangganan (Subscription Box) Responsive! Dibawah Postingan Blogger.
• Cara Membuat Widget Kotak Berlangganan Plus Media Sosial di Blogger

Screenshoot :

Cara Membuat Widget Subscribe Newsletter dibawah Postingan

Cara Pertama : 

1. Buka Blogger - Kemudian login.

2. Dashboard - Template

3. Edit HTML

Proses Pembuatan : 

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>

2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}

3. Jika sudah dipasang? Temukan kode </head>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

5. Jika sudah dipasang? Temukan lagi kode <data:post.body/> biasanya kode ini lebih dari satu, silakan pilih yang kedua atau yang ketiga.
6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Jika kesalahan pada kode <data:post.body/> :

Cara Alternatif :

A. Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah Related Post jika memang anda memasangnya.
B. Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah Share Buttons.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

NB : Silakan anda ganti tulisan yang berwarna merah dengan kepunyaan anda.

Selain dibawah postingan? Subscribe ini juga bisa dipasang di Sidebar, Footer

Caranya :

1. Buka Tata Letak/Layout.

2. Add a Gadget

3. Pilih HTML Java Script

4. Copy & Paste kode berikut ini, dan letakkan di kolom HTML Java Script.

Screenshoot : 

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

Terakhir, Silakan Simpan Template. Silakan anda lihat postingan blog anda atau lihat bagian sidebar atau footer anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Tombol Subscribe Newsletter dibawah Postingan

Read More