Armaila Blogger | Cara Menambah Link Pada Gambar HTML - Gambar yang muncul di blogspot atau web bukan sekedar pajangan semata. Dengan gambar owner atau admin blog bisa berpromosi dan mengarahkan klicker nya ke arah yang ditetapkan oleh admin berupa link yang telah disisipkan ke dalam gambar tersebut.

Menambah Link Pada Gambar HTML

Dan berikut ini adalah kode yang diperlukan saat akan menyisipkan link kedalam gambar

Keterangan:

href: Link tujuan
src: Link gambar

Selanjutnya kode tersebut letakkan pada widget yang diinginkan.

Hasilnya akan seperti berikut ini;


Selamat mencoba dan semoga sukses

Setiap seorang blogger tentu memiliki alasan tersendiri untuk mebatasi iklan agar tidak muncul di halaman tertentu blognya salah satunya di halaman statis blogspot.

Nah. hal yang sama juga terjadi pada Admin yang ingin membatasi agar iklan tidak muncul di halaman Blog yang admin buat.

Setelah browsing akhirnya admin mendapatkan panduan atau tutorial tentang "Cara Agar Kode Iklan Tidak Muncul di Halaman Blogspot Halaman Statis Blogger" dan berhasil atau bekerja dengan baik setelah admin praktekkan.

1. Silahkan login blogger denggan akun gmail anda.
2. Kemudian pada menu utama blogger, silahkan pilih Tema, lalu klik Edit HTML.
3. Kemudian silahkan cari kode <data:post.body/>, mungkin anda akan sedikit binggung untuk mencari kode <data:post.body/>, mengingat didalam sebuah template blogger terdapat lebih dari satu kode tersebut.

Untuk memastikan kode mana yang dimaksud, silahkan cari kode <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->.

4. Selanjutnya sebelum memasang iklan, Anda harus menambahkan kode berikut.




Contoh kode iklan admin

Posisi / letak iklan tepat di tengah-tengah.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
Kode iklan yang sudah di parse.
</center>
</b:if>

Posisi / letak iklan di sebelah kiri menyatu dengan artikel.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;padding-right:15px'>
Kode iklan yang sudah di parse.
</div>
</b:if>

Keterangan :

6. Selanjutnya silahkan klik Simpan Template.

7. Selesai.

Sumber: isotenan

Sebelumnya Armaila ada sharing tentang cara membuat box iklan melayang saat discroll kebawah. Namun setelah Armaila mencoba mengaplikasikannya di web pulsa Apn.AkhirMali.com ternyata tidak berfungsi.

Akhirnya admin menemukan "Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2" dan cara ini berhasil untuk template frontier yang admin terapkan per tanggal 7 Juli 2020 ini.

Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2

1. login akun blogger anda.

2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode </head>

<!-- STICKY https://blogger.armaila.com/2020/07/cara-membuat-widget-sticky-pada-sidebar-blog-versi-2.html -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
var offset = $("#HTML1").offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() &gt; offset.top) {
$("#HTML1").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#HTML1").stop().animate({
marginTop: 0
})
}
})
});
</script>
<!-- STICKY END -->

<!-- slide 1 code start -->

<li>

 <a href='ENTER_SLIDE_1_LINK_HERE'>

  <img class='slider-element' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kFtvJpXDDRJbkuhPB-OmeYSaUMHPfrrli8gxNQfVKJeAJpCtLvgkf0BWa-auvSYvfwZMciYzxojtGDJMLXC8hsPHL1g6WJ4UFJZ-LUMHkAzf_VqSPMemgffbuwDeT1iZ1fn6eo-V1MW_/s1600/slide-1.jpg'/>

  <h4 class='slider-element'>Enter Slide 1 Title Here</h4>

  <p class='slider-element'>This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words. This is a Blogger template by NewBloggerThemes.com...</p>

 </a>

</li>

<!-- slide 1 code end -->

Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna | Admin baru saja mengabadikan sebuah artikel tentang "Membuat Tombol Back To Top" namun saat akan menuliskan kode kode terjadi kendala setelah ditampilkan yaitu di selangi oleh iklan. Sehingga kode yang muncu tidak full.

Salah satu cara agar script kode html itu muncul secara lengkap tanpa di selangi oleh apa pun adalah dengan membuat kotak/box.

Setelah googling akhirnya admin mencoba mengikuti sebuah artikel yang dishare oleh "coldeja" dan ternyata informasi yang ada disana setelah saya praktekkan benar benar berhasil membuat kotak yang berwarna dan bisa diisi script html atau hanya text saja.

Berikut ini adalah Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna dengan bermacam macam pilihan

MASUKKAN KODE HTML DISINI

MASUKKAN KODE HTML DISINI

TULISAN DISINI

MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA

Ganti kode #0180cf untuk mengganti warna border, #0180cf untuk mengganti warna background, dan Merah untuk kode html kamu

Script HTML Cara Membuat Back To Top di Blogspot | Untuk memudahkan kembali keatas. Maka ada kode yang dibutuhakan yang diterapkan di template blogspot kita. berikut ini adalah langkah langkah selengkapnya:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

/* Back To Top */ #back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>         
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>

Catatan;

background:#E73037 Silahkan ganti warnanya dengan melihat kodenya DISINI sebagai contoh #0b366b adalah kode yang warnanya seperti gambar back to top di artikel ini.

Sumber: Masyadi

Frontier Blogger Template Free Download | Template ini dapat didownload dari google drive yang merupakan salah satu versi yang free. Untuk versi premium bisa langsung order ke web resminya. 

Bagi kamu yang mencari templat untuk blogspot "Frontier" setidaknya sudah mengetahui apa saja fitur yang tersedia serta tampilannya.

Berikut ini adalah informasi lengkap yang admin dari "NewBloggerThemes"

Theme Categories: 1 Sidebar, 2 Columns, 3 Columns Footer, Adapted from Wordpress, Blue, Color Options, Featured Section, Fixed width, Grey, Header Banner, Magazine, Pro Version Available, Responsive, Right Sidebar, Slider, Top Navigation Bar, White,
Template Name:Frontier
Author / URL:NewBloggerThemes | https://newbloggerthemes.com/
Designer / URL:ronangelo | http://ronangelo.com/
Published Date:November 29, 2015
Updated Date:February 26, 2017

How To Add Links to Top Navigation Menu

Top Menu - Frontier Blogger Template

Go to "Layout". Click on "Edit" link of "Edit This Menu" widget.

Now add your links to that link list widget.

How To Change Header Logo

Find this image address in "Edit HTML" and replace it your logo image address:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_80L3lh8AZtC8UNxx_t2w6wzIvN0JwrF2bIgHWR8KOtdz_HHYBGrIy_-d2kVxbhEVRDIFVyX6s437REvfY2t69KRG83CoYJKiBthrU8SixKhhMt8w8nvB3OHE7wLJKEGezI0KVmG7XVsG/s1600/logo.png

How To Configure Main Drop-down Menu

Primary Menu - Frontier Blogger Template

Find this in "Edit HTML":


Replace "#" marks with real URLs and change anchor texts as you like.

How To Configure Featured Content Slider:

Slider - Frontier Blogger Template

There are 5 slides in the slider. You can add or remove more slides if you want. This is the code for the first slide:


Now replace,
"ENTER_SLIDE_1_LINK_HERE"s with your real slide link,
"Enter Slide 1 Title Here" with your real slide title,
"This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words. This is a Blogger template by NewBloggerThemes.com..." with your real slide description,
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kFtvJpXDDRJbkuhPB-OmeYSaUMHPfrrli8gxNQfVKJeAJpCtLvgkf0BWa-auvSYvfwZMciYzxojtGDJMLXC8hsPHL1g6WJ4UFJZ-LUMHkAzf_VqSPMemgffbuwDeT1iZ1fn6eo-V1MW_/s1600/slide-1.jpg" with your slide image URL.

Follow the same procedure to configure other 4 slides.

How To Configure Social Buttons

Social Buttons - Frontier Blogger Template

Find this in "Edit HTML":

Add your own social links replacing default social profile URLs.

Frontier Blogger Template Responsive View

Responsive View - Frontier Blogger Template

Our Blogger templates are free for both personal and commercial use. However, you are required to keep the footer links intact, which provides due credit to its designers and authors. So do not remove the footer credits without our permission. If you need the footer credits free version of a theme, contact us.