generasi baru

Friday, March 9, 2018

Cara Membuat Top Featured Post di Blogger

On March 09, 2018 by bence puying in Seo Freandly, Tips No comments

Featured Post adalah menampilkan artikel Top atau biasa disebut menampilkan artikel per/label. Jadi yang dimaksud Featured Post adalah menampilkan artikel anda dengan label. Widget ini cocok sekali buat anda yang ingin menampilkan artikel lama menjadi Top di bagian Home Page anda. Karena artikel lama sering sekali di abaikan oleh pengunjung blog anda, maka untuk itu agar artikel lama bisa terbacakan oleh pengunjung juga maka disarankan memasang widget ini. Widget ini sangat ringan, biasa nya ketika anda melihat Featured Post pasti berbentuk Slide atau Featured Post bergerak, namun untuk kali ini berbeda, Featured Post kali ini hanya menampilkan satu gambar dan beberapa artikel anda sesuai dengan label yang ingin anda tampilkan.

Untuk widget ini sendiri belum responsive dibagian mobile, maka dari itu saya menon-aktifkan tampilan mobile dengan memasang kode tag condisional diatasnya. Namun untuk tampilan desktop widget ini sangat keren. Ok, langsung saja ke proses pembuatan.

Cara Membuat Top Featured Post di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode </head>
2. Copy & Paste kode berikut ini, letakkan kode berikut ini tepat diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Recent Post by Label */
.featured-postlabel1 ul,.featured-postlabel2 ul{list-style:none;margin:0;padding:0}
.featured-postlabel1 li,.featured-postlabel2 li{margin:0;padding:0;}
.featured-postlabel1 .widget,.featured-postlabel2 .widget{margin:0;padding:0}
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{border: 1px solid #ddd;padding: 20px;word-wrap: break-word;overflow: hidden;color: #000;background: #fff;padding: 15px;border-radius: 2px;box-shadow: none;border: 1px solid #e6e6e6;margin: 10px;width: 90%;}
.featured-postlabel1 h2,.featured-postlabel2 h2,.featured-postlabel3 h2{position: relative;margin: 20px 10px;padding: 15px 20px;font-size: 16px;font-weight: 700;text-transform: uppercase;color: #fff;border:1px solid #e9e9e9;border-bottom:0;width: 89%;background: #455a64;border-radius: 4px;width: 89%;}
.featured-postlabel2 h2,.featured-postlabel3 h2{margin: 20px 10px;}
.featured-postlabel1 h2:before,.featured-postlabel2 h2:before,.featured-postlabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.featured-postlabel2 h2:before{content:&#39;\f0c3&#39;;}.featured-postlabel3 h2:before{content:&#39;\f143&#39;;}
.featured-postlabel1 .index,.featured-postlabel2 .index{font-size:10px;float:right;font-weight:400;}
.featured-postlabel1 .index a,.featured-postlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.featured-postlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.featured-postlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.featured-postlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.featured-postlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.featured-postlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.featured-postlabel2 span.featured-post_meta_comment a:hover{color:#38761d!important}
.featured-postlabel2 ul.featured-post_thumbs li a:hover,.featured-postlabel2 ul.featured-post_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.featured-post_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.featured-post_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.featured-post_thumbs{margin:0;padding:0}
ul.featured-post_thumbs li,ul.featured-post_thumbs2{margin:0;padding:0}
ul.featured-post_thumbs .featured-thumbnail{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.featured-post_thumbs .featured-thumbnail img{height:auto;width:100%;transition:all 0.2s}
ul.featured-post_thumbs .featured-thumbnail img:hover{opacity:.9;}
ul.featured-post_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.featured-post_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.featured-post_thumbs2 .featured-thumbnail2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.featured-post_thumbs2 .featured-thumbnail2 img{height:auto;transition:all .2s}
ul.featured-post_thumbs2 .featured-thumbnail2 img:hover{opacity:.9;}
span.featured-post_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.featured-post_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.featured-post_title a{color:#333}
span.featured-post_title a:hover{color:#ff675c;text-decoration:none}
span.featured-post_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.featured-post_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.featured-post_meta a{color:#aaa;display:inline-block}
span.featured-post_meta_date,span.featured-post_meta_comment,span.featured-post_meta_more{display:inline-block;margin-right:10px}
span.featured-post_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.featured-post_meta_comment a:hover{color:#ff675c!important}
span.featured-post_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.featured-post_thumbs2 li a:hover,ul.featured-post_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.featured-postlabel1 .widget-content, .featured-postlabel2 .widget-content {padding:20px 25px;}
.featured-post_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.featured-post_right {width:46%;float:right;margin:0;padding:0;}
ul.featured-post_thumbs .featured-thumbnail {width:100%;height:auto;}
ul.featured-post_thumbs .featured-thumbnail img {width:100%;height:auto;}
ul.featured-post_thumbs li {margin:0;padding:0;}
span.featured-post_title2 {font-size:20px;line-height:1.2em;}
span.featured-post_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs2 li{border-bottom:0}
span.featured-post_summary,.featured-post_left{display:none}
span.featured-post_title{margin:0 0 5px}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#featured-postlabel1-wrapper,#featured-postlabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px}
.featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 20px 1px 20px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px}
.featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 10px 1px 10px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="featured-post_left">'),document.write('<ul class="featured-post_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="featured-thumbnail"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="featured-post_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="featured-post_meta">'),1==showpostdate&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="featured-post_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="featured-post_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="featured-post_right">'),document.write('<ul class="featured-post_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="featured-thumbnail2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="featured-post_title featured-post_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="featured-post_meta featured-post_meta2">'),1==showpostdate2&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment featured-post_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="featured-post_meta_more featured-post_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lRKWO1FIwOvqCeDKWC7hG0PdvFBWExLWKr9HkHtSkzIr0Wt8TEJ4YLhDZ5ez_jkUcS6QUH4az9bCIRgNlc1YeI6hJoD2Tr_QJp4dUyHpNFsS5iFdnUaUR26lkE1q0govV17ynj16FqKC/s1600/featured-post_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKpkZrkFo0bNoMqO9mhO6zLw431qRrKDknFjHyPFrmMha_rOPYq7l6rlvcl96SwYE-ADBGPkIg9fL42ST1bvBNlW9U9ZOdOJzVAciFZyrzbtYFLfLWWIOvV7dID8I1MkIhWLkHwmFH8tv/s1600/featured-postthumb_small.png&quot;;
</script>
</b:if>
</b:if>

3. Temukan lagi kode <div class='post-container'> atau <div id='content-wrapper'>

Jika anda ingin menampilkan widget ini tepat dibawah menu header anda, maka letakkan kode berikut ini tepat dibawah nya, Ok!

4. Copy & Paste kode berikut ini, kemudian letakkan di atas kode <div class='post-container'>
Jika anda bingung mencari kodenya, silakan cari kode menggunakan (CTRL + F) Menu Header anda yang sudah dipasang, kemudian letakkan dibawahnya, simple!

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='featured-postlabel1-wrapper'>
        <b:section class='featured-postlabel1' id='featured-postlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='BAHASA' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='featured-postlabel2-wrapper'>
        <b:section class='featured-postlabel2' id='featured-postlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='BAHASA INGGRIS' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

5. Simpan Template.
6. Buka Tata Letak - Kemudian pilih gadget yang berada di atas blogpost atau posting blog.

Screenshoot :

7. Pilih Edit - kemudian ubah tulisan "Bahasa Indonesia" menjadi Label yang ingin anda tampilan, misalkan label nya "Internet" tulis nya pada bagian konten bukan dibagian judul.
8. Simpan Template!

Demikian Tutorial kali ini, bila anda mengalami kesulitan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda apakah widget tersebut udah muncul atau belum. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Top Featured Post di Blogger

Cara Membuat dan Memasang Iklan In-Article di Tengah Postingan

On March 01, 2018 by bence puying in Seo Freandly, Tips No comments

Peletakan unit iklan sangat berpengaruh pada pendapatan anda, jika anda menaruh sembarangan unit iklan tersebut pendapatan anda pun sedikit. Jadi harus butuh strategi untuk mendapatkan earning yang maksimal. Posisi peletakan iklan terbaik dan sangat strategis adalah di dalam artikel. Karena didalam artikel lah pengunjung membaca, berkomentar dan juga mengklik iklan anda. Sebenarnya peletakan unit iklan Google Adsense bisa dimana saja, tapi disarankan untuk memasangnya di dalam artikel.

Sesuai judul, saya akan membagikan cara memasang unit kode iklan yang bertipe iklan In-Article. Yap, In-Article adalah unit iklan baru yang dikeluarkan oleh Google Adsense untuk publisher yang ingin mendapatkan earning yang maksimal. Sesuai dengan namanya yaitu "In-Article" jika diartikan dalam bahasa Indonesia "Di dalam Artikel" jadi sudah jelas bukan kalo unit iklan ini harus diletakan di dalam artikel anda. Untuk anda yang bingung bagaimana cara peletakan iklan In-Article agar tampil di dalam artikel, disini saya akan membuat tutorialnya. Ok langsung saja ke proses pembuatan.

Cara Membuat dan Memasang Iklan In-Article di Tengah Postingan

Cara Pertama :

1. Buka Google Adsense - Kemudian login dengan akun anda.
2. Dashbard - My Ads
3. Pilih Ad Unit.

Screenshoot :

4. Setelah itu, maka anda akan disuruh memilih unit iklan, pilih In-Article.

Screenshoot :

5. Setelah itu, anda akan disuruh lagi mengedit tampilan unit iklan.

Screenshoot :

6. Jika sudah silakan anda tekan tombol "SAVE AND GET CODE".

Cara Kedua :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tema.

3. Edit HTML.

Proses Pembuatan :

1. Temukan kode <data:post.body/>

Biasanya kode ini lebih dari satu, silaka anda pilih yang kedua atau yang ketiga.

2. Sebelum menepatkan kode iklan anda, sebaiknya di parse terlebih dahulu kode iklan anda agar tidak terjadi kesalahan.

PARSE HTML

3. Copy&Paste kode berikut ini, silakan anda ganti kode <data:post.body/> dengan kode berikut ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>


<!-- Iklan Adsense (In-Article) Disini -->

&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioXi238bGTP3tZPbcbfMqTJLrqb38214JyuBwhfK4SBEmXIdY6_W0NcSKWHg898Qet2ooN99CilsZhy5_AXSXE6tPOIn5tzBoPpWzm-qSFZiJowyGYL6lZe6DJL0uhTfTabGY9CoTiHGs/s1600/in-article-ads.png'/>
&lt;/div&gt;

</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<div class='googlepublisherads' style='margin:20px 0'>
<center>

<!-- Iklan Adsense (In-Article) Disini -->

&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioXi238bGTP3tZPbcbfMqTJLrqb38214JyuBwhfK4SBEmXIdY6_W0NcSKWHg898Qet2ooN99CilsZhy5_AXSXE6tPOIn5tzBoPpWzm-qSFZiJowyGYL6lZe6DJL0uhTfTabGY9CoTiHGs/s1600/in-article-ads.png'/>
&lt;/div&gt;
</center>
</div>
&lt;script type=&#39;text/javascript&#39;&gt;
var ads1=2/5;
var ads2=4/5;
var a=document.getElementById(&quot;post1<data:post.id/>&quot;);
var b=document.getElementById(&quot;post2<data:post.id/>&quot;);
var c=document.getElementById(&quot;post3<data:post.id/>&quot;);
var html=b.innerHTML;
var n=html.length;
var t=html.substr(0,n*ads1);
var i=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
var t2=html.substr(0,n*ads2);
var i2=t2.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(i&gt;0 &amp;&amp; i2&gt;0){
a.innerHTML=html.substr(0,i);
b.innerHTML=html.substr(i+4,i2);
c.innerHTML=html.substr(i2+4);
}&lt;/script&gt;

4. Silakan anda ganti tulisan  dengan unit iklan in-article yang anda buat tadi.
5. Simpan Template!

Demikian Tutorial kali ini, bila anda mengalami kesulitan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda, apakah iklan sudah tayang atau belum. Semoga Bermanfaat! Thanks for Reading : Cara Membuat dan Memasang Iklan In-Article di Tengah Postingan.

Cara Membuat Layanan Contact Us di Blogger

On February 17, 2018 by bence puying in Seo Freandly, Tips No comments

Halaman contact us adalah layanan yang diberikan kepada pengunjung untuk memberikan pesan kepada admin. Halaman ini sangat perlu diterapkan, karena memudahkan pengunjung dalam memberikan pesan kepada admin. Terkadang menambahkan form contact us ini sering kali di salah gunakan oleh orang, seperti sengaja memberi pesan yang ga bermutu, mengkritik hal yang gajelas dan lain-lain. Tapi dibalik itu, banyak manfaatnya jika anda memasang form contact us ini, biasanya blog dengan tema download, anda bisa memanfaatkan form contact us ini untuk pengunjung dalam me-request software. Dengan mengisi nama, email dan pesan yang akan disampaikan, lalu anda menekan tombol "send" maka pesan anda akan langsung terkirim ke email admin. Kemungkinan akan dibales oleh admin jika dia sedang aktif.

Biasanya form contact us ini diguanakan oleh pengunjung jika komentar pengunjung tidak mendapatkan balasan dari sang admin, biasanya pengunjung menggunakan layanan contact us ini.

Berikut ini keuntungan membuat layanan contact us :

Pengunjung anda dapat menyampaikan pertanyaan dengan topik dari salah satu artikel anda.
Pengunjung anda dapat memberi kritikan atau saran yang mungkin secara tidak langsung.
Layanan Contact us ini adalah menu yang harus ada jika anda ingin mengajukan "Google Adsense"

Berikut ini kekurangan jika anda membuat layanan contact us :

Pengunjung yang kadang-kadang suka jail mengirim pesan tidak jelas atau semacamnya yang sudah pasti tidak penting ataupun pesan yang membuat kita marah.
Terkadang pengunjung tidak mengisi data dengan benar, walaupun data tidak benar pesan tetap saja terkirim ke email admin.
Pengunjung mengirim pesan diluar artikel yang dimaksud.

LIVE DEMO

Sebelumnya saya pernah membuat postingan tentang layanan contact us juga, anda bisa menggunakan ini jika anda tertarik.

Baca Juga :

Cara membuat Layanan Contact Us di Blogger hanya 5 menit!

Form contact us yang saya bagikan kali ini menggunakan 3 input, diantaranya Name, Email dan Message, dan juga dibekali 2 tombol yaitu, tombol "Send" dan juga tombol "Reset". Ok langsung saja ke proses pembuatannya.

Cara Membuat Layanan Contact Us di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.

Cara Kedua :

1. Buatlah 1 halaman dengan judul "Contact Us" atau "Hubungi Kami".
2. Pilih bagian HTML.

Screenshoot :

3. Copy & Paste kode berikut ini dan letakkan pada bagian HTML jangan pada bagian COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.notification{
    height: 35%;
    width: 90%;
    font-size: 16px;
    font-weight:bold;
    text-align: left;
    color: #fff!important;
    background: #07ACEC;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    margin-top: 15px;
        }  
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#07ACEC;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #07ACEC;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#07ACEC transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}

.contact-us{
float:none;
position:relative;
margin-bottom:45px;
margin-right:10px
}
.contact-us input,.contact-us textarea{
font-size:15px;
padding:15px 0;
display:block;
width:100%;
border:none;
border-bottom:1px solid #ddd
}
.contact-us input:focus,.contact-us textarea:focus{
outline:none
}
.contact-us label{
color:#999;
font-size:15px;
font-weight:400;
position:absolute;
pointer-events:none;
left:0;
top:10px;
transition:.2s ease all;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:14px;
color:#07ACEC;
}
.form{
position:relative;
display:block;
width:100%;
}
.form:before,.form:after{
content:'';
height:2px;
width:0;bottom:1px;
position:absolute;
background:#07ACEC;
transition:.2s ease all;
}
.form:before{
left:50%;
}
.form:after{
right:50%;
}
.contact-us input:focus ~ .form:before,.contact-us input:focus ~ .form:after,.contact-us textarea:focus ~ .form:before,.contact-us textarea:focus ~ .form:after{
width:50%;
}
.minimalis{
position:absolute;
height:50%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:.5;
}
.contact-us input:focus ~ .minimalis,.contact-us textarea:focus ~ .minimalis{
animation:inputminimaliser .3s ease;
}
.contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
top:-20px;
font-size:13px;
color:#07ACEC;
}
input#ContactForm1_contact-form-email-message{
height:150px;
}
input#ContactForm1_contact-form-submit{
color:#fff!important;
height: 50px;
font-size: 14px;
font-weight:bold;
background:#07ACEC;
padding:15px 25px;
border-radius:4px;
border:none;
outline:none;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
cursor:pointer;
transition:all .4s ease-in-out;
text-transform:uppercase;
float:left;
margin-top:15px;
}
input#ContactForm1_contact-form-submit:hover{
box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
input#ContactForm2_contact-form-submit{
height: 50px;
font-weight: bold;
font-size: 14px;
color:#fff!important;
background:#07ACEC;
padding:15px 25px;
border-radius:4px;
border:none;
outline:none;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
cursor:pointer;
transition:all .4s ease-in-out;
text-transform:uppercase;
float:right;
margin-top:15px;
}
input#ContactForm2_contact-form-submit:hover{
box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#ContactForm1_contact-form-error-message{
float:right;
background:#D32F2F;
color:#fff;
font-size:13px;
font-weight:700;
border-radius:3px;
}
#ContactForm1_contact-form-success-message{
float:right;
background:#4CAF50;
color:#fff;
font-size:13px;
font-weight:700;
border-radius:3px;
}
</style>

<br />
<br />
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">Hubungi Kami</strong>
</h1>
<form name="contact-form">
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Name</label>
</div>
<div class="contact-us">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Email</label>
</div>
<div class="contact-us">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="minimalis"></span>
<span class="form"></span>
<label> Your Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<input id="ContactForm2_contact-form-submit" type="reset" value="Reset" />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '53970099181xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d53970099181xxxxxxx','//','53970099181xxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '53970099181xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>
<br />
</div>

Keterangan :

Temukan pada kode diatas gunakan (CTRL + F) "53970099181xxxxxxx" silakan anda ganti dengan BlogID kepunyaan anda. Berikut ini adalah cara mencari BlogID :

Screenshoot :

4. Simpan Template!

Demikianlah Tutorial kali ini, bila ada kesalahan? silakan jangan sungka untuk berkomentar dibawah ini. Terakhir, silakan anda lihat atau bisa pratinjau. Lalu kemudian isi dengan nama, email dan pesan yang akan dikirim, kemudian cek email apakah email masuk atau tidak. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Layanan Contact Us di Blogger

Cara Membuat dan Memasang Iklan Adsense di Akhir Postingan

On February 10, 2018 by bence puying in Seo Freandly, Tips No comments

Salah satu agar meningkatnya penghasilan dari Google Adsense adalah penempatan unit iklan yang strategis. Tempat yang baik dan strategis untuk meletakkan unit iklan adalah di dalam postingan. Sebenarnya anda bisa meletakan dimana saja unit iklan tersebut, anda bisa meletakannya di home, di sidebar, di footer dan lain-lain. Namun sangat kecil kemungkinan bisa mendapatkan klik pada unit iklan tersebut jika meletakan yang saya sebutkan diatas.

Posisi peletakan iklan terbaik dan sangat strategis adalah di dalam postingan. Karena di dalam postingan yang anda buat para pengunjung blog anda bisa membaca, dan juga kemungkinan mengklik iklan anda, dan andapun mendapatkan penghasilan. Pada dasarnya posisi peletakan unit iklan itu sendiri berkaitan dengan template yang anda gunakan. Terkadang template bagus biasanya menyediakan slot iklan, biasanya terdapat di sebelah kanan header, dibawah menu header, dan di bawah page number navigasi. Tetapi apapun peletakannya, tetap saja para blogger biasa menempatkan unit iklan nya di dalam postingan.

Ok, pada postingan kali ini saya akan mengulas cara peletakan iklan di akhir postingan, atau lebih tepatnya dibawah tombol share yang ada di template anda.

Karena script kode unit iklan adsense tidak serta merta di terima oleh HTML Blogger. Jikalau bisa pasti akan terjadi error. Untuk itu script kode iklan unit iklan wajib di parse terlebih dahulu.

Memangnya boleh mengubah script unit iklan Adsense?
Anda tidak perlu khawatir, karena melakukan parse pada script unit iklan sama sekali tidak melanggar kebijakan Google Adsense. Karena script unit iklan adsense tidak serta merta di terima oleh HTML Blogger maka dari itu agar tidak terjadi error maka script unit iklan tersebut haruslah di parse.

Cara Membuat dan Memasang Iklan Adsense di Akhir Postingan

Cara Pertama :

1. Silakan anda login pada akun Google Adsense anda.
2. Pilih menu "My Ads" - "Ad Units"

Screenshoot :

3. Pilih "New ad unit"
4. Maka anda akan di suruh memilih iklan mana yang anda sukai.

Screenshoot :

5. Silakan pilih "Text & display ads"
6. Maka anda akan disuruh mengedit iklan yang ingin di tampilkan.

Screeshoot :

7. Silakan anda isi yang disuruh :
- Name
- Ad Size
- Ad Type
- Save and get code

Saya sarankan untuk menggunakan ukuran iklannya 300 x 250, karena ukuran ini biasa digunakan oleh para Blogger.

8. Jika sudah, silakan pilih "Save and get code"
9. Maka akan muncul pop-up kode iklan anda.

Screenshoot :

10. Double-Clik pada kodenya, kemudian Copy.

Setelah kode iklan di salin maka selanjutnya adalah silakan anda parse dulu kode iklan tersebut. Tujuannya agar tidak terjadi error pada template yang anda gunakan. Karena kode iklan adsense tidak serta merta diterima oleh HMTL Blogger, maka dari itu kode iklan harus di parse.

PARSE HTML

Cara Kedua :

1. Buka Blogger - Kemudian login.
2. Dashboard - Tema
3. Edit HTML.
4. Temukan kode <data:post.body/>

Gunakan CTRL + F Untuk memudahkan pencarian kode. Kode <data:post.body/> ini biasanya lebih dari satu, silakan anda pilih yang kedua atau yang ketiga.

5. Copy & Paste kode berikut ini dan letakkan diatas kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<!-- iklan di bawah postingan taruh di sini -->
</center>
</b:if>

6. Simpan Template.

Demikian Tutorial kali ini, bila anda mengalami kesulitan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda, apakah iklan sudah tayang atau belum. Semoga Bermanfaat! Thanks for Reading : Cara Membuat dan Memasang Iklan Adsense di Akhir Postingan

MEMBUAT WEBSITE JEJARING SOSIAL

On January 31, 2018 by bence puying No comments

Membuat situs jejaring sosial seperti Facebook atau Twitter, jujur saja bukanlah hal yang susah. Untuk Anda yang 'buta' akan bahasa Web Progamming sekalipun, bisa dengan mudah membuatnya hanya dengan satu klik.Dengan semngat niat dan membaca artikel artikel pasti anda dapat membuat website jejaring sosial ini
Kemudahan tersebut tak lain dan tak bukan dikarenakan adanya CMS Open Source ( Gratis ) yang bisa Anda download dan install di Hosting mana saja.Garis besarnya sebagai berikut :Beli Hosting - Beli Domain - Download CMS - Upload CMS - Install CMSMungkin sebagian dari Anda akan protes begini 'lho katanya tadi, kita bisa buat situs jejaring sosial hanya dengan satu klik ?'Cara yang saya sebutkan diatas adalah Cara Umum, sementara yang akan saya bahas disini adalah Cara Khusus, dimana Anda tidak perlu lagi Beli Hosting, Beli Domain, Download CMS dan Upload CMS, melainkan cukup dengan Satu Klik yaitu Install CMS.Seperti biasa, disini saya akan membagi tutorial membuat situs jejaring sosial ini kedalam dua bagian :

[ Teks + Gambar ] Cara Membuat Situs Jejaring Sosial

[ Teks + Gambar ] Cara Membuat Database

[ Video ] Cara Membuat Situs Jejaring Sosial

Tutorial pertama akan menjelaskan tentang bagaiaman cara membuat database, dan pada tutorial yang kedua (teks dan gambar) saya akan menjelaskan kepada Anda secara detail tentang bagaiamana cara membuat jejaring, dan tutorial ini akan ditutup dengan contoh video, khusus untuk Anda yang lebih suka 'menonton' ketimbang 'membaca'.

CARA MEMBUAT WEBSITE JEJARING SOSIAL

Disini kita akan membuat jejaring sosial menggunakan Software Open Source Oxwall, dimana ada beberapa hal yang perlu kita perhatikan, diantaranya adalah versi dari Database MySQL yang wajib diatas versi 5 keatas. Dan kabar baiknya tempat Hosting Gratisan yang saya gunakan sudah menggunakan MySQL versi 5.1 artinya syarat untuk Menginstall Oxwall sudah terpenuhi.

Langsung saja, berikut langkah-langkah dalam membuat jejaring sosial menggunakan Oxwall.

Buka IDHostinger
http://hostg.co/27451

Masukkan username dan password, lalu klik Log In.
Klik Hosting

Cara Membuat Tombol Subscribe Responsive di Blogger

On January 11, 2018 by bence puying in Seo Freandly, Tips No comments

Salah satu untuk mendapatkan pengunjung setia adalah memasang tombol subscribe di Blogger. Tombol subscribe ini sangat penting untuk sebuah blog karena dengan adanya tombol ini pengunjung bisa berlangganan artikel ketika anda sedang update dan pengunjung bisa mendapatkan update'an terbaru tersebut melalui email mereka. Nantinya ketika anda membuat artikel baru, maka artikel tersebut akan terkirim ke email pengunjung dan kemungkinan mereka akan melihat notifikasi email tersebut dan mengunjungi blog anda. Kali ini saya akan membagikan Tombol Subscribe Newsletter dimana tombol ini bisa anda letakan dibagian Footer, dibawah postingan, atau di Sidebar. Ok, langsung saja ke proses pembuatan.

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema
3. Edit HTML.

Proses Pembuatan :

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

/* Top Subscribe */
#subscribe{
display:block;
background-color:#374760;
position:relative;
width:100%;
padding-top:25px;
padding-bottom:25px;
z-index:9;
}
input#wq{
background:#fff;
color:#333;
font:400 15px/12px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:0;
padding:21px;
width:60%;
height:22px;
outline:0;
border:none;
border-radius:4px;
box-shadow:initial;
transition:all .1s;
}
#subscribe p{
float:none;
width:100%;
margin-top:10px;
margin-bottom:-10px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
font-size: 15px;
letter-spacing:0.07em;
color:#fff;
}
#subscribe p::selection{
color:#333;
}
input#wq:focus{
color:#333;
box-shadow:inset 0 2px 2px rgba(0,0,0,0.15);
}
form.subscribe-form{
position:relative;
width:80%;
margin:20px auto;
text-align:center;
}
form.subscribe-form:focus {
box-shadow:inset 0 2px 2px rgba(0,0,0,0.15);
}
.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:15px 0;
}
form.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0 0;
width:auto;
}
input#subscribesubmit{
background-color:#36a7f2;
border:1px solid transparent;
color:#fff;
display:inline-block;
position:absolute;
right:25%;
top:0;
padding:10px 20px;
border-radius:0 4px 4px 0;
transition:.2s all;
font-weight:600;
text-transform:uppercase;
font-size:14px;
}
input#subscribesubmit:hover, input#subscribesubmit:focus , input#subscribesubmit:active{
background-color:#1f6b9a;
color:#fff;
cursor:pointer;
outline:0;
}
@media only screen and (max-width:768px){
input#subscribesubmit{
top:10px;
width:100%;
border-radius:4px;
float:none;
position:relative;
right:0;
}
#subscribe{
padding-bottom:30px;
}
input#wq{
width:100%;
}
p#subscribe{
font-size:14px;
letter-spacing:0.15em;
}
@media screen and (max-width: 768px){
#subscribe-email{
width:85%!important;
}

3. Jika sudah, Temukan lagi kode :
<footer id='footer-wrapper'> Jika ingin meletakkan di footer, letakkan kode berikut ini tepat diatasnya tulisan copyright.
<data:post.body/> Jika ingin meletakkan dibawah postingan, pilih kode yang ke-2 atau anda bisa meletakkan kode berikut ini dibawah tombol share <div class='sharepost'>
4. Copy & Paste kode berikut ini, dan letakkan sesuai dengan selera anda dimana saja.

<div id='subscribe'>
<p>SUBSCRIBE TO NEW ARTICLE</p>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa' class='subscribe-form emailsubscribe' data-code='p4s8z2' method='POST'>
<input id='subscribe-email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Email . . .&quot;;}' onfocus='if (this.value == &quot;Masukan Email . . .&quot;) {this.value = &quot;&quot;;}' pattern='[a-zA-Z0-9.!#$%�*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' required='required' style='background:#fff;color:#333;font:400 15px/12px&quot;Roboto&quot;,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:9px 20px;width:40%;outline:0;border:1px solid transparent;border-radius:4px;box-shadow:initial;transition:all .1s;' type='email' value='Masukan Email . . .'/>
<input id='subscribesubmit' type='submit' value='Daftar'/>
</form>
</div>

5. Simpan Template!

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage atau postingan anda, widget tersebut udah muncul atau belum. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Tombol Subscribe Responsive di Blogger

Cara Membuat Menu Header Plus Tombol Search Responsive

On January 10, 2018 by bence puying in Seo Freandly, Tips No comments

Menu Header merupakan sebuah Tab Menu yang berisi sebuah petunjuk arahan untuk pengunjung mencari kategori dari situs, yang berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu Header ini wajib ada dalam sebuah blog anda, karena menu ini berguna untuk memudahkan pengunjung dalam mencari kategori sebuah artikel. Menu Header ini sendiri biasanya berada pada bagian Header atau dibawah Menu Navigasi. Menu Header ini sangat perlu diterapkan di blog anda, karena memudahkan pengunjung dalam surfing semua isi blog anda. Menu Header yang saya berikan kali ini sangat responsive, karena menu ini akan menyesuaikan pada perangkat anda. Selain responsive, menu ini juga dibekali plus dengan tombol search. Dimana tombol search ini berguna untuk mencari artikel anda. Ok, cukup sampai disini deskripsinya selanjutnya langsung ke proses pembuatan.

Cara Pertama :

1. Buka Blogger - Kemudian login

2. Dashboard - Template

3. Edit HTML

Proses Pembuatan :

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

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

/* HEADER MENU */
.menu-header {
    display:none;
    padding:0 15px;
 height:48px;
 line-height:48px;
    color: #fff !important;
 border-radius:$(curvature.border.radius);
}
.menu-dropdowns {
 font-family:sans-serif;
 background:#374760;
 font-weight:bold;
 text-transform:uppercase;
 height:60px;
 line-height:50px;
 border-radius:4px;
 padding:2px;
}
.nav-menu2 {
 padding:5px;
 background:#374760;
    list-style: none;
 margin:0 0 0 0;
    *zoom: 1;
 float:left;
 border-radius:$(curvature.border.radius);
}
.nav-menu2:before,
.nav-menu2:after {
    content: " "; 
    display: table; 
}
.nav-menu2:after {
    clear: both;
}
.nav-menu2 ul {
    list-style: none;
 margin:0 0 0 0;
 width:auto;
    white-space:nowrap;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 a {
 display:block;
    padding:0 15px;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 li {
    position: relative;
 margin:0 0;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 > li {
    float: left;
 margin:2px;
}
.nav-menu2 > li > a {
 color:#fff;
    display: block;
 height:48px;
 line-height:48px;
 color:$(menu.navigation.text.color);
 box-shadow: 0 4px 0 #374760 inset;
}
.nav-menu2 > li > a.active {
 background:#374760;
 box-shadow: 0 4px 0 #374760 inset;
}
.nav-menu2 > li:hover > a {
 background:#36a7f2;
 box-shadow: 0 4px 0 #374760 inset;
 border-radius:4px;
}
.nav-menu2 li ul {
 background:#fff;
 display:block;
 position:absolute;
 left:0;
 z-index:10;
 visibility:hidden;
 opacity:0;
    -webkit-transition:all .25s ease-out;
       -moz-transition:all .25s ease-out;
        -ms-transition:all .25s ease-out;
         -o-transition:all .25s ease-out;
            transition:all .25s ease-out;
 box-shadow:0 0 4px rgba(0,0,0,0.3);
}
.nav-menu2 li li ul {
 left:100%;
 top:-1px;
}
.nav-menu2 > li.hover > ul {
 visibility:visible;
 opacity:10;
}
.nav-menu2 > li > ul:before {
 content:"";
 width:0px;
 height:0px;
 position:absolute;
 bottom:100%;
 left:20px;
 border-width:8px;
 border-style:solid;
 border-color:transparent transparent #fff transparent;
 display:block;
}

.nav-menu2 li li.hover ul {
 visibility:visible;
 opacity:10;
}
.nav-menu2 li li a {
 margin-left:-45px;
    display: block;
 color:#333;
    position: relative;
    z-index:100;
 line-height:32px;
}
.nav-menu2 li li a:hover {
 background:#374760;
}
.nav-menu2 li li li a {
    background:#fff;
    z-index:20;
 color:#333;
}
.nav-menu2 li .parent:after {
    content: "\f107"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-left:6px;
}

/* SEARCH FORM */
#search-form {
 background:#374760;
 float:right;
 margin:0 0;
 width:220px;
 border-radius:$(curvature.border.radius);
}
#search-form table {
 width:100%;
 margin:0 0 0 0;
}
#search-form td.search-box {
 padding-right:30px;
 background:#374760;
 border-radius:4px;
}
#search-form input#search-box[type="text"] {
 background:#fff;
 height:36px;
 line-height:36px;
 margin:5px 0 5px 10px;
 padding:0 10px;
 width:99%;
 color:#000);
 border:none;
 text-transform: uppercase;
 border-radius:4px;
}
#search-form input#search-button[type="submit"] {
 font-family: FontAwesome;
 background:#fff;
 color:$(button.color);
 height:36px;
 line-height:36px;
 margin:5px 10px 5px 0;
 padding:0 12px;
 border:none;
 outline:none;
 transition:all 0.25s;
 -moz-transition:all 0.25s;
 -webkit-transition:all 0.25s;
 border-radius:4px;
}
#search-form input#search-button[type="submit"]:hover{
 cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
 background:#eee;
 outline:none;
}

/* MEDIA QUERY */
@media only screen and (max-width:1066px){
 #wrapper {
  margin:0 auto;
 }
}
@media only screen and (max-width:768px){
 #wrapper {
  padding:12px;
 }
 #post-wrapper, #sidebar-wrapper, .nav {
  float:none;
  width:100%;
  max-width:100%
 }
    .active {
        display: block;
    }
 #search-form {
  width:100%;
  margin:10px 0 0 0 !important;
 }
 .nav li ul:before { 
  display:none;
 }
    .nav > li {
        float: none;
  overflow:hidden;
    }
    .nav ul {
        display: block;
        width: 100%;
  float:none;
    }
 .nav-menu2 ul {
  white-space:normal !important;
 }
 .nav-menu2 li ul {
  background:#eee;
  border:none;
  box-shadow:none;
 }
 .nav-menu2 li li ul {
  background:#f5f5f5;
 }
 .nav-menu2 li li a:hover {
  background:#ddd;
 }
    .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
 #search-form {
  width:100%;
  background:$(menu.background.color);
 }
 #search-form td.search-box {
  padding:0 10px !important;
 }
 #search-form td.search-button {
  background:#374760;
  padding:0 10px;
  width:1%;
  border-radius:4px;
 }
 #search-form input#search-box[type="text"] {
  margin:0 0 0 0;
 }
 #search-form input#search-button[type="submit"] {
  margin:0 0 0 0;
 }
 .img-thumbnail {
  margin:3px 10px 3px 0;
 }
 .sidebar-container, .post-container {
  padding:15px 0 0px;
 }
}

3. Temukan kode <header> atau <div class='header-wrapper'> atau <div class='outer-wrapper'>
4. Copy & Paste kode berikut ini dan letakkan diatas kode salah satu kode diatas.

  <!-- menu header start-->
  <nav class='menu-dropdowns'>
  <a class='menu-header' href='#'><i class='fa fa-th-list'/> MENU </a>
  
 <!-- secondary navigation menu start -->
 <ul class='nav nav-menu2'>
  <li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
  <li><a href='#'><i class='fa fa-wrench'/> Menu</a><i/>
   <ul>
     <li><a href='####'>Menu 1</a></li>
              <li><a href='####'>Menu 2</a></li>
     <li><a href='####'>Menu 3</a></li>
              <li><a href='####'>Menu 4</a></li>
              <li><a href='####'>Menu 5</a></li>
              <li><a href='####'>Menu 6</a></li>
              <li><a href='####'>Menu 7</a></li>
            </ul>
  </li>
  <li><a href='####'><i class='fa fa-pencil'/> Menu 2</a><i/>
   <ul>
              <li><a href='####'>Menu 1</a></li>
     <li><a href='####'>Menu 2</a></li>
     <li><a href='####'>Menu 3</a></li>
              <li><a href='####'>Menu 4</a></li>
            </ul>
  </li>
            <li><a href='####'>Menu 3</a></li>
            <li><a href='####'>Menu 4</a></li>
   <li><a href='####'>Menu 5</a></li>
   <li><a href='####'>Menu 6</a></li>
   
 </ul>
 <!-- secondary navigation menu end -->
 
 <form action='/search' id='search-form' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
 
  </nav>
  
 
  <div class='clear'/>
  <!-- menu header end --

5. Terakhir, temukan kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-header").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-header").css("display","inline-block");if(!$(".menu-header").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-header").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]>
</script>

7. Simpan Template!

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, menu tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Header Plus Tombol Search Responsive

Incomming Search:

Cara Membuat Menu Header, Cara Membuat Menu, Cara Membuat Header Menu, Cara Membuat Top Menu Navigasi, Cara Membuat Menu Header Responsive, Cara Membuat Menu Navigasi, Cara Membuat Menu Navigasi Header, Cara Membuat Menu Responsive

Cara Membuat Menu Navigasi Responsive di Atas Header

On January 05, 2018 by bence puying in Seo Freandly, Tips No comments

Hello, kalau anda pernah mengunjungi blog saya maka akan terlihat perubahan, yakni perubahan pada template. Saya jarang membuat artikel dikarenakan sedang membuat sebuah template yang nantinya saya akan terapkan pada blog saya. Kini template yang saya buat tersebut sudah saya terapkan pada blog saya. Nantinya kalo banyak yang minat, template ini akan saya bagikan. Ok langsung saja ke intinya, ketika anda meliat blog saya, maka akan terlihat Menu Navigasi. Menu Navigasi adalah menu yang wajib ada disetiap template, karena menu ini berguna ketika mendaftar Adsense. Jika tidak ada menu navigasi ini, maka akan tertolak oleh Google Adsense. Para blogger biasa menggunakannya untuk meletakkan form halaman khusus misalnya contact us. Menu Navigasi yang saya bagikan kali ini sangat responsive baik versi desktop maupun versi mobile. Menu ini akan menyesuaikan dengan perangkat yang anda gunakan. Saya sendiri sudah mendesain menu ini seminimalis mungkin agar super responsive. Ok, langsung saya ke proses pembuatan.

Cara Membuat Menu Navigasi Responsive di Atas Header

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tema.

3. Edit HTML.

Proses Pembuatan :

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

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

/*Top Menu Navigasi */
.menu-wrapper {background:#374760;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-radius:2px;}
.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:'Open Sans Condensed';font-size:16px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:5px;padding:8px 12px;line-height:100%;transition:color 0.3s;height:20px;border-radius:4px;}
.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:#36a7f2;color:#fff;border-radis:2px;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:#36a7f2;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{height:30px;color:#fff;display:inline-block;font-family:"Open Sans";font-size:12px;font-weight:700;padding:10px;position:relative;text-align:center;font-size:20px;width:100%;float:left;}
.top-menu a#pull:before{content: '\f0c9';font-family: FontAwesome;font-style: normal;font-weight: bold;text-decoration: none;font-size: 30px;color: #999;display: inline-block;position: absolute;left: 15px;top: 20%;}
.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:#36a7f2;color:#fff;border-radius:4px;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width: 480px)
.top-menu a#pull {
    height:35px;
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;border-radius: 4px;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

3. Temukan kode <header id='header-wrapper'> , </header> , <div class='header-wrapper'> atau yang menyerupai. Atau anda bisa meletakan kode berikut ini, diatas menu header milik anda.
4. Copy & Paste kode berikut ini, dan letakkan diatas kode <header id='header-wrapper'> , </header> , <div class='header-wrapper'>

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
<li><a href='/p/blog-page_51.html' title='Contact us'><i class='fa fa-envelope'/> CONTACT US</a></li>
<li><a href='/p/daftar-isi-postingan.html' title='Sitemap'><i class='fa fa-list'/> SITEMAP</a></li>       
<li><a href='/p/disclaimer.html' title='Disclaimer'><i class='fa fa-check-circle'/> DISCLAIMER</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'><i class='fa fa-unlock-alt'/> PRIVACY POLICY</a></li>
<li><a href='###' title='Advertisement'><i class='fa fa-gg-circle'/> ADVERTISEMENT</a></li>
<li><a href='/p/partner_3.html' title='My Partner'><i class='fa fa-external-link'/> LINK PARTNER</a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

5. Temukan kode </head> atau </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </head> atau </body>

<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>

Cara Membuat Boxes Notification atau Kotak Catatan di Blogger

On December 13, 2017 by bence puying in Seo Freandly, Tips No comments

Boxes Notification adalah sebuah kotak peringatan atau kotak catatan tujuannya adalah untuk membuat sebuah peringatan kepada pengunjung. Biasanya peringatan itu dalam sebuah tulisan tujuannya untuk memberitahukan info penting catatan yang perlu diperhatikan. Boxes Notification ini tidak asing lagi dikalangan blogger karena ini biasa digunakan oleh sebuah blog yang membahas tutorial. Dengan adanya Boxes Notification ini memudahkan pengunjung dalam memilah point penting dalam suatu artikel. Contohnya bisa Anda lihat sendiri pada gambar diatas, dengan tampilan yang minimalis ditambahkan Icon Volume menggunakan Font Awesome Icons Bootstrap menjadikan Boxes Notification ini menjadi enak dipandang. Saya rasa cukup deskripsi pengertian Boxes Notification selanjutnya kita akan praktekan cara pembuatannya.

Cara Membuat Boxes Notification atau Kotak Catatan di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tema/Template.
3. Tema - Edit HTML

Proses Pembuatan :

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

/*Notification Boxes*/

.post-body blockquote {
    text-align: left;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: &amp;amp;#039;Catatan&amp;amp;#039;;
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    display: block;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    color: #6591c2;
}

.post-body blockquote:after {
    position: absolute;
    content: &amp;amp;#039;\f027&amp;amp;#039;;
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}

3. Save Template.

Cara Menggunakan Boxes Notification di Blogger

1. Buat Entri Baru.

2. Kemudian Tekan Menu "Quote" di samping kanan "Bullet List" pada Bar Action Blogger

Demikianlah Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda buat artikel jangan lupa di block biru dulu kata-katanya kemudian tekan tombol "Quote" . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Boxes Notification atau Kotak Catatan di Blogger

Cara Membuat Safelink Converter di Blogger Tanpa Domain TLD

On December 09, 2017 by bence puying in Seo Freandly, Tips No comments

Safelink Converter adalah sebuah script khusus yang dapat mengubah semua link di website anda menjadi Enkripsi. Dengan dipasangi script ini Anda akan diarahkan terlebih dahulu ke sebuah halaman khusus dimana berisikan berupa sebuah konten pendek, banyak iklan-iklan dan sebuah Tombol Visit Link yang dimana tombol tersebut berguna untuk mengarahkan link asli yang sudah di Enskripsi tadi menjadi halaman tujuan Anda. Safelink Converter ini menggunakan 5 artikel dengan secara acak/random dengan menggunakan Encode Base64 sehingga link tidak ada yang sama.

Safelink Converter ini sendiri sudah mulai banyak penggunanya oleh beberapa situs website karena keuntungan yang didapatkan lumayan besar, biasanya situs bertemakan download. Karena situs website yang bertemakan download maka tidak akan diterima oleh Google Adsense itu sudah menjadi kebijakan Google Adsense, oleh karena itu pemilik situs website yang bertemakan download disarankan menggunakan mitra iklan lain yang sudah pasti terpercaya, namun jika terdapat sebuah iklan Google Adsense di Safelink Converter pada situs bertemakan download. Mungkin saja membeli sebuah akun Google Adsense atau JV Adsense dengan Teman, lalu kode iklan Adsense nya di letakkan di Safelink Converter itu dan mendapatkan penghasilan yang lumayan besar.

Tentunya tidak hanya iklan dari Google Adsense saja yang dapat dipasang pada situs Safelink Converter ini, iklan-iklan lain juga bisa ditayangkan di situs Safelink Converter ini, seperti Revenuehits, Popcash, Popads, dan lain-lain. Karena berkat adanya Safelink Converter ini, Publisher yang memiliki situs website seperti di atas tetap bisa mendapatkan penghasilan dari Google Adsense dan mitra iklan lainnya. Ok, cukup deskripsi tentang Safelink Converter, sekarang kita menuju langsung proses pembuatan, harap simak baik-baik agar tidak terjadi kesalahan.

LIVE DEMO

Cara Membuat Safelink Converter di Blogger Tanpa Domain TLD

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Buatlah sebuah Blog Baru.

3. Karena pada Tutorial kali ini Menggunakan Blogger Tanpa Domain TLD, Semua URL harus kita aktifkan pengalihan pada URL Tersebut sehingga menjadi HTTPS.

- Buka Setelan - Kemudian HTTPS - Pengalihan HTTPS Menjadi "Ya"

Screenshoot :

Bahan-Bahan :

1. Download Template Safelink Converter V. 10 - [GOOGLE DRIVE]
2. Silakan Anda Upload Template yang sudah Anda Unduh:

- Masuk ke Menu Tema/Template - Backup/Pulihkan - Upload File - Browse File

Proses Pembuatan :

1. Silakan buat 5 artikel yang berbeda, karena nantinya artikel ini akan di acak secara random.
2. Copy kode berikut ini dan buatlah postingan, lalu paste letakkan pada HTML bukan COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="text-center margin-bottom-20">
<!-- BEGIN ADREACTOR CODE -->
    <br />
<div id="avp_zid_9">
<script>
    _avp.push({ tagid: 'avp_zid_9', alias: '/', type: 'banner', zid: 9, pid: 3545 });
    </script>
    </div>
<!-- END ADREACTOR CODE -->
</div>
<div class="row margin-bottom-20">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h2>
<i class="fa fa-shield"></i> Safe Link Converter <i class="fa fa-shield"></i></h2>
</div>
<div class="panel-body text-center">
<div class="text-primary margin-bottom-20">
Encrypting your link and protect the link from viruses, malware, thief, etc!<br />
Made your link safe to visit.</div>
<div class="progress" id="daplong">
<div class="progress-bar progress-bar-striped active six-sec-ease-in-out" data-transitiongoal="100" role="progressbar">
</div>
</div>
<button class="alert alert-dismissible alert-success btn-lg" id="download2" style="display: none;"><i aria-hidden="true" class="fa fa-thumbs-o-up"></i> <b>Well done!</b> you have successfully gained access to Decrypted Link.</button>
</div>
</div>
</div>
<div class="col-md-6 text-left">
<div class="panel panel-info">
<!-- Default panel contents -->

<br />
<div class="panel-heading">
<h2>
<i aria-hidden="true" class="fa fa-question-circle-o"></i> How to Use our Tools:</h2>
</div>
<div class="panel-body">
<ol>
<li>Click on <b>How To Use</b> menu above.</li>
<li>Click on the code and <kbd><kbd>CTRL</kbd> + <kbd>C</kbd></kbd> on your keyboard.</li>
<li>Paste the code in your HTML blog theme before the <mark>&lt;/body&gt;</mark>.</li>
<li>Save your HTML blog theme. you are done!</li>
<li>Now, your blog's outbound links was encrypted!</li>
</ol>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="row margin-bottom-20">
<div class="col-md-4 text-center">
<!-- BEGIN ADREACTOR CODE -->
    <br />
<div id="avp_zid_6">
<script>
    _avp.push({ tagid: 'avp_zid_6', alias: '/', type: 'banner', zid: 6, pid: 3545 });
    </script>
    </div>
<!-- END ADREACTOR CODE -->
</div>
<div class="col-md-4 margin-top-25">
<div class="panel panel-success text-center">
<div class="panel-heading">
<h3 class="panel-title">
<b>Your link show here</b> <i aria-hidden="true" class="fa fa-hand-o-down"></i></h3>
</div>
<div class="panel-body">
<script src="https://rawgit.com/hilmay619/upload-file/master/postingan-safelink.js" type="text/javascript"></script>
<script type="text/javascript">
var currentURL=location.href;
var str = currentURL;
var res = str.replace("https://maycyber-download-safelink.blogspot.com/2017/12/lorem-ipsum-dolo.html?url=", "");
document.write('<button type="button" id="download" class="Visit_Link btn btn-success" onclick="changeLink();" style="display: none;"><strong>Visit Link</strong> <i class="fa fa-external-link" aria-hidden="true"></i></button>')
</script>
<b><a class="Visit_Link btn btn-success" href="https://maycyber-download-safelink.blogspot.com/2017/12/lorem-ipsum-dolo.html">Download Now</a></b></div>
</div>
</div>
</div>

ARTIKEL 500+ KATA BEBAS / KATA-KATA BASA-BASI / IKLAN ADSENSE

ARTIKEL 500+ KATA BEBAS / KATA-KATA BASA-BASI = SILAKAN ANDA COPAS ARTIKEL BEBAS BERAPA KATA ATAU BISA MENARUH IKLAN GOOGLE ADSENSE DIBAWAHNYA.

3. Lakukan pada point 2. Buatlah postingan sebanyak 5 artikel.

Screenshoot :

4. Jika sudah di paste kode diatas pada bagian HTML dan membuat 5 artikel, maka selanjutnya Anda harus mengganti kode Java Script kepunyaan saya yang sudah di hosting. Menjadi kode Java Script milik Anda dan sudah Anda hosting sendiri.

Screenshoot :

Temukan kode :

https://rawgit.com/hilmay619/upload-file/master/postingan-safelink.js

5. Copy kode JS postingan berikut ini, lalu pastekan di Notepad - Save File dengan Extensi .JS

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+ this._keyStr.charAt(enc1)+ this._keyStr.charAt(enc2)+ this._keyStr.charAt(enc3)+ this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var i=0;input=input.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(i<input.length){enc1=this._keyStr.indexOf(input.charAt(i++));enc2=this._keyStr.indexOf(input.charAt(i++));enc3=this._keyStr.indexOf(input.charAt(i++));enc4=this._keyStr.indexOf(input.charAt(i++));chr1=(enc1<<2)|(enc2>>4);chr2=((enc2&15)<<4)|(enc3>>2);chr3=((enc3&3)<<6)|enc4;output=output+ String.fromCharCode(chr1);if(enc3!=64){output=output+ String.fromCharCode(chr2);}
if(enc4!=64){output=output+ String.fromCharCode(chr3);}}
output=Base64._utf8_decode(output);return output;},_utf8_encode:function(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}
else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}
else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}
return utftext;},_utf8_decode:function(utftext){var string="";var i=0;var c=c1=c2=0;while(i<utftext.length){c=utftext.charCodeAt(i);if(c<128){string+=String.fromCharCode(c);i++;}
else if((c>191)&&(c<224)){c2=utftext.charCodeAt(i+ 1);string+=String.fromCharCode(((c&31)<<6)|(c2&63));i+=2;}
else{c2=utftext.charCodeAt(i+ 1);c3=utftext.charCodeAt(i+ 2);string+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));i+=3;}}
return string;}}
var encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";var protected_links="";var a_to_va=0;var a_to_vb=0;var a_to_vc="";function auto_safelink(){auto_safeconvert();}
function auto_safeconvert(){var a_to_vd=window.location.hostname;if(protected_links!=""&&!protected_links.match(a_to_vd)){protected_links+=", "+ a_to_vd;}else if(protected_links=="")
{protected_links=a_to_vd;}
var a_to_ve="";var a_to_vf=new Array();var a_to_vg=0;a_to_ve=document.getElementsByTagName("a");a_to_va=a_to_ve.length;a_to_vf=a_to_fa();a_to_vg=a_to_vf.length;var a_to_vh=false;var j=0;var a_to_vi="";for(var i=0;i<a_to_va;i++)
{a_to_vh=false;j=0;while(a_to_vh==false&&j<a_to_vg)
{a_to_vi=a_to_ve[i].href;if(a_to_vi.match(a_to_vf[j])||!a_to_vi||!a_to_vi.match("http"))
{a_to_vh=true;}
j++;}
if(a_to_vh==false)
{var encryptedUrl=Base64.encode(a_to_vi);a_to_ve[i].href="http://maycyber-download-safelink.blogspot.com/2017/12/?url="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"\n";}}
var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");if(a_to_vj)
{a_to_vj.innerHTML+=a_to_vb;}
if(a_to_vk)
{a_to_vk.innerHTML+=a_to_va;}}
function a_to_fa()
{var a_to_vf=new Array();protected_links=protected_links.replace(" ","");a_to_vf=protected_links.split(",");return a_to_vf;}

http://maycyber-download-safelink.blogspot.com/2017/12/ = SILAKAN ANDA GANTI DENGAN NAMA ALAMAT URL BLOG ANDA, KEMUDIAN TANGGAL POSTINGAN ANDA.

Contoh :

https://maycyber-download-safelink.blogspot.com/2017/12/go-to-url.html
Maka go-to-url.html dihapus sehingga menjadi /2017/12/

6. Kemudian Save File dengan Format .JS

7. Silakan anda Hosting/Upload Java Script yang sudah Anda buat tadi, di salah satu website dibawah ini:
- Github
- Google Sites
- YourJavaScript

Baca Juga :

Cara Upload Java Script JS, JQuery dan CSS ke Google Site

7. Buka Menu Tema/Template - Kemudian Edit HTML.
8. Temukan [CTRL + F] kode berikut ini :

var res = str.replace("https://maycyber-download-safelink.blogspot.com?url=", "");

SILAKAN ANDA GANTI ALAMAT URL SAYA DENGAN ALAMAT URL ANDA

9. Temukan [CTRL + F] lagi kode berikut :

output.value = "https://maycyber-download-safelink.blogspot.com/2017/12/"+xxx+"?

SILAKAN ANDA GANTI ALAMAT URL, TAHUN DAN BULAN POSTINGAN SAYA DENGAN ALAMAT URL, TAHUN DAN BULAN POSTINGAN ANDA.

10. Jika sudah? Temukan lagi [CTLR + F] kode berikut ini :

https://rawgit.com/hilmay619/upload-file/master/safelink-maycyber-download.js

KODE DIATAS INI LEBIH DARI SATU SILAKAN ANDA UBAH SEMUANYA DENGAN KODE DIBAWAH INI - SIMPAN FILE DENGAN FORMAT .js KEMUDIAN HOSTING JAVA SCRIPT

11. Copy kode berikut ini, lalu Paste letakan di Notepad - Kemudian Save File dengan Format .JS

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+ this._keyStr.charAt(enc1)+ this._keyStr.charAt(enc2)+ this._keyStr.charAt(enc3)+ this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var i=0;input=input.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(i<input.length){enc1=this._keyStr.indexOf(input.charAt(i++));enc2=this._keyStr.indexOf(input.charAt(i++));enc3=this._keyStr.indexOf(input.charAt(i++));enc4=this._keyStr.indexOf(input.charAt(i++));chr1=(enc1<<2)|(enc2>>4);chr2=((enc2&15)<<4)|(enc3>>2);chr3=((enc3&3)<<6)|enc4;output=output+ String.fromCharCode(chr1);if(enc3!=64){output=output+ String.fromCharCode(chr2);}
if(enc4!=64){output=output+ String.fromCharCode(chr3);}}
output=Base64._utf8_decode(output);return output;},_utf8_encode:function(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}
else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}
else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}
return utftext;},_utf8_decode:function(utftext){var string="";var i=0;var c=c1=c2=0;while(i<utftext.length){c=utftext.charCodeAt(i);if(c<128){string+=String.fromCharCode(c);i++;}
else if((c>191)&&(c<224)){c2=utftext.charCodeAt(i+ 1);string+=String.fromCharCode(((c&31)<<6)|(c2&63));i+=2;}
else{c2=utftext.charCodeAt(i+ 1);c3=utftext.charCodeAt(i+ 2);string+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));i+=3;}}
return string;}}
var encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";var protected_links="";var a_to_va=0;var a_to_vb=0;var a_to_vc="";function auto_safelink(){auto_safeconvert();}
function auto_safeconvert(){var a_to_vd=window.location.hostname;if(protected_links!=""&&!protected_links.match(a_to_vd)){protected_links+=", "+ a_to_vd;}else if(protected_links=="")
{protected_links=a_to_vd;}
var a_to_ve="";var a_to_vf=new Array();var a_to_vg=0;a_to_ve=document.getElementsByTagName("a");a_to_va=a_to_ve.length;a_to_vf=a_to_fa();a_to_vg=a_to_vf.length;var a_to_vh=false;var j=0;var a_to_vi="";for(var i=0;i<a_to_va;i++)
{a_to_vh=false;j=0;while(a_to_vh==false&&j<a_to_vg)
{a_to_vi=a_to_ve[i].href;if(a_to_vi.match(a_to_vf[j])||!a_to_vi||!a_to_vi.match("http"))
{a_to_vh=true;}
j++;}
if(a_to_vh==false)
{var encryptedUrl=Base64.encode(a_to_vi);
var x=Math.floor((Math.random()*5)+ 1);
var xxx=null;
if(x=="1"){xxx="lorem-ipsum-dolo.html"}
if(x=="2"){xxx="sed-sagittis-neque.html"}
if(x=="3"){xxx="blog-number-one.html"}
if(x=="4"){xxx="soccer-gamers.html"}
if(x=="5"){xxx="go-to-url.html"}a_to_ve[i].href="https://maycyber-download-safelink.blogspot.com/2017/12/"+xxx+"?url="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"\n";}}
var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");if(a_to_vj)
{a_to_vj.innerHTML+=a_to_vb;}
if(a_to_vk)
{a_to_vk.innerHTML+=a_to_va;}}
function a_to_fa()
{var a_to_vf=new Array();protected_links=protected_links.replace(" ","");a_to_vf=protected_links.split(",");return a_to_vf;}

if(x=="1"){xxx="lorem-ipsum-dolo.html"}
if(x=="2"){xxx="sed-sagittis-neque.html"}
if(x=="3"){xxx="blog-number-one.html"}
if(x=="4"){xxx="soccer-gamers.html"}
if(x=="5"){xxx="go-to-url.html"}
SILAKAN ANDA GANTI DENGAN URL POSTINGAN ANDA YANG SAYA SURUH BUAT 5 ARTIKEL TADI. DISINILAH ARTIKEL ITU DI ACAK SECARA RANDOM OLEH SAFELINK.

Contoh :

https://maycyber-download-safelink.blogspot.com/2017/12/lorem-ipsum-dolo.html
https://maycyber-download-safelink.blogspot.com/2017/12/sed-sagittis-neque.html
https://maycyber-download-safelink.blogspot.com/2017/12/blog-number-one.html
https://maycyber-download-safelink.blogspot.com/2017/12/soccer-gamers.html
https://maycyber-download-safelink.blogspot.com/2017/12/go-to-url.html

Anda hanya perlu mengambil akhiran kata pada URL postingan anda, contoh: go-to-url.html

12. Lakukan pada point 7. Yaitu silakan anda hosting java script ke - 2 ini disalah satu web diatas tepatnya pada point 7.
13. Jika sudah? silakan anda ganti https://rawgit.com/hilmay619/upload-file/master/safelink-maycyber-download.js menjadi script hosting Anda.
14. Selesai!
15. Tunggu update safelink conventer versi selanjutnya. . . . .

Cara Mengatasi Agar Safelink Converter Tidak 404 Not Found/Error

Jika ketika tombol Visit Link di tekan, kemudian terjadi kesalahan seperti diatas? Silakan anda buka postingan anda, temukan kode var res = str.replace("http .Silakan anda sesuaikan dengan link postingan yang anda posting,

Screenshoot :

Demikianlah Tutorial Blogger kali ini, bila ada kesalahan? Silakan jangan sungkan-sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda coba safelinknya bisa atau tidak. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Safelink Converter di Blogger Tanpa Domain TLD

Jasa Pembuatan Safelink Converter Hanya 10K Pulsa 100% No Tipu!

Buat anda yang gamau ribet, dan buat anda yang mempunyai situs website bertemakan/niche Download? Saya Menyediakan Jasa Pembuatan Safelink Converter Murah hanya 10K Pembayaran Via Pulsa, Jika anda berminat silakan anda hubungi di Form Contact Us.

- Contact Us

generasi baru

informasi terkini

ABOUT

Enter Slide 1 Title Here

Enter Slide 2 Title Here

Enter Slide 3 Title Here

Friday, March 9, 2018

Cara Membuat Top Featured Post di Blogger

Thursday, March 1, 2018

Cara Membuat dan Memasang Iklan In-Article di Tengah Postingan

Saturday, February 17, 2018

Cara Membuat Layanan Contact Us di Blogger

Saturday, February 10, 2018

Cara Membuat dan Memasang Iklan Adsense di Akhir Postingan

Wednesday, January 31, 2018

MEMBUAT WEBSITE JEJARING SOSIAL

Thursday, January 11, 2018

Cara Membuat Tombol Subscribe Responsive di Blogger

Wednesday, January 10, 2018

Cara Membuat Menu Header Plus Tombol Search Responsive

Friday, January 5, 2018

Cara Membuat Menu Navigasi Responsive di Atas Header

Wednesday, December 13, 2017

Cara Membuat Boxes Notification atau Kotak Catatan di Blogger

Saturday, December 9, 2017

Cara Membuat Safelink Converter di Blogger Tanpa Domain TLD

Search

mob

Main Menu Bar

Popular Posts

Follow us

Blogger templates

Categories

Report Abuse

Klik and share