Cara membuat read more automatis di blog

Readmore

Berikut Langkah-langkah membuat ReadMore Automatis :

• Masuk dan Login ke Blog Anda
• Pilih Template > Edit Template
• Cari Kode </head>
• Setelah ketemu Copy-paste kode dibawah ini, DIATAS kode </head>

<!--ReadMore http://trikseosimple.blogspot.com-->    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>    <b:if cond='data:blog.pageType != &quot;item&quot;'>    <style>    .post-body{text-align:justify;}    .post-body img{max-width:none;width:auto;}    .read-more{float:left; padding-top: 10px;}    .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}    .read-more a:hover{text-decoration:none;background:#666;}    .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}    .grow img{height:165px;width:250px;transition: all 2s ease;}    .grow img:hover{width:400px;height:250px;}    </style>    <script type='text/javascript'>    var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar    summary_noimg = 300; //banyaknya huruf jika tidak ada gambar    summary_img = 250; //banyaknya huruf jika ada gambar    img_thumb_height = 165;    img_thumb_width = 250;    </script>    <script type='text/javascript'>//<![CDATA[    function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}    //]]></script>    </b:if>    </b:if>    <!--Auto Read More Akhir-->

• Kemudian cari kode <data:post.body/> biasanya kode ini lebih dari satu, pilih yang kedua.Ganti kode tersebut dengan kode dibawah ini :

<!-- Auto read more Mulai -->    <b:if cond='data:blog.pageType == &quot;item&quot;'>    <data:post.body/>    <b:else/>    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>    <data:post.body/>    <b:else/>    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);    </script>          <div class='read-more'>          <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>          </div>    </b:if>    </b:if>    <!-- Auto read more Akhir -->

• SAVE TEMPLATE dan lihat hasilnya

Read More

Cara membuat Navigasi Hamburger Responsive

Membuat navigasi menu responsive menggunakan style CSS

Pada tutorial kali ini saya akan mencoba memberikan cara membuat menu responsive tanpa javascript melainkan menggunakan css saja.
Langkah-langkah membuat menu responsive dengan css :

1. Buat File HTML

<div id="navcontainer"><label class="show-menu" for="show-menu"><i class="fa fa-bars fa-2"></i></label><input autocomplete="off" id="show-menu" role="button" type="checkbox"><ul id="menus"><li><a href="http://www.tukarpengetahuan.com/" title="home">Home</a></li><li><a href="http://www.tukarpengetahuan.com/p/pemrograman-web.html" title="pemrograman-web">Pemrograman web</a></li><li><a href="http://www.tukarpengetahuan.com/p/framework.html" title="framework">Framework</a></li><li><a href="http://www.tukarpengetahuan.com/p/teknologi-informasi.html" title="teknologi-informasi">Teknologi Informasi</a></li><li><a href="http://www.tukarpengetahuan.com/p/belajar-seo.html" title="belajar-seo">Belajar seo</a></li><li><a href="http://www.tukarpengetahuan.com/p/tips.html" title="tips">Tips</a></li></ul><div style="clear:both;"></div></div>

2. Buat File CSS

body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}/*Navmenu*/#navcontainer ul {list-style-type:none;margin:0;padding:0;position: relative;}#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}#navcontainer li a {padding:15px 10px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;background: #2f3036;text-decoration: none;}#navcontainer li:hover a {background: #FE9800;}#navcontainer li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}#navcontainer li:hover ul a:hover {background: #FE9800;color: #fff;}#navcontainer li ul {display: none;}#navcontainer li ul li {display: block;float: none;}#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}.show-menu {text-decoration: none;color: #fff;background: #FE9800;text-align: left;padding: 10px 5px;display: none; }#navcontainer input[type=checkbox]{display: none;}#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}#navcontainer .fa-2 {font-size: 2em;}#navcontainer .fa-2 { margin-right: 0.07142857em; margin-left:0.6em;}/*end-navmenu*//*css-styles-responsive*/@media screen and (max-width:1180px){ body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}}@media screen and (max-width:980px){ #navcontainer li a {min-width:80px;}}@media screen and (max-width:768px){ #navcontainer ul {position: static;display: none;} #navcontainer li {border-bottom: 1px solid #4d4d4d;} #navcontainer ul li, #navcontainer li a {width: 100%;} #navcontainer li a{display:block;height:auto;line-height:normal;} #navcontainer li a {text-align:left;} .show-menu {display:block!important;line-height:30px;} .show-menu:hover {cursor:pointer;} label {margin:0!important;}}/*end-responsive*/

Jika sudah selesai menambahkan file CSS, saya harap tampilan menu ketika di desktop sudah seperti gambar dibawah ini :

3. Untuk membuat menu agar responsive maka kita perlu menggunakan media query
Berikut tampilan ketika mobile responsive

Bagaimana sudah berhasil belum?

Jika belum berhasil juga akan saya berikan full html dan css, anda tinggal download saja.
Download menu responsive Full HTML
Download menu responsive Full CSS

Read More

Cara membuat menu sembunyi seperti google

Google replaced its old menu bar with a new one and this UI change on main page of Google was a big step and was an interesting topic among designers across the world . Earlier there was a black menu bar at the top of page displaying most popular services from Google. The new menu displays all services as icons when you click on menu. I liked this because if we have too many services (menu items) and we don’t want to eat up large space in your header then this type of menu fits best. It is also useful for mobile and tablets devices. We can easily build Google like new menu using jQuery and CSS, thanks to jQuery animate() function for making it so easy to get similar animation effect.

             LIVE DEMO   Download

Now we will see how easily we can create Google like menu using jQuery and little bit of simple CSS code. I cropped all images from Google Menu and then created an HTML markup and used CSS to fit them all inside the div.

Below is our simple HTML markup that is used to create this menu:

</p>
<body>
<div id="mhead"> <h2>Google like New Menu with jQuery and CSS - InfoTuts </h2></div>
<div id="container">
<div id="menu"><img src="images/menu.png"></div>
<div class="arrow"></div>
<div id="gridbox">
<div id="innergrid">
<ul id="icons">
<li><img src="images/googleplus.png"></li>
<li><img src="images/search.png"></li>
<li><img src="images/youtube.png"></li>
<li><img src="images/Maps.png"></li>
<li><img src="images/googleplay.png"></li>
<li><img src="images/googlenews.png"></li>
<li><img src="images/gmail.png"></li>
<li><img src="images/googledrive.png"></li>
<li><img src="images/Gcal.png"></li>
<li><img src="images/gtranslate.png"></li>
<li><img src="images/googlebooks.png"></li>
<li><img src="images/blogger.png"></li>
<li><img src="images/photos.png"></li>
</ul>
</div>
<div id="more">More</div>
</div>
</div>
</body>
<p style="text-align: justify;">

Simple CSS code created everything that I needed.

Below is our CSS code:

</p>
#mhead{
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
text-align: center;
font-family: georgia;
}
#container{
width:400px;
height:300px;
border:solid #CCC 0px;
padding:5px;
margin:0 auto;
margin-top:60px;
position: relative;
z-index: 1;
}
ul{
list-style:none;
margin:0;
padding:0;
}
li{
float:left;
padding:5px;
border:solid #666 0;
cursor: pointer;
}
#menu{ cursor:pointer;
position: relative;
left: 120px;
}
#gridbox{
width:265px;
height:355px;
background-color:#FFF;
box-shadow:0 0 10px #CCC;
border:solid #CCC 1px;
font-size:18px;
color:#666;
overflow:hidden;
display:none;
}
#innergrid{
width:300px;
height:290px;
overflow:hidden;
margin:15px;
}
.arrow{
margin-left: 118px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #efefef transparent;
display: none;}
#more{
width:100%;
height:30px;
cursor:pointer;
background-color:#efefef;
text-align:center;
vertical-align: middle;
padding:10px 0 0 0;
font-size:16px;
}
#icons img{
width: 68px;
height: 80px;
}
<p style="text-align: justify;">

Now my HTML CSS part is done and all I have to do is write jQuery code so that I can give some cool animation effects just like Google menu has.

Below is our jQuery code:

</p>
$(document).ready(function(){
$('#menu').click(function(event){
$('.arrow').slideToggle('slow');
$('#gridbox').slideToggle('slow',function(){
$('ul').animate({marginTop:'0'});
$('#gridbox').animate({height:'355px'});
$('#more').text('More').animate({marginTop:'0'});});
event.stopPropagation();
});
$('#more').click(function(event){
$('ul').animate({marginTop:'-280px'},200);
$('#gridbox').animate({height:'280px'},200);
$('#more').html('<b>Even more from Google</b>').animate({marginTop:'-80px'},200);
event.stopPropagation();
});
$('body').click(function() {
$('.arrow').hide();
$('#gridbox').hide();
$('ul').animate({marginTop:'0'});
$('#gridbox').animate({height:'355px'});
$('#more').text('More').animate({marginTop:'0'});
});
});
<p style="text-align: justify;">

Note: In above jQuery code we have used event.stopPropagation(); method whenever animation has finished just to stop the events chain.

It almost looks similar to Google’s new menu but still there are some missing things. Like it doesn’t gives you a scroll bar to go up when you click on “more” to see more services. I recommend you to look at jQuery animate() function and how it can be used to create awesome effects. If you like this tutorial please share it with your friends and followers.

Read More

Animasi Efek loading sliding di blog

 

Selamat datang di websiteaeria . pada tutorial kali ini saya akan memberikan beberapa cara dalam membuat efek loading sliding di blog menggunakan css .

okay kita langsung saja :

 

1. Masuk ke Edit HTML Template blogger sobat.

2. Tambahkan kode css dibawah ini dengan cara klik CTRL+F dan cari kode ]]><</b:skin> lalu letakkan kode dibawah ini tepat diatasnya

 

@keyframes sliding{

from{transform:translate(-1000px,0px);opacity:0}

to{transform:translate(0px,0px);opacity:1,1;}

}

 

3. Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek , misalkan pada #main-wrapper , contohnya :

 

#main-wrapper{animation:sliding 2s;}

 

4. Save Template

 

Untuk cara pertama mungkin tidak support untuk semua browser , jika begitu hapus saja dan ganti dengan kode dibawah ini . langkah-langkahnya sama saja seperti diatas

 

1. Masuk Edit Html Template Sobat.

2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode

]]></b:skin> lalu letakkan kode dibawah ini tepat di atasnya

 

@-webkit-keyframes slide{

from{transform:translate(-1000px,0px);}

to{transform:translate(0px,0px);}}

@keyframes slide{

from{transform:translate(-1000px,0px);opacity:0}

to{transform:translate(0px,0px);opacity:1.1;}

}

 

3. sisipkan kode –moz-animation:slide 4s ;-webkit-animation:slide 4s;

animation:slide 4s ke bagian yang ingin anda beri efek , misalkan pada #main-wrapper . contohnya:

 

#main-wrapper{-moz-animation:slide 4s;-webkit-animation:slide 4s;

animation:slide 4s}

 

4. Save Template

 

untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading cepat

 

++

Read More

Cara membuat line spacing di blog

Apakah Anda tahu tombol spasi yang ada di program pengolah kata seperti MS Word?

Ternyata di WordPress fungsi tersebut juga dapat dilakukan. Caranya adalah dengan menggunakan mode HTML. Caranya, pada awal dan akhir paragraf tambahkan kode ini:

<p style="line-height:100%">isi paragraf</p>

persentase berfungsi untuk mengatur berapa jarak spasi. 100% untuk spasi 1, 150% untuk spasi 1,5, 200% untuk spasi 2, demikian seterusnya.

Contohnya:

<p style=”line-height:300%”>isi paragrafisi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf</p>

Akan menjadi:

isi paragrafisi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf isi paragrafisi paragraf

Semoga bermanfaat

Read More

Teknik dasar Html

Kali ini kita akan belajar teknik dasar Html , HTML adalah kepanjangan dari Hyper Text Markup Language ,.
HTML menggunakan tag untuk mengindifikasi konten .
html sangat berguna dalam bahasa pemograman karena hampir setiap jenis bahasa komputer memiliki teori dasar atas html tersebut
contoh html tag :

<p> I’m a Paragraph </p>

Web structure
- dalam pembuatan web menggunakan html memiliki bahasa pemograman sebagai berikut :
HTML : structure
CSS   : Presentation
Javascript : Behavior

PHP or Similar : Backend
CMS : Content Management

- Dalam html selalu dimulai dengan open tag <html> dan Closing Tag </html>
perbedaan Open tag dan Closing Tag yaitu
Open tag tidak memiliki  /  Di awalan , tetapi Closing tag memiliki   /   Di awalan

Tag <head>

<html>
    <head> ……… </head>
</html>

Tag <body>

<html>
<head>
</head>
<body>
</body>
</html>

HTML FILE
html dapat di buat dalam berbagai text editor untuk membuat halaman web pertama anda
ada bebrapa jenis text editor salah satunya notepad pasti telah tersedia di setiap PC anda , tetapi saya sarankan menggunakan Notepad++ anda bisa mendownloadnya lewat google search .
Dan dalam menamaian file html harus diakhiri dengan .html atau .htm 

Tag <title>

<html>
                            <head>
                                                <title> First Page </title>
                             </head>
                             <body>
                               This is a line text
                              </body>
</html>

- Tag title harus diantara < head> dan </head> alias didalam tag <head>
- Kata / text yang ada didalam title akan tampil di tab browser ( anda boleh coba sendiri agar lebih mengerti )


* Akan diupdate lagi pada tanggal 31 December 2016

Read More

Jalan alternatif inti bahasa komputer

Nah teman teman kali ini saya akan membagikan artikel .. sebenarnya jalan alternatif apa yang seharusnya untuk langsung mengerti inti dari dan dasar dari bahasa pemograman ! ...

Nah kadang kadang bahasa pemograman yang dipelajari tidak begitu berguna alias bukan inti dari pemograman iti sendiri

Sebenarnya susah untuk menuliskannya tetapi alias belajar yang tidak tidak dan tidak bisa mendapatkan uang dari yang anda pelajari .

Nah untuk mengetahuinya kami akan mengulas beberapa bahasa pemograman yang harus menjadi dasar telebih dahulu dan harus dikuasai terlebih dahulu sebelum belajar bahasa pemograman yang lainnya .

1 . HTML



Bahasa pemograman HTML adalah bahasa tag paling penting dalam pembuatan website dan webdesign dan juga sangat penting dalam pengembangan aplikasi.

2. JAVASCRIPT



Javascript adalah teori dan peraturan pasti dan mencakup seluruh bahasa pemograman . Jika anda sudah menguasai teori javascript anda pasti mudah dalam mempelajari bahasa komputer yang lain contoh bahasa c++ adalah bahasa pemograman dalam membuat aplikasi seperti apps video player , calculator, dengan ekstensi .exe




Nah itulah ulasan dari kami . Dan terus kunjungi situs kami untuk mendapatkan informasi yang menarik dan berguna .

Read More

SOLUSI UNTUK HUKUM UNI EROPA DAN CARA MEMBUAT COOKIE HUKUM UNI EROPA PADA BLOG

Dua hari yang lalu, kembali saya dikejutkan dengan munculnya sebuah notifikasi dari google di halaman dashboard blogger saya ketika saya baru saja login. Pesan ini memang pernah saya dapatkan sebelumnya sekitar beberapa tahun yang lalu, namun saat itu saya masih belum mengerti tentang apa dan bagaimana cara saya untuk menanggapinya. Sehingga saya pun tidak menggubrisnya sama sekali.


Bunyi pemberitahuan kebijakan baru Google tentang cookie hukum Uni Eropa adalah sebagai berikut:

“Hukum Uni Eropa mengharuskan Anda untuk memberikan informasi kepada pengunjung Uni Eropa tentang cookie yang digunakan di blog. Dalam banyak kasus, undang-undang ini juga mengharuskan Anda untuk mendapatkan persetujuan pengunjung. Sebagai bagian dari layanan, kami telah menambahkan pemberitahuan di blog Anda untuk menjelaskan penggunaan Google akan cookie Blogger dan Google tertentu, termasuk penggunaan cookie Google Analytics dan AdSense. Anda bertanggung jawab untuk mengonfirmasi bahwa pemberitahuan ini benar-benar berfungsi di blog dan dapat ditampilkan. Jika Anda menggunakan cookie lainnya, misalnya dengan menambahkan fitur pihak ketiga, pemberitahuan ini mungkin tidak berfungsi. Pelajari lebih lanjut tentang pemberitahuan ini dan tanggung jawab Anda.”


 PENJELASAN KEBIJAKAN BARU GOOGLE TENTANG NOTIFIKASI COOKIE HUKUM UNI 

EROPA Berdasarkan penjelasan Google, cookie adalah sekelumit teks yang dikirim ke browser pengguna oleh situs web yang dikunjunginya. Cookie membantu situs web mengingat informasi mengenai pengunjungnya, seperti pilihan bahasa atau setelan lainnya. Cookie berguna bagi pengunjung karena dapat memudahkan kunjungan berikutnya. Sehingga situs web menjadi lebih berguna serta tidak menyulitkan pengunjung. Penjelasan Google tentang notifikasi cookie di negara-negara Uni Eropa adalah sebagai berikut: 

“Uni Eropa (UE) undang-undang mengharuskan Anda untuk memberikan pengunjung Uni Eropa informasi tentang cookie yang digunakan di blog Anda. Dalam banyak kasus, undang-undang ini juga mengharuskan Anda untuk mendapatkan persetujuan. Sebagai rasa hormat, kami telah menambahkan pemberitahuan pada blog Anda untuk membantu memenuhi peraturan tersebut. Pemberitahuan memungkinkan pengunjung tahu tentang penggunaan Google tertentu Blogger dan Google cookie pada blog Anda, termasuk Google Analytics dan cookie AdSense. Pelajari tentang praktik privasi Google dan bagaimana Google menggunakan data di situs mitra.” 

Menurut penjelasan Google di atas dijelaskan bahwa notifikasi kebijakan baru Google tentang cookie hukum Uni Eropa bukan suatu masalah atau pelanggaran, melainkan pemberitahuan kepada pemilik situs web (blog) agar memberikan informasi kepada pengguna tentang cookie yang kita gunakan dan harus menampilkannya di blog. Undang-Undang Uni Eropa (UE) mengharuskan kita memberikan informasi yang jelas kepada pengunjung dari Uni Eropa mengenai cookie yang digunakan di blog kita. Kebijakan tentang cookie Uni Eropa hanya berlaku di negara-negara Uni Eropa, yaitu organisasi antar pemerintah Eropa, yang meliputi negara Belanda, Belgia, Italia, Jerman, Luksemburg, Perancis, Britania Raya, Denmark, Irlandia, Yunani, Portugal, Spanyol, Austria, Finlandia, Swedia, Republik Ceko, Estonia, Hongaria, Latvia, Lituania, Malta, Polandia, Siprus, Slovenia, Slowakia, Bulgaria, Rumania, Kroasia. (Sumber: Wikipedia). Undang-undang Uni Eropa mengharuskan pemilik situs mendapat persetujuan dari pengguna untuk menampilkan cookie yang ada pada blog Anda termasuk cookie Google Analitic dan AdSense. “Jika Anda menggunakan layanan iklan pihak ketiga, seperti Google AdSense, Anda harus melakukan langkah-langkah untuk mengintegrasikan solusi pilihan Anda dengan tag iklan di laman untuk memastikan preferensi pengguna dihormati. Setiap vendor memberikan petunjuk atau layanan dukungan untuk melakukannya. Jika Anda tidak mengikuti langkah-langkah tersebut untuk semua tag di laman, Anda berisiko menyesatkan pengguna: mereka akan berpikir telah menonaktifkan cookie iklan, padahal cookie iklan tetap akan digunakan. Oleh karena itu, uji dengan hati-hati setiap penerapan alat tersebut di situs Anda sendiri.” Cara yang dapat Anda lakukan adalah memberi pilihan cookie kepada pengguna situs web (blog). Misalnya pengunjung dapat disediakan sebuah opsi untuk memblokir cookie iklan. Anda dapat melihat daftar jenis cookie yang digunakan oleh Google dan juga menemukan cara Google dan mitranya menggunakan cookie dalam iklan. 

APA YANG HARUS DILAKUKAN TERKAIT ADANYA NOTIFIKASI COOKIE HUKUM UNI EROPA? 

Merujuk kepada penjelasan Google untuk menindak lanjuti pemberitahuan kebijakan tentang notifikasi cookie Uni Eropa, Anda harus melakukan 2 hal berikut: Harus mengungkapkan upaya komersial dengan jelas dan memperoleh persetujuan untuk setiap pengumpulan data, berbagi dan penggunaan yang terjadi pada setiap situs produk Google. Harus menampilkan informasi yang jelas dan komprehensif kepada pengguna tentang persetujuan untuk penyimpanan dan mengakses cookie atau informasi lain pada perangkat pengguna akhir, di mana aktivitas tersebut terjadi sehubungan berlakunya kebijakan baru Google. 

CARA MEMBUAT COOKIES CONSENT UNTUK ATASI NOTIFIKASI HUKUM UNI EROPA 2015 

Sebelum memasang cookies consent pada blog, Anda harus sudah ada Privacy Policy. Jika belum, Anda bisa membuatnya menggunakan generator gratis www.privacypolicyonline.com/. 

LANGKAH DAN CARA MEMBUAT NOTICE COOKIE HUKUM UNI EROPA DI BLOGGER

 #1. Buka situs sitebeam.net/cookieconsent/  yang melayani pembuatan Cookie Consent gratis

 #2. Klik Download Now 

#3. Klik salah satu dari 6 tema yang tersedia pada Choose Theme 

#4. Centang Customize. Silakan masukkan apa yang akan Anda informasikan pada headline text, accept button text, dan read more button text. Pada form Your Cookie Policy, silakan masukkan link yang mengarah ke laman privacy policy di blog Anda. 

#5. Klik Continue 

#6. Selanjutnya copy kode pada form Copy the Code  

#7. Buka tab baru di browser, login ke dashbor blogger 

#8. Template, kemudian Edit HTML

 #9. Cari kode (agar lebih mudah gunakan CTRL+F). 

#10. Paste Code Cookie Consent tepat sebelum 

#11. Klik simpan Silakan coba buka blog Anda dengan subdomain blogspot.fr atau blogspot.co.uk, di situ akan melihat pemberitahuan tentang penggunaan cookie pada pengunjung. 

Namun jika dibuka dengan subdomain blogspot.com atau custom domain (misalnya domain .COM) maka cookie hukum Uni Eropa tidak akan berpengaruh. Demikian penjelasan dan cara membuat cookie hukum Uni Eropa pada blog,

 semoga informasi ini bermanfaat. Terima kasih. 

Catatan: Jika blog anda berbahasa indonesia, tentu saja target pembaca anda adalah orang Indonesia. Maka anda tidak perlu menerapkan kode ini. Kode ini dibutuhkan jika konten blog anda berbahasa inggris dan mempunyai visitor dari eropa. 

Read More

Cara membuat pesan peringatan di atas komentar blog

Dalam dunia blog, Anda tentu menemui banyak spammer komentar. Ya, mereka memang sangat menjengkelkan, berkomentar lepas dari topik posting dan menyertakan link. Saya juga sangat sering mendapatkan komentar-komentar seperti itu, dan tanpa basa-basi saya langsung menghapus komentar-komentar tersebut.

Fungsi utama dari pesan peringatan di kolom komentar blog tentu untuk mencegah langkah-langkah yang bersifat spam. Namun, pesan peringatan di kolom komentar blogger terlihat sangat sederhana dan kurang mencolok. Anda pun bisa memodifikasi pesan peringatan tersebut agar terlihat jelas dan senantiasa terbaca setiap kali pengunjung ingin memberikan komentar. Anda bisa melihat gambar pesan peringatan komentar blog berikut ini :

Nah, dari sini saya memberikan tutorial sekaligus cara untuk membuat pesan peringatan di komentar blog. Silahkan simak 2 langkah berikut ini :

Langkah Pertama : Buatlah Pesan Peringatan di Halaman Setting Blogger Anda

1. Login ke akun blogger Anda

2. Masuk Dashboard

3. Klik “Setelan”, lalu klik “Pos dan komentar”

4. Silahkan Anda mengisi pesan peringatan dengan kalimat Anda pada kolom “Pesan Formulir Komentar”

Langkah Kedua : Memodifikasi Pesan Peringatan di Komentar Blog

1. Klik “Template”, lalu klik “Edit HTML”

2. Cari kode di bawah ini (gunakan CTRL + F agar lebih mudah pencarian) : 

<p><data:blogCommentMessage/></p>

Catatan :

Jika sudah ketemu, biasanya kodenya akan berbentuk seperti di bawah ini :

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

Anda akan menemui sekitar 4 kode yang sama seperti kode di atas. Silahkan pilih kode yang kedua dan keempat

3. Tambahkan kode di bawah ini (Ingat, tambahkan pada kode yang kedua dan keempat)

<div id='threaded-comment-form'>
----- tempat untuk kode warna merah di atas -----
</div>

Catatan :

Jika Anda sudah menambahkannya, maka kode akan berbentuk seperti di bawah ini :

<div id='threaded-comment-form'>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>

4. Setelah itu, cari kode di bawah ini :

document.getElementById(domId).insertBefore(replybox, null);

5. Silahkan Anda mengganti kode di atas dengan kode di bawah ini :

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Catatan :

Kode ini berfungsi untuk tetap menampilkan pesan peringatan di atas kolom komentar meskipun sudah banyak komentar di bawahnya

6. Cari lagi kode di bawah ini :

]]></b:skin>

7. Letakkan kode di bawah ini tepat berada di atas kode ]]></b:skin> :

/*-- Modifikasi Pesan Peringatan di Komentar Blog--*/
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 12px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

Catatan :
Kode ini berfungsi untuk memodifikasi pesan peringatan

8. Simpan template, Anda bisa melihat demo hasil seperti pada gambar di atas.

Read More