Cara Membuat Artikel Berlangganan Mirip JalanTikus

Hallo,Sobat Blogger,Kesempatan Kali Ini saya Akan Memberikan Widget Yang wajib Ada di setiap blog,apa sih Widget Yang Penting satu ini ?? Ya,Akan saya Jawab dan Jelaskan di bawah

FEED BURNER/BERLANGGANAN ARTIKEL

Ini kejutan yang akan saya bagikan pada malam hari ini,Sebuah Kotak FEED Burner yang ada di blogger kita,Tentu dengan pengubahan sedikit,Pasti lebih menarik lagi.

Tak perlu panjang lebar silahkan Pasang CSS Ini di ]]></b:skin> atau </style>

.langganan.news-content{min-width: 300px;width: 100%;padding:20px;margin-top: 20px;margin-right: auto;background:#ce0a46;background:-webkit-linear-gradient(15deg,#1976d2,#1e88e5);background:-o-linear-gradient(15deg,#1976d2,#1e88e5);background:-webkit-linear-gradient(75deg,#1976d2,#1e88e5);background:-o-linear-gradient(75deg,#1976d2,#1e88e5);background:linear-gradient(15deg,#1976d2,#1e88e5);border-radius: 5px;-webkit-box-sizing:border-box;box-sizing: border-box;} .news-content{position: relative;} .sidebar-content .news-content .news-title{position:relative;display:block;font-family:Museo,sans-serif;font-size: 22px;line-height: 32px;} .langganan .news-title { font-family: Museo,sans-serif; font-size: 20px; margin-bottom: 15px!important; line-height: 15px; font-weight: 700; padding-left: 0; background-color: hsla(0,0%,100%,0);}.sidebar-content .news-title { margin-bottom: 20px; } .color.white { color: #fff; } .langganan .news-detail { font-family: Open Sans; font-size: 14px; line-height: 20px; } .color.white { color: #fff; } .news-detail { white-space: normal; } .langganan .email-langganan { position: relative; } .langganan .email-langganan:before { position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px; } .icon-mail:before { content: "\E012"; } [class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before { font-family: untitled-font-2!important; font-style: normal!important; font-weight: 400!important; font-variant: normal!important; text-transform: none!important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .langganan .email-langganan input { width: 100%; height: 40px; font-family: Open Sans; font-size: 14px; margin-top: 20px; border: 0; border-radius: 4px; padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; }  a, button, input, label { -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0; } user agent stylesheet input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] { padding: 1px 0px; } user agent stylesheet input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } user agent stylesheet input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; } user agent stylesheet input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb !important; } .langganan .email-langganan { position: relative; } .langganan .submit {    height: 35px;    width: 100%;    margin-top: 20px;    font-family: Museo,sans-serif;    font-size: 14px;    line-height: 35px;    text-align: center;    border: 0;    border-radius: 4px;    background-color: #3a2e28;    outline: 0;}.color.white {    color: #fff;}.trs-2 {    -webkit-transition: .2s;    -o-transition: .2s;    transition: .2s;}
button, input[type=button], input[type=submit], label {    cursor: pointer;    font-family: Open Sans;}
a, button, input, label {    -webkit-tap-highlight-color: rgba(255,255,255,0);    outline: 0;}; } form { display: block; margin-top: 0em; }.langganan .email-langganan:before {    position: absolute;    height: 16px;    width: 16px;    bottom: 12px;    left: 12px;    color: #d62e3d;    font-size: 16px;}
.icon-mail:before {    content: "\f0e0";}[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {    font-family: untitled-font-2!important;    font-style: normal!important;    font-weight: 400!important;    font-variant: normal!important;    text-transform: none!important;    speak: none;    line-height: 1;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}

Save Template.
Langkah Selanjutnya Pasang Code Ini di Tambah Gadget > HTML /javascript

<div id="" class="langganan news-content"><form action="https://feedburner.google.com/fb/a/mailverify/technics-engineer" method="post" target="popup"><div class="news-title color white">Berlangganan Artikel Gratis & Menarik setiap harinya . GRATIS !</div><div class="email-langganan icon-mail"><input type="email" placeholder="Alamat Email..." required="" data-role="none"><input type="hidden" value="jalantikus/feed" name="uri"><input type="hidden" name="loc" value="en_US"></div><button type="submit" value="LANGGANAN" class="submit color white trs-2" data-role="none">LANGGANAN</button></form></div>

Setelah selesai Save Dan Nikmati Hasilnya 

Sekian Tutorial kali ini semoga bermanfaat 

May 14, 2018 Blogger Tutorial