Monday, August 14, 2017

Cara Memilih Platform Blog Yang Akan Digunakan





 

Blogging sekarang lagi sangat trends di kalangan para pencari pundi-pundi rupiah, Ada banyak platform blogging yang bisa kamu gunakan untuk membuat blog, akan tetapi bagaimana kamu mendapatkan yang cocok buat kamu? Jika kamu baru dalam dunia blogging dan tidak memiliki kemampuan coding atau jaringan, maka kamu bisa memilih Platform yang sudah d sediakan oleh banyak penyedia Platform Gratis
Banyak dari kalangan blogging yang memilih untuk menggunakan layanan Gratis seperti Wordpress atau Blogger. Opsi ini sangat baik bagi orang-orang yang tidak terlalu paham desain web, Jika kamu optimis blog kamu akan besar, maka kamu harus memilih blog yang fleksibel yang memiliki ruang untuk berkembang.
     

Friday, July 28, 2017

Tampil Cantik Dengan Kode Warna Ini




Selamat malam teman teman, gimana kabarnya?? Semoga selalu dalam keadaan yang baik ya. Oh iya teman sudah lama ini admin disibukan dengan pekerjaan offline sampai sampai admin lupa kalo admin punya blog.
Okey teman teman sambil menikmati malam dengan segelas kopi pengobat rasa kantuk admin mau menulis info tentang kode warna dalam pengeditan template blog. Mungkin dari teman teman sudah banyak yang tahu tapi banyak juga yang belum tahu. Kode warna ini nantinya bisa teman teman pakai untuk mendesain warna atau background template blog teman teman atau juga untuk desain warna huruf biar tulisan blog teman teman terlihat lebih cantik.

     

Tuesday, June 13, 2017

Cara Membuat Subscribe Box Large Banner

Subscribe Box

Tutorial kali ini adalah membuat subscribe box large banner seperti gambar diatas. Keren bukan? , terlihat tambah professional kalau blog  kalian pasang widget ini. Posisi widget ini biasanya di bawah menubar atau di atas wrapper.Untuk demo silahkan klik link ini
 Langsung saja kita praktik cara membuatnya.
  • Seperti biasa masuk ke Blogger kalian kemudian edit HTML dan tambahkan kode berikut di atas </b:skin>
.bloggersstand-subscribe-form{clear:both;display:block;overflow:hidden}
form.bloggersstand-subscribe-form{background-color: rgba(0, 0, 0, 0.20);clear:both;display:block;margin:0;width:auto;border-radius:5px;overflow:hidden}
.bloggersstand-subscribe-css-email-field{background:transparent;color:rgba(255,255,255,2);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;}
.bloggersstand-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgba(255,255,255,2);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s}
.bloggersstand-subscribe-css-email-button:hover{background:rgba(0,0,0,0.8);border:1px solid rgba(65, 84, 113, 0.3)}
.newsletter-box{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis7UvO-lRuHySV2C1ENV7yQJWmRjPta0Hs_4KGtV7_HfBV0NEvXeRoYDRy8ehyphenhyphen5ZjmtQ7A6xDZ6qCXXy7xkFj4AozyjN5nZBcUQlMpHebDEsfwlULR9ZBLye8LCvo9dQmisFyrRDINoo0/s1600/perampokgoogle-blogger-tutorial.jpg);background-size:cover;background-position:30% 10%;padding:100px;color:#fff;border-radius:5px;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem}.text-page{max-width:800px;padding-bottom:40px;font-size:18px}.text-page h1{margin-top:50px;margin-bottom:20px;text-align:center;font-size:30px;font-weight:bold}.text-page h2{font-size:24px;margin-top:30px}.text-page h3{font-size:22px}.text-page li{margin-bottom:10px}.text-page pre{padding:15px;background:#eee;border-radius:3px;font-size:16px;overflow:scroll}.text-page table{margin:20px 0 10px 0}.text-page th{text-align:left}.text-page td,.text-page th{padding-right:20px;padding-bottom:10px;vertical-align:top}.page-wrap{min-height:100%;margin-bottom:-255px}.page-wrap:after{content:"";display:block;height:255px}
  • Lalu letakan kode berikut ini di atas <div id='main-wrapper'> atau di bawah </nav>
<div class='newsletter-box'><div class='l-container-center'><h3 class='newsletter-box__title'><span style='background-color: rgba(0, 0, 0, 0.16)'>INSPIRING YOUR CREATIVITY !</span></h3> <p class='newsletter-box__subtitle'><span style='background-color: rgba(0, 0, 0, 0.16)'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</span></p><div class='bloggersstand-subscribe-form'><form action='URL FEED BURNER KALIAN' class='bloggersstand-subscribe-form' method='post' onsubmit='window.open (&#39;URL FEED BURNER KALIAN&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><input name='uri' type='hidden' value='zkrip'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='bloggersstand-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='bloggersstand-subscribe-css-email-button' title='SIGN UP' type='submit' value='SIGN UP!'/></form></div></div></div><br /></div></div></div><div class='clear'></div>



     

Cara Membuat Most Recent Post Simple Blogger

MOSt REcent Post
Kali ini zkrip akan memberika tutorial membuat most recent post yang simple dan ringan. Widget ini terinspirasi dari desain blog yang sudah terkenal dan sengaja tidak saya sebutkan namanya. Widget ini tidak membuat loading blog berat walaupun memakai javascript. Dengan tampilan yang elegan dan simple serta ringan cocok untuk template blog yang simple dan ringan pula. Langsung saja kita ke tutorialnya.

  • Pertama masuk ke blogger kalian,lalu edit HTML dan letakan kode berikut di atas </b:skin> atau </style>.
#sidebar3 .widget-content{padding:0;z-index:9999}#sidebar3 a:link,#sidebar3 a:visited{font-weight:normal}#sidebar3 ul{width:100%;padding:0 0 10px;margin:0}#sidebar3 ul li{background:#fff;margin:0!important;padding:8px 10px!important;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:#fd745c;font-size:14px}#sidebar3 ul li:nth-child(1){border-top-width:1px!important}#sidebar3 ul li a{font-weight:400!important;display:block;color:#555!important;text-decoration:none!important;line-height:1.4em!important;padding-right:8px!important}#sidebar3 ul li a:hover{color:#43a1a0!important;}#sidebar3 ul li:before,#sidebar3 ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none}#sidebar3{margin:0 auto}

  • Lalu masuk ke menu tata letak/layout pilih sidebar dan buat widget HTML baru dengan memasukan  kode di bawah ini.
<div class='sidebar3 section' id='sidebar3'><div class='widget HTML' data-version='1' id='HTML1'><h3 class='title'>Most Recent Post</h3><div class='widget-content'><ul id="recent-posts"></ul><script>//<![CDATA[var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){var homePage = "//www.zkrip.com/",numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);}//]]></script></div></div></div>