THEBOEGIS: Tutorial Blogger
Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Saturday, November 9, 2019

How to make floating ad slots on Blogger

How to make floating ad slots on Blogger
How to make floating ad slots on Blogger
Hello Blogger friend! This time my blog will give tips on How to Make Floating Ad Slots on Blogger. The reason to place floating ad slots on a blog is to maximize our revenue, especially for blogs that have added AdSense ads.

Tips for Watching Youtube Videos

Tips for Watching Youtube Videos
Tips for Watching Youtube Videos
Tips to Watch Youtube Videos Widely - Needs tips, ways and efforts so that the videos we upload on YouTube have a large audience. Page view or the number of views on YouTube is very important role, especially for a number of companies that promote their products via YouTube, so that they can get the trust of many people to market their products.

This also applies to Youtubers who use YouTube to make money through Google Adsense. If the video is viewed a lot means the chance to get dollars will be even greater.

The natural way is to bring visitors or viewers naturally on YouTube videos, namely counter view / number of views coming from humans, not bots or scams. Because this method violates YouTube's new policy, visitors who come from robots will not be included in the count list.
Tips for Watching Youtube Videos
Tips for Watching Youtube Videos
So it would be useless if you use this method, because the Youtube system is now more selective in calculating the number of video views.

You should first read the Youtube video optimization article that I have explained before, there are important points on how to maximize youtube videos, so that they can be easily found in searches and seen by many people.

1. Make a video niche according to the category with channel / new channel

If you have many videos, it's best to group them in one channel or one channel only. The goal is that your video is not mixed together, and can become one category. Viewers will also find it easier to find other videos of the same type in 1 channel.

Without you realizing this will also increase the number of other video views. Make Chanel or the new channel SEO friendly, so videos can be easily found in search engines.

2. Make quality original videos

Make videos that are unique and original, according to their respective categories with clear video quality (HD), if you really need to do video editing with video editing software that you are good at. With good quality video, it is expected to be able to spoil the eyes of the audience, and be able to compete with other videos.
Tips for Watching Youtube Videos
Currently Youtube can play videos with a resolution of 8K (7680 × 4320). But we can use just the standard video, with a resolution of 1080p, 720p & 480p.

3. Make a video that is trending now

The types of videos that are booming or trending topics are usually sought after by the audience. This can be related to the latest news at the moment, or what is being said and talked about by many people. By following this development, people will find your channel and videos through a search engine, which is looking for new video sources.

4. Make an interesting title in accordance with the category and do not cheat

Now viewers are smart, and don't want to be fooled by titles that don't match the content in the video, make sure to maintain the quality and reputation of the channel by making titles that are interesting and in accordance with the category, once you cheat you will lose your chance to get subscribers.

5. Increase and increase the number of video collections.

By having lots of videos, a viewer will be more curious to see your other videos, because in one video channel on YouTube there is already a facility that automatically arranges your collection videos neatly, by having lots of videos you will most likely get lots of subscribers. Another case if you only have 3-4 videos.

6. Promote your video.

After finished uploading the video, don't forget to promote your video ... this method can be through social media or the web / blog if you happen to have. If you have a lot of customers / Subscribers will be very helpful, because once you finish uploading the video there will be a notification via email. And this really helps you to get more viewers.

About increasing customers or subscribers

If you follow the tips and suggestions above, God willing, customers or Subscribers will come by themselves. Currently there are lots of tutorials and ways to bring in or get YouTube customers, but there have never been any results.

Logically, if your video and channel are good and interesting then subscribers / subscribers will be willing to direct the mouse to the Subscribe button on your channel.

Secrets of How to Register for Google AdSense To Be Easily Accepted

Secrets of How to Register for Google AdSense To Be Easily Accepted
Secrets of How to Register for Google AdSense To Be Easily Accepted
Maybe you will ask why adsense is not as promising as we thought? The answers are many, but certainly all that require sacrifice is not small, optimization will not be able to guarantee success with Google Adsense .

I quoted a lot from all adsense publishers in order to be successful, including not only silent but applauding but through a little struggle, if you can earn a decent income with adsense manually, congratulations, you will not go back, but if you have not succeeded, your chances are can have to think and rack your brain so that each of your actions can be successful.

Terms in Google Adsense

Terms in Google Adsense
Terms in Google Adsense
Terms in Google Adsense - We know Google Adsense is an advertising medium that is quite promising at this time. Many bloggers often get hundreds to thousands of dollars in just a month.

However, of course that much income is not obtained by simply turning the palm of the hand. There are so many processes that have to be done to produce such results. As if the business is directly proportional to the results of the income obtained.

Friday, November 8, 2019

Tutorial on Making Direct Links Download Google Drive

Tutorial on Making Direct Links Download Google Drive
Tutorial on Making Direct Links Download Google Drive
3 Ways to Make Google Drive Direct Download Links [Google Drive Automatic Download]

Good evening this time I will share about how to do a Tutorial or Direct Link Download Google Drive Tutorial. until now Google Drive is still a favorite service for uploading and downloading process because it's very good service.
Google Drive is not only used for storage, but can also be downloaded publicly when we share. It's just that the URL provided by Google is not a direct download link. To make it easier for users who want to download the files that you have shared, you need a permanent direct link, so that with a single click on the link, the file or document can be downloaded immediately. Here's how to create a download link directly from Google Drive, here are three ways to make it:

Method 1: Change the Google Drive link ID code

Make sure the file to be shared has been set to "Share Public". In order to obtain the share link (share link).

Example of a share link:
https://drive.google.com/file/d/ 1wUVb_ahWfJ7WDCPUFugUMxnJLrQGRtP3 / edit? usp = sharing

The red color is the ID for the file in Google Drive. To get the Direct Link, then replace the link above with the format as below:

https://docs.google.com/uc?export=download&id= ID of your file

So the link will be:

https://docs.google.com/uc?export=download&id= 1wUVb_ahWfJ7WDCPUFugUMxnJLrQGRtP3

The link above is a direct link that you can place on your blog website

Method 2: Using a Website URL Generator

Tuesday, November 5, 2019

Cara Membuat Mockup Responsive Template dengan Background Warna

Cara Membuat Mockup Responsive Template dengan Background Warna
Cara Membuat Mockup Responsive Template dengan Background Warna
Hallo sabat Blogger!!!  kali ini saya akan membagikan Tutorial blogger, Cara Membuat Mockup Responsive Template dengan Bacground Warna, Artikel Tutorial ini saya buat dari deskan temen blogger yang belum mengetahui Cara Membuat Mockup Responsive Template dengan Bacground Warna  . Pada kesempatan ini di waktu yang sempit ini saya coba membuat tutorial tersebut

Ok get on with it
Pertama yang harus dilakukan adalah memilih tema mana yang akan kita buatkan Mockup - nya

Kedua silahkan sobat kunjungi Alamat web ini ( Klik Disini )
Setelah sobat masuk di web penyedia Mockup tersebut,  silahkan sobat lakukan memasukan alamat url blog / web yg ingin di buatkan Mockup dengan mengunakan https://.
Untuk lebih jelas nya perhatikan gambar di bawah ini :

Monday, November 4, 2019

Keuntungan Dan Kekurangan Tampilan Responsive Blogger terbaru

Keuntungan Dan Kekurangan Tampilan Responsive Blogger terbaru
Keuntungan Dan Kekurangan Tampilan Responsive Blogger terbaru
Baru-baru ini, blogger telah meluncurkan tampilan baru nya dengan responsive  yang memungkin kan blogger dapat di accent di mobile dengan cepat,  dan mudah di gunakan  akan tetapi kekurangan nya masih banyak

Keuntungan tampilan baru ini untuk para blogger yg mengunakan  handphone dapat dengan mudah melakukan pengeditan Theme / Template  pada edit Html .
Sedang tampilan lama nya sangat sulit untuk membuka edit html  . Dengan tampilan baru ini Mengedit atau menambahkan script, css dll dapat kitala lakukan degan baik dan mudah  di handphone .

Thursday, March 7, 2019

Cara mengganti Template atau tampilan Blogger dengan cepat


Langsung aja gk usa ulur2 cerita kaya apa aja

Pertama Login ke akun blogger anda mengunakan Gmail
Setelah masuk langsung Klik /buka Tulisan Tema
Seperti Gambar dibawah :

Cara Cepat Membuat Blog Dalam Hitungan Menit

Langsung aja kagak usa banyak lika liku cerita ahirnya orang gk paham .. ok ini dia cara daftar dan membuat blog dalam hitugan menit
yang perlu di sipakan  :
Jarigan internet
Kopi Susu kalu perlu kopinya di gela susunya pegang aja !!
Akun google
daftar dan buat Blogger
login ke akun google / gmail.com atau langsung masuk Blogger.com jika sudah logi di gmail
Setalah buka blogger.com akan penampkan seperti di gambar di bawah ini :

Membuat Gambar Utama Postingan Dengan Info dan Share Post

Untuk mengikuti tutorial ini, pastikan gambar utama pada blog sobat asli upload melalui blogger, dan gambar utama tidak boleh di dalam table maupun caption, jika gambar utama pada postingan sobat hasil copy paste atau di dalam table maka gambar utama yang asli tidak akan hilang dan hasilnya gambar menjadi double.
 Ikuti tutorial di bawah ini untuk memasang gambar utama postingan yang menarik.

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>
/* CSS First Image, Post Info and Share */
#first-blanter{background:#fff;box-shadow:0 2px 13px rgba(0,0,0,.1);border-radius:10px;overflow:hidden;position:relative;padding-bottom:60px;margin-bottom:20px}
img.first-image{width:100%;height:auto;max-height:480px}
.card-author.vcard{position:absolute;bottom:-10px;left:40px;z-index:9;font-size:13px}
img.photo-wrap{width:70px;height:70px;border-radius:100%;float:left;border:4px solid #fff;margin-right:15px}
.card-author a{line-height:9!important;font-weight:700;color:#222}
.card-time{position:absolute;top:15px;right:15px;background:#5d5d5d;color:#fff;line-height:1.8;font-size:13px;padding:5px 10px;margin-right:10px;margin-top:10px;border-radius:5px}
.card-time abbr{color:#fff;text-transform:none;font-style:none;text-decoration:none!important;border-bottom:0!important}
#card-share{position:absolute;right:14px;bottom:17px;margin:2px;padding:0;overflow:hidden}
#card-share a{position:relative;float:left;border-radius:2.5px;display:block;padding:3.5px 14px 7.5px;margin:0 5px;width:20px;height:20px}
#card-share a:hover{-webkit-filter:opacity(85%)}
.icon-facebook-d,.icon-twitter-d,.icon-wa-d{width:15px;height:15px;vertical-align:middle;margin-left:2px;margin-bottom:4px}
.icon-google-d{width:20px;height:20px;vertical-align:middle;margin-left:1px;margin-bottom:-2px}
.icon-pin-d,.icon-em-d{width:18px;height:18px;vertical-align:middle;margin-bottom:4px}
#card-share a.pt{display:none}
#share-wrapper{margin:auto;padding:0;margin-top:27px}
.shareyes-a{margin:-10px 0 12px;display:none}
.shareyes{display:none;position:relative;margin:0 0 -8px}
a.fb{background:#3b5998}
a.tw{background:#55acee;margin-left:2.5%}
a.em{background:#5a2472;margin-left:2.5%}
a.ln{background:#00c300;margin-left:2.5%}
a.wa{background:#4dc247;margin-left:2.5%}
a.pt{background:#bd081c;margin-left:2.5%}
a.fb-a{background:#3b5998}
.icon-facebook,.icon-twitter,.icon-pin,.icon-in,.icon-wa,.icon-em{width:16px;height:16px;vertical-align:middle}
.icon-google{width:21.5x;height:21.5px;vertical-align:middle}
.icon-bm{width:19px;height:19px;vertical-align:middle}
.icon-tr{width:15px;height:15px;vertical-align:middle}
.icon-facebook{margin-left:-2px}
@media screen and (max-width:768px){
#card-share{bottom:10px;right:2px;margin:7px}
#card-share a{text-align:center}
.card-time{font-size:11px}
}
@media screen and (max-width:680px){
#first-blanter{padding-bottom:100px;width:100%}
#card-share{bottom:10px;width:100%;right:2px;left:20px}
#card-share a{width:14%;text-align:center}
.card-author.vcard{bottom:25px}
}
@media screen and (max-width:480px){#card-share a{width:11.4%}}
@media screen and (max-width:380px){#card-share a{width:10%}}

letakan Javascript di bawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

Terakhir Letakan HTML di bawah ini, tepat di atas kode <data:post.body/> (kode tersebut ada lebih dari satu, pastikan coba satu-persatu dan test untuk mengetahui muncul atau tidaknya)
Biasa Nya terletak di  atas tombol Share This 
<div id='first-blanter'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,600)' expr:title='data:post.title'/>
<div class='card-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<div class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img class='photo-wrap' expr:src='resizeImage(data:post.authorPhoto.url,100)' itemprop='image'/>
Posted by <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
  <span itemprop='name'><data:post.author/></span></a>
  </div><b:else/><span class='fn' itemprop='name'><data:post.author/></span></b:if></b:if></div>
<div class='card-time'>
<abbr class='published updated timeago' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.dateHeader/></abbr>
</div>
<div id='card-share'>
<a class='fb' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank' rel='nofollow' title='Share to Facebook'><svg class='icons icon-facebook-d' viewBox='0 0 24 24'><path d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z' fill='#fff'/></svg></a>
<a class='tw' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' target='_blank' rel='nofollow' title='Share to Twitter'><svg class='icons icon-twitter-d' viewBox='0 0 24 24'><path d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z' fill='#fff'/></svg></a>
<a class='pt' expr:href='&quot;https://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' title='Share to Pinterest'><svg class='icons icon-pin-d' viewBox='0 0 24 24'><path d='M13.25,17.25C12.25,17.25 11.29,16.82 10.6,16.1L9.41,20.1L9.33,20.36L9.29,20.34C9.04,20.75 8.61,21 8.12,21C7.37,21 6.75,20.38 6.75,19.62C6.75,19.56 6.76,19.5 6.77,19.44L6.75,19.43L6.81,19.21L9.12,12.26C9.12,12.26 8.87,11.5 8.87,10.42C8.87,8.27 10.03,7.62 10.95,7.62C11.88,7.62 12.73,7.95 12.73,9.26C12.73,10.94 11.61,11.8 11.61,13C11.61,13.94 12.37,14.69 13.29,14.69C16.21,14.69 17.25,12.5 17.25,10.44C17.25,7.71 14.89,5.5 12,5.5C9.1,5.5 6.75,7.71 6.75,10.44C6.75,11.28 7,12.12 7.43,12.85C7.54,13.05 7.6,13.27 7.6,13.5A1.25,1.25 0 0,1 6.35,14.75C5.91,14.75 5.5,14.5 5.27,14.13C4.6,13 4.25,11.73 4.25,10.44C4.25,6.33 7.73,3 12,3C16.27,3 19.75,6.33 19.75,10.44C19.75,13.72 17.71,17.25 13.25,17.25Z' fill='#fff'/></svg></a><a class='em' expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=email&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share to Email'><svg class='icons icon-em-d' viewBox='0 0 24 24'><path d='M12,13L2,6.76V6C2,4.89 2.89,4 4,4H20A2,2 0 0,1 22,6V6.75L12,13M22,18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V9.11L4,10.36V18H20V10.36L22,9.11V18Z' fill='#fff'/></svg></a>
<a class='wa' data-action='share/whatsapp/share' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; &quot; + data:post.url' title='Share to Whatsapp' target='_blank'><svg class='icons icon-wa-d' viewBox='0 0 24 24'><path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z' fill='#fff'/></svg></a>
</div>
</div>

Simpan Template.
BY : https://www.idblanter.com/

Update Date Template 2019

Tutorial ini Buat anda pengguna Adsense dan Template Saflink 

Sekarang ini Adsense susah muncul jika url memiliki tanda ? atau # dan kode lainnya seperti pada safelink seperti ?url=gfdsghkuy567432fghhh karena itu dianggap sebagai url baru yang harus menunggu index, kecuali url dengan ? atau # tersebut sudah banyak diakses pengunjung sehingga index sudah normal maka iklan akan muncul normal.

Untuk itu, di update safelink ini, kita menghilangkan kode ?url=........... pada url post enscripsi safelink sehingga url hanya akan tampil sebagai url asli tanpa embel2 agar iklan tetap muncul di url enscripsi.

Demo: Silahkan coba download di sini https://www.theboegis.com/ lalu perhatikan url di halaman safelink nya dan apakah iklan tampil?

untuk itu silahkan tambahkan script ini di atas </body>
<script>
//<![CDATA[
var uri=window.location.toString();if(uri.indexOf("?","?")>0){var clean_uri=uri.substring(0,uri.indexOf("?"));window.history.replaceState({},document.title,clean_uri)}
//]]>
</script>


Tuesday, July 31, 2018

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe
Tutorial Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe

Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog bapak.
Letakan CSS Material Icons tepat di atas kode </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

1. Masukan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau </style>
/* BLANTER Notif Box Created by Theboegis */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}

2. Letakan kode HTML notifikasi dibawah ini tepat di bawah kode <body atau di atas kode </body>
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
Blogger semakin lama semakin berkembang, jadi kita harus bisa menyesuaikan perubahan dan menggunakan kreatifitas untuk menyempurnakannya.
</div>
</div>

3. Letakan Javascript dibawah ini tepat di atas kode </body>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>

Simpan Template, dan lihat hasilnya.
Notifikasi ini bisa diisi pesan yang berbeda-beda di setiap postingan, bapak hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan kode HTML notifikasi ke postingan mode HTML.

Tutorial Blogger

Tutorial Komputer

Tutorial Install Karaoke