Trik Membuat Halaman Posting Seperti Tampilan Koran

<h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2014/11/trik-membuat-halaman-posting-seperti-tampilan-koran.html" rel="nofollow" target="_blank" title="Trik Membuat Halaman Posting Seperti Tampilan Koran">Trik Membuat Halaman Posting Seperti Tampilan Koran</a></span></h2><b><span style="color: #38761d;">Assalamualaikum warahmatullahi wabarakatuh.</span></b><br /><div style="text-align: justify;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU88vrUXWG0RmbXy9b3d8Gk7TTqElGr_g6ivipAQDmmS2CiZOeA9e_5vCFdxIgP9bPkI-a1hfijp4mfnRANRJPVXMXrR14AVbLwMlKlBEJOYYVuktexlUfqxdAENrAtBLl-QZhMvGivbFe/s1600/koran-karrysta.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Trik Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU88vrUXWG0RmbXy9b3d8Gk7TTqElGr_g6ivipAQDmmS2CiZOeA9e_5vCFdxIgP9bPkI-a1hfijp4mfnRANRJPVXMXrR14AVbLwMlKlBEJOYYVuktexlUfqxdAENrAtBLl-QZhMvGivbFe/s1600/koran-karrysta.jpg" title="Trik Membuat Halaman Posting Seperti Tampilan Koran" /></a></span><br /><span style="font-size: small;"><span class="awal">T</span>iadak kabar yang paling membahagiakan saya kecuali mendengar dan melihat semua Sahabat blogging saya baik baik selalu sehat dan dalam keada' an bahagia. Hatur saur nu kapihatur hatur carita mugia sing janten kabagja. Salam santun buat semua pun dulur semua yang sudah menyempatkan diri untuk bersilaturrahim ke blog saya ini. Setelah kemarin saya Mereview blog Sahabat setia Mas Yanto itu seperti yang saya tulis di post :  <b><a href="http://karristaent.blogspot.com/2014/11/review-sahabat-setia-blog-karrysta-portion-1.html" rel="nofollow" target="_blank" title="Review Sahabat Setia Blog Karrysta portion 1">Review Sahabat Setia Blog Karrysta portion 1</a></b>. Pada kesempatan yang baik ini ijinkan saya ingin berbagi trik sederhana cara membuat tampilan halaman posting di blog bak seperti pada lembaran koran. Biar kesanya gak ngebosenin hamparan post yang kita publish itu jika sobat blogging semua ada yang berminat silahkan simak lebih lanjut tulisan ini. Yah itung itung mengasah ketrampilan dan kreatif mendesain an memadu warna yang hendak anda sugguhkan pada semua pengunjung blog anda. Gimana sob..? Silahkan di coba dengan <b>SERSAN</b>  <b><i>(Serius tapi santai)</i></b>.  silahkan jika Sahabat nak cuba perkongsian nie dengan senang hati awak siap semua bantu apaupun cakap pertanya'an semua cakapan semua sobat blogging tercinta.</span></div><h4 style="text-align: left;"><span style="font-size: small;"><span style="font-size: large;">Baca juga artikel lainya :  <a href="http://karristaent.blogspot.com/search/label/Trik%20Blogger?max-results=6" rel="tag nofollow" target="_blank" title="Trik Blogger">Semua Tentang Trik Blogger</a></span></span></h4><h3><span style="font-size: small;">Tampilan artikel seperti Koran :</span></h3><div style="text-align: justify;"><span style="font-size: small;">Sebetulnya tanpa trik ini juga halaman posting di blog bisa di publikasikan seperti biasa. Tetapi jika ada sesuatu yang lain pada tampilan halaman posting anda tidak ada salahnya anda lihat post ini dan jika anda berminat untuk artikel anda tampil beda,.? selanjutnya bisa anda menggunakan tutorial ini. Namun jika anda tidak bersedia juga gak apa apa ini saya semata hanya berbagi dengan niat yang tulus dan Ikhlas. silahkan simak lebih lanjut tulisan nie dan cakapan saya nie.</span></div><h5><span style="font-size: small;"><span style="font-size: large;">Membuat posting dengan gaya Koran :</span></span></h5><div style="text-align: justify;"><span style="font-size: small;">Kenapa harus artikel pada blog harus ikit ikutan gaya yang di miliki pada tampilan koran.? Jawabanya simple hanya sebatas idea saja mungkin lengkapnya hanya mendesain halaman posting nyaris seperti hamparan tulisan bak seperti pada media koran. Malahan bisa seperti Harian Majalah lho sob trik ini.? Tinggal anda meramu dan meracik coding css dan html di post ini. Maksudnya jika tampilanya kurang sesuai dengan selera kita maka anda bisa mengeditnya kode dalam post nie, yang sesuai dengan selera hati dan menurut narasi keinginan sendiri.</span><br /><h6><span style="font-size: small;"><span style="font-size: large;">Cara penerapan post gaya Koran/Majalah :</span></span></h6><div style="text-align: justify;"><span style="font-size: small;">Baiklah sobat semua tidak panjang lebar saya uraikan cara membuat halaman posting seperti gaya koran atau majalah ini. silhkan anda simak cara pemasanganya di bawah ini. Dengan cara copy kode di bawah ini. Pada area new post atau buat artikel baru. Atau pada artikel lama juga pun  bisa. Setelah anda copy kodenya silahkan pastekan pada new post di area HTML jangan di area Compose yah?, silahkan copy kodenya berikut saya tuturkan di bawah paragraf ini :</span><br /><span style="font-size: small;"><br /></span> <span style="font-size: small;"><b>Pemberitahuan : </b></span><br /><span style="font-size: small;">Silahkan buka kode dibawah nie, dengan mengklik "</span><b>BUKA KODE</b><span style="font-size: small;">". Jangan takut kodenya banyak itu saya sertakan tulisan artikel dan gambar postingan juga tag tag tertentu pada bagian masing masing paragraf nya. Maksudnya supaya anda lebih memahami kode Mana tulisan artikelnya dan mana pula kode <span style="color: red;">HTML Dan CSS</span>. Pada kode dibawah ini. Silahkan copy kodenya dan pastekan pada area new post pada kolom <span style="color: red;">HTML</span> Seperti saya terangkan pada paragraf atas :</span><br /><br /><br /><div><div style="margin: 2px; text-align: center;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input class="BD_spoler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP KODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA KODE'; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 320px;" type="button" value="BUKA KODE" /></div><div class="alt2" style="background-color: #ebebeb; border: 1px inset; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 4px;"><div style="display: none;"><br /><span style="font-size: small;"><br /></span> <br /><blockquote><p><span style="font-size: small;"><span style="color: lime;"><!DOCTYPE html><html><head></span></span><br /><span style="font-size: small;"><span style="color: lime;"><meta content="onthisday" name="webmaker:tags"></span></span><br /><span style="font-size: small;"><span style="color: lime;"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100" rel="stylesheet" type="text/css"></span></span><br /><span style="font-size: small;"><span style="color: lime;"><!--</span></span><br /><span style="font-size: small;"><span style="color: lime;">Lessons to be covered:</span></span><br /><span style="font-size: small;"><span style="color: lime;">- Floats</span></span><br /><span style="font-size: small;"><span style="color: lime;">- Text-alignment</span></span><br /><span style="font-size: small;"><span style="color: lime;">- Changing content</span></span><br /><span style="font-size: small;"><span style="color: lime;">--></span></span><br /><span style="font-size: small;"><span style="color: lime;"><!--</span></span><br /><span style="font-size: small;"><span style="color: lime;">This day in history</span></span><br /><span style="font-size: small;"><span style="color: lime;">READ THROUGH THE COMMENTS. This is a comment. Everything inside of</span></span><br /><span style="font-size: small;"><span style="color: lime;">this tag for HTML or '/*' for CSS, is not processed as code, but</span></span><br /><span style="font-size: small;"><span style="color: lime;">instead is just text comments about the code. For this project, the</span></span><br /><span style="font-size: small;"><span style="color: lime;">comments will give you instructions, hints and guides to completing</span></span><br /><span style="font-size: small;"><span style="color: lime;">the project, so skim down through the comments to get an understanding</span></span><br /><span style="font-size: small;"><span style="color: lime;">of what you are being asked to do.</span></span><br /><span style="font-size: small;"><span style="color: lime;">GET ORIENTED IN THE CODE. HTML is made up of tags that look like</span></span><br /><span style="font-size: small;"><span style="color: lime;">this <p></span></span><br /><span style="font-size: small;"><span style="color: lime;"><br /></span> <span style="color: lime;"></p></span></span><br /><span style="font-size: small;"><span style="color: lime;">. The tags tell you something about the information</span></span><br /><span style="font-size: small;"><span style="color: lime;">contained between them. Click on the tags in the code on this side</span></span><br /><span style="font-size: small;"><span style="color: lime;">of the editor to get a description of what each tag is for.</span></span><br /><span style="font-size: small;"><span style="color: lime;">A good place to start is with the title. Personalize the title of your page by changing the text within the <title>Remix of Remix of Remix of Remix of </title></span></span><br /><span style="font-size: small;"><span style="color: lime;">tags. For example, 'Charlie Brown's first web page' might be one way to go. </span></span><br /><span style="font-size: small;"><span style="color: lime;">The title won't appear on the main web page within this editor but it will appear at the top of the browser once you publish and view your project and if you roll over it when it's a tab or a minimized window. Mighty helpful when you have a gazillion windows open at the same time. </span></span><br /><span style="font-size: small;"><span style="color: lime;">--></span></span><br /><span style="font-size: small;"><span style="color: lime;"><title>On This Day in History: A Starter Make</title></span></span><br /><span style="font-size: small;"><span style="color: lime;"><style></span></span><br /><span style="font-size: small;"><span style="color: lime;">/*</span></span><br /><span style="font-size: small;"><span style="color: lime;">LESSON -</span></span><br /><span style="font-size: small;"><span style="color: lime;">Don't like the layout of this page? Floating an object removes it from the flow of the page and align them to the left or right of the parent element, in this case .columns - try and changing the values for the column floats to either left or right. Notice what this does to the columns. You can order the columns in pretty much any order.</span></span><br /><span style="font-size: small;"><span style="color: lime;"><br /></span> <span style="color: lime;">As it stands the columns will read left to right in the order they appear in the HTML.</span></span><br /><span style="font-size: small;"><span style="color: lime;"><br /></span> <span style="color: lime;">The order of the columns in the HTML is important as if you are floating two columns in the same direction, the column that appears in the markup first will take precedent and appear to the left of the two columns.</span></span><br /><span style="font-size: small;"><span style="color: lime;"><br /></span> <span style="color: lime;">If all the columns are floated left the columns appear in order. If you want the first or middle columns to appear on the right try floating one of them right.</span></span><br /><span style="font-size: small;"><span style="color: orange;">*/</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-1 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">float:left;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-2 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">float:left;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-3 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">float:left;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">/*</span></span><br /><span style="font-size: small;"><span style="color: lime;">LESSON - A standard style for text alignment in newspapers is 'justify'. This effect fills each line with text before falling to the next line. Try changing the value to either left right or center and back again to justify to see the effect.</span></span><br /><span style="font-size: small;"><span style="color: orange;">*/</span></span><br /><span style="font-size: small;"><span style="color: orange;">body {</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:justify;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.hero-story h2,</span></span><br /><span style="font-size: small;"><span style="color: orange;">.hero-story h3 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:center;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.story h2 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:left;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">span.year,</span></span><br /><span style="font-size: small;"><span style="color: orange;">footer.date,</span></span><br /><span style="font-size: small;"><span style="color: orange;">span.date,</span></span><br /><span style="font-size: small;"><span style="color: orange;">div.price {</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:center;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">blockquote {text-align:right;}</span></span><br /><span style="font-size: small;"><span style="color: orange;"></style></span></span><br /><span style="font-size: small;"><span style="color: orange;"></head></span></span><br /><span style="font-size: small;"><span style="color: orange;"><body></span></span><br /><span style="font-size: small;"><span style="color: orange;"><div class="page"></span></span><br /><span style="font-size: small;"><span style="color: orange;"><div class="page-inner"></span></span><br /><span style="font-size: small;"><span style="color: orange;"><h1></span></span><br /><span style="font-size: small;">Blog Karrysta 2</span><br /><span style="font-size: small;"></h1></span><br /><span style="font-size: small;"><!--</span><br /><span style="font-size: small;"><span style="color: lime;">LESSON - Have ago at creating your own on this day page with different dates, events and images.</span></span><br /><span style="font-size: small;">--></span><br /><span style="font-size: small;"><span class="date"></span><br /><span style="font-size: small;"><span style="color: blue;"><a href="http://karristaent.blogspot.com">www.karristaent.blogspot.com</a></span> </span></span><br /><span style="font-size: small;"><span class="date"></span><br /><span style="font-size: small;">22/11/2014, Indonesia </span></span><br /><span style="font-size: small;"><div class="hero"></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><div class="columns"></span><br /><span style="font-size: small;"><div class="column-1"></span><br /><span style="font-size: small;"><div class="story"></span><br /><span style="font-size: small;"><span class="year">22-11-2014 </span></span><br /><span style="font-size: small;"><h2></span><br /><span style="font-size: small;">"Miss Karrysta,"</h2></span><br /><span style="font-size: small;"><img alt=" Blogger Tutorial" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8-CDDnL0eRD1CmaxTctTaFsLMiD4kO2PJw8jgwi-EsRQrwum8xfUKvNfbnMi3VtoybJR2wZUyb5Wiip-znv08L8L69pyiKvTuywwF10Yp96NDWheNul05UOCbtQIcNnWe-dUELtkhV4/s1600/No-inmissKarrysta.jpg</span>" title="Miss Karrysta"/></span><br /><span style="font-size: small;"><p></span><br /><span style="font-size: small;"><span style="color: purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ante in leo sollicitudin, at aliquet leo sollicitudin. Cras dictum sodales cursus. Cras non ligula quis justo cursus faucibus. Sed at ullamcorper nibh, ac aliquet neque. Mauris ultrices mauris vel consectetur consectetur. Vestibulum a velit eget erat iaculis mattis. Pellentesque sit amet facilisis felis. Maecenas fringilla pellentesque suscipit. Suspendisse ullamcorper ac erat in sagittis. Nunc vehicula, risus in commodo malesuada, arcu urna imperdiet magna, ac hendrerit ex risus non dolor</span>..</p></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><div class="story"></span><br /><span style="font-size: small;"><span class="year">Karrysta 2014</span></span><br /><span style="font-size: small;"><h2></span><br /><span style="font-size: small;">Karrysta</h2></span><br /><span style="font-size: small;"><img></span><br /><span style="font-size: small;"><p></span><br /><span style="font-size: small;"><span style="color: purple;">Morbi id vestibulum purus. Praesent vitae tempus metus, vitae luctus sapien. Duis blandit neque est, quis vulputate ipsum tempor sit amet. Donec metus purus, suscipit sit amet elit a, pretium varius nisl.</span></p></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><div class="column-2"></span><br /><span style="font-size: small;"><div class="hero-story"></span><br /><span style="font-size: small;"><hgroup></span><br /><span style="font-size: small;"><span class="year">2014</span></span><br /><span style="font-size: small;"><h2></span><br /><span style="font-size: small;">Halaman Posting Seperti Koran atau Majalah</h2></span><br /><span style="font-size: small;"><h3></span><br /><span style="font-size: small;">22 November</h3></span><br /><span style="font-size: small;"></hgroup></span><br /><span style="font-size: small;"><br /></span> <span style="font-size: small;"><span style="color: blue;"><p></span></span><br /><span style="font-size: small;"><span style="color: blue;"><b><a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a></b> </span><span style="color: purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh risus, condimentum blandit lacus ac, vulputate congue tellus. Sed malesuada felis dictum magna euismod faucibus. Pellentesque euismod odio aliquam ipsum dictum, eu condimentum felis hendrerit. Aenean vestibulum eleifend massa quis mollis. In congue nibh ut odio porttitor, sit amet suscipit mi dignissim. Donec ut velit interdum velit mattis iaculis. Lorem ipsum dolor sit amet</span>.</p></span><br /><span style="font-size: small;"><img alt=" Blogger Tutorial" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTjSJQ0-6jL6ARcrHDydT566K-fFdMhR_AsNcQulqnB6HfaejXKb24sxNT4_xVyZk5kepDMUnt3Ae1QjIeEWY1cWp55WXKKn1PkCgguFWogxp2fBUPQzeK1B5jqlCona2mXV48UQSp_w/s1600/@@1.jpg</span>" title="Miss Karrysta"/></span><br /><span style="font-size: small;"><p></span><br /><span style="font-size: small;"><b><a href="<span style="color: blue;">http://karristaent.blogspot.com/2014/11/rank-alexa-anjlok-terjun-bebas.html" title="Rank Alexa Anjlok Terjun Bebas ">Karrsta</a></b></span> <span style="color: purple;">Morbi iaculis, purus nec rutrum vehicula, justo ante egestas libero, quis vestibulum leo dolor vitae libero. In ultricies erat lacus, at bibendum ex euismod eu. Pellentesque ut varius tellus. Etiam dapibus, libero sit amet imperdiet vulputate, augue tortor dictum ante, quis eleifend nisi augue id ipsum. Duis dignissim nec lacus vel eleifend. Nulla aliquam leo at ligula porttitor facilisis. Aliquam aliquet est ut pharetra commodo. Praesent volutpat vestibulum tempus. Donec efficitur justo quis convallis commodo. Nam id enim sem. Praesent viverra sagittis ipsum id </span>pretium</p></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><br /></span> <span style="font-size: small;"><div class="column-3"></span><br /><span style="font-size: small;"><div class="story"></span><br /><span style="font-size: small;"><span class="year"></span></span><br /><span style="font-size: small;"><h2></span><br /><span style="font-size: small;">Neng Karrysta Tersayang</h2></span><br /><span style="font-size: small;"><img alt=" Blogger Tutorial" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLECkJu4YbUcO8_iV9bz8HhQwVn5OwqIimFUNAoCTdaHaj18ErR37ub6TKjWyJXPsG1bLinCTN3A_WA2QHBXupbxnO-dCGmk8c8ArjnAvt5PGMUQbKA0f75Mk1dpAvm2JK3C0MKANjuh8/s1600/karrysta-cyg.jpg</span>" title="Karrysta Tersayang"/></span><br /><span style="font-size: small;"><p></span><br /><span style="font-size: small;"><span style="color: purple;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper lorem aliquam lorem rhoncus aliquet. Nunc rhoncus purus risus, hendrerit hendrerit nibh tristique sit amet. Donec suscipit felis quis risus mollis, sed lacinia enim feugiat. Donec tincidunt massa eros, ut venenatis libero bibendum ut. Mauris fringilla lectus justo, eget cursus risus maximus </span>at.</p></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><div class="story"></span><br /><span style="font-size: small;"><span class="year">Saud S Karrysta 2014</span></span><br /><span style="font-size: small;"><h2></span><br /><span style="font-size: small;">Musisi Band/Dangdut Jawa Barat</h2></span><br /><span style="font-size: small;"><img alt=" Blogger Tutorial" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepcCTKJRVCtyTt-D5tYjfMnSA3gtFWllQsOOLT76-mVI8lD4zyIn4QYJj-JGYy6hZlg2SDBnIFFkIDVKZj4XSx7oDwH1fyMy6Cibm-BLkD0uvVqa1sx36ilwcJNbqQDReRjUXoA0Pf_Y/s1600/@.Karrysta1.jpg</span>" title="Administer : Saud Karrysta"/></span><br /><span style="font-size: small;"><p></span><br /><span style="font-size: small;"><span style="color: purple;">In venenatis, ex sed imperdiet dictum, quam nunc molestie libero, ut faucibus velit mauris vel metus. Donec dictum risus vel nulla rhoncus pretium. Nam a lacus euismod, egestas lorem </span>viverra.</p></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><footer class="date"></span><br /><span style="font-size: small;">Administer by: <span style="color: blue;"><a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a> | Support by : <a href="http://karristabloggerdemo.blogspot.com" title="Karrysta Demo2">Saud S Karrysta</a></span></span><br /><span style="font-size: small;"></footer></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"></div></span><br /><span style="font-size: small;"><style></span><br /><span style="font-size: small;">/* **</span><br /><span style="font-size: small;"><span style="color: lime;">Main style - BY ALL MEANS HAVE A PLAY WITH THESE STYLE DECLARATIONS BELOW! HOWEVER ANY CHANGES MAY BREAK THE LAYOUT </span></span><br /><span style="font-size: small;"><span style="color: orange;">*/</span></span><br /><span style="font-size: small;"><span style="color: orange;">body {</span></span><br /><span style="font-size: small;"><span style="color: orange;">background:#5f5f5f;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-family: 'Roboto Slab', serif;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:300;</span></span><br /><span style="font-size: small;"><span style="color: orange;">-webkit-backface-visibility: hidden;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">h1, h2, h3, {</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin:0px 0px 12px 0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">a {color:#444;}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.page {</span></span><br /><span style="font-size: small;"><span style="color: orange;">position:relative;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding:30px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-left:10px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:500px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin:80px auto 200px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">background:#FFF;</span></span><br /><span style="font-size: small;"><span style="color: orange;">-webkit-border-bottom-left-radius: 100px 20px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">-webkit-border-top-left-radius: 100px 20px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-top-left-radius: 100px 20px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-bottom-left-radius: 100px 20px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">box-shadow :20px 20px 20px rgba(0,0,0,0.3);</span></span><br /><span style="font-size: small;"><span style="color: orange;">height:100%;</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #F9f9f9 -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(220,220,220,0) 30%);</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* FF3.6+ */</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #FFF -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(240,240,240,0)));</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* Chrome,Safari4+ */</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #FFF -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(240,240,240,0) 30%);</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* Chrome10+,Safari5.1+ */</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #FFF -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* Opera 11.10+ */</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #FFF -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* IE10+ */</span></span><br /><span style="font-size: small;"><span style="color: orange;">background: #FFF linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%%);</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* W3C */</span></span><br /><span style="font-size: small;"><span style="color: orange;">filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dededed', endColorstr='#00ffffff',GradientType=1 );</span></span><br /><span style="font-size: small;"><span style="color: orange;">/* IE6-8 */</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">/* Safari and Chrome */</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><br /></span> <span style="font-size: small;"><span style="color: orange;">.page:after {</span></span><br /><span style="font-size: small;"><span style="color: orange;">bottom: 100%;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border: solid transparent;</span></span><br /><span style="font-size: small;"><span style="color: orange;">content: " ";</span></span><br /><span style="font-size: small;"><span style="color: orange;">height: 0;</span></span><br /><span style="font-size: small;"><span style="color: orange;">width: 0;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position: absolute;</span></span><br /><span style="font-size: small;"><span style="color: orange;">pointer-events: none;</span></span><br /><span style="font-size: small;"><span style="color: orange;">outline: 1px solid transparent;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.page:after {</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-color: rgba(255, 255, 255, 0);</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-bottom-color: #F7F7F7;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-width: 100px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-left: -70px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">-webkit-transform: rotate(42deg);</span></span><br /><span style="font-size: small;"><span style="color: orange;">transform: rotate(42deg);</span></span><br /><span style="font-size: small;"><span style="color: orange;">right: -89px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">top: -107px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">z-index: -4;</span></span><br /><span style="font-size: small;"><span style="color: orange;">outline: 1px solid transparent;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.page-inner {</span></span><br /><span style="font-size: small;"><span style="color: orange;">overflow:hidden;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position:relative;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.page h1 { </span></span><br /><span style="font-size: small;"><span style="color: orange;">font-family: 'Roboto Slab', serif;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:100;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position: relative;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding: 0 75px 0 50px; </span></span><br /><span style="font-size: small;"><span style="color: orange;">margin:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position:relative;</span></span><br /><span style="font-size: small;"><span style="color: orange;">line-height:1;</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">letter-spacing:-1px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:42px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:normal;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-transform:uppercase;</span></span><br /><span style="font-size: small;"><span style="color: orange;">line-height:100px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:center;</span></span><br /><span style="font-size: small;"><span style="color: orange;">color:#FE880F;</span></span><br /><span style="font-size: small;"><span style="color: orange;">opacity:1;</span></span><br /><span style="font-size: small;"><span style="color: orange;">z-index:1;</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">footer.date,</span></span><br /><span style="font-size: small;"><span style="color: orange;">span.date {</span></span><br /><span style="font-size: small;"><span style="color: orange;">display:block;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-top:solid 1px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-bottom:double 3px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-bottom:20px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding:6px 0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">div.price {</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding:10px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border:double 3px #BBB;</span></span><br /><span style="font-size: small;"><span style="color: orange;">display:inline-block;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position:absolute;</span></span><br /><span style="font-size: small;"><span style="color: orange;">left:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">top:30px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">div.edition {</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding:6px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border:double 3px #BBB; </span></span><br /><span style="font-size: small;"><span style="color: orange;">display:inline-block;</span></span><br /><span style="font-size: small;"><span style="color: orange;">position:absolute;</span></span><br /><span style="font-size: small;"><span style="color: orange;">right:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">top:24px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:14px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-transform:uppercase;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-align:center;</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">span.year {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:bold;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:11px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-bottom:10px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">display:block;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-family:sans-serif;</span></span><br /><span style="font-size: small;"><span style="color: orange;">letter-spacing:1px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.hero-story h2 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:normal;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-transform:uppercase;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:40px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin:0px 0px 4px 0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">line-height:0.9em;</span></span><br /><span style="font-size: small;"><span style="color: orange;">letter-spacing:-1px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.hero-story h3 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-weight:normal;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-style:italic;</span></span><br /><span style="font-size: small;"><span style="color: orange;">text-transform:uppercase;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:18px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin:0px 0px 16px 0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">} </span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">p {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:13px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">line-height:18px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;"><br /></span> <span style="color: orange;">blockquote cite {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-style:normal;</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:13px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.columns {</span></span><br /><span style="font-size: small;"><span style="color: orange;">overflow:hidden;</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:613px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-left:-12px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns img {</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:100%;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-1,</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-2,</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-3 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">min-height:1200px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding:0px 12px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.columns .column-1 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:115px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-right:solid 1px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-2 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:215px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-right:solid 1px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.columns .column-3 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">width:115px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-right:solid 1px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"><br /></span> <span style="color: orange;">.story {</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-top:24px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding-top:24px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-top:solid 1px #CCC;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.story:first-child {</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-top:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">padding-top:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">border-top:0px none;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;">.story h2 {</span></span><br /><span style="font-size: small;"><span style="color: orange;">font-size:15px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">margin-top:0px;</span></span><br /><span style="font-size: small;"><span style="color: orange;">}</span></span><br /><span style="font-size: small;"><span style="color: orange;"></style></span></span><br /><span style="font-size: small;"><span style="color: orange;"></body></html></span></span></p></blockquote><br /><span style="font-size: small;"><br /></span><br /><br /></div></div></div></div><br /><br /><br /><span style="font-size: small;"><b>Keterangan Kode diatas :</b></span><br /><div style="text-align: justify;"><span style="font-size: small;">Yang berwarna  <span style="color: purple;"><b>PURPLE</b></span>  Itu contoh tulisan artikel, silahkan anda ganti dengan tulisan artikel anda.</span><br /><span style="font-size: small;">Yang berwarna  <span style="color: red;"><b>MERAH</b></span>  Itu contoh link gambar postingan silahkan ganti dengan link gambar anda.</span><br /><span style="font-size: small;">Yang berwarna  <span style="color: blue;"><b>BIRU</b></span>  itu link url blog silahkan ganti dengan link dengan arahan link url blog anda. </span><br /><span style="font-size: small;">Yang berwarna <span style="color: lime;"><b> LIME</b></span>  itu kode HTML Jadi jangan anda hapus itu pelengkap pada metode ini. </span><br /><span style="font-size: small;"><br /></span> <span style="font-size: small;">Dan pada kode yang berwarna  <span style="color: orange;"><b>ORANGE</b></span>  itu kode CCS Silahkan sesuaikan lebar dan tingginya dengan merubah width atau height pada kode CSS dan HTML Diatas dan ganti juga tanggal dan sub judul artikel pada masing masing tag judul pada contoh kode diatas itu. Silahkan anda berkreasi sendiri untuk mendesain halaman postingan blog anda. Tetapi harus sesuai dengan tampilan pada masing masing template blog nya.</span><br /><style type="text/css">.koran{ -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -moz-column-rule-style:outset; /* Firefox */ -webkit-column-rule-style:outset; /* Safari and Chrome */ column-rule-style:outset; -moz-column-rule-color:#ff0000; /* Firefox */ -webkit-column-rule-color:#ff0000; /* Safari and Chrome */ column-rule-color:#ff0000;} </style><span style="font-size: small;"><br /></span> <br /><div class="koran"><div style="text-align: justify;"><span style="font-size: small;"><span class="awal">U</span>ntuk melihat tampilan kode diatas silahkan anda buka halaman </span><b>"DEMO"</b><span style="font-size: small;"> nya berikut dibawah ini : Silahkan anda klik tampilan page post tampilan koran/majalah :    <b><span style="font-size: x-large;"><a href="http://karristabloggerdemo.blogspot.com/2014/11/halaman-posting-seperti-koran-atau-majalah.html" rel="nofollow" target="_blank" title="Trik Membuat Halaman Posting Seperti Tampilan Koran">DEMO</a></span></b></span><br /><span style="font-size: small;"><br /></span> <br /><div style="text-align: justify;"><span style="font-size: small;"><span class="awal">D</span>emikianlah artikel yang bisa saya hadirkan pada kesempatan ini. Semoga bisa bermanfaat buat sobat yang membutuhkanya. Mohon maaf jika seluruh artikel ini ada kesalahan atupun kekeliruan. Jika ada kesulitan silahkan diskusikan lewat kolom komentar. Semoga anda lebih memahami artian dari post yang saya publikasikan ini. Tidak ada kata yang lebih indah kecuali hanya rasa dan ucapan terima kasih yang tak terhingga atas kedatangan dan kunjungan anda yang berharga ini. salam santun dan ceria selalu buat seluruh sohib rekan dan Sahabat blogging ku semua. Tetap semangat dan berexpresi *salam hangat selalu buat seluruh sahabat blogging dan,, Happy Blogging....</span></div></div></div></div></div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-i9ydqG783vA%2FVHCr-raj8jI%2FAAAAAAAAFTQ%2F8luqdIqXD_Y%2Fs1600%2Fkoran-karrysta.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU88vrUXWG0RmbXy9b3d8Gk7TTqElGr_g6ivipAQDmmS2CiZOeA9e_5vCFdxIgP9bPkI-a1hfijp4mfnRANRJPVXMXrR14AVbLwMlKlBEJOYYVuktexlUfqxdAENrAtBLl-QZhMvGivbFe/s1600/koran-karrysta.jpg" -->

Trik Membuat Halaman Posting Seperti Tampilan Koran Assalamualaikum warahmatullahi wabarakatuh. T iadak kabar yang paling membahagiakan saya...

Read More

Rank Alexa Anjlok Terjun Bebas

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/11/rank-alexa-anjlok-terjun-bebas.html" rel="nofollow" target="_blank" title="Rank Alexa Anjlok Terjun Bebas">Rank Alexa Anjlok Terjun Bebas</a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><br /><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-FCXX4HB9gks2Md-GPDpLpSOt7sWWc1ujM3Qza_cQzrvl9jdX2tk4dpjQTDrCsAkjoZGyXf87l2vJV2eehfC5zmJoeXDhujC1C83lQnVhvyLpZEP0tUhBSwio8nubnQbdBCCdNapwnax/s1600/Alexaid.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Tips Trik SEO" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-FCXX4HB9gks2Md-GPDpLpSOt7sWWc1ujM3Qza_cQzrvl9jdX2tk4dpjQTDrCsAkjoZGyXf87l2vJV2eehfC5zmJoeXDhujC1C83lQnVhvyLpZEP0tUhBSwio8nubnQbdBCCdNapwnax/s1600/Alexaid.jpg" title="Rank Alexa Anjlok Terjun Bebas" /></a><span class="awal">B</span>ingung dan gak habis mengerti pada minggi ini rank <b>Alexa</b> saya benar benar anjlok terjun bebas membengkak. <u>Global rank Alexa</u> pada blog saya masih sedikit sedikit mengecil namun rank ID Alexa saya yang drastis terus membengkak. Apakah rank id  <b><a href="http://www.alexa.com/" rel="nofollow" target="_blank" title="Alexa">Alexa</a></b>. anda juga sama seperti yang saya alami Sobatku semua?. Saya sudah kehabisana akal dan cara bagaiman agar  <i>rank alexa id</i>   saya bisa lebih ramping 3 hari yang lalu <b>rank id Alexa</b> saya sudah mengecil <span style="color: red;"><b>1.247</b></span> dalam upaya kurang lebih satu bulan, sejak saya online buat postingan setelah alam tak buat entri baru. Tetapi pas anjloknya rank id alexa saya hanya hitungan 3 hari saja sekarang sampai membengkak <span style="color: red;">1.747</span> jadi yang saya rasakan tidak seimbang manakala saat saya berusaha dalam upaya pengecilan rank alexa itu. Saya tidak mengerti cara alexa menghitung rank id pada blog saya. Pada visitor perharinya tidak kurang dari <b><span style="color: #e69138;">1500</span></b> page view tetapi visitor id dengan jumblah segitu tidak membuat <u>rank alexa</u> id saya jadi turun malah kebalikanya menjadi tumbuh besar dan terus membengkak.<br /><br /><h4><span style="font-size: large;">Baca juga Artikel Lainya :   <a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO?max-results=6" rel="nofollow" target="_blank" title="Tips Trik SEO">Semua Tentang Tips Trik SEO</a></span></h4><h3>Tentang rank Alexa ID : </h3><div style="text-align: justify;">Pada minggu ini rank alexa id di blog Karrysta ini agak tidak menentu. Apa ada dampak dari naiknya BBM di Indonesia ini sehingga rank alexa id saya juga naik dan membuncit. Akh mungkin saya hanya berandai andai saja mungkin perhitungan rank dari pihak alexa tidak ada yang tau kecuali pihak alexanya sendiri.</div><h5><span style="font-size: large;">Artikel tentang Alexa :</span></h5><div style="text-align: justify;">Pada blog Karrysta ini banyak sekali artikel yang membahas seputar alexa. Maksud dan tujuanya tidak lain dan tak bukan. semata hanya berbagi untuk lebih mengetahui dan lebih memahami penting dan kegunaan rank alexa pada sebuah web situs atau Blog. Pengguna rank alexa sekarang ini sangat di tuntut berbayar mungkin itu sementara jawaban atas terus membengkaknya rank pada blog saya ini. Adapun penyebab lainya yang bisa menyebabkan rank alexa membengkak itu. Coba anda kunjungi halaman yang membahas tentang alexa munkin di halaman itu bisa mendapat solusi untuk mengatasi membengkaknya rank Alexa silahkan anda buka halaman : <b> <a href="http://karristaent.blogspot.com/2014/04/memverifikasi-tampilan-baru-site-alexa.html" rel="nofollow" target="_blank" title="Memverifikasi tampilan baru site Alexa">Memverifikasi tampilan baru site Alexa</a></b></div><h6><span style="font-size: large;">Alexa oh alexa :</span></h6>Dari beberapa post dan label yang saya buat dan di publikasikan pada artikel blog saya ini. Awalnya setiap saya memposting artikel yang membahas tentang alexa langsung saja pada hari berikutnya rakn alexa langsung saja akan berangsur mengecil. Namun anehnya sekarang seperti tidak ada pengaruhnya. Itu pada blog saya tapi belum tentu pada blog saya tetapi pada minggu kemarin saya memposting tentang alexa masih terasa perubahan turunya rank alexa itu. Seperti artikel yang pernah saya publish pada artikel : <b><a href="http://karristaent.blogspot.com/2014/09/trik-diet-alexa-oh-rank-alexa.html" rel="nofollow" target="_blank" title="Trik diet Alexa oh rank Alexa">Trik diet Alexa oh rank Alexa</a></b><br /><h4><span style="font-size: large;">Baca juga seputar tentang Alexa :  <a href="http://karristaent.blogspot.com/search/label/Alexa?max-results=7" rel="tag nofollow" target="_blank" title="Alexa">Tentang Alexa</a></span></h4><div style="text-align: justify;">Mungkin itu saja info yang saya alami mengenai rank alexa id saya. Tapi sebagai pemblogging yang sejati tetaplah offyimis yah sob. Apa dan bagaimana pun yang terjadi kita atasi dengan baik dan positif saja. Mungkin memang blog saya belum bisa baik rank alexanya. Tapi semoga saja kedepanya bisa lebih ramping lagi. Agar saat anda berkunjung saya bisa lebih menyamankan dan bisa lebih memanjakan setiap sahabat yang datang. Tetap semangat dalam semua aktivitas.. semoga hari anda eria selalu.. Happy Blogging...</div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-j_nA7uTlq7Y%2FVGyxKkDOkYI%2FAAAAAAAAFSs%2FgwHE1I75IRE%2Fs1600%2FAlexaid.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-FCXX4HB9gks2Md-GPDpLpSOt7sWWc1ujM3Qza_cQzrvl9jdX2tk4dpjQTDrCsAkjoZGyXf87l2vJV2eehfC5zmJoeXDhujC1C83lQnVhvyLpZEP0tUhBSwio8nubnQbdBCCdNapwnax/s1600/Alexaid.jpg" -->

Rank Alexa Anjlok Terjun Bebas Assalamualaikum warahmatullahi wabarakatuh. B ingung dan gak habis mengerti pada minggi ini rank Alexa saya ...

Read More

Belajar Memasang Icon Font Awesome Versi Terbaru

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/11/belajar-memasang-icon-font-awesome-versi-terbaru.html" rel="nofollow" target="_blank" title="Belajar Memasang Icon Font Awesome Versi Terbaru">Belajar Memasang Icon Font Awesome Versi Terbaru</a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><br /><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIqFddPsWQ6uKcLSH_9bs-7Zm2tjiDgKZsD2e5g05NE7dUAPvac5yuhHMM6kZMEtfBlx9OcX2X7U9G040baSIbcfk0qfV3WvkNYWMyyQkx7SHAEx4IMaZyU_C4rwnF9HloZxwmsYL7FD5/s1600/fontawesome.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Trik Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIqFddPsWQ6uKcLSH_9bs-7Zm2tjiDgKZsD2e5g05NE7dUAPvac5yuhHMM6kZMEtfBlx9OcX2X7U9G040baSIbcfk0qfV3WvkNYWMyyQkx7SHAEx4IMaZyU_C4rwnF9HloZxwmsYL7FD5/s1600/fontawesome.jpg" title="Belajar Memasang Icon Font Awesome Versi Terbaru" /></a><span class="awal">T</span>etap berusaha tersenyum walau suasan agak sedikit prihatin dengan keputusan pemerintah mengenai berita kenaikan BBM yang sudah resmi di putuskan oleh orang nomer satu di Indonesia ini. Jika anda merasa galau bisa anda kunjungi artikel saya peredara rasa galau silahkan masuk halaman : <b><a href="http://karristaent.blogspot.com/2011/04/devy-citasari-ngebor-lagi-ikutan-yoo.html" rel="nofollow" target="_blank" title="Video Youtube Goyang Rock Dangdut">Video Youtube Goyang Rock Dangdut</a></b>. Naaah pada kesempatan ini saya akan berbagi sesuai title/judul diatas. Dalam artian "Belajar Memasang Icon Font Awesome Versi Terbaru" ini aslinya memang saya yang lagi belajar dalam tahapan tersebut. Karena saya juga terinfirasi dengan postingan  <span style="color: blue;">Kang Adhy Suryadi</span> (<span style="color: red;">www.kompiajaib.com</span>). sebetulnya sudah lama juga sih saya belajar mengenal tentang font awesome itu. Pertama dari <span style="color: blue;">Kang Ismet</span> juga dari <span style="color: blue;">Mas Andes</span>. Tadinya sih saya tidak ingin cepat cepat posting pengetahuan tentang font awesome ini. Namun sudah dua kali Sahabat saya yang Bernama <span style="color: blue;">Mas Em Albar</span> Admin dari blog (<span style="color: red;">www.albarnation.com</span>). Yang mereques agar saya memposting tutorial tentang font awesome ini. Maka pada kesempatan ini semampu saya akan coba saya penuhi. Tapi versi artikelnya saya berusaha dengan tulisan khas tulisan saya. Sebelumnya semoga artikel ini bisa di pahami oleh <span style="color: blue;">Mas Em Albar</span> dan semua Sahabat blogging saya yang Ganteng dan Cantik. </div><h4 style="text-align: left;"><span style="font-size: large;">Baca Juga Artikel lainya :   <a href="http://karristaent.blogspot.com/search/label/Trik%20Blogger?max-results=6" rel="tag nofollow" target="_blank" title="Trik Blogger">Semua Tentang Trik Blogger</a></span></h4><h3 style="text-align: left;">Tentang Font Awesome :</h3><div style="text-align: justify;">Font awesome saya ketahui dari beberapa sumber terpercaya adalah sekelompok kumpulan icon yang basicnya berupa font akan tetapi bisa menampikan gambar tanpa anda harus menambahkan format gambar seperti, jpg, png, gif, bmp, dan format gambar lainya. Biasanya font awesome digunakan pada web situs atau blog yang menggunakan icon pada menu, title, header atau pada bagian lainya di situs atau blog. Sebetulnya tanpa menggunakan font awesome pun untuk menampilkan gambar pada area yang menggunakan icon bisa juga di pasang icon dengan menggunakan gambar dengan penerapan secara style pada area Html template blog. Namun yang saya ketahui tidak semua pemblogging bisa melakukan pekerjaan tersebut. Dengan cara mengoprak aprek seisi kode template dengan memsanag icon menggunakan gambar pada html. Karena pekerjaan tersebut butuh keashlian khusus untuk penerapanya.</div><h5 style="text-align: left;"><span style="font-size: large;">Icon Awesome versi terbaru 4.2.0 :</span></h5><div style="text-align: left;"><div style="text-align: justify;">Nah dengan adanya icon Font awesome ini. akan menjawab pertanyaan atau akan memudahkan anda dalam menampilkan beberapa icon yang ingin anda tampilkan pada bagian tertentu pada blog anda. Contoh <b>DEMO</b> Tampilan <b>Font Awesome</b> seperti yang terlihat pada bagian header/Menu di blog saya ini. Jika anda ingin menmpilkan desaian blog anda dengan di hiasi icon awesome ini silahkan anda simak lebih rinci tulisan ini. Namun jika anda tidak suka dengan pemakaian font awesome tidak apa apa keputusan tetap ada di tangan anda. Yang penting sudah saya jamin tutorial ini sudah saya pastikan lolos dari  <span style="color: #38761d;"><b>Validasi HTML 5 dan CSS3.</b></span> Seblumnya saya gunakan font awesome <b><span style="color: red;">versi 4.0.3</span></b>. Nah sekarang yang saya bagikan ini versi yang terbarunya <span style="color: red;"><b>Font Awesome Versi 4.2.0</b></span> yang pasti lebih komplit dan tampilan yang menarik unik elegance dan yang pasti lebih segalanya di banding versi sebelumnya. Tetapi untuk ukuran file tetap sama hanya 22 kb. Dan tidak akan menyita banyak load blog jadi bagi sobat yang takut akan load blog yang berat saya jamin tutorial font awesome ini tidak akan menguras habis kuota load blog anda.</div><h6><span style="font-size: large;">Situs Penyedia Font Awesome :</span></h6><div style="text-align: justify;">Jika anda berminat memasang font awesome silahkan anda bisa langsung mengunjungi situs resmi penyedia font awesome versi terbaru ini. di bawah ini anda akan melihat url penyedia font awesome itu:<br /><br />Kunjungi halaman font awesome :  <span style="color: red;">http://fortawesome.github.io/Font-Awesome</span><br /><br />Tetapi jika anda bingung dengan penjelasan pemasangan icon font awesom, melalui situs resminya? Silahkan bisa ikuti tutorial cara saya yang akan lebih memudahkan bagi anda dalam pemasangan Icon Font Awesome agar terpajang keren di bagian blog anda. Silahkan anda simak pemasanganya berikut dibawah ini : </div><br />Cara memasang Icon Font Awesome :<br />Pertama anda buka dashboard blog anda jangan lupa sign in dengan akun blog anda. Selanjutnya anda cari kode : </head> Gunakan Ctrl + F untuk memudahkan pencarian kodenya. Jikas sudah ketemu kode yang anda cari kemudian >> Selanjutnya copy kode script css icon font awesome di bawaha ini dan pastekan teapat diatas kode : </head> Di bawah ini kode yang harus anda copy nya :<br /><br /><blockquote class="tr_bq"><b><span style="color: #274e13;"><link href="</span><span style="color: red;">//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css</span><span style="color: #274e13;">" rel="stylesheet"/></span></b></blockquote><br /><b>Cara Penggunaan Font Awesome Terbaru Versi 4.2.0 :</b><br /><div style="text-align: justify;">Di bawah ini cara menggunakan font awesome secara dasarnya saja. Karena pada html bagian yang akan anda pasang mungkin berbeda juga Html nya namun untuk kode standarnya sama karena yang beda mungkin tampilan dari icon font awesome nya saja contoh pemasangan dasar seperti di bawah ini :</div><br /><blockquote class="tr_bq"><b><i class="fa fa-iconname"><span style="color: red;">DISINI KODE ICON FONT AWESOME</span></i></b></blockquote></div><br /><b>Contoh pemasangan font awesome :</b><br /><div style="text-align: justify;">Di bawah ini contoh pemasangan icon font awesome pada menu header, atau pada link page drof down yang akan di hiasi dengan icon font awesome di bawah ini lengkap penampakan pemasanganya :</div><br /><blockquote class="tr_bq"><a href='http://karristaent.blogspot.com/search/label/Berita' title='Berita'><i class="<span style="color: red;"><b>fa fa-bullhorn</b></span>" style='margin-right: 3px;'/>Berita</a></blockquote><br /><b>Keterangan :</b><br />Kode yang berwarna <span style="color: red;"><b>MERAH</b></span> itu adalah kode icon font awesome dan yang akan menampilkan icon gamabar seperti di bawah ini contoh sebagai screnshootnya saja : <br /><br /><div><a href="http://karristaent.blogspot.com/search/label/Berita" title="Berita"><i class="icon-bullhorn icon-3x" style="margin-right: 3px;">Berita</i></a><br /><br /></div><b>Atau contoh lengkap pemasangan lainya contoh pada menu home seperti di bawah ini :</b><br /><blockquote class="tr_bq"><a class="list-group-item" href="<span style="color: red;">URL ARTIKEL</span>"><i class="fa fa-home"></i>&nbsp; <span style="color: blue;"><b>Home</b></span></a></blockquote><br /><b>Cara mendapatkan Icon Font Awesome :</b><br /><div style="text-align: justify;">Bagaiman cara anda mendapat kumpulan kode icon font awesome itu? Baiklah karena saya sudah siapkan semua untuk mempasilitasi tutorial ini. Maka dengan ini saya akan bagikan juga url untuk anda dapatkan list icon font awesome ini. silahkan seleksi lalu copy url di bawah ini dan pastekan pada brouser internet anda</div><br />Kumpulan icon font awesome : <span style="color: red;">http://fortawesome.github.io/Font-Awesome/icons/#new</span><br /><br />Memodifikasi font awesome   : <span style="color: red;">http://fortawesome.github.io/Font-Awesome/examples/#bordered-pulled</span><br /><br /><div style="text-align: justify;">Demikianlah kiranya tutorial tentang "Belajar Memasang Icon Font Awesome Versi Terbaru" ini yang saya hadirkan untuk anda semua semoga bisa di mengerti dan dapat di pahami. Jika ada kesulitan silahkan diskusikan lewat form komentar di bawah ini. jika ada yang salah atau keliru pada semua artikel ini mohon maaf. Semoga harapan saya post tutorial tiasa bermanfaat untuk semua Sahabat blogging semua. Tetap semangat berkarya dan berbagi *salam ceria selalu ... Happy Blogging....</div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-5PLlYCfnFDU%2FVGpCiYTV-SI%2FAAAAAAAAFRs%2FKWZ8eKLfiCA%2Fs1600%2Ffontawesome.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIqFddPsWQ6uKcLSH_9bs-7Zm2tjiDgKZsD2e5g05NE7dUAPvac5yuhHMM6kZMEtfBlx9OcX2X7U9G040baSIbcfk0qfV3WvkNYWMyyQkx7SHAEx4IMaZyU_C4rwnF9HloZxwmsYL7FD5/s1600/fontawesome.jpg" -->

Belajar Memasang Icon Font Awesome Versi Terbaru Assalamualaikum warahmatullahi wabarakatuh. T etap berusaha tersenyum walau suasan agak sed...

Read More

Memasang Widget Alexa Cara Baru Dan Lama dengan mudah

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/11/memasang-widget-alexa-cara-baru-dan-lama-dengan-mudah.html" rel="nofollow" target="_blank" title="Memasang Widget Alexa Cara Baru Dan Lama dengan mudah"><span style="font-size: small;">Memasang Widget Alexa Cara Baru Dan Lama dengan mudah</span></a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-WGUeOE51u60UnJMYucdRk6LzDBMRuDJtC5Xec1YTMV2njfP6QJ9kbHxwXoIk1hQSqSW1Bt7SFMJKFbp45HDAlH-NjFW9Uhh4IZlI4E91ywt_QOYGgUEaPModtSX2JzurI-44GUShNed/s1600/alexa-karrysta.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Alexa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-WGUeOE51u60UnJMYucdRk6LzDBMRuDJtC5Xec1YTMV2njfP6QJ9kbHxwXoIk1hQSqSW1Bt7SFMJKFbp45HDAlH-NjFW9Uhh4IZlI4E91ywt_QOYGgUEaPModtSX2JzurI-44GUShNed/s1600/alexa-karrysta.jpg" title="Memasang Widget Alexa Cara Baru Dan Lama dengan mudah" /></a><br /><div style="text-align: justify;"><span class="awal">M</span>enjadi sesuatu yang biasa dan umum pada sebuah blog atau web situs yang sudah berumur agak lama pasti di dalamnya akan terpasang widget <u>Alexa</u>. Sebetulnya banyak sekali artikel yang membahas tentang widget  <b><a href="http://www.alexa.com/" rel="nofollow" target="_blank" title="Alexa">Alexa</a>.</b>  itu. Dari beberapa varian dan cara yang di suguhkan dalam post itu tentu anda yang bebas memilih. Dan pada postingan kali ini juga saya akan membahas seperti yang saya tulis pada title diatas. Nah dengan varian cara memasang widget alexa tentu saya akan membagikan caranya dengan cara saya sendiri. Dan yang pasti lebih memudahkan anda dalam pemasangan widget rank alexa dengan dua mitode   <b><a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO?max-results=6" rel="nofollow" target="_blank" title="Tips Trik SEO">Tips Trik</a>.</b>  <b>Cara baru</b> memasang widget rank alexa maksudnya. Mungkin berbeda dengan cara lama. Karena memakai cara baru sudah pastinya tutorial pemasangan dan tampilanya pasti berbeda dengan cara lama cara baru ini akan lebih menampilkan rank alexa yang lebih dynamis dengan desain widget rank alexa yang ramping dan elegance. <b>Cara Lama</b> memasang Widget rank Alexa, maksudnya pemesanganya umum seperti pada tampilan baru pada web situs alexanya. Namun pada artikel ini meskipun saya namakan pemasangan widget rank alexa lama. Tetapi saya akan suguhkan pemasanganya semudah mungkin. Agar semua pengunjung blog setia saya semakin mudah dalam menerapkanya pada blognya. Walaupun pemblogging newbie sekalipun (seperti saya). Apabila anda berkenan memasang widget rank <b>Alexa</b> pada blog utama anda atau blog baru anda. menggunakan trik ini silahkan pilih salah satu metodenya berikut saya uraikan dengan rinci di bawah ini silahkan lanjutkan membacanya ya Sob..?</div><h4 style="text-align: left;"><span style="font-size: large;">Baca yang lainya Tentang :  <a href="http://karristaent.blogspot.com/search/label/Alexa?max-results=6" rel="nofollow" target="_blank" title="Alexa">ALEXA</a></span></h4><h3 style="text-align: left;">Cara memasang Widget rank Alexa terbaru : </h3><div style="text-align: justify;">Mungkin di blog sobat semua yang sudah mengenal manfaat dan kegunaan Alexa itu. Pasti sudah terpasang Widget rank Alexa ya Sob..? Naaah pada pertemuan ini saya hanya berbagi bagi teman yang belum memasang widget rank Alexa, atau sobat yang sudah memasangnya untuk menggunakan trik ini. Maka dengan senang hati saya persilahkan di coba . Tutorial cara pemasanganya berikut di bawah ini ada dua cara yang saya suguhkan pada kesempatan ini silahkan anda pilih yang mana :</div><h5 style="text-align: left;"><span style="font-size: large;">01.Cara memasang widget rank Alexa standar :</span></h5><div style="text-align: justify;"></div><div style="text-align: justify;">Cara memasang widget rank alexa di paragaf sub title ini, saya namakan memasang widget rank alexa cara lama atau standar. Maksudnya lama bukan berarti kadaluarsa, Namun lama dalam artian umum yang sering di lakukan pemasangan widget rank alexa pada umumnya. Namun pada post ini saya kemas seringkas dan semudah mungkin. Baik untuk lebih singkatnya sebelum anda melanjutakan pemasangan widget alexanya pastikan anda sudah punya akun alexa dan sudah sign in/masuk pada akun profile Alexa anda :</div><b><br /></b> <b>Pemasangan widget rank Alexa :</b><br /><div style="text-align: justify;">Pertama anda masuk halaman :   <b><a href="http://support.alexa.com/hc/en-us/articles/201514680-Can-I-display-my-Alexa-rank-on-my-site-" rel="nofollow" target="_blank" title="Widget Alexa">Support Alexa</a></b></div><div style="text-align: justify;">Setelah anda masuk kehalaman support Alexa maka anda akan dibawa pada halaman untuk memilih ada bebrapa tampilan widget rank alexa silahkan anda pilih sesuai yang anda inginkan. Contoh salah satunya yang saya pakai pada blog Karrysta ini. Berikut contoh penampilan DEMO dan dan script yang akan anda ambil di gunakan pada blog anda, seperti dibawah ini lengkap tampilanya :<br /><br /></div><a href="http://www.alexa.com/siteinfo/karristaent.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=karristaent.blogspot.com" type="text/javascript"></script></a><br /><br /><b>Kode widget rank Alexa :</b><br /><br /><blockquote class="tr_bq"><a href="http://www.alexa.com/siteinfo/<span style="color: red;"><b>karristaent.blogspot.com</b></span>"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=<span style="color: red;"><b>karristaent.blogspot.com</b></span>"></script></a></blockquote><br /><b>Keterangan :</b><br /><div>Jika anda tidak mau repot untuk memasang widget rank alexa. Maka anda tinggal copy paste kode diatas dan pasang pada blog anda. selanjutnya anda tinggal ganti tulisan yang berwaran  <b><span style="color: red;">MERAH</span></b> dengan <span style="color: red;">URL</span> blog anda tanpa : <span style="color: red;">http://</span> dan tanpa <span style="color: red;">www.</span> bagaimana mudahkan Sob..?<br /><h4 style="text-align: left;"><span style="font-size: large;">Baca Artikel sebelumnya :  <a href="http://karristaent.blogspot.com/2014/11/selamat-hari-pahlawan-nasional-10-november.html" rel="nofollow" target="_blank" title="Selamat Hari Pahlawan Nasional 10 November">Selamat Hari Pahlawan Nasional 10 November</a></span></h4></div><h6 style="text-align: left;"><span style="font-size: large;">02. Cara memsang widget rank Alexa baru :</span></h6><div style="text-align: justify;">Pada cara pemasangan widget rank alexa terbaru ini pertama anda silahkan kunjungi halamanya berikut dibawah ini silahkan seleksi/drag semua, lalu copy <span style="color: red;">URL</span> dibawah  dan paste pada kolom kolom browser internet anda dan klik enter untuk search halamanya :</div><br /><span style="font-size: large;">Silahkan buka url ini :  <span style="color: red;">http://www.rankwidget.com</span></span><br /><br /><div style="text-align: justify;">Setelah anda masuk ke halaman rank widget alexa baru maka anda akan dibawa kehalaman seperti contoh gambar halamanya seperti di bawah ini silahkan pilih yang anda inginkan ada beberapa kode script yang di tawarkan pada situs tersebut diantanya : <b>01. Google pagerank, 02. widget Alexa Traffic Rank, 03. Technorati Blog Rank,  04.Yahoo! Search InLinks</b>. seperti Contoh gambar dibawah ini lengkap penampakanya :</div><div style="text-align: justify;"><br /></div><div><div class="separator" style="clear: both; text-align: center;"><img alt="Alexa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRScex0LErxk1ov7Ol5qnU0FpJvJCAFq6AGzZNEHM8eWx5Gk6kYMBlKpo6VhBJNnLhtDXgkCUQc9VRa9VUCcAZIUiB00ZUvPdHe-T-F7IUYdSqlOALSwQB-ZmnY1jfd1HHc421JLk98vX/s1600/Alexabaru.jpg" title="Memasang Widget Alexa Cara Baru Dan Lama dengan mudah" /></div><div><b><br /></b></div><b>Keterangan :</b><br /><div style="text-align: justify;">Jika anda akanmemilih widget rank alexa untuk anda pasang pada blog. Silahkan masukan <span style="color: red;">URL</span> blog anda dulu pada kolom bagian paling atas. Dan pilih tombol kecil nomor <b>02</b>. <b><span style="color: blue;">Alexa Traffic Rank</span></b>. Selanjutnya jika anda menginginkan Script widget rank Alexa yang terakhir anda klik <b><span style="color: red;">Get Rank!. </span></b>Selanjutnya sekumpulan desain widget rank alexa dengan berbeda tampilan lengkap dengan kode seript nya bisa anda pilih sesuai selera anda. Nahh pada point ini silahkan anda copy script rank alexa baru ini dan terapkan pada sidebar blog anda. Dan selesai anda berhasil menerapkan trik ini.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Demikianlah sajian yang bisa saya kemas pada kesempatan ini. Semuanya saya sajikan dengan apa adanya, Tujuanya agar kita bisa saling berbagi agar postingan ini bisa bermanfaat, bukan semata hanya posting untuk mengejar target dan tuntutan. semoga anda memahaminya. selamat mencoba. semoga berhasil salam sukses dan ceria ... Happy Blogging...</div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-49Vvuo5RrQA%2FVGDBJcLyUrI%2FAAAAAAAAFP4%2FWjsDcF_c0uE%2Fs1600%2Falexa-karrysta.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk-WGUeOE51u60UnJMYucdRk6LzDBMRuDJtC5Xec1YTMV2njfP6QJ9kbHxwXoIk1hQSqSW1Bt7SFMJKFbp45HDAlH-NjFW9Uhh4IZlI4E91ywt_QOYGgUEaPModtSX2JzurI-44GUShNed/s1600/alexa-karrysta.jpg" -->

Memasang Widget Alexa Cara Baru Dan Lama dengan mudah Assalamualaikum warahmatullahi wabarakatuh. M enjadi sesuatu yang biasa dan umum pada ...

Read More

Beginner Blogger

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/11/beginner-blogger.html" rel="nofollow" target="_blank" title="Beginner Blogger">Beginner Blogger</a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zZVyHN0pcu2C9drXmjsByntPfIvv0ggbWVQc6RqIyFS9V9vnRXg0jjtBEXxShXm74gaGDkIby01vMTMlvmQsm6j1fwz_7O1K45WOFP5M0KjY1eAvgq8x7QiGEppcGTvNwnLbZiLYQJFm/s1600/Beginner-Blogger-karrysta.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Google" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zZVyHN0pcu2C9drXmjsByntPfIvv0ggbWVQc6RqIyFS9V9vnRXg0jjtBEXxShXm74gaGDkIby01vMTMlvmQsm6j1fwz_7O1K45WOFP5M0KjY1eAvgq8x7QiGEppcGTvNwnLbZiLYQJFm/s1600/Beginner-Blogger-karrysta.jpg" title="Beginner Blogger" /></a></div><div style="text-align: justify;"><span class="awal">S</span>alam ceria selalu buat seluruh sahabat blogging semua, setelah 2 hari tidak aktif di blogging karena pekerjaan offline yang sangat padat akhirnya, untuk update artikel jadi kelewat dan aktivitas blogwalkingpun jadi terbengkalai, Dengan ini saya saya mohon maaf jika blog sobat belum saya kunjungi. Sebelumnya saya posting tentang :  <a href="http://karristaent.blogspot.com/2014/11/cara-membuat-gallery-foto-cantik-dengan-css.html" rel="nofollow" target="_blank" title="Cara Membuat Gallery Foto Cantik Dengan CSS"><b>Cara Membuat Gallery Foto Cantik Dengan CSS</b></a>.  dan untuk melanjutkan update post baru pada kesempatan ini saya hanya bisa menyuguhkan tulisan yang sederhana saja. Karena sebagus apapun konten postingan pada blog sia sia saja kalau isi postinganya tidak dapat dipahami oleh pengunjung blog kita. Karene niche blog saya sebgai blog gado gado maka sudah pasti pendapat pengunjungnya juga pasti berbeda beda juga. Seperti yang saya tulis pada artikel kali ini, mungkin itu tepat dengan sebutan pada blog Karrysta ini. Mengawali sesuatu yang baru untuk belajar berbagi dulu setelah nanti merasa bisa berbagi dengan baik. Maka tujuan kedepanya ingin belajar mendapat penghasilan di blog ini. Seperti teman blogging yang lain.<br /><h4 style="text-align: left;"><span style="font-size: large;">Baca juga yang lagi Ngetren Di :   <a href="http://karristaent.blogspot.com/search/label/Google?max-results=6" rel="nofollow" target="_blank" title="Google">Google</a></span></h4><h3 style="text-align: left;">Beginner Blogger Atau Newbie :</h3><div style="text-align: justify;">Mengenai Beginner Blogger dengan Newbie itu bunyinya sama. hanya beda penulisanya saja. Beginner Blogger Newbiae atau lebih mudahnya sebut saja Blogger Pemula. Yang pernah saya lihat tulisan kata Newbie pada salah satu lomentar teman blogging. yang saya lihat pada kata newbeberapa teman blogging yang berkomentar menulis kata newbie itu bukan seorang pemblogging biasa teatpi seorang pemblogging yang yang sudah sangat mengenal hal berbgai blogging dengantrik apapun juga. Saking menutupi jatidirinya sebagai orang yang sudah senior mungkin tulisan komentar newbie itu beliau katakan. Mungkin maksudnya biar tidak ada batas dan jarak antara pembloging yang sudah pandai dengan pembloggging yang masih Pemula (seperti saya). Kesan seperti itu akan menambah semangat buat seorang pemblloging baru.</div><h5 style="text-align: left;"><span style="font-size: large;">Seorang Pemblogging Newbi/Pemula :</span></h5><div style="text-align: justify;">Walaupun terbilang tidak wajib pada seorang blogging, Biasanya agar banyak teman dan banyak pengunjung pada blog yang di kelolanya maka blogging pemula seperti saya selalu memasang widget Follower (GFC). Masuk akal ya Sob,,? kalau blog baru gak mau follow blog temen lain yang sudah mapan, Mana mungkin teman memfollow blog kita..? Naaah alangkah baiknya jika ingin banyak teman berlanggan Follower (gfc) pasang saja widgetnya pada area blog yang kira kira mudah di lihat oleh pengunjung. Seperti pada blog saya walaupun terbilang blog baru dan jumlah followernya masih minim tetapi widget tersebut setia saya pajang pada area sidebar kanan seperti dibagian kanan. :</div><h6 style="text-align: left;"><span style="font-size: large;">Follower Google Plus :</span></h6><div style="text-align: justify;">Dibawah ini saya sertakan widget follower Google plus, karena alasan dan ceritaanya seperti yang saya jelaskan diatas maka untuk melengkapi agar blog banyak yang mengunjung dan banyak teman maka follower google plus saya pajang juga di blog saya plus dengan like G+, like facebook, juga follower twitter. Seperti dibawah ini penampakanya :</div><br /><div class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/101891879621819684479" data-source="blogger:blog:followers" data-theme="DARK" data-width="616"></div><br /><div style="text-align: justify;">Sebetulnya masih banyak yang harus di lalkukan untuk blog baru agar banyak teman dan banyak yang mengunjungi. Tetapi pada post ini hanya itu saja dulu mungkin pada next post ini akan saya lengkapi pembahasanya secara rinci. Mohon maaf jika ada kesalah pada semua isi artikel ini. tetap semangat berkarya.. salam ceria ... Happy Blogging ....</div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-sowEnSg25Fc%2FVFqlmfdY4KI%2FAAAAAAAAFOU%2FshMta9ZF7R0%2Fs1600%2FBeginner-Blogger-karrysta.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zZVyHN0pcu2C9drXmjsByntPfIvv0ggbWVQc6RqIyFS9V9vnRXg0jjtBEXxShXm74gaGDkIby01vMTMlvmQsm6j1fwz_7O1K45WOFP5M0KjY1eAvgq8x7QiGEppcGTvNwnLbZiLYQJFm/s1600/Beginner-Blogger-karrysta.jpg" -->

Beginner Blogger Assalamualaikum warahmatullahi wabarakatuh. S alam ceria selalu buat seluruh sahabat blogging semua, setelah 2 hari tidak a...

Read More

Cara Memodifikasi Pre Syntax Highlight Pada Blog

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/10/cara-memodifikasi-pre-syntax-highlight-pada-blog.html" rel="nofollow" target="_blank" title="Cara Memodifikasi Pre Syntax Highlight Pada Blog">Cara Memodifikasi Pre Syntax Highlight Pada Blog</a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><div><b><br /></b><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRNtnD13tA1UknsoI7XBMoZdKCyFtQ-AOzeTcZXmCcuUcOpMADiZD8ctITQFtdM2gzqKWUfn6tieJvfk00vNqucd7yZyP7-HbGUKq_pRFYbuqMfxJK4DWgXAyYKK_p3ZGN3LDEwbjqIGT/s1600/Pre+Syntax+Highlight.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Trik Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRNtnD13tA1UknsoI7XBMoZdKCyFtQ-AOzeTcZXmCcuUcOpMADiZD8ctITQFtdM2gzqKWUfn6tieJvfk00vNqucd7yZyP7-HbGUKq_pRFYbuqMfxJK4DWgXAyYKK_p3ZGN3LDEwbjqIGT/s1600/Pre+Syntax+Highlight.jpg" title="Cara Memodifikasi Pre Syntax Highlight Pada Blog" /></a><span class="awal">S</span>alam ceria selalu buat semua sobat blogging dimana saja berada. Semoga pada pertemuan kali ini anda dalam keadaan baik dan sehat selalu. Bicara soal blogging pasti tidak akan ada habisnya, Seperti yang kemarin saya posting tentang : <a href="http://karristaent.blogspot.com/2014/10/tujuh-bulan.html" rel="nofollow" target="_blank" title="Tujuh Bulan"><b>Tujuh Bulan</b></a>, Nah untuk pada kesempatan ini saya akan sedikit berbagi buat sobat blogging yang suka yang suka berbagi tutorial seperti pada kesempatan ini yang akan saya bagikan. Akan berbagi tutorial "<b>Cara Memodifikasi Pre Syntax Highlight Pada Blog</b>" Sebelum anda melanjutkan membaca atau mencoba post ini, sedikit saya menerangkan apa sih Pre Syntax Highlight itu,,.?. Baik sedikit akan saya terangkan  <b><i>Tag Pre Syntax Highlight</i></b>  itu biasanya untuk membungkus kode kode yang akan anda posting atau anda bagikan. Dimana bagian kode itu nantinya akan berwarna sendiri tanpa anda mewarani satu persatunya, itu penjelasan mudahnya namun untuk lebih rincinya sebenernya banyak. Dan tutorial Syntax juga sobat senior saya sudah banyak yang posting. Namun disini saya ingin berbagi dengan Anda barangkali diantara anda ada yang belum tau dan ingin memasang Scrip Pre Syntax Highlight, pada blog Anda. Sebetulnya ada dua jenis <u>Pre Syntax</u> ini. Namun saya akan berbagi hanya satu jenis dulu disini. Dan tentunya sedikit saya modifikasi agar tampilanya sedikit berbeda dengan yang lain. penasaran silahkan di coba.</div><h4 style="text-align: left;"><span style="font-size: large;">Baca Juga Tutorial lainya :    <a href="http://karristaent.blogspot.com/search/label/Trik%20Blogger?max-results=6" rel="nofollow" target="_blank" title="Trik Blogger">Semua Label Trik Blogger</a></span></h4><h2 style="text-align: left;">Tampilan Tag Pre Syntax Highlight Menarik :</h2><div style="text-align: justify;">Pada pemblogging yang sudah senior dan yang suka berbagi kode script pada postinganya. Pasti cara ini sudah lebih paham dan sangat mengenalnya , Namun bagi saya ini sebuah pengetahuan yang sangat menyemangatkan buat jiwa saya yang masih baru mengenal blogging. Saking keingin tau'anya saya pada <b>Tag Pre Syntax Highlight</b> ini, Maka saya mencari cari bagaimana cara nya dan seperti apa bentuk, dan yang pastinya bagaimana sih caranya menerapkan pada blog kita, agar nanti jika ingin berbagi kode script tag pre syntax ini bisa di gunakan sebagai penghias dan pembungkus kode script pada area postingan. Dengan berusaha dan upaya keras akhirnya saya menemukan beberapa sumber yang membahas tentang tag pre syntax ini. Akhirnya saya dapatkan juga dari beberapa sumber terpercaya yang membahas seputar tag pre synta yang saya cari. Dan dari hasil pengalaman itu saya sedikit demi sedikit script hasil dari sumber pembahasan syntax ini, sehingga sampai pada suatu hari saya memadukan dan menyelaraskan agar tampilan syntax ini, akan lebih cantik dan dinamis. Nah dengan sedikit penambahan script didalamnya sehingga saya padu berbagai script dan saya ramu dari sana sini, sehingga akhirnya bisa termodifikasi oleh saya, dengan sabar dan telaten. Mohon maaf jika salah satu source yang tidak bisa saya sebutkan disini, saking banyaknya sumber, saya bingung dari mana mana nya. Jadi kesimpulanya source ini berasal dari beberapa, Sahabat senior blogging saya termasuk anda yang berkunjung di blog saya.</div><h5 style="text-align: left;"><span style="font-size: large;">Tag Pre Syntax Highlight yang menawan :</span></h5><div style="text-align: justify;">Nah oleh sebab itu pada kesempatan baik ini saya. Dengan rendah hati rasa tersentuh untuk berbagi dengan anda, Sambil ngingetin sendiri kalau sewaktu waktu saya lupa pemasangan tag pre syntax ini untuk masa depanya. Maka dengan mudah tinggal baca lagi di postingan ini. Buat anda yang suka dengan desain yang unik cantik dan menarik maka tutorial <i>Syntax</i>  ini sengaja saya utak utik agar bisa memenuhi suatu tampilan yang simpel dan pastinya bisa membuat mata seger dan hati bisa bilang, Tampilanya menarik dan unyu unyu deh.. Agar tidak membuat anda penasaran, jika berminat silahkan anda coba tutorial ini. Bagi yang sudah memasang nya silahkan jika ingin menambahkan desain tampilan <b>Tag Pre Syntax Highlight</b> ini dengan yang sudah ada pada blog anda.</div><div style="text-align: justify;"><br /></div><span style="font-size: large;">Baca Juga Tutorial Blog Lainya :    <a href="http://karristaent.blogspot.com/search/label/Accessories%20Blogger?max-results=6" rel="nofollow" target="_blank" title="Accessories Blogger">Semua Accessories Blogger</a></span><br /><h6 style="text-align: left;"><span style="font-size: large;">Pemasangan Tag Pre Syntax Highlight :</span></h6><div style="text-align: justify;">Untuk <span style="color: red;">DEMO</span> dan cara pemasangan Tag <b><span style="color: #38761d;">Pre Syntax Highlight</span></b> ini, Maaf saya tidak sertakan pada post ini dengan satu alasan tertentu. <u>(terlalu panjang pembahasanya). </u>Tetapi tenang saja Mas dan Mbak Bro, Untuk tayangan <span style="color: red;">DEMO</span> juga cara pemesangan Tag <b><span style="color: #38761d;">Pre Syntax Highlight </span></b>pada blog anda. Sudah saya bahas dan kemas tutorialnya sekomplit mungkin. Maklum saja yah sob, karena tampilan <u>Tag Pre Syntax Highlight</u>, ini mungkin sedikit berbeda, Maka cara pemasanganya juga saya sajikan dengan cara saya yang agak berbeda pula, dengan yang sudah ada. Sedikit aneh dan unikan cara artikel ini,,?. Baiklah sekali lagi saya utarakan Bagi Semua sobat blogging yang hendak mau mencobanya silahkan kunjungi halaman yang sudah saya siapkan untuk Tampilan <span style="color: red;">DEMO</span>, juga cara menerapkan  <i>Tag Pre Syntax Highlight</i>,  ini pada halaman blog Anda :</div><br />Buka halaman berikut di bawah ini untuk melihat tampilan <b><span style="color: red;">DEMO</span></b> dan cara pemasangan tutorial ini.<div><h4 style="text-align: left;"><span style="font-size: large;">Silahkan Klik halaman :  <a href="http://karristabloggerdemo.blogspot.com/2014/02/membuat-pre-syntax-simple-keren.html" rel="nofollow" target="_blank" title="Membuat pre syntax simple keren">Tag Pre Syntax Highlight Pada Blog</a></span></h4><div style="text-align: justify;">Mungkin itu saja yang bisa saya ketengahkan untuk anda semua, harapan saya semoga tutorial ini bisa di gunakan sebijak mungkin. Mohon maaf jika ada yang kurang berkenan pada post yang saya publish ini. jika ada kesulitan atau pertanyaan seputar pemasangan <b>Tag Pre Syntax Highlight</b> ini, Silahkan diskusikan dengan cara, Taburkan komentar anda pada form komentar yang sudah tersedia dibawah ini. Selamat mencoba semoga berhasil.   <span style="color: red;">*</span><span style="color: #38761d; font-weight: bold;">Salam santun dan hormat buat anda semua.. Happy Blogging..</span></div></div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-m5H2KL3cQRA%2FVFO1RWaB9XI%2FAAAAAAAAFJ4%2F7X638q1jLcY%2Fs1600%2FPre%252BSyntax%252BHighlight.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRNtnD13tA1UknsoI7XBMoZdKCyFtQ-AOzeTcZXmCcuUcOpMADiZD8ctITQFtdM2gzqKWUfn6tieJvfk00vNqucd7yZyP7-HbGUKq_pRFYbuqMfxJK4DWgXAyYKK_p3ZGN3LDEwbjqIGT/s1600/Pre+Syntax+Highlight.jpg" -->

Cara Memodifikasi Pre Syntax Highlight Pada Blog Assalamualaikum warahmatullahi wabarakatuh. S alam ceria selalu buat semua sobat blogging d...

Read More

Modifikasi Fans Page Like Facebook Untuk Blog

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/10/modifikasi-fans-page-like-facebook-untuk-blog.html" rel="nofollow" target="_blank" title="Modifikasi Fans Page Like Facebook Untuk Blog">Modifikasi Fans Page Like Facebook Untuk Blog</a></h2><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QaMWGHYMGyXubIrhVHmU4V4qCsdmZgdVCmJaaPPOVGeNjmfdZqVdkcfjlKLbVH-WIzPqw4FPJfLBXdc8zsQrG17tbkzNE5tHFKMPAtN9iiIx54wyd7keNsV7LOqBAyv-lf76EPTPcXOC/s1600/Fans-Like-Facebook-karrysta.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QaMWGHYMGyXubIrhVHmU4V4qCsdmZgdVCmJaaPPOVGeNjmfdZqVdkcfjlKLbVH-WIzPqw4FPJfLBXdc8zsQrG17tbkzNE5tHFKMPAtN9iiIx54wyd7keNsV7LOqBAyv-lf76EPTPcXOC/s1600/Fans-Like-Facebook-karrysta.jpg" title="Modifikasi Fans Page Like Facebook Untuk Blog" /></a><span class="awal">A</span>ssalamualaikum warahmatullahi wabarakatuh. Salam ketemu lagi disini buat sobat dan rekan blogging semua, Semoga kabar baik yang selalu saya harapkan untuk anda semua. Beberapa hari dalam bulan ini saya selalu membagikan post baru dengan artikel yang campur aduk, seperti yang saya publikasikan kemarin tentang artikel : <span style="font-size: large;"><b><a href="http://karristaent.blogspot.com/2014/10/nikah.html" rel="nofollow" target="_blank" title="Nikah">Nikah</a>.</b></span> Nah pada artikel ini saya akan berbagi cara memodifikasi widget like Facebook, Istilah yang sering saya baca ialah Widget Fans page like facebook. Sebetulnya widget ini sama saja seperti pada widget fans page facebook pada umumnya. Namun disini saya akan sedikit menambahkan script untuk memodifikasi agar tampilanya sedikit unik menarik dan yang jelas sedap di pandang mata juga tidak membosankan. Jika anda belum memsang widget tersebut, atau sudah memasangnya lantas ingin merubahnya dengan Trik yang akan saya bagikan ini,? Selengkapnya silahkan simak penuturan cara memasang/merubahnya berikut dibawah ini dengan seksama.</div><h4 style="text-align: left;"><span style="font-size: large;">Tutorial Widget Blog lainya :    <a href="http://karristaent.blogspot.com/search/label/Widget?max-results=7" rel="tag nofollow" target="_blank" title="Widget">Semua tentang Widget</a></span></h4><h3>Fans Page Like Facebook : </h3><div style="text-align: justify;">Media sosial seperti facebook semua kalangan sudah pada tau semua termasuk pada dunia blogging dan web siyus. Jarangsaya lihat blog yang saya kunjungi tidak ada peran sertanya media sosial. Pasti ada entah itu di pasang sendiri oleh Adminya, Atau bawa'an template yang sudah di lengkapi media sosialnya. Pentingnya facebook pada blog ini bukan rahasia umum lagi. Karena dengan adanya sosmed seperti facebook bisa di jadikan alat marketing artikel kita dimana pengunjung yang akan mengetahui link blog anda. bukan saja dari teman blogging.yang mengetahuinya tetapi pengunjung dari facobook dan sosmed lainya ini bisa mengetahui link blog anda. Maka like box di blog bagi saya yang pemula ini penting sekali keberadaanya berikut ini cara memasangkanya.</div><h5 style="text-align: left;"><span style="font-size: large;">Cara Memasang Style Fans page Like Facebook :</span></h5><div style="text-align: justify;">Pertama anda buka dashboard blog jangan lupa sign in, Selanjutnya pada dashboard blog pilih Template, lalu pilih lagi edite template. Selanjutnya cari kode  <span style="color: blue;"><b><body></b></span>  Tekan  <span style="color: blue;"><b>Ctr + F</b></span>  untuk memudahkan pencarian pada tatanan template anda jika sudah ketemu kode nya. Silahkan taruh kode javascript dibawah ini tepat dibawah kode  <span style="color: blue;"><b><body>  </b></span>berikut di bawah ini kode javascriptnya :</div><br /><blockquote class="tr_bq"><blockquote class="tr_bq"><div id='fb-root'></div><br /><script>(function(d, s, id) {<br />var js, fjs = d.getElementsByTagName(s)[0];<br />if (d.getElementById(id)) return;<br />js = d.createElement(s); js.id = id;js.async=true;<br />js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";<br />fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script></blockquote></blockquote><br />Silahkan simpan/save dulu template blog anda dan, silahkan melanjutkan tutorial selanjutnya <br /><h6 style="text-align: left;"><span style="font-size: large;">Memasang kode javascript pada Layout : </span></h6><div style="text-align: justify;">Pada point ini anda harus memasangkan kode javascrit pada tata letak/layout dashboard blog anda. Berikut ini panduan cara pemasangan kodenya : Buka Dashboard pilih tata letak/layout selanjutnya pilih <span style="color: purple;">ADD</span> Widget pada kolom <span style="color: blue;"><b>HTML</b></span> add widget masukan kode javascript di bawah ini, Kebetulan ada 3 (tiga) style tampilan yang berbeda, yang saya bubuhi dan saya belai dengan penambahan script yang di modifikasi berikut dibawah ini kode html javascriptnya :</div><br /><span style="font-size: large;"><b>Style Fans Page Like Facebook 01 :</b></span><br /><br /><blockquote class="tr_bq"><i rel="pre"><div style="background-color:#ccffff;width:285px;padding:10px 0 10px 10px;height:250px;border:2px solid #ffff00;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;"><br /><div class="fb-like-box" data-href="<span style="color: red;">https://www.facebook.com/Karristaent.Blogspot</span>" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div></i></blockquote><br /><b>Demo penampilan 01. Seperti dibawah ini :</b><br /><br /><div style="background-color:#ccffff; border-radius: 10px; border: 2px solid #ffff00; box-shadow: 4px 4px 0 rgba(0,0,255,0.45); height: 250px; padding: 10px 0 10px 10px; width: 285px;"><div style="height: 250px; overflow: hidden;"><div class="fb-like-box" data-header="false" data-href="https://www.facebook.com/Karristaent.Blogspot" data-show-faces="true" data-stream="false" data-width="285"></div></div></div><br /><span style="font-size: large;"><b>Style Fans Page Like Facebook 02 :</b></span><br /><br /><blockquote class="tr_bq"><i rel="pre"><div style=".width:285px;padding:10px 0px 10px 10px;height:300px;border-top:5px solid #ff1943;border-right:5px solid tomato;border-bottom:5px solid #ff1943;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HoEEse9xu5g3ZsSVPhj-WlDGrtruCibyZJLftETrDe9N2jCST9MNzIrv-U-zVgRiJ2__oBT1tzcPj5qOlkpUBOrvN_4Ina1ow-Y15WuUeY6_-RD3HyDHcLIBwUatTXWMnHC02mpmwfxO/s1600/facebook-karrysta2pel.jpg'</span>);overflow:hidden;border-radius: 110px;.height:300px;width: 285px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><br /><div class="fb-like-box" data-href="<span style="color: red;">https://www.facebook.com/Karristaent.Blogspot</span>" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div><br /></i></blockquote><br /><b>Demo penampilan 02. Seperti dibawah ini :</b><br /><br /><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HoEEse9xu5g3ZsSVPhj-WlDGrtruCibyZJLftETrDe9N2jCST9MNzIrv-U-zVgRiJ2__oBT1tzcPj5qOlkpUBOrvN_4Ina1ow-Y15WuUeY6_-RD3HyDHcLIBwUatTXWMnHC02mpmwfxO/s1600/facebook-karrysta2pel.jpg'); border-bottom: 5px solid #ff1493; border-left: 5px solid blue; border-radius: 0px 13px 0px 0px; border-radius: 0px 30px 0px 0px; border-radius: 110px; border-right: 5px solid blue; border-top: 5px solid #ff1493; height: 300px; height: 300px; overflow: hidden; overflow: hidden; padding: 10px 0px 10px 10px; width: 285px; width: 285px;"><div style="height: 300px; overflow: hidden;"><div class="fb-like-box" data-header="false" data-href="https://www.facebook.com/Karristaent.Blogspot" data-show-faces="true" data-stream="false" data-width="285"></div></div></div><br /><br /><span style="font-size: large;"><b>Style Fans Page Like Facebook 03 :</b></span><br /><blockquote class="tr_bq"><i rel="pre"><i rel="pre"><div style=".width:248px; padding:10px 0px 10px 10px;height:230px;border-top:5px solid #00ff00;border-right:5px solid #00ff00;border-bottom:5px solid #00ff00;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnCfjQwF6a6l2MiYx9V6q5PtmOyXO2GfjnRhqMfnjtoWiiToS3ZDj50VQhnpDtyEWTjtKQRpRHHnXJLFAMkiBcNjSdOzofDtzQDdpxpQe_QWE8ZqdptJwHSOWQVl4-sRceDtAQvDJhNXkp/s1600/facebook-karrysta33.jpg</span>');overflow:hidden;.height:250px;width: 238px;border: 5px outset #ffa500;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><br /><div class="fb-like-box" data-href="<span style="color: red;">https://www.facebook.com/Karristaent.Blogspot</span>" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div><br /></i></i></blockquote><br /><b>Demo penampilan 03. Seperti dibawah ini :</b><br /><br /><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnCfjQwF6a6l2MiYx9V6q5PtmOyXO2GfjnRhqMfnjtoWiiToS3ZDj50VQhnpDtyEWTjtKQRpRHHnXJLFAMkiBcNjSdOzofDtzQDdpxpQe_QWE8ZqdptJwHSOWQVl4-sRceDtAQvDJhNXkp/s1600/facebook-karrysta33.jpg'); border-bottom: 5px solid #00ff00; border-left: 5px solid tomato; border-radius: 0px 13px 0px 0px; border-radius: 0px 30px 0px 0px; border-right: 5px solid #00ff00; border-top: 5px solid #00ff00; border: 5px outset #ffa500; height: 230px; height: 250px; overflow: hidden; overflow: hidden; padding: 10px 0px 10px 10px; width: 238px; width: 248px;"><div style="height: 250px; overflow: hidden;"><div class="fb-like-box" data-header="false" data-href="https://www.facebook.com/Karristaent.Blogspot" data-show-faces="true" data-stream="false" data-width="285"></div></div></div><br /><b>Keterangan :</b><br /><div style="text-align: justify;">Pada ke 2 kode Style fans page facebook diatas, Silahkan ganti URL yang berwarna MERAH dengan url halaman facebook punya anda. Lalu URL yang berwarna BIRU itu gambar background widget nomor 2, jika anda ingin bisa ganti dengan gambar yang lain, Misalnya gambar cewk kekasih anda, biar tambah cakep. Dan pada bidang bagian kode Width untuk lebar widget, dan height untuk ukuran tinggi widget. Lalu untuk warna silahkan sesuaikan menurut warna dan ukuran yang anda kehendaki. Setelah anda pilih salah satu'' Style kode Fans page Facebook ini pada kolom Add widget seperti contoh diatas, silahkan save add widget nya, coba tinjau halaman blog anda, jika penerapanya sesuai dengan tutorial diatas maka akan teripta sebuah widget Fans page like facebook yang unik campernik. Jika masih belum nampak silahkan baca ulang artikel ini, Atau silahkan tanyakan/diskusikan lewat komentar nanti dibawah post ini.<br /><br />Jangan lupa setiap penambahan widget baru pada halaman blog anda selalu hapus kode yang membuat error validasi <b><span style="color: #38761d;">HTML 5</span></b>. Karena script Style Fans page like facebook ini, sudah saya jamain lolos dari <b><span style="color: #38761d;">Validasi HTML</span></b> Silahkan dicek kebenaranya, asalakan pemasanganya sesuai petunjuk prosedur diatas.<br /><br />Hapus kode di bawah ini pada bagian edite template blog anda dan save kemabli tempaltenya :</div><br /><blockquote class="tr_bq"><i rel="pre"><b><span style="color: red;"><b:include name='quickedit'/></span></b><br /></i></blockquote><br /><b>Silahkan cek validasi Html 5 pada post artikel ini :  <span style="font-size: large;"> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fkarristaent.blogspot.com%2F2014%2F10%2Fmodifikasi-fans-page-like-facebook-untuk-blog.html&charset=%28detect+automatically%29&doctype=Inline&group=0" rel="nofollow" target="_blank" title="Validasi HTML5">Cek Validasi HTML 5</a></span></b><br /><br /><div style="text-align: justify;">Save jangan lupa jika kode diatas sudah dihapus pada bagian template anda. Demikianlah kiranya tutorial Memodifikasi Fans page like facebook untuk blog ini, semoga dipahami jika ada yang kurang di mengerti silahkan diskusikan pada form komentar di bawah ini. Semoga yang saya hadirkan ini bisa bermanfaat buat sobat yang memerlukanya. Tetap semangat dalam berkaraya, salam ceria .. Happy Blogging...</div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-rkSl_VIV_BQ%2FVE_3w4KEyxI%2FAAAAAAAAFIY%2Fazk5VWPaGhQ%2Fs1600%2FFans-Like-Facebook-karrysta.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QaMWGHYMGyXubIrhVHmU4V4qCsdmZgdVCmJaaPPOVGeNjmfdZqVdkcfjlKLbVH-WIzPqw4FPJfLBXdc8zsQrG17tbkzNE5tHFKMPAtN9iiIx54wyd7keNsV7LOqBAyv-lf76EPTPcXOC/s1600/Fans-Like-Facebook-karrysta.jpg" -->

Modifikasi Fans Page Like Facebook Untuk Blog A ssalamualaikum warahmatullahi wabarakatuh. Salam ketemu lagi disini buat sobat dan rekan blo...

Read More